:root {
    --page: clamp(20px, 6.9vw, 80px);
    --olive: #344018;
    --cream: #f4ead5;
    --ink: #050505;
    --muted: #777;
    --line: #b7b7b7;
    --max: 1370px;
    --gap: 18px;
    --r: 23px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif
}

.site-header {
    width: min(calc(100% - 2 * var(--page)), var(--max));

    height: 82px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .69fr)
        var(--gap)
        minmax(0, 1fr);

    align-items: center;
}


/* ========================================
   LOGO
======================================== */

.logo {
    display: flex;
    align-items: center;

    width: 140px;

    line-height: 0;

    text-decoration: none;

    grid-column: 1;
}

.logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* ========================================
   NAVEGACIÓN
======================================== */

nav {
    grid-column: 3;

    justify-self: center;

    display: flex;
    align-items: center;

    gap: 38px;

    font-size: 16px;
    font-weight: 400;

    white-space: nowrap;
}


nav a {
    position: relative;

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

    height: 38px;

    color: #111;

    text-decoration: none;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        text-shadow 0.25s ease;
}


nav a:hover {
    transform: translateY(-1px);

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15);
}



nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 5px;

    width: 100%;
    height: 1px;

    background: #111;

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.25s ease;
}


nav a:hover::after {
    transform: scaleX(1);
}

/*
*/
/* =========================================================
   HERO — SOBRE NOSOTROS
   ========================================================= */

.about-hero {
    width: min(
        calc(100% - 2 * var(--page)),
        var(--max)
    );

    margin: 19px auto 0;

    display: grid;

    /*
     * Proporción de las dos tarjetas del mockup.
     */
    grid-template-columns:
        minmax(0, .69fr)
        minmax(0, 1fr);

    /*
     * Espacio visible entre ambas tarjetas.
     */
    gap: var(--gap);

    /*
     * Mantiene la proporción general del mockup.
     */
    aspect-ratio: 2.06 / 1;
}


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

.about-card {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: var(--r);
}


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

.about-copy {
    background: var(--olive);
    color: var(--cream);

    padding: 40px 34px 42px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
    align-items: flex-start;
}


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

.about-copy h1 {
    margin: 0;

    font-size: clamp(42px, 5vw, 76px);

    line-height: .88;

    letter-spacing: -.065em;

    font-weight: 800;
}


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

.about-copy p {
    margin: 0;

    max-width: 270px;

    font-size: 12px;
    line-height: 1.4;
}


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

.about-photo {
    background: #ddd;
}


.about-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* ========================================
   INTRO / SOMOS TERCA
   MISMA GRILLA HORIZONTAL QUE EL HERO
======================================== */

/* =========================================================
   TEAM
   ========================================================= */

.team {
    width: min(
        calc(100% - 2 * var(--page)),
        var(--max)
    );

    margin-inline: auto;

    padding-top: 50px;
    padding-bottom: 70px;
}


/* =========================================================
   INTRO
   ========================================================= */

.team-intro {
    display: grid;

    /*
     * El primer bloque ocupa más espacio.
     * El segundo contiene descripción + línea.
     * El tercero contiene cursor + texto superpuesto.
     */
    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(220px, 1.05fr)
        minmax(260px, .95fr);

    column-gap: 34px;

    align-items: center;
}


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

.team-heading {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin: 0;
    padding: 0;
}


.team-heading .eyebrow {
    display: block;

    margin: 0 0 12px;
    padding: 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .04em;
    text-transform: uppercase;
}


.team-heading h2 {
    margin: 0;
    padding: 0;

    font-size: clamp(38px, 4.15vw, 56px);

    line-height: .92;

    letter-spacing: -.065em;

    font-weight: 800;
}


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

.team-description {
    min-width: 0;

    align-self: stretch;

    display: flex;
    align-items: center;

    border-left: 1px solid var(--line);

    padding-left: 40px;

    font-size: 13px;
    line-height: 1.32;
}


.team-description p {
    margin: 0;
}


/* =========================================================
   CURSOR + TEXTO
   ========================================================= */

.mix-note {
    /*
     * Este contenedor pasa a ser el sistema de coordenadas
     * del cursor y del texto.
     */
    position: relative;

    min-width: 0;

    height: 120px;

    display: flex;
    align-items: center;

    align-self: center;
}


/* =========================================================
   PNG DEL CURSOR
   ========================================================= */

.cursor-badge {
    position: relative;

    width: 120px;
    height: 120px;

    flex: 0 0 120px;

    z-index: 1;
}


.cursor-badge img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   TEXTO SUPERPUESTO
   ========================================================= */

