/* ================================================================
   MAIA — HOME PAGE STYLES
   Basado en Figma: https://www.figma.com/design/16UwvxPC3KXCysgfqKT9V8/MAIA-DESIGN?node-id=9837-896
   ================================================================ */

/* ----------------------------------------------------------------
   0. UTILITIES
   ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.section {
    padding: var(--space-24) 0;
}

.text-center { text-align: center; }

.text-highlight {
    color: var(--color-secondary);
}

.title-large {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-6);
}

.title-medium { font-size: 2.5rem; }
.title-small { font-size: 2rem; margin-bottom: var(--space-2); }

@media (max-width: 768px) {
    .title-large { font-size: var(--font-size-4xl); }
    .title-medium { font-size: 2rem; }
}

.desc-medium {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-6);
}

/* Confirmado en Figma (Ejes Estratégicos, node 9843-860):
   el segundo párrafo usa Inter Italic, a diferencia del primero (Urbanist regular). */
.desc-medium-italic {
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.btn-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
}

.btn-sm {
    padding: 10px 22px;
    font-size: var(--font-size-sm);
}

.btn-ghost {
    background-color: var(--color-neutral-0);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
    border-color: var(--color-primary);
    background-color: var(--color-neutral-100);
    color: var(--color-primary);
    transform: translateY(-2px) scale(1.03);
}

/* Botón azul (Venice Blue) — distinto del .btn-primary-teal del navbar.
   Confirmado con el panel de Diseño de Figma: fill "Venice Blue" en los
   CTA de Hero, Nuestra Esencia y Ejes Estratégicos. */
.btn-primary-blue {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
    box-shadow: var(--shadow-glow-primary);
}

.btn-primary-blue:hover {
    background-color: var(--color-primary-deep);
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--shadow-lg);
    color: var(--color-neutral-0);
}

/* ----------------------------------------------------------------
   1. NAVBAR
   ---------------------------------------------------------------- */
/* En reposo (scroll 0) el navbar es el óvalo blanco de siempre, con
   margen y bordes redondeados, en position:absolute (scrollea con la
   página, no tapa el hero). Apenas el usuario empieza a bajar (ver
   script.js, un scroll listener agrega la clase .is-fixed a partir de
   unos pocos px), se transforma CON ANIMACIÓN en una barra completa:
   ancho 100%, sin bordes redondeados, pegada arriba sin margen — el
   `transition: all` de abajo anima width/margin/border-radius al mismo
   tiempo que cambia a position:fixed, así que la barra "se estira" en
   vez de saltar de un estado al otro. */
.navbar-header {
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 16px auto 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 70px;
    display: flex;
    align-items: center;
    background: var(--color-neutral-0);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    transition: all 0.3s ease;
}

.navbar-header.is-fixed {
    position: fixed;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand { display: flex; align-items: center; }

.navbar-logo {
    height: 44px;
    width: auto;
    display: block;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav-link {
    font-family: 'Inter', var(--font-family-primary);
    font-weight: 700;
    font-size: 13.7px;
    line-height: 22.4px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-neutral-700);
    position: relative;
    padding-bottom: 2px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-link:hover { color: var(--color-secondary); }
.nav-link:hover::after { transform: scaleX(1); }

/* Estado activo (página actual) — compartido por las 4 páginas */
.nav-link.active {
    color: var(--color-secondary);
}
.nav-link.active::after {
    transform: scaleX(1);
}

/* Cuando la página actual es Comunidad, no hay nav-link de texto propio
   (el CTA "Sumate a la comunidad" cumple ese rol) — se marca con un
   anillo sutil en vez de duplicar el link. */
.nav-menu .btn[aria-current="page"] {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), var(--shadow-glow-secondary);
}

/* Botón hamburguesa: 44x44 para respetar el tamaño mínimo de touch
   target recomendado (antes era ~34x26, muy chico para dedo). Las 3
   barras son span reales para poder animarlas a una X con CSS puro
   (ver más abajo, reacciona al propio aria-expanded que ya setea
   script.js — no hace falta una clase JS extra para el ícono). */
.mobile-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1200; /* por encima del panel (.nav-menu, z-index 1100) para seguir clickeable con el menú abierto */
}

