/* ====================================================================
   QUIÉNES SOMOS — estilos específicos
   Reutiliza design-system.css + style.css (navbar, footer, .btn, .section,
   .photo-tilt, .text-highlight, .title-large/.title-medium, .desc-medium).
   ==================================================================== */

/* ----------------------------------------------------------------
   1. HERO — Quiénes somos
   Sin foto ni botón, solo título + descripción, con la silueta
   decorativa hero-bg-face.svg de fondo (full-bleed sobre el lado
   derecho) + figura.svg encima (.hero-parallax-shape, misma capa que
   el Hero del Home) — mismo patrón de dos capas superpuestas.
   ---------------------------------------------------------------- */
.quienes-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 480px;
    padding: 160px 0 80px;
    background: var(--color-neutral-100);
}

.quienes-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image: url('imagenes/hero-bg-face.svg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.quienes-hero-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .quienes-hero {
        min-height: auto;
    }

    /* En vez de expandir el fondo a todo el ancho (tapaba el texto, ver
       historial), se corre bien hacia la derecha dejando ver solo un
       borde/"puntita" — decorativo, sin competir con el contenido. Los
       textos quedan con sus colores normales, no hace falta blanco. */
    .quienes-hero-bg {
        right: -286px;
        width: 640px;
    }
}

/* ----------------------------------------------------------------
   2. ¿POR QUÉ MAIA? (foto izquierda, contenido derecha)
   Confirmado en Figma (node 9886-641): la forma decorativa detrás de
   la foto rota -10° (a diferencia del +10° por defecto de .photo-tilt),
   manteniendo el relleno Venice Blue.
   ---------------------------------------------------------------- */
.porque-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

.photo-tilt-rev .photo-tilt-bg {
    transform: rotate(-10deg);
}

/* En esta página el testimonial-block va vertical (cita arriba, foto +
   nombre + rol debajo, alineado a la izquierda), a diferencia del layout
   horizontal que el mismo componente usa en el Home — se sobreescribe
   acá con selectores más específicos en vez de tocar el componente base. */
.porque-content-col .testimonial-block {
    display: block;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-top: var(--space-6);
}

.porque-content-col .testimonial-block-quote {
    display: block;
    margin-bottom: var(--space-6);
}

.porque-content-col .testimonial-block-person {
    align-items: flex-start;
    text-align: left;
}

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

/* ----------------------------------------------------------------
   3. PROPÓSITOS Y VALORES
   Confirmado en Figma (node 9886-656): banner full-bleed con degradado
   135° Venice Blue → Eastern Blue, título y subtítulo centrados en
   blanco, 3 tarjetas claras con ícono en círculo degradado (88px).
   ---------------------------------------------------------------- */
.valores-section {
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.valores-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-12);
}

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

.valores-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    margin: 0;
}

.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.valor-card {
    background: var(--color-neutral-0);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.valor-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.valor-icon .material-symbols-outlined {
    font-size: 30px;
    color: var(--color-neutral-0);
}

.valor-card-title {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.valor-card-desc {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-neutral-700);
    margin: 0;
}

.valor-card-desc strong {
    color: var(--color-neutral-900);
    font-weight: 700;
}

.valor-check-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.valor-check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
}

.valor-check-icon {
    color: var(--color-secondary);
    font-size: 18px;
    font-variation-settings: 'wght' 600;
}

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

/* ----------------------------------------------------------------
   4. LIDERAZGO Y GOBERNANZA
   Confirmado en Figma (node 9886-709): grid de tarjetas con foto vertical
   (radio 30px, relación ~3:4), nombre en negrita y rol debajo. Base de
   diseño era 5 fundadoras; ahora son 6 (+ Directora de Comunicación &
   RR.PP.) — 3 columnas reparte parejo 3+3 (el lugar reservado en gris
   para sumar otra persona, y las 4 columnas que usaba mientras estuvo,
   ya no hacen falta: se sacó al agregar los links de LinkedIn).
   ---------------------------------------------------------------- */
.liderazgo-header {
    max-width: 640px;
    margin: 0 auto var(--space-12);
}

.liderazgo-subtitle { margin: 0; }

/* Dos filas separadas (misma clase base .liderazgo-grid para que
   animations.js siga animando cada fila por separado) para poder tener
   una cantidad de columnas distinta arriba (3) que abajo (4, donde entra
   Analía al lado de Joana) sin depender de que el auto-flow de un único
   grid reparta las tarjetas en filas parejas. */
.liderazgo-grid {
    display: grid;
    justify-content: center;
    gap: var(--space-8);
}

