/* =============================================================================
   LÜMERA · hoja única. Dirección de arte «Cuarzo eléctrico».
   Un acento saturado (#FF2D6E), cuatro temperaturas de fondo, contraste por
   tamaño y no por grosor. Sin librerías.
   ========================================================================== */

:root{
  /* ---- pieles ---- */
  --crema:      #FBF3EF;   /* fondo base. Nunca blanco puro */
  --crema-alt:  #F4E7E1;
  --rosa:       #FFE1E7;   /* cuarzo, para secciones aireadas */
  --lienzo:     #FDF7F4;   /* el fondo contra el que multiplica la escena */
  --noche:      #150C10;   /* ciruela casi negro, el del estuche */
  --noche-alt:  #241419;

  /* ---- tinta ---- */
  --tinta:      #1B1114;   /* nunca negro puro */
  --tinta-suave:rgba(27,17,20,.78);
  --tinta-tenue:rgba(27,17,20,.60);
  --tinta-menu: rgba(27,17,20,.82);   /* el menú: 10:1 sobre crema, no 4,9:1 */
  --linea:      rgba(27,17,20,.14);

  /* ---- el acento. Uno. ---- */
  --acento:     #FF2D6E;   /* rosa eléctrico: rótulos grandes, filetes, fondos */
  --acento-txt: #C2003F;   /* variante AA para texto pequeño sobre claro */
  --oro:        #D9B96A;   /* sólo el monograma y algún filete: es el color físico */

  /* ---- movimiento: dos velocidades, tres curvas ---- */
  --rapido: .18s;
  --lento:  .6s;
  --rebote: cubic-bezier(.34,1.56,.64,1);
  --salida: cubic-bezier(.22,1,.36,1);
  --estandar: cubic-bezier(.4,0,.2,1);

  /* ---- escala: el contraste lo da el tamaño ---- */
  --d0: clamp(3.4rem, 15.5vw, 14rem);
  --d1: clamp(2.5rem, 7.4vw, 6.4rem);
  --d2: clamp(1.9rem, 4.6vw, 3.6rem);
  --d3: clamp(1.3rem, 2.5vw, 2rem);

  --barra: 64px;                      /* alto real de la barra fija */
  --marco: clamp(20px, 5.2vw, 78px);
  --hueco: clamp(78px, 11vh, 150px);
  --radio: 3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media(min-width:900px){body{font-size:18px}}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--acento);color:#fff}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}

h1,h2,h3{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400;margin:0;line-height:.94;letter-spacing:-.012em;text-wrap:balance;
}
h1{font-size:var(--d1)}
h2{font-size:var(--d2)}
h3{font-size:var(--d3);line-height:1.08}

/* ---------- voces ---------- */
.rotulo{
  font-family:"DM Mono","SFMono-Regular",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinta-tenue);line-height:1.6;margin:0;
}
.rotulo .num,.rotulo b{color:var(--acento-txt);font-weight:400}
.cuerpo{color:var(--tinta-suave);max-width:48ch;text-wrap:pretty;margin:0}
.grande{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.45;max-width:22ch}
.cifra{font-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* =============================================================================
   1 · la cortina de paso
   ========================================================================== */
.cortina{
  position:fixed;inset:0;z-index:200;background:var(--noche);
  display:grid;place-items:center;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--salida);
}
.cortina[data-ido]{clip-path:inset(0 0 100% 0);pointer-events:none}
.cortina[data-vuelve]{clip-path:inset(0 0 0 0);transition:clip-path .34s var(--estandar)}
.cortina-nucleo{display:grid;justify-items:center;gap:22px;padding:0 24px;text-align:center}
.cortina-mono{
  width:72px;height:72px;opacity:0;
  animation:mono-entra .9s var(--rebote) .06s forwards;
}
.cortina-nombre{
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2.2rem,8vw,4.2rem);
  line-height:1;letter-spacing:.2em;text-indent:.2em;color:var(--crema);
  display:flex;overflow:hidden;
  /* el relleno da aire arriba para la diéresis de la Ü; el margen negativo lo
     devuelve, así la máscara sigue cortando por abajo y el hueco no crece */
  padding-top:.2em;margin-top:-.2em;
}
.cortina-nombre span{
  display:block;transform:translateY(110%);
  animation:letra-sube .8s var(--salida) forwards;
}
.cortina-filete{
  width:0;height:1px;background:var(--acento);
  animation:filete 1s var(--salida) .5s forwards;
}
.cortina-lema{
  font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(251,243,239,.55);margin:0;opacity:0;
  animation:asoma .7s var(--salida) .68s forwards;
}
@keyframes mono-entra{from{opacity:0;transform:scale(.72) rotate(-16deg)}to{opacity:1;transform:none}}
@keyframes letra-sube{to{transform:none}}
@keyframes filete{to{width:min(240px,52vw)}}
@keyframes asoma{to{opacity:1}}
/* de página a página la marca no se vuelve a presentar: sólo el monograma */
.cortina[data-breve] .cortina-nombre,
.cortina[data-breve] .cortina-lema,
.cortina[data-breve] .cortina-filete{display:none}
.cortina[data-breve] .cortina-mono{animation-duration:.4s}