.mobile-toggle-btn span {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    display: block;
    transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.2s ease;
}

/* Hamburguesa -> X: barra 1 y 3 rotan y se centran, la del medio se
   desvanece. Todo disparado por [aria-expanded="true"], que script.js
   ya actualiza en cada click — sin JS de animación adicional. */
.mobile-toggle-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-toggle-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-toggle-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
    .mobile-toggle-btn { display: flex; }

    /* Overlay de fondo semitransparente detrás del panel. Se crea una
       sola vez por JS (ver script.js) e inserta directo en <body>, así
       no hay que repetir el div en el HTML de las 4 páginas. */
    .nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(15, 23, 42, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
    }
    .nav-overlay.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Bloquea el scroll de la página mientras el panel está abierto */
    body.nav-open {
        overflow: hidden;
    }

    /* Panel/drawer: se mantiene en el flujo (sin display:none) y se
       anima con transform, para lograr una transición deslizante suave
       en vez del salto seco de antes. visibility se retrasa con
       transition-delay para que, una vez cerrado, no quede robando
       foco/tab fuera de la pantalla. */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(320px, 85vw);
        height: 100vh;
        z-index: 1100;
        background: var(--color-neutral-0);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 110px var(--space-6) var(--space-8);
        gap: var(--space-2);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.4s;
    }
    .nav-menu.mobile-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0s;
    }

    /* Links en lista, con divisor y área de toque más grande (antes el
       tap target real era casi solo el alto del texto en 13.7px). El
       subrayado de hover del navbar desktop (.nav-link::after) no tiene
       sentido en una lista vertical: se reemplaza por un fondo sutil. */
    .nav-link {
        width: 100%;
        padding: var(--space-4) var(--space-3);
        font-size: var(--font-size-base);
        border-radius: var(--radius-md);
        border-bottom: 1px solid var(--color-neutral-200);
    }
    .nav-link::after { display: none; }
    .nav-link:hover,
    .nav-link.active {
        background: var(--color-neutral-50);
        color: var(--color-secondary);
    }

    /* CTA "Sumate a la comunidad": ya hereda width:100% de la regla
       global de botones en responsive (ver sección 10 de este archivo);
       acá solo se le da aire respecto de los links de arriba. */
    .nav-menu .btn {
        margin-top: var(--space-4);
    }

    /* Reveal escalonado de cada link/CTA al abrir el panel — puro CSS,
       sin GSAP, para que funcione igual si el CDN no carga. */
    .nav-menu > a {
        opacity: 0;
        transform: translateX(24px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .nav-menu.mobile-open > a {
        opacity: 1;
        transform: translateX(0);
    }
    .nav-menu.mobile-open > a:nth-child(1) { transition-delay: 0.08s; }
    .nav-menu.mobile-open > a:nth-child(2) { transition-delay: 0.14s; }
    .nav-menu.mobile-open > a:nth-child(3) { transition-delay: 0.20s; }
    .nav-menu.mobile-open > a:nth-child(4) { transition-delay: 0.26s; }

    @media (prefers-reduced-motion: reduce) {
        .nav-menu,
        .nav-menu > a,
        .nav-overlay,
        .mobile-toggle-btn span {
            transition: none !important;
        }
    }
}

/* ----------------------------------------------------------------
   2. HERO
   ---------------------------------------------------------------- */
.hero-wrapper {
    padding: 140px 0 80px;
    margin-top: -7px;
    position: relative;
    overflow: hidden;
    background: var(--color-neutral-100);
}

@media (min-width: 992px) {
    .hero-wrapper {
        height: 100vh;
        min-height: 700px;
        padding-top: 100px;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    .hero-wrapper > .hero-grid {
        height: 100%;
        width: 100%;
    }
}

/* Fondo decorativo del hero (curva/ola) */
.hero-bg-wave {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: url('imagenes/fondo_hero.svg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* Figura decorativa de fondo (parallax sutil). */
.hero-parallax-shape {
    position: absolute;
    top: 0;
    right: -500px;
    width: 800px;
    height: 800px;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

/* En mobile el texto pasa a ocupar el ancho completo (hero-grid/columnas
   colapsan a 1fr), así que esta figura de 800px queda detrás del propio
   bloque de texto. Aunque el texto ya está en una capa por encima
   (z-index mayor en .hero-content-col / .impacto-hero-content / etc.),
   una figura tan grande y opaca justo detrás genera ruido visual que
   hace difícil leer — se achica y se atenúa bastante para que quede
   como acento decorativo en la esquina, no como fondo dominante. */
@media (max-width: 992px) {
    .hero-parallax-shape {
        top: -20px;
        right: -160px;
        width: 320px;
        height: 320px;
        opacity: 0.25;
    }
}

@media (max-width: 992px) {
    .hero-bg-wave {
        width: 100%;
        opacity: 1;
        background-position: 40% top;
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    position: relative;
    z-index: 5;
}

.badge-strategic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-secondary);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
    display: inline-block;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.hero-cta-row .btn {
    padding: 18px 32px;
    font-size: var(--font-size-base);
}

.hero-img-col { display: flex; justify-content: center; }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-wrapper { padding-top: 120px; }
    .hero-img-col {
        margin-top: 0;
        margin-bottom: var(--space-8);
        order: -1;
    }
}

/* ----------------------------------------------------------------
   3. PHOTO TILT (imagen con forma decorativa detrás)
   ---------------------------------------------------------------- */
.photo-tilt {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 0 auto;
}

/* La foto va derecha (0°); solo la forma de fondo rota.
   Confirmado en el panel de Figma: rectángulo de fondo a 10°,
   radio de esquina 30px, mismo tamaño que la foto.
   Antes era un ::before; ahora es un span real (.photo-tilt-bg, ver
   HTML) para poder animarlo por separado con GSAP y lograr un efecto
   de "collage" — dos capas que llegan con leve desfasaje en vez de una
   sola pieza plana (ver revealPhotoTiltBg en animations.js). El estado
   de reposo sigue siendo 100% CSS estático: si el CDN de GSAP no carga,
   se ve exactamente igual que antes, sin animación. */
.photo-tilt-bg {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    transform: rotate(10deg);
    z-index: -1;
    background: var(--color-primary);
}

.photo-tilt-teal .photo-tilt-bg {
    background: var(--color-secondary);
    transform: rotate(-10deg);
}

.photo-tilt-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    border-radius: 30px;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
}

/* El rectángulo rotado (.photo-tilt-bg) no está sujeto al layout (los
   transforms no afectan el flujo), así que sus puntas sobresalen del propio
   ancho de .photo-tilt. En desktop el gap entre columnas absorbe ese sobrante,
   pero en mobile (columna a 100% del contenedor) esas puntas terminaban
   chocando contra el borde de la página de forma pareja — se veía como un
   recorte roto/asimétrico en vez de un detalle decorativo.

   Dos intentos previos fallaron:
   1) overflow:hidden directo sobre .photo-tilt sin más: como .photo-tilt-bg
      usa inset:0 (que se mide contra el borde de .photo-tilt, TAPANDO el
      padding en vez de respetarlo), el fondo ocupaba la misma caja que la
      foto y quedaba tapado por completo — el efecto desaparecía.
   2) padding en .photo-tilt + overflow:hidden, pero .photo-tilt-bg se dejó
      en inset:0: como ese inset ignora el padding del padre, el fondo
      seguía siendo tan grande como la caja COMPLETA (foto + padding), no
      como la foto sola — al rotar, la punta se salía igual y quedaba
      recortada a la mitad (esquina cortada).

   Fix real: .photo-tilt-bg también tiene que "entrarse" ese mismo padding
   con su propio inset (no inset:0), para que su tamaño SIN rotar coincida
   con el de la foto (no con el de la caja completa). Recién ahí, al rotar,
   la punta sobrante tiene lugar real para asomar dentro del padding sin
   tocar el borde de .photo-tilt (overflow:hidden) — se ve completa, nunca
   cortada, y como queda contenida en su propia caja, tampoco puede pisar
   el texto que sigue debajo en el flujo normal de la página. */
/* Breakpoint subido de 900px a 1024px: en anchos "tablet ancha" (aprox.
   900-1024px, ej. 912px de tablets Android) .porque-row/.pilares-row/
   .objetivos-row siguen en 2 columnas (esos grids solo pasan a 1 columna
   en max-width:900px), así que .photo-tilt NO tenía la protección de
   padding+overflow:hidden de acá abajo y dependía del gap entre columnas
   para no cortarse. Cálculo: a 912px de viewport la columna de foto mide
   ~416px (sin tope de max-width:420px todavía), la rotación sin reducir
   es de 10°, y eso da una protrusión horizontal de ~42px — mayor que los
   24px de padding del container a la izquierda, así que la esquina se
   recorta contra el borde de la página (html/body tienen overflow-x:
   hidden). Recién a partir de ~994px de viewport el margen de centrado
   de .photo-tilt (tope max-width:420px) alcanza para absorber esa
   protrusión sin el fix. Subir el breakpoint a 1024px (cubre tablets en
   landscape tipo iPad) mete ese rango dentro de la protección de acá,
   sin tocar el breakpoint de columna de los grids (siguen 2 columnas
   hasta 900px, después 1 hasta 1024px) — verificado que a 1024px con
   width:85%+padding:20px+rotate(4deg) la protrusión da ~15px, todavía
   dentro del padding. */
@media (max-width: 1024px) {
    .photo-tilt {
        width: 85%;
        padding: 20px;
        overflow: hidden;
    }

    .photo-tilt .photo-tilt-bg {
        inset: 20px;
        transform: rotate(4deg);
    }

    .photo-tilt.photo-tilt-teal .photo-tilt-bg {
        transform: rotate(-4deg);
    }

    /* .photo-tilt-rev (usado en quienes-somos.html, sección "¿Por Qué
       MAIA?") tiene su propia regla en quienes.css con la MISMA
       especificidad que ".photo-tilt .photo-tilt-bg" de acá arriba
       (2 clases c/u: .photo-tilt-rev + .photo-tilt-bg vs. .photo-tilt +
       .photo-tilt-bg). Como quienes.css se carga DESPUÉS de style.css en
       el <head>, esa regla (rotate(-10deg), sin media query, siempre
       activa) le ganaba por orden de aparición en la cascada al
       rotate(4deg) de acá arriba, dejando el fondo girado a -10° completo
       en vez de -4° — la protrusión resultante (~25px a 390px de ancho)
       superaba el padding de 20px y se recortaba. Se agrega acá, igual
       que con .photo-tilt-teal, un override de 3 clases para ganar por
       especificidad sin depender del orden de los <link>. */
    .photo-tilt.photo-tilt-rev .photo-tilt-bg {
        transform: rotate(-4deg);
    }
}

/* ----------------------------------------------------------------
   4. NUESTRA ESENCIA
   ---------------------------------------------------------------- */
.esencia-row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-16);
    align-items: center;
    margin-bottom: var(--space-16);
}

.esencia-label {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.check-list {
    list-style: none;
    margin-bottom: var(--space-6);
}

.check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    margin-bottom: 14px;
}

.check-list-icon {
    color: var(--color-primary);
    font-size: 20px;
    font-variation-settings: 'wght' 600;
}

.esencia-block-desc {
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    margin-bottom: var(--space-6);
}

.esencia-bridge {
    font-style: italic;
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    text-align: left;
    margin-bottom: var(--space-6);
}

.testimonial-block {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 40px;
    margin: 0 auto;
}

.testimonial-block-quote {
    flex: 1;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-secondary-deep);
    margin: 0;
}

