/* ==========================================================
   Café Bar Fussion — estilos base
   Concepto: un viaje Caracas → Molina de Segura.
   Pase de embarque (hero), sellos (club), medalla (ruta de la tapa).
   Rutas relativas: funciona en /WEB_FUSION/ (XAMPP) y en la raíz (Netlify).
   ========================================================== */

@font-face{font-family:"Unbounded";font-weight:600;font-display:swap;src:url("../fonts/unbounded-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-weight:800;font-display:swap;src:url("../fonts/unbounded-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:800;font-display:swap;src:url("../fonts/figtree-latin-800-normal.woff2") format("woff2")}

:root{
  /* paleta del logo + cartas aéreas */
  --teal:#0B3B3C;
  --mint:#EAF3EE;
  --leaf:#6FB36B;
  --lime:#D4D14F;
  --saffron:#FFC62E;
  --red:#E5483A;
  --blue:#2D5FA8;

  /* tokens semánticos (los temas sobreescriben estos) */
  --bg:var(--mint);
  --fg:var(--teal);
  --muted:color-mix(in srgb,var(--fg) 62%,transparent);
  --line:color-mix(in srgb,var(--fg) 18%,transparent);
  --surface:#fff;
  --hero-bg:var(--teal);
  --hero-fg:var(--mint);
  --accent:var(--saffron);
  --accent-fg:var(--teal);
  --band-bg:var(--saffron);
  --band-fg:var(--teal);
  --build-bg:#D9EBD3;
  --build-fg:var(--teal);
  --club-bg:var(--blue);
  --club-fg:#fff;
  --foot-bg:var(--teal);
  --foot-fg:var(--mint);
  --ve:#C4372A;
  --es:#B97A00;
  --fu:#1B7F6B;

  --font-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:18px;
  --gutter:clamp(16px,5vw,40px);
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
html:not(.ready){opacity:0}
html.ready{opacity:1;transition:opacity .25s}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}

h1,h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(1.6rem,4.8vw,2.6rem)}
.lead{font-size:1.15rem;max-width:34em}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.65em 1.4em;border:2px solid currentColor;border-radius:999px;font-weight:800;text-decoration:none;cursor:pointer;background:none;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent-fg);box-shadow:0 4px 0 var(--accent-fg)}
.btn-primary:active{box-shadow:0 1px 0 var(--accent-fg);transform:translateY(3px)}
.btn-small{min-height:38px;padding:.3em 1em;font-size:.92rem}

