/* Base: reset, tipografía general, botones, campos de formulario, barra CMYK,
   encabezado, nav, marca y pie de página. Usa solo variables de tokens.css. */

/* Reset mínimo de arranque (antes era un <style> suelto en el <head>) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:max(16px,4vw)}

/* Texto dentro de las piezas dibujadas (SVG de muestra) */
.sd{font-family:var(--display);font-weight:800;font-stretch:62%}
.sm{font-family:var(--mono);font-weight:500}
.st{font-family:var(--mono);fill:#16244F;font-size:9px;letter-spacing:.08em}
.shadow{fill:#000;opacity:.14}

/* Barra CMYK + encabezado */
.cmyk-bar{display:grid;grid-template-columns:repeat(4,1fr);height:4px}
.cmyk-bar i:nth-child(1){background:var(--c)}
.cmyk-bar i:nth-child(2){background:var(--m)}
.cmyk-bar i:nth-child(3){background:var(--y)}
.cmyk-bar i:nth-child(4){background:var(--o)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--bg);border-bottom:1px solid var(--line)}
.head-act{display:flex;align-items:center;gap:10px}
.tema{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;cursor:pointer;
  border:1.5px solid var(--fg);border-radius:var(--radius);background:transparent;color:var(--fg);
  font:600 .875rem/1 var(--body)}
.tema:hover{background:var(--fg);color:var(--bg)}
.tema svg{width:18px;height:18px;flex:none}
.tema-txt{display:none}
@media(min-width:520px){.tema-txt{display:inline}}

/* Bandas de color planas */
.band{background:var(--band-bg);color:var(--band-fg)}
.band-hero{--band-bg:var(--hero-bg);--band-fg:var(--hero-fg);--band-muted:var(--hero-muted);--band-line:var(--hero-line)}
.band-cyan{--band-bg:var(--cyan-bg);--band-fg:var(--cyan-fg);--band-muted:var(--cyan-muted);--band-line:var(--cyan-line)}
.band-pink{--band-bg:var(--pink-bg);--band-fg:var(--pink-fg);--band-muted:var(--pink-muted);--band-line:var(--pink-line)}
.lista,.calc,.ficha,.pedido{color:var(--fg)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  font:800 1.3rem/1 var(--display);font-stretch:72%;letter-spacing:.01em;text-transform:uppercase}
.brand-mark{width:48px;height:48px;flex:none;border-radius:10px;border:1px solid var(--line);
  background:#F0EFEA url("../img/logo-th.jpg") center/cover no-repeat}
.nav{display:none;gap:28px}
.nav a{text-decoration:none;font:500 .9375rem var(--body);color:var(--muted);padding-block:8px}
.nav a:hover{color:var(--fg)}
@media(min-width:760px){.nav{display:flex}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border-radius:var(--radius);border:1.5px solid transparent;text-decoration:none;cursor:pointer;
  font:600 1rem/1 var(--body);transition:background .15s,color .15s,filter .15s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn-sm{min-height:38px;padding:0 14px;font-size:.9375rem}
.hero .btn-primary{background:var(--y);color:var(--ink)}
.hero .btn-ghost{color:var(--band-fg);border-color:var(--band-fg)}
.hero .btn-ghost:hover{background:var(--band-fg);color:var(--band-bg)}

/* Formularios genéricos */
.field{display:grid;gap:6px;min-width:0}
label,.label{font:600 .875rem/1.3 var(--body)}
label .mono{font-weight:400;font-size:.75rem;color:var(--muted)}
input,select,textarea{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);color:var(--fg);font:inherit}
textarea{resize:vertical;min-height:96px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}

/* Pie */
.foot-in{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;padding-block:28px}
.foot-in p{font:400 .75rem/1.5 var(--mono);color:var(--muted);max-width:64ch}
.site-foot{background:var(--foot-bg);color:#ECEFF2}
.site-foot .foot-in p{color:#9AA5B1}

/* Aviso que se muestra si no se pudo cargar data/datos.json */
.aviso-datos{background:var(--accent);color:var(--on-accent);text-align:center;
  padding:12px 16px;font:600 .9375rem/1.4 var(--body)}
.aviso-datos a{text-decoration:underline}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}