/* =============================================================================
   2 · la barra
   ========================================================================== */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:20px;
  padding:13px var(--marco);
  background:color-mix(in srgb,var(--crema) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--linea);
  transition:background var(--lento) var(--salida),border-color var(--lento) var(--salida),color var(--lento) var(--salida);
}
.barra.noche{
  background:color-mix(in srgb,var(--noche) 80%,transparent);
  border-bottom-color:rgba(251,243,239,.14);color:var(--crema);
}
.barra.noche .barra-nav a{color:rgba(251,243,239,.88)}
.barra.noche .barra-nav a::before{background:rgba(251,243,239,.20)}
.barra.noche .barra-nav a:hover,.barra.noche .barra-nav a[aria-current]{color:var(--crema)}
.barra.noche .idiomas button{color:rgba(251,243,239,.78)}
.barra.noche .idiomas button[aria-pressed="true"]{color:var(--crema)}
.barra.noche .menu-boton{color:var(--crema);border-color:rgba(251,243,239,.42)}
.barra.noche .menu-boton:hover{background:var(--crema);color:var(--noche);border-color:var(--crema)}
.barra-marca{display:flex;align-items:center;gap:10px;flex-shrink:0}
.barra-marca img{width:26px;height:26px;transition:transform var(--rapido) var(--rebote)}
.barra-marca:hover img{transform:rotate(14deg) scale(1.1)}
.barra-marca strong{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:19px;
  letter-spacing:.16em;text-indent:.16em;
}
.barra-nav{display:flex;gap:clamp(16px,2.2vw,34px);margin-left:auto;align-items:center}
.barra-nav a{
  font-family:"DM Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-menu);position:relative;padding-block:7px;
  transition:color var(--rapido) var(--estandar);
}
/* filete siempre puesto: es lo que hace que se lean como un menú */
.barra-nav a::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linea);
}
.barra-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--acento);
  transition:right var(--lento) var(--salida);
}
.barra-nav a:hover,.barra-nav a[aria-current]{color:var(--tinta)}
.barra-nav a:hover::after,.barra-nav a[aria-current]::after{right:0}
@media(max-width:760px){.barra-nav{display:none}}
.idiomas{display:flex;align-items:center;gap:6px;flex-shrink:0}
.idiomas button{
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.11em;
  color:var(--tinta-menu);transition:color var(--rapido) var(--estandar);
}
.idiomas button[aria-pressed="true"]{color:var(--acento-txt)}
.barra.noche .idiomas button[aria-pressed="true"]{color:var(--acento)}
.idiomas span{color:var(--linea)}
/* ---------------------------------------------------------------------------
   el botón de menú: en móvil la barra no cabe y sin esto no hay forma de saber
   que hay cuatro páginas más. Va con la palabra escrita, no sólo tres rayas.
   ------------------------------------------------------------------------ */
.menu-boton{
  display:none;align-items:center;gap:9px;margin-left:auto;
  padding:9px 15px;border-radius:999px;border:1px solid var(--acento);
  background:transparent;color:var(--tinta);cursor:pointer;
  font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;
  transition:background var(--rapido) var(--estandar),color var(--rapido) var(--estandar),
             transform var(--rapido) var(--rebote);
}
.menu-boton:hover{transform:translateY(-2px)}
.menu-boton i{position:relative;width:14px;height:9px;display:block;flex-shrink:0}
.menu-boton i::before,.menu-boton i::after{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--acento);
  transition:transform var(--rapido) var(--rebote),background var(--rapido) var(--estandar);
}
.menu-boton i::before{top:0}
.menu-boton i::after{bottom:0}
.menu-boton[aria-expanded="true"] i::before{transform:translateY(3.75px) rotate(45deg)}
.menu-boton[aria-expanded="true"] i::after{transform:translateY(-3.75px) rotate(-45deg)}
/* un punto que late: es lo que dice «aquí hay más», sin tener que tocarlo */
.menu-boton::after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--acento);
  animation:late 2.8s var(--estandar) infinite;
}
@keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(max-width:760px){
  .menu-boton{display:inline-flex}
  .idiomas{margin-left:14px}
}
/* con el menú abierto el botón se queda rosa pase lo que pase: el :hover de la
   barra de noche lo dejaba en crema con la X blanca encima, invisible */