/* ---------- cabecera ---------- */
.banner{background:var(--red);color:#fff;text-align:center;padding:.55em var(--gutter);font-weight:600;font-size:.95rem}
.banner a{font-weight:800}
.top{background:var(--hero-bg);color:var(--hero-fg)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.brand img{width:38px;height:38px;border-radius:22%}
.nav{display:flex;gap:4px;font-weight:600;font-size:.95rem}
.nav a{padding:.5em .75em;border-radius:999px;text-decoration:none}
.nav a:hover{background:color-mix(in srgb,var(--hero-fg) 14%,transparent)}
.nav .nav-opt{display:none}
@media(min-width:720px){.nav .nav-opt{display:inline-block}}

/* ---------- hero: pase de embarque ---------- */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-fg);padding:clamp(28px,6vw,64px) 0 clamp(48px,8vw,96px)}
.hero .wrap{position:relative;z-index:1;display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:1fr minmax(420px,520px)}}
.hero h1{font-size:clamp(2.1rem,6.6vw,3.7rem);text-wrap:balance}
.hero .lead{margin-top:1.1rem;color:color-mix(in srgb,var(--hero-fg) 82%,transparent)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.hero .btn-ghost{color:var(--hero-fg)}
.rating{display:inline-flex;align-items:center;gap:.5em;margin-top:1.4rem;font-weight:600;font-size:.95rem;color:color-mix(in srgb,var(--hero-fg) 78%,transparent)}
.rating b{color:var(--accent);font-weight:800}
.hero-decor{position:absolute;inset:0;z-index:0;pointer-events:none}

.ticket{--stub:150px;position:relative;display:grid;background:#fff;color:#0B3B3C;border-radius:16px;box-shadow:0 18px 0 -6px rgba(0,0,0,.25),0 30px 60px -20px rgba(0,0,0,.5);transform:rotate(-1.4deg);max-width:520px;width:100%;margin-inline:auto;animation:print .9s cubic-bezier(.2,.8,.2,1) both .2s}
@keyframes print{from{clip-path:inset(0 0 100% 0);transform:translateY(-30px) rotate(-1.4deg)}to{clip-path:inset(0 0 -40px 0);transform:rotate(-1.4deg)}}
.ticket-main{padding:0 20px 18px}
.ticket-head{display:flex;justify-content:space-between;align-items:center;margin:0 -20px;padding:12px 20px;font-weight:800;font-size:.85rem;border-radius:16px 16px 0 0;background:repeating-linear-gradient(135deg,var(--red) 0 12px,#fff 12px 24px,var(--blue) 24px 36px,#fff 36px 48px)}
.ticket-head span{background:#fff;padding:.1em .7em;border-radius:999px}
.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:18px 0 14px}
.route b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,9vw,2.8rem);line-height:1;letter-spacing:-.02em}
.route small{display:block;margin-top:4px;font-weight:600;color:rgba(11,59,60,.7);font-size:.9rem;line-height:1.2}
.route div:last-child{text-align:right}
.route svg{width:34px;height:34px;color:var(--red)}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;padding-top:14px;border-top:2px dashed rgba(11,59,60,.25)}
.fields dt{font-size:.78rem;font-weight:600;color:rgba(11,59,60,.62)}
.fields dd{font-weight:800}
.barcode{height:38px;margin-top:16px;border-radius:3px;background:repeating-linear-gradient(90deg,#0B3B3C 0 2px,transparent 2px 5px,#0B3B3C 5px 6px,transparent 6px 10px,#0B3B3C 10px 14px,transparent 14px 16px)}
.ticket-stub{position:relative;display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:2px dashed rgba(11,59,60,.3)}
.ticket-stub img{width:64px;height:64px;border-radius:22%;flex:none}
.ticket-stub p{font-weight:600;font-size:.9rem;line-height:1.25}
.ticket-stub p b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.7rem;line-height:1}
.ticket::before,.ticket::after{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:var(--hero-bg);z-index:2}
/* muescas de la perforación (horizontal en móvil) */
.ticket::before{left:-12px;bottom:calc(var(--stub-h,96px) - 12px)}
.ticket::after{right:-12px;bottom:calc(var(--stub-h,96px) - 12px)}
@media(min-width:560px){
  .ticket{grid-template-columns:1fr var(--stub)}
  .ticket-stub{flex-direction:column;justify-content:center;text-align:center;border-top:0;border-left:2px dashed rgba(11,59,60,.3);padding:16px 10px}
  .ticket-stub img{width:84px;height:84px}
  .ticket::before{left:auto;right:calc(var(--stub) - 12px);bottom:auto;top:-12px}
  .ticket::after{right:calc(var(--stub) - 12px);bottom:-12px;top:auto}
}
@media(prefers-reduced-motion:reduce){.ticket{animation:none}html{scroll-behavior:auto}}

/* ---------- cinta aérea ---------- */
.airmail{height:14px;background:repeating-linear-gradient(135deg,var(--red) 0 16px,#fff 16px 32px,var(--blue) 32px 48px,#fff 48px 64px)}
.ribbon{background:var(--bg);color:var(--fg);overflow:hidden;border-bottom:1px solid var(--line);white-space:nowrap}
.ribbon-track{display:inline-flex;gap:2.2rem;padding:.8rem 0;font-family:var(--font-display);font-weight:600;font-size:.95rem;animation:slide 38s linear infinite}
.ribbon-track span::after{content:"";display:inline-block;width:.55em;height:.55em;margin-left:2.2rem;border-radius:0 80% 0 80%;background:var(--leaf)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none}}

/* ---------- secciones ---------- */
.section{padding:clamp(48px,9vw,96px) 0}
.section-head{margin-bottom:clamp(22px,4vw,36px)}
.section-head p{margin-top:.7rem;color:var(--muted);max-width:36em}

/* ---------- ruta de la tapa ---------- */
.ruta{background:var(--band-bg);color:var(--band-fg)}
.ruta .wrap{display:grid;gap:28px;align-items:center}
@media(min-width:760px){.ruta .wrap{grid-template-columns:260px 1fr;gap:56px}}
.medal{position:relative;width:min(240px,64vw);aspect-ratio:1;margin-inline:auto}
.medal svg{width:100%;height:100%}
.medal-ring{transform-origin:50% 50%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.medal-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,16vw,5.6rem);color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25);padding-bottom:.1em}
.ruta h2{max-width:14em}
.ruta p{margin-top:1rem;font-size:1.15rem;max-width:32em}
.ruta .btn{margin-top:1.4rem;border-color:var(--band-fg)}
@media(prefers-reduced-motion:reduce){.medal-ring{animation:none}}

/* ---------- carta ---------- */
.demo-pill{display:inline-block;margin-bottom:.8rem;padding:.2em .8em;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:.85rem}
.tools{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 0}
.tools .wrap{display:grid;gap:8px}
.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 28px 4px 2px;margin:0 -2px;scroll-padding:0 28px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.cats::-webkit-scrollbar{display:none}
/* en pantallas anchas caben en filas: se ven todas, sin cortes */
@media(min-width:900px){
  .cats{flex-wrap:wrap;overflow:visible;padding:2px;-webkit-mask-image:none;mask-image:none}
  .cats .pill{min-height:36px;font-size:.88rem;padding:.2em .85em}
}
.pill{flex:none;display:inline-flex;align-items:center;gap:.4em;min-height:40px;padding:.3em 1em;border:2px solid var(--fg);border-radius:999px;background:none;font-weight:800;font-size:.95rem;cursor:pointer;white-space:nowrap}
.pill[aria-pressed="true"],.pill[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters .pill{min-height:34px;font-size:.85rem;border-width:1.5px}
.search{flex:1 1 160px;min-width:0;min-height:34px;padding:.2em 1em;border:1.5px solid var(--fg);border-radius:999px;background:var(--surface);color:var(--fg)}
.search::placeholder{color:var(--muted)}

.specials{margin-top:clamp(24px,4vw,36px);padding:20px;border:3px dashed var(--accent);border-radius:var(--radius)}
.specials h3{font-family:var(--font-display);font-weight:800;font-size:1.3rem;margin-bottom:.5rem}
.menu-cat{margin-top:clamp(30px,5vw,48px)}
.menu-cat h3{display:flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:800;font-size:1.35rem;padding-bottom:.5rem;border-bottom:3px solid var(--fg)}
.menu-cat h3 span{font-size:1.4rem}
.items{display:grid;gap:0 clamp(24px,5vw,56px)}
@media(min-width:820px){.items{grid-template-columns:1fr 1fr}}
.item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.item-img{width:76px;height:76px;flex:none;border-radius:14px;object-fit:cover;background:var(--line)}
.item-main{flex:1;min-width:0;display:grid;gap:3px}
.item-top{display:flex;align-items:baseline;gap:8px}
.item-name{font-size:1.08rem;font-weight:800;line-height:1.25}
.leader{flex:1;min-width:12px;border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.price{font-family:var(--font-display);font-weight:600;font-size:.98rem;white-space:nowrap}
.item-desc{color:var(--muted);font-size:.97rem}
.item-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.heart{flex:none;width:46px;height:46px;border:2px solid var(--fg);border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .15s}
.heart svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
.heart[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;animation:pop .35s}
.heart[aria-pressed="true"] svg{fill:currentColor}
@keyframes pop{50%{transform:scale(1.25)}}
.item.is-out .item-name,.item.is-out .price{text-decoration:line-through;opacity:.5}
.item.is-out .heart{display:none}
.chip{display:inline-block;padding:.05em .65em;border-radius:999px;font-size:.78rem;font-weight:800;border:1.5px solid currentColor}
.chip-ve{color:var(--ve)}
.chip-es{color:var(--es)}
.chip-fu{color:var(--fu)}
.chip-tag{background:var(--accent);color:var(--accent-fg);border-color:var(--accent-fg)}
.chip-ruta{background:var(--band-bg);color:var(--band-fg);border-color:var(--band-fg)}
.empty{padding:40px 0;text-align:center;color:var(--muted)}
.note{margin-top:28px;color:var(--muted);font-size:.9rem}

/* barra "Mi antojo" */
.antojo-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;transform:translate(-50%,140%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;width:min(100% - 24px,460px)}
.antojo-bar.on{transform:translate(-50%,0);visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.antojo-bar button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.8em 1.2em;border:2px solid var(--accent-fg);border-radius:999px;background:var(--accent);color:var(--accent-fg);font-weight:800;box-shadow:0 5px 0 var(--accent-fg),0 14px 30px -10px rgba(0,0,0,.5);cursor:pointer}
dialog.sheet{width:min(100%,520px);max-height:86vh;margin:auto auto 0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--surface);color:var(--fg);overflow:auto}
dialog.sheet::backdrop{background:rgba(0,0,0,.55)}
.sheet-in{padding:22px 22px calc(26px + env(safe-area-inset-bottom))}
.sheet h3{font-family:var(--font-display);font-weight:800;font-size:1.4rem}
.sheet-list{margin:14px 0}
.sheet-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty button{width:32px;height:32px;border:2px solid var(--fg);border-radius:50%;background:none;font-weight:800;cursor:pointer}
.sheet-total{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin:14px 0 6px}
.sheet small{color:var(--muted);display:block;margin-bottom:14px}
.sheet-actions{display:flex;gap:10px;flex-wrap:wrap}
.sheet .btn{border-color:var(--fg)}
.sheet .btn-primary{border-color:var(--accent-fg)}

/* ---------- Arma tu Fusión ---------- */
.build{background:var(--build-bg);color:var(--build-fg)}
.build .section-head p{color:color-mix(in srgb,var(--build-fg) 70%,transparent)}
.steps{display:grid;gap:22px}
@media(min-width:900px){.steps{grid-template-columns:1fr 1fr;align-items:start}}
.step h3{font-weight:800;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.4em 1em .4em .8em;border:2px solid var(--build-fg);border-radius:14px;background:var(--surface);color:var(--build-fg);font-weight:600;cursor:pointer;transition:transform .12s}
.opt:hover{transform:translateY(-2px)}
.opt span{font-size:1.5rem;line-height:1}
.opt[aria-pressed="true"]{background:var(--build-fg);color:var(--surface);box-shadow:0 4px 0 var(--lime)}
.plate{position:relative;margin-top:8px;padding:26px 22px 22px;border:3px solid var(--build-fg);border-radius:var(--radius);background:var(--surface);color:var(--build-fg);box-shadow:8px 8px 0 var(--build-fg)}
@media(min-width:900px){.plate{margin-top:0}}
.stack{display:flex;justify-content:center;gap:4px;font-size:clamp(2.6rem,12vw,3.6rem);min-height:1.3em}
.stack span{display:inline-block;animation:drop .45s cubic-bezier(.3,1.6,.5,1) both}
.stack span:nth-child(2){animation-delay:.08s}
.stack span:nth-child(3){animation-delay:.16s}
@keyframes drop{from{transform:translateY(-28px) scale(.5);opacity:0}}
.plate-name{margin-top:12px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,5vw,1.8rem);line-height:1.1;text-wrap:balance}
.plate-desc{margin-top:8px;text-align:center;color:color-mix(in srgb,var(--build-fg) 70%,transparent)}
.meter{margin:16px auto 0;max-width:320px}
.meter-label{display:flex;justify-content:space-between;font-weight:800;font-size:.9rem;margin-bottom:6px}
.meter-bar{height:12px;border-radius:99px;background:color-mix(in srgb,var(--build-fg) 14%,transparent);overflow:hidden}
.meter-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--ve),var(--saffron),var(--leaf));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.plate-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.plate .btn{border-color:var(--build-fg)}
.plate .btn-primary{border-color:var(--accent-fg)}
.plate-hint{margin-top:14px;text-align:center;font-size:.88rem;color:color-mix(in srgb,var(--build-fg) 62%,transparent)}

