/* ==========================================================================
   BASE de los 5 heros "Foco" — dirección limpia, móvil primero.
   Se conserva EXACTO el tratamiento del titular (coral + plancha de tinta
   orbitando + sombra) y la identidad crema/tinta/coral. Todo lo demás,
   despejado: sin grafo, sin veladuras, sin lavados. Cada variante añade
   UN solo elemento de animación (definido en su propio archivo).
   ========================================================================== */
:root{
  --crema:#F2EDE3;
  --tinta:#0A0A0A;
  --coral:#D97757;
  --tinta-70:rgba(10,10,10,.72);
  --tinta-45:rgba(10,10,10,.46);
  --tinta-texto:rgba(10,10,10,.62);
  --coral-texto:#A35234;
  --coral-cuerpo:#A8472A;
  --regla:rgba(10,10,10,.16);
  --reg-x:0.055em;
  --reg-y:0.040em;
  --display:clamp(3.6rem, 1.8rem + 9vw, 9.5rem);
  --sub:clamp(1.5rem, 1rem + 2.4vw, 2.9rem);
  --deck:clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  --maxw:1180px;
  --gutter:clamp(1.4rem, 0.6rem + 3.4vw, 4.5rem);
  --orbita:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100svh; overflow-x:hidden;
}

/* Grano de papel: quieto y muy bajo (la textura queda, el ruido se va) */
body::after{
  content:""; position:fixed; inset:-60px; z-index:9; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

.sheet{
  position:relative; z-index:3;
  min-height:100svh; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:clamp(1.4rem,1rem+2vw,2.8rem) clamp(1.2rem,1rem+1.6vw,2.4rem);
  display:flex; flex-direction:column;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.masthead{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:"JetBrains Mono",monospace; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-70);
  padding-bottom:.9rem; border-bottom:1px solid var(--regla);
}
.masthead .right{color:var(--tinta-texto)}

.cover{ flex:1; display:flex; flex-direction:column; justify-content:center; padding-block:clamp(1.6rem,4vh,4rem) }

.kicker{
  font-family:"JetBrains Mono",monospace; font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--coral-texto); margin:0 0 clamp(1.2rem,3vh,2.4rem);
  display:inline-flex; align-items:center; gap:.8em;
}
.kicker::before{
  content:""; width:2.4em; height:1px; background:var(--coral); display:inline-block;
}

/* ---- El titular, INTACTO: coral protagonista + plancha de tinta orbitando ---- */
.title{
  position:relative; display:inline-block; margin:0;
  font-weight:700; font-size:var(--display); line-height:.92; letter-spacing:-.035em;
  max-width:14ch;
}
.title .plate{ display:block }
.plate-coral-top{
  position:relative; z-index:2; color:var(--coral);
  -webkit-text-stroke:.6px var(--tinta);
  paint-order:stroke fill;
  text-shadow:.5px .5px 0 var(--tinta), -.5px 0 0 rgba(10,10,10,.4);
}
.plate-ink-wrap{
  position:absolute; inset:0; z-index:1;
  transform:translate(var(--reg-x), var(--reg-y));
  animation:registro 1300ms cubic-bezier(.16,.84,.24,1) both,
            orbita 8.5s ease-in-out 1300ms infinite;
  will-change:transform;
}
.plate-ink{
  display:block; color:var(--tinta);
  filter:blur(.5px);
  animation:reentinta 10s ease-in-out 1300ms infinite;
  will-change:opacity, filter;
}
@keyframes registro{
  0%   { transform:translate(.28em,.20em) rotate(.4deg); opacity:0 }
  22%  { opacity:1 }
  100% { transform:translate(var(--reg-x), var(--reg-y)) rotate(0deg); opacity:1 }
}
@keyframes orbita{
  0%   { transform:translate(calc(var(--reg-x) + var(--orbita) * .55), calc(var(--reg-y) - var(--orbita) * .35)) rotate(.18deg) }
  20%  { transform:translate(calc(var(--reg-x) - var(--orbita) * .45), calc(var(--reg-y) - var(--orbita) * .70)) rotate(-.12deg) }
  40%  { transform:translate(calc(var(--reg-x) - var(--orbita) * .85), calc(var(--reg-y) + var(--orbita) * .30)) rotate(.16deg) }
  60%  { transform:translate(calc(var(--reg-x) - var(--orbita) * .25), calc(var(--reg-y) + var(--orbita) * .80)) rotate(-.18deg) }
  80%  { transform:translate(calc(var(--reg-x) + var(--orbita) * .70), calc(var(--reg-y) + var(--orbita) * .40)) rotate(.10deg) }
  100% { transform:translate(calc(var(--reg-x) + var(--orbita) * .55), calc(var(--reg-y) - var(--orbita) * .35)) rotate(.18deg) }
}
@keyframes reentinta{
  0%,100% { opacity:1;   filter:blur(.5px) saturate(1) }
  50%     { opacity:.8;  filter:blur(.8px) saturate(1.15) }
}

