/* ==========================================================================
   Ediciones Cabo Suelto — web v3 «El cartel de las fiestas»
   base.css: tokens, reset, tipografía, componentes compartidos
   Dirección de arte: cartel de fiestas del pueblo (tipo de madera) ×
   expediente policial, sobre el anochecer. Diales: VARIANCE 8 / MOTION 7 /
   DENSITY 3 (skill design-taste-frontend).
   ========================================================================== */

/* ---- Fuentes self-hosted (OFL) ------------------------------------------ */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Special Elite";
  src:url("../fonts/special-elite-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* anochecer */
  --night:#0e1c22;          /* cielo profundo azul-verde */
  --night-2:#142831;        /* franja baja del cielo */
  --night-soft:#1d3540;     /* superficies elevadas sobre noche */
  --moon:#e9e4d2;           /* luna / texto principal sobre noche */
  --amber:#e8a84c;          /* ventana encendida — el color "vida" */
  --amber-soft:#f4c87a;
  --mist:#8fa3a3;           /* niebla / texto secundario sobre noche */

  /* expediente */
  --paper:#f2ecdc;          /* papel marfil */
  --paper-2:#e9e0c9;        /* papel sombreado */
  --card:#fffdf8;           /* cartulina de ficha (igual que los retratos) */
  --ink:#1f2f28;            /* tinta pino oscuro */
  --ink-soft:#3c5148;
  --pencil:#3a352c;         /* lápiz de la Reme */
  --muted-ink:#6f6754;      /* metadatos sobre papel */
  --hair:#d4c9ad;           /* hairlines sobre papel */

  /* sellos */
  --stamp:#9c3327;          /* oxblood, el sello del libro */
  --stamp-deep:#7c261d;

  --serif:"Anton","Arial Narrow",Impact,"Segoe UI",sans-serif; /* display cartel */
  --type:"Special Elite","Courier New",ui-monospace,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:1060px;
  --radius:10px;
}

/* ---- Reset --------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--night); color:var(--moon);
  font-family:var(--sans); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* grano de película, estático (nunca animar: coste de raster) */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--amber);color:var(--night)}

h1,h2,h3,.display{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:.015em}
h1,h2{text-transform:uppercase}
.type{font-family:var(--type)}
.mono-label{
  font-family:var(--type);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mist);
}
.paper .mono-label,.paper-page .mono-label{color:var(--muted-ink)}

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

/* ---- Nav ----------------------------------------------------------------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.2rem);
}
.nav .wordmark{
  font-family:var(--type);font-size:.8rem;letter-spacing:.26em;
  text-transform:uppercase;text-decoration:none;color:var(--moon);opacity:.92;
}
.nav ul{display:flex;gap:clamp(.9rem,2.5vw,1.8rem);list-style:none;align-items:center}
.nav ul a{
  font-size:.86rem;text-decoration:none;color:var(--mist);
  transition:color .25s;
}
.nav ul a:hover{color:var(--amber-soft)}
.nav ul a.nav-cta{
  color:var(--night);background:var(--amber);
  padding:.42rem .9rem;border-radius:6px;font-weight:600;
  transition:background .25s,transform .25s;
}
.nav ul a.nav-cta:hover{background:var(--amber-soft);transform:translateY(-1px)}
@media (max-width:560px){
  .nav ul li.hide-s{display:none}
}

/* ---- Botones ------------------------------------------------------------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:400;font-size:.95rem;
  font-family:var(--serif);text-transform:uppercase;letter-spacing:.07em;
  padding:.72rem 1.4rem;border-radius:7px;border:0;
  transition:transform .22s,background .22s,box-shadow .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-amber{background:var(--amber);color:var(--night);box-shadow:0 6px 22px rgba(232,168,76,.25)}
.btn-amber:hover{background:var(--amber-soft)}
.btn-ghost{background:transparent;color:var(--moon);border:1px solid var(--mist)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-soft)}
.btn-stamp{background:var(--stamp);color:#fdf6ea;box-shadow:0 6px 22px rgba(156,51,39,.3)}
.btn-stamp:hover{background:var(--stamp-deep)}

/* ---- Papel (documentos del expediente) ----------------------------------- */
.paper{
  background-color:var(--paper);color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.5);
  position:relative;
}
.paper::before{ /* borde superior tipo carpeta */
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  border:1px solid rgba(31,47,40,.14);pointer-events:none;
}
.paper-page{background:var(--paper);color:var(--ink)}

