/* nicosteil.cl · impreso a dos tintas: papel y tinta, con el lila como segunda tinta.
   Una familia (Literata, con tamaño óptico). Extravagante en un solo lugar: el violeta pleno. */

:root{
  color-scheme: light;
  --papel:#F8F6F2;
  --papel-2:#F1ECF9;
  --papel-3:#E8E3DA;
  --tinta:#1A140A;
  --tinta-2:#4A4036;
  --tinta-3:#6F6557;
  --linea:rgba(26,20,10,.16);
  --lila:#B79CF0;
  --lila-texto:#5E3FA6;
  --violeta:#5433D6;
  --violeta-texto:#F3EEFF;
  --violeta-2:#DCD2F8;
  --violeta-linea:rgba(243,238,255,.22);
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --ancho:1120px;
  --margen:250px;
  --hueco:56px;
  --lado:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--serif);font-size:17px;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--lila);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--violeta);text-decoration-color:var(--violeta)}
:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.15;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
dl,dd{margin:0}
strong{font-weight:500}

/* Rejilla */
.marco{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}
.banda{padding:88px 0}
.banda-2{background:var(--papel-2)}
.banda-violeta{background:var(--violeta);color:var(--violeta-texto)}
.dos{display:grid;grid-template-columns:var(--margen) minmax(0,1fr);gap:var(--hueco);align-items:start}
.margen{position:sticky;top:84px}

/* Texto */
.meta{font-size:.88rem;font-style:italic;color:var(--tinta-3);line-height:1.5}
.titulo-seccion{font-size:1.05rem;font-weight:500;color:var(--tinta)}
.tesis{font-size:1.06rem;color:var(--tinta-2);margin-top:12px;line-height:1.5;text-wrap:pretty}
.cuenta{margin-top:10px;font-size:.88rem;font-style:italic;color:var(--tinta-3)}
.sin-sub{text-decoration:none}

/* Navegación */
.nav{position:sticky;top:0;z-index:50;background:rgba(248,246,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.nav .marco{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:16px;flex-wrap:wrap}
.nav-nombre{font-weight:500;text-decoration:none;font-size:1.05rem}
.nav-lista{display:flex;gap:28px;font-size:.95rem}
.nav-lista a{text-decoration:none}
.nav-lista a:hover{text-decoration:underline}
.nav-boton{display:none;background:none;border:1px solid var(--linea);border-radius:3px;font:inherit;font-size:.9rem;padding:6px 12px;color:var(--tinta);cursor:pointer}

/* Portada */
.portada{padding:72px 0}
.portada .marco{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--hueco);align-items:center}
.portada h1{font-size:clamp(2.7rem,6.2vw,5.4rem);font-weight:300;letter-spacing:-.015em;line-height:1.02}
.portada .credito{margin-top:16px;font-size:.92rem;font-style:italic;color:var(--lila-texto);max-width:30em}
.portada .intro{margin-top:24px;font-size:1.2rem;line-height:1.55;color:var(--tinta-2);max-width:30em;text-wrap:pretty}
/* La caja «Ahora» cuelga del borde inferior del retrato. Con Sintonía adentro
   mide ~375px: si se montara entera tapaba dos tercios de la foto. El padding
   la deja descansar sobre el papel y solo su tercio de arriba pisa la foto. */
.retrato{position:relative;padding-bottom:236px}
.duotono{background:var(--violeta);overflow:hidden;border-radius:2px}
.duotono img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.08);mix-blend-mode:luminosity}
/* El retrato hecho de historias (historias.js): la silueta es una ventana
   (máscara con el recorte) y cada imagen la tapa entera. */
.historias{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--violeta);border-radius:2px;cursor:pointer;isolation:isolate}
.historias > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.historias .ventana{position:absolute;inset:0;z-index:1;visibility:hidden;
  -webkit-mask:url(/estaticos/img/duoc-recorte.webp) 50% 20%/cover no-repeat;mask:url(/estaticos/img/duoc-recorte.webp) 50% 20%/cover no-repeat}
.historias.abierta .ventana{visibility:visible}
.historias.volviendo .ventana{visibility:visible;opacity:0;transition:opacity .8s ease}
.historias .h{position:absolute;inset:0;visibility:hidden}
.historias .h.ve{visibility:visible}
.historias .h img{width:100%;height:100%;object-fit:cover}
.ahora{position:absolute;left:-64px;bottom:0;width:min(400px,calc(100% + 40px));background:var(--papel);border:1px solid var(--linea);border-top:3px solid var(--violeta);padding:18px 22px 20px}
.ahora-cab{display:flex;align-items:baseline;gap:10px;font-size:.92rem}
.ahora-cab strong{font-weight:500}
.ahora-cab .fecha{color:var(--tinta-3);font-style:italic}
.punto{width:9px;height:9px;border-radius:50%;background:var(--violeta);position:relative;top:-1px;flex:none;display:inline-block}
.punto::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--violeta);opacity:0;animation:latir 2.4s ease-out 3}
@keyframes latir{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.7);opacity:0}}
/* En la caja «Ahora» el punto está encendido de verdad: respira despacio, y
   cada tanto suelta un anillo. Los dos periodos (3.4s y 7.3s) no son múltiplos,
   así que el ritmo nunca se ve igual dos veces — como un indicador de señal y
   no como un cursor. Al sintonizar, .senal dispara un anillo inmediato: lleva
   su propio nombre de keyframes para reiniciarse de verdad, y repite «anillo»
   en la misma posición de la lista para que el pulso ambiental no se corte. */
