/* Reservas públicas — tokens Munchy (munchy.css). Portada + pasos + talón de reserva. */
:root{--cta:var(--sandia-deep);--cta-2:#B92D4A;--sel:var(--ink);--card:#fff;--soft:#F2F6F4;--r-lg:22px;--r-md:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.5 var(--ui)}
.cargando{padding:40px 16px;text-align:center;color:var(--ink-2)}
:focus-visible{outline:3px solid var(--cielo);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout: móvil = portada arriba; escritorio = portada fija a la izquierda */
.rv{min-height:100vh}
.lay{display:block}
.portada{position:relative;color:#fff;background:var(--noche);min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.portada .foto{position:absolute;inset:0;background:center/cover no-repeat}
.portada .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,56,.05) 0%,rgba(15,30,56,.35) 45%,rgba(15,30,56,.92) 100%)}
/* Placeholder: mantel de platos (círculos) en sol sobre noche */
.portada.sin .foto{background-repeat:repeat;background-color:var(--ink);background-image:radial-gradient(circle at 50% 50%,transparent 17px,rgba(255,210,63,.20) 18px,rgba(255,210,63,.20) 19.5px,transparent 20.5px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 6px,transparent 7px);background-size:56px 56px;background-position:0 0,28px 28px}
.portada .txt{position:relative;padding:28px 20px 22px}
.portada h1{font:800 clamp(34px,9vw,64px)/.95 var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.portada .desc{margin:10px 0 0;font-size:16px;color:rgba(255,255,255,.88);max-width:44ch}
.datos{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none;font-size:14px}
.datos a,.datos span{color:#fff;text-decoration:none;display:inline-flex;gap:6px;align-items:center;min-height:32px}
.datos a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.datos svg{width:16px;height:16px;flex:none;opacity:.85}

.panel{padding:0 16px 120px;max-width:600px;margin:0 auto}
.paso{background:var(--card);border-radius:var(--r-lg);padding:18px 16px 18px;margin-top:14px;border:1px solid var(--line)}
.paso:first-child{margin-top:-18px;position:relative;box-shadow:0 10px 30px -18px rgba(15,30,56,.5)}
.paso h2{display:flex;align-items:baseline;gap:10px;font:700 20px/1.2 var(--display);margin:0 0 12px}
.paso h2 .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ground);font:800 14px/1 var(--ui);color:var(--ink);flex:none;transform:translateY(-2px)}
.paso.hecho h2 .n{background:var(--hoja);color:#fff}
.paso.bloq{opacity:.55}
.paso .ayuda{margin:-6px 0 12px;color:var(--ink-2);font-size:14px}

/* Chips */
.fila{display:flex;gap:8px;flex-wrap:wrap}
.desliza{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.desliza::-webkit-scrollbar{display:none}
.ch{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:48px;min-height:48px;padding:8px 14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:var(--r-md);font:700 16px/1 var(--ui);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.ch:hover:not(:disabled){border-color:var(--ink)}
.ch[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:#fff}
.ch:disabled{cursor:not-allowed;color:#9AA7BB;background:var(--soft);border-color:transparent;text-decoration:line-through;text-decoration-color:rgba(154,167,187,.7)}
.ch.dia{flex:none;flex-direction:column;gap:3px;min-width:70px;padding:10px 8px;scroll-snap-align:start}
.ch.dia small{font:600 13px/1 var(--ui)}
.ch.dia b{font:800 24px/1 var(--display)}
.ch.dia.otra b{font-size:20px}
.ch.hora{min-width:78px;font-variant-numeric:tabular-nums}
.grupo+.grupo{margin-top:14px}
.grupo h3{font:600 13px/1 var(--ui);color:var(--ink-2);margin:0 0 8px}
input.fecha{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

/* Avisos */
.aviso{background:var(--soft);border-radius:var(--r-md);padding:14px 14px}
.aviso b{display:block;font-size:16px}
.aviso p{margin:4px 0 0;color:var(--ink-2);font-size:14px}
.aviso .sug{margin-top:10px}
.lk{appearance:none;border:0;background:none;padding:0;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn2{appearance:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:999px;padding:10px 16px;font:700 15px/1 var(--ui);cursor:pointer;text-decoration:none;min-height:44px}
.btn2:hover{background:var(--ink);color:#fff}
.esqueleto{display:flex;gap:8px;flex-wrap:wrap}
.esqueleto i{width:78px;height:48px;border-radius:var(--r-md);background:linear-gradient(90deg,var(--soft),#fff,var(--soft));background-size:200% 100%;animation:brillo 1.2s linear infinite}
@keyframes brillo{to{background-position:-200% 0}}

/* Formulario */
.campo{margin-top:12px}
.campo:first-of-type{margin-top:0}
.campo label{display:block;font-weight:700;font-size:14px;margin:0 0 5px}
.campo label span{font-weight:500;color:var(--ink-2)}
.campo input,.campo textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:13px 14px;font:17px/1.3 var(--ui);color:var(--ink);background:#fff}
.campo input:focus,.campo textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(91,192,235,.35)}
.campo input[aria-invalid="true"]{border-color:var(--bad)}
.dos{display:grid;grid-template-columns:1fr;gap:0 12px}
.ocas{margin-top:14px}
.ocas .ch{min-height:40px;font-size:14px;font-weight:600;padding:8px 12px;border-radius:999px}
.err{color:var(--bad);font-weight:700;margin:12px 0 0;font-size:15px}
.err:empty{display:none}
.hp{position:absolute;left:-9999px}

/* Talón (resumen vivo) */
.talon{background:var(--sol);color:var(--ink);border-radius:var(--r-md);position:relative;padding:12px 16px;display:flex;align-items:center;gap:12px}
.talon::before,.talon::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--ground);transform:translateY(-50%)}
.talon::before{left:-7px}.talon::after{right:-7px}
.talon .t{flex:1;min-width:0;font:700 15px/1.25 var(--ui)}
.talon .t small{display:block;font:600 12px/1.2 var(--ui);opacity:.75}
.talon .vac{opacity:.55;font-weight:600}
.barra{position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(230,239,236,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:5}
.barra .talon{max-width:600px;margin:0 auto}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;border-radius:999px;background:var(--cta);color:#fff;font:800 17px/1 var(--ui);padding:15px 22px;min-height:52px;cursor:pointer;white-space:nowrap}
.btn:hover:not(:disabled){background:var(--cta-2)}
.btn:disabled{background:#B8C2D1;cursor:not-allowed}
.btn.full{width:100%;margin-top:16px}
.talon .btn{padding:12px 18px;min-height:46px;font-size:16px}

/* Confirmación */
.hecho-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;margin-top:-18px;position:relative;box-shadow:0 10px 30px -18px rgba(15,30,56,.5)}
.hecho-card .cab{padding:22px 18px 8px}
.hecho-card h2{font:800 30px/1.05 var(--display);margin:0}
.hecho-card .cab p{margin:8px 0 0;color:var(--ink-2)}
.boleto{margin:14px 18px;background:var(--sol);border-radius:var(--r-md);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;position:relative}
.boleto dt{font-size:13px;font-weight:600;opacity:.75}
.boleto dd{margin:0;font:800 19px/1.2 var(--display)}
.acciones{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 18px}
.nota{border-top:1px dashed var(--line);padding:14px 18px 18px;font-size:14px;color:var(--ink-2)}
.nota b{color:var(--ink)}
.nota p{margin:0 0 6px}
.check{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hoja);color:#fff;margin-bottom:10px}
.check svg{width:24px;height:24px}
@media (prefers-reduced-motion:no-preference){.check{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{from{transform:scale(.4);opacity:0}}}

.pie{text-align:center;color:var(--ink-2);font-size:13px;margin:28px 0 0}

@media (min-width:560px){.dos{grid-template-columns:1fr 1fr}.dos .campo:first-of-type{margin-top:12px}.dos .campo{margin-top:12px}}
@media (min-width:980px){
  .lay{display:grid;grid-template-columns:minmax(380px,44%) 1fr;min-height:100vh}
  .portada{position:sticky;top:0;height:100vh;min-height:0}
  .portada .txt{padding:48px 48px 44px}
  .portada .desc{font-size:18px}
  .portada .talon-lado{margin-top:26px;max-width:420px}
  .panel{padding:48px 40px 60px;max-width:640px;margin:0}
  .paso:first-child,.hecho-card{margin-top:0}
  .barra{display:none}
  .desliza{flex-wrap:wrap;overflow:visible}
  .talon-lado .talon::before,.talon-lado .talon::after{background:var(--ink)}
}
@media (max-width:979px){.portada .talon-lado{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.lado{display:none}
@media (min-width:980px){.der{min-width:0}.panel{margin:0 auto;max-width:760px}}
@media (min-width:1440px){
  .lay{grid-template-columns:40% 1fr}
  .der{display:grid;grid-template-columns:minmax(0,760px) 300px;justify-content:center;gap:36px;padding:0 40px}
  .panel{padding:48px 0 60px;max-width:none;margin:0}
  .portada .talon-lado{display:none}
  .lado{display:block;position:sticky;top:48px;align-self:start;margin-top:48px}
  .talon.grande{display:block;padding:20px 22px}
  .talon.grande::before,.talon.grande::after{top:64px}
  .talon.grande dl{margin:10px 0 0;display:grid;gap:2px}
  .talon.grande dt{font:600 12px/1.2 var(--ui);opacity:.7;margin-top:8px}
  .talon.grande dd{margin:0;font:800 19px/1.2 var(--display)}
}