body[data-menu] .barra .menu-boton,
body[data-menu] .barra .menu-boton:hover{background:var(--acento);color:#fff;border-color:var(--acento)}
body[data-menu] .barra .menu-boton i::before,
body[data-menu] .barra .menu-boton i::after{background:#fff}
body[data-menu] .barra .menu-boton::after{background:#fff;animation:none}

/* con el menú abierto la barra se pone de noche: si no, queda una franja
   clara flotando sobre la pantalla oscura */
body[data-menu] .barra{
  background:color-mix(in srgb,var(--noche) 94%,transparent);
  border-bottom-color:rgba(251,243,239,.16);color:var(--crema);
}
body[data-menu] .idiomas button{color:rgba(251,243,239,.78)}
body[data-menu] .idiomas button[aria-pressed="true"]{color:var(--acento)}
body[data-menu] .progreso{opacity:0}

/* la pantalla de menú */
.menu-pantalla{
  position:fixed;inset:0;z-index:99;background:var(--noche);
  display:grid;align-content:center;padding:96px var(--marco) 40px;
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .6s var(--salida);
}
body[data-menu] .menu-pantalla{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu-pantalla nav{display:grid}
.menu-pantalla a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:18px;
  padding:20px 0;border-bottom:1px solid rgba(251,243,239,.16);
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.9rem,8.5vw,3rem);
  line-height:1.05;color:var(--crema);
  opacity:0;transform:translateY(22px);
  transition:opacity var(--lento) var(--salida),transform var(--lento) var(--salida),
             color var(--rapido) var(--estandar);
}
body[data-menu] .menu-pantalla a{opacity:1;transform:none}
body[data-menu] .menu-pantalla a:nth-child(1){transition-delay:.10s}
body[data-menu] .menu-pantalla a:nth-child(2){transition-delay:.17s}
body[data-menu] .menu-pantalla a:nth-child(3){transition-delay:.24s}
body[data-menu] .menu-pantalla a:nth-child(4){transition-delay:.31s}
body[data-menu] .menu-pantalla a:nth-child(5){transition-delay:.38s}
.menu-pantalla a:active,.menu-pantalla a[aria-current]{color:var(--acento)}
.menu-n{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.16em;
  color:var(--acento);
}
.menu-flecha{width:22px;height:1px;background:rgba(251,243,239,.5)}
.menu-pie{
  margin:36px 0 0;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(251,243,239,.5);
  opacity:0;transition:opacity var(--lento) var(--salida) .44s;
}
body[data-menu] .menu-pie{opacity:1}

/* la barra de lectura */
.progreso{
  position:fixed;top:0;left:0;height:2px;background:var(--acento);z-index:101;
  width:var(--leido,0%);
}

/* =============================================================================
   3 · la escena: 96 fotogramas atados al scroll
   ========================================================================== */
.escena{position:relative;height:420vh;background:var(--lienzo)}
.escena-pegado{
  position:sticky;top:0;height:100vh;overflow:hidden;background:var(--lienzo);
}
.escena-lienzo{
  position:absolute;inset:0;width:100%;height:100%;
  mix-blend-mode:multiply;            /* el blanco del clip se vuelve el crema de la página */
}
@supports not (mix-blend-mode:multiply){.escena,.escena-pegado{background:#fff}}

/* El rodillo es horizontal y ocupa la banda central (37-64 % del alto). Todo
   el texto vive por encima o por debajo de esa banda: así la escena nunca se
   lleva por delante al titular, en apaisado y en vertical. */
.escena-capa{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:grid;justify-items:center;text-align:center;
  padding:0 var(--marco);opacity:0;
}
.escena-capa *{pointer-events:auto}
/* el titular arranca por debajo de la barra, con aire suficiente para que la
   diéresis de la Ü no toque el rótulo: la caja del titular va a line-height .9
   y el glifo sube por encima de ella. */
.escena-arriba{align-content:start;padding-top:calc(var(--barra) + 3vh)}
.escena-abajo {align-content:end;  padding-bottom:9vh}
.escena-arriba .rotulo{margin-bottom:32px}
.escena-marca{
  font-family:"Instrument Serif",Georgia,serif;
  /* el tope en vh es lo que impide que en una ventana ancha y baja el titular
     crezca hasta comerse el producto */
  font-size:clamp(2.6rem,min(11vw,16vh),9rem);
  line-height:.9;letter-spacing:.07em;text-indent:.07em;margin:0;font-weight:400;
}
.escena-bajada{margin:16px 0 0;font-size:clamp(.98rem,1.7vw,1.3rem);color:var(--tinta-suave);max-width:56ch}
.escena-titular{font-size:clamp(1.8rem,4.6vw,3.6rem);margin:0;max-width:17ch}
.escena-pie{
  /* a la derecha deja sitio al botón de WhatsApp (.wa: margen + 58 px + aire) */
  position:absolute;left:var(--marco);right:max(var(--marco),calc(clamp(16px,2.4vw,32px) + 78px));bottom:24px;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
}
/* las etiquetas del despiece: dos arriba, una abajo, nunca sobre la pieza */
.escena-etq{
  position:absolute;inset:auto;z-index:2;opacity:0;width:min(230px,38vw);
  display:block;text-align:left;padding:0;
}
.escena-etq .rotulo{color:var(--acento-txt)}
.escena-etq p{margin:5px 0 0;font-size:14.5px;line-height:1.45;color:var(--tinta-suave)}
.escena-etq::before{content:"";display:block;width:34px;height:1px;background:var(--acento);margin-bottom:10px}
.etq-a{left:var(--marco);top:13%}
.etq-b{right:var(--marco);top:13%;text-align:right}
.etq-b::before{margin-left:auto}
.etq-c{left:50%;translate:-50% 0;bottom:17%;text-align:center;width:min(280px,66vw)}
.etq-c::before{margin-inline:auto}
/* ventana baja (portátil de 13" en apaisado, 21:9): entre la barra y el
   producto quedan unos 165 px y la pila de arriba tiene que caber ahí */
@media(max-height:780px) and (min-width:821px){
  .escena-arriba{padding-top:calc(var(--barra) + 6px)}
  .escena-arriba .rotulo{margin-bottom:14px}
  .escena-marca{font-size:min(9vw,13vh)}
  .escena-bajada{font-size:1rem;margin-top:10px}
}
@media(max-width:820px){
  .escena{height:340vh}
  .escena-arriba{padding-top:calc(54px + 3vh)}
  .escena-etq{width:min(210px,42vw)}
  .etq-a,.etq-b{top:11%}
  .etq-c{bottom:19%}
  .escena-etq p{font-size:13.5px}
}
/* el indicador de bajar */
.desliza{display:flex;align-items:center;gap:11px}
.desliza i{display:block;width:34px;height:1px;background:var(--tinta);position:relative;overflow:hidden}
.desliza i::after{
  content:"";position:absolute;inset:0;background:var(--acento);
  animation:barre 2.4s var(--estandar) infinite;
}
@keyframes barre{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* =============================================================================
   4 · bloques y pieles
   ========================================================================== */
.bloque{padding:var(--hueco) var(--marco);position:relative}

/* ---------------------------------------------------------------------------
   El paso de una parte a la siguiente.
   Cada sección lleva su color por delante: un arco muy plano de su propio
   fondo asoma por encima del borde y se aplana a medida que la sección llega
   a su sitio. Es lo que hace que bajar se sienta como pasar de una parte a
   otra en vez de como seguir leyendo la misma página larga.
   `--llega` va de 0 (la sección todavía viene) a 1 (ya está puesta) y lo
   escribe el bucle único de lumera.js.
   ------------------------------------------------------------------------ */
.bloque,.pie{--llega:1}
.pie{position:relative}
.bloque::before,.pie::before{
  content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);
  height:calc((1 - var(--llega)) * 7vh);
  background:inherit;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  pointer-events:none;
}
/* y el contenido se asienta un poco después que el color */
.bloque>.eje,.pie>.eje{
  transform:translate3d(0,calc((1 - var(--llega)) * 34px),0);
}
/* en móvil el arco es igual de alto sobre una pantalla mucho más estrecha, así
   que se curva el triple y se lee como una burbuja. Se baja. */
@media(max-width:760px){
  .bloque::before,.pie::before{height:calc((1 - var(--llega)) * 3.6vh)}
  .franja figcaption{padding-bottom:calc(var(--marco) + 3.6vh + 8px)}
  .bloque>.eje,.pie>.eje{transform:translate3d(0,calc((1 - var(--llega)) * 24px),0)}
}
@media(prefers-reduced-motion:reduce){
  .bloque::before,.pie::before{display:none}
  .bloque>.eje,.pie>.eje{transform:none}
}
.eje{max-width:1300px;margin-inline:auto;width:100%}
.dos{display:grid;gap:clamp(34px,5vw,86px);align-items:center}
@media(min-width:900px){.dos{grid-template-columns:1fr 1fr}}
.dos.mayor-izq{grid-template-columns:1fr}
@media(min-width:900px){.dos.mayor-izq{grid-template-columns:1.15fr .85fr}}

.piel-crema{background:var(--crema);color:var(--tinta)}
.piel-rosa {background:var(--rosa);color:var(--tinta)}
.piel-noche{background:var(--noche);color:var(--crema)}
.piel-noche .cuerpo{color:rgba(251,243,239,.74)}
.piel-noche .rotulo{color:rgba(251,243,239,.56)}
.piel-noche .rotulo .num,.piel-noche .rotulo b{color:var(--acento)}
/* el rosa eléctrico como fondo lleva tinta encima, no blanco: el blanco sobre
   este rosa se queda en 3,6:1 y no pasa AA en cuerpo de texto. */
.piel-acento{background:var(--acento);color:var(--noche)}
.piel-acento .cuerpo{color:rgba(21,12,16,.82)}
.piel-acento .rotulo{color:rgba(21,12,16,.66)}
.piel-acento .rotulo .num,.piel-acento .rotulo b{color:var(--noche)}
.piel-acento .boton{background:var(--noche);border-color:var(--noche);color:var(--crema)}
.piel-acento .boton:hover{background:var(--crema);border-color:var(--crema);color:var(--noche)}
.piel-acento .boton.fino{background:transparent;color:var(--noche);border-color:rgba(21,12,16,.45)}
.piel-acento .boton.fino:hover{background:var(--noche);border-color:var(--noche);color:var(--crema)}
.piel-acento .portada-pg .entradilla{color:rgba(21,12,16,.82)}
.piel-acento .migas a{color:var(--noche);text-decoration:underline;text-underline-offset:3px}

.cabecera{display:grid;gap:22px;margin-bottom:clamp(38px,5vw,70px);max-width:900px}
.cabecera.centro{margin-inline:auto;text-align:center;justify-items:center}

/* =============================================================================
   5 · piezas de contenido
   ========================================================================== */
/* --- botón --- */
.boton{
  display:inline-flex;align-items:center;gap:11px;
  padding:14px 26px;border-radius:999px;border:1px solid var(--tinta);
  background:var(--tinta);color:var(--crema);cursor:pointer;
  font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;
  transition:transform var(--rapido) var(--rebote),background var(--rapido) var(--estandar),
             border-color var(--rapido) var(--estandar),color var(--rapido) var(--estandar);
}
.boton:hover{transform:translateY(-3px);background:var(--acento);border-color:var(--acento);color:#fff}
.boton i{width:16px;height:1px;background:currentColor;display:block;transition:width var(--rapido) var(--rebote)}
.boton:hover i{width:26px}
.boton.fino{background:transparent;color:inherit;border-color:currentColor}
.piel-noche .boton{background:var(--crema);color:var(--noche);border-color:var(--crema)}
.piel-noche .boton:hover{background:var(--acento);border-color:var(--acento);color:#fff}

/* --- fichas de beneficio --- */
.fichas{display:grid;gap:2px;list-style:none;margin:0;padding:0;background:var(--linea)}
@media(min-width:680px){.fichas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.fichas.cuatro{grid-template-columns:repeat(4,1fr)}}
.fichas li{
  background:var(--crema);padding:clamp(26px,3vw,40px);display:grid;gap:12px;align-content:start;
  transition:background var(--rapido) var(--estandar);position:relative;overflow:hidden;
}
.fichas li::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--acento);
  transform:scaleX(0);transform-origin:left;transition:transform var(--lento) var(--salida);
}
.fichas li:hover{background:var(--crema-alt)}
.fichas li:hover::after{transform:scaleX(1)}
.fichas .n{
  font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.16em;
  color:var(--acento-txt);
}
.fichas h3{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.fichas p{margin:0;color:var(--tinta-suave);font-size:15.5px;line-height:1.55}
.piel-noche .fichas{background:rgba(251,243,239,.16)}
.piel-noche .fichas li{background:var(--noche)}
.piel-noche .fichas li:hover{background:var(--noche-alt)}
.piel-noche .fichas p{color:rgba(251,243,239,.72)}
.piel-noche .fichas .n{color:var(--acento)}

/* --- cifras grandes --- */
.cifras{display:grid;gap:2px;list-style:none;margin:0;padding:0;background:var(--linea)}
@media(min-width:640px){.cifras{grid-template-columns:repeat(3,1fr)}}
.cifras li{background:var(--crema);padding:clamp(24px,3vw,38px);display:grid;gap:8px}
.cifras .dato{
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:.9;color:var(--acento-txt);font-variant-numeric:tabular-nums;
}
.cifras p{margin:0;font-size:15px;line-height:1.5;color:var(--tinta-suave);max-width:28ch}
.piel-noche .cifras{background:rgba(251,243,239,.16)}
.piel-noche .cifras li{background:var(--noche)}
.piel-noche .cifras .dato{color:var(--acento)}
.piel-noche .cifras p{color:rgba(251,243,239,.72)}

/* --- pasos numerados --- */
.pasos{list-style:none;margin:0;padding:0;display:grid}
.pasos li{
  display:grid;padding:clamp(24px,3.4vw,42px) 0;
  grid-template-columns:auto 1fr;align-items:start;column-gap:clamp(20px,3vw,44px);
  border-top:1px solid var(--linea);
}
.pasos li:last-child{border-bottom:1px solid var(--linea)}
.pasos .paso-n{
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:.8;color:var(--acento);font-variant-numeric:tabular-nums;
}
.pasos h3{margin-bottom:8px}
.pasos p{margin:0;color:var(--tinta-suave);max-width:54ch}
.piel-noche .pasos li{border-color:rgba(251,243,239,.16)}
.piel-noche .pasos p{color:rgba(251,243,239,.72)}

/* --- franja de imagen a sangre --- */
.franja{position:relative;overflow:hidden;background:var(--crema-alt)}
.franja img{width:100%;height:clamp(340px,64vh,680px);object-fit:cover;
  transform:scale(1.1);transition:transform 1.6s var(--salida)}
.franja.on img{transform:scale(1)}
.franja figcaption{
  position:absolute;left:0;right:0;bottom:0;
  /* el suelo deja sitio al arco de la sección siguiente (7vh, 3,6vh en móvil),
     que asoma por encima del borde de la foto y si no se come la última línea */
  padding:calc(var(--marco) * 2.4) var(--marco) calc(var(--marco) + 7vh + 8px);
  /* la foto del hero es clara justo donde cae el titular: sin este peso el
     texto se queda en 2,5:1. Medido sobre el 20 % más claro del fondo. */
  background:linear-gradient(to top,rgba(21,12,16,.94) 0%,rgba(21,12,16,.86) 40%,
                                    rgba(21,12,16,.52) 66%,rgba(21,12,16,0) 100%);
  color:var(--crema);display:grid;gap:8px;
}
.franja figcaption .rotulo{color:rgba(251,243,239,.7)}
.franja-frase{
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.5rem,3.4vw,2.6rem);
  line-height:1.05;margin:0;max-width:20ch;
}

/* --- fotos de contenido: filete de tinta para que la foto no flote ---
   Va en todas las <figure> con imagen menos las franjas a sangre, donde un
   borde no tiene sentido porque la foto llega al borde de la pantalla.
   Es `--tinta`, no negro puro: el negro puro no existe en esta paleta. */
figure:not(.franja) img{
  width:100%;                      /* si no, la foto se queda en su ancho
                                      natural y no cuadra con la de al lado */
  border:1px solid var(--tinta);
  border-radius:var(--radio);
}
.piel-noche figure:not(.franja) img{border-color:rgba(251,243,239,.34)}

.retrato{position:relative}
.retrato figcaption{margin-top:14px}

/* --- el índice de páginas --- */
.indice{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.indice a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(16px,3vw,40px);padding:clamp(24px,3.6vw,44px) 0;
  border-bottom:1px solid var(--linea);position:relative;
  /* isolation crea el contexto de apilado del enlace: sin esto el ::before con
     z-index:-1 se va detrás del fondo de la sección y el hover no se ve. */
  isolation:isolate;
  transition:padding-inline var(--lento) var(--salida),color var(--lento) var(--salida);
}
.indice a::before{
  content:"";position:absolute;inset:0;background:var(--acento);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--lento) var(--salida);
}
/* tinta sobre el rosa, no blanco: el blanco no pasa AA sobre este acento */
.indice a:hover{padding-inline:clamp(14px,2.4vw,32px);color:var(--noche)}
.indice a:hover::before{transform:scaleY(1)}
.indice a:hover .indice-n,.indice a:hover .indice-d{color:rgba(21,12,16,.74)}
.indice-n{font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.16em;color:var(--acento-txt);transition:color var(--lento) var(--salida)}
.indice h3{font-size:clamp(1.7rem,4vw,3rem)}
.indice-d{font-size:15px;color:var(--tinta-tenue);margin:6px 0 0;max-width:46ch;transition:color var(--lento) var(--salida)}
.indice .flecha{width:26px;height:1px;background:currentColor;transition:width var(--lento) var(--salida)}
.indice a:hover .flecha{width:52px}

/* --- esquemas SVG dibujados a mano --- */
.diag{margin:0;display:grid;gap:16px}
.diag-lienzo{width:100%}
.diag-svg{width:100%;height:auto;color:currentColor;font-family:"DM Mono",ui-monospace,monospace}
.diag-svg text{font-size:13px;fill:currentColor;fill-opacity:.62;font-variant-numeric:tabular-nums}
.diag-svg .t1{fill:var(--acento)}
.diag-svg .t2{fill:currentColor;fill-opacity:.42}
.diag-svg .t3{fill:currentColor;fill-opacity:.26}
.diag-svg .rej line{stroke:currentColor;stroke-opacity:.14}
.diag-svg .linea{fill:none;stroke:var(--acento);stroke-width:2.5;stroke-linecap:round}
.diag-svg .linea.alt{stroke:currentColor;stroke-opacity:.4;stroke-dasharray:6 6}
.diag-svg .corte{stroke:currentColor;stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 4}
.diag-svg .ser{font-size:12.5px;fill-opacity:1;fill:var(--acento)}
.diag-svg .ser.alt{fill:currentColor;fill-opacity:.55}
.diag-svg .fuerte{fill:currentColor;fill-opacity:.95;font-size:14px}
.diag-pie{margin:0;font-size:13.5px;color:var(--tinta-tenue);max-width:62ch;line-height:1.55}
.piel-noche .diag-pie{color:rgba(251,243,239,.6)}
@media(max-width:700px){
  /* en móvil el esquema no se encoge hasta ser ilegible: se desliza. El
     degradado del borde es lo que avisa de que hay más a la derecha. */
  .diag-lienzo{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:10px;
    -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
            mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .diag-lienzo .diag-svg{min-width:620px}
}

/* --- preguntas (FAQ, bueno para SEO) --- */
.faq{display:grid;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 0;display:flex;gap:18px;align-items:baseline;
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.15rem,2.2vw,1.55rem);
  line-height:1.2;transition:color var(--rapido) var(--estandar);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;color:var(--acento);font-family:"DM Mono",ui-monospace,monospace;
  font-size:18px;transition:transform var(--rapido) var(--rebote);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--acento-txt)}
.faq p{margin:0 0 22px;color:var(--tinta-suave);max-width:62ch}
.piel-noche .faq p{color:rgba(251,243,239,.72)}
.piel-noche .faq details,.piel-noche .faq{border-color:rgba(251,243,239,.16)}

/* --- sello con anillo que gira: el segundo bucle ambiental --- */
.sello{display:grid;justify-items:center;gap:16px;position:relative;padding:34px 0}
.sello img{width:58px;height:58px;position:relative;z-index:1}
.sello::before{
  content:"";position:absolute;top:10px;width:118px;height:118px;border-radius:50%;
  border:1px solid var(--linea);border-top-color:var(--acento);
  animation:gira 22s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
.piel-noche .sello::before{border-color:rgba(251,243,239,.18);border-top-color:var(--acento)}

/* --- punto en vivo --- */
.vivo{display:inline-flex;align-items:center;gap:9px}
.vivo i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--acento);display:block}
.vivo i::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--acento);
  animation:pulso 2.6s var(--estandar) infinite;
}
@keyframes pulso{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(3.2);opacity:0}}