.ahora .punto{animation:respirar 3.4s ease-in-out infinite}
.ahora .punto::after{animation:latir 2.4s ease-out 3, anillo 7.3s ease-out 7.3s infinite}
.ahora .punto.senal::after{animation:senal .9s ease-out 1, anillo 7.3s ease-out 7.3s infinite}
@keyframes senal{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes respirar{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.62;transform:scale(.9)}}
@keyframes anillo{0%{transform:scale(.5);opacity:.6}22%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
.ahora p{margin-top:10px;font-size:.98rem;line-height:1.5;color:var(--tinta-2)}

/* Lo último */
.destacada .cubierta{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--papel-3)}
.destacada .cubierta img{width:100%;height:100%;object-fit:cover}
.pie-foto{margin-top:8px;font-size:.84rem;font-style:italic;color:var(--tinta-3)}
.destacada h2{margin-top:28px;font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:400;letter-spacing:-.01em}
.destacada .bajada{margin-top:14px;font-size:1.15rem;color:var(--tinta-2);max-width:34em;line-height:1.5;text-wrap:pretty}
.acciones{margin-top:24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.boton{display:inline-block;background:var(--tinta);color:var(--papel);text-decoration:none;padding:10px 18px;border-radius:2px;font-weight:500;font-size:.98rem}
.boton:hover{background:var(--violeta);color:var(--violeta-texto)}

/* Cadena: de dónde salió, qué siguió */
.cadena{margin-top:48px;padding-top:28px;border-top:1px solid var(--linea)}
.cadena-titulo{font-size:.95rem;font-style:italic;color:var(--tinta-3)}
.cadena ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:20px}
.cadena ol.dos-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
.cadena li{position:relative;padding-top:24px}
.cadena li::before{content:'';position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--violeta)}
.cadena li::after{content:'';position:absolute;left:16px;right:-28px;top:11px;height:1px;background:var(--lila);transform-origin:left center}
.cadena li:last-child::after{display:none}
.cadena .paso{font-size:.88rem;font-style:italic;color:var(--lila-texto)}
.cadena h3{font-size:1.1rem;margin-top:4px;font-weight:500}
.cadena p{margin-top:6px;font-size:.95rem;color:var(--tinta-2);line-height:1.5}
.cadena.anim li::after{transform:scaleX(0);transition:transform .9s ease}
.cadena.anim li::before{opacity:0;transition:opacity .4s ease}
.cadena.anim li:nth-child(1)::before{opacity:1}
.cadena.anim.viva li::after{transform:scaleX(1)}
.cadena.anim.viva li:nth-child(2)::after{transition-delay:.9s}
.cadena.anim.viva li::before{opacity:1}
.cadena.anim.viva li:nth-child(2)::before{transition-delay:.9s}
.cadena.anim.viva li:nth-child(3)::before{transition-delay:1.8s}

/* Hilos */
.hilos-cab{margin-bottom:48px;max-width:40em}
.hilos-cab h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:400}
.hilos-cab p{margin-top:12px;font-size:1.1rem;color:var(--tinta-2);text-wrap:pretty}
.hilo{padding:48px 0}
.hilo + .hilo{border-top:1px solid var(--linea)}
.hilo h2{font-size:1.5rem;font-weight:500}
.ver-hilo{margin-top:22px;font-size:.95rem}
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:34px 26px}
.ficha{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit}
.ficha .cubierta{aspect-ratio:3/2;overflow:hidden;background:var(--papel-3);border-top:3px solid var(--lila);position:relative}
.ficha .cubierta img{width:100%;height:100%;object-fit:cover}
.ficha:hover h3{color:var(--violeta)}
.ficha .tipo{font-size:.86rem;font-style:italic;color:var(--lila-texto);margin-top:4px}
.ficha h3{font-size:1.08rem;font-weight:500;line-height:1.3;transition:color .2s}
.ficha .linea{font-size:.93rem;color:var(--tinta-2);line-height:1.45;text-wrap:pretty}

/* Cubiertas tipográficas: la frase de la pieza, en su propia voz. Tres tonos: papel, lila, violeta */
.cubierta-tipo{height:100%;display:flex;align-items:flex-end;padding:16px 18px;font-style:italic;font-weight:300;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25;color:var(--tinta);text-wrap:balance}
.cubierta-tipo.lila{background:var(--lila)}
.cubierta-tipo.violeta{background:var(--violeta);color:var(--violeta-texto)}