.testimonial-block-quote strong {
    font-weight: 800;
}

/* Foto + nombre + cargo agrupados en su propio bloque, como en Figma */
.testimonial-block-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
}

.testimonial-block-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    margin-bottom: var(--space-2);
}

.testimonial-block-author {
    font-weight: 800;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    letter-spacing: 0.04em;
    margin: 0;
}

.testimonial-block-role {
    font-weight: 700;
    color: var(--color-secondary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    margin: 2px 0 0;
}

@media (max-width: 900px) {
    .esencia-row { grid-template-columns: 1fr; }
    .testimonial-block { flex-direction: column; align-items: center; text-align: center; }

    /* Centrado explícito del bloque foto+nombre+cargo (y su texto) dentro
       del contenedor: en vez de depender solo de align-items del padre
       (que centra la caja pero no garantiza que cada línea de texto quede
       centrada si alguna termina más ancha que otra), se fuerza el bloque
       a ocupar el ancho completo y se centra cada pieza explícitamente. */
    .testimonial-block-person {
        width: 100%;
    }

    .testimonial-block-avatar {
        margin-left: auto;
        margin-right: auto;
    }

    .testimonial-block-author,
    .testimonial-block-role {
        width: 100%;
        text-align: center;
    }
}

/* ----------------------------------------------------------------
   5. EL RESPALDO
   ---------------------------------------------------------------- */
.respaldo-section {
    position: relative;
    overflow: hidden;
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-neutral-0);
}

