/* fonik · sistema visual
   Idea: el plato (el de la carta y el del tocadiscos) es el único motivo. Todo lo que gira,
   se elige o se sella es un disco. Papel frío, una tinta azul marino, botones planos y redondos. */
@font-face{font-family:"Pilcrow Rounded";src:url(../assets/fonts/pilcrow-rounded-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pilcrow Rounded";src:url(../assets/fonts/pilcrow-rounded-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Pilcrow Rounded";src:url(../assets/fonts/pilcrow-rounded-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* color: un papel, una tinta, un acento (el amarillo de las bandejas de fonik) */
  --bg:#f3f5f7;
  --surface:#e3e7ed;
  --ink:#13223f;
  --muted:#4a5674;
  --accent:#f8cf4b;
  --accent-ink:#13223f;
  /* la banda invertida: tinta como fondo */
  --field:#13223f;
  --field-ink:#f3f5f7;
  --field-surface:#22345c;
  --field-muted:#b3bdd4;
  /* el color del disco que hay en pantalla (lo cambia la carta) */
  --pc:#f8cf4b;
  /* tipo: una familia, cinco tamaños */
  --font:"Pilcrow Rounded","Trebuchet MS","Helvetica Neue",Arial,sans-serif;
  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.25rem,1.3rem + 3.6vw,4.25rem);
  --step-display:clamp(2.875rem,1rem + 8.4vw,9rem);
  /* marco */
  --m:clamp(20px,4vw,72px);
  --top:calc(64px + env(safe-area-inset-top,0px));
  --sb:env(safe-area-inset-bottom,0px);
  /* movimiento */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-exit:cubic-bezier(.55,.055,.675,.19);
  --t-press:140ms;
  --t-hover:180ms;
  --t-ui:240ms;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--font);font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img,video,canvas,svg{display:block}
img{max-width:100%;height:auto;-webkit-user-drag:none;user-select:none}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.07em}
ul,ol{list-style:none}
table{border-collapse:collapse}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* titulares: minúsculas, apretados, dos líneas como mucho */
.disp,.head{font-family:var(--font);font-weight:700;text-transform:lowercase;text-wrap:balance;hyphens:none}
.disp{font-size:var(--step-display);line-height:.92;letter-spacing:-.05em;margin-left:-.04em}
.head{font-size:var(--step-head);line-height:.96;letter-spacing:-.04em;margin-left:-.03em}
.big{font-size:min(var(--step-display),11.6vw,14svh);line-height:.92;letter-spacing:-.05em;margin-left:-.04em}
.lead{font-size:var(--step-lead);line-height:1.35;max-width:40ch;text-wrap:pretty}
.small{font-size:var(--step-small);line-height:1.45}
.muted{color:var(--muted)}
p{text-wrap:pretty}

/* botones: planos, un relleno, redondos del todo */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 1.45em;border-radius:999px;background:var(--surface);color:var(--ink);font:500 var(--step-body)/1 var(--font);text-decoration:none;white-space:nowrap;transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--ink);color:var(--bg)}
.btn.wide{width:100%}
.btn[disabled]{cursor:default}
.rb{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--surface);color:var(--ink);transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.rb svg{width:22px;height:22px}
.rb:active{transform:scale(.94)}
.tb{font:500 var(--step-body)/1 var(--font);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:.08em;min-height:44px;padding:0 .2em}
@media (hover:hover){
  .btn:hover,.rb:hover{background:var(--ink);color:var(--bg)}
  .btn.pri:hover{background:var(--pc);color:var(--ink)}
}
/* sobre la banda de tinta */
.field{background:var(--field);color:var(--field-ink)}
.field .muted{color:var(--field-muted)}
.field .btn,.field .rb{background:var(--field-surface);color:var(--field-ink)}
.field .btn.pri{background:var(--field-ink);color:var(--field)}
@media (hover:hover){
  .field .btn:hover,.field .rb:hover{background:var(--field-ink);color:var(--field)}
  .field .btn.pri:hover{background:var(--accent);color:var(--accent-ink)}
}

/* campos: bloques rellenos, etiqueta encima */
.fld{display:block}
.fld>span{display:block;font:500 var(--step-small)/1.3 var(--font);margin-bottom:8px}
.fld input,.fld textarea{display:block;width:100%;min-height:54px;padding:0 22px;border:0;border-radius:27px;background:var(--surface);color:var(--ink);font:400 var(--step-body)/1.3 var(--font)}
.fld textarea{padding:16px 22px;min-height:112px;resize:none}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:1}
.fld input:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:var(--step-small);line-height:1.45}
.chk input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--ink)}

/* el selector de dos o tres opciones */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface)}
.seg button{min-height:44px;padding:0 1.05em;border-radius:999px;font:500 var(--step-body)/1 var(--font);color:var(--muted);white-space:nowrap;transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.seg button[aria-pressed="true"]{background:var(--pc);color:var(--ink)}

/* aviso breve */
.toast{position:fixed;left:50%;bottom:calc(22px + var(--sb));z-index:95;max-width:calc(100vw - 2*var(--m));padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 var(--step-small)/1.3 var(--font);text-align:center;transform:translate(-50%,14px);opacity:0;pointer-events:none;transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
.toast.on{opacity:1;transform:translate(-50%,0)}
body[data-hdr="track"] .toast,body[data-hdr="cupones"] .toast,body[data-hdr="fin"] .toast{background:var(--field-ink);color:var(--field)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}