/* Charla: miniatura de la primera lámina, en la voz del deck (conserva los colores del deck) */
.mini-lamina{height:100%;background:#fff;color:#1a1a1a;font-family:var(--sans);display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px 18px;position:relative}
.mini-lamina .marca{position:absolute;top:10px;right:12px;font-size:.6rem;font-weight:700;color:#4a4a4a;display:flex;align-items:center;gap:5px}
.mini-lamina .marca::before{content:'';width:7px;height:7px;border-radius:50%;background:#00B0B9}
.mini-lamina .lamina-titulo{font-weight:800;font-size:1.2rem;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.mini-lamina .lamina-pie{font-size:.62rem;margin-top:8px;color:#666;font-weight:600}
.mini-lamina.duoc::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:#9ED9DD}
.mini-lamina.liceo{background:#F4F1E8}
.mini-lamina.liceo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#B5320A 0 14%,#9E7820 14% 57%,#2E7D4F 57% 100%)}

/* Hablado */
.cubierta-hablado{height:100%;background:var(--papel-3);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--tinta-2)}
.cubierta-hablado .play{width:46px;height:46px;border:1.5px solid var(--tinta-2);border-radius:50%;position:relative}
.cubierta-hablado .play::after{content:'';position:absolute;left:17px;top:14px;border-left:13px solid var(--tinta-2);border-top:8px solid transparent;border-bottom:8px solid transparent}
.cubierta-hablado span{font-size:.86rem;font-style:italic}

/* Escala de notas 1,0 a 7,0: el detalle que solo un hilo tiene */
.regla{margin-top:26px;font-size:.8rem;color:var(--tinta-3)}
.regla-barra{position:relative;height:30px;border-bottom:1px solid var(--tinta-3);margin-top:22px}
.regla-barra i{position:absolute;bottom:0;width:1px;height:8px;background:var(--tinta-3);font-style:normal}
.regla-barra i span{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:.72rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.regla-barra .marca6{position:absolute;bottom:-1px;left:83.33%;width:2px;height:30px;background:var(--violeta)}
.regla p{margin-top:8px;line-height:1.4;font-variant-numeric:tabular-nums}

/* Sueltos y listas simples */
.sueltos{margin-top:40px;padding-top:28px;border-top:1px dashed var(--linea)}
.sueltos ul{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:.98rem}
.sueltos li span{color:var(--tinta-3);font-style:italic;font-size:.88rem}

/* Quién soy: el lugar extravagante */
.banda-violeta a{text-decoration-color:var(--violeta-2)}
.banda-violeta a:hover{color:#fff;text-decoration-color:#fff}
.banda-violeta .titulo-seccion{color:var(--violeta-2)}
.quien .foto{margin-top:20px;aspect-ratio:1;overflow:hidden;max-width:230px;background:var(--violeta)}
.quien .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:luminosity}
.quien .foto-pie{margin-top:8px;font-size:.84rem;font-style:italic;color:var(--violeta-2)}
.quien .declaracion p{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:300;line-height:1.55;max-width:30em;text-wrap:pretty}
.quien .declaracion strong{font-weight:500;color:#fff}
.quien .semana{margin-top:32px;padding-top:20px;border-top:1px solid var(--violeta-linea);color:var(--violeta-2);font-size:1rem;line-height:1.7;max-width:36em}
.quien .semana p + p{margin-top:8px}
.quien .semana a{color:var(--violeta-texto)}

/* Escríbeme */
.contacto .frase{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:300;max-width:22em;line-height:1.4}
.contacto ul{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:28px;font-size:.98rem}
.contacto .correo{margin-top:24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--sans);font-size:1.05rem}
.contacto .copiar{font-family:var(--sans);font-size:.84rem;color:var(--tinta-3);background:none;border:1px solid var(--linea);border-radius:999px;padding:5px 13px;cursor:pointer;line-height:1}
.contacto .copiar:hover{color:var(--tinta);border-color:var(--tinta-3)}
.contacto .copiar[hidden]{display:none}

/* Aviso de analítica: abajo, angosto, sin tapar el texto ni bloquear nada.
   No se muestra a quien ya respondió, así que no es un peaje de entrada. */
.consentimiento{position:fixed;left:var(--lado);right:var(--lado);bottom:var(--lado);z-index:20;
  max-width:560px;margin-inline:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--papel);border:1px solid var(--linea);border-radius:4px;padding:14px 16px;
  box-shadow:0 6px 24px rgba(26,20,10,.13);font-family:var(--sans);font-size:.92rem;line-height:1.45}
.consentimiento[hidden]{display:none}
.consentimiento p{margin:0;flex:1 1 280px}
.consentimiento .botones{display:flex;gap:8px}
.consentimiento button{font-family:var(--sans);font-size:.88rem;line-height:1;cursor:pointer;
  border:1px solid var(--linea);border-radius:999px;padding:8px 16px;background:none;color:var(--tinta)}
.consentimiento button[data-consentimiento="si"]{background:var(--violeta);border-color:var(--violeta);color:var(--violeta-texto)}
.consentimiento button:hover{border-color:var(--tinta-3)}
.consentimiento button[data-consentimiento="si"]:hover{background:var(--tinta);border-color:var(--tinta)}

/* ---------- Sintonía ----------------------------------------------------
   Vive dentro de la caja «Ahora»: no tiene borde ni fondo propios, solo una
   línea que la separa del texto. El dial es lo único que no existe en el resto
   del sitio.

   TODO va colgado de .aparato a propósito. Los nombres de aquí adentro —marca,
   entrada, quien, estado— son palabras corrientes que el sitio ya usa en otras
   secciones: sin acotarlas, .quien le pegaba a la sección «Quién soy» entera. */
.aparato{margin-top:16px;padding-top:12px;border-top:1px solid var(--linea)}
.aparato .aparato-cab{display:flex;align-items:center;gap:8px}
.aparato .rotulo{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.aparato .glosa{color:var(--tinta-3);font-style:italic;font-size:.86rem;margin:6px 0 0;max-width:40ch;line-height:1.45}
.aparato .glosa[hidden]{display:none}
.aparato .ayuda{
  background:none;border:1px solid var(--linea);color:var(--tinta-3);cursor:pointer;
  font-family:var(--sans);font-size:.64rem;line-height:1;width:17px;height:17px;
  border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
}
.aparato .ayuda[hidden]{display:none}
.aparato .ayuda:hover{color:var(--tinta);border-color:var(--tinta-3)}
.aparato .ayuda:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}

/* el dial: una escala, no cuatro pestañas. La línea corre a la altura de los
   números y ellos la interrumpen, como en una escala impresa; el marcador es
   una muesca chica que se desplaza por debajo. */
.aparato .dial{position:relative;display:flex;margin-top:12px;padding-top:4px}
.aparato .riel{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--linea)}
.aparato .marcador{
  position:absolute;top:17px;left:0;width:1.5px;height:6px;background:var(--violeta);
  transition:transform .34s cubic-bezier(.22,.7,.25,1);
}
.aparato .estacion{
  flex:1 1 0;min-width:0;cursor:pointer;background:none;border:0;border-radius:0;
  padding:0 0 2px;font-family:var(--sans);color:var(--tinta-3);
  display:flex;flex-direction:column;align-items:center;gap:10px;line-height:1;
  transition:color .2s ease;min-height:40px;
}
.aparato .estacion .numero{
  position:relative;z-index:1;background:var(--papel);padding:0 5px;
  font-size:.64rem;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--tinta-3);transition:color .2s ease;
}
.aparato .estacion .nombre{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
.aparato .estacion:hover,.aparato .estacion:hover .numero{color:var(--tinta-2)}
.aparato .estacion:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}
.aparato .estacion[aria-selected="true"]{color:var(--tinta)}
.aparato .estacion[aria-selected="true"] .numero{color:var(--violeta)}

/* el display */
.aparato .display{margin-top:10px}
.aparato .display[hidden]{display:none}
.aparato .entrada[hidden]{display:none}
.aparato .entrada{animation:sintonizar .2s cubic-bezier(.23,1,.32,1) both}
@keyframes sintonizar{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.aparato .marca{
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:0;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);
}
.aparato .marca .frecuencia{color:var(--violeta)}
.aparato .marca .estado{font-style:normal;border:1px solid var(--linea);padding:2px 5px;letter-spacing:.08em}
.aparato .que{font-size:1.18rem;font-weight:400;line-height:1.28;margin:6px 0 0;text-wrap:balance}
.aparato .que a{color:inherit;text-decoration-color:var(--lila)}
.aparato .que .flecha{font-size:.7em;margin-left:.3em;color:var(--violeta);text-decoration:none;display:inline-block}
.aparato .quien{margin:3px 0 0;font-style:italic;color:var(--tinta-2);font-size:.92rem}
.aparato .dice{margin:8px 0 0;font-size:.94rem;line-height:1.45;color:var(--tinta-2);max-width:40ch}
.aparato .dice::before{content:"\201C"}
.aparato .dice::after{content:"\201D"}

/* historial: chico a propósito */
.aparato .historial{display:flex;align-items:center;gap:10px;margin-top:10px}
.aparato .paso{
  background:none;border:1px solid var(--linea);color:var(--tinta-3);cursor:pointer;
  font-size:.62rem;line-height:1;padding:7px 9px;border-radius:2px;
}
.aparato .paso:hover{color:var(--tinta);border-color:var(--tinta-3)}
.aparato .paso:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}
.aparato .cuentas{display:flex;gap:6px}
.aparato .pepa{width:5px;height:5px;border-radius:50%;background:var(--linea);display:block}
.aparato .pepa.activa{background:var(--violeta)}

@media (max-width:760px){
  /* En móvil la caja es estática y ancha; la escala no se parte en dos filas
     —eso rompía la metáfora—. Se nombra solo la frecuencia sintonizada: la
     máquina se explica al tocarla. */
  .aparato .estacion{min-height:46px;justify-content:flex-start}
  .aparato .estacion .nombre{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .aparato .estacion[aria-selected="true"] .nombre{
    position:static;width:auto;height:auto;clip-path:none;
  }
}
/* En seco: sin recorrido del marcador ni entrada del contenido. Lo pone sitio.js
   al cargar, con las flechas del teclado y al recorrer el historial: lo que se
   repite muchas veces o nace del teclado no se anima. */
.aparato.sin-animacion .marcador{transition:none}
.aparato.sin-animacion .entrada{animation:none}
@media (prefers-reduced-motion:reduce){
  .aparato .marcador{transition:none}
  .aparato .entrada{animation:none}
  .ahora .punto,.ahora .punto::after{animation:none}
}

/* Pie */
.pie{border-top:1px solid var(--linea);padding:28px 0 48px;font-size:.88rem;color:var(--tinta-3)}
.pie .marco{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Página de hilo */
.cab-hilo{padding:64px 0 32px}
.cab-hilo .sobre{font-size:.95rem;font-style:italic;color:var(--tinta-3)}
.cab-hilo h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:300;letter-spacing:-.01em}
.cab-hilo .tesis{font-size:1.25rem;max-width:30em;margin-top:20px}
.hilo-foto{padding:8px 0 24px}
.hilo-foto .cubierta{aspect-ratio:3/1;overflow:hidden;background:var(--papel-3)}
.hilo-foto .cubierta img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.tiempo{padding:16px 0 72px}
.tiempo li{display:grid;grid-template-columns:var(--margen) minmax(0,1fr);gap:var(--hueco);padding:36px 0;border-top:1px solid var(--linea)}
.tiempo .cuando{font-size:.95rem;color:var(--tinta-3);font-style:italic;line-height:1.45}
.tiempo .cuando b{display:block;font-style:normal;font-weight:500;color:var(--tinta);font-size:1.05rem;margin-bottom:4px}
.pieza-ancha{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px;align-items:start}
.pieza-ancha .cubierta{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--papel-3);border-top:3px solid var(--lila)}
.pieza-ancha .cubierta img{width:100%;height:100%;object-fit:cover}
.pieza-ancha h2{font-size:1.4rem;font-weight:500;margin-top:4px}
.pieza-ancha .tipo{font-size:.86rem;font-style:italic;color:var(--lila-texto)}
.pieza-ancha .linea{margin-top:8px;color:var(--tinta-2);text-wrap:pretty}
.origen{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;font-size:.93rem;line-height:1.45}
.origen dt{font-style:italic;color:var(--lila-texto)}
.origen dd{margin-top:3px;color:var(--tinta-2)}
.proxima{border:1px dashed var(--lila-texto);padding:22px 24px;color:var(--tinta-2);font-style:italic;line-height:1.5;text-wrap:pretty}

/* Página de pieza */
.articulo{max-width:680px;margin:0 auto;padding:56px var(--lado) 80px}
.articulo .sobre{font-size:.95rem;font-style:italic;color:var(--tinta-3)}
.articulo h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:400;margin-top:10px;letter-spacing:-.01em}
.articulo .firma{margin-top:14px;font-size:.95rem;color:var(--tinta-3)}
.idiomas{margin-top:10px;font-size:.92rem;display:flex;gap:18px;flex-wrap:wrap}
.caja{margin-top:28px;background:var(--papel-2);border-top:3px solid var(--lila);padding:18px 20px;font-size:.98rem;line-height:1.5}
.caja .etiqueta{font-style:italic;color:var(--lila-texto)}
.caja p{margin-top:6px;color:var(--tinta-2);text-wrap:pretty}
.articulo .cubierta{margin-top:32px;aspect-ratio:3/2;overflow:hidden;background:var(--papel-3)}
.articulo .cubierta img{width:100%;height:100%;object-fit:cover}
.cuerpo{margin-top:40px;font-size:1.13rem;line-height:1.7}
.cuerpo h2{font-size:1rem;font-weight:500;color:var(--tinta-3);margin:44px 0 16px;letter-spacing:.08em}
.cuerpo h3{font-size:1.05rem;font-weight:500;margin:36px 0 12px}
.cuerpo p{margin:0 0 1.1em}
.cuerpo ul,.cuerpo ol{padding-left:1.4em;margin:0 0 1.1em;list-style:disc}
.cuerpo ol{list-style:decimal}
.cuerpo li{margin-bottom:.4em}
.cuerpo hr{border:0;border-top:1px solid var(--linea);margin:32px auto;width:40%}
.cuerpo blockquote{margin:0 0 1.1em;padding-left:18px;border-left:3px solid var(--lila);color:var(--tinta-2)}
.cuerpo img{margin:0 0 1.1em}
.cuerpo .ayuda{font-size:.95rem;color:var(--tinta-3);border-top:1px solid var(--linea);padding-top:16px;margin-top:32px}
/* Páginas de poemas («versos: true»): cada salto de línea es un verso. */
.versos .cuerpo h2{font-size:1.45rem;font-weight:400;color:var(--tinta);letter-spacing:0;margin:88px 0 22px;scroll-margin-top:96px}
/* El número del poema, encima del título, con la letra de los rótulos del sitio. */
.versos .cuerpo h2 .n{display:block;font-size:.85rem;font-weight:500;color:var(--lila-texto);letter-spacing:.08em;margin-bottom:8px;font-variant-numeric:tabular-nums}
.versos .cuerpo h2.elegido .n::after{content:" · elegido para hoy";color:var(--violeta);font-weight:400;font-style:italic;letter-spacing:0}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Sin título: el índice lo nombra por su primer verso; aquí no se repite, queda un asterisco. */
.versos .cuerpo h2.sin-titulo{margin-bottom:22px}
.versos .cuerpo h2 + p, .versos .cuerpo blockquote + p{margin-top:0}
.versos .cuerpo p{margin:0 0 1.35em;line-height:1.75}
/* Sangría francesa: cada verso es un bloque; si no cabe, sigue sangrado en la línea siguiente,
   como en los libros, y no se lee como un verso nuevo. */
.versos .cuerpo .v{display:block;padding-left:1.5em;text-indent:-1.5em}
.versos .cuerpo .recuadro .v{padding-left:0;text-indent:0}
.versos .cuerpo .entrada{font-size:1.05rem;color:var(--tinta-2);line-height:1.65}
/* El índice, como el de un libro: numerado, en columnas, sin subrayar hasta pasar por encima. */
.versos .cuerpo .indice-cab{margin:44px 0 0;scroll-margin-top:84px}
.versos .cuerpo .indice{list-style:none;padding:0;margin:12px 0 0;columns:3 11em;column-gap:28px;font-size:.95rem;line-height:1.45;counter-reset:poema}
.versos .cuerpo .indice li{break-inside:avoid;display:flex;gap:10px;padding:3px 0;margin:0}
.versos .cuerpo .indice li::before{counter-increment:poema;content:counter(poema);flex:none;min-width:1.5em;text-align:right;color:var(--lila-texto);font-size:.85rem;font-weight:500;font-variant-numeric:tabular-nums;padding-top:.1em}
.versos .cuerpo .indice li.cuento::before{counter-increment:none;content:"·"}
.versos .cuerpo .indice a{text-decoration:none}
.versos .cuerpo .indice a:hover{text-decoration:underline}
.versos .cuerpo .indice .sin-titulo{font-style:italic}
.versos .cuerpo blockquote{border-left:0;padding:0;font-style:italic;font-size:1rem}
.versos .cuerpo #despues{border-top:1px solid var(--linea);padding-top:56px}
.versos .cuerpo h3{font-size:1.3rem;font-weight:400;margin:28px 0 14px}
.versos .cuerpo .dedicatoria{font-style:italic;color:var(--tinta-3)}
.versos .cuerpo .recuadro{display:inline-block;border:1px solid var(--tinta-3);padding:10px 14px;font-style:italic;font-size:.98rem}
.versos .cuerpo .volver{font-size:.88rem;margin-top:-4px}
.versos .cuerpo .volver a{color:var(--tinta-3)}
/* Fotos del cuadernillo en «Poemas malos». */
.versos .cuerpo .objeto img{max-width:min(100%,420px);margin:8px auto 0;box-shadow:0 14px 30px -18px rgba(26,20,10,.55)}
.versos .cuerpo .objeto + .entrada{margin-top:36px}
/* La apertura de «Poemas malos»: texto a un lado, el cuadernillo de pie al otro. */
.apertura-poemas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:28px;align-items:start}
.apertura-poemas .libro{margin:0}
.versos .cuerpo .apertura-poemas .libro img{width:100%;height:auto;margin:0;display:block;border-radius:2px;box-shadow:0 18px 36px -22px rgba(26,20,10,.6)}
.versos .cuerpo .apertura-poemas .entrada{margin:0 0 1em}
.versos .cuerpo .eslogan{font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--lila-texto);margin:0 0 28px}
/* «Elige dos»: con JS el eslogan termina en un botón que reparte dos poemas; sin JS queda el texto. */
.elige-dos{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--lila);text-decoration-thickness:1px;text-underline-offset:.18em}
.elige-dos:hover{color:var(--violeta);text-decoration-color:var(--violeta)}
.elige-dos[hidden],.elige-dos-texto[hidden],.libro-pie[hidden],.oraculo[hidden]{display:none}
/* El cuadernillo es el oráculo: levita entre sus nebulosas y, al tocarlo, se sacude con un brillo
   violeta y de abajo salen dos cartas, una ladeada sobre la otra, con los poemas del día. */
