/* =========================================================================
   /quienes-somos/ — composición de página (2026-08-15)

   La página era seis pilas de texto centradas: columna de 56ch con media
   pantalla muerta a la derecha, dos rejillas de tres tarjetas iguales y
   cajas con hover en contenido que no es interactivo. Este fichero la
   recompone en el ancho con los patrones del DS — split asimétrico, filas
   editoriales con regla estructural, escalonado — sin tocar una palabra
   del copy.

   Registro tipográfico: institucional (§3.3 del manual), no landing de
   conversión (§8.4). La medida de lectura sí sigue la banda 65–78 (56ch).

   Reglas de marca que mandan aquí sobre cualquier gusto:
   border-radius 0 · sombras solo blockout · paleta cerrada · Gobold para
   display · Coral nunca como texto pequeño sobre claro · primitivas de
   motion propias (§5.4) con sus guards globales.
   ========================================================================= */

/* ── S1 · Hero: split asimétrico ──
   Identidad a la izquierda (kicker + wordmark), prosa a la derecha tras
   una regla de acento Coral — la misma gramática de apertura de revista
   que la home usa en su .about-body. El apilado centrado era el patrón
   más pobre posible para 1440px de ancho. */

/* El kicker global es Índigo (páginas claras); sobre la banda Índigo del
   hero era invisible — llevaba así desde el estreno de la página. */
.about-hero .hero-kicker {
    color: var(--c-paper);
    opacity: 0.7;
}

@media (min-width: 1024px) {
    .about-hero .container {
        display: grid;
        grid-template-columns: 5fr 7fr;
        column-gap: var(--spacing-xl);
        align-items: start;
    }
    .about-hero__prose {
        border-left: var(--border-w-accent) solid var(--c-coral);
        padding-left: var(--spacing-md);
    }
}

/* Medida de lectura — manual §5.10/§8.4: 56ch ≈ 71 caracteres en la pila
   de cuerpo, colgado del propio párrafo. Vivía en global.css como
   modificador; su único consumidor es esta página, así que vive aquí. */
.about-section--prose p {
    max-width: 56ch;
}

/* ── S2 · Para quién es: filas editoriales, sin cajas ──
   Tres tarjetas iguales con hover era doble deuda: el patrón más genérico
   que existe y elevación en piezas que no se pueden pulsar. Ahora cada
   audiencia es una fila con regla estructural, la palabra en display a la
   izquierda y la definición a la derecha. El índice lo pone un counter:
   el orden de audiencias es de POSITIONING §2 y no se escribe a mano. */
.audience-rows {
    margin-top: var(--spacing-md);
    counter-reset: audiencia;
}
.audience-row {
    counter-increment: audiencia;
    border-top: var(--border-w-structural) solid var(--c-indigo);
    padding: var(--spacing-md) 0;
}
@media (min-width: 768px) {
    .audience-row {
        display: grid;
        grid-template-columns: 2fr 3fr;
        column-gap: var(--spacing-xl);
        align-items: start;
    }
}
.audience-row h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: var(--text-h2);
    /* 0.9 < --leading-display a propósito: el contenido es una sola palabra
       (Artistas / Creadores / escuelas) y una línea sola no colisiona. Si
       alguna audiencia pasara a ser multi-palabra, esto sube al token. */
    line-height: 0.9;
    color: var(--c-indigo);
}
.audience-row h3::before {
    content: "0" counter(audiencia);
    display: block;
    font-size: 0.875rem;
    letter-spacing: 2px;
    color: var(--c-coral);
    margin-bottom: var(--spacing-xs);
}
.audience-row p {
    margin: 0;
    max-width: 56ch;
    color: var(--c-carbon);
}

/* ── S3 · Quién está detrás: split texto / retrato ──
   El retrato deja de ser un adorno de 300px sobre el nombre: columna
   propia a la derecha, alineado al pie del bloque de hitos. El recortado
   sin fondo no lleva caja ni sombra (un cutout no es una card). */
@media (min-width: 1024px) {
    .founders-split {
        display: grid;
        grid-template-columns: 7fr 5fr;
        column-gap: var(--spacing-xl);
        align-items: end;
    }
    .founders-photo {
        margin: 0;
        justify-self: end;
    }
}
.founders-photo {
    margin: var(--spacing-md) 0 0;
}
.founders-photo img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}
.founders-identity {
    margin-top: var(--spacing-md);
}

/* Hitos del fundador: cada credencial es una pieza escaneable (patrón de
   premios del about de Canva). Hairline al 0.15 como las reglas internas
   de la sección en global.css. */
.founder-hitos {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
}
.founder-hitos li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(252, 247, 240, 0.15);
}
.founder-hitos li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.founder-hitos strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: var(--leading-display);
    color: var(--c-paper);
}
.founder-hitos span {
    display: block;
    margin-top: 2px;
    color: var(--c-paper);
    opacity: 0.6;
    font-size: 0.875rem;
}

/* ── S4 · Pilares: sin cajas y escalonados ──
   Las tres cards iguales con hover se quedan en la home, que es su otra
   consumidora y este fichero no la carga. Aquí el pilar es regla superior
   + número display + texto, con escalonado 0/64/128px que rompe la fila
   simétrica. El hover se va con la caja: no son enlaces. */
.pillar {
    border: 0;
    border-top: var(--border-w-structural) solid var(--c-indigo);
    background: transparent;
    padding: var(--spacing-sm) 0 0;
    min-height: 0;
    transition: none;
}
.pillar:hover {
    transform: none;
    box-shadow: none;
}
@media (min-width: 768px) {
    .pillars-grid {
        align-items: start;
    }
    .pillar:nth-child(2) {
        margin-top: var(--spacing-lg);
    }
    .pillar:nth-child(3) {
        margin-top: calc(var(--spacing-lg) * 2);
    }
}

/* ── S5 · Misión y estado: prosa + captura en columna propia ──
   La captura deja de interrumpir la lectura y pasa a columna derecha,
   pegajosa mientras se leen los cuatro párrafos. En una columna (móvil)
   vuelve al flujo, después del párrafo que ilustra. */
.about-screenshot {
    margin: var(--spacing-md) 0;
    max-width: 720px;
}
.about-screenshot img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border-w-structural) solid var(--c-paper);
}
.about-screenshot figcaption {
    margin-top: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--c-paper);
    opacity: 0.6;
}
@media (min-width: 1024px) {
    .mision-grid {
        display: grid;
        grid-template-columns: 7fr 5fr;
        column-gap: var(--spacing-xl);
        align-items: start;
    }
    .mision-grid .about-screenshot {
        position: sticky;
        top: var(--spacing-lg);
        margin: 0;
    }
}

/* ── S6 · Cómo trabajamos: la 2×2 pierde la simetría perfecta ──
   Único bloque que conserva cajas —aquí el blockout da el contraste tras
   dos secciones sin ellas— pero la columna par baja medio paso. */
@media (min-width: 768px) {
    .routes-grid {
        align-items: start;
    }
    .route-card:nth-child(even) {
        margin-top: var(--spacing-md);
    }
}