/* Misma figura.svg del Hero, reutilizada aquí: confirmado en Figma
   posición x:750 y:-700, ~1500x1500, trazo blanco al 20% de opacidad
   (filter para blanquear el SVG + opacity). Alineada a la derecha del bloque. */
.respaldo-parallax-shape {
    position: absolute;
    top: -700px;
    left: 750px;
    width: 1500px;
    height: 1500px;
    opacity: 0.2;
    filter: brightness(0) invert(1);
    z-index: 0;
    pointer-events: none;
}

.respaldo-section .container {
    position: relative;
    z-index: 1;
}

.respaldo-title {
    color: var(--color-neutral-0) !important;
    margin-bottom: var(--space-3);
}

.respaldo-lead {
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--space-12);
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.respaldo-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.respaldo-stat {
    background: var(--color-neutral-0);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: 0 12px 30px rgba(6, 34, 64, 0.18);
}

.respaldo-stat-number {
    font-size: 2.5rem;
    font-weight: var(--font-weight-black);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.respaldo-stat-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
}

.respaldo-stat-source {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-700);
}

.respaldo-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

.respaldo-highlight-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--color-neutral-0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.respaldo-highlight-icon .material-symbols-outlined {
    font-size: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.respaldo-highlight-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 900px) {
    .respaldo-stats { grid-template-columns: 1fr; }
    .respaldo-highlight { flex-direction: column; text-align: center; }
}