.apertura-poemas .libro img{animation:levitar 7s ease-in-out infinite;position:relative;z-index:1}
html.js .apertura-poemas .libro img{cursor:pointer}
.apertura-poemas .libro.invocando img{animation:invocar .75s ease-out}
.libro-pie{font-size:.85rem;font-style:italic;color:var(--tinta-3);text-align:center;margin-top:10px}
.oraculo{position:relative;margin:-30px 10px 0;display:grid;gap:4px;padding-top:4px}
.oraculo .carta{--giro:-2.5deg;display:block;text-decoration:none;color:var(--tinta);background:var(--papel-2);border:1px solid var(--linea);border-left:3px solid var(--violeta);padding:10px 14px 11px;box-shadow:0 12px 26px -14px rgba(26,20,10,.55);transform:rotate(var(--giro));transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.oraculo .carta:nth-child(2){--giro:1.8deg;margin-top:-8px}
.oraculo .carta:hover,.oraculo .carta:focus-visible{transform:rotate(0) translateY(-2px);z-index:1}
.oraculo .carta .n{display:block;font-size:.78rem;font-weight:500;color:var(--lila-texto);letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-bottom:2px}
.oraculo .carta strong{display:block;font-weight:500;font-size:1.05rem;line-height:1.3;text-wrap:balance}
.oraculo .carta em{font-weight:400}
.oraculo.saliendo .carta{animation:salir .6s cubic-bezier(.2,.9,.3,1.15) both}
.oraculo.saliendo .carta:nth-child(2){animation-delay:.14s}
.oraculo .otra-vez{justify-self:center;margin-top:10px;font:inherit;font-size:.85rem;font-style:italic;color:var(--tinta-3);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--lila);text-underline-offset:.18em}
.oraculo .otra-vez:hover{color:var(--violeta);text-decoration-color:var(--violeta)}
@keyframes levitar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-1.2deg)}}
@keyframes invocar{0%{transform:translateY(0)}35%{transform:translateY(-20px) rotate(2.5deg) scale(1.04);filter:drop-shadow(0 0 26px rgba(84,51,214,.6))}70%{transform:translateY(4px) rotate(-1deg)}100%{transform:translateY(0);filter:none}}
@keyframes salir{from{opacity:0;transform:translateY(-70px) scale(.5) rotate(var(--giro))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--giro))}}
@media (prefers-reduced-motion:reduce){.apertura-poemas .libro img,.apertura-poemas .libro.invocando img,.oraculo.saliendo .carta{animation:none}}
.cuento-ajeno{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tinta);border:1px solid var(--linea);border-left:3px solid var(--violeta);background:var(--papel-2);padding:10px 14px 10px 10px;max-width:340px}
.cuento-ajeno:hover{border-color:var(--violeta)}
.versos .cuerpo .cuento-ajeno img{width:58px;height:72px;object-fit:cover;margin:0;flex:none}
.cuento-ajeno small{display:block;font-size:.82rem;font-style:italic;color:var(--tinta-3)}
.cuento-ajeno strong{display:block;font-weight:500;font-size:1.12rem;color:var(--violeta)}
@media (max-width:620px){
  .apertura-poemas{grid-template-columns:1fr;gap:20px}
  .apertura-poemas .libro{order:-1;max-width:200px;margin:0 auto}
  .oraculo{margin-left:-36px;margin-right:-36px}
  .versos .cuerpo .indice{columns:2;column-gap:18px;font-size:.9rem}
}
/* «Aire fresco»: el cuento sobreimpreso en la portada del libro, en violeta, respirando. */
.sobreimpresion{position:relative;margin:0 0 1.6em;overflow:hidden;border-radius:2px;background:var(--papel-3)}
.sobreimpresion img{width:100%;height:auto;margin:0;filter:grayscale(.35) contrast(1.05)}
.sobreimpresion .sello{position:absolute;left:12%;right:6%;top:47%;transform:translateY(-50%) rotate(-6deg);transform-origin:center;
  font-size:clamp(1.45rem,5vw,2.5rem);line-height:1.08;font-weight:500;letter-spacing:-.01em;text-wrap:balance;
  color:var(--violeta);mix-blend-mode:multiply;animation:aliento 7s ease-in-out infinite}
