/* Estilo BeFun (skill befun-design): Roc vía kit Adobe con respaldo Anton + Archivo, kerning intacto,
   cajas planas sin borde ni sombra (8px), títulos a 0.88 con Roc / 0.96 con Anton, movimiento 220ms. */
:root{
  --ink:#111111; --box-dark:#262624; --box-light:#F0F0EE; --ink-3:#2C2C2A;
  --yellow:#FFE102; --yellow-deep:#F5C400;
  --white:#FFFFFF; --muted:#A8A8A0; --soft:#E6E6E1;
  --danger:#E5484D;
  --f-disp:"roc-grotesk-compressed","Anton",Impact,"Arial Narrow",sans-serif;
  --f-body:"roc-grotesk","Archivo",Arial,system-ui,sans-serif;
  --lh-title:.96; --w-title:400;
  --r:8px; --ease:cubic-bezier(.2,.8,.2,1); --dur:220ms;
  color-scheme:dark;
}
html.roc{--lh-title:.88; --w-title:700}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html,body{background:var(--ink);color:var(--white)}
body{font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
button{font:inherit;color:inherit}
.wrap{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* barra superior */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ink)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logos{display:flex;align-items:center;gap:12px;min-width:0}
.bar img{height:48px;width:auto;display:block}
.bar img.nba{height:38px}
.logos .x{color:var(--muted);font-weight:700;font-size:14px}
.clock{font-family:var(--f-disp);font-weight:var(--w-title);font-size:30px;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:4px}
.clock small{font-family:var(--f-body);font-size:14px;font-weight:700;color:var(--muted)}
.progress{height:4px;background:var(--box-dark)}
.progress i{display:block;height:100%;width:0;background:var(--yellow);transition:width var(--dur) var(--ease)}

/* pantallas */
main{padding-block:24px 120px}
.screen{display:flex;flex-direction:column;gap:20px;animation:in var(--dur) var(--ease)}
@keyframes in{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}.progress i,.opt,.btn,.dot,.kvpick{transition:none}}
.eyebrow{font-weight:700;font-size:13px;text-transform:uppercase;color:var(--yellow)}
h1,h2{font-family:var(--f-disp);font-weight:var(--w-title);text-transform:uppercase;line-height:var(--lh-title);margin:0;text-wrap:balance}
h1{font-size:clamp(56px,16vw,104px)}
h2{font-size:clamp(36px,9vw,56px)}
.lead{font-size:18px;color:var(--soft);max-width:52ch;margin:0}
.help{font-size:14px;color:var(--muted);margin:-8px 0 0}
.fine{font-size:13px;color:var(--muted);margin:0}

/* portada */
.hero{position:relative;border-radius:var(--r);background:var(--yellow);color:var(--ink);padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.hero .nba-hero{position:absolute;top:20px;right:20px;height:84px;width:auto}
.hero .eyebrow,.hero h1{padding-right:64px}
.hero .eyebrow,.hero .lead{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:0;padding:6px 10px;font-weight:700;font-size:13px;text-transform:uppercase;background:var(--ink);color:var(--yellow)}

/* banderas */
.flag{flex:none;display:inline-block;width:27px;height:18px;border-radius:2px;overflow:hidden;line-height:0}
.flag svg{width:100%;height:100%;display:block}

/* opciones */
.opts{display:grid;gap:8px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--box-dark);border:0;border-radius:var(--r);padding:15px 16px;cursor:pointer;font-size:17px;font-weight:700;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.opt:hover{transform:translateY(-2px)}
.opt:active{transform:scale(.98)}
.opt:focus-visible,.dot:focus-visible,.btn:focus-visible,.kvpick:focus-visible,.zoom:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.opt .mark{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--muted);display:grid;place-items:center}
.opt.multi .mark{border-radius:4px}
.opt[aria-checked="true"]{background:var(--yellow);color:var(--ink)}
.opt[aria-checked="true"] .mark{background:var(--ink);border-color:var(--ink)}
.opt[aria-checked="true"] .mark::after{content:"";width:10px;height:6px;border:solid var(--yellow);border-width:0 0 3px 3px;transform:translateY(-1px) rotate(-45deg)}
.opt[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.other{margin-top:4px;width:100%;background:var(--box-light);border:0;border-radius:var(--r);padding:14px;color:var(--ink);font:inherit}
.other:focus{outline:3px solid var(--yellow);outline-offset:0}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:14px;text-transform:uppercase;color:var(--muted)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--soft);cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--yellow)}