/* ---------- Pasaporte (club) ---------- */
.club{background:var(--club-bg);color:var(--club-fg)}
.club .wrap{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.club .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}}
.club .section-head p{color:color-mix(in srgb,var(--club-fg) 80%,transparent)}
.cover{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 22px;border-radius:14px 22px 22px 14px;border:3px solid var(--saffron);background:color-mix(in srgb,var(--club-bg) 70%,#000);color:var(--saffron);text-align:center;box-shadow:inset 8px 0 0 rgba(0,0,0,.25),0 18px 40px -18px rgba(0,0,0,.6)}
.cover img{width:92px;height:92px;border-radius:22%}
.cover b{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.02em}
.cover small{font-weight:600;color:color-mix(in srgb,var(--saffron) 75%,#fff)}
.club-panel{background:#fff;color:#0B3B3C;border-radius:var(--radius);padding:clamp(20px,4vw,30px)}
.club-panel h3{font-family:var(--font-display);font-weight:800;font-size:1.25rem;margin-bottom:.6rem}
.soon{display:grid;gap:10px}
.soon p{color:rgba(11,59,60,.75)}
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tabs .pill{border-color:#0B3B3C;color:#0B3B3C}
.tabs .pill[aria-selected="true"]{background:#0B3B3C;color:#fff}
.form{display:grid;gap:12px}
.field{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.field input,.field select,.field textarea{min-height:46px;padding:.5em .9em;border:2px solid #0B3B3C;border-radius:12px;background:#fff;color:#0B3B3C;font-weight:400}
.form .btn{border-color:#0B3B3C}
.form .btn-primary{border-color:#0B3B3C}
.howto{margin-bottom:16px;padding:14px 16px;border-radius:14px;background:rgba(11,59,60,.06);color:#0B3B3C}
.howto p{font-size:.92rem}
.perks{list-style:none;margin-top:10px;display:grid;gap:6px}
.perks li{font-size:.92rem;padding-left:1.4em;position:relative}
.perks li::before{content:"✦";position:absolute;left:0;color:#C9962B}
.perks b{display:inline-block;min-width:4.6em}
.btn-google{width:100%;gap:.6em;background:#fff;color:#1f1f1f;border-color:#0B3B3C}
.btn-google:disabled{opacity:.6}
.or{display:flex;align-items:center;gap:10px;margin:14px 0 2px;font-size:.82rem;font-weight:700;color:rgba(11,59,60,.65)}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(11,59,60,.25)}
.msg{min-height:1.3em;font-weight:600;font-size:.92rem}
.msg.err{color:#B3261E}
.msg.ok{color:#17692E}
.fine{font-size:.82rem;color:rgba(11,59,60,.65)}
.pass-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.level{display:inline-block;padding:.15em .8em;border-radius:99px;background:var(--saffron);font-weight:800;font-size:.9rem}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0;padding:16px;border-radius:12px;background:repeating-linear-gradient(0deg,#F6FAF7 0 26px,#E6EFE9 26px 27px)}
.stamp{position:relative;aspect-ratio:1;display:grid;place-items:center;border:2px dashed rgba(11,59,60,.3);border-radius:50%;font-weight:800;color:rgba(11,59,60,.35)}
.stamp.on{border:3px solid var(--c,#C4372A);color:var(--c,#C4372A);transform:rotate(var(--r,-8deg));font-family:var(--font-display);font-size:.78rem;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--c,#C4372A);animation:stampIn .4s cubic-bezier(.3,1.8,.5,1) both}
@keyframes stampIn{from{transform:scale(2) rotate(var(--r));opacity:0}}
.prog{font-weight:600}
.reward{margin-top:12px;padding:12px 14px;border-radius:12px;background:#FFF3C6;font-weight:600}
.reward.ready{background:var(--saffron);font-weight:800}
.qr{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:2px dashed rgba(11,59,60,.25)}
.qr-box{width:120px;height:120px;flex:none;background:#fff;padding:6px;border:2px solid #0B3B3C;border-radius:10px}
.qr-box svg,.qr-box img{width:100%;height:100%}
.qr-code{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.06em}
.linklike{background:none;border:0;padding:0;text-decoration:underline;font-weight:600;cursor:pointer}

/* ---------- dónde ---------- */
.where .wrap{display:grid;gap:28px}
@media(min-width:820px){.where .wrap{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.addr{font-family:var(--font-display);font-weight:600;font-size:1.15rem;line-height:1.35;margin:.9rem 0 1.2rem}
.addr small{display:block;margin-top:.3em;font-family:var(--font-body);font-weight:400;font-size:1rem;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links .btn{border-color:var(--fg)}
.links .btn-primary{border-color:var(--accent-fg)}
.hours{display:grid;gap:6px}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:.5em 0;border-bottom:1px solid var(--line)}
.hours dt{font-weight:800}
.review-card{padding:20px;border:3px solid var(--fg);border-radius:var(--radius);box-shadow:6px 6px 0 var(--fg)}
.review-card b{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:1}
.stars{color:#E0A100;letter-spacing:.1em;font-size:1.2rem}

/* ---------- pie ---------- */
.foot{background:var(--foot-bg);color:var(--foot-fg);padding:36px 0 calc(36px + env(safe-area-inset-bottom));font-size:.95rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.foot a{font-weight:600}
.foot-note{width:100%;font-size:.82rem;opacity:.7}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:16px;z-index:60;transform:translate(-50%,-160%);visibility:hidden;padding:.7em 1.3em;border-radius:999px;background:var(--teal);color:#fff;font-weight:800;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);transition:transform .3s,visibility 0s .3s}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .3s}

/* ---------- utilidades extra ---------- */
.item.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,30%{background:color-mix(in srgb,var(--accent) 45%,transparent)}100%{background:transparent}}
.dev-note{margin-bottom:12px;padding:.4em .8em;border-radius:10px;background:#FFF3C6;color:#5A4300;font-size:.85rem;font-weight:600}

.fields dd[data-open]::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.45em;border-radius:50%;background:#D8402F;vertical-align:.05em}
.fields dd[data-open="1"]::before{background:#2FA84F;box-shadow:0 0 0 3px rgba(47,168,79,.25)}