@keyframes aliento{0%,100%{opacity:.92;filter:blur(0)}50%{opacity:.5;filter:blur(1.2px)}}
@media (prefers-reduced-motion:reduce){.sobreimpresion .sello{animation:none}}
.cuerpo .fuentes{font-size:.9rem;color:var(--tinta-2);margin-top:40px}
.cuerpo .fuentes h3{font-size:.95rem;color:var(--tinta-3);margin:0 0 10px}
.cuerpo .fuentes ul{list-style:none;padding:0}
.cuerpo .fuentes li{margin-bottom:.5em}
.cuerpo table{border-collapse:collapse;width:100%;margin:0 0 1.1em;font-size:.95rem;display:block;overflow-x:auto}
.cuerpo th,.cuerpo td{text-align:left;border-bottom:1px solid var(--linea);padding:6px 10px 6px 0;vertical-align:top}
.siguiente{margin-top:32px;padding-top:24px;border-top:1px solid var(--linea)}

/* Archivo */
.archivo{padding:40px 0 80px}
.archivo h1{font-size:clamp(2rem,4vw,3rem);font-weight:300;margin-bottom:32px}
.archivo h2{font-size:1rem;font-weight:500;color:var(--tinta-3);margin:36px 0 12px;letter-spacing:.08em}
.archivo li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--linea)}
.archivo li span{font-size:.88rem;font-style:italic;color:var(--tinta-3)}

