@charset "utf-8";
/* ==========================================================================
   DISGUSTING HABITS — sistema de diseño
   --------------------------------------------------------------------------
   La metáfora: una página de cómic de quiosco. El fondo es la TINTA (la calle
   negra entre viñetas) y el contenido vive dentro de PANELES de papel de pulpa
   con borde grueso. Cada sección cambia de mundo visual, como al pasar página.

   Paleta muestreada de las portadas reales: tinta parda, rojo ladrillo, papel
   amarilleado, verde azulado y ámbar de rótulo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* --- tinta: el fondo base, la calle del cómic --- */
  --ink:        oklch(0.185 0.014 68);    /* #1B1712 */
  --ink-2:      oklch(0.255 0.016 66);    /* un peldaño arriba, para bordes */
  --ink-soft:   oklch(0.325 0.014 66);

  /* --- papel: la superficie de lectura --- */
  --pulp:       oklch(0.895 0.055 86);    /* #F0DDAE  papel amarilleado */
  --pulp-hi:    oklch(0.949 0.036 88);    /* #FBF0D4  papel nuevo */
  --pulp-lo:    oklch(0.838 0.062 82);    /* #E3CB92  papel viejo, sombra */
  --bone:       oklch(0.957 0.008 85);    /* casi blanco, para producto */

  /* --- acentos --- */
  --red:        oklch(0.487 0.172 30);    /* #B5291C rojo ladrillo de portada */
  --red-dk:     oklch(0.362 0.132 31);    /* #7C1710 */
  --red-hi:     oklch(0.585 0.185 32);    /* para hover sobre tinta */
  --teal:       oklch(0.455 0.070 172);   /* #2E6C5E */
  --teal-hi:    oklch(0.560 0.082 172);
  --amber:      oklch(0.770 0.148 76);    /* #E9A429 ámbar de rótulo */
  --amber-dk:   oklch(0.660 0.140 68);

  /* --- roles de texto: contraste verificado, ver README --- */
  --on-ink:     var(--pulp);
  --on-ink-dim: oklch(0.760 0.030 84);    /* secundario sobre tinta: 8.4:1 */
  --on-pulp:    var(--ink);
  --on-pulp-dim:oklch(0.395 0.020 66);    /* secundario sobre papel: 7.9:1 */

  /* --- tipografía --- */
  --f-display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-label:   "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-text:    "Literata", Georgia, "Times New Roman", serif;

  /* escala modular fluida, razón 1.28 */
  --t-xs:   0.78rem;
  --t-sm:   0.88rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.13rem, 0.4vw + 1.03rem, 1.28rem);
  --t-lg:   clamp(1.35rem, 0.9vw + 1.15rem, 1.75rem);
  --t-xl:   clamp(1.9rem,  2.2vw + 1.3rem,  2.85rem);
  --t-2xl:  clamp(2.5rem,  4.4vw + 1.3rem,  4.4rem);
  --t-3xl:  clamp(3rem,    7vw + 1rem,      5.9rem);

  /* --- espaciado fluido --- */
  --s-1: 0.375rem;
  --s-2: 0.75rem;
  --s-3: 1.125rem;
  --s-4: 1.75rem;
  --s-5: 2.75rem;
  --s-6: clamp(3rem, 5vw, 4.75rem);
  --s-7: clamp(4rem, 8vw, 7.5rem);

  /* --- estructura --- */
  --wrap: 1200px;
  --wrap-narrow: 720px;
  --rule: 3px;                  /* grosor de línea de viñeta */
  --rule-thick: 5px;

  /* --- movimiento --- */
  --ease-out: cubic-bezier(.22,.61,.36,1);      /* ease-out-quart */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --fast: .13s;
  --med: .28s;

  /* --- capas (escala semántica, nunca 9999) --- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-scrim: 200;
  --z-modal: 210;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
[id]{ scroll-margin-top:5.5rem; }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-ink);
  font-family:var(--f-text);
  font-size:var(--t-base);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
p{ margin:0 0 1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; }

h1,h2,h3,h4{
  margin:0;
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:0.9;
  letter-spacing:-0.012em;
  text-wrap:balance;
}
h1{ font-size:var(--t-3xl); }
h2{ font-size:var(--t-2xl); }
h3{ font-size:var(--t-lg); line-height:1.02; }
h4{ font-size:var(--t-md); }

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}
::selection{ background:var(--amber); color:var(--ink); }

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:var(--s-2); top:-100%;
  z-index:calc(var(--z-sticky) + 1);
  background:var(--amber); color:var(--ink);
  font-family:var(--f-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; padding:.7rem 1.1rem; text-decoration:none;
  border:var(--rule) solid var(--ink);
}
.skip:focus{ top:var(--s-2); }

/* --------------------------------------------------------------------------
   3. TEXTURA — trama de semitono y grano de papel
   Es lo que hace que la pantalla parezca impresa en barato.
   -------------------------------------------------------------------------- */
.halftone{ position:relative; isolation:isolate; }
.halftone::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at center, currentColor .9px, transparent 1px);
  background-size:6px 6px;
  opacity:.14;
}