/* --- pie --- */
.pie{background:var(--noche);color:var(--crema);padding:var(--hueco) var(--marco) 40px}
.pie .sello{justify-items:start;padding:0 0 30px}
.pie .sello::before{left:-30px;top:-30px}
.pie .marca-gigante{
  font-family:"Instrument Serif",Georgia,serif;font-size:var(--d0);line-height:.82;
  letter-spacing:.05em;text-indent:.05em;margin:0 0 30px;
}
.pie-rejilla{display:grid;gap:34px;margin:50px 0 44px}
@media(min-width:760px){.pie-rejilla{grid-template-columns:repeat(3,1fr)}}
.pie-rejilla h4{margin:0 0 14px;font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(251,243,239,.5)}
.pie-rejilla ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pie-rejilla a{color:rgba(251,243,239,.82);transition:color var(--rapido) var(--estandar)}
.pie-rejilla a:hover{color:var(--acento)}
.pie-creditos{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:"DM Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,243,239,.45);
  border-top:1px solid rgba(251,243,239,.14);padding-top:22px;margin:6px 0 0}

/* =============================================================================
   6 · apariciones. Cuatro efectos distintos, no uno repetido.
   ========================================================================== */
[data-rev]{opacity:0;transform:translateY(34px);
  transition:opacity var(--lento) var(--salida),transform var(--lento) var(--salida)}