.mix-note strong {
    /*
     * El texto se posiciona sobre el área derecha
     * del PNG, como en la referencia.
     */
    position: absolute;

    z-index: 2;

    left: 88px;
    top: 50%;

    transform: translateY(-50%);

    width: max-content;

    margin: 0;

    font-size: 13px;
    line-height: 1.3;

    font-weight: 800;

    white-space: nowrap;
}

/* =========================================================
   fin
   ========================================================= */


/* =========================================================
   GRID DEL EQUIPO
   ========================================================= */

.team-grid {
    display: grid;

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

    column-gap: 32px;

    /*
     * Separación entre el encabezado "El equipo"
     * y las fotografías.
     */
    margin-top: 52px;
}


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

.member-card {
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   FOTO
   ========================================================= */

.member-photo {
    display: block;

    width: 100%;

    /*
     * La referencia tiene fotos bastante panorámicas.
     */
    aspect-ratio: 1.55 / 1;

    height: auto;

    object-fit: cover;

    border-radius: 20px;
}


/* Ajuste individual del encuadre si fuera necesario */

.member-card:nth-child(1) .member-photo {
    object-position: center center;
}

.member-card:nth-child(2) .member-photo {
    object-position: center center;
}

.member-card:nth-child(3) .member-photo {
    object-position: center center;
}

.member-card:nth-child(4) .member-photo {
    object-position: center center;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.member-body {
    /*
     * IMPORTANTE:
     * sacamos el padding horizontal que tenías antes.
     *
     * Así nombre, descripción y categorías arrancan
     * exactamente en el mismo eje que la foto.
     */
    padding: 16px 16px 0;
}


/* =========================================================
   NOMBRE
   ========================================================= */

.member-body h3 {
    margin: 0 0 8px;

    font-size: clamp(28px, 2.4vw, 36px);

    line-height: .95;

    font-weight: 800;

    letter-spacing: -.045em;
}


/* =========================================================
   FRASE
   ========================================================= */

.member-body h4 {
    margin: 0 0 5px;

    font-size: 14px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -.015em;
}


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

.member-body p {
    margin: 0;

    font-size: 12px;

    line-height: 1.45;

    /*
     * Mantiene alineado el comienzo de las categorías
     * aunque los textos tengan distinta cantidad de líneas.
     */
    min-height: 120px;
}


/* =========================================================
   SERVICIOS / CATEGORÍAS
   ========================================================= */

.member-body ul {
    list-style: none;

    margin: 13px 0 0;

    padding: 0;

    font-size: 11px;

    line-height: 1.2;
}


.member-body li {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 31px;

    padding: 6px 0 6px 29px;
}


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

.member-body li::before {
    content: "⌁";

    position: absolute;

    left: 1px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 18px;

    line-height: 1;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 50px 30px;
    }

    .member-body p {
        min-height: auto;
    }

}


@media (max-width: 620px) {

    .team-grid {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-top: 40px;
    }

    .member-photo {
        aspect-ratio: 1.45 / 1;
    }

    .member-body h3 {
        font-size: 32px;
    }

    .member-body p {
        min-height: auto;
    }

}
/* =========================================================
   FIN FOTOS TEAM
   ========================================================= */

/* =========================================================
   CTA
   ========================================================= */
/* =========================================================
   CTA
   ========================================================= */

/* ========================================
   CTA — SOBRE NOSOTROS
   Igual al CTA de HOME
======================================== 

.cta {
    display: grid;
    grid-template-columns: 1.22fr .92fr 1.48fr;

    min-height: 267px;

    width: 86%;
    max-width: 1360px;

    margin: 62px auto 30px;

    overflow: hidden;
    border-radius: 30px;

    background: var(--olive);
    color: var(--cream);
}


/* ========================================
   CONTENIDO — PRIMERAS 2 COLUMNAS
======================================== 

.cta-content {
    grid-column: 1 / 3;

    display: grid;
    grid-template-columns: 1.22fr .92fr;

    min-width: 0;

    align-items: center;

    padding: 0;
}


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

.cta-content h2 {
    display: flex;
    align-items: center;

    height: 100%;

    margin: 0;
    padding: 38px 20px 38px 46px;

    white-space: nowrap;

    font-size: clamp(42px, 4vw, 54px);
    line-height: .88;
    letter-spacing: -2.5px;
    font-weight: 700;
}


/* ========================================
   TEXTO + BOTÓN
======================================== 

.cta-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-width: 0;

    padding: 38px 25px;
}

.cta-action p {
    max-width: 180px;

    margin: 0 0 22px;

    font-size: 14px;
    line-height: 1.28;
    font-weight: 600;
}


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

.whatsapp-btn {
    display: inline-flex;

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

    min-height: 46px;

    padding: 0 25px;

    border-radius: 7px;

    background: #111;
    color: #fff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.whatsapp-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .20);
}


/* ========================================
   IMAGEN
======================================== 

.cta-image {
    grid-column: 3;

    position: relative;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    border-radius: 30px;
}

.cta-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 30px;
}


/* =========================================
   TERCA - CTA DESKTOP
   MISMA COMPOSICION QUE INDEX
========================================= */

@media (min-width: 1025px) {

    .cta {
        display: grid;
        grid-template-columns: 1.22fr .92fr 1.48fr;

        width: 86%;
        max-width: 1360px;
        min-height: 267px;

        margin: 62px auto 30px;

        overflow: hidden;
        border-radius: 30px;

        background: var(--olive);
        color: var(--cream);
    }

    /* COLUMNAS DE TEXTO */
    .cta-content {
        grid-column: 1 / 3;

        display: grid;
        grid-template-columns: 1.22fr .92fr;
        align-items: center;

        min-width: 0;
        padding: 0;
    }

    /* TITULO */
    .cta-content h2 {
        display: flex;
        align-items: center;

        height: 100%;

        margin: 0;
        padding: 38px 20px 38px 46px;

        font-size: clamp(42px, 4vw, 54px);
        line-height: .88;
        letter-spacing: -2.5px;
        font-weight: 700;

        white-space: normal;
    }

    /* TEXTO Y BOTON */
    .cta-action {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        min-width: 0;
        padding: 38px 25px;
    }

    .cta-action p {
        max-width: 180px;

        margin: 0 0 22px;

        font-size: 14px;
        line-height: 1.28;
        font-weight: 600;
    }

    /* BOTON IGUAL AL INDEX */
    .cta .whatsapp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        min-width: 165px;
        min-height: 46px;

        padding: 11px 17px;
        gap: 10px;

        background: var(--cream);
        color: #000;

        border: none;
        border-radius: 7px;

        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;

        text-decoration: none;
        white-space: nowrap;
    }

    /* ICONO WHATSAPP */
    .cta .whatsapp-btn .whatsapp-icon {
        display: block;

        width: 20px;
        height: 20px;
        max-width: 20px;
        max-height: 20px;

        flex: 0 0 20px;
        object-fit: contain;
    }

    /* IMAGEN DERECHA */
    .cta-image {
        grid-column: 3;

        position: relative;

        min-width: 0;
        height: 100%;

        overflow: hidden;
        border-radius: 30px;
    }

    .cta-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        border-radius: 30px;
    }
}