/* ----------------------------------------------------------------
   6. EJES ESTRATÉGICOS
   ---------------------------------------------------------------- */
.ejes-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

@media (max-width: 900px) {
    .ejes-row { grid-template-columns: 1fr; }
    .ejes-img-col { order: -1; margin-bottom: var(--space-8); }
}

/* ----------------------------------------------------------------
   7. ALIANZAS
   ---------------------------------------------------------------- */
/* Confirmado en Figma: el marco no tiene "Relleno" (sin fill) — fondo
   transparente/blanco, no gris. Padding propio (no el genérico de
   --space-24/96px de .section): es una fila de logos de respaldo, no una
   sección de contenido pesado, así que con el padding genérico quedaba
   demasiado aire arriba y sobre todo abajo, tanto en mobile como en
   desktop. */
.alianzas-section {
    background: transparent;
    overflow-x: hidden;
    padding: var(--space-16) 0;
}

.alianzas-subtitle {
    color: var(--color-neutral-700);
    margin-bottom: var(--space-8);
}

/* Marquesina infinita real (ver ejemplo de referencia:
   webflow-custom-marquee.webflow.io) con los aliados reales de MAIA. El
   HTML trae UN solo .alianzas-group con los 8 logos; animations.js
   (initAlianzasMarquee) lo clona una vez dentro de .alianzas-track y
   anima el track completo con xPercent -50 en loop infinito — como la
   copia es idéntica, el corte entre una vuelta y la siguiente es
   invisible. Sin JS (o con prefers-reduced-motion), estas reglas base ya
   dejan la fila legible y con scroll horizontal nativo como fallback
   accesible. El nombre/descripción no se muestra siempre — aparece en
   hover (o focus, teclado) sobre el propio logo, así la fila queda
   limpia y no importa cuán larga sea cada descripción. En touch, donde
   no hay hover, se muestra siempre debajo (ver media query al final). */
