/* =========================================
   AICO — ¿Quiénes somos?
   Hoja de página. Se carga DESPUÉS de style.css y sólo añade
   lo que esta página necesita; no redefine nada del sistema.

   .narrow, .split, .rule-orange y .page-cta viven en style.css:
   los usan también las demás subpáginas.
   ========================================= */

/* -----------------------------------------
   Fondo decorativo
   El SVG de trazos se ancla arriba con su proporción natural: estirarlo
   sobre una página de 4000px engordaría los trazos hasta hacerlos ruido.
   La mitad inferior la cubre un lavado de gradientes puro CSS.
   ----------------------------------------- */
.top-shell>.deco-blue {
    inset: 0 0 auto 0;
    height: 1400px;
}

.deco-wash {
    position: absolute;
    inset: auto 0 0 0;
    height: 1800px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 38% at 100% 72%, rgba(27, 75, 255, .16), transparent 70%),
        radial-gradient(45% 30% at 0% 32%, rgba(33, 58, 120, .14), transparent 70%);
}

/* -----------------------------------------
   Panel de introducción
   ----------------------------------------- */
.about-intro {
    position: relative;
    z-index: 1;
    padding: 0 0 var(--sp-10);
}

.intro-panel {
    background-color: var(--primary-blue);
    border: 2px solid var(--primary-orange);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-6);
    color: var(--bg-white);
    box-shadow: var(--shadow-dark);
}

.intro-panel p {
    font-size: var(--fs-md);
    line-height: 1.7;
}

.intro-panel p+p {
    margin-top: var(--sp-2);
}

.intro-panel strong {
    color: var(--primary-orange);
    font-weight: 700;
}

/* -----------------------------------------
   Filas de misión, visión y pilares
   ----------------------------------------- */
.about-detail {
    position: relative;
    z-index: 1;
    padding-bottom: var(--sp-12);
}

/* -----------------------------------------
   Responsive — los dos breakpoints del sistema
   ----------------------------------------- */
@media (max-width: 992px) {
    .intro-panel {
        padding: var(--sp-3) var(--sp-4);
    }

    .about-detail {
        padding-bottom: var(--sp-8);
    }
}

@media (max-width: 768px) {
    .about-intro {
        padding-bottom: var(--sp-8);
    }

    .intro-panel {
        padding: var(--sp-3);
    }

    .intro-panel p {
        font-size: var(--fs-sm);
    }
}