/* =========================================================
   FIN CTA
   ========================================================= */


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

 .footer {
    width: 1130px;
    max-width: calc(100% - 180px);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: stretch;

    padding: 65px 0 25px;

    box-sizing: border-box;
}


/* =========================================
   LOGO
========================================= */

.footer-logo {
    display: flex;
    align-items: flex-end;

    align-self: stretch;
}

.footer-logo img {
    display: block;

    width: 440px;
    height: auto;

    max-width: 100%;
}


/* =========================================
   COLUMNA DERECHA
========================================= */

.footer-right {
    position: relative;

    display: flex;
    flex-direction: column;
}


/* =========================================
   NAVEGACIÓN
========================================= */

.footer-nav {
    position: absolute;

    top: 0;
    right: 0;

    display: flex;

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

    gap: 45px;
}

.footer-nav a {
    color: #000;

    text-decoration: none;

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

    white-space: nowrap;
}


/* =========================================
   FILA INFERIOR
========================================= */

.footer-bottom {
    position: absolute;

    bottom: 0;
    right: 0;

    display: flex;

    justify-content: flex-end;
    align-items: flex-end;

    gap: 55px;

    margin-bottom: 26px;
}


/* =========================================
   REDES SOCIALES
========================================= */

.socials {
    display: flex;

    align-items: flex-end;

    gap: 25px;
}

.socials a {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

    background: var(--olive);

    text-decoration: none;
}

.socials img {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;
}


/* =========================================
   COPYRIGHT
========================================= */

.footer-copy {
    min-height: 43px;

    padding-left: 15px;

    border-left: 1px solid #555;

    display: flex;
    align-items: center;
}

.footer-copy small {
    display: block;

    margin: 0;

    font-size: 8px;
    line-height: 1.5;

    text-align: left;
}