/* Fuera del .container a propósito (ver HTML): la fila ocupa el 100%
   del ancho de pantalla, no el acotado por --container-max-width. */
/* cursor:grab — además del auto-scroll (ver animations.js) la fila se
   puede arrastrar con mouse/touch; el JS suma el desplazamiento del
   arrastre a la misma posición que anima sola, así uno no "pelea" con
   el otro. touch-action:pan-y deja que el swipe vertical siga scrolleando
   la página normalmente y le da el gesto horizontal al drag propio. */
.alianzas-marquee {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-4) 0;
    cursor: grab;
    touch-action: pan-y;
}

.alianzas-marquee::-webkit-scrollbar {
    display: none;
}

.alianzas-marquee.is-dragging {
    cursor: grabbing;
}

.alianzas-marquee.is-dragging * {
    user-select: none;
}

.alianzas-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

/* Cuando el JS arma la animación agrega esta clase al viewport (no al
   track) — apaga el scroll nativo mientras la marquesina anima/arrastra
   sola por JS (transform), evitando que el navegador scrollee el propio
   contenedor por su cuenta y se sume al desplazamiento manual. */
.alianzas-marquee.is-animating {
    overflow-x: hidden;
}

.alianzas-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-8);
    flex: 0 0 auto;
    padding: 0 var(--space-6);
}

/* Ítem en columna: logo arriba, nombre/descripción debajo (no superpuesto).
   Alto fijo e igual para los 10 así queda prolijo en fila pase lo que pase
   con el largo de cada descripción. justify-content:flex-start (no
   center) es a propósito: el nombre de cada aliado ocupa 1, 2 o 3 líneas
   según su largo, y con center ese alto variable corría el logo más
   arriba o más abajo según cuánto texto tuviera cada uno — con
   flex-start todos los logos arrancan siempre en el mismo punto, y el
   espacio de sobra (por descripciones cortas) queda abajo, no repartido
   arriba/abajo. align-items:center sigue centrando en el eje horizontal. */
.alianza-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: 160px;
    height: 140px;
}

/* Altura moderada e igual para los 10 (64px) — todos los PNG son 200x100
   así que el ancho renderizado da ~128px parejo para todos. Una fila de
   alianzas es contenido de respaldo, no el protagonista de la página: si
   se muestran a su tamaño nativo (200x100) compiten por atención con el
   resto del contenido, por eso se achican acá, igual que cualquier tira
   de logos de partners. En reposo se ven apagados (opacity baja); en
   hover no solo suben a opacity 1, también crecen un toque (scale) para
   que el gesto se sienta con más intención que un simple fundido.
   pointer-events:none + user-drag:none deshabilitan el drag nativo de
   imágenes del navegador, que si no interfiere con el arrastre propio de
   la fila (ver animations.js). */