/* grano fino de papel: dos rejillas desfasadas, barato de pintar */
.grain{ position:relative; isolation:isolate; }
.grain::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 17% 31%, rgba(27,23,18,.22) .6px, transparent .7px),
    radial-gradient(circle at 71% 63%, rgba(27,23,18,.16) .55px, transparent .65px),
    radial-gradient(circle at 44% 88%, rgba(27,23,18,.13) .5px, transparent .6px);
  background-size:31px 37px, 47px 43px, 23px 29px;
  opacity:.7;
}

/* --------------------------------------------------------------------------
   4. CONTENEDORES Y SECCIONES
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
.wrap--narrow{ max-width:var(--wrap-narrow); }

.sec{ padding-block:var(--s-7); position:relative; }
.sec--tight{ padding-block:var(--s-6); }

/* los cuatro mundos visuales */
.sec--ink  { background:var(--ink);    color:var(--on-ink); }
.sec--pulp { background:var(--pulp);   color:var(--on-pulp); }
.sec--red  { background:var(--red-dk); color:var(--pulp-hi); }
.sec--teal { background:var(--teal);   color:var(--pulp-hi); }

/* borde grueso donde cambia el mundo, como el filo de una viñeta */
.sec--pulp, .sec--red, .sec--teal{
  border-block:var(--rule-thick) solid var(--ink);
}

.sec__head{ max-width:60ch; margin-bottom:var(--s-5); }
.sec__head h2{ margin-bottom:var(--s-3); }
.sec__head > p{ font-size:var(--t-md); }
.sec--pulp .sec__head > p{ color:var(--on-pulp-dim); }
.sec--ink  .sec__head > p{ color:var(--on-ink-dim); }
.sec--red  .sec__head > p,
.sec--teal .sec__head > p{ color:oklch(0.90 0.03 85 / .88); }

/* segunda línea del titular en color: el gesto de las portadas */
.h-alt{ display:block; color:var(--red); }
.sec--ink .h-alt,
.sec--red .h-alt,
.sec--teal .h-alt{ color:var(--amber); }

/* --------------------------------------------------------------------------
   5. PANEL — la viñeta. Unidad estructural de todo el sitio.
   -------------------------------------------------------------------------- */
.panel{
  background:var(--pulp-hi);
  color:var(--on-pulp);
  border:var(--rule) solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  position:relative;
}
.panel--flat{ box-shadow:none; }
.panel--deep{ box-shadow:11px 11px 0 var(--ink); }
.panel--pad{ padding:clamp(1.4rem,3vw,2.2rem); }

/* sobre fondo de tinta la sombra no se ve: se usa un realce claro */
.sec--ink .panel{ box-shadow:7px 7px 0 oklch(0.42 0.02 66); }
.sec--ink .panel--deep{ box-shadow:11px 11px 0 oklch(0.42 0.02 66); }

/* enlace-panel: se levanta al pasar por encima */
a.panel, .panel--link{
  text-decoration:none; display:flex; flex-direction:column;
  transition:transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
a.panel:hover, .panel--link:hover{
  transform:translate(-3px,-3px);
  box-shadow:11px 11px 0 var(--ink);
}
.sec--ink a.panel:hover, .sec--ink .panel--link:hover{
  box-shadow:11px 11px 0 oklch(0.42 0.02 66);
}
a.panel:active, .panel--link:active{
  transform:translate(1px,1px); box-shadow:4px 4px 0 var(--ink);
}

/* --------------------------------------------------------------------------
   6. SELLOS, PRECINTOS Y BOCADILLOS
   Los dispositivos de marca. Se usan poco y a propósito — no como etiqueta
   encima de cada sección, que es justo lo que los mataría.
   -------------------------------------------------------------------------- */
.stamp{
  display:inline-block;
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.11em;
  font-size:var(--t-sm); line-height:1.1;
  color:var(--red); border:2.5px solid currentColor;
  padding:.4rem .85rem .28rem;
  box-shadow:inset 0 0 0 1.5px var(--pulp-hi);
  transform:rotate(-1.6deg);
}
.stamp--amber{ color:var(--amber); box-shadow:inset 0 0 0 1.5px var(--ink); }
.stamp--ink{ color:var(--ink); }
.stamp--teal{ color:var(--teal); }

.seal{
  inline-size:8.25rem; block-size:8.25rem; border-radius:50%;
  background:var(--red); color:var(--pulp-hi);
  display:grid; place-content:center; text-align:center;
  font-family:var(--f-label); font-weight:700; text-transform:uppercase;
  font-size:var(--t-xs); line-height:1.15; letter-spacing:.05em;
  padding:.9rem;
  box-shadow:inset 0 0 0 3px var(--red), inset 0 0 0 5px var(--pulp-hi);
  transform:rotate(-9deg);
}
.seal b{ display:block; font-size:1.15rem; letter-spacing:.07em; margin-bottom:.15rem; }
.seal--teal{ background:var(--teal); box-shadow:inset 0 0 0 3px var(--teal), inset 0 0 0 5px var(--pulp-hi); }

/* bocadillo de diálogo con rabo real */
.balloon{
  position:relative;
  background:var(--pulp-hi); color:var(--ink);
  border:var(--rule) solid var(--ink);
  border-radius:1.6rem;
  padding:1.1rem 1.4rem;
  font-family:var(--f-label); font-weight:600;
  font-size:var(--t-md); line-height:1.28;
  text-transform:uppercase; letter-spacing:.01em;
}
.balloon::after,.balloon::before{
  content:""; position:absolute; inline-size:0; block-size:0;
  border-style:solid;
}
.balloon::before{
  bottom:calc(-1 * var(--rule) - 22px); left:2.4rem;
  border-width:24px 20px 0 0; border-color:var(--ink) transparent transparent transparent;
}
.balloon::after{
  bottom:-17px; left:calc(2.4rem + 3px);
  border-width:19px 15px 0 0; border-color:var(--pulp-hi) transparent transparent transparent;
}

/* etiqueta de caja de texto de cómic (la de las esquinas de las viñetas) */
.caption{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--t-xs); line-height:1.2;
}