.subtitle{
  margin:clamp(.7rem,2vh,1.2rem) 0 0;
  font-size:var(--sub); line-height:1.04; letter-spacing:-.02em;
  font-weight:600; color:var(--tinta); max-width:16ch;
  text-wrap:balance;
}
.deck{
  margin:clamp(1.3rem,3.4vh,2.2rem) 0 0; max-width:42ch;
  font-size:var(--deck); line-height:1.5; color:var(--tinta-70); font-weight:400;
  text-wrap:pretty;
}
.deck b{ color:var(--tinta); font-weight:500 }
.deck .claude{ color:var(--coral-cuerpo); font-weight:500 }

.colofon-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.4rem,3vw,2.6rem); margin-top:clamp(2rem,5vh,3.4rem);
}
.lede-cta{ display:flex; flex-direction:column; gap:1.1rem }
.byline{ font-family:"JetBrains Mono",monospace; font-size:.82rem; letter-spacing:.04em; color:var(--tinta-70) }
.byline b{ color:var(--tinta); font-weight:500 }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem }
.read{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:500; font-size:1rem; text-decoration:none;
  color:var(--crema); background:var(--tinta); border:1px solid var(--tinta);
  padding:.92em 1.5em; border-radius:2px;
  box-shadow:8px 12px 30px -20px rgba(10,10,10,.6);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.read .price{ font-family:"JetBrains Mono",monospace; color:var(--coral); font-weight:500 }
.read:hover{ transform:translateY(-2px); box-shadow:10px 16px 40px -20px rgba(10,10,10,.65) }
.read:active{ transform:scale(.99) }
.index{
  font-weight:500; font-size:1rem; text-decoration:none; color:var(--tinta);
  border-bottom:1px solid var(--coral); padding-bottom:.18em;
  transition:border-bottom-width .2s;
}
.index:hover{ border-bottom-width:2px }
.index .arr{ color:var(--coral); display:inline-block }

.colofon{
  display:flex; align-items:flex-end; gap:.9rem;
  font-family:"JetBrains Mono",monospace; font-size:.7rem; line-height:1.5;
  letter-spacing:.04em; color:var(--tinta-45); text-align:right;
}
.colofon .lines{ display:flex; flex-direction:column; gap:.1rem }
.colofon .em{ color:var(--coral) }
.colofon .claude{ color:var(--coral-cuerpo) }
.regmark{ width:30px; height:30px; flex:none; transform:translateY(2px) }

:focus-visible{ outline:2px solid var(--coral); outline-offset:4px; border-radius:2px }
.legal{
  font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.03em;
  color:var(--tinta-texto); line-height:1.5; max-width:64ch;
  padding-top:1rem; border-top:1px solid var(--regla);
}
.legal .claude{ color:var(--coral-cuerpo) }

/* ---------- MÓVIL: una sola pantalla, sin ruido ---------- */
@media (max-width:720px){
  .title{ max-width:10ch }
  .subtitle{ max-width:none }
  .colofon-row{ align-items:flex-start; flex-direction:column; gap:1.2rem }
  .colofon{ display:none }              /* el sello editorial solo en desktop */
  :root{ --orbita:9px }
  .read{ width:100%; justify-content:center }   /* CTA de dedo, cómodo */
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .plate-ink-wrap{ animation:none; transform:translate(var(--reg-x), var(--reg-y)) }
  .plate-ink{ animation:none }
  .read,.index{ transition:none }
  .read:hover{ transform:none }
}