/* =========================
   CONFIGURACIÓN GENERAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f5f7f3;
    color: #263238;
}


/* =========================
   BARRA SUPERIOR
========================= */

.topbar {
    background-color: #0b3d2e;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 7%;

    font-size: 14px;
}


/* =========================
   ENCABEZADO
========================= */

.header {
    background-color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 15px 7%;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}


/* =========================
   MARCA
========================= */

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    width: 60px;
    height: 60px;

    background-color: #2e7d32;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 30px;
}

.brand-text h1 {
    color: #1b4d2e;
    font-size: 22px;
}

.brand-text p {
    margin-top: 5px;
    font-size: 13px;
    color: #555;
}


/* =========================
   MENÚ
========================= */

.navbar {
    display: flex;
    gap: 25px;
}

.navbar a {
    text-decoration: none;
    color: #263238;

    font-size: 14px;
    font-weight: bold;

    transition: 0.3s;
}

.navbar a:hover {
    color: #2e7d32;
}


/* =========================
   SECCIÓN PRINCIPAL - HERO
========================= */

.hero {
    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 80px 7%;

    /* Fondo temporal */
    background: linear-gradient(
        135deg,
        #0b3d2e,
        #1b5e20,
        #4f8a3a
    );
}


/* CONTENIDO */

.hero-content {
    max-width: 700px;
    color: white;
}


/* TÍTULO */

.hero h2 {
    font-size: 68px;
    line-height: 1.05;

    margin-bottom: 25px;

    letter-spacing: 1px;
}

.hero h2 span {
    display: block;
    color: #9acd4b;
}


/* DESCRIPCIÓN */

.hero p {
    max-width: 650px;

    font-size: 22px;
    line-height: 1.6;

    margin-bottom: 35px;

    color: #f1f5f1;
}


/* BOTONES */

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;

    padding: 15px 25px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: bold;
    font-size: 14px;

    transition: 0.3s;
}


/* BOTÓN VERDE */

.btn-primary {
    background-color: #6fae3d;
    color: white;
}

.btn-primary:hover {
    background-color: #558a2f;

    transform: translateY(-3px);
}


/* BOTÓN TRANSPARENTE */

.btn-secondary {
    border: 2px solid white;

    color: white;
}

.btn-secondary:hover {
    background-color: white;

    color: #1b4d2e;

    transform: translateY(-3px);
}

/* =========================
   PANEL DE INDICADORES
========================= */

.stats {
    width: 92%;

    margin: -45px auto 70px;

    background-color: white;

    border-radius: 18px;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

    position: relative;

    z-index: 10;

    overflow: hidden;
}


/* CADA INDICADOR */

.stat {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 25px 15px;

    border-right: 1px solid #e5e5e5;
}

.stat:last-child {
    border-right: none;
}


/* ICONO */

.stat-icon {
    width: 55px;
    height: 55px;

    border-radius: 50%;

    background-color: #eef5e9;

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 28px;

    flex-shrink: 0;
}


/* INFORMACIÓN */

.stat-info h3 {
    font-size: 22px;

    color: #1b4d2e;

    margin-bottom: 5px;
}

.stat-info p {
    font-size: 13px;

    color: #555;

    line-height: 1.4;
}

/* =========================
   NUESTRAS DIMENSIONES
========================= */

.dimensions-section {
    padding: 40px 7% 90px;

    background-color: #f5f7f3;
}


/* ENCABEZADO */

.section-heading {
    margin-bottom: 35px;
}

.section-heading-text {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    max-width: 650px;
}


/* LÍNEA VERDE */

.section-line {
    width: 45px;
    height: 3px;

    background-color: #2e7d32;

    margin-top: 18px;

    flex-shrink: 0;
}


/* TÍTULO */

.section-heading h2 {
    color: #1b4d2e;

    font-size: 32px;

    margin-bottom: 12px;
}


/* DESCRIPCIÓN */

.section-heading p {
    color: #607060;

    line-height: 1.7;

    font-size: 16px;
}


/* =========================
   GRID DE TARJETAS
========================= */

.dimensions-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}


/* =========================
   TARJETA
========================= */

.dimension-card {
    background-color: white;

    border-radius: 16px;

    padding: 30px 22px;

    min-height: 280px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);

    border: 1px solid #e8ece6;

    transition: 0.3s;
}


.dimension-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}


/* =========================
   ICONOS
========================= */

.dimension-icon {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 38px;

    margin-bottom: 18px;
}


.water {
    background-color: #e3f3f6;
}