/* banderola de estado sobre una portada */
.flag{
  position:absolute; inset-inline-start:0; inset-block-start:1rem;
  background:var(--red); color:var(--pulp-hi);
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-xs);
  padding:.32rem .75rem .22rem;
  border:2px solid var(--ink); border-inline-start:0;
  z-index:var(--z-raised);
}
.flag--soon{ background:var(--ink); color:var(--pulp); }

/* --------------------------------------------------------------------------
   7. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  font-size:var(--t-md); line-height:1;
  padding:.9rem 1.5rem .78rem;
  background:var(--red); color:var(--pulp-hi);
  border:var(--rule) solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  text-decoration:none; cursor:pointer;
  transition:transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out),
             background var(--fast) var(--ease-out);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.btn svg{ inline-size:1.05em; block-size:1.05em; flex:none; }

.btn--pulp{ background:var(--pulp-hi); color:var(--ink); }
.btn--amber{ background:var(--amber); color:var(--ink); }
.btn--teal{ background:var(--teal); color:var(--pulp-hi); }
.btn--ink{ background:var(--ink); color:var(--pulp-hi); }
.btn--sm{ font-size:var(--t-sm); padding:.62rem 1rem .52rem; box-shadow:4px 4px 0 var(--ink); }
.btn--lg{ font-size:var(--t-md); padding:1.02rem 1.65rem .88rem; box-shadow:6px 6px 0 var(--ink); }
.btn--block{ inline-size:100%; }

/* sobre tinta el botón necesita borde claro para no desaparecer */
.sec--ink .btn, .foot .btn, .sec--red .btn, .sec--teal .btn{
  border-color:var(--pulp-hi); box-shadow:5px 5px 0 oklch(0.42 0.02 66);
}
.sec--ink .btn:hover, .foot .btn:hover, .sec--red .btn:hover, .sec--teal .btn:hover{
  box-shadow:3px 3px 0 oklch(0.42 0.02 66);
}
.sec--ink .btn:active, .foot .btn:active, .sec--red .btn:active, .sec--teal .btn:active{
  box-shadow:0 0 0 oklch(0.42 0.02 66);
}

.btnrow{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); align-items:center; }

/* --------------------------------------------------------------------------
   8. MASTHEAD
   -------------------------------------------------------------------------- */
.masthead{
  position:sticky; inset-block-start:0; z-index:var(--z-sticky);
  background:var(--pulp-hi); color:var(--ink);
  border-block-end:var(--rule-thick) solid var(--ink);
}
.masthead__in{
  display:flex; align-items:center; gap:clamp(.6rem,2vw,1.2rem);
  max-width:var(--wrap); margin-inline:auto;
  padding:.5rem clamp(1.1rem,4vw,2rem);
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-inline-end:auto; min-width:0; }
.brand img{ inline-size:2.9rem; flex:none; }
.brand__txt{
  font-family:var(--f-display); text-transform:uppercase;
  line-height:.84; font-size:clamp(1rem,2.6vw,1.3rem); letter-spacing:-0.01em;
}
.brand__txt i{
  display:block; font-style:normal;
  font-family:var(--f-label); font-weight:600;
  font-size:.5em; letter-spacing:.15em; margin-block-start:.25rem;
  color:var(--on-pulp-dim);
}
.navlinks{ display:flex; gap:clamp(.9rem,2.2vw,1.6rem); list-style:none; }
.navlinks a{
  display:block; text-decoration:none;
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-sm);
  padding-block:.35rem;
  border-block-end:3px solid transparent;
  transition:border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.navlinks a:hover{ border-block-end-color:var(--red); color:var(--red); }
.navlinks a[aria-current]{ border-block-end-color:var(--ink); }