@media(max-width:1000px) {
    .main-nav {
        gap: 18px
    }

    .hero-copy h1 {
        font-size: 48px
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .member-body p {
        min-height: auto
    }

    .team-intro {
        grid-template-columns: 1fr 1fr
    }

    .mix-note {
        grid-column: 1/-1
    }

    .cta {
        grid-template-columns: 1fr
    }

    .cta-image {
        height: 280px
    }

    .site-footer {
        grid-template-columns: 1fr;
        gap: 35px
    }
}

@media(max-width:720px) {

    .wrap,
    .site-header {
        width: min(100% - 32px, var(--max))
    }

    .site-header {
        height: 100px
    }

    .brand-word {
        font-size: 34px
    }

    .menu-toggle {
        display: block
    }

    .main-nav {
        display: none;
        position: absolute;
        z-index: 10;
        top: 88px;
        left: 16px;
        right: 16px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 18px;
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 12px 35px #0002
    }

    .main-nav.open {
        display: flex
    }

    .contact-link {
        text-align: center;
        padding: 14px
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .hero-copy,
    .hero-photo {
        height: auto;
        border-radius: 30px
    }

    .hero-copy {
        min-height: 520px;
        padding: 45px 35px
    }

    .hero-copy h1 {
        font-size: 52px
    }

    .hero-photo {
        aspect-ratio: 1.2
    }

    .team {
        padding-top: 60px
    }

    .team-intro {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .team-intro h2 {
        font-size: 42px
    }

    .team-description {
        padding-left: 24px
    }

    .mix-note {
        grid-column: auto
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .member-photo {
        height: auto;
        aspect-ratio: 1.5
    }

    .member-body {
        padding-inline: 8px
    }

    .cta {
        margin-top: 48px;
        border-radius: 30px
    }

    .cta-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 40px 32px
    }

    .cta-content h2 {
        font-size: 44px
    }

    .cta-image {
        height: 220px
    }

    .site-footer {
        padding-top: 48px
    }

    .footer-logo {
        font-size: 68px
    }

    .footer-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .footer-bottom {
        align-items: flex-end
    }

    .socials {
        gap: 10px
    }

    .socials a {
        width: 30px;
        height: 30px
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about-copy {
        padding: 36px 30px;
    }

    .about-copy h1 {
        font-size: clamp(38px, 6vw, 58px);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

/* ========================================
   TERCA - HERO EDITORIAL MOBILE
======================================== */

.hero-title-mobile {
    display: none;
}

@media (max-width: 700px) {

    /* CONTENEDOR */
    .about-hero {
        width: calc(100% - 40px);
        max-width: none;

        margin: 16px auto 0;

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;

        aspect-ratio: auto;
    }

    /* TARJETAS */
    .about-hero .about-card {
        min-width: 0;
        border-radius: 20px;
    }

    /* TARJETA VERDE */
    .about-copy {
        min-height: 0;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        gap: 42px;
        padding: 32px 26px;

        background: var(--olive);
        color: var(--cream);
    }

    /* TÍTULO */
    .about-copy h1 {
        width: 100%;
        margin: 0;

        font-size: clamp(35px, 9.5vw, 43px);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -0.055em;
    }

    .hero-title-desktop {
        display: none;
    }

    .hero-title-mobile {
        display: block;
    }

    /* LÍNEA EDITORIAL Y DESCRIPCIÓN */
    .about-copy p {
        width: 100%;
        max-width: none;

        margin: 0;
        padding-top: 18px;

        border-top: 1px solid rgba(244, 234, 213, .4);

        font-size: 14px;
        font-weight: 400;
        line-height: 1.55;
    }

    /* Ocultar saltos de línea originales del párrafo */
    .about-copy p br {
        display: none;
    }

    /* FOTOGRAFÍA */
    .about-photo {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .about-photo img {
        display: block;
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }
}

/* ========================================
   TERCA - HERO MOBILE COMPACTO
======================================== */

@media (max-width: 375px) {

    .about-copy {
        padding: 28px 22px;
        gap: 34px;
    }

    .about-copy h1 {
        font-size: 34px;
    }

    .about-copy p {
        font-size: 13px;
    }
}

/* ========================================
   TERCA - FOOTER DESKTOP
   MISMO DISEÑO QUE INDEX
======================================== */

@media (min-width: 1025px) {

    .footer {
        width: min(calc(100% - 160px), 1200px);
        max-width: none;
        margin: 0 auto;

        display: grid;
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.85fr);

        column-gap: 24px;
        align-items: center;

        padding: 48px 0 42px;
        box-sizing: border-box;
    }

    /* Logo TERCA */
    .footer-logo {
        display: flex;
        align-items: center;
        align-self: center;
        min-width: 0;
    }

    .footer-logo img {
        display: block;
        width: 100%;
        max-width: 390px;
        height: auto;
    }

    /* Bloque derecho */
    .footer-right {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        min-width: 0;
        gap: 24px;
    }

    /* Navegación */
    .footer-nav {
        position: static;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        gap: 12px;
        margin: 0;
        transform: none;
    }

    .footer-nav a {
        position: relative;
        color: #000;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Subrayado como en Index */
    .footer-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;

        width: 100%;
        height: 1px;
        background: currentColor;

        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .footer-nav a:hover::after,
    .footer-nav a:focus-visible::after {
        transform: scaleX(1);
    }

    /* Iconos y copyright */
    .footer-bottom {
        position: static;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        width: 100%;
        gap: 22px;
        margin: 0;
        transform: none;
    }

    .footer .socials {
        display: flex;
        justify-content: space-between;
        align-items: center;

        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        gap: 12px;
        padding: 0;
    }

    .footer .socials a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 26px;
        height: 26px;
        flex: 0 0 26px;

        border-radius: 50%;
        background: var(--olive);
    }

    .footer .socials img {
        display: block;
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    /* Copyright */
    .footer-copy {
        display: flex;
        align-items: center;

        flex: 0 0 auto;
        min-height: 36px;

        margin: 0;
        padding-left: 13px;
        border-left: 1px solid #777;
    }

    .footer-copy small {
        display: block;
        margin: 0;

        font-size: 10px;
        line-height: 1.4;
        font-weight: 500;
        color: #111;
        white-space: nowrap;
        text-align: left;
    }

}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    .footer-nav a::after {
        transition: none;
    }
}

/*
--------------------------------------------------------------------------------------
*/

/* ========================================
   TERCA - HEADER MOBILE
   SOBRE NOSOTROS
======================================== */

@media (max-width: 700px) {

    .site-header {
        position: relative;
        z-index: 100;

        width: calc(100% - 40px);
        height: 76px;
        margin: 0 auto;

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

    /* LOGO */
    .site-header .logo {
        width: 125px;
        flex: 0 0 auto;
    }

    .site-header .logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* HAMBURGUESA */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 44px;
        height: 44px;
        padding: 8px;

        border: 0;
        background: transparent;

        cursor: pointer;
    }

    .menu-toggle span {
        display: block;

        width: 25px;
        height: 2px;

        margin: 3px 0;
        border-radius: 2px;

        background: var(--olive);

        transition:
            transform .3s ease,
            opacity .3s ease;
    }

    /* MENÚ DESPLEGABLE */
    .site-header .main-nav {
        position: absolute;

        top: 76px;
        left: 0;
        right: 0;

        z-index: 101;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;
        width: 100%;

        padding: 14px 22px;

        background: var(--cream);
        border-radius: 14px;

        box-shadow: 0 12px 25px rgba(0, 0, 0, .10);
    }

    .site-header .main-nav.open {
        display: flex;
    }

    .site-header .main-nav a {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        width: 100%;
        height: auto;
        min-height: 52px;

        padding: 12px 0;

        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;

        color: var(--olive);
        text-decoration: none;

        border-bottom: 1px solid rgba(52, 64, 24, .15);
    }

    .site-header .main-nav a:last-child {
        border-bottom: none;
    }

    /* SIN SUBRAYADO DESKTOP EN MOBILE */
    .site-header .main-nav a::after {
        display: none;
    }

    .site-header .main-nav a:hover {
        transform: none;
        text-shadow: none;
    }

    /* ANIMACIÓN HAMBURGUESA A X */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* OCULTAR HAMBURGUESA EN DESKTOP */
@media (min-width: 701px) {
    .menu-toggle {
        display: none;
    }
}

/* ========================================
   TERCA - EL EQUIPO MOBILE
   INTRODUCCIÓN EDITORIAL
======================================== */

@media (max-width: 700px) {

    .team {
        width: calc(100% - 40px);
        max-width: none;

        margin: 0 auto;
        padding: 66px 0 70px;
    }

    /* INTRO: UNA SOLA COLUMNA */
    .team-intro {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;
    }

    /* TÍTULO */
    .team-heading {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .team-heading .eyebrow {
        margin-bottom: 16px;

        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;

        color: var(--muted);
    }

    .team-heading h2 {
        margin: 0;

        font-size: clamp(34px, 9vw, 42px);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: -.055em;
    }

    /* DESCRIPCIÓN */
    .team-description {
        display: block;
        width: 100%;

        margin-top: 28px;
        padding: 20px 0 0;

        border-left: none;
        border-top: 1px solid var(--line);

        font-size: 15px;
        line-height: 1.55;
    }

    .team-description p {
        margin: 0;
    }

    .team-description br {
        display: none;
    }

    /* CURSOR + FRASE */
    .mix-note {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;
        height: auto;
        min-height: 90px;

        margin-top: 28px;
        padding: 0;

        grid-column: auto;
    }

    .cursor-badge {
        position: relative;

        width: 90px;
        height: 90px;
        flex: 0 0 90px;
    }

    .cursor-badge img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mix-note strong {
        position: static;

        width: auto;
        margin-left: 10px;

        transform: none;

        font-size: 15px;
        font-weight: 800;
        line-height: 1.3;

        white-space: normal;
    }
}

/* ========================================
   TERCA - INTEGRANTES MOBILE
   ESTILO EDITORIAL
======================================== */

@media (max-width: 700px) {

    /* UNA TARJETA POR FILA */
    .team-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 52px;
        margin-top: 48px;
    }

    .member-card {
        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;
    }

    /* FOTOGRAFÍA */
    .member-photo {
        display: block;

        width: 100%;
        height: auto;
        aspect-ratio: 1.35 / 1;

        object-fit: cover;
        border-radius: 18px;
    }

    /* CONTENIDO */
    .member-body {
        padding: 20px 2px 0;
    }

    /* NOMBRE */
    .member-body h3 {
        margin: 0 0 10px;

        font-size: 36px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.055em;
    }

    /* FRASE PERSONAL */
    .member-body h4 {
        margin: 0 0 14px;

        font-size: 17px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.02em;
    }

    /* BIOGRAFÍA */
    .member-body p {
        min-height: 0;

        margin: 0;

        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;

        color: #333;
    }

    /* ESPECIALIDADES */
    .member-body ul {
        display: flex;
        flex-wrap: wrap;

        gap: 8px;

        margin: 20px 0 0;
        padding: 0;

        list-style: none;
    }

    .member-body li {
        display: inline-flex;
        align-items: center;

        width: auto;
        min-height: 0;

        padding: 8px 12px;

        border: 1px solid rgba(52, 64, 24, .25);
        border-radius: 30px;

        color: var(--olive);

        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
    }

    /* QUITAMOS EL SÍMBOLO ANTERIOR
       PORQUE AHORA USAMOS ETIQUETAS */
    .member-body li::before {
        display: none;
    }
}

/* ========================================
   TERCA - AJUSTE INTRO EQUIPO MOBILE
======================================== */

@media (max-width: 700px) {

    /* Reducimos el espacio después de la descripción */
    .team-description {
        margin-top: 24px;
        padding-top: 18px;
    }

    /* Cursor + frase más compactos */
    .mix-note {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 0;
        height: auto;

        margin-top: 22px;
        padding: 0;

        gap: 14px;
    }

    /* Cursor original */
    .cursor-badge {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

    .cursor-badge img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Frase destacada */
    .mix-note strong {
        position: static;
        transform: none;

        flex: 1;
        width: auto;

        margin: 0;

        font-size: 14px;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: -.015em;

        white-space: normal;
    }

    /* Acercamos las fotografías */
    .team-grid {
        margin-top: 32px;
    }
}

/* ========================================
   TERCA - EQUIPO MOBILE
   COMPOSICIÓN EDITORIAL
======================================== */

@media (max-width: 700px) {

    .mix-note {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 0;
        height: auto;

        margin-top: 30px;
        padding: 12px 0 20px;
        gap: 14px;

        position: relative;
    }

    /* Frase protagonista */
    .mix-note strong {
        position: static;
        transform: none;

        flex: 1;
        width: auto;
        margin: 0;

        font-size: clamp(23px, 6.5vw, 29px);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -.045em;

        color: var(--olive);
        white-space: normal;
    }

    /* Cursor a la derecha */
    .cursor-badge {
        position: relative;

        width: 72px;
        height: 72px;
        flex: 0 0 72px;
    }

    .cursor-badge img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Acento editorial */
    .mix-note::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;

        width: 64px;
        height: 3px;

        background: var(--olive);
    }

    /* Menos espacio antes de Paula */
    .team-grid {
        margin-top: 30px;
    }
}


/* =========================================
   SOBRE NOSOTROS - ICONOS DEL EQUIPO
   SOLO DESKTOP
========================================= */

@media (min-width: 1051px) {

    /* Lista de especialidades */
    .member-body ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Cada especialidad */
    .member-body li {
        position: relative;
        display: flex;
        align-items: center;

        min-height: 20px;
        padding: 0 0 0 25px;

        font-size: 11px;
        line-height: 1.4;
    }

    /* Configuración general de los iconos */
    .member-body li::before {
        content: "";
        display: block;

        position: absolute;
        left: 0;
        top: 50%;

        width: 17px;
        height: 17px;

        transform: translateY(-50%);

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* BRANDING Y DISEÑO */
    .member-body li:first-child:nth-last-child(4)::before,
    .member-body li:nth-child(1):has(+ li + li:last-child)::before {
        background-image: url("../../assets/iconos/branding.png");
    }

    /* Asignación según la especialidad */
    .member-body li:has(+ li) {
        /* Mantener estructura original */
    }
}


/* =========================================
   ASIGNACION DE ICONOS - DESKTOP
========================================= */

@media (min-width: 1051px) {

    .member-body li.icon-branding::before {
        background-image: url("../../assets/iconos/branding.png");
    }

    .member-body li.icon-digital::before {
        background-image: url("../../assets/iconos/digital.png");
    }

    .member-body li.icon-eventos::before {
        background-image: url("../../assets/iconos/eventos.png");
    }

    .member-body li.icon-empresariales::before {
        background-image: url("../../assets/iconos/empresariales.png");
    }

}


/* =========================================
   TERCA - SISTEMA TIPOGRAFICO GLOBAL
   DESKTOP + MOBILE
========================================= */

/*
:root {
    --font-title: "Inter", Arial, sans-serif;
    --font-text: "Manrope", Arial, sans-serif;
}

/* Textos generales 
body,
p,
span,
small,
li,
a,
button,
label,
input,
textarea,
select,
strong,
b {
    font-family: var(--font-text) !important;
    font-weight: 800 !important;
}

/* Títulos 
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
}
*/


/* =========================================
   TERCA - CTA SOBRE NOSOTROS MOBILE
========================================= */

@media (max-width: 700px) {

    .cta {
        display: flex;
        flex-direction: column;

        width: calc(100% - 40px);
        max-width: none;
        min-height: 0;

        margin: 35px auto 24px;

        border-radius: 22px;
        overflow: hidden;

        background: var(--olive);
    }

    /* Contenido verde */
    .cta-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        min-width: 0;

        gap: 22px;
        padding: 34px 26px 32px;
    }

    /* Título */
    .cta-content h2 {
        display: block;

        width: 100%;
        height: auto;

        margin: 0;
        padding: 0;

        font-size: clamp(34px, 9vw, 43px);
        line-height: 1.02;
        letter-spacing: -.05em;

        white-space: normal;
    }

    /* Texto y botón */
    .cta-action {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        padding: 0;
        gap: 20px;
    }

    .cta-action p {
        width: 100%;
        max-width: 300px;

        margin: 0;

        font-size: 14px;
        line-height: 1.5;
        font-weight: 400;
    }

    /* Botón */
    .whatsapp-btn {
        min-height: 44px;
        padding: 0 22px;

        font-size: 13px;
        border-radius: 7px;
    }

    /* Fotografía */
    .cta-image {
        display: block;

        width: 100%;
        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 10;

        overflow: hidden;
        border-radius: 0;
    }

    .cta-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        border-radius: 0;
    }
}

/* Pantallas pequeñas */
@media (max-width: 375px) {

    .cta-content {
        padding: 30px 22px;
    }

    .cta-content h2 {
        font-size: 33px;
    }

    .cta-image {
        aspect-ratio: 4 / 3;
    }
}



/* ========================================
   TERCA - FOOTER MOBILE
   MISMA COMPOSICION QUE INDEX
======================================== */

@media (max-width: 700px) {

    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: calc(100% - 40px);
        max-width: none;

        margin: 0 auto;
        padding: 34px 0 26px;

        gap: 20px;
    }

    /* LOGO CENTRADO */
    .footer-logo {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        align-self: auto;
    }

    .footer-logo img {
        display: block;
        width: min(100%, 230px);
        max-width: 100%;
        height: auto;
    }

    /* BLOQUE INFERIOR */
    .footer-right {
        position: static;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        gap: 18px;
    }

    /* NAVEGACION */
    .footer-nav {
        position: static;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        width: 100%;
        gap: 10px 0;

        margin: 0;
        padding: 0;

        transform: none;
    }

    .footer-nav a {
        position: relative;

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

        color: #000;

        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;

        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
    }

    /* SEPARADORES VERTICALES */
    .footer-nav a:not(:last-child)::after {
        content: "|";

        position: static;
        display: inline-block;

        width: auto;
        height: auto;

        margin: 0 9px;

        background: none;
        opacity: .55;

        transform: none;
    }

    /* PREGUNTAS FRECUENTES
       EN SEGUNDA FILA */
    .footer-nav a:last-child {
        flex-basis: 100%;
        text-align: center;
    }

    .footer-nav a:last-child::after {
        display: none;
    }

    /* REDES + COPYRIGHT */
    .footer-bottom {
        position: static;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        margin: 0;
        gap: 18px;

        transform: none;
    }

    /* REDES SOCIALES */
    .footer .socials {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        margin: 0;
        padding: 0;

        gap: 12px;
    }

    .footer .socials a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    .footer .socials img {
        display: block;

        width: 30px;
        height: 30px;

        object-fit: contain;
    }

    /* COPYRIGHT CON LINEA SUPERIOR */
    .footer-copy {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 80%;
        min-height: 0;

        margin: 0;
        padding: 12px 0 0;

        border-left: none;
        border-top: 1px solid #aaa;
    }

    .footer-copy small {
        display: block;

        margin: 0;

        font-size: 9px;
        line-height: 1.5;

        text-align: center;
    }

}


/* ========================================
   CTA - BOTON IGUAL AL INDEX MOBILE
======================================== */

@media (max-width: 700px) {

    .cta .whatsapp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        min-width: 155px;
        min-height: 46px;

        padding: 11px 17px;
        gap: 9px;

        background: var(--cream);
        color: var(--olive);

        border: none;
        border-radius: 7px;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;

        text-decoration: none;
        white-space: nowrap;
    }

    .cta .whatsapp-btn .whatsapp-icon {
        display: block;

        width: 20px;
        height: 20px;

        object-fit: contain;
        flex-shrink: 0;
    }

}


/* ========================================
   TERCA - CTA MOBILE
   TIPOGRAFIA IGUAL AL INDEX
======================================== */

@media (max-width: 700px) {

    /* TÍTULO PRINCIPAL */
    .cta .cta-content h2 {
        color: var(--cream);

        font-size: clamp(35px, 9.5vw, 44px);
        font-weight: 800;
        line-height: 0.95;
        letter-spacing: -0.055em;

        margin: 0;
        padding: 0;

        height: auto;
        white-space: normal;
    }

    /* PÁRRAFO */
    .cta .cta-action p {
        color: var(--cream);

        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;

        margin: 0 0 18px;
    }

    /* CONSERVAR EL BOTÓN CREMA */
    .cta .whatsapp-btn {
        background: var(--cream);
        color: var(--olive);
    }

    .cta .whatsapp-btn span {
        color: var(--olive);
    }
}

/* PANTALLAS PEQUEÑAS */
@media (max-width: 375px) {

    .cta .cta-content h2 {
        font-size: 35px;
    }
}


/* ========================================
   TERCA - CTA MOBILE
   AJUSTE TIPOGRAFICO
======================================== */


/* ========================================
   TERCA - CTA MOBILE
   TIPOGRAFIA IGUAL AL INDEX
======================================== */

@media (max-width: 700px) {

    .cta .cta-content h2 {
        font-family: "Manrope", Arial, sans-serif;
        font-size: clamp(44px, 12vw, 56px);
        font-weight: 700;

        line-height: 0.9;
        letter-spacing: -2.5px;

        color: #F5E8D5;

        margin: 0;
        padding: 0;

        height: auto;
        white-space: normal;
    }

    .cta .cta-action p {
        font-family: "Manrope", Arial, sans-serif;
        color: #F5E8D5;

        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
    }
}

/* MISMO TAMAÑO QUE INDEX EN TELEFONOS */
@media (max-width: 480px) {

    .cta .cta-content h2 {
        font-size: clamp(42px, 13vw, 52px);
    }
}

/* ========================================
   FOOTER MOBILE - QUITAR SEPARADOR FINAL
======================================== */

@media (max-width: 700px) {

    .footer-nav a:nth-child(3)::after {
        display: none;
    }

}


/* ========================================
   SOBRE NOSOTROS - HERO DESKTOP
   TITULO Y PARRAFO MAS CERCANOS
======================================== */

@media (min-width: 1025px) {

    /* Tarjeta verde */
    .about-hero .about-copy {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        gap: 32px;
    }

    /* Título */
    .about-hero .about-copy h1 {
        margin: 0;
    }

    /* Párrafo */
    .about-hero .about-copy p {
        max-width: 340px;

        margin: 0;

        font-size: 15px;
        line-height: 1.45;
        font-weight: 600;
    }

    /* Evitar saltos forzados en desktop */
    .about-hero .about-copy p br {
        display: none;
    }
}



/* ========================================
   SOBRE NOSOTROS - HERO MOBILE
   TITULO Y PARRAFO MAS CERCANOS
======================================== */

@media (max-width: 700px) {

    /* Tarjeta verde */
    .about-hero .about-copy {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        gap: 28px;
    }

    /* Título */
    .about-hero .about-copy h1 {
        margin: 0;
    }

    /* Párrafo */
    .about-hero .about-copy p {
        width: 100%;
        max-width: 310px;

        margin: 0;

        font-size: 15px;
        line-height: 1.45;
        font-weight: 600;
    }
}