/* Móvil */
@media (max-width:900px){
  .portada .marco{grid-template-columns:1fr;gap:36px}
  .retrato{max-width:440px;padding-bottom:0}
  .ahora{position:static;width:auto;margin-top:16px}
  .dos{grid-template-columns:1fr;gap:28px}
  .margen{position:static}
  .regla{max-width:320px}
  .tiempo li{grid-template-columns:1fr;gap:14px}
  .hilo-foto .cubierta{aspect-ratio:3/2}
  .archivo li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:760px){
  .banda{padding:64px 0}
  .portada{padding:44px 0 56px}
  .nav-boton{display:inline-block}
  /* Blanco de toque: 32px se pincha mal con el dedo. */
  .consentimiento button{padding:13px 18px}
  .consentimiento{gap:12px}
  .nav-lista{width:100%;flex-direction:column;gap:0;padding:4px 0 14px}
  html.js .nav-lista{display:none}
  /* Tiene que ganarle a la regla de arriba, que suma el elemento html: sin el
     mismo prefijo, display:none es mas especifico y el menu no abre nunca. */
  html.js .nav-lista.abierta{display:flex}
  .nav-lista a{padding:10px 0;border-top:1px solid var(--linea)}
  .cadena ol,.cadena ol.dos-pasos{grid-template-columns:1fr;gap:26px}
  .cadena li{padding-top:0;padding-left:28px}
  .cadena li::before{left:0;top:8px}
  .cadena li::after{left:5px;right:auto;top:22px;bottom:-30px;width:1px;height:auto;transform-origin:center top}
  .cadena.anim li::after{transform:scaleY(0)}
  .cadena.anim.viva li::after{transform:scaleY(1)}
  .pieza-ancha{grid-template-columns:1fr}
  .origen{grid-template-columns:1fr}
  .fichas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* IAB A/B Challenge: el video, un final al azar */
.trailer{margin:32px 0 8px}
.trailer video{display:block;width:100%;height:auto;background:#141a2e;aspect-ratio:16/9}
.trailer.vertical video{aspect-ratio:9/16;max-width:420px;margin:0 auto}
.trailer figcaption{margin-top:14px}
.trailer .final{font-size:1rem;color:var(--tinta-2);line-height:1.5}
.trailer .mando{margin-top:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.trailer .boton{border:0;cursor:pointer;font:inherit;font-weight:500;font-size:.98rem;line-height:1.3}

/* IAB A/B Challenge: el tablero jugable, a pantalla completa */
.completa{background:#f4f1ea;color:#141a2e}
.juego{height:100vh;height:100dvh;display:flex;flex-direction:column;background:#f4f1ea;color:#141a2e;--mono:ui-monospace,Menlo,Consolas,monospace}
.juego-cab,.juego-hud,.juego-lienzo,.juego-nota{width:100%;max-width:860px;margin:0 auto;box-sizing:border-box}
.juego-cab{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px 8px;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:#5b6178}
.juego-cab a{color:#141a2e;text-decoration:none}
.juego-cab a:hover{color:var(--violeta)}
.juego-marca{text-align:center;color:#141a2e;font-weight:700}
.juego-marca small{font-weight:400;color:#5b6178;letter-spacing:.04em}
.juego-cab button{font:inherit;background:none;border:1px solid var(--linea);color:#5b6178;padding:4px 8px;cursor:pointer;letter-spacing:.06em}
.juego-hud{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:6px 16px 10px;font-family:var(--mono);font-size:.84rem;border-bottom:1px solid var(--linea)}
.juego-compuerta{display:flex;flex-direction:column;gap:2px;margin:0}
.juego-compuerta strong{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.juego-compuerta span{color:#5b6178}
.juego-contadores{display:flex;gap:16px;margin:0;color:#5b6178;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;white-space:nowrap}
.juego-contadores b{font-weight:700;color:#141a2e;letter-spacing:0}
.juego-lienzo{flex:1;min-height:0;position:relative;border-left:1px solid var(--linea);border-right:1px solid var(--linea)}
.juego-lienzo canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer}
.juego-nota{margin:0;padding:8px 16px 10px;font-size:.9rem;color:#5b6178;min-height:2.2em;font-style:italic;border-top:1px solid var(--linea)}
.juego-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));max-height:calc(100% - 24px);overflow:auto;background:rgba(244,241,234,.96);border:1px solid var(--linea);border-top:3px solid var(--violeta);padding:22px 24px 24px;box-shadow:0 18px 50px rgba(20,26,46,.14)}
.juego-panel h1,.juego-panel h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:400;margin:0;letter-spacing:-.01em}
.juego-panel p{margin-top:12px;font-size:1rem;line-height:1.5;color:var(--tinta-2)}
.juego-ficha{display:flex;align-items:center;gap:12px}
.juego-ficha .chip{flex:none;width:36px;height:36px;border-radius:50%;background:#E4572E;color:#fff;font:700 .78rem var(--mono);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #f4f1ea,0 0 0 4px #141a2e}
.juego-rival{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.juego-rival label{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:#5b6178}
.juego-rival select{font:inherit;font-size:.98rem;padding:8px 10px;border:2px solid #141a2e;background:#fff;color:#141a2e;border-radius:2px}
.juego-rival .meta{font-style:italic;color:#5b6178;font-size:.84rem}
.juego-rival select{max-width:100%}
.juego-acciones{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.juego-acciones .meta{flex-basis:100%;font-style:normal;margin:0;font-size:.9rem}
.juego .boton{border:0;cursor:pointer;font:inherit;font-weight:500;font-size:.98rem;line-height:1.3;background:#141a2e;color:#f4f1ea}
.juego .boton:hover{background:var(--violeta);color:var(--violeta-texto)}
.juego .boton.secundario{background:transparent;color:#141a2e;border:2px solid #141a2e;padding:8px 16px}
.juego-mas{font-size:.92rem;color:#5b6178}
.juego-fin-rival{font-style:italic}
.juego-panel ul{margin:14px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.8rem;line-height:1.55;color:#5b6178;columns:2;column-gap:20px}
.juego-panel li.propia{color:#141a2e;font-weight:700}
.juego-abajo{padding:72px 0 48px;background:var(--papel-2)}
.juego-abajo .articulo{padding-top:0}
.juego-abajo h2{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:400;margin:0 0 16px}
.juego-abajo p{font-size:1.08rem;line-height:1.6;margin:0 0 1em;color:var(--tinta-2)}
@media (max-width:600px){.juego-panel ul{columns:1}.juego-marca small{display:none}.juego-hud{font-size:.78rem}.juego-contadores{flex-direction:column;gap:2px;align-items:flex-end}}