.alianza-logo-img {
    height: 64px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    opacity: 0.55;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.alianza-logo-item:hover .alianza-logo-img,
.alianza-logo-item:focus-within .alianza-logo-img {
    opacity: 1;
    transform: scale(1.08);
}

/* Línea de acento turquesa (color de marca, ver --color-secondary) entre
   el logo y el nombre: nace en 0 y "crece" en hover, como un subrayado
   que aparece — el order:2 la ubica en el medio del flex column aunque
   en el HTML no exista ningún elemento ahí (::after no se puede aplicar
   sobre <img>, así que vive en el ítem completo y se reordena). */
.alianza-logo-item::after {
    content: '';
    order: 2;
    width: 0;
    height: 2px;
    background: var(--color-secondary);
    transition: width 0.3s ease;
}

.alianza-logo-item:hover::after,
.alianza-logo-item:focus-within::after {
    width: 28px;
}

/* Debajo del logo, no superpuesto: por default invisible (opacity:0) y
   corrida 6px hacia abajo, pero ya ocupa su lugar en el layout (fixed
   height del item de arriba), así que aparecer en hover no empuja ni
   corre nada — solo sube y se desvanece hacia adentro, con el color
   pasando de neutro a turquesa (--color-secondary-deep) para que se note
   que es interactivo, no solo texto que aparece. order:3 la deja siempre
   después de la línea de acento. */
.alianza-logo-name {
    order: 3;
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-secondary-deep);
    text-align: center;
    line-height: 1.35;
    max-width: 160px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Desktop/mouse (dispositivos con hover real): el nombre aparece en hover
   o focus (teclado) sobre el propio logo. En touch (celular) no hay
   hover, así que ahí se muestra siempre. */
@media (hover: hover) and (pointer: fine) {
    .alianza-logo-item:hover .alianza-logo-name,
    .alianza-logo-item:focus-within .alianza-logo-name {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: none), (pointer: coarse) {
    .alianza-logo-name {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------------------------------
   8. COMUNIDAD
   ---------------------------------------------------------------- */
/* Confirmado en Figma (node 9846-1490): banner en tarjeta contenida (no full-bleed),
   1216x465, radio 30, fondo degradado azure/31→cyan/37 (135deg), fila con gap 32
   entre foto (592, esquinas izq. redondeadas) y panel de texto transparente (592,
   padding 80). El "gap" deja ver el degradado del padre, generando el efecto de
   difuminado entre la foto y el color. */
.comunidad-banner {
    display: flex;
    align-items: stretch;
    gap: 32px;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    min-height: 465px;
}

/* min-width:0 en ambas columnas: ver comentario equivalente en
   .crecimiento-photo-col (quienes.css). Acá el riesgo era mayor porque
   .comunidad-banner tiene su propio overflow:hidden + border-radius
   (tarjeta contenida, no full-bleed): si el título no podía achicarse,
   el recorte pasaba directo en el borde de la tarjeta, no solo en el
   overflow-x:hidden genérico del body. */
.comunidad-photo-col {
    flex: 1;
    min-width: 0;
    border-radius: 30px 0 0 30px;
    overflow: hidden;
}

.comunidad-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Las 3 caras de la foto están en el tercio superior; sin esto,
       object-fit:cover recorta desde el centro (default) y en mobile
       —donde la caja queda más achatada que en desktop, ya que ahí el
       ratio del contenedor casi calza con el de la foto original— se
       comía justo esa franja de arriba, dejando solo mesa y torsos. */
    object-position: center 20%;
}

.comunidad-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 80px;
}

.comunidad-title {
    color: var(--color-neutral-0) !important;
    margin: 0;
}

.comunidad-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
}

.btn-comunidad {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 11px 20px;
    background: var(--color-neutral-50);
    color: var(--color-primary);
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
}

.btn-comunidad:hover {
    color: var(--color-primary-deep);
    transform: translateY(-2px) scale(1.03);
}

@media (max-width: 900px) {
    .comunidad-banner { flex-direction: column; }
    .comunidad-photo-col {
        border-radius: 30px 30px 0 0;
        overflow: hidden;
        min-height: 280px;
    }
    /* Redundante a propósito: además del overflow:hidden del wrapper, se
       fuerza el mismo radio directo sobre la <img> (no solo en su
       contenedor). Así el corte de esquinas no depende de que el
       clipping del padre se aplique bien en todos los casos — la foto
       en sí misma nunca puede mostrar esquina redondeada abajo. */
    .comunidad-photo {
        border-radius: 30px 30px 0 0;
    }
    .comunidad-content { padding: var(--space-8); }
}

/* ----------------------------------------------------------------
   9. FOOTER
   ---------------------------------------------------------------- */
.footer-wrapper {
    background: var(--color-primary-deep);
    color: var(--color-neutral-0);
    padding: var(--space-16) 0 var(--space-8);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

/* La 3ra columna (Institucional) tenía un solo link ("Contacto") y quedaba
   muy vacía junto a Navegación (4 ítems) y Contacto (3 ítems). En vez de
   angostar la grilla o inventar links institucionales que no existen en el
   sitio, se reubicaron ahí "Términos de Servicio" y "Políticas de
   Privacidad" -antes texto suelto sin link en .footer-bottom-row- como
   links reales (placeholder "#" hasta que esas páginas existan). Así las
   4 columnas quedan con 3-4 ítems cada una y se mantiene la grilla 2fr/1fr/1fr/1fr. */

.footer-brand-logo {
    height: 40px;
    width: auto;
    margin-bottom: var(--space-4);
}

.footer-brand-desc {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    max-width: 320px;
    line-height: 1.6;
}

.footer-col-title {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-neutral-0);
    margin-bottom: var(--space-4);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--space-3); }