/* aire para que el clip (top:-13px) no pise el kicker de encima */
.wrap>.paper{margin-top:1.15rem}

/* tira de celo amarillento (sustituye al clip flotante) */
.clip{
  position:absolute;top:-9px;left:26px;width:78px;height:22px;
  background:rgba(228,214,164,.5);border:0;border-radius:2px;
  transform:rotate(-4deg);pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

/* mancha de café: cerco de taza realista (borde irregular por turbulencia) */
.coffee{
  position:absolute;width:120px;height:128px;pointer-events:none;border:0;
  transform:rotate(-7deg);
  background:url("../img/coffee.svg") no-repeat center/contain;
  mix-blend-mode:multiply;opacity:.9;
}

/* ---- Sello de tinta ------------------------------------------------------ */
.stamp{
  display:inline-block;font-family:var(--type);
  color:var(--stamp);border:3px solid var(--stamp);
  padding:.28rem .8rem;border-radius:6px;
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-5deg);position:relative;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .82 0'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .82 0'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;mask-size:cover;
}
/* estampado al entrar (se activa con .in desde JS) */
.stamp-hit{opacity:0;transform:rotate(-5deg) scale(1.7)}
.in .stamp-hit,.stamp-hit.in{
  opacity:1;transform:rotate(-5deg) scale(1);
  transition:transform .38s cubic-bezier(.2,1.6,.35,1),opacity .22s;
}

/* ---- Reveal on scroll ---------------------------------------------------- */
.rev{opacity:0;transform:translateY(26px)}
.rev.in{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.3,1);
}
.rev-doc{opacity:0;transform:translateY(-14px) rotate(var(--tilt,-1.2deg)) scale(1.04)}
.rev-doc.in{
  opacity:1;transform:rotate(var(--tilt,-1.2deg)) scale(1);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,1.3,.4,1);
}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.3s}

/* ---- Secciones ----------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.sec{padding:clamp(3.4rem,8vw,6.2rem) 0;position:relative}
.sec-title{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.5rem 0 1rem}
.kicker{margin-bottom:.4rem}

/* ---- Rejilla de deducción (compartida home attract + caso jugable) ------- */
.grid-wrap{overflow-x:auto}
table.lgrid{border-collapse:collapse;margin:0 auto}
table.lgrid th,table.lgrid td{border:1.5px solid var(--ink-soft)}
table.lgrid th{
  font-family:var(--type);font-weight:400;font-size:.72rem;
  color:var(--ink);padding:.3rem .45rem;background:var(--paper-2);
}
table.lgrid th.rot{
  vertical-align:bottom;padding:.5rem .2rem;height:98px;min-width:40px;
}
table.lgrid th.rot span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:inline-block;max-height:90px;
}
table.lgrid th.rh{text-align:right;padding:.3rem .55rem;min-width:104px}
table.lgrid td.cell{
  width:44px;height:44px;text-align:center;vertical-align:middle;
  font-size:1.25rem;line-height:1;background:var(--card);
  transition:background .3s,color .3s;
}
table.lgrid td.gap{border:0;background:transparent}
table.lgrid td.cell.x{color:var(--pencil)}
table.lgrid td.cell.x::after{content:"✗"}
table.lgrid td.cell.v{color:var(--stamp);font-weight:700;background:#f8f2e2}
table.lgrid td.cell.v::after{content:"✓"}

/* ---- Footer -------------------------------------------------------------- */
footer{
  border-top:1px solid rgba(143,163,163,.18);
  padding:2.6rem 0 3rem;margin-top:clamp(2rem,6vw,4rem);
}
footer .cols{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
footer .fine{font-size:.8rem;color:var(--mist);max-width:44ch}
footer a{color:var(--mist);transition:color .25s}
footer a:hover{color:var(--amber-soft)}
.padron{
  border:1px dashed rgba(143,163,163,.4);border-radius:var(--radius);
  padding:1rem 1.2rem;max-width:34ch;
}
.padron .mono-label{color:var(--amber)}
.padron p{font-size:.85rem;color:var(--mist);margin-top:.3rem}

/* ---- Accesibilidad: reduced motion --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rev,.rev-doc,.stamp-hit{opacity:1 !important;transform:none !important}
  .rev-doc{transform:rotate(var(--tilt,-1.2deg)) !important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}