.iconlink{
  display:grid; place-content:center; flex:none;
  inline-size:2.5rem; block-size:2.5rem;
  border:var(--rule) solid var(--ink); background:var(--pulp-hi);
  text-decoration:none;
  transition:background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.iconlink svg{ inline-size:1.25rem; block-size:1.25rem; }
.iconlink:hover{ background:var(--red); color:var(--pulp-hi); }

/* --- menú móvil: <details> nativo, funciona sin JavaScript --- */
.navmenu{ display:none; position:relative; flex:none; }
.navmenu > summary{
  list-style:none; cursor:pointer; position:relative;
  inline-size:2.5rem; block-size:2.5rem;
  border:var(--rule) solid var(--ink); background:var(--pulp-hi);
}
.navmenu > summary::-webkit-details-marker{ display:none; }
/* Tres rayas con una sola barra + dos sombras; al abrir gira a aspa. */
.navmenu > summary::after,
.navmenu > summary::before{
  content:""; position:absolute; inset-inline-start:50%; inset-block-start:50%;
  inline-size:1.15rem; block-size:2px; background:currentColor;
  transform:translate(-50%,-50%);
}
.navmenu > summary::after{ box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor; }
.navmenu > summary::before{ opacity:0; }
.navmenu[open] > summary::after{ box-shadow:none; transform:translate(-50%,-50%) rotate(45deg); }
.navmenu[open] > summary::before{ opacity:1; transform:translate(-50%,-50%) rotate(-45deg); }
@media (prefers-reduced-motion:no-preference){
  .navmenu > summary::after,
  .navmenu > summary::before{ transition:transform .18s var(--ease-out), opacity .18s, box-shadow .18s; }
}
.navmenu__panel{
  position:absolute; inset-block-start:calc(100% + .5rem); inset-inline-end:0;
  z-index:var(--z-sticky);
  min-inline-size:min(14rem, calc(100vw - 2rem));
  background:var(--pulp-hi); color:var(--ink);
  border:var(--rule) solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  padding:.4rem;
  list-style:none;
}
.navmenu__panel a{
  display:block; text-decoration:none;
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-base);
  padding:.7rem .8rem .6rem;
}
.navmenu__panel a:hover,
.navmenu__panel a:focus-visible{ background:var(--red); color:var(--pulp-hi); }
.navmenu__panel li + li{ border-block-start:2px solid oklch(0.19 0.014 68 / .14); }
.navmenu__lang a{ color:var(--red); }
.navmenu__lang{ border-block-start:var(--rule) solid var(--ink) !important; }
.navmenu__lang a::before{ content:"\2192\00a0"; }

.langtoggle{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; font-size:var(--t-sm);
  text-decoration:none; padding:.5rem .7rem .4rem;
  border:var(--rule) solid var(--ink); background:var(--pulp-hi); flex:none;
  transition:background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.langtoggle:hover{ background:var(--ink); color:var(--pulp-hi); }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero{
  background:var(--ink); color:var(--on-ink);
  padding-block:var(--s-6) var(--s-5);
  position:relative; overflow:hidden;
}
/* estallido de semitono detrás de las portadas */
.hero::before{
  content:""; position:absolute; z-index:0;
  inset-block-start:-14%; inset-inline-end:-6%;
  inline-size:min(46rem,88vw); aspect-ratio:1;
  background-image:radial-gradient(circle at center, var(--red) 1.6px, transparent 1.9px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at center, #000 22%, transparent 68%);
          mask-image:radial-gradient(circle at center, #000 22%, transparent 68%);
  opacity:.5; pointer-events:none;
}
.hero__grid{
  position:relative; z-index:var(--z-base);
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,3.5rem); align-items:center;
}
.hero h1{ margin-block:var(--s-3) 0; }
.hero h1 span{ display:block; }
.hero h1 .l2{ color:var(--red-hi); }
.hero h1 .l4{ color:var(--amber); }
.hero__sub{
  font-size:var(--t-md); max-width:44ch;
  margin-block-start:var(--s-3); color:var(--on-ink-dim);
}
.hero__sub strong{ color:var(--pulp); font-weight:600; }
.hero__cta{ margin-block-start:var(--s-4); }
.hero__by{
  font-family:var(--f-label); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-xs);
  margin-block-start:var(--s-4); color:var(--on-ink-dim);
}
.hero__by a{ color:var(--amber); text-underline-offset:3px; }

/* el abanico de portadas */
.fan{ position:relative; display:grid; place-items:center; min-block-size:26rem; }
.fan img{
  border:var(--rule) solid var(--ink);
  box-shadow:0 0 0 1px oklch(0.42 0.02 66), 10px 12px 0 oklch(0 0 0 / .45);
  background:var(--pulp-lo);
}
.fan__main{ inline-size:min(19.5rem,70%); position:relative; z-index:3; }
.fan__side{ position:absolute; inline-size:min(15rem,54%); z-index:1; }
.fan__side--l{ inset-inline-start:0; transform:rotate(-11deg) translateY(1rem); }
.fan__side--r{ inset-inline-end:0;  transform:rotate(10deg) translateY(1.4rem); }
.fan .seal{ position:absolute; inset-inline-end:-.4rem; inset-block-start:-.6rem; z-index:5; }

/* --------------------------------------------------------------------------
   10. TICKER
   -------------------------------------------------------------------------- */
.ticker{
  background:var(--amber); color:var(--ink);
  border-block:var(--rule-thick) solid var(--ink);
  overflow:hidden; position:relative;
}
.ticker__track{ display:flex; inline-size:max-content; }
/* La animación solo arranca cuando el JS ha duplicado la cinta. Sin JS la
   lista se queda quieta y legible en vez de desfilar hasta desaparecer. */
.ticker--running .ticker__track{ animation:roll 52s linear infinite; }
.ticker--running:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:var(--t-base);
  padding-block:.62rem; white-space:nowrap;
}
.ticker__track b{ padding-inline:1.15rem; color:var(--red-dk); }
@keyframes roll{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------------------
   11. LIBROS — dos tratamientos distintos, no una rejilla uniforme.
   Los publicados van en horizontal y grandes; los que aún no han salido, en
   una rejilla menor debajo. La jerarquía la marca la FORMA, no solo el tamaño.
   -------------------------------------------------------------------------- */
.books--out{
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr));
  margin-block-end:var(--s-5);
}
.books--soon{
  display:grid; gap:var(--s-3);
  grid-template-columns:repeat(4,1fr);
}