.footer-links a { font-size: var(--font-size-sm); color: var(--color-neutral-0); opacity: 0.85; }
.footer-links a:hover { opacity: 1; color: var(--color-secondary); }

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.footer-contact-item a { color: var(--color-neutral-0); opacity: 0.85; }
.footer-contact-item a:hover { opacity: 1; color: var(--color-secondary); }

/* Link de LinkedIn: mismo renglón que mail/teléfono/ubicación, pero
   ícono + texto van juntos dentro de un solo <a> (a diferencia del mail,
   que separa ícono y link) porque acá los dos son parte del mismo link
   externo. */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-contact-icon { font-size: 18px; color: var(--color-secondary); }

.footer-bottom-row {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-xs);
    opacity: 0.7;
}

/* Créditos del desarrollador, al ras del copyright (mismo row, extremo
   opuesto gracias al space-between de arriba). Discreto en reposo —
   hereda la opacity 0.7 del row — y en hover no alcanza con subrayar en
   currentColor: al ser un blanco ya apagado por esa misma opacity 0.7
   del padre, el subrayado quedaba del mismo tono apagado que el texto y
   no se notaba. Por eso acá cambia a un turquesa claro bien saturado
   (--color-secondary-light) tanto en el texto como en el subrayado, así
   el contraste con el blanco de reposo es evidente aun con la opacity
   del row de por medio. */
.footer-credit {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-credit:hover,
.footer-credit:focus-visible {
    color: var(--color-secondary-light);
    border-color: var(--color-secondary-light);
}

/* .footer-bottom-links / .footer-bottom-sep: reglas sin uso desde que
   "Términos de Servicio" y "Políticas de Privacidad" se movieron a la
   columna Institucional (ver comentario en .footer-grid). Se quitan para
   no dejar CSS huérfano apuntando a markup que ya no existe. */

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 576px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-row { flex-direction: column; text-align: center; }
}

/* ----------------------------------------------------------------
   10. BOTONES EN RESPONSIVE
   En mobile, todos los botones (CTAs de hero, navbar, banners,
   formulario) ocupan el 100% del ancho de su contenedor en vez de
   achicarse al contenido. Va al final del archivo para ganar en la
   cascada sobre reglas de igual especificidad (ej. .btn-comunidad
   con width:fit-content).
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .btn,
    .btn-comunidad {
        width: 100%;
    }
}