/* El cuaderno. Sólo lo suyo: lo demás sale de web.css, que es de donde
tiene que salir para que no se sienta otro sitio. */
/* ── el índice ─────────────────────────────────────────────────── */
.cab-cuaderno{padding:clamp(70px,12vh,140px) 0 clamp(26px,5vh,54px)}
.cab-cuaderno .rot{display:block;font-family:var(--font-mono);font-size:.7rem;
letter-spacing:var(--track-mono,.09em);text-transform:uppercase;color:var(--color-tenue);margin-bottom:16px}
.cab-cuaderno h1{font-family:var(--font-display);font-weight:400;
font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.02;letter-spacing:-.032em;max-width:16ch}
.cab-cuaderno p{margin-top:18px;max-width:56ch;font-size:1.0625rem;color:var(--color-tenue)}
.entradas{padding-bottom:clamp(50px,10vh,110px)}
/* ── la entrada ────────────────────────────────────────────────── */
.portada-art{position:relative;min-height:clamp(380px,62vh,620px);display:flex;align-items:flex-end;
overflow:hidden;isolation:isolate}
.portada-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* El velo se calibró contra las CUATRO portadas, no contra una. El
rótulo es el que sufre: va en 11px y queda en la parte alta del bloque
de texto, donde el velo antes todavía era delgado. Peor caso de cada
candidato, midiendo el peor píxel bajo el rótulo:
.30/.42/.86 (el de antes) 3.65 con más abajo 3.90
banda de texto 3.90 el que quedó 5.13
Arriba se queda en .30 para no apagar la luz de la foto, que es lo que
la hace valer; lo que aprieta es de la mitad para abajo, que es donde
vive el texto. */
.portada-art .velo-art{position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(6,0,79,.28) 0%,rgba(6,0,79,.44) 34%,
rgba(6,0,79,.70) 62%,rgba(6,0,79,.92) 100%)}
/* EL SEGUNDO VELO, PEGADO AL BLOQUE DE TEXTO.
El velo de arriba reparte la luz de toda la portada. El rótulo va en
11px y cae en lo más alto del bloque, que es justo donde aquel velo
todavía es delgado: medido escondiendo el texto y fotografiando su
recuadro, salía en 1.00 contra un mínimo de 4.5. Un velo que empieza
donde empieza el texto lo resuelve sin oscurecer la fotografía entera. */
.portada-art .velo-texto{position:absolute;left:0;right:0;bottom:0;z-index:-1;
height:min(62%,420px);
background:linear-gradient(180deg,rgba(6,0,79,0) 0%,rgba(6,0,79,.55) 42%,
rgba(6,0,79,.86) 100%)}
.portada-art .w{padding-top:clamp(70px,14vh,150px);padding-bottom:clamp(30px,6vh,64px);
color:var(--color-papel);display:grid;gap:12px}
/* a plena opacidad y no a .82: medido sobre la foto, el rótulo caía en
3.79 contra el mínimo de 4.5 que pide un texto de 11px. La bajada, que
es más grande y va más abajo donde el velo aprieta, pasa de sobra. */
/* el color, que es lo que fallaba: `.rot` nace gris porque casi siempre
va sobre papel, y ese gris sobre una fotografía da 1.5 */
.portada-art .rot{font-family:var(--font-mono);font-size:.7rem;letter-spacing:var(--track-mono,.09em);
text-transform:uppercase;opacity:1;color:var(--color-papel)}
.portada-art h1{font-family:var(--font-display);font-weight:400;
font-size:clamp(2.1rem,6.2vw,4rem);line-height:1.03;letter-spacing:-.03em;max-width:17ch}
.portada-art .bajada{max-width:52ch;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.45;opacity:.92}
/* La medida de línea manda sobre el ancho del contenedor: un párrafo de
más de 70 caracteres se lee peor por ancho que por tamaño. */
.cuerpo-art{padding:clamp(40px,8vh,88px) 0 clamp(50px,10vh,110px)}
.cuerpo-art .w{max-width:none}
.cuerpo-art p{max-width:62ch;margin:0 auto;font-size:clamp(1.0625rem,1.35vw,1.1875rem);
line-height:1.62;text-wrap:pretty}
.cuerpo-art p + p{margin-top:1.15em}
/* El primer párrafo entra más fuerte, que es lo que hace de puente con
la bajada de la portada.
OJO CON :first-of-type. Sin acotarlo al hijo directo también agarraba
el
de la tarjeta de cierre, porque ahí ese
también es el
primero DE SU PADRE. Resultado: texto azul tinta sobre fondo azul
tinta, contraste 1.0, invisible. Se acota al párrafo suelto del
cuerpo, que es el único al que iba dirigida. */
.cuerpo-art > .w > p:first-of-type{font-size:clamp(1.15rem,1.7vw,1.35rem);
line-height:1.48;color:var(--color-tinta)}
.siguiente{max-width:62ch;margin:clamp(40px,7vh,80px) auto 0;padding-top:22px;
border-top:1px solid var(--color-linea);display:grid;gap:7px}
.siguiente .rot{font-family:var(--font-mono);font-size:.66rem;letter-spacing:var(--track-mono,.09em);
text-transform:uppercase;color:var(--color-tenue)}
.siguiente a{display:inline-block;padding-block:3px; /* 22 px de alto no llega al mínimo de toque */
font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.7rem);
line-height:1.12;letter-spacing:-.022em;text-decoration:none}
.siguiente a:hover{color:var(--pal-d-luz-2)}
.cierre-art{max-width:62ch;margin:clamp(40px,7vh,80px) auto 0;padding:clamp(24px,4vw,38px);
border-radius:16px;background:var(--pal-d-fondo);color:var(--color-papel);display:grid;gap:12px;
justify-items:start}
.cierre-art h2{font-family:var(--font-display);font-weight:400;
font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.08;letter-spacing:-.025em}
/* dentro de la tarjeta manda el color de la tarjeta, pase lo que pase
arriba en la cascada */
.cierre-art p{max-width:46ch;opacity:.86;font-size:1rem;line-height:1.5;margin:0;
color:var(--color-papel)}
/* el botón va en su variante clara: sobre la tarjeta azul, el .cta normal
es azul sobre azul y desaparece */
.cierre-art .cta{margin-top:6px}
/* ── MIGAS ─────────────────────────────────────────────────────────
Una entrada se puede abrir desde un buscador o desde un mensaje, sin
pasar por el índice. Sin esto, la única salida es el logo, que lleva a
la página principal y no al cuaderno: te deja más lejos de donde
querías volver. */
/* LA BARRA PARTIDA.
`.migas` es un