es una ETIQUETA, no un
limite de seccion. Sin el gate sintetiza bloques por titular y todos
salen clasificados como prosa, que es exactamente el hecho.
CHASIS PROPIO A PROPOSITO. Los moldes de la libreria vienen claros y azules;
esta web es oscura y naranja. Se conserva la ESTRUCTURA del molde y se
reimplementa sobre los tokens de ESTE sitio (--border, --surface, --radius).
El gate detecta primitivas por ESTRUCTURA, no por nombre de clase.
Prefijo gd- (guide) para no colisionar con .lp / .tpl- / .cmp / .faq, que ya
existen y los usan las otras 33 paginas. Nada de aqui las toca.
============================================================================ */
.gd-sec { padding-block: 2.6rem; border-top: 1px solid var(--border); }
.gd-sec:first-of-type { padding-top: 0; border-top: 0; }
/* El h2 ya no necesita su margen de "separador": el limite lo da la seccion. */
.gd-sec > h2:first-child { margin-top: 0; }
/* .lp-hero traia SU propia linea divisoria. Con la seccion puesta salian DOS
reglas seguidas con una banda muerta en medio (vista en la captura a 1440,
no en el DOM: el gate daba verde). El limite lo marca ahora la seccion. */
.gd-sec .lp-hero { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
/* LA COLUMNA DE LECTURA -- el defecto ANCHO.
Se acota en `em` y NO en `ch` a proposito: `ch` se resuelve con la fuente del
ELEMENTO, asi que el mismo valor daria anchos distintos en .lp-tagline
(1.12rem) y en el cuerpo (1rem). Es la trampa de 10-vocabulario 3.
`max-width` NUNCA estrecha por debajo del contenedor: dentro de una tarjeta
de FAQ o de una celda ya angosta simplemente no llega a aplicar.
33em NO es un numero elegido: a 36em la peor linea medida seguia en 85 cpl.
33em la deja en ~78 y la mediana en ~69, dentro del rango 45-90. */
.gd-sec p, .gd-sec li { max-width: 33em; }
/* Tablas, figuras y bloques de codigo mandan sobre la columna de lectura: son
evidencia, no texto corrido, y necesitan el ancho entero. */
.gd-sec .cmp-wrap, .gd-sec .fig, .gd-sec .snip { max-width: none; }
/* FAQ a dos columnas. Hace tres cosas de una: baja de ~100 cpl las respuestas
sin tocar el texto, da a la seccion una maqueta 2D real, y convierte una pila
de tarjetas en una rejilla escaneable. Modificador sobre .faq (no la
redefine): las otras paginas que usan .faq siguen a una columna. */
.gd-faq { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
@media (max-width: 640px) {
.gd-sec { padding-block: 2rem; }
}
/* ---------- Testimonios · molde `web-testimonios-001` de la libreria ---------
20-ago-2026. Estaba registrado como 🟢 EN PRODUCCION en nora desde el 6-ago
(`oraculo-web/_gen.ps1 -> Testimonios()`) y aqui se habian escrito a mano como
parrafos sueltos: exactamente lo que el indice existe para evitar.
Lo que se roba del molde, que no es el aspecto:
· UN AUTOR, UNA TARJETA. Dos citas de la misma persona salian lado a lado.
· //, no . Ademas de correcto, `figure`
esta en la lista de PARADAS de medir-pantallas.js: cuatro citas en
parrafos son un muro de una pantalla, en figuras no.
· 🔴 SIN schema Review/AggregateRating a proposito: Google penaliza las
resenas que una web publica sobre si misma, y ahi caen las acciones
manuales. La cita va como texto, no como dato estructurado.
· Permiso del cliente, y nunca capturas. Los cuatro de aqui estan
transcritos en sus fichas de Notion y Manuel autorizo los nombres.
Tokens de climentmedia, no los de nora: --surface/--border/--radius. */
.testi-grid { display: grid; gap: 1.1rem; margin-top: 1.6rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.testi { margin: 0; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.5rem 1.6rem 1.2rem; position: relative; }
/* La comilla es decorativa. Va en ::before con el color de marca al 30% para
que no compita con el texto y para que ningun lector de pantalla la lea. */
.testi::before { content: "\201C"; position: absolute; top: 0; left: 0.7rem;
font-size: 3.2rem; line-height: 1; color: var(--accent-bright);
opacity: 0.3; pointer-events: none; }
.testi blockquote { margin: 0; padding: 0; border: 0; font-style: normal;
font-size: 0.97rem; line-height: 1.6; color: var(--muted); }
.testi figcaption { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.testi cite { font-style: normal; font-weight: 700; font-size: 0.88rem; color: var(--accent-bright); }
.testi-quien { display: block; font-weight: 400; font-size: 0.84rem; color: var(--muted); margin-top: 0.15rem; }
/* ---------- Indice compacto · primitiva `13-indice-con-guias` de la libreria --
20-ago-2026. El molde lo dice con estas palabras: «Es lo primero que hay que
anadirle a /learn/». Llevaba escrito desde el 10-ago y nunca se hizo.
Por que aqui y no una rejilla de tarjetas: el catalogo de /learn/ son ONCE
piezas. En tarjetas, a 390 px eso son mas de 3 pantallas en UN solo bloque, y
`medir-pantallas.js` lo tumbaba por el tope del contenedor -- con razon, once
tarjetas apiladas no se leen, se sufren. La seccion `calificacion` de encima
ya hace el trabajo de elegir; esta hace el de ENUMERAR, y para enumerar una
lista compacta gana. Cada es ademas una PARADA para el gate.
Los puntos-guia son un borde punteado, no caracteres: «......» escrito se lee
en voz alta punto a punto. Y desaparecen bajo 640 px, que es lo que dice el
molde en su nota de responsive. */
.idx { border-top: 2px solid var(--text); margin: 1.4rem 0 0; padding: 0;
list-style: none; counter-reset: idx; }
.idx li { counter-increment: idx; border-bottom: 1px solid var(--border); }
.idx a { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.85rem 0;
text-decoration: none; color: var(--text); font-size: var(--fs-body); line-height: 1.4; }
.idx a:hover { color: var(--accent-bright); }
.idx a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.idx a::before { content: counter(idx, decimal-leading-zero); flex: none;
color: var(--muted); font-size: 0.82rem; font-weight: 700;
letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.idx__t { flex: none; max-width: calc(100% - 5rem); }
.idx__g { display: none; }
.idx__n { margin-left: auto; flex: none; color: var(--muted); font-size: 0.82rem; }
@media (min-width: 40rem) {
.idx__g { display: block; flex: 1; min-width: 2rem;
border-bottom: 1px dotted var(--border); transform: translateY(-0.35em); }
.idx__n { margin-left: 0; }
}
/* Foto del hero en una ficha (hoy solo /about/). El hero de .lp es una columna
estrecha: sin tope, una imagen de 900x1350 se come dos pantallas. 260px es el
ancho al que la cara se lee sin robarle el sitio al texto. */
.lp-foto { max-width: 260px; margin: 2rem 0 0; }
.lp-foto .about-frame { aspect-ratio: 2 / 3; }
/* ---------------------------------------------------------------------------
.cta-linea · el CTA DISCRETO de mitad de articulo (26-ago-2026)
---------------------------------------------------------------------------
POR QUE EXISTE, con el numero delante. `09-tipos-de-pagina.md §2.6` PROHIBE
mas de 2,5 pantallas seguidas sin nada que pulsar. Inventario de las 17
guias de /learn/ medido en produccion ese dia: 12 lo incumplian, y
`marketing-attribution` llegaba a 19,2 pantallas seguidas sin un solo CTA.
En una guia de 21 pantallas ese limite pide unos 8 puntos de accion. Ocho
botones naranjas serian relleno, que es el OTRO fallo que perseguimos
(anti-slop §6: el mismo texto repetido en varios huecos). Hacia falta un
SEGUNDO PESO: un enlace, no un boton.
Cuenta para el gate porque su clase lleva `cta` -- el selector de
`medir-pantallas.js` es `a[class*=cta]` -- y se lee como lo que es: una
salida ofrecida al final de una idea, no un anuncio.
USO al cierre de una seccion que no merece boton. El boton primario
(`.gd-cta` + `.btn-primary`) se reserva para 2-3 momentos de alta
intencion por pagina: tras la tabla, tras el entregable, en el cierre.
NO dos seguidos · el mismo texto en dos sitios · como unico CTA de la
pagina (el lector que llega convencido necesita el boton).
COLOR `--accent-bright`, que es el token que `DESIGN.md §2` declara para
"el naranja como TEXTO PEQUENO sobre el lienzo". El `--accent` puro no
llega a AA a este tamano, y eso se mide con getComputedStyle, nunca
leyendolo de una captura.
--------------------------------------------------------------------------- */
.lp .cta-linea {
display: block; margin: 1.7rem 0 0; padding-top: 0.9rem;
border-top: 1px solid var(--border);
font-size: 0.95rem; font-weight: 700; line-height: 1.45;
color: var(--accent-bright); text-decoration: none;
}
.lp .cta-linea:hover { text-decoration: underline; }
.lp .cta-linea:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.lp .cta-linea::after { content: " \2192"; }
/, no. Ademas de correcto, `figure` esta en la lista de PARADAS de medir-pantallas.js: cuatro citas en parrafos son un muro de una pantalla, en figuras no. · 🔴 SIN schema Review/AggregateRating a proposito: Google penaliza las resenas que una web publica sobre si misma, y ahi caen las acciones manuales. La cita va como texto, no como dato estructurado. · Permiso del cliente, y nunca capturas. Los cuatro de aqui estan transcritos en sus fichas de Notion y Manuel autorizo los nombres. Tokens de climentmedia, no los de nora: --surface/--border/--radius. */ .testi-grid { display: grid; gap: 1.1rem; margin-top: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .testi { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.2rem; position: relative; } /* La comilla es decorativa. Va en ::before con el color de marca al 30% para que no compita con el texto y para que ningun lector de pantalla la lea. */ .testi::before { content: "\201C"; position: absolute; top: 0; left: 0.7rem; font-size: 3.2rem; line-height: 1; color: var(--accent-bright); opacity: 0.3; pointer-events: none; } .testi blockquote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: 0.97rem; line-height: 1.6; color: var(--muted); } .testi figcaption { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } .testi cite { font-style: normal; font-weight: 700; font-size: 0.88rem; color: var(--accent-bright); } .testi-quien { display: block; font-weight: 400; font-size: 0.84rem; color: var(--muted); margin-top: 0.15rem; } /* ---------- Indice compacto · primitiva `13-indice-con-guias` de la libreria -- 20-ago-2026. El molde lo dice con estas palabras: «Es lo primero que hay que anadirle a /learn/». Llevaba escrito desde el 10-ago y nunca se hizo. Por que aqui y no una rejilla de tarjetas: el catalogo de /learn/ son ONCE piezas. En tarjetas, a 390 px eso son mas de 3 pantallas en UN solo bloque, y `medir-pantallas.js` lo tumbaba por el tope del contenedor -- con razon, once tarjetas apiladas no se leen, se sufren. La seccion `calificacion` de encima ya hace el trabajo de elegir; esta hace el de ENUMERAR, y para enumerar una lista compacta gana. Cada
es ademas una PARADA para el gate. Los puntos-guia son un borde punteado, no caracteres: «......» escrito se lee en voz alta punto a punto. Y desaparecen bajo 640 px, que es lo que dice el molde en su nota de responsive. */ .idx { border-top: 2px solid var(--text); margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: idx; } .idx li { counter-increment: idx; border-bottom: 1px solid var(--border); } .idx a { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.85rem 0; text-decoration: none; color: var(--text); font-size: var(--fs-body); line-height: 1.4; } .idx a:hover { color: var(--accent-bright); } .idx a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; } .idx a::before { content: counter(idx, decimal-leading-zero); flex: none; color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .idx__t { flex: none; max-width: calc(100% - 5rem); } .idx__g { display: none; } .idx__n { margin-left: auto; flex: none; color: var(--muted); font-size: 0.82rem; } @media (min-width: 40rem) { .idx__g { display: block; flex: 1; min-width: 2rem; border-bottom: 1px dotted var(--border); transform: translateY(-0.35em); } .idx__n { margin-left: 0; } } /* Foto del hero en una ficha (hoy solo /about/). El hero de .lp es una columna estrecha: sin tope, una imagen de 900x1350 se come dos pantallas. 260px es el ancho al que la cara se lee sin robarle el sitio al texto. */ .lp-foto { max-width: 260px; margin: 2rem 0 0; } .lp-foto .about-frame { aspect-ratio: 2 / 3; } /* --------------------------------------------------------------------------- .cta-linea · el CTA DISCRETO de mitad de articulo (26-ago-2026) --------------------------------------------------------------------------- POR QUE EXISTE, con el numero delante. `09-tipos-de-pagina.md §2.6` PROHIBE mas de 2,5 pantallas seguidas sin nada que pulsar. Inventario de las 17 guias de /learn/ medido en produccion ese dia: 12 lo incumplian, y `marketing-attribution` llegaba a 19,2 pantallas seguidas sin un solo CTA. En una guia de 21 pantallas ese limite pide unos 8 puntos de accion. Ocho botones naranjas serian relleno, que es el OTRO fallo que perseguimos (anti-slop §6: el mismo texto repetido en varios huecos). Hacia falta un SEGUNDO PESO: un enlace, no un boton. Cuenta para el gate porque su clase lleva `cta` -- el selector de `medir-pantallas.js` es `a[class*=cta]` -- y se lee como lo que es: una salida ofrecida al final de una idea, no un anuncio. USO al cierre de una seccion que no merece boton. El boton primario (`.gd-cta` + `.btn-primary`) se reserva para 2-3 momentos de alta intencion por pagina: tras la tabla, tras el entregable, en el cierre. NO dos seguidos · el mismo texto en dos sitios · como unico CTA de la pagina (el lector que llega convencido necesita el boton). COLOR `--accent-bright`, que es el token que `DESIGN.md §2` declara para "el naranja como TEXTO PEQUENO sobre el lienzo". El `--accent` puro no llega a AA a este tamano, y eso se mide con getComputedStyle, nunca leyendolo de una captura. --------------------------------------------------------------------------- */ .lp .cta-linea { display: block; margin: 1.7rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--border); font-size: 0.95rem; font-weight: 700; line-height: 1.45; color: var(--accent-bright); text-decoration: none; } .lp .cta-linea:hover { text-decoration: underline; } .lp .cta-linea:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; } .lp .cta-linea::after { content: " \2192"; }