.liderazgo-grid + .liderazgo-grid {
    margin-top: var(--space-8);
}

.liderazgo-grid-3col { grid-template-columns: repeat(3, 211px); }
.liderazgo-grid-4col { grid-template-columns: repeat(4, 211px); }

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

/* Wrapper <a> alrededor de la foto: antes el centrado (margin auto) y el
   tamaño vivían en la propia <img>; ahora pasan al wrapper para que el
   ícono de LinkedIn (position:absolute) tenga una caja de referencia del
   mismo tamaño exacto que la foto. */
.leader-card-linkedin-link {
    position: relative;
    display: block;
    width: 211px;
    max-width: 100%;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-xl);
}

.leader-card-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    /* Segunda "sombra" transparente de entrada: al hacer hover se vuelve
       un tinte de marca (inset con spread gigante = truco para teñir la
       imagen sin agregar un overlay/wrapper extra en el HTML). Mismo
       número de capas en reposo y en hover para que el navegador pueda
       interpolar el color en vez de solo aparecer/desaparecer de golpe. */
    box-shadow: var(--shadow-md), inset 0 0 0 999px rgba(12, 78, 145, 0);
    /* En reposo: blanco y negro. Al hover/focus revela el color como
       parte del mismo "reveal" que ya tenía el ícono de LinkedIn. */
    filter: grayscale(1);
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.45s ease;
}

.leader-card:hover .leader-card-img,
.leader-card:focus-within .leader-card-img {
    transform: scale(1.04);
    box-shadow: var(--shadow-md), inset 0 0 0 999px rgba(12, 78, 145, 0.4);
    filter: grayscale(0);
}

/* Ícono de LinkedIn: oculto por defecto, aparece centrado sobre la foto
   al hacer hover (mouse) o focus (teclado, para que el link sea
   igual de descubrible navegando con Tab). pointer-events:none para que
   el click siempre caiga en el <a> que ya envuelve toda la foto. */
/* Insignia circular con el celeste oficial de LinkedIn (#0A66C2) detrás
   del ícono — antes el ícono iba "pelado" sobre el tinte azul genérico
   de la foto, sin fondo propio, y quedaba poco reconocible como botón
   de LinkedIn. */
.leader-card-linkedin-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.leader-card-linkedin-icon svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #0A66C2;
    color: var(--color-neutral-0);
    box-shadow: var(--shadow-lg);
}

.leader-card-linkedin-link:hover .leader-card-linkedin-icon,
.leader-card-linkedin-link:focus-visible .leader-card-linkedin-icon {
    opacity: 1;
}

.leader-card-name {
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    margin: 0 0 4px;
}

.leader-card-role {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    margin: 0;
}

/* Celular: 1 columna (1x1), una tarjeta debajo de la otra. */
@media (max-width: 640px) {
    .liderazgo-grid-3col,
    .liderazgo-grid-4col {
        grid-template-columns: 211px;
    }
}

/* Táctil (sin hover real): el filtro blanco y negro se ve como una foto
   rota si nunca se revela el color, así que en touch queda directamente
   a color. */
@media (hover: none), (pointer: coarse) {
    .leader-card-img {
        filter: grayscale(0);
    }
}

/* ----------------------------------------------------------------
   5. UN ECOSISTEMA EN CRECIMIENTO
   Confirmado en Figma (node 9886-740): banner full-bleed idéntico en
   estructura al de "El ecosistema está abierto" de Nuestro Impacto,
   pero el CTA usa ícono de flecha (arrow_forward) en vez de mail, ya
   que en Figma reutiliza el botón global "Sumate a la comunidad" que
   navega a la sección Comunidad, no un mailto directo.
   ---------------------------------------------------------------- */
.crecimiento-banner {
    display: flex;
    align-items: stretch;
    min-height: 460px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* min-width:0 en ambas columnas: el default de flexbox es min-width:auto,
   que impide a un hijo achicarse por debajo del ancho de su contenido
   (acá, la palabra más larga del título). En anchos angostos donde
   flex:1 ya no alcanza para el padding fijo (80px 112px), sin esto el
   título se salía del banner y, como el body tiene overflow-x:hidden,
   se recortaba en silencio en vez de desbordar visiblemente. */
.crecimiento-photo-col {
    flex: 1;
    min-width: 0;
}

.crecimiento-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crecimiento-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-6);
    padding: 80px 112px;
}

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

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

@media (max-width: 900px) {
    .crecimiento-banner {
        flex-direction: column;
    }
    .crecimiento-photo-col {
        min-height: 280px;
    }
    .crecimiento-content {
        padding: var(--space-8);
    }
}