/* Crear para comprender · hoja de estilos
   Concepto: cartel de risografía montado sobre una retícula brutalista.
   Estructura a la vista (bordes gruesos, etiquetas mono, numeración real de bloques),
   acabado riso (tintas planas fluorescentes, desregistro, grano de papel, trama de puntos).
   Primera mitad (generar) = tinta rosa. Segunda mitad (detectar) = tinta azul. */

:root {
  --papel: #EEEDE8;        /* papel de impresión, neutro */
  --hoja: #F7F6F2;         /* hoja impresa sobre la que van las figuras (igual en ambos temas) */
  --tinta: #17161F;        /* negro riso, ligeramente azulado */
  --tinta-suave: #4A4858;
  --rosa: #FF48B0;         /* Fluorescent Pink */
  --azul: #0078BF;         /* Medium Blue */
  --amarillo: #FFE800;     /* Yellow */
  --rosa-texto: #C4126F;   /* rosa legible para texto pequeño sobre papel */
  --azul-texto: #005A91;
  --mezcla: multiply;
  --grano-opacidad: .32;

  --f-titular: "Anybody", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --f-texto: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --borde: 3px solid var(--tinta);
  --borde-fino: 1.5px solid var(--tinta);
  --sombra: 6px 6px 0 var(--tinta);
  --tinta-bloque: var(--rosa);
  --tinta-bloque-texto: var(--rosa-texto);

  --t-0: .78rem; --t-1: 1rem; --t-2: 1.2rem; --t-3: 1.6rem; --t-4: 2.4rem; --t-5: clamp(1.9rem, 8.4vw, 6.4rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #121117; --tinta: #ECEAE3; --tinta-suave: #A9A7B6;
    --rosa: #FF5CBB; --azul: #39A2F0; --amarillo: #FFE53D;
    --rosa-texto: #FF7CC8; --azul-texto: #6FBBF5;
    --mezcla: screen; --grano-opacidad: .10; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #121117; --tinta: #ECEAE3; --tinta-suave: #A9A7B6;
  --rosa: #FF5CBB; --azul: #39A2F0; --amarillo: #FFE53D;
  --rosa-texto: #FF7CC8; --azul-texto: #6FBBF5;
  --mezcla: screen; --grano-opacidad: .10; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-texto); font-size: 1.08rem; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
/* grano de papel */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  opacity: var(--grano-opacidad); mix-blend-mode: var(--mezcla);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--papel); }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--tinta-bloque); }
a:hover { background: var(--amarillo); color: #17161F; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
img { max-width: 100%; display: block; }
code { font-family: var(--f-mono); font-size: .85em; }
button { font: inherit; color: inherit; }

.mono { font-family: var(--f-mono); }
.etiqueta { font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .08em; }

/* ───────── cabecera fija ───────── */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: .5rem max(16px, env(safe-area-inset-left, 0px));
  background: var(--papel); border-bottom: var(--borde);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
}
.barra .marca { font-family: var(--f-titular); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: .95rem; letter-spacing: .02em; text-decoration: none; }
.barra .marca:hover { background: none; color: inherit; }
.barra-der { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.conmutador { display: inline-flex; border: var(--borde); }
.conmutador button {
  border: 0; background: transparent; padding: .35rem .7rem; cursor: pointer;
  font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .06em;
}
.conmutador button + button { border-left: var(--borde); }
.conmutador button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.cupo { font-family: var(--f-mono); font-size: var(--t-0); border: var(--borde); padding: .35rem .6rem; background: var(--amarillo); color: #17161F; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cupo b { font-weight: 700; }

/* ───────── acceso (contraseña) ───────── */
.acceso { max-width: 72rem; margin: 1rem auto 0; border: var(--borde); padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; background: var(--hoja); color: #17161F; }
.acceso p { margin: 0; flex: 1 1 22rem; min-width: 0; }
.acceso form { display: flex; gap: .5rem; flex-wrap: wrap; }
.acceso input { font: inherit; border: var(--borde-fino); border-color: #17161F; padding: .35rem .5rem; background: #fff; color: #17161F; min-width: 0; width: 14rem; max-width: 100%; }
.acceso .aviso-error { color: #C4126F; font-weight: 700; flex-basis: 100%; }
.acceso.demo { background: repeating-linear-gradient(-45deg, var(--amarillo) 0 14px, var(--hoja) 14px 28px); }
.acceso.demo p { background: var(--hoja); padding: .3rem .5rem; border: var(--borde-fino); border-color: #17161F; }

.boton {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: var(--borde); background: var(--tinta); color: var(--papel);
  padding: .45rem .9rem; font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 3px 3px 0 var(--tinta-bloque); transition: transform .08s, box-shadow .08s;
}
.boton:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta-bloque); }
.boton:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--tinta-bloque); }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.boton.claro { background: var(--papel); color: var(--tinta); }
.acceso .boton { border-color: #17161F; background: #17161F; color: #F7F6F2; }

/* ───────── portada ───────── */
.portada { max-width: 72rem; margin: 0 auto; padding-block: 2.5rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.portada > * { min-width: 0; }
.portada .antetitulo { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.portada .antetitulo span { border: var(--borde-fino); padding: .15rem .45rem; }
.portada h1 {
  margin: 0; font-family: var(--f-titular); font-weight: 900; font-stretch: 140%;
  font-size: var(--t-5); line-height: .88; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance;
}
.riso { color: var(--tinta); text-shadow: .05em .035em 0 var(--rosa), -.03em -.02em 0 var(--azul); }
.portada h1 .linea2 { display: block; color: var(--azul); text-shadow: .05em .035em 0 var(--rosa); }
.portada .subtitulo { font-family: var(--f-titular); font-weight: 700; font-stretch: 110%; font-size: var(--t-3); line-height: 1.15; margin: 0; max-width: 40ch; text-wrap: balance; }
.portada .entradilla { max-width: 62ch; font-size: 1.15rem; margin: 0; border-left: 8px solid var(--rosa); padding-left: 1rem; }
.portada .firma { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.portada .firma img { height: 40px; width: auto; }
.logos { display: flex; gap: .75rem; align-items: center; background: var(--hoja); border: var(--borde-fino); padding: .35rem .6rem; }

/* índice brutal */
.indice { max-width: 72rem; margin: 1.5rem auto 0; border: var(--borde); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.indice > div { padding: 1rem; min-width: 0; }
.indice > div + div { border-left: var(--borde); }
@media (max-width: 760px) { .indice > div + div { border-left: 0; border-top: var(--borde); } }
.indice h2 { margin: 0 0 .5rem; font-family: var(--f-titular); font-weight: 800; font-stretch: 120%; font-size: 1.05rem; text-transform: uppercase; }
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.indice li a { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .5rem; text-decoration: none; padding: .2rem .25rem; }
.indice li a:hover { background: var(--amarillo); color: #17161F; }
.indice .n, .indice .m { font-family: var(--f-mono); font-size: var(--t-0); padding-top: .25rem; font-variant-numeric: tabular-nums; }
.indice .m { color: var(--tinta-suave); }

/* ───────── cuerpo: bloques ───────── */
main { max-width: 72rem; margin: 0 auto; padding-block: 1rem 4rem; }
.mitad {
  margin-top: 4rem; border: var(--borde); background: var(--tinta-bloque); color: #17161F;
  padding: 1.25rem; display: grid; gap: .5rem;
}
.mitad.segunda { background: var(--azul); color: #F7F6F2; }
.mitad .etiqueta { opacity: .85; }
.mitad h2 { margin: 0; font-family: var(--f-titular); font-weight: 900; font-stretch: 135%; text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: .95; text-wrap: balance; }
.mitad p { margin: 0; max-width: 60ch; font-size: 1.1rem; }

.bloque { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0 2rem; margin-top: 3.5rem; }
.segunda-mitad { --tinta-bloque: var(--azul); --tinta-bloque-texto: var(--azul-texto); }
.bloque-lado { position: relative; }
.bloque-lado .pegajoso { position: sticky; top: 5rem; display: grid; gap: .4rem; }
.bloque-n { font-family: var(--f-titular); font-weight: 900; font-stretch: 150%; font-size: 4.5rem; line-height: .8; color: var(--tinta-bloque); text-shadow: 4px 3px 0 var(--tinta); }
.bloque-lado .etiqueta { border-top: var(--borde-fino); padding-top: .3rem; }
.bloque-cuerpo { min-width: 0; max-width: 46rem; }
.bloque h2 { font-family: var(--f-titular); font-weight: 900; font-stretch: 118%; font-size: clamp(1.8rem, 4.2vw, 2.7rem); line-height: 1; margin: 0 0 1rem; text-transform: uppercase; text-wrap: balance; }
.idea {
  border: var(--borde); background: var(--amarillo); color: #17161F; padding: .75rem 1rem; margin: 0 0 1.5rem;
  box-shadow: var(--sombra); font-weight: 700; font-size: 1.12rem;
}
.idea .etiqueta { display: block; font-weight: 400; margin-bottom: .2rem; }
.prosa > * + * { margin-top: 1rem; }
.prosa p, .prosa ul, .prosa ol { margin-block: 0; max-width: 65ch; }
.prosa h3 { font-family: var(--f-titular); font-weight: 800; font-stretch: 110%; font-size: var(--t-2); text-transform: uppercase; margin-top: 2rem; margin-bottom: 0; letter-spacing: .01em; }
.prosa li + li { margin-top: .35rem; }
.prosa ul { padding-left: 1.2rem; list-style: square; }
.prosa li::marker { color: var(--tinta-bloque); }
.prosa strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--tinta-bloque) 45%, transparent) 62%); }
blockquote.cita {
  margin: 1.5rem 0; padding: 0; font-family: var(--f-titular); font-weight: 800; font-stretch: 105%;
  font-size: var(--t-3); line-height: 1.15; text-wrap: balance; max-width: 34ch;
}
blockquote.cita::before { content: "“"; display: block; font-size: 3em; line-height: .6; color: var(--tinta-bloque); }

@media (max-width: 760px) {
  .bloque { grid-template-columns: minmax(0, 1fr); }
  .bloque-lado .pegajoso { position: static; display: flex; gap: 1rem; align-items: end; margin-bottom: .5rem; }
  .bloque-n { font-size: 3rem; }
  .bloque-lado .etiqueta { border-top: 0; padding-top: 0; }
}

/* pendiente: material que falta preparar */
.pendiente {
  border: 2px dashed var(--tinta); padding: .75rem 1rem; font-family: var(--f-mono); font-size: .82rem; line-height: 1.5;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--amarillo) 35%, transparent) 10px 20px);
}
.pendiente::before { content: "PENDIENTE · "; font-weight: 700; }

/* figuras riso */
figure { margin: 1.5rem 0; }
figcaption { font-family: var(--f-mono); font-size: var(--t-0); margin-top: .5rem; color: var(--tinta-suave); line-height: 1.5; }
.lamina { background: var(--hoja); border: var(--borde); padding: .6rem; color: #17161F; }
.riso-img { position: relative; background: var(--amarillo); overflow: hidden; isolation: isolate; }
.riso-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.riso-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background-image: radial-gradient(circle at 50% 50%, #FF48B0 32%, transparent 34%); background-size: 5px 5px; background-position: 1px 2px;
}
.riso-img.azul { background: #9FD3F5; }
.riso-img.azul::after { background-image: radial-gradient(circle at 50% 50%, #0078BF 30%, transparent 32%); }
.color-real img { filter: none; mix-blend-mode: normal; }
.color-real::after { display: none; }

.secuencia { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; align-items: center; }
.secuencia .paso { display: grid; gap: .25rem; }
.secuencia .paso span { font-family: var(--f-mono); font-size: .65rem; text-align: center; }
.secuencia .riso-img { aspect-ratio: 1; border: var(--borde-fino); border-color: #17161F; }
@media (max-width: 560px) { .secuencia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flecha-sec { font-family: var(--f-mono); font-size: var(--t-0); display: flex; justify-content: space-between; margin-top: .4rem; border-top: 2px solid #17161F; padding-top: .3rem; }

.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.par .riso-img { aspect-ratio: 4/3; border: var(--borde-fino); border-color: #17161F; }
.par.cuadrado .riso-img { aspect-ratio: 1; }
.par p { margin: .3rem 0 0; font-family: var(--f-mono); font-size: .72rem; }

/* tablas brutales */
.tabla-env { overflow-x: auto; border: var(--borde); margin: 1.5rem 0; background: var(--papel); }
table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .7rem; border-bottom: var(--borde-fino); }
td + td, th + th { border-left: var(--borde-fino); }
th { font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .06em; background: var(--tinta); color: var(--papel); font-weight: 400; }
tr:last-child td { border-bottom: 0; }

/* reto (tarjeta de práctica) */
.reto { border: var(--borde); margin: 2rem 0 1rem; background: var(--papel); }
.reto-cab { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; justify-content: space-between; padding: .5rem .8rem; border-bottom: var(--borde); background: var(--tinta-bloque); color: #17161F; }
.segunda-mitad .reto-cab { color: #F7F6F2; }
.reto-cab h3 { margin: 0; font-family: var(--f-titular); font-weight: 900; font-stretch: 115%; font-size: 1.2rem; text-transform: uppercase; }
.reto-cuerpo { padding: .8rem; display: grid; gap: .6rem; }
.reto-cuerpo p { margin: 0; max-width: 65ch; }
.reto-cuerpo .descubre { font-size: .95rem; border-top: var(--borde-fino); padding-top: .5rem; }

/* reglas de diseño: mini carteles */
.reglas { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.regla { border: var(--borde); display: grid; grid-template-columns: minmax(0, 1fr); }
.regla-texto { padding: .8rem 1rem; min-width: 0; }
.regla-texto h3 { margin: 0 0 .3rem !important; }
.regla-texto p { margin: 0; }
.regla-ej { border-top: var(--borde); display: grid; grid-template-columns: repeat(2, 11em); gap: 1.2em; justify-content: start; padding: .6em .9em; background: var(--hoja); color: #17161F; font-size: 1.3rem; }
@media (max-width: 640px) { .regla-ej { font-size: .88rem; gap: .6em; padding: .5em; } }
.mini { aspect-ratio: 3/4; border: .1em solid #17161F; position: relative; overflow: hidden; font-family: var(--f-texto); display: flex; flex-direction: column; padding: .45em; gap: .2em; line-height: 1.05; }
.diapo .regla-ej { border: var(--borde); font-size: min(3.3vh, 2.6vw); width: max-content; max-width: 100%; }
.mini-et { position: absolute; bottom: 0; right: 0; font-family: var(--f-mono); font-size: .55em; padding: .1em .3em; background: #17161F; color: #F7F6F2; text-transform: uppercase; }
.mini-et.mal { background: #C4126F; }
.mini .t { font-family: var(--f-titular); font-weight: 900; text-transform: uppercase; }

/* diagramas de física */
.diagramas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.diagrama { border: var(--borde); background: var(--hoja); color: #17161F; padding: .5rem; display: grid; gap: .4rem; align-content: start; }
.diagrama svg { width: 100%; height: auto; display: block; }
.diagrama b { font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; }
.diagrama span { font-size: .85rem; line-height: 1.35; }

/* rutina de verificación */
.rutina { counter-reset: r; list-style: none; padding: 0 !important; display: grid; gap: .5rem; }
.rutina li { counter-increment: r; display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; align-items: center; border: var(--borde); padding: .5rem; background: var(--papel); }
.rutina li + li { margin-top: 0 !important; }
.rutina li::before { content: counter(r); font-family: var(--f-titular); font-weight: 900; font-size: 2rem; text-align: center; background: var(--azul); color: #F7F6F2; line-height: 1.3; }

/* estilos de póster */
.estilos { display: flex; flex-wrap: wrap; gap: .4rem; }
.estilos button { border: var(--borde-fino); background: var(--papel); padding: .3rem .6rem; cursor: pointer; font-size: .85rem; }
.estilos button:hover, .estilos button[aria-pressed="true"] { background: var(--amarillo); color: #17161F; }

.descanso { margin: 4rem 0 0; border-block: var(--borde); padding: 1rem 0; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; font-family: var(--f-titular); font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: clamp(1.6rem, 5vw, 3rem); }
.descanso small { font-family: var(--f-mono); font-size: var(--t-0); font-weight: 400; font-stretch: 100%; }

.fuentes { margin-top: 4rem; border-top: var(--borde); padding-top: 1rem; }
.fuentes h2 { font-family: var(--f-titular); font-weight: 900; font-stretch: 120%; text-transform: uppercase; margin: 0 0 .5rem; }
.fuentes ul { padding-left: 1.2rem; list-style: square; }
.fuentes li { margin: .3rem 0; }
.pie { font-family: var(--f-mono); font-size: var(--t-0); border-top: var(--borde-fino); margin-top: 2rem; padding-top: .75rem; color: var(--tinta-suave); }

/* ───────── caja de generación ───────── */
gen-box { display: block; margin: 1.25rem 0; }
.caja { border: var(--borde); background: var(--papel); box-shadow: var(--sombra); min-width: 0; }
.caja-cab { display: flex; justify-content: space-between; align-items: stretch; border-bottom: var(--borde); flex-wrap: wrap; }
.caja-titulo { padding: .4rem .7rem; font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .06em; display: flex; gap: .5rem; align-items: center; }
.caja-titulo .tipo { background: var(--tinta); color: var(--papel); padding: .05rem .35rem; }
.pestanas { display: flex; }
.pestanas button { border: 0; border-left: var(--borde); background: transparent; padding: .4rem .75rem; cursor: pointer; font-family: var(--f-mono); font-size: var(--t-0); text-transform: uppercase; letter-spacing: .05em; }
.pestanas button[aria-selected="true"] { background: var(--tinta-bloque); color: #17161F; }
.segunda-mitad .pestanas button[aria-selected="true"] { color: #F7F6F2; }
.pestanas .num { font-variant-numeric: tabular-nums; }
.caja-panel { padding: .8rem; display: grid; gap: .7rem; }
.caja textarea { width: 100%; min-height: 5.2rem; resize: vertical; font: inherit; font-size: .98rem; border: var(--borde-fino); padding: .5rem .6rem; background: var(--hoja); color: #17161F; }
.caja-controles { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.caja select { font-family: var(--f-mono); font-size: var(--t-0); border: var(--borde-fino); background: var(--papel); color: var(--tinta); padding: .35rem .4rem; max-width: 100%; }
.caja .gasto { font-family: var(--f-mono); font-size: var(--t-0); color: var(--tinta-suave); margin-left: auto; }
.atajos { display: flex; flex-wrap: wrap; gap: .35rem; }
.atajos button { border: var(--borde-fino); background: transparent; padding: .2rem .5rem; cursor: pointer; font-family: var(--f-mono); font-size: .7rem; }
.atajos button:hover { background: var(--amarillo); color: #17161F; }
.entrada { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border: 1.5px dashed var(--tinta); padding: .45rem; font-size: .88rem; }
.entrada img { width: 56px; height: 56px; object-fit: cover; border: var(--borde-fino); }
.entrada label { cursor: pointer; text-decoration: underline; }
.entrada input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.resultado { border: var(--borde-fino); background: var(--hoja); color: #17161F; min-height: 10rem; display: grid; place-items: center; position: relative; overflow: hidden; }
.resultado img { width: 100%; max-height: 28rem; object-fit: contain; }
.resultado .vacio { font-family: var(--f-mono); font-size: var(--t-0); padding: 1rem; text-align: center; max-width: 30ch; }
.resultado .cargando { font-family: var(--f-mono); font-size: var(--t-0); display: grid; gap: .5rem; justify-items: center; padding: 1rem; }
.barra-carga { width: 12rem; max-width: 80%; height: 12px; border: 1.5px solid #17161F; background: repeating-linear-gradient(90deg, #FF48B0 0 8px, transparent 8px 14px); background-size: 28px 100%; animation: avanza .6s linear infinite; }
@keyframes avanza { to { background-position: 28px 0; } }
.historial { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; }
.historial button { flex: 0 0 auto; width: 60px; height: 60px; padding: 0; border: var(--borde-fino); background: var(--hoja); cursor: pointer; position: relative; }
.historial button img { width: 100%; height: 100%; object-fit: cover; }
.historial button .v { position: absolute; left: 0; bottom: 0; font-family: var(--f-mono); font-size: .55rem; background: #17161F; color: #F7F6F2; padding: 0 .2rem; }
.historial .nada, .clase-vacia { font-family: var(--f-mono); font-size: var(--t-0); color: var(--tinta-suave); }
.clase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.clase-grid button { border: var(--borde-fino); padding: 0; background: var(--hoja); color: #17161F; cursor: pointer; text-align: left; display: grid; }
.clase-grid button img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.clase-grid button span { font-family: var(--f-mono); font-size: .62rem; padding: .2rem .3rem; border-top: 1.5px solid #17161F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clase-grid .nuevo { animation: entra .6s ease-out; }
@keyframes entra { from { transform: translateY(-6px) rotate(-1deg); outline: 4px solid var(--amarillo); } }
.clase-cab { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: var(--t-0); }
.en-directo::before { content: "●"; color: #E0262B; margin-right: .3rem; animation: late 1.4s infinite; }
@keyframes late { 50% { opacity: .2; } }
.bloqueada { font-family: var(--f-mono); font-size: var(--t-0); background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--tinta) 8%, transparent) 8px 16px); padding: .5rem; border: 1.5px dashed var(--tinta); }

.video-sim { width: 100%; aspect-ratio: 1; overflow: hidden; position: relative; }
.video-sim img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 5s ease-in-out infinite alternate; max-height: none !important; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.18) translate(-4%, 3%); } }
.sello { position: absolute; top: .4rem; left: .4rem; font-family: var(--f-mono); font-size: .6rem; text-transform: uppercase; background: #17161F; color: #F7F6F2; padding: .1rem .35rem; z-index: 2; }

/* ventana de detalle */
dialog.detalle { border: var(--borde); padding: 0; max-width: min(46rem, calc(100vw - 32px)); width: 100%; background: var(--papel); color: var(--tinta); box-shadow: 10px 10px 0 var(--rosa); }
dialog.detalle::backdrop { background: color-mix(in srgb, #17161F 70%, transparent); }
.detalle-cab { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--borde); padding: .4rem .4rem .4rem .8rem; }
.detalle-cuerpo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 640px) { .detalle-cuerpo { grid-template-columns: 1fr; } }
.detalle-media { background: var(--hoja); border-right: var(--borde); }
.detalle-media img { width: 100%; }
.detalle-datos { padding: .8rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.detalle-datos dl { margin: 0; display: grid; gap: .4rem; }
.detalle-datos dt { font-family: var(--f-mono); font-size: .65rem; text-transform: uppercase; color: var(--tinta-suave); }
.detalle-datos dd { margin: 0; overflow-wrap: anywhere; }
.detalle-datos dd.mono { font-size: .8rem; }
.detalle-datos input { font: inherit; border: var(--borde-fino); padding: .3rem .4rem; background: var(--hoja); color: #17161F; width: 100%; }
.cerrar { border: var(--borde-fino); background: transparent; cursor: pointer; width: 2rem; height: 2rem; font-family: var(--f-mono); }

/* quiz */
.quiz { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; margin: 1.25rem 0; }
.quiz-carta { border: var(--borde); background: var(--papel); display: grid; }
.quiz-img { aspect-ratio: 1; background: var(--hoja); color: #17161F; display: grid; place-items: center; font-family: var(--f-titular); font-weight: 900; font-size: 3rem; border-bottom: var(--borde); position: relative; overflow: hidden; }
.quiz-img img { width: 100%; height: 100%; object-fit: cover; }
.quiz-img small { position: absolute; bottom: .3rem; left: .3rem; right: .3rem; font-family: var(--f-mono); font-size: .58rem; font-weight: 400; line-height: 1.3; }
.quiz-botones { display: flex; }
.quiz-botones button { flex: 1; border: 0; background: transparent; padding: .4rem .2rem; cursor: pointer; font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; }
.quiz-botones button + button { border-left: var(--borde-fino); }
.quiz-botones button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.quiz-pie { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-family: var(--f-mono); font-size: var(--t-0); }

/* ───────── modo diapositivas ───────── */
.diapos { display: none; }
body.modo-diapos { overflow: hidden; }
body.modo-diapos .solo-blog, body.modo-diapos .prosa, body.modo-diapos .bloque-lado, body.modo-diapos .bloque-cuerpo > h2, body.modo-diapos .bloque-cuerpo > .idea, body.modo-diapos .mitad, body.modo-diapos .descanso, body.modo-diapos .fuentes, body.modo-diapos .portada, body.modo-diapos .indice, body.modo-diapos .acceso { display: none; }
body.modo-diapos .diapos { display: block; }
body.modo-diapos .diapo { display: none; }
body.modo-diapos .diapo.activa { display: grid; }
.diapo {
  position: fixed; inset: 0; z-index: 70; background: var(--papel); overflow: auto;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(3rem, 6vmin, 4rem)) max(clamp(1rem, 5vmin, 4rem), env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 4.5rem) max(clamp(1rem, 5vmin, 4rem), env(safe-area-inset-left, 0px));
  align-content: center; gap: clamp(.75rem, 2.5vmin, 2rem);
  font-size: clamp(1.05rem, 3.3vmin, 2.2rem); line-height: 1.3;
}
.d-marca { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .8rem); right: max(1rem, env(safe-area-inset-right, 0px)); font-family: var(--f-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; display: flex; gap: .5rem; align-items: center; }
.d-marca b { font-family: var(--f-titular); font-weight: 900; font-size: 1.6rem; color: var(--tinta-bloque); text-shadow: 2px 2px 0 var(--tinta); }
.diapo h2, .diapo .d-titulo { margin: 0; font-family: var(--f-titular); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .95; font-size: clamp(1.8rem, 6.4vmin, 4.6rem); text-wrap: balance; max-width: 22ch; }
.diapo .d-frase { font-family: var(--f-titular); font-weight: 900; font-stretch: 115%; font-size: clamp(2rem, 8vmin, 6rem); line-height: .98; margin: 0; text-wrap: balance; max-width: 18ch; }
.diapo .d-frase em { font-style: normal; color: var(--tinta-bloque); text-shadow: .04em .03em 0 var(--tinta); }
.diapo ul, .diapo ol { margin: 0; padding-left: 1.2em; display: grid; gap: .5em; max-width: 48ch; }
.diapo ul { list-style: square; }
.diapo li::marker { color: var(--tinta-bloque); }
.diapo p { margin: 0; max-width: 50ch; }
.diapo .d-sub { font-family: var(--f-mono); font-size: .65em; text-transform: uppercase; letter-spacing: .06em; }
.d-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1rem, 4vmin, 3rem); align-items: center; }
.d-dos > * { min-width: 0; }
@media (max-aspect-ratio: 1/1) { .d-dos { grid-template-columns: minmax(0, 1fr); } .diapo { align-content: start; } }
.diapo gen-box { margin: 0; font-size: 1rem; }
.diapo .resultado img { max-height: 42vh; }
.diapo .lamina, .diapo figure { margin: 0; }
.diapo .tabla-env { margin: 0; font-size: .7em; }
.diapo .reglas, .diapo .regla { margin: 0; }
.diapo .rutina li { font-size: .95em; }
.diapo.portada-d { background: var(--rosa); color: #17161F; align-content: end; }
.diapo.portada-d .d-titulo { font-size: clamp(2.6rem, 11vmin, 8rem); max-width: none; color: #17161F; text-shadow: .05em .035em 0 var(--azul); }
.diapo.portada-d .d-sub { font-size: .8em; }
.d-acceso { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.qr { width: clamp(6rem, 18vmin, 11rem); aspect-ratio: 1; background: #F7F6F2; border: 3px solid #17161F; display: grid; place-items: center; font-family: var(--f-mono); font-size: .7rem; text-align: center; padding: .5rem; color: #17161F; }
.d-clave { font-family: var(--f-mono); font-size: clamp(1rem, 3.5vmin, 2.2rem); background: #17161F; color: #F7F6F2; padding: .3em .6em; }
.diapo.mitad-d { background: var(--tinta-bloque); color: #17161F; }
.segunda-mitad .diapo.mitad-d, .diapo.mitad-d.azul { background: var(--azul); color: #F7F6F2; }
.diapo.mitad-d .d-frase em { color: inherit; text-decoration: underline; text-decoration-thickness: .08em; text-shadow: none; }

.mando {
  position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: none;
  padding: .45rem max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + .45rem) max(16px, env(safe-area-inset-left, 0px));
  border-top: var(--borde); background: var(--papel); align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: var(--t-0);
}
body.modo-diapos .mando { display: flex; }
.mando .progreso { flex: 1; height: 10px; border: var(--borde-fino); position: relative; min-width: 3rem; }
.mando .progreso i { position: absolute; inset: 0 auto 0 0; background: var(--tinta-bloque); }
.mando button { border: var(--borde-fino); background: transparent; cursor: pointer; padding: .3rem .55rem; font-family: var(--f-mono); font-size: var(--t-0); }
.mando .cuenta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mando .donde { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
@media (max-width: 560px) { .mando .donde, #d-pantalla { display: none; } body.modo-diapos .barra { display: none; } }
body.modo-diapos .barra { position: fixed; top: auto; bottom: 3.3rem; right: max(16px, env(safe-area-inset-right, 0px)); left: auto; margin: 0; border: var(--borde); padding: .3rem; z-index: 81; opacity: .25; transition: opacity .2s; }
body.modo-diapos .barra:hover, body.modo-diapos .barra:focus-within { opacity: 1; }
body.modo-diapos .barra .marca { display: none; }

/* galería de slop */
.slop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.slop-item { border: var(--borde); background: var(--hoja); color: #17161F; padding: 0; cursor: zoom-in; display: grid; grid-template-rows: auto 1fr; text-align: left; transition: transform .1s, box-shadow .1s; }
.slop-item:hover { transform: translate(-2px, -2px) rotate(-.6deg); box-shadow: 5px 5px 0 var(--tinta-bloque); }
.slop-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top; border-bottom: var(--borde-fino); border-color: #17161F; }
.slop-item span { font-family: var(--f-mono); font-size: .62rem; padding: .3rem .4rem; line-height: 1.35; }
.pie-galeria { font-family: var(--f-mono); font-size: var(--t-0); color: var(--tinta-suave); }
.diapo .slop-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.diapo .slop-item img { aspect-ratio: 1; }
.diapo .slop-item span { font-size: .55rem; }
@media (max-aspect-ratio: 1/1) { .diapo .slop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.d-poster .d-dos { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.poster-grande { border: var(--borde); background: var(--hoja); display: grid; place-items: center; height: min(74vh, 100%); }
.poster-grande img { max-height: 72vh; width: auto; max-width: 100%; object-fit: contain; }
@media (max-aspect-ratio: 1/1) { .poster-grande { height: auto; } .poster-grande img { max-height: 55vh; } }
dialog.detalle .grande { width: 100%; max-height: 80vh; object-fit: contain; background: var(--hoja); }
.diapo .quiz { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: min(100%, 118vh); margin: 0; }
@media (max-aspect-ratio: 1/1) { .diapo .quiz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.video-marco { aspect-ratio: 16/9; padding: 0; background: #17161F; }
.video-marco iframe, .video-marco video { width: 100%; height: 100%; border: 0; display: block; }
.diapo .video-marco { width: 100%; }
.video-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3, 1rem); }
@media (max-width: 640px) { .video-par { grid-template-columns: minmax(0, 1fr); } }
.diapo .video-par { width: min(100%, 140vh); }
.entrada-fijas { flex-basis: 100%; display: flex; flex-direction: column; gap: .35rem; }
.entrada-fijas [aria-pressed="true"] { outline: 3px solid var(--tinta-bloque, var(--tinta)); outline-offset: 1px; }
.entrada-fijas { min-width: 0; max-width: 100%; }
.entrada-fijas .historial { flex-wrap: wrap; overflow: visible; }
.entrada-fijas .historial button { width: 48px; height: 48px; }
.entrada-fijas .historial img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── acabado de tinta (23-10-2026) ───────── */
:root {
  --papel: #F6F1E6;        /* off-white cálido, papel de risografía */
  --hoja: #FCF9F2;
  --tinta: #221F27;        /* negro riso, algo más cálido */
  --tinta-suave: #57525C;
  --borde: 2px solid var(--tinta);
  --borde-fino: 1.25px solid var(--tinta);
  --sombra: 5px 5px 0 var(--tinta);
  --grano-opacidad: .2;
}
/* números impresos en dos pasadas: rosa debajo y azul encima, con el registro un poco movido */
.bloque-n, .d-marca b {
  position: relative; display: inline-block; isolation: isolate;
  color: var(--rosa); text-shadow: none; filter: url(#tinta);
}
.bloque-n::after, .d-marca b::after {
  content: attr(data-n); position: absolute; left: 0; top: 0;
  color: var(--azul); mix-blend-mode: var(--mezcla); opacity: .8;
  transform: translate(.075em, .05em) rotate(-.8deg);
}
.segunda-mitad .bloque-n, .segunda-mitad .d-marca b { color: var(--azul); }
.segunda-mitad .bloque-n::after, .segunda-mitad .d-marca b::after { color: var(--rosa); transform: translate(-.07em, .05em) rotate(.8deg); }
.portada h1, .diapo.portada-d .d-titulo, .bloque h2 { filter: url(#tinta); }
/* cajas: o sombra o borde, nunca las dos */
.idea { border: 0; }
.caja { box-shadow: none; }
/* cabecera de tabla en tinta de color en vez de bloque negro */
th { background: transparent; color: var(--tinta-bloque-texto); font-weight: 700; border-bottom: 2px solid var(--tinta); }