/* contexto de la pregunta de precio: caja clara con etiquetas rectas */
.context{border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--box-light);color:var(--ink)}
.context p{margin:0;font-size:17px;line-height:1.5}
.context .facts{display:flex;flex-wrap:wrap;gap:8px}
.context .facts span{background:var(--ink);color:var(--yellow);border-radius:0;padding:4px 10px;font-weight:700;font-size:13px;text-transform:uppercase}

/* KV: tarjetas planas que alternan oscuro / claro */
.kvlist{display:grid;gap:12px}
.kv{--bx:var(--box-dark);--fg:var(--white);--sub:var(--muted);--ctl:var(--ink);background:var(--bx);color:var(--fg);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:12px}
.kv:nth-child(even){--bx:var(--box-light);--fg:var(--ink);--sub:#4A4A48;--ctl:var(--white)}
.kv-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kv-tag{font-family:var(--f-disp);font-weight:var(--w-title);font-size:28px;line-height:1;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.kv-tag b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:22px;font-weight:var(--w-title)}
.zoom{background:var(--ctl);color:var(--fg);border:0;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer}
.frame{position:relative;border-radius:6px;overflow:hidden;background:var(--ink-3);aspect-ratio:3/4;max-width:100%}
.frame.sm{width:min(100%,300px);margin-inline:auto}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--box-dark)}
.ph span{font-family:var(--f-disp);font-weight:var(--w-title);font-size:44px;text-transform:uppercase;color:var(--yellow);text-align:center;line-height:var(--lh-title)}
.ph small{display:block;font-family:var(--f-body);font-weight:700;font-size:12px;color:var(--muted);margin-top:8px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dot{aspect-ratio:1;max-width:100%;border-radius:50%;border:0;background:var(--ctl);color:var(--fg);font-family:var(--f-disp);font-weight:var(--w-title);font-size:26px;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.dot:hover{transform:translateY(-2px)}
.dot[aria-checked="true"]{background:var(--yellow);color:var(--ink)}
.ends{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);text-transform:uppercase;font-weight:700}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg .opt{justify-content:center;padding:12px 6px;font-size:15px;background:var(--ctl);color:var(--fg)}
.seg .opt[aria-checked="true"]{background:var(--yellow);color:var(--ink)}
.seg .opt .mark{display:none}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kvpick{position:relative;background:var(--box-dark);border:0;border-radius:var(--r);padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:8px;text-align:left;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.kvpick:hover{transform:translateY(-2px)}
.kvpick[aria-checked="true"]{background:var(--yellow);color:var(--ink)}
.kvpick .kv-tag{font-size:24px;padding:2px 4px 4px}
.kvpick .kv-tag b{width:28px;height:28px;font-size:18px}
.kvpick[aria-checked="true"] .kv-tag b{background:var(--ink);color:var(--yellow)}

/* navegación */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:linear-gradient(transparent,var(--ink) 30%);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav .wrap{display:flex;gap:10px;padding-block:22px 16px}
.btn{border:0;border-radius:999px;padding:16px 22px;font-weight:900;font-size:16px;text-transform:uppercase;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn.primary{flex:1;background:var(--yellow);color:var(--ink)}
.btn.primary[aria-disabled="true"]{background:var(--ink-3);color:var(--muted);cursor:not-allowed;transform:none}
.btn.ghost{background:var(--box-dark);color:var(--white)}
.err{color:var(--danger);font-weight:700;font-size:14px;min-height:1.4em;margin:0}

/* gracias */
.done{align-items:flex-start}
.done .stickers{display:flex;align-items:center}
.done .stickers img{width:120px;height:auto}
.done .stickers img+img{margin-left:-28px;transform:rotate(8deg)}

/* ampliar KV */
.lb{position:fixed;inset:0;z-index:20;background:rgba(10,10,10,.94);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb img{max-height:86vh;max-width:100%;border-radius:var(--r)}
.lb .ph{position:static;width:min(420px,90vw);aspect-ratio:3/4;border-radius:var(--r)}
.lb button{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px))}