/* ============================================================
   MARVEL FOOD — HAMBURGUESAS LIBRES · Reservas
   Mismo sistema visual del home (plum + honey + bordes duros)
   ============================================================ */
:root{
  --plum:#8e0a9b; --honey:#ffb91d; --void:#161616; --white:#fff;
  --plum-deep:#6a0875; --plum-700:#7a0985;
  --plum-tint:#f4e4f6; --plum-line:#d9b6df; --honey-deep:#e89c00;
  --honey-soft:#ffd56b; --cream:#fbf6ee;
  --ink-2:#3a2b3d; --ink-3:#7d6f80; --line:#e7ddd0;
  --ok:#1e8e54; --err:#c0392b;
  --font:"Archivo","Archivo SemiExpanded",system-ui,-apple-system,sans-serif;
  --stretch:112%;
  --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow-md:0 6px 20px rgba(22,22,22,.12);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-stretch:var(--stretch);background:var(--cream);color:var(--void);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--honey);color:var(--void)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap-form{max-width:860px}
h1,h2,h3{font-family:var(--font);font-stretch:var(--stretch);font-weight:800;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase}
.kicker{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--honey-soft);margin-bottom:8px}
.hard-w{text-shadow:3px 4px 0 #45084d}

/* HERO */
.hero{position:relative;color:#fff;overflow:hidden;border-bottom:2.5px solid var(--void);background:var(--plum)}
.hero-dots{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:22px 22px}
.hero-inner{position:relative;z-index:2;padding:64px 22px 66px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.hero-badge-pill{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:7px 13px;border-radius:var(--r-pill);border:2.5px solid var(--void)}
.hero-badge-pill.b1{background:var(--honey);color:var(--void)}
.hero-badge-pill.b2{background:#fff;color:var(--void)}
.hero h1{font-size:clamp(44px,8vw,88px);color:var(--honey);line-height:.92;margin-bottom:6px}
.hero p.lead{font-size:clamp(16px,1.8vw,19px);color:rgba(255,255,255,.94);max-width:64ch;margin:16px auto 20px;text-align:center}
.hero p.lead .lead-line{display:block;text-wrap:balance}
.hero p.lead strong{color:var(--honey-soft)}
.hero-dates{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.date-pill{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.date-pill b{color:var(--honey);margin-right:6px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);font-stretch:var(--stretch);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:15px;padding:15px 26px;border-radius:var(--r-pill);border:2.5px solid var(--void);cursor:pointer;transition:.15s}
.btn-honey{background:var(--honey);color:var(--void);box-shadow:4px 4px 0 var(--void)}
.btn-honey:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--void)}
.btn-honey:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--void)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:#fff;color:var(--plum)}
.btn-plum{background:var(--plum);color:#fff;box-shadow:4px 4px 0 var(--void)}
.btn-plum:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--void)}
.btn-ghost2{background:#fff;color:var(--void);box-shadow:3px 3px 0 var(--void)}
.btn-ghost2:hover{background:var(--plum-tint)}

/* MARQUEE */
.strip{background:var(--honey);border-bottom:2.5px solid var(--void);overflow:hidden;padding:11px 0}
.strip-track{display:inline-flex;white-space:nowrap;animation:marq 22s linear infinite;will-change:transform}
.strip span{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:15px;color:var(--plum);padding:0 6px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:68px 0}
.section.alt{background:var(--plum-tint)}
.sec-head{text-align:center;max-width:660px;margin:0 auto 36px}
.sec-head h2{font-size:clamp(28px,4.4vw,44px);color:var(--plum)}
.sec-head p{color:var(--ink-2);margin-top:12px;font-size:17px}

/* CÓMO FUNCIONA */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step-card{position:relative;background:#fff;border:2.5px solid var(--void);border-radius:var(--r-lg);padding:26px 20px 22px;box-shadow:4px 4px 0 var(--void)}
.step-num{position:absolute;top:-16px;left:18px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--honey);color:var(--void);font-weight:800;font-size:16px;border:2.5px solid var(--void);border-radius:50%}
.step-card h3{font-size:17px;color:var(--plum);margin-bottom:8px}
.step-card p{font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* PRECIOS */
.price-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;align-items:stretch}
.price-card{background:#fff;border:2.5px solid var(--void);border-radius:var(--r-lg);padding:26px 24px;box-shadow:4px 4px 0 var(--void);display:flex;flex-direction:column;gap:8px}
.price-card.main{background:var(--plum);color:#fff;box-shadow:6px 6px 0 var(--void)}
.price-card.warn{background:repeating-linear-gradient(45deg,#fff8e8,#fff8e8 12px,#fdf0d2 12px,#fdf0d2 24px)}
.price-kicker{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--honey-deep)}
.price-card.main .price-kicker{color:var(--honey)}
.price-big{font-weight:800;font-size:clamp(40px,5vw,54px);line-height:1;color:var(--honey);text-shadow:2px 3px 0 #45084d}
.price-per{font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.price-mid{font-weight:800;font-size:20px;text-transform:uppercase;color:var(--plum);line-height:1.15}
.price-card ul{list-style:none;margin-top:10px;display:grid;gap:8px}
.price-card ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.45}
.price-card ul li::before{content:"✦";position:absolute;left:0;top:0;color:var(--honey)}
.price-card.main ul li b{color:var(--honey-soft)}
.price-card p{font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* FORM CARD */
.form-card{background:#fff;border:2.5px solid var(--void);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--void);padding:clamp(22px,4vw,38px)}
.form-loading{text-align:center;color:var(--ink-3);font-weight:700;padding:30px 0}
.form-loading.err{color:var(--err)}
.fstep{margin-bottom:30px}
.fstep:last-child{margin-bottom:0}
.fstep-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fstep-num{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--plum);color:#fff;font-weight:800;font-size:15px;border:2.5px solid var(--void);border-radius:50%}
.fstep-head h3{font-size:19px;color:var(--void)}

/* Paso 1: sucursales */
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.branch-opt{position:relative;text-align:left;background:var(--cream);border:2.5px solid var(--void);border-radius:var(--r-md);padding:16px;cursor:pointer;transition:.15s;font-family:var(--font);font-stretch:var(--stretch)}
.branch-opt:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--void)}
.branch-opt.sel{background:var(--plum);color:#fff;box-shadow:4px 4px 0 var(--void)}
.branch-opt .b-name{font-weight:800;text-transform:uppercase;font-size:17px;color:var(--plum)}
.branch-opt.sel .b-name{color:var(--honey)}
.branch-opt .b-date{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.branch-opt .b-addr{font-size:13px;color:var(--ink-3);margin-top:4px}
.branch-opt.sel .b-addr{color:rgba(255,255,255,.8)}
.branch-opt .b-left{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--honey);color:var(--void);border:2px solid var(--void);border-radius:var(--r-pill);padding:3px 9px}
.branch-opt .b-left.low{background:#ffd2c4}
.branch-opt .b-left.none{background:#eee;color:var(--ink-3)}
.branch-opt:disabled{opacity:.55;cursor:not-allowed}

/* Paso 2: turnos */
.shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shift-opt{background:var(--cream);border:2.5px solid var(--void);border-radius:var(--r-md);padding:16px;cursor:pointer;text-align:left;transition:.15s;font-family:var(--font);font-stretch:var(--stretch)}
.shift-opt:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--void)}
.shift-opt.sel{background:var(--plum);color:#fff;box-shadow:4px 4px 0 var(--void)}
.shift-opt .s-name{font-weight:800;text-transform:uppercase;font-size:16px}
.shift-opt.sel .s-name{color:var(--honey)}
.shift-opt .s-left{font-size:13px;color:var(--ink-3);margin-top:3px}
.shift-opt.sel .s-left{color:rgba(255,255,255,.8)}
.shift-opt:disabled{opacity:.5;cursor:not-allowed;text-decoration:line-through}

/* Paso 3: zona + personas */
.zone-row{margin-bottom:16px}
.zone-lab{display:block;font-weight:700;font-size:14px;margin-bottom:8px;color:var(--ink-2)}
.zone-chips{display:flex;flex-wrap:wrap;gap:8px}
.zone-chip{background:var(--cream);border:2.5px solid var(--void);border-radius:var(--r-pill);padding:9px 18px;font-family:var(--font);font-stretch:var(--stretch);font-weight:800;font-size:14px;text-transform:uppercase;cursor:pointer;transition:.15s}
.zone-chip.sel{background:var(--honey);box-shadow:3px 3px 0 var(--void)}
.zone-chip:disabled{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.zone-chip .z-left{font-weight:700;font-size:11px;text-transform:none;color:var(--ink-3);margin-left:6px}
.people-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;gap:0;border:2.5px solid var(--void);border-radius:var(--r-pill);overflow:hidden;background:#fff;box-shadow:3px 3px 0 var(--void)}
.step-btn{width:48px;height:48px;border:none;background:var(--honey);font-size:24px;font-weight:800;cursor:pointer;font-family:var(--font);transition:.12s}
.step-btn:hover{background:var(--honey-soft)}
.step-btn:disabled{background:#eee;color:#bbb;cursor:not-allowed}
.ppl-val{min-width:64px;text-align:center;font-weight:800;font-size:22px}
.ppl-hint{font-size:14px;color:var(--ink-3);font-weight:600}
.ppl-note{margin-top:10px;font-size:14px;color:var(--ink-2);background:var(--plum-tint);border:2px solid var(--plum-line);border-radius:var(--r-md);padding:10px 14px}
.ppl-note a{color:var(--plum);font-weight:800;text-decoration:underline}

/* Paso 4: campos */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-full{grid-column:1/-1}
.field label{font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em}
.req{color:var(--err)}
.opt{color:var(--ink-3);font-weight:600;text-transform:none;letter-spacing:0}
input[type=text],input[type=tel],input[type=email]{font:inherit;font-stretch:var(--stretch);color:var(--void);background:var(--cream);border:2.5px solid var(--void);border-radius:12px;padding:12px 14px;width:100%;transition:.15s}
input:focus{outline:none;background:#fff;box-shadow:0 0 0 4px rgba(142,10,155,.18)}
input.invalid{border-color:var(--err);box-shadow:0 0 0 4px rgba(192,57,43,.12)}

/* Paso 5: pago */
.pay-box{display:grid;gap:14px}
.pay-amounts{background:var(--plum);color:#fff;border:2.5px solid var(--void);border-radius:var(--r-md);padding:16px 18px;box-shadow:4px 4px 0 var(--void)}
.pay-amounts .pa-row{display:flex;justify-content:space-between;gap:12px;font-size:15px;padding:3px 0}
.pay-amounts .pa-row b{color:var(--honey-soft)}
.pay-amounts .pa-row.big{font-weight:800;font-size:18px;border-top:2px dashed rgba(255,255,255,.35);margin-top:6px;padding-top:9px}
.pay-amounts .pa-row.big b{color:var(--honey);font-size:22px}
.pay-transfer{background:var(--cream);border:2.5px solid var(--void);border-radius:var(--r-md);padding:14px 16px;display:grid;gap:8px}
.pay-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.pay-line span{flex:0 0 90px;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pay-line b{font-size:16px;word-break:break-all}
.copy-btn{margin-left:auto;border:2px solid var(--void);background:var(--honey);border-radius:var(--r-pill);font-family:var(--font);font-weight:800;font-size:12px;text-transform:uppercase;padding:5px 12px;cursor:pointer;transition:.12s}
.copy-btn:hover{background:var(--honey-soft)}
.copy-btn.done{background:var(--ok);color:#fff;border-color:var(--void)}
.file-drop{position:relative;border:2.5px dashed var(--plum);border-radius:var(--r-md);background:var(--plum-tint);padding:20px 16px;text-align:center;cursor:pointer;transition:.15s;display:block}
.file-drop:hover,.file-drop.drag{background:#efd8f3}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file-drop-text{color:var(--ink-2);font-size:15px;font-weight:600;pointer-events:none}
.file-drop.has-file{border-style:solid;border-color:var(--ok);background:rgba(30,142,84,.08)}
.file-drop.has-file .file-drop-text{color:var(--ok);font-weight:800}
.checkline{display:flex;gap:12px;align-items:flex-start;margin:18px 0 6px;font-size:14.5px;color:var(--ink-2);cursor:pointer;line-height:1.5}
.checkline input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--plum)}
.btn-submit{width:100%;margin-top:14px;font-size:17px;padding:17px 26px}
.form-msg{margin-top:14px;padding:12px 16px;border-radius:12px;font-weight:700;font-size:15px}
.form-msg.err{background:rgba(192,57,43,.1);color:var(--err);border:2px solid rgba(192,57,43,.35)}

/* Resultado */
.result{text-align:center;padding:14px 0 6px}
.result-badge{display:inline-block;background:var(--honey);border:2.5px solid var(--void);border-radius:var(--r-pill);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em;padding:9px 20px;box-shadow:3px 3px 0 var(--void)}
.result-code-lab{margin-top:22px;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.result-code{font-weight:800;font-size:clamp(40px,8vw,58px);color:var(--plum);letter-spacing:.04em;line-height:1.1}
.result-summary{max-width:480px;margin:14px auto 0;background:var(--cream);border:2.5px solid var(--void);border-radius:var(--r-md);padding:14px 18px;text-align:left;display:grid;gap:5px}
.result-summary .rs-row{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.result-summary .rs-row span{color:var(--ink-3);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.result-summary .rs-row b{text-align:right}
.result-note{max-width:520px;margin:16px auto 20px;font-size:14.5px;color:var(--ink-2)}

/* Consultar estado */
.check-card{background:#fff;border:2.5px solid var(--void);border-radius:var(--r-lg);box-shadow:4px 4px 0 var(--void);padding:clamp(18px,3vw,28px)}
.fields-check{grid-template-columns:1fr 1fr auto;align-items:end}
.check-result{margin-top:16px;border:2.5px solid var(--void);border-radius:var(--r-md);padding:14px 18px;font-size:15px}
.check-result.st-pendiente{background:#fff8e8}
.check-result.st-confirmada{background:rgba(30,142,84,.1)}
.check-result.st-rechazada,.check-result.st-cancelada{background:rgba(192,57,43,.08)}
.check-result.st-err{background:#f6f6f6;color:var(--ink-2)}
.check-result .st-tag{display:inline-block;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;border:2px solid var(--void);border-radius:var(--r-pill);padding:3px 11px;margin-bottom:8px}
.st-pendiente .st-tag{background:var(--honey)}
.st-confirmada .st-tag{background:var(--ok);color:#fff}
.st-rechazada .st-tag,.st-cancelada .st-tag{background:var(--err);color:#fff}

/* Condiciones */
.conds{list-style:none;display:grid;gap:12px;max-width:760px;margin:0 auto}
.conds li{position:relative;padding-left:26px;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.conds li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--honey-deep);font-size:16px}
.conds b{color:var(--void)}
.conds-contact{text-align:center;margin-top:26px;font-size:15.5px;color:var(--ink-2)}
.conds-contact a{color:var(--plum);font-weight:800;text-decoration:underline}

/* RESPONSIVE */
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr;row-gap:26px}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .branch-grid{grid-template-columns:1fr}
  .shift-grid{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .fields-check{grid-template-columns:1fr}
  .section{padding:48px 0}
  .hero-inner{padding:44px 18px 50px}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr;row-gap:26px}
  .wrap{padding:0 16px}
  .pay-line span{flex-basis:100%}
  .copy-btn{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}