`— y lo mismo la rama no-dark de `_shell.js`. Medido sobre el HTML ya
construido: las **7** páginas estáticas sirven la forma `` (1 cada una) y **0** sirven
la de `
` ⇒ esos dos caminos son código muerto desde que el sitio quedó
22/22 en dark, y este selector cubre todo lo que de verdad se publica.
El combinador `>` es deliberado: el primer `span` ANIDA otro (``), y sin el
hijo directo el selector queda hablando de una estructura que no es la que se ve. */
.ft-bottom .wrap > span:last-child{color:var(--amarillo);font-weight:700}
/* 🔴 10-ago-2026, 22:4x — LA BANDA DE AUSPICIO, y su envoltorio interior NO se llama
`.wrap` a propósito. `footer.ft .wrap` (línea 275) es un elemento + dos clases =
especificidad (0,2,1) y le GANA a cualquier `.algo .wrap` (0,2,0), sin importar que vaya
después en el archivo. O sea que un `.ft-auspicio .wrap{display:flex}` habría perdido
contra el `display:grid` de 4 columnas del pie y la banda habría salido repartida en una
rejilla — verde en los tres detectores, porque una rejilla mal repartida no desborda.
Se evita por construcción con una clase propia (`.ft-aus-in`) en vez de ganar una guerra
de especificidad, que es la deuda que dejó `.cta-sub` y que costó nueve vueltas.
El logo va a 34 px de alto: con el lockup recortado a la tinta (320×86) eso son 127 px de
ancho, y el conjunto se lee como firma de patrocinio, no como segunda marca del sitio. */
.ft-auspicio{border-top:1px solid var(--line)}
.ft-aus-in{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 24px;max-width:1120px;margin:0 auto}
.ft-auspicio span{color:var(--muted);font-size:.85rem;letter-spacing:.02em}
.ft-auspicio img{height:34px;width:auto;display:block}
@media(max-width:520px){.ft-aus-in{flex-direction:column;gap:12px;text-align:center}}
/* La marca dejó de ser un SVG de 30 px más texto tecleado: ahora es el lockup real, que
trae la palabra DENTRO de la imagen. Por eso la altura no puede ser 30 px como el icono
viejo — el lockup es de dos renglones, así que a 30 px de alto la palabra mediría 26.8 px
para DOS líneas y quedaría ilegible. A 38 px (barra de 66 px de alto) el conjunto mide
138 px de ancho, que es menos de lo que ocupaba la marca improvisada. */
/* 🖊️ 11-ago-2026 — 38 → 46 px (+21 %) por instrucción del dueño del sitio: «el logo de EO
Accelerator del header podría tener cuando menos un 20 % más de tamaño».
⚠️ ESTA HOJA SE SIRVE: `eoa.com.mx/dark.css` contesta 200, así que **todo comentario de
este archivo es público**. La primera versión de este bloque nombraba al operador y
`fuga-privada.js` lo cazó en el barrido — el mismo guardián que nació el 10-ago cuando el
sitio le entregaba al navegador 37 líneas de comentario con nombres propios. Aquí se dice
«el dueño» y nunca un nombre; el nombre vive en el mensaje del commit, que es privado.
46 y no 45.6 porque un
`height` fraccionario deja el lockup en medio píxel y lo difumina.
🔴 SE MIDIÓ ANTES DE MOVERLO, porque este cambio tiene un acoplamiento que no se ve: la
marca más ancha empuja el ancho NATURAL de la barra, y entre ese ancho y el corte de la
hamburguesa (1010 px) la barra de escritorio **envuelve en dos renglones en vez de
desbordar** — invisible a los tres detectores, que es el defecto de las secciones 1 y 2.
`scripts/home-nav.mjs` vigila justo eso (`la barra cabe en su propio corte`).
Medido con el logo a 38: la barra pedía **762 px a 1024 y 786 a 1440**, o sea 224 px de
holgura — NO los ~1005 que declara el comentario de `home-nav.mjs`, que quedó caducado
cuando la fusión del 11-ago mató dos pestañas (`/como-funciona` y `/acerca`). Con 46 px
sube a ~815 y sigue sobrando. *La holgura no se supuso: se pesó, y el número escrito al
lado del guardián estaba viejo.*
El pie se queda en 42 a propósito: el encargo dice «del header».
🖊️ TRES MOVIMIENTOS EN LA MISMA SESIÓN, y el número final es el tercero: 38 → 46 (+21 %) →
60 (+30 % más) → **48** («bájale un 20 % al tamaño actual», 60 × 0.8 = 48 exacto). Acumulado
sobre el original: **+26 %**. Los 60 px se vieron en vivo y resultaron demasiado; 48 es el
ancho que quedó, y **es un número que él calibró MIRANDO el sitio publicado**, no una
propuesta. Se deja la cadena escrita porque el valor intermedio explica la barra: la subida a
60 fue la que obligó a mover el alto de la barra y las anclas, y la bajada a 48 los devolvió
—barra 80 → **68**, anclas 98 → **86**— manteniendo los mismos 10 px de aire por lado.
*Los tres números se mueven juntos o el header respira mal; no son tres decisiones, es una.*
🔴 Y ESTA VEZ SÍ ARRASTRA LA BARRA, que la primera no. A 46 px en una barra de 66 quedaban
10 px de aire arriba y abajo; a 60 px quedarían **3**, o sea el lockup casi tocando los dos
bordes. Así que la barra pasa a **80 px** (los mismos 10 px de aire), y eso arrastra una
tercera cosa que no se ve: `scroll-margin-top` de los destinos con `id` era **84 = 66 + 18**,
y con la barra a 80 tiene que ser **98**, o las anclas de esta casa (`#el-ano`, `#tu-ag`,
`#el-capitulo`, `#faq`) aterrizan **debajo del header pegajoso**. Un destino tapado por una
barra fija NO desborda nada y ningún detector lo ve — se cazó leyendo la hoja antes de
mover el número, no después. *Un alto de barra no es un dato de la barra: es un dato del
que tres reglas dependen.* */
.brand img{height:48px;width:auto;display:block}
footer.ft .brand img{height:42px}
/* Speedy con el libro de Scaling Up en /programa. Tres declaraciones y ni una más: el ancho
está TOPADO a 240 px porque la portada del libro trae texto generado que no es texto
(medido mirándola al 100 %), y a este tamaño se lee como textura y no como una frase mal
escrita. El `min()` con `46vw` es para que en un teléfono no se coma la banda. */
.speedy-aval{display:flex;justify-content:center;margin:24px 0 2px}
.speedy-aval img{width:min(240px,46vw);height:auto}
@media(max-width:640px){footer.ft .wrap{grid-template-columns:1fr 1fr}}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(8,8,31,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.sticky .btn{width:100%}
@media(max-width:820px){.sticky{display:block}body{padding-bottom:76px}
/* Quien navega con teclado: el navegador desplaza lo MÍNIMO para meter en la
ventana el elemento que acaba de recibir el foco — o sea, lo deja pegado al
borde de abajo, que es exactamente donde vive esta barra fija (76px, z-index
50). Medido el 9-ago a 390px con Tab REALES de punta a punta: cuatro paradas
del recorrido —«¿Necesito ser miembro…?», «Acerca de», «Coaches» y
«Directorio»— recibían el foco DETRÁS de la barra. El `padding-bottom` de
arriba sólo salva al último elemento de la página, no a los del camino.
`scroll-padding-bottom` le dice al navegador de cuánto es el borde que no
puede usar. 88 = los 76 de la barra + 12 de aire para que se vea el anillo
de foco, no sólo el texto. */
html{scroll-padding-bottom:88px}}
.wa-float{position:fixed;right:18px;bottom:88px;z-index:45;width:52px;height:52px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
@media(max-width:820px){.wa-float{bottom:96px}}
/* hero trust stats */
.trust{display:flex;gap:26px 44px;flex-wrap:wrap;margin-top:40px}
.trust div{display:flex;flex-direction:column}
.trust b{font-size:1.7rem;font-weight:900;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trust small{color:var(--muted);font-size:.82rem;margin-top:2px}
/* proof strip */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy-deep);text-align:center}
.proof .wrap{padding:26px 24px}
.proof .pk{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.proof .names{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;margin-top:14px;font-weight:800;color:var(--ink);font-size:1.05rem}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;grid-auto-rows:184px}
.gal figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.gal figure.big{grid-column:span 2;grid-row:span 2}
/* 🔴 10-ago-2026 — UN EVENTO CON UNA SOLA FOTO dejaba MEDIA BANDA VACÍA. «Presencia
internacional» publica una única imagen y la traía marcada `big` = 2 de 4 columnas ⇒ las
columnas 3 y 4 quedaban en negro los dos renglones. Venía así desde /galeria y cruzó la
fusión intacto: `link-audit` mira destinos, `style-audit` mira clases, los tres detectores
miden desborde — y una CELDA VACÍA no desborda nada, así que la sección salió verde en las
259 mediciones. Salió de MIRAR el recorte. Va después de `.big` a propósito: el mismo
`` lleva las dos, y la que debe ganar es ésta. Dentro de la consulta de 720 px la
regla de `.big` vuelve a pisarla, y ahí es correcto: 2 columnas de 2 ya es ancho completo.
⚠️ 11-ago-2026 — EL CASO QUE MOTIVÓ ESTA REGLA YA NO EXISTE, y se dice aquí para que el
comentario no siga afirmando un presente que dejó de ser cierto (el defecto que esta rama
lleva tres casos cazando: un comentario que sobrevive a lo que describía miente con la
autoridad de estar al lado del código). «Presencia internacional» pasó a TRES fotos con
la enmienda de hoy, así que `:only-child` no aplica hoy en ninguna de las 18 páginas.
**La regla se queda**, y no por inercia: es la defensa del caso, no del sitio — el día que
un evento nuevo nazca con una sola foto vuelve a morder sola. Verificarlo es un `grep` de
`class="gal"` contra el número de `` de cada bloque. */
.gal figure:only-child{grid-column:1/-1;grid-row:span 2}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:720px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.gal figure.big{grid-column:span 2;grid-row:span 1}}
/* Encabezado de cada evento de /galeria (sección 11). Lo único propio de esa página:
la rejilla es `.gal`, la misma que /historias. El h2 pasa de `var(--blue)` —token que
NO existe en dark.css y que habría heredado en silencio— a blanco, que es como titula
el resto del molde; el rótulo de fecha y sede toma `--azul-soft`, el mismo con el que
`.pcard .co` y `.post .go` rotulan sobre navy. */
.gal-event{margin-top:48px}
.gal-event:first-child{margin-top:0}
/* 10-ago — pasa de `h2` a `h3`, y el cambio lo CAUSÓ la fusión: en `/galeria` los títulos
de evento eran el primer nivel abajo del `h1`, así que `h2` era correcto. Al absorberlos,
`/historias` les puso arriba un `h2.section-title` («Lo que ya pasó aquí») ⇒ seis títulos
de evento quedaban como HERMANOS de su propio encabezado de sección. Un lector de
pantalla anuncia entonces siete secciones al mismo nivel donde hay una con seis
subsecciones. No es sinónimo nuevo: es la misma regla apuntando al elemento correcto. */
.gal-event h3{font-size:1.4rem;color:#fff}
.gal-event .when{color:var(--azul-txt);font-size:.9rem;font-weight:700;margin:6px 0 0}
.gal-event .gal{margin-top:16px}
/* internacional */
.intl{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;margin-top:40px}
.intl figure{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);position:relative}
.intl figure img{width:100%;display:block}
.intl figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(transparent,rgba(8,8,31,.9));font-weight:700;font-size:.9rem}
.intl .rows{display:flex;flex-direction:column;gap:16px}
.intl .row b{color:var(--azul-txt);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.intl .row p{margin:4px 0 0;font-weight:700;font-size:1.05rem;color:#fff}
@media(max-width:760px){.intl{grid-template-columns:1fr}}
/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.post{background:var(--navy-panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .14s,border-color .14s}
.post:hover{transform:translateY(-3px);border-color:var(--azul-soft)}
/* 11-ago-2026 — `.card .ph` se AÑADE a este selector, no se re-descubre en una regla nueva.
Es la misma instrucción que esta hoja ya lleva escrita para `.go` («si nace otro
contenedor, se añade aquí») y el motivo es el de la sección 4: un sinónimo con otra razón
de caja sería un SEGUNDO sistema visual para la misma cosa. Las 6 tarjetas de «Qué recibes
en el año» de /programa estrenan foto y toman la caja del blog TAL CUAL: `16/10`.
⇒ Por eso las fotos de `/programa` se cortaron a 16/10 y no a 16/9: la razón la manda la
hoja, y el emisor (`scripts/gallery-variantes.mjs`, grupo `recibes`) se ajusta a ella. */
.post .ph,.card .ph{aspect-ratio:16/10;overflow:hidden}
.post .ph img,.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
/* La sangría. `.post` no lleva padding (lo pone `.bd` adentro), pero `.card` sí —26px 22px—
así que su foto necesita salirse de ese padding para pegarse al borde. El margen negativo
es exactamente el padding de `.card`: si uno cambia, este otro cambia con él.
`overflow:hidden` va en la tarjeta y NO en `.card` a secas: es lo que recorta la esquina
redondeada de la foto contra el `border-radius:20px`. Acotado a `.card.foto` a propósito —
ponerlo en `.card` global le cambiaría el recorte a las tarjetas de otras 20 páginas por
comodidad, que es el modo de fallo que esta corrida lleva 20 vueltas evitando. */
.card.foto{overflow:hidden}
.card.foto .ph{margin:-26px -22px 18px}
/* `.bd` y `p` crecen para que el «Leer guía →» quede PEGADO ABAJO y los tres de un
renglón queden a la misma altura. El molde viejo lo hacía (`.post-card .bd{flex:1}` +
`p{flex:1}`) y la migración de la sección 10 lo perdió: medido en la captura de 1024,
la tarjeta con 3 renglones de descripción dejaba su enlace 22 px más abajo que sus dos
vecinas. Un enlace desalineado no desborda nada, así que ningún detector lo ve. */
.post .bd{padding:20px;display:flex;flex-direction:column;flex:1}
.post .bd p{flex:1}
.post .cat{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rosa);font-weight:700}
.post h3{font-size:1.1rem;color:#fff;margin:8px 0 0;font-weight:800;line-height:1.25}
.post p{color:var(--muted);font-size:.9rem;margin:8px 0 0}
/* `.go` es el enlace «seguir» del molde. Lo estrenó el blog y lo REUSA /mexico
(sección 12): allá vive dentro de una .pcard, no de un .post. El ledger había
pre-detectado el hueco pero proponía traducir `go`→`co`, y eso era la traducción
equivocada: `.pcard .co` rotula el NOMBRE DE UNA EMPRESA — no es un enlace, y le
faltan el `display:inline-block` y el `margin-top` que un enlace sí necesita.
Mismo token, misma forma, dos padres ⇒ se extiende el selector. */
/* 10-ago-2026 (sección 15) — `.card .go` se AÑADE a esta lista, no se re-descubre en una
regla nueva. Es la cuarta vez en la corrida que nace un contenedor con el mismo enlace de
remate y la casa ya dejó escrita la instrucción al añadir `.muted` a la lista de enlaces
de cuerpo: «si nace otro contenedor, se añade aquí». Las 6 fichas de `/404` son `.card`
desde esta vuelta, y su `` no tenía regla en dark. */
.post .go,.pcard .go,.card .go{color:var(--azul-txt);font-weight:700;font-size:.88rem;margin-top:12px;display:inline-block}
@media(max-width:760px){.posts{grid-template-columns:1fr}}
/* scaling up band */
.su{display:flex;align-items:center;gap:24px;margin-top:34px;background:linear-gradient(150deg,#12123a,#1a1550);border:1px solid var(--line);border-radius:20px;padding:22px 28px;flex-wrap:wrap}
.su img{width:74px;height:auto;flex:none}
.su .t{flex:1;min-width:220px}.su .t b{color:#fff;font-size:1.05rem}.su .t b span{color:var(--amarillo)}.su .t p{color:var(--muted);margin:6px 0 0;font-size:.92rem}
/* faq */
.faq{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--navy-panel);border:1px solid var(--line);border-radius:14px;padding:2px 20px}
.faq summary{cursor:pointer;font-weight:700;color:#fff;padding:16px 26px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:13px;color:var(--azul-txt);font-size:1.35rem;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--muted);margin:0 0 16px;font-size:.95rem;line-height:1.6}
/* Contenido siempre visible (sin fade-on-scroll: evitaba secciones en blanco al hacer scroll rápido). */
.rv{opacity:1;transform:none}
/* ============================================================================
CAPA DE INTERIORES — el mismo sistema visual, hablando el vocabulario que los
interiores YA usan (.section, .container, .card, .grid, .step, .cta-band…).
Por qué existe, y por qué NO es un tercer sistema: el contenido de src/pages/*
está escrito contra styles.css. Cambiar la línea `layout:` en build.mjs le pone
el chrome dark pero deja el SIN NINGUNA REGLA — y el HTML se ve perfecto,
así que sólo se detecta en un navegador. Las dos salidas eran reescribir el
marcado de 17 páginas (17 oportunidades de alterar copy) o enseñarle a dark.css
el vocabulario. Esto es lo segundo: mismos tokens, mismo radio, mismo ritmo que
.tile/.band. Cero copy tocado, cero marcado tocado.
El guardián es style-audit.mjs: sale 1 si una página rendereada usa una clase
que su propia hoja no define.
============================================================================ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,8vw,88px) 0}
.section-alt{background:var(--navy-deep)}
.section-navy{background:var(--navy-deep)}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.center{text-align:center}
.lead{color:var(--muted);font-size:1.08rem;max-width:60ch}
/* Encabezado de interior: el equivalente del hero del home, en escala de página interna. */
.subhero{padding:clamp(56px,7vw,86px) 0 clamp(30px,4vw,44px);text-align:center;
background:radial-gradient(1100px 420px at 50% -10%,rgba(50,57,203,.30),transparent 60%)}
.subhero h1{font-size:clamp(2rem,4.6vw,3rem);color:#fff}
.subhero p{color:var(--muted);max-width:640px;margin:16px auto 0;font-size:1.08rem}
.subhero .p,.section-title .p,h1 .p,h2 .p{color:var(--rosa-hi)}
.subhero .y,.section-title .y,h1 .y,h2 .y{color:var(--amarillo)}
.section-title{font-size:clamp(1.7rem,4.2vw,2.6rem);text-align:center;font-weight:900;color:#fff}
.section-intro{color:var(--muted);text-align:center;max-width:680px;margin:16px auto 0;font-size:1.04rem}
.grid{display:grid;gap:22px;margin-top:44px}
/* El margen de 44 separa la rejilla de SU ENCABEZADO. Cuando la rejilla es lo primero
del contenedor (así abre la sección de los 4 temas de /programa) no hay encabezado
que separar y esos 44 px se apilan sobre el padding de .section y sobre el de
.subhero: hasta 176 px de vacío entre el párrafo de entrada y la primera tarjeta.
Medido mirando la captura de 1024, no por instrumento: un hueco no desborda nada. */
.container > .grid:first-child{margin-top:0}
/* Hermana de la regla del tercero huérfano (abajo, en la consulta de 900): una rejilla
con UN SOLO hijo lo deja pegado a la izquierda con dos columnas de vacío al lado.
Mordió en /aliados (sección 13): «Nuestros aliados» publica un patrocinador en una
.g3, y esa sección le habla justamente a patrocinadores — un logo solo y descuadrado
se lee como abandono, no como principio. Tampoco lo ve ningún detector: un hueco no
desborda. `:only-child` sólo casa cuando de verdad es el único; el día que entre el
segundo aliado la regla se apaga sola. */
.grid > :only-child{grid-column:1/-1}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* .card es .tile con la banda de color arriba que el molde viejo usaba para
distinguir los cuatro temas. Se conserva porque codifica información, no adorno. */
.card{background:var(--navy-panel);border:1px solid var(--line);border-top:4px solid var(--azul);
border-radius:20px;padding:26px 22px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-4px);border-color:var(--azul-soft)}
.card .k{font-weight:900;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-txt)}
.card h3{margin:10px 0 8px;font-size:1.26rem;color:#fff;font-weight:800}
.card p{color:var(--muted);margin:0}
/* Un enlace dentro del cuerpo de una tarjeta necesita verse enlace: hereda `color`
de `a{color:inherit}`, así que sin esto queda del mismo gris del párrafo y nadie
descubre que se puede pulsar. Subrayado con separación para que no toque las
descendentes.
9-ago-2026 (enmienda) — y `.section-intro` tenía EXACTAMENTE el mismo agujero: los dos
enlaces nuevos al FAQ del home nacieron invisibles, del mismo gris del párrafo. No lo vio
ningún detector (un enlace sin color no desborda ninguna caja) ni `link-audit.mjs` (el
destino existe y responde 200): se vio mirando la captura de 1024. ⇒ la regla deja de ser
de `.card` y pasa a ser del sitio: **texto de cuerpo sobre navy, el enlace se distingue**.
Si nace otro contenedor de texto, se añade aquí, no se re-descubre.
9-ago-2026 (sección 5) — y se cobró por tercera vez, ahora en `.pcard .co`: dos
coaches enlazan la web de su empresa (RGF Manufacturing, Stanser) y los dos
enlaces nacían invisibles. Se añade AQUÍ, como dice el renglón de arriba, en vez
de volver a descubrirlo. `.co` ya es azul, así que lo único que le faltaba era el
subrayado que lo declara pulsable.
10-ago-2026 (sección 13) — cuarta vez, y el renglón de arriba lo había previsto por
escrito: «Si nace otro contenedor de texto, se añade aquí, no se re-descubre».
`/aliados` cierra con `
` que enlaza al Marketplace, y ese
párrafo no es `.card p` ni `.section-intro` ⇒ el enlace nacía del mismo gris del
texto. Se añade `.muted` a la lista en vez de descubrirlo una quinta vez. */
.card p a,.section-intro a,.muted a{color:var(--azul-txt);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.card p a:hover,.section-intro a:hover,.muted a:hover{color:var(--ink)}
.pcard .co a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pcard .co a:hover{color:var(--ink)}
/* La barra es `position:sticky` (**80 px** desde el 11-ago-2026, era 66): un salto de ancla
deja el encabezado de destino DEBAJO de ella. `scroll-margin-top` le dice al navegador
cuánto borde no puede usar — **98 = los 80 de la barra + 18 de aire** (era 84 = 66 + 18).
🔴 Y AQUÍ SE CORRIGE UNA AFIRMACIÓN QUE ESTE COMENTARIO HIZO SIN MEDIR. Decía que dejarlo
en 84 habría metido los destinos «14 px debajo del header»: es **falso**, y la sonda lo
desmintió el mismo día. `anclas-en-pagina.js` mide la barra en **81 px** reales (los 80 del
alto más su borde), así que 84 seguía siendo mayor y ningún destino quedaba tapado —
`tapado:false` en las dos anclas de `/programa`, con `scrollMarginTop:98`. Lo que 84 daba
eran **3 px de aire** en vez de 17: el encabezado se veía PEGADO a la barra, no escondido
debajo. El cambio es correcto y su motivo es respiración, no un ancla rota.
*Queda escrito porque un comentario que exagera su justificación engaña igual que uno que
la inventa: el siguiente que lo lea creería que hubo un defecto donde hubo una estrechez, y
este archivo lleva cuatro casos cazando justamente números afirmados y no medidos.*
Va en cualquier sección con `id`, que es lo único a lo que se salta. */
.section[id],.subhero[id],.band[id]{scroll-margin-top:86px}
.card.c-pink{border-top-color:var(--rosa)}
.card.c-pink .k{color:var(--rosa-hi)}
.card.c-yellow{border-top-color:var(--amarillo)}
.card.c-yellow .k{color:var(--amarillo)}
/* Línea de tiempo de interior. Llega con la sección 2 (`/como-funciona`, 9-ago-2026):
es el único vocabulario que esa página usaba y que esta hoja no definía —sin estas
tres reglas el se renderea sin geometría y el HTML se ve perfecto, que es
justo el modo de fallo que el encabezado de esta capa advierte—. Misma geometría
que en styles.css (columna de 120 px + separador), traducida a los tokens de aquí:
el rótulo pasa de `--blue` a `--azul-soft`, que es el mismo color con el que ya se
rotulan las `.card .k`; `--azul` sobre navy no se lee.
El separador de la ÚLTIMA fila se quita a propósito: en el molde viejo colgaba una
raya debajo del último renglón sin nada que separar (visible en la captura de 1440).
Un separador que no separa es adorno huérfano, el mismo cajón que el hueco de la
rejilla de tres. */
/* Requisitos y listas de calificación. Llegan con la sección 3 (`/para-quien`,
9-ago-2026). `.reqs` es una `.g4` con nombre propio: se le dan las MISMAS pistas y
los MISMOS cortes que `.g4` de esta hoja (900 → 2 columnas, 640 → 1), no los del
molde viejo (940/620), porque el objeto de la corrida es un solo sistema visual.
🔴 `.checks` NO es adorno: es el significado de la página. La paloma y la tacha son
lo que separa «calificas» de «no calificas», y sin estas reglas las dos listas caen
a la viñeta del navegador — idénticas entre sí— y el filtro de calificación deja de
filtrar. Un fallo que ningún guardián de esta casa ve: no desborda, no lanza
excepción, y las clases .checks/.yes/.no ni siquiera existían aquí para que
style-audit las extrañara… hasta ahora.
Traducción de color, misma regla que la `.timeline`: el círculo del ✓ pasa de
`--blue` a `--azul-soft` (`--azul` sobre navy no se despega del fondo); el del ✕ se
queda en `--rosa`, que sí contrasta. El glifo va en blanco en los dos. */
.reqs{grid-template-columns:repeat(4,1fr)}
/* 12-ago-2026 — `.cap-h3` SUBE de estar embebida en `/programa` a la hoja compartida, porque la
estrenó una segunda página: el bloque de los cuatro valores de EO en `/para-quien`. Definirla
dos veces (una en el `css:` en línea de la Function y otra aquí) serían dos copias que
divergen el día que una cambie — el modo de fallo que esta hoja lleva veinte vueltas evitando.
Es un `h3` que encabeza un GRUPO dentro de una banda, y va deliberadamente más chico que un
`.section-title`: si compitiera en tamaño con el `h2` partiría la banda en dos bandas
visuales, que es justo lo que agrupar viene a evitar. */
.cap-h3{text-align:center;font-size:1.35rem;font-weight:800;color:#fff;margin:48px 0 6px}
.cap-h3:first-of-type{margin-top:34px}
.checks{max-width:820px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
ul.checks{padding:0}
.checks li{list-style:none;padding-left:34px;position:relative;font-size:1.05rem;color:var(--ink)}
.checks li::before{position:absolute;left:0;top:2px;color:#fff;width:22px;height:22px;
border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:900;line-height:1}
.checks.yes li::before{content:"\2713";background:var(--azul-soft)}
.checks.no li::before{content:"\2715";background:var(--rosa)}
.timeline{max-width:760px;margin:44px auto 0;display:grid;gap:0}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.tl-item:last-child{border-bottom:0;padding-bottom:0}
.tl-item b.q{color:var(--azul-txt);font-weight:900;font-size:1.1rem}
.tl-item h3{font-size:1.15rem;color:#fff;font-weight:800;margin-bottom:6px}
.tl-item p{color:var(--muted);margin:0}
@media(max-width:640px){.tl-item{grid-template-columns:1fr;gap:6px;padding:18px 0}}
.step{text-align:center;padding:0 12px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
border-radius:50%;background:var(--azul);color:#fff;font-weight:900;font-size:1.25rem;margin-bottom:16px}
.step:nth-child(2) .step-n{background:var(--rosa)}
.step:nth-child(3) .step-n{background:var(--amarillo);color:var(--navy)}
.step h3{font-size:1.2rem;margin-bottom:6px;color:#fff;font-weight:800}
.step p{color:var(--muted);margin:6px 0 0}
/* ---- niveles de patrocinio: nace en /aliados (sección 13, 10-ago-2026) ------
Es el primer vocabulario de esta corrida que faltaba ENTERO, no por un token:
`styles.css` lo define en sus líneas 273-280 y aquí no había una sola regla, así
que la línea de `layout:` dejaba el bloque donde el patrocinador decide sin
tarjeta, sin columnas y con viñetas de lista por omisión.
No se escribe un molde nuevo: la tarjeta ES `.card` (mismo fondo, mismo borde,
mismo radio) y la palomita ES la de `.checks.yes` (mismo glifo, mismo disco de
22 px, mismo `--azul-soft`). Lo único propio es la COLUMNA, y por una razón
medida: las tres tarjetas se estiran a la altura de Oro (5 viñetas contra 3), y
sin `margin-top:auto` el botón de Bronce y el de Plata quedan a media tarjeta con
el vacío debajo — visible en la captura del *antes* a 1024, invisible para los
tres detectores porque un vacío no desborda nada.
Y los colores de nivel NO se inventan, igual que en la sección 12: el molde ya
distingue destacado de apagado. Oro toma `--amarillo`, que literalmente ES el oro
de la marca y ya rotula `.card.c-yellow .k`; Bronce y Plata toman `--muted`, y se
distinguen por su propia palabra y por su precio. El precio va en blanco en las
tres porque es el dato que el patrocinador vino a leer. */
.tiers{grid-template-columns:repeat(3,1fr)}
.tier{background:var(--navy-panel);border:1px solid var(--line);border-radius:20px;
padding:30px 26px;text-align:center;display:flex;flex-direction:column}
.tier.gold{border-color:var(--amarillo);box-shadow:0 20px 50px -30px rgba(245,213,77,.55)}
.tier .lvl{font-weight:900;font-size:1.4rem;color:var(--muted)}
.tier.gold .lvl{color:var(--amarillo)}
.tier .price{color:#fff;font-weight:900;font-size:1.6rem;margin:8px 0 18px}
.tier ul{list-style:none;padding:0;margin:0 0 22px;text-align:left}
.tier li{padding:10px 0 10px 34px;position:relative;color:var(--ink);font-size:.98rem;
border-top:1px solid var(--line)}
.tier li::before{content:"\2713";position:absolute;left:0;top:11px;color:#fff;
width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
font-size:.8rem;font-weight:900;line-height:1;background:var(--azul-soft)}
/* 🔴 `.btn` en esta hoja es SÓLO FORMA — el fondo lo pone siempre una variante
(`.btn-cta`, `.btn-ghost`, `.btn-pink`) o un contexto (`.cta-band .btn`, línea 630).
En `styles.css` el `.btn` pelón sí traía relleno, así que los tres `class="btn btn-sm"`
de los niveles cruzaron la migración convertidos en TEXTO PLANO: sin fondo, sin borde,
sin pista de que se pueden pulsar. Ningún guardián lo ve —la clase `.btn` existe y
`style-audit` compara nombres— y ningún detector tampoco, porque un botón sin fondo no
desborda: salió de MIRAR la captura del *después* a 1024.
El arreglo es el idioma de la casa, no una variante nueva: el contexto pone el relleno,
igual que `.cta-band .btn`. Azul y no rosa a propósito — el rosa ya es «Postúlate» en la
barra y en la franja fija, y cuatro rosas en pantalla dejan de señalar nada. */
.tier .btn{margin-top:auto;align-self:center;background:var(--azul);color:#fff}
.tier .btn:hover{background:var(--azul-soft)}
/* ---- fichas de persona: coaches y board (nace en /coaches, se hereda en
/directorio y /acerca, que publican las mismas fichas) --------------------
Por qué .people NO es `.grid g4`, que era la traducción barata: g4 reparte en
4 columnas FIJAS y las dos filas de esta página son de 5 y de 7 ⇒ la última
queda pegada a la izquierda con un hueco de TRES tarjetas al lado. Se vio
mirando la captura de 1024 del *antes*; ningún detector lo ve, porque un hueco
no desborda nada. Un wrap centrado reparte igual cuando la fila está llena y
CENTRA la incompleta — mismo cajón que el `:nth-child(3):last-child` de .g3
resuelve abajo, con la solución que sirve para un número CUALQUIERA de fichas
(el board cambia por período; una regla atada a «5» o a «7» caduca sola).
Y por qué .pcard NO se renombró a .post, que ya tiene exactamente esta forma
(panel navy, borde, radio 18, overflow, foto arriba, cuerpo abajo): la
traducción costaba ~70 ediciones de marcado en 12 fichas y dejaba `.cat`
sosteniendo el CARGO de una persona y `.go` el nombre de su EMPRESA. La regla
de esta capa es enseñarle el vocabulario a la hoja, no reescribir el marcado.
Los TOKENS sí son los de .post, uno por uno: no es un sistema nuevo, es el
mismo con un nombre honesto.
`flex-grow:0` es deliberado y es lo que arregla el hueco: con grow, la ficha
sola de la última fila se estiraría a lo ancho del contenedor — el mismo
defecto con otra cara. El tope de 290 también acorta el teléfono: a 390 la
foto cuadrada dejaba de medir 342 px por ficha, y la página del *antes*
medía 9,447 px de alto. */
.people{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:44px}
.pcard{flex:0 1 248px;max-width:290px;background:var(--navy-panel);
border:1px solid var(--line);border-radius:18px;overflow:hidden;text-align:center;
display:flex;flex-direction:column;transition:transform .14s,border-color .14s}
.pcard:hover{transform:translateY(-3px);border-color:var(--azul-soft)}
.pcard .photo{aspect-ratio:1/1;overflow:hidden;background:var(--navy-deep)}
.pcard .photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* El retrato manda `object-position:center top`: un encuadre centrado le corta la
frente a media plantilla, y estas 9 fotos vienen de 9 cámaras distintas. */
.pcard .info{padding:18px 18px 22px}
.pcard h3{font-size:1.1rem;color:#fff;margin:0;font-weight:800;line-height:1.25}
.pcard .role{color:var(--rosa-hi);font-weight:800;font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;margin:8px 0 2px}
.pcard .co{color:var(--azul-txt);font-weight:700;font-size:.88rem}
.pcard .bio{color:var(--muted);font-size:.9rem;margin:10px 0 0;text-align:left}
/* La inicial cuando no hay foto. Es un hueco HONESTO, no un relleno: se ve que
falta una foto, y por eso no se tapa con una imagen de banco. Hereda el
cuadrado de .photo, así que la rejilla no se desalinea. */
.pcard .avph{width:100%;height:100%;display:grid;place-items:center;
background:linear-gradient(135deg,var(--azul),var(--rosa));color:#fff;
font-size:2.4rem;font-weight:900;letter-spacing:.02em}
/* ── /mexico (sección 12, 10-ago-2026) ───────────────────────────────────────
Tres escalones de estado, y ANTES vivían en 9 atributos `style=` en línea con
colores del molde claro horneados (#c7caf0 · #eef0ff · #157347) más dos tokens
que en esta hoja NO EXISTEN (--blue, --pink). Es la vía por la que un token roto
entra sin que ningún guardián lo vea: `style-audit` compara CLASES, y un `var()`
dentro de un atributo en línea no es una clase. La regla de esta capa aplicada a
la letra: el escalón es vocabulario ⇒ va en la hoja, no pintado a mano en 6 fichas.
El escalón 1 (activo) no necesita clase: es el degradado que .avph ya trae. */
.pcard .avph.explora{background:rgba(91,97,224,.22);color:var(--azul-txt)}
.pcard .avph.futuro{background:rgba(255,255,255,.05);color:var(--muted)}
/* «ACTIVO» venía en #157347 — verde oscuro del molde claro. Sobre --navy-panel da
3.07:1, debajo del 4.5:1 de AA para texto pequeño (y este rótulo va a .72rem).
No se inventa un verde: el molde ya distingue destacado de apagado con --rosa-hi
(el que .pcard .role trae por omisión) y --muted. Misma jerarquía, tokens que existen. */
.pcard .role.apagado{color:var(--muted)}
.people.mt22{margin-top:22px}
/* El alfa .85 daba 4.22:1 sobre el extremo rosa del degradado (umbral 4.5) y la cota de la
parada extrema era 3.73. Blanco puro sobre `--rosa-fill` da 4.66: el alfa era LO ÚNICO
que tumbaba este renglón, y no compraba jerarquía —ésa ya la lleva el `font-size:.9rem`,
que es como el resto de la casa distingue una nota al pie de un párrafo. */
.cta-band .after{font-size:.9rem;color:#fff;margin:18px auto 0}
.cta-band .after a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* ── ARTÍCULO DE BLOG (sección 10, 10-ago-2026) ──────────────────────────────
Vocabulario de los 6 posts de /blog/*, traducido del molde viejo a estos tokens:
--paper-alt → --navy-panel · --blue → --azul-soft. Los dos de la izquierda NO
EXISTEN en dark.css, y un var() sin definir no falla: deja la declaración
inválida y la propiedad HEREDA, en silencio (el hallazgo de las secciones 3, 8 y 9).
🔴 ESTE BLOQUE VA ANTES DE .cta-band, Y NO ES ORDEN CASUAL. `.article h2` y
`.cta-band h2` tienen la MISMA especificidad (clase + elemento), así que decide el
orden de aparición. En styles.css `.article h2{color:var(--navy)}` está DESPUÉS y
por eso gana: hoy, en producción, el h2 de la franja de cierre de los 6 posts se
pinta NAVY sobre el degradado azul→rosa, con razón de contraste medida de 2.32:1
(WCAG pide 3:1 para texto grande). El llamado a la acción de las 6 páginas del motor
de SEO, ilegible, y ningún detector de desborde lo ve. Aquí `.article h2` es blanco
—así que ya no hay pelea de color— y el tamaño mayor de la franja gana por orden. */
.article{max-width:760px;margin:0 auto}
.article h1{font-size:clamp(1.9rem,4vw,2.6rem);color:#fff;margin:12px 0 10px}
.article h2{font-size:1.4rem;color:#fff;margin:34px 0 10px}
.article h3{font-size:1.15rem;color:#fff;margin:22px 0 8px}
.article p{margin:0 0 14px}
.article ul{margin:0 0 16px;padding-left:22px}.article li{margin-bottom:8px}
.article strong{color:#fff}
.article .kicker{color:var(--rosa-hi)}
.article .lead{font-size:1.14rem;max-width:none}
/* 🔴 SÉPTIMA aparición del enlace invisible en esta corrida (secciones 4 y 7 lo nombraron):
`a{color:inherit;text-decoration:none}` es GLOBAL en dark.css, así que un enlace dentro
de un párrafo nace del color del texto y sin subrayado — indistinguible de la prosa.
Aquí muerde el doble, porque el enlace CONTEXTUAL entre posts es la palanca de SEO de
esta sección. Se acota a los hijos DIRECTOS de .article para no pisar la franja de
cierre, que va dentro del mismo contenedor y viste sus enlaces de blanco. */
.article > p a,.article > ul a{color:var(--azul-txt);text-decoration:underline;text-underline-offset:3px}
.article > p a:hover,.article > ul a:hover{color:var(--ink)}
.article .meta{color:var(--muted);font-size:.9rem;margin:0 0 18px}
.article .meta a{color:var(--azul-txt);font-weight:700}
.article .meta a:hover{color:var(--ink)}
/* Sin regla de ancho la foto sale a su tamaño natural: dark.css no trae un `img`
global, así que esto no es adorno — es lo que impide que el artículo desborde. */
/* 11-ago-2026 · `.subhero` entra a esta MISMA regla, no a una copia. La banda de
`coaches-mesa` que encabeza `/coaches` por decisión firmada pide exactamente lo que este
par ya hace —ancho completo, alto libre, esquinas y borde del molde— y escribirle su
propia clase habría metido un sinónimo, que es un segundo sistema visual entrando por
la puerta de atrás (la lección de `/aplica`, sección 4). Se agrega la superficie al
selector en vez de desanclar `.article`: desanclarlo bajaría la especificidad de 0,2,0
a 0,1,0 dentro de los 6 posts, y una regla que hoy gana podría dejar de ganar sin que
nada se ponga rojo. `height:auto` es lo que vuelve el recorte CERO por construcción —
la doctrina de `/eventos` (10-ago), que aquí SÍ aplica porque la caja no es una celda
de `.gal` de 184 px fijos: la define el archivo. */
/* 11-ago-2026 — `.section .art-img` se AÑADE a estos dos selectores, que es la instrucción que
esta hoja ya lleva escrita para `.go` y que se siguió hoy para `.card .ph`: si nace otro
contenedor, se añade aquí en vez de descubrir la regla otra vez con otro nombre. Lo estrena la
banda de la generación en `/para-quien`, bajo «Es para ti si…». La razón de la foto la define
el ARCHIVO (2.5:1) porque `height:auto` no impone caja ⇒ recorte cero por construcción. */
.article .art-img,.subhero .art-img,.section .art-img{border-radius:16px;overflow:hidden;margin:26px 0;border:1px solid var(--line)}
.article .art-img img,.subhero .art-img img,.section .art-img img{width:100%;height:auto;display:block}
/* El bloque de respuesta directa (answer-first): es la pieza GEO de cada post y la
única del artículo que Scaling Up también publica (su «SUMMARY:»). Se conserva su
significado —destacado, con barra a la izquierda—, no su color de papel. */
.answer{background:var(--navy-panel);border-left:4px solid var(--azul-soft);
border-radius:8px;padding:16px 20px;margin:14px 0;color:var(--ink);font-weight:500}
/* Mismo cajón que `.container > .grid:first-child`: cuando la rejilla ABRE el
contenedor no hay encabezado del que separarse y sus 40 px se apilan sobre el
padding de .section y el de .subhero. Medido en el índice del blog: 130 px de
vacío entre el párrafo de entrada y la primera tarjeta. Un hueco no desborda. */
.container > .posts:first-child{margin-top:0}
/* «Sigue leyendo»: los 6 posts eran callejones sin salida — medido, CERO enlaces de
un post a otro, y sus únicas salidas eran el formulario externo y dos páginas del
embudo. Los tres espejos con blog vivo cierran con lecturas relacionadas (EOS:
«What to read next»). Hereda el ritmo de .article, sin tarjeta nueva. */
.sigue{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.sigue b{display:block;font-size:.76rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--azul-txt);margin-bottom:10px}
.sigue ul{margin:0;padding-left:20px}
.sigue li{margin-bottom:6px}
.sigue a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sigue a:hover{color:var(--azul-txt)}
/* el extremo rosa usa `--rosa-fill`: esta franja es fondo bajo texto BLANCO en ocho
páginas, no un acento. Ver la nota de `--rosa-fill` en `:root`. */
.cta-band{background:linear-gradient(120deg,var(--azul),var(--rosa-fill));color:#fff;
border-radius:22px;padding:clamp(34px,5vw,48px) clamp(24px,4vw,40px);text-align:center}
.cta-band h2{font-size:clamp(1.6rem,3.4vw,2.2rem);color:#fff}
.cta-band .p,.cta-band .y{color:#fff}
/* 10-ago-2026 (revisión de las secciones 1–6) — el .92 de alfa costaba contraste justo
donde la franja ya es rosa. Medido resolviendo el degradado EN EL SITIO que ocupa el
párrafo (no en su parada extrema): 4.42:1 en /acerca a 390 px, contra un umbral de 4.5
para texto de 16 px. Con blanco pleno son 4.96:1 y pasa. Es el mismo blanco: lo único
que se va es una transparencia que no aportaba nada y restaba media décima. */
.cta-band p{color:#fff;max-width:560px;margin:12px auto 24px}
.cta-band .btn{background:#fff;color:var(--azul)}
.cta-band .btn:hover{background:var(--amarillo);color:var(--navy)}
/* Dos acciones en la franja: la principal en blanco sólido, la secundaria en contorno.
`justify-content:center` es obligatorio — .hero-cta (el otro grupo de botones de la
casa) alinea a la izquierda, y dentro de una franja centrada eso se lee como error. */
.cta-band .cta-acciones{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta-band .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.cta-sub{color:rgba(255,255,255,.82);font-size:.9rem;margin:14px 0 0}
.btn-sm{padding:9px 18px;font-size:.9rem}
.btn-pink{background:var(--rosa-fill);color:#fff}
.btn-pink:hover{background:var(--rosa-fill-hi)}
.mini{font-size:.8rem;padding:6px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:700;font-family:inherit}
@media(max-width:900px){
.g4,.reqs{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
/* Los niveles NO pasan por dos columnas: en una escalera de precios el tercero
huérfano a media fila rompe la lectura ascendente que la ronda 2 acaba de poner
en el marcado. Va directo a una columna, y acotada para que a 900 px una tarjeta
de nivel no quede de ancho de pantalla. */
.tiers{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
/* Una rejilla de TRES en dos columnas deja al tercero huérfano con un hueco del
tamaño de una tarjeta a su derecha — es el «hueco de la rejilla» que ya mordió en
la corrida del home, y ningún detector lo ve porque un hueco no desborda. Se le da
el renglón completo: el contenido de .step ya viene centrado, así que se lee como
un cierre, no como un error. `:nth-child(3):last-child` sólo casa cuando el tercero
ES el último: una .g3 de 6 tarjetas no se toca. */
.g3 > :nth-child(3):last-child{grid-column:1/-1}
}
@media(max-width:640px){
.g2,.g3,.g4,.reqs,.checks{grid-template-columns:1fr}
.grid{gap:16px;margin-top:32px}
}
/* ── 15 · /404 — 10-ago-2026 ────────────────────────────────────────────────────────────
DOS reglas, y las dos van acotadas a `.p-404` (la `bodyClass` que `build.mjs` ya emite)
para no mover una regla compartida por comodidad — el modo de fallo que esta corrida
evita. Todo lo demás de esta página se resolvió REUSANDO lo que la hoja ya tenía escrito.
· El rótulo: `.kicker` es azul en dark, y en una página de error el rótulo es la señal
de error. En el molde viejo eso lo ponía un `style="color:var(--pink-txt)"` EN LÍNEA,
y `--pink-txt` tiene CERO definiciones aquí: la declaración se caía entera, sin error
y sin desborde. `--rosa-hi` es el rosa que esta hoja ya usa para el mismo trabajo
(`.article .kicker`).
· El icono: `.ic` tampoco existe en dark (vivía en `styles.css` como `.tile .ic`) ⇒ los
6 emojis se habrían encogido al tamaño del cuerpo sin que nada lo dijera. */
.p-404 .kicker{color:var(--rosa-hi)}
.p-404 .card .ic{font-size:1.8rem;line-height:1;margin-bottom:8px}
/* ═══════ 17-ago-2026 · «NUESTROS PATROCINADORES» — el muro de logos ═══════
La sección la inyecta `functions/aliados.js` desde la tabla `sponsors`, así que estas
reglas tienen que existir ANTES de que haya un patrocinador: el día que el chair dé de
alta al primero, la sección aparece con su piel puesta y nadie despliega nada. Una clase
sin regla en este molde no falla — hereda en silencio — y `style-audit --servidas` la
caza, así que se declara aquí y no en un `