[data-rev="lado"]{transform:translateX(-40px)}
[data-rev="esc"]{transform:scale(.94)}
[data-rev="mascara"]{clip-path:inset(0 0 100% 0);transform:none;opacity:1}
[data-rev].on{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
[data-tarde="1"]{transition-delay:.1s}
[data-tarde="2"]{transition-delay:.2s}
[data-tarde="3"]{transition-delay:.3s}

/* el titular entra línea por línea desde debajo de su máscara */
.lineas{display:block}
.lineas .lin{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.lineas .lin>span{display:block;transform:translateY(110%);
  transition:transform .9s var(--salida)}
.lineas.on .lin>span{transform:none}
.lineas .lin:nth-child(2)>span{transition-delay:.09s}
.lineas .lin:nth-child(3)>span{transition-delay:.18s}
.lineas .lin:nth-child(4)>span{transition-delay:.27s}

/* cascada dentro de una pieza */
.cascada>*{opacity:0;transform:translateY(22px);
  transition:opacity var(--lento) var(--salida),transform var(--lento) var(--salida)}
.cascada.on>*{opacity:1;transform:none}
.cascada.on>*:nth-child(1){transition-delay:.05s}
.cascada.on>*:nth-child(2){transition-delay:.13s}
.cascada.on>*:nth-child(3){transition-delay:.21s}
.cascada.on>*:nth-child(4){transition-delay:.29s}
.cascada.on>*:nth-child(5){transition-delay:.37s}
.cascada.on>*:nth-child(6){transition-delay:.45s}

/* la frase que se escribe al bajar. Una por página. */
.escribe{
  font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.9rem,5vw,4rem);
  line-height:1.06;margin:0;max-width:19ch;letter-spacing:-.012em;
}
.escribe i{font-style:inherit;color:color-mix(in srgb,currentColor 18%,transparent);
  transition:color .3s var(--salida)}
.escribe i[data-on]{color:currentColor}

/* =============================================================================
   7 · reduced motion: se congela, no desaparece
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-rev]{opacity:1;transform:none;clip-path:none}
  .lineas .lin>span{transform:none}
  .cascada>*{opacity:1;transform:none}
  .escribe i{color:currentColor}
  .franja img{transform:none}
  .cortina-mono,.cortina-nombre span,.cortina-lema{opacity:1;transform:none}
}

/* =============================================================================
   8 · páginas interiores
   ========================================================================== */
.portada-pg{padding:calc(var(--hueco) * .8 + 66px) var(--marco) calc(var(--hueco) * .85)}
.portada-pg h1{font-size:var(--d1);margin:20px 0 0;max-width:15ch}
.portada-pg .entradilla{
  font-size:clamp(1.08rem,2vw,1.42rem);line-height:1.46;color:var(--tinta-suave);
  max-width:44ch;margin:28px 0 0;
}
.piel-noche .portada-pg .entradilla{color:rgba(251,243,239,.76)}
.migas{display:flex;gap:10px;align-items:center;margin:0 0 6px}
.migas a{color:var(--acento-txt);border-bottom:1px solid transparent;transition:border-color var(--rapido) var(--estandar)}
.migas a:hover{border-bottom-color:currentColor}
.piel-noche .migas a{color:var(--acento)}

/* prosa larga a dos columnas: el texto a la izquierda, el apunte a la derecha */
.prosa{display:grid;gap:clamp(30px,5vw,80px);align-items:start}
@media(min-width:900px){.prosa{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.prosa h2{margin-bottom:22px}
.prosa p{margin:0 0 18px;color:var(--tinta-suave);max-width:62ch}
.prosa p:last-child{margin-bottom:0}
.prosa strong{font-weight:500;color:var(--tinta)}
.piel-noche .prosa p{color:rgba(251,243,239,.76)}
.piel-noche .prosa strong{color:var(--crema)}
.apunte{
  border-left:2px solid var(--acento);padding:4px 0 4px 22px;
  font-size:15.5px;line-height:1.55;color:var(--tinta-suave);
}
.apunte h4{margin:0 0 8px;font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acento-txt)}
.piel-noche .apunte{color:rgba(251,243,239,.76)}
.piel-noche .apunte h4{color:var(--acento)}

/* lista de comprobación / lista simple con filete */
.lista{list-style:none;margin:0;padding:0;display:grid}
.lista li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--linea);color:var(--tinta-suave);
}
.lista li:last-child{border-bottom:1px solid var(--linea)}
.lista li b{
  font-family:"DM Mono",ui-monospace,monospace;font-weight:400;font-size:11.5px;
  letter-spacing:.14em;color:var(--acento-txt);
}
.lista li strong{font-weight:500;color:var(--tinta);display:block}
.piel-noche .lista li{border-color:rgba(251,243,239,.16);color:rgba(251,243,239,.76)}
.piel-noche .lista li strong{color:var(--crema)}
.piel-noche .lista li b{color:var(--acento)}