/* el hueco que queda al final de la fila: no se deja vacío, se usa */
.book--more{
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-2);
  padding:var(--s-4) var(--s-3);
  background:transparent; color:var(--on-pulp);
  border:var(--rule) dashed var(--ink); box-shadow:none;
  text-decoration:none; text-align:center;
  transition:background var(--fast) var(--ease-out);
}
.book--more:hover{ background:oklch(1 0 0 / .35); box-shadow:none; transform:none; }
.book--more h3{ font-size:var(--t-lg); }
.book--more p{ font-size:var(--t-sm); color:var(--on-pulp-dim); }
.book--more span{
  font-family:var(--f-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:var(--t-xs); color:var(--red);
}
.books__sub{
  font-family:var(--f-label); font-weight:700; line-height:1.2;
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-sm);
  color:var(--on-pulp-dim); margin-block-end:var(--s-3);
  display:flex; align-items:center; gap:var(--s-3);
}
.books__sub::after{ content:""; flex:1; height:2px; background:currentColor; opacity:.28; }

.book{ display:flex; flex-direction:column; }
.book__art{
  position:relative; display:block; background:var(--pulp-lo);
  overflow:hidden; flex:none;
}
.book__art img{ inline-size:100%; transition:transform var(--med) var(--ease-out-expo); }
.book:hover .book__art img{ transform:scale(1.04); }

/* --- ficha destacada: portada al lado del texto --- */
.book--lead{ flex-direction:row; align-items:stretch; }
.book--lead .book__art{
  inline-size:13.5rem;
  border-inline-end:var(--rule) solid var(--ink);
  background:var(--pulp-lo);
}
/* contain, nunca cover: una portada recortada pierde el título, que es
   justo lo que el lector necesita reconocer. */
.book--lead .book__art img{
  block-size:100%; inline-size:100%;
  object-fit:contain; object-position:center center;
}
.book--lead .book__body{ padding:var(--s-4) var(--s-3) var(--s-3) var(--s-4); }
.book--lead .book__title h3{ font-size:var(--t-lg); }
.book--lead .book__tag{ font-size:var(--t-sm); }

/* --- ficha secundaria: vertical, más contenida --- */
.book--rest .book__art{ border-block-end:var(--rule) solid var(--ink); }
.book--rest .book__body{ padding:var(--s-3); }
.book--rest .book__title h3{ font-size:var(--t-base); }
.book--rest .book__tag{ font-size:var(--t-xs); }

.book__body{ display:flex; flex-direction:column; gap:.55rem; flex:1; min-inline-size:0; }
.book__title{ text-decoration:none; }
.book__sub{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--t-xs); color:var(--on-pulp-dim);
}
.book__tag{ font-style:italic; color:var(--red); margin:0; line-height:1.35; }
.book__blurb{ font-size:var(--t-sm); margin:0; color:var(--on-pulp-dim); }
.book__foot{ margin-block-start:auto; padding-block-start:var(--s-2); }

.langs{ display:flex; gap:.35rem; flex-wrap:wrap; }
.lang{
  font-family:var(--f-label); font-weight:700;
  font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase;
  border:2px solid currentColor; padding:.14rem .42rem .04rem;
}
.lang--soon{ color:var(--on-pulp-dim); }
.fmt{
  font-family:var(--f-label); font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  font-size:var(--t-xs); color:var(--on-pulp-dim);
}

.disclosure{
  font-size:var(--t-sm); color:var(--on-pulp-dim);
  max-width:66ch; margin-block-start:var(--s-5);
}
.sec--ink .disclosure{ color:var(--on-ink-dim); }

/* --------------------------------------------------------------------------
   12. GENERADOR DE HÁBITOS
   -------------------------------------------------------------------------- */
