/* ── base.css — compartido por todas las páginas del sitio ──
   Tokens, grilla, nav, footer, reveal, velo y layout de casos.
   Las páginas agregan su CSS específico en un <style> propio. */

:root{
  --papel:#fafaf8;
  --papel-2:#ffffff;
  --tinta:#141414;
  --tinta-2:#565b5e;
  --tinta-3:#6d7277; /* 4.65:1 sobre papel — AA para el texto meta de 10.5–12px */
  --grid-fina:rgba(20,20,20,.045);
  --grid-mayor:rgba(20,20,20,.09);
  --borde:#141414;
  --u:8px;                 /* unidad de espaciado */
  --g:16px;                /* módulo de la grilla de fondo */
  --cell:16px;             /* celda de la retícula = 1 cuadrito de la grilla */
  --maxw:1040px;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.25,1);
}
[data-theme="dark"]{
  --papel:#101012;
  --papel-2:#17171a;
  --tinta:#f0efec;
  --tinta-2:#a8aaac;
  --tinta-3:#7f8286; /* 4.92:1 sobre papel, 4.63:1 sobre papel-2 */
  --grid-fina:rgba(240,239,236,.05);
  --grid-mayor:rgba(240,239,236,.11);
  --borde:#f0efec;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* anillo de foco unificado: la misma convención sol que ya usan las demos */
:focus-visible{outline:2px solid #facc15;outline-offset:2px}
body{
  font-family:var(--sans);
  background-color:var(--papel);
  /* papel milimetrado: UN tile SVG de 64px (fina cada 16, mayor al borde).
     Vectorial a propósito: los gradientes CSS se redondean tile a tile y
     la grilla deriva respecto a las celdas con zoom/escala fraccional. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 0v64M32 0v64M48 0v64M0 16h64M0 32h64M0 48h64' stroke='rgba(20,20,20,.045)'/%3E%3Cpath d='M.5 0v64M0 .5h64' stroke='rgba(20,20,20,.09)'/%3E%3C/svg%3E");
  background-size:calc(var(--g)*4) calc(var(--g)*4);
  color:var(--tinta);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s,color .25s;
}
[data-theme="dark"] body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 0v64M32 0v64M48 0v64M0 16h64M0 32h64M0 48h64' stroke='rgba(240,239,236,.05)'/%3E%3Cpath d='M.5 0v64M0 .5h64' stroke='rgba(240,239,236,.11)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit}
::selection{background:#facc15;color:#141414}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.4px;font-variant-numeric:tabular-nums}

/* ── nav ─────────────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grid-mayor);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:56px}
.mark{
  font-weight:700;font-size:15px;letter-spacing:-.5px;text-decoration:none;
  display:grid;place-items:center;width:32px;height:32px;
  background:#facc15;color:#141414;
  animation:oc-parpadeo .85s steps(1,end);
}
/* al cargar cada página, el monograma parpadea por la paleta cálida del
   detalle (misma de la retícula del hero) y asienta en sol. Cortes duros
   a propósito; reduced-motion lo anula globalmente. */
@keyframes oc-parpadeo{
  0%{background:#f59e0b}
  14%{background:#f43f5e}
  28%{background:#fde68a}
  42%{background:#f97316}
  56%{background:#c2410c;color:#fde68a}
  70%{background:#fde68a}
  84%,100%{background:#facc15}
}
.nav-r{display:flex;align-items:center;gap:20px}
.nav-r > a{font-size:13.5px;font-weight:500;color:var(--tinta-2);text-decoration:none;transition:color .15s}
.nav-r > a:hover{color:var(--tinta)}
.lang{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);user-select:none}
.lang b{color:var(--tinta);font-weight:600}
.lang a{color:var(--tinta-3);text-decoration:none;transition:color .15s}
.lang a:hover{color:var(--tinta)}
.theme-btn{
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--grid-mayor);border-radius:50%;
  color:var(--tinta);transition:transform .3s var(--ease);
}
.theme-btn:hover{transform:rotate(40deg)}
.theme-btn svg{width:15px;height:15px}
[data-theme="light"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:none}
.gh{display:grid;place-items:center;color:var(--tinta-2);transition:color .15s}
.gh:hover{color:var(--tinta)}
.gh svg{width:17px;height:17px}

/* ── footer ──────────────────────────────────────────── */
footer{padding:calc(var(--u)*4) 0 calc(var(--u)*5)}
.foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--tinta-3)}

/* ── reveal al scroll ────────────────────────────────── */
.rv{opacity:0;transform:translateY(calc(var(--u)*2));transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ── layout de páginas de caso ───────────────────────── */
.cab{padding:calc(var(--u)*12) 0 calc(var(--u)*6)}
.miga{color:var(--tinta-3);display:block;margin-bottom:calc(var(--u)*4)}
.miga a{text-decoration:none;color:var(--tinta-3);transition:color .15s}
.miga a:hover{color:var(--tinta)}
.cab h1{font-size:clamp(34px,5.6vw,58px);letter-spacing:-.035em;font-weight:700;line-height:1.06}
/* marcador tipo plumón en titulares de caso — versión estática del
   .marca del home (la animación de pintado es exclusiva del hero) */
.cab h1 .marca{
  background:#facc15;color:#141414;padding:0 .08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.baja{margin-top:calc(var(--u)*3);font-size:18px;color:var(--tinta-2);max-width:56ch}

/* columnas explícitas: el truco de bordes (gap 1px sobre fondo borde) exige
   filas siempre llenas — auto-fit dejaba 3+1 en tablet y pintaba el hueco */
.ficha{
  margin:calc(var(--u)*6) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--borde);border:1px solid var(--borde);
}
@media(max-width:800px){.ficha{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.ficha{grid-template-columns:1fr}}
.ficha>div{background:var(--papel-2);padding:16px}
.ficha .k{font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tinta-3)}
.ficha .v{margin-top:4px;font-size:15px;font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums}

/* .cuerpo convive con .wrap en el mismo div: el padding lateral debe
   repetirse aquí — el shorthand con 0 pisaría el 24px de .wrap (misma
   especificidad, esta regla va después en la hoja) */
.cuerpo{padding:calc(var(--u)*8) 24px calc(var(--u)*10)}
.cuerpo.wrap{max-width:880px}
.bloque{margin-bottom:calc(var(--u)*9)}
.bloque:last-child{margin-bottom:0}
.b-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:calc(var(--u)*2);
}
.bloque h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.03em;font-weight:650;line-height:1.15;max-width:24ch}
.bloque p{margin-top:calc(var(--u)*2);color:var(--tinta-2);max-width:62ch}
.bloque p b{color:var(--tinta);font-weight:600}
.bloque ul{margin-top:calc(var(--u)*2);list-style:none}
.bloque li{position:relative;padding-left:16px;margin-bottom:8px;color:var(--tinta-2);max-width:60ch}
.bloque li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:#facc15}
.bloque li b{color:var(--tinta);font-weight:600}
.bloque code{font-family:var(--mono);font-size:.85em}

.dato{
  margin-top:calc(var(--u)*3);
  border-left:3px solid #facc15;padding:8px 0 8px 16px;
  font-size:18px;color:var(--tinta);max-width:56ch;
}
.dato .mono{color:var(--tinta-3);display:block;margin-top:8px}

figure{
  margin-top:calc(var(--u)*4);
  background:var(--papel-2);border:1px solid var(--borde);
}
figure .ph{
  aspect-ratio:16/9;display:grid;place-items:center;
  color:var(--tinta-3);font-family:var(--mono);font-size:12.5px;letter-spacing:.6px;
  text-align:center;padding:20px;
}
figure img{display:block;width:100%}
figcaption{
  font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);
  padding:12px 16px;border-top:1px solid var(--grid-mayor);
}

/* notas mono bajo la ficha de un caso (caso en curso, pacto de demos) */
.cab .nota-ficha{display:block;margin-top:calc(var(--u)*3);color:var(--tinta-3)}
.cab .nota-ficha + .nota-ficha{margin-top:calc(var(--u)*1)}

.sig{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:calc(var(--u)*5) 0 calc(var(--u)*2);
}
.sig a{
  text-decoration:none;font-weight:650;font-size:clamp(18px,2.6vw,24px);letter-spacing:-.025em;
  display:inline-flex;align-items:baseline;gap:8px;
}
.sig a:hover{text-decoration:underline;text-decoration-color:#facc15;text-decoration-thickness:3px}
.sig .mono{color:var(--tinta-3)}

/* ── hilo de sección: orientación en casos largos ──────
   Barra fija bajo el nav que nombra la sección actual mientras
   se scrollea un caso. La inyecta base.js solo si hay .bloque. */
.seccion-hilo{
  position:fixed;top:56px;left:0;right:0;z-index:40;
  background:color-mix(in srgb,var(--papel) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--grid-mayor);
  padding:8px 0;
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.seccion-hilo.on{opacity:1;transform:none}
.seccion-hilo .mono{color:var(--tinta-3);letter-spacing:1px;text-transform:uppercase}

/* ── el velo: cortina de acceso a los casos ──────────── */
#velo{
  position:fixed;inset:0;z-index:100;
  background-color:var(--papel);
  display:grid;place-items:center;padding:24px;
}
.velo-caja{max-width:420px;width:100%}
.velo-caja .mono{color:var(--tinta-3);display:block;margin-bottom:16px}
.velo-caja .velo-t{font-size:clamp(24px,4vw,34px);letter-spacing:-.03em;font-weight:650;color:var(--tinta);margin-top:0}
.velo-caja p{margin-top:12px;color:var(--tinta-2);font-size:15px}
.velo-caja p a{color:var(--tinta)}
.velo-form{margin-top:24px;display:flex;gap:8px}
.velo-form input{
  flex:1;font-family:var(--mono);font-size:15px;letter-spacing:1px;
  background:transparent;border:0;border-bottom:2px solid var(--tinta);
  color:var(--tinta);padding:8px 2px;outline:none;
}
.velo-form input:focus{border-color:#facc15}
.velo-form button{
  font:inherit;font-weight:650;font-size:13.5px;cursor:pointer;
  background:#facc15;color:#141414;border:0;padding:12px 16px;
}
.velo-error{
  margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;
  color:#f43f5e;min-height:16px;
}
body.abierto #velo{display:none}
body.velado:not(.abierto) main,body.velado:not(.abierto) footer{display:none}

/* ── responsive y accesibilidad ──────────────────────── */
@media (max-width:640px){
  .nav-r{gap:16px}
  .nav-r > a{display:none} /* single page / casos: en móvil se navega scrolleando o por la marca */
  .lang{display:inline}    /* el toggle de idioma sí sobrevive en móvil */
  .mark{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}