.energy {
    background-color: #fff4d8;
}

.waste {
    background-color: #eaf5e6;
}

.biodiversity {
    background-color: #e8f3e4;
}

.garden {
    background-color: #edf7e8;
}

.education {
    background-color: #f0e8f7;
}

.participation {
    background-color: #fbe9ef;
}


/* =========================
   TEXTO DE LA TARJETA
========================= */

.dimension-card h3 {
    color: #244a31;

    font-size: 18px;

    margin-bottom: 12px;

    line-height: 1.3;
}

.dimension-card p {
    color: #66736a;

    font-size: 14px;

    line-height: 1.6;

    flex-grow: 1;
}


/* ENLACE */

.dimension-card a {
    text-decoration: none;

    color: #4f7f2d;

    font-weight: bold;

    font-size: 14px;

    margin-top: 20px;
}

/* =========================
   NUESTRO PROYECTO
========================= */

.project-section {
    padding: 100px 7%;

    background-color: white;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


/* =========================
   TÍTULO
========================= */

.project-title {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 25px;
}


.section-tag {
    color: #5b8f36;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;

    margin-bottom: 10px;
}


.project-title h2 {
    color: #1b4d2e;

    font-size: 42px;

    line-height: 1.2;
}


/* =========================
   DESCRIPCIÓN
========================= */

.project-description {
    color: #607060;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 35px;
}


/* =========================
   CARACTERÍSTICAS
========================= */

.project-features {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


.feature {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


.feature-icon {
    width: 52px;
    height: 52px;

    border-radius: 14px;

    background-color: #eef5e9;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 26px;

    flex-shrink: 0;
}


.feature h3 {
    color: #244a31;

    font-size: 18px;

    margin-bottom: 6px;
}


.feature p {
    color: #68756d;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================
   BOTÓN
========================= */

.project-button {
    display: inline-block;

    margin-top: 35px;

    padding: 15px 24px;

    background-color: #2e7d32;

    color: white;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s;
}


.project-button:hover {
    background-color: #1b5e20;

    transform: translateY(-3px);
}


/* =========================
   PARTE VISUAL
========================= */

.project-visual {
    min-height: 500px;

    background:
        linear-gradient(
            135deg,
            #e7f1e4,
            #cfe4c7
        );

    border-radius: 30px;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;
    align-items: center;
}


/* CÍRCULOS DECORATIVOS */

.project-circle {
    position: absolute;

    border-radius: 50%;

    background-color: rgba(46, 125, 50, 0.12);
}


.circle-one {
    width: 350px;
    height: 350px;

    top: -120px;
    right: -100px;
}


.circle-two {
    width: 250px;
    height: 250px;

    bottom: -100px;
    left: -80px;
}


/* TARJETA CENTRAL */

.project-card {
    width: 270px;

    background-color: white;

    padding: 40px 25px;

    border-radius: 25px;

    text-align: center;

    position: relative;

    z-index: 2;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}


.project-card-icon {
    font-size: 70px;

    margin-bottom: 15px;
}


.project-card h3 {
    color: #1b4d2e;

    font-size: 24px;

    margin-bottom: 10px;
}


.project-card p {
    color: #68756d;

    font-size: 14px;
}


/* =========================
   TARJETAS FLOTANTES
========================= */

.floating-card {
    position: absolute;

    background-color: white;

    padding: 10px 16px;

    border-radius: 30px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

    font-size: 14px;

    font-weight: bold;

    z-index: 3;
}


.floating-one {
    top: 70px;
    left: 40px;
}


.floating-two {
    bottom: 90px;
    right: 35px;
}


.floating-three {
    bottom: 35px;
    left: 60px;
}

/* =========================
   NUESTROS RETOS
========================= */

.challenges-section {
    background-color: #1b4d2e;

    padding: 100px 7%;

    color: white;
}


/* ENCABEZADO */

.challenges-header {
    max-width: 650px;

    margin-bottom: 55px;
}


.challenges-header .section-tag {
    color: #9acd4b;
}


.challenges-header h2 {
    font-size: 42px;

    margin: 12px 0 20px;
}


.challenges-header p {
    color: #d8e4d7;

    font-size: 17px;

    line-height: 1.8;
}


/* GRID */

.challenges-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


/* TARJETAS */

.challenge-card {
    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 18px;

    padding: 30px;

    position: relative;

    transition: 0.3s;
}


.challenge-card:hover {
    background-color: rgba(255, 255, 255, 0.15);

    transform: translateY(-8px);
}


/* NÚMERO */

.challenge-number {
    position: absolute;

    top: 20px;
    right: 25px;

    color: rgba(255, 255, 255, 0.25);

    font-size: 30px;

    font-weight: bold;
}


/* ICONO */

.challenge-icon {
    width: 60px;
    height: 60px;

    background-color: rgba(154, 205, 75, 0.15);

    border-radius: 16px;

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 30px;

    margin-bottom: 25px;
}


/* TEXTO */

.challenge-card h3 {
    font-size: 20px;

    margin-bottom: 12px;
}


.challenge-card p {
    color: #c9d8c8;

    font-size: 14px;

    line-height: 1.7;
}

/* =========================
   MATRIZ DE ACCIÓN
========================= */

.matrix-section {
    background-color: #f5f7f3;

    padding: 100px 7%;

    text-align: center;
}


/* ENCABEZADO */

.matrix-header {
    max-width: 700px;

    margin: 0 auto 60px;
}


.matrix-header .section-tag {
    color: #5b8f36;

    font-weight: bold;

    font-size: 13px;

    letter-spacing: 1px;
}


.matrix-header h2 {
    color: #1b4d2e;

    font-size: 42px;

    margin: 12px 0 20px;
}


.matrix-header p {
    color: #607060;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================
   FLUJO DE LA MATRIZ
========================= */

.matrix-flow {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-bottom: 60px;
}


/* PASOS */

.matrix-step {
    background-color: white;

    width: 190px;

    min-height: 230px;

    padding: 25px 18px;

    border-radius: 18px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

    border: 1px solid #e6ece4;

    transition: 0.3s;
}


.matrix-step:hover {
    transform: translateY(-8px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}


/* ICONO */

.matrix-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 18px;

    border-radius: 18px;

    background-color: #edf5e9;

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 32px;
}


.matrix-step h3 {
    color: #244a31;

    font-size: 18px;

    margin-bottom: 12px;
}


.matrix-step p {
    color: #68756d;

    font-size: 13px;

    line-height: 1.6;
}


/* FLECHAS */

.matrix-arrow {
    color: #5b8f36;

    font-size: 35px;

    font-weight: bold;
}


/* =========================
   MENSAJE
========================= */

.matrix-message {
    max-width: 800px;

    margin: 0 auto 35px;

    background-color: #e8f2e3;

    border-left: 5px solid #5b8f36;

    padding: 22px 30px;

    display: flex;

    align-items: center;

    gap: 18px;

    text-align: left;

    border-radius: 10px;
}


.matrix-message-icon {
    font-size: 30px;
}


.matrix-message p {
    color: #48604d;

    line-height: 1.7;
}


/* =========================
   BOTÓN
========================= */

.matrix-button-container {
    margin-top: 25px;
}


.matrix-button {
    display: inline-block;

    background-color: #2e7d32;

    color: white;

    padding: 16px 28px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: bold;

    font-size: 14px;

    transition: 0.3s;
}


.matrix-button:hover {
    background-color: #1b5e20;

    transform: translateY(-3px);
}

/* =========================
   RESULTADOS E IMPACTO
========================= */

.impact-section {
    padding: 100px 7%;
    background-color: #1b4d2e;
    text-align: center;
}

.impact-header {
    max-width: 700px;
    margin: 0 auto 60px;
}

.impact-header .section-tag {
    color: #9acd4b;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
}

.impact-header h2 {
    color: white;
    font-size: 42px;
    margin: 12px 0 20px;
}

.impact-header p {
    color: #d8e4d7;
    font-size: 17px;
    line-height: 1.8;
}

.impact-grid {
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.impact-card {
    padding: 30px 20px;

    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 18px;

    transition: 0.3s;
}

.impact-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.13);
}

.impact-icon {
    font-size: 34px;
    margin-bottom: 15px;
}

.impact-number {
    color: #9acd4b;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 8px;
}

.impact-card h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 10px;
}

.impact-card p {
    color: #c9d8c8;
    font-size: 14px;
    line-height: 1.6;
}

.impact-quote {
    max-width: 850px;
    margin: 60px auto 0;

    padding: 25px 35px;

    background-color: rgba(255, 255, 255, 0.08);

    border-radius: 15px;

    display: flex;
    align-items: center;
    gap: 20px;

    text-align: left;
}

.impact-quote span {
    font-size: 40px;
}

.impact-quote p {
    color: #d8e4d7;
    line-height: 1.7;
}

.impact-quote strong {
    color: #9acd4b;
}

/* =========================
   PARTICIPA
========================= */

.participate-section {
    padding: 100px 7%;
    background-color: #f5f7f3;
}


/* ENCABEZADO */

.participate-header {
    max-width: 700px;
    margin: 0 auto 60px;

    text-align: center;
}

.participate-header .section-tag {
    color: #5b8f36;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
}

.participate-header h2 {
    color: #1b4d2e;
    font-size: 42px;
    margin: 12px 0 20px;
}

.participate-header p {
    color: #607060;
    font-size: 17px;
    line-height: 1.8;
}


/* TARJETAS */

.participate-grid {
    max-width: 1100px;
    margin: 0 auto 70px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.participate-card {
    background-color: white;

    padding: 40px 30px;

    border-radius: 20px;

    border: 1px solid #e2e9df;

    text-align: center;

    position: relative;

    transition: 0.3s;
}

.participate-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.1);
}


/* TARJETA DESTACADA */

.featured-card {
    border: 2px solid #6fa63b;

    transform: scale(1.04);
}

.featured-card:hover {
    transform: scale(1.04) translateY(-8px);
}


.featured-label {
    position: absolute;

    top: -14px;
    left: 50%;

    transform: translateX(-50%);

    background-color: #5b8f36;

    color: white;

    padding: 7px 16px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: bold;

    white-space: nowrap;
}


/* ICONO */

.participate-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 22px;

    border-radius: 20px;

    background-color: #edf5e9;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 38px;
}


/* TEXTO */

.participate-card h3 {
    color: #244a31;

    font-size: 22px;

    margin-bottom: 15px;
}

.participate-card p {
    color: #68756d;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 25px;
}


/* ACCIONES */

.participate-actions {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.participate-actions span {
    background-color: #f2f7ef;

    color: #477234;

    padding: 9px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: bold;
}


/* =========================
   LLAMADO A LA ACCIÓN
========================= */

.participate-cta {
    max-width: 1050px;

    margin: 0 auto;

    padding: 35px 45px;

    background-color: #1b4d2e;

    border-radius: 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.participate-cta h3 {
    color: white;

    font-size: 25px;

    margin-bottom: 8px;
}

.participate-cta p {
    color: #d8e4d7;

    font-size: 15px;
}


.participate-button {
    background-color: #9acd4b;

    color: #1b4d2e;

    padding: 16px 25px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    white-space: nowrap;

    transition: 0.3s;
}

.participate-button:hover {
    background-color: white;

    transform: translateY(-3px);
}

/* =========================
   FOOTER
========================= */

.site-footer {
    background-color: #123824;

    color: white;

    padding: 80px 7% 0;
}


/* CONTENIDO PRINCIPAL */

.footer-content {
    max-width: 1300px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1.4fr;

    gap: 60px;

    padding-bottom: 60px;
}


/* =========================
   MARCA
========================= */

.footer-logo {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}


.footer-logo-icon {
    width: 55px;
    height: 55px;

    border-radius: 16px;

    background-color: #2e7d32;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;
}


.footer-logo h2 {
    font-size: 20px;

    margin-bottom: 5px;

    letter-spacing: 1px;
}


.footer-logo p {
    color: #b9cfba;

    font-size: 13px;
}


.footer-description {
    color: #b9cfba;

    font-size: 14px;

    line-height: 1.8;

    max-width: 350px;

    margin-bottom: 25px;
}


.footer-location {
    color: #9acd4b;

    font-size: 14px;
}


/* =========================
   ENLACES
========================= */

.footer-links h3,
.footer-contact h3 {
    color: white;

    font-size: 17px;

    margin-bottom: 22px;
}


.footer-links {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.footer-links a {
    color: #b9cfba;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;
}


.footer-links a:hover {
    color: #9acd4b;

    transform: translateX(5px);
}


/* =========================
   CONTACTO
========================= */

.footer-contact p {
    color: #b9cfba;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 20px;
}


.footer-email {
    display: inline-block;

    color: #9acd4b;

    text-decoration: none;

    font-size: 14px;

    margin-bottom: 25px;
}


.footer-social {
    display: flex;

    gap: 12px;
}


.footer-social span {
    width: 38px;
    height: 38px;

    background-color: rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: 0.3s;
}


.footer-social span:hover {
    background-color: #2e7d32;

    transform: translateY(-4px);
}


/* =========================
   PARTE INFERIOR
========================= */

.footer-bottom {
    border-top: 1px solid
        rgba(255, 255, 255, 0.1);

    padding: 25px 0;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #8eaa94;

    font-size: 13px;
}