.gen{ display:grid; grid-template-columns:1fr 1.18fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.gen__panel{
  background:var(--pulp-hi); color:var(--ink);
  border:var(--rule) solid var(--ink);
  box-shadow:11px 11px 0 oklch(0 0 0 / .38);
  display:flex; flex-direction:column;
  min-block-size:15rem;
}
/* cabecera de ficha de archivo: es lo que le da sentido al número */
.gen__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  padding:.5rem var(--s-3) .4rem;
  border-block-end:var(--rule) solid var(--ink);
  background:var(--pulp-lo);
}
.gen__head span{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:var(--t-xs);
}
.gen__head b{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-lg); line-height:1; color:var(--red);
  font-variant-numeric:tabular-nums;
}
.gen__body{
  flex:1; display:flex; align-items:center;
  padding:clamp(1.3rem,3vw,2.1rem);
}
.gen__out{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:var(--t-xl); line-height:.98; letter-spacing:-0.008em;
  margin:0; text-wrap:balance;
}
.gen__out--idle{
  font-family:var(--f-label); font-weight:600;
  font-size:var(--t-md); text-transform:none; letter-spacing:0;
  color:var(--on-pulp-dim);
}
.gen__out.is-rolling{ opacity:.4; }
@media (prefers-reduced-motion:no-preference){
  .gen__out{ transition:opacity .09s linear; }
}

/* --------------------------------------------------------------------------
   13. PÁGINAS INTERIORES (look inside)
   -------------------------------------------------------------------------- */
.spreads{ display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.spread{ margin:0; display:flex; flex-direction:column; }
.spread__img{ position:relative; display:block; cursor:zoom-in; border:0; padding:0; background:none; inline-size:100%; }
.spread__img img{ inline-size:100%; border-block-end:var(--rule) solid var(--ink); }
.spread__img::after{
  content:attr(data-zoomlabel);
  position:absolute; inset-block-end:.75rem; inset-inline-end:.75rem;
  background:var(--ink); color:var(--pulp);
  font-family:var(--f-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:var(--t-xs);
  padding:.28rem .6rem .18rem;
  opacity:0; transition:opacity var(--fast) var(--ease-out);
}
.spread__img:hover::after, .spread__img:focus-visible::after{ opacity:1; }
.spread figcaption{ padding:var(--s-3); }
.spread figcaption b{
  display:block; font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; font-size:var(--t-sm);
}
.spread figcaption em{
  display:block; font-style:normal; font-size:var(--t-sm);
  color:var(--on-pulp-dim); margin-block-start:.3rem;
}

/* --------------------------------------------------------------------------
   14. PLANNER
   -------------------------------------------------------------------------- */
.planner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.planner__art{ position:relative; display:grid; place-items:center; }
.planner__art img{
  inline-size:min(21rem,84%);
  border:var(--rule) solid var(--ink);
  box-shadow:12px 12px 0 oklch(0 0 0 / .4);
  transform:rotate(-2.5deg);
}
.planner__art .seal{ position:absolute; inset-inline-end:2%; inset-block-end:-.9rem; }
.planner__by{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-xs);
  opacity:.8; margin-block:var(--s-2) var(--s-3);
}
.feats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4); margin-block:var(--s-4) 0; list-style:none; }
.feats li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; }
.feats b{
  font-family:var(--f-display); font-weight:400; font-size:var(--t-md);
  line-height:1; color:var(--amber); font-variant-numeric:tabular-nums;
}
.feats strong{ display:block; font-weight:600; font-size:var(--t-base); line-height:1.3; }
.feats span{ display:block; font-size:var(--t-sm); opacity:.82; line-height:1.4; }

/* --------------------------------------------------------------------------
   15. PRENSA / FOTO
   -------------------------------------------------------------------------- */
.press{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,3rem); align-items:center; }
.press__img{ border:var(--rule) solid var(--ink); box-shadow:10px 10px 0 var(--ink); }

/* --------------------------------------------------------------------------
   16. MERCH
   -------------------------------------------------------------------------- */
.merch{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); }
.merch__art{
  aspect-ratio:1; display:grid; place-items:center; padding:var(--s-3);
  border-block-end:var(--rule) solid var(--ink);
  position:relative; overflow:hidden;
}
.merch__art img{
  max-block-size:100%; inline-size:auto;
  filter:drop-shadow(2px 3px 0 oklch(0 0 0 / .22));
  transition:transform var(--med) var(--ease-out-expo);
}
.merch:hover .merch__art img{ transform:none; }
.panel--link:hover .merch__art img{ transform:scale(1.06) rotate(-1.5deg); }
.m-bone{ background:var(--bone); }
.m-ink{ background:var(--ink); }
.m-teal{ background:var(--teal); }
.m-red{ background:var(--red-dk); }
.m-amber{ background:var(--amber); }
.m-paper{ background:var(--pulp-lo); }
.merch__body{ padding:var(--s-3); display:flex; flex-direction:column; gap:.3rem; flex:1; }
.merch__kind{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:var(--t-xs);
  color:var(--red);
}
.merch__body h3{ font-size:var(--t-base); }