/* dos columnas de sí / no */
.sino{display:grid;gap:2px;background:var(--linea)}
@media(min-width:760px){.sino{grid-template-columns:1fr 1fr}}
.sino>div{background:var(--crema);padding:clamp(26px,3vw,40px)}
.sino h3{margin-bottom:18px}
.sino ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.sino li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--tinta-suave);font-size:15.5px;line-height:1.5}
.sino li::before{content:"—";color:var(--acento-txt)}
.sino .no li::before{content:"×";color:var(--tinta-tenue)}
.piel-noche .sino{background:rgba(251,243,239,.16)}
.piel-noche .sino>div{background:var(--noche)}
.piel-noche .sino li{color:rgba(251,243,239,.76)}
.piel-noche .sino li::before{color:var(--acento)}

/* fuentes */
.fuentes{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:f}
.fuentes li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:14px;line-height:1.55;
  color:var(--tinta-tenue);
}
.fuentes li::before{
  counter-increment:f;content:counter(f,decimal-leading-zero);
  font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:var(--acento-txt);
}
.piel-noche .fuentes li{color:rgba(251,243,239,.6)}
.piel-noche .fuentes li::before{color:var(--acento)}

/* el mapa de la cara, dibujado a mano */
.cara{width:100%;max-width:480px;height:auto;color:var(--tinta)}
.cara .piel{fill:none;stroke:currentColor;stroke-opacity:.30;stroke-width:1.6}
.cara .rasgo{fill:none;stroke:currentColor;stroke-opacity:.20;stroke-width:1.4}
.cara .via{fill:none;stroke:var(--acento);stroke-width:2.2;stroke-linecap:round}
.cara .punta{fill:var(--acento)}
.cara text{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  fill:currentColor;fill-opacity:.55;text-transform:uppercase}

/* ---- whatsapp ---- */
/* Fijo abajo a la derecha, por debajo del menú a pantalla completa (99). En
   ciruela y con el glifo claro, no en el verde de WhatsApp: el glifo ya se
   reconoce solo. Al pasar por encima se enciende el acento. Entra con un rebote
   un segundo después de cargar, para no competir con la portada. */
.wa{
  position:fixed;z-index:98;
  right:calc(clamp(16px,2.4vw,32px) + env(safe-area-inset-right));
  bottom:calc(clamp(16px,2.4vw,32px) + env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--noche);color:var(--crema);
  box-shadow:0 0 0 1px rgba(251,243,239,.18),0 12px 30px -10px rgba(21,12,16,.55);
  animation:wa-entra .7s var(--rebote) 1s both;
  transition:transform var(--rapido) var(--rebote),background var(--rapido) var(--salida);
}
.wa svg{width:27px;height:27px}
.wa:hover{transform:translateY(-3px) scale(1.05);background:var(--acento)}
.wa:active{transform:scale(.96)}
.wa:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
.wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes wa-entra{from{opacity:0;transform:translateY(16px) scale(.6)}}
@media(prefers-reduced-motion:reduce){.wa{animation:none}}