/* ====================================================================
   NUESTRO IMPACTO (Ejes Estratégicos de Trabajo) — 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 — Ejes Estratégicos de Trabajo
   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.
   ---------------------------------------------------------------- */
.impacto-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 480px;
    padding: 160px 0 80px;
    background: var(--color-neutral-100);
}

.impacto-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;
}

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

@media (max-width: 992px) {
    .impacto-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. */
    .impacto-hero-bg {
        right: -286px;
        width: 640px;
    }
}

/* ----------------------------------------------------------------
   2. PILARES DE TRANSFORMACIÓN (foto izquierda, contenido derecha)
   ---------------------------------------------------------------- */
.pilares-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

/* ----------------------------------------------------------------
   3. OBJETIVOS DE IMPACTO (contenido izquierda, foto derecha — espejado)
   ---------------------------------------------------------------- */
.objetivos-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

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

/* Numeral grande de fondo (01, 02...) — device tipográfico decorativo
   detrás del contenido, inspirado en los bloques de proyecto numerados
   de sitios editoriales tipo Crafto. Opacidad muy baja para no competir
   con el texto real; drift vertical sutil en scroll vía GSAP (ver
   initDecorativeParallax en animations.js). Si GSAP no carga, el
   numeral queda quieto pero se ve igual de bien: es 100% CSS estático
   de base, la animación es puramente aditiva. */
.pilares-section,
.objetivos-section {
    position: relative;
    overflow: hidden;
}

.section-numeral {
    position: absolute;
    top: -2rem;
    right: -1rem;
    font-size: 14rem;
    font-weight: var(--font-weight-black);
    line-height: 1;
    color: var(--color-primary);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.pilares-section .container,
.objetivos-section .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .section-numeral {
        font-size: 8rem;
    }
}

/* Lista de pilares/objetivos con ícono circular — compartida por ambas secciones */
.pilar-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.pilar-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.pilar-icon {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.pilar-desc {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-neutral-700);
    margin: 0;
}

/* ----------------------------------------------------------------
   4. EL ECOSISTEMA ESTÁ ABIERTO
   Confirmado en Figma: banner full-bleed (sin radio de esquina, sin
   margen de container), a diferencia del banner de Comunidad del Home.
   ---------------------------------------------------------------- */
.ecosistema-abierto-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: ver comentario equivalente en
   .crecimiento-photo-col (quienes.css) — evita que flexbox se niegue a
   achicar la columna por debajo del ancho de la palabra más larga del
   título, lo que en anchos angostos recortaba el texto en silencio. */
.ecosistema-abierto-photo-col {
    flex: 1;
    min-width: 0;
}

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

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

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

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

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

/* ----------------------------------------------------------------
   5. CONTENIDO LEGAL (Términos de Servicio / Políticas de Privacidad)
   Ambas páginas reutilizan este mismo impacto.css: el hero de arriba
   (.impacto-hero) y este bloque para el cuerpo de texto tipo "artículo
   legal" que va debajo. Ancho acotado (~760px) para mejorar la lectura
   de párrafos largos; todos los tokens de color/tipografía/espaciado
   se reusan de :root en design-system.css, sin valores nuevos.
   ---------------------------------------------------------------- */
.legal-content {
    max-width: 760px;
    margin: 0 auto;
}

.legal-content .legal-updated {
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-8);
}

.legal-content h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: var(--space-12) 0 var(--space-4);
}

/* El primer h2 va pegado al párrafo de "Última actualización", sin el
   espacio extra que separa las demás secciones entre sí. */
.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-neutral-700);
    margin-bottom: var(--space-4);
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
    color: var(--color-neutral-700);
}

.legal-content li {
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin-bottom: var(--space-2);
}

.legal-content a {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}