/* --------------------------------------------------------------------------
   17. TARJETAS DE TEXTO (autor / editorial / newsletter)
   -------------------------------------------------------------------------- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); align-items:start; }
.prose{ max-width:68ch; }
.prose h2{ margin-block:0 var(--s-3); }
.prose ul{ padding-inline-start:1.15em; }
.prose li{ margin-block-end:.4em; }

.signup{ background:var(--ink); color:var(--pulp-hi); border-color:var(--pulp-hi); }
.signup h2{ color:var(--amber); }
.field{ display:flex; gap:var(--s-2); margin-block-start:var(--s-3); flex-wrap:wrap; }
.field input{
  flex:1 1 13rem; min-inline-size:0;
  padding:.85rem 1rem;
  border:var(--rule) solid var(--pulp-hi);
  background:oklch(1 0 0 / .06); color:var(--pulp-hi);
  font-family:var(--f-text); font-size:var(--t-base);
}
.field input::placeholder{ color:oklch(0.90 0.03 85 / .62); }
.field input:focus{ background:oklch(1 0 0 / .1); }
.smallprint{ font-size:var(--t-sm); color:var(--on-ink-dim); margin-block-start:var(--s-2); }
.smallprint.is-ok{ color:var(--amber); }
.smallprint.is-err{ color:oklch(0.72 0.15 32); }

/* --------------------------------------------------------------------------
   18. PÁGINA DE LIBRO
   -------------------------------------------------------------------------- */
.bookhero{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.bookhero__art{ position:relative; }
.bookhero__art img{
  inline-size:100%;
  border:var(--rule) solid var(--ink);
  box-shadow:12px 12px 0 oklch(0 0 0 / .42);
}
.bookhero h1{ font-size:var(--t-2xl); margin-block-end:var(--s-2); }
.bookhero__sub{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  font-size:var(--t-md); color:var(--amber); margin-block-end:var(--s-3);
}
.bookhero__tag{
  font-style:italic; font-size:var(--t-lg); line-height:1.35;
  color:var(--pulp); margin-block-end:var(--s-4); max-width:32ch;
}
.bookhero__body{ font-size:var(--t-md); color:var(--on-ink-dim); max-width:60ch; }
.bookhero__body strong{ color:var(--pulp); }
.bookhero__meta{
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4);
  align-items:center; margin-block:var(--s-4) 0;
  padding-block-start:var(--s-3);
  border-block-start:2px solid oklch(1 0 0 / .18);
}
.crumbs{
  font-family:var(--f-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:var(--t-xs);
  margin-block-end:var(--s-3); color:var(--on-ink-dim);
}
.crumbs a{ color:var(--amber); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

.alsogrid{ display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(10rem,100%),1fr)); }
.also__art{ border-block-end:var(--rule) solid var(--ink); background:var(--pulp-lo); position:relative; }
.also__body{ padding:var(--s-2) var(--s-3) var(--s-3); }
.also__body h3{ font-size:var(--t-base); }

/* --------------------------------------------------------------------------
   19. PIE
   -------------------------------------------------------------------------- */
.foot{
  background:oklch(0.135 0.010 68); color:var(--pulp);
  padding-block:var(--s-6) var(--s-4);
  border-block-start:var(--rule-thick) solid var(--ink-2);
}
.foot__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:var(--s-4); }
.foot img{ inline-size:5.5rem; margin-block-end:var(--s-2); }
.foot h2{
  font-family:var(--f-label); font-weight:700; line-height:1.2;
  text-transform:uppercase; letter-spacing:.13em; font-size:var(--t-sm);
  color:var(--amber); margin-block-end:var(--s-2);
}
.foot ul{ list-style:none; }
.foot a{
  display:block; text-decoration:none; font-size:var(--t-sm);
  padding-block:.25rem; color:var(--on-ink-dim);
  transition:color var(--fast) var(--ease-out);
}
.foot a:hover{ color:var(--amber); }
.foot p{ font-size:var(--t-sm); color:var(--on-ink-dim); max-width:34ch; }
.follow{ display:flex; align-items:center; gap:.6rem; margin-block-start:var(--s-3); flex-wrap:wrap; }
.follow a{
  display:grid; place-content:center;
  inline-size:2.5rem; block-size:2.5rem; padding:0; flex:none;
  border:2px solid var(--pulp); color:var(--pulp);
  transition:background var(--fast) var(--ease-out), color var(--fast) var(--ease-out),
             border-color var(--fast) var(--ease-out);
}
.follow a svg{ inline-size:1.25rem; block-size:1.25rem; }
.follow a:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
.foot p.foot__legal{
  border-block-start:1px solid oklch(1 0 0 / .16);
  margin-block-start:var(--s-5); padding-block-start:var(--s-3);
  font-size:var(--t-xs); color:oklch(0.68 0.02 84); max-width:70ch;
}
.foot__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-2);
  margin-block-start:var(--s-3); padding-block-start:var(--s-3);
  border-block-start:1px solid oklch(1 0 0 / .16);
  font-size:var(--t-xs); color:oklch(0.68 0.02 84);
}

/* --------------------------------------------------------------------------
   20. LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox{
  border:0; padding:0; max-inline-size:100vw; max-block-size:100dvh;
  inline-size:100%; block-size:100%; background:transparent; overflow:hidden;
}
.lightbox::backdrop{ background:oklch(0.12 0.01 68 / .93); }
.lightbox__in{
  display:grid; place-items:center; block-size:100%;
  padding:clamp(1rem,4vw,2.5rem);
}
.lightbox img{
  max-block-size:88dvh; inline-size:auto;
  border:var(--rule) solid var(--ink);
  box-shadow:0 0 0 5px oklch(0.90 0.055 86 / .2);
}
.lightbox__x{
  position:fixed; inset-block-start:1rem; inset-inline-end:1rem;
  inline-size:2.75rem; block-size:2.75rem;
  background:var(--pulp-hi); color:var(--ink);
  border:var(--rule) solid var(--ink); cursor:pointer;
  display:grid; place-content:center; font-size:1.1rem; line-height:1;
}
.lightbox__x:hover{ background:var(--red); color:var(--pulp-hi); }
@media (prefers-reduced-motion:no-preference){
  .lightbox[open]{ animation:lbin .22s var(--ease-out); }
  @keyframes lbin{ from{ opacity:0; } to{ opacity:1; } }
}

/* --------------------------------------------------------------------------
   21. MOVIMIENTO AL HACER SCROLL
   Regla clave: el contenido es visible POR DEFECTO. El JS añade .reveal-ready
   solo si hay soporte, así que si el JS falla no desaparece nada.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* Solo el JS marca .will-reveal, y solo en lo que está POR DEBAJO del
     pliegue al cargar. Nada que se vea de entrada se oculta nunca. */
  .will-reveal{
    opacity:0;
    transform:translateY(1.5rem);
  }
  .will-reveal.is-in{
    opacity:1; transform:none;
    transition:opacity .5s var(--ease-out), transform .62s var(--ease-out-expo);
    transition-delay:var(--reveal-delay,0ms);
  }
}
/* Al imprimir y en cualquier caso raro, el contenido se ve. */
@media print{ .will-reveal{ opacity:1 !important; transform:none !important; } }

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:60rem){          /* 960px */
  .hero__grid{ grid-template-columns:1fr; }
  .fan{ min-block-size:22rem; order:-1; }
  .gen{ grid-template-columns:1fr; }
  .planner{ grid-template-columns:1fr; }
  .press{ grid-template-columns:1fr; }
  .two{ grid-template-columns:1fr; }
  .bookhero{ grid-template-columns:1fr; }
  .bookhero__art{ max-inline-size:20rem; }
  .books--soon{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .navlinks{ display:none; }
  .navmenu{ display:block; }
}
@media (max-width:40rem){          /* 640px */
  :root{ --rule:2.5px; --rule-thick:4px; }
  .sec{ padding-block:var(--s-6); }

  /* la ficha destacada se apila: la portada arriba, el texto debajo */
  .book--lead{ flex-direction:column; }
  .book--lead .book__art{
    inline-size:100%;
    border-inline-end:0;
    border-block-end:var(--rule) solid var(--ink);
  }
  .book--lead .book__art img{ block-size:auto; object-fit:contain; }
  .book--lead .book__body{ padding:var(--s-3); }

  .books--soon{ grid-template-columns:1fr; }
  .book--rest{ flex-direction:row; }
  .book--rest .book__art{
    inline-size:7.5rem; flex:none;
    border-block-end:0; border-inline-end:var(--rule) solid var(--ink);
  }
  .book--rest .book__body{ padding:var(--s-3); }
  .book--rest .book__title h3{ font-size:var(--t-md); }
  .book--more{ min-block-size:9rem; }

  .feats{ grid-template-columns:1fr; }
  .fan__side{ display:none; }
  .fan__main{ inline-size:66%; }
  .fan{ min-block-size:19rem; }
  .seal{ inline-size:6.5rem; block-size:6.5rem; font-size:.68rem; }
  .seal b{ font-size:.95rem; }
  .foot__grid{ grid-template-columns:1fr; }
  .brand img{ inline-size:2.4rem; }
  .brand__txt{ font-size:1rem; }
  /* En móvil la barra se queda con lo esencial: marca, menú y comprar.
     Idioma y redes viven dentro del menú, que es donde se van a buscar. */
  .masthead .iconlink,
  .masthead .langtoggle{ display:none; }
  .masthead__in{ gap:.6rem; }
  .btnrow > .btn{ inline-size:100%; }
  .planner__art img{ inline-size:min(16rem,72%); }
  .lightbox__x{ inset-block-start:.6rem; inset-inline-end:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .ticker__track{ animation:none; transform:none; }
}

/* --------------------------------------------------------------------------
   23. IMPRESIÓN
   -------------------------------------------------------------------------- */
@media print{
  .masthead,.ticker,.lightbox,.gen,.follow{ display:none; }
  body{ background:#fff; color:#000; }
  .sec{ padding-block:1.5rem; border:0; background:#fff; color:#000; }
  .panel{ box-shadow:none; border:1px solid #000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; }
}