/* ==========================================================================
   LA PÁGINA DE RESERVAS — `/reservar/` (api/reservar.js)

   La familia de la página del pedido (`pedido/pedido.css`) y del sitio:
   crema, rojo, Fraunces y Outfit. Lo que la hace de reservas es la noche: la
   cabecera sobre la foto del local con un velo oscuro y el oro de las velas,
   y una sola acción dorada abajo. Letra grande y botones de dedo: la abre
   gente de todas las edades desde el celular.
   ========================================================================== */
:root {
  --rojo: #B01E24;
  --rojo-osc: #7E1418;
  --oro: #D9A441;
  --oro-cl: #F6E3B8;
  --oro-osc: #9A6E1C;
  --noche: #1C1310;
  --noche-2: #2C1E19;
  --verde: #0B8A5B;
  --verde-cl: #E3F4EC;
  --ambar: #B86E00;
  --ambar-cl: #FFF1D6;
  --crema: #FDF4E7;
  --crema-2: #F2E2CB;
  --papel: #FFFBF4;
  --tinta: #2A1D18;
  --tinta-2: #5B4740;
  --tinta-3: #8A7167;
  --linea: rgba(42, 29, 24, .12);
  --sombra: 0 1px 2px rgba(42, 29, 24, .06), 0 10px 30px -12px rgba(42, 29, 24, .28);
  --sombra-si: 0 0 0 2px var(--oro), 0 12px 28px -12px rgba(154, 110, 28, .55);
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --r: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; background: var(--crema); color: var(--tinta);
  font: 400 17px/1.45 var(--sans);
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* --- La cabecera ---------------------------------------------------------- */
.cab {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(28, 19, 16, .82); backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cab__marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.cab__logo { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.cab__t { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.cab__t b { font: 700 1rem var(--display); letter-spacing: -.01em; white-space: nowrap; }
.cab__t span { font-size: .78rem; color: var(--oro-cl); letter-spacing: .08em; text-transform: uppercase; }
.cab__carta {
  margin-left: auto; flex: none; padding: 8px 14px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .22); color: #fff; text-decoration: none;
  font-size: .88rem; font-weight: 600;
}

main { max-width: 620px; margin: 0 auto; padding: 0 16px; display: grid; gap: 18px; }
/* Un hijo de grid crece hasta lo que mide su contenido: sin esto, la foto de
   una sede (760 px de ancho natural) empuja la columna fuera de la pantalla. */
main > *, .sedes > *, .kits > * { min-width: 0; }

/* --- Cargando / sin API --------------------------------------------------- */
.carga { text-align: center; padding: 26vh 0 0; color: var(--tinta-2); }
.carga__punto {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  border: 4px solid var(--crema-2); border-top-color: var(--oro); animation: gira 1s linear infinite;
}
.vacio { text-align: center; padding: 16vh 8px 0; }
.vacio__i {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--sombra); color: var(--rojo);
}
.vacio__i .ico { width: 32px; height: 32px; }
.vacio h1 { font: 700 1.6rem/1.15 var(--display); margin: 0 0 8px; }
.vacio p { color: var(--tinta-2); margin: 0 auto 22px; max-width: 34ch; }

/* --- El héroe: la foto del local, de noche -------------------------------- */
.hero {
  position: relative; overflow: hidden; margin: 0 -16px; color: #fff;
  min-height: 360px; display: flex; align-items: flex-end;
  background: var(--noche);
}
.hero__foto {
  position: absolute; inset: 0;
  background: url('/reservar/img/interior.webp') center 35% / cover no-repeat;
  animation: acercar 14s var(--ease) both;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 80% 10%, rgba(217, 164, 65, .28), rgba(217, 164, 65, 0) 70%),
    linear-gradient(180deg, rgba(28, 19, 16, .35) 0%, rgba(28, 19, 16, .55) 40%, rgba(28, 19, 16, .96) 100%);
}
.hero__c { position: relative; z-index: 1; padding: 64px 20px 26px; width: 100%; }
.hero__etiq {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
  background: rgba(217, 164, 65, .16); border: 1px solid rgba(217, 164, 65, .45); color: var(--oro-cl);
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.hero__etiq .ico { width: 15px; height: 15px; color: var(--oro); }
.hero h1 {
  margin: 14px 0 8px; font: 600 clamp(2rem, 8.4vw, 2.75rem)/1.04 var(--display); letter-spacing: -.02em;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--oro); }
.hero p { margin: 0 0 18px; color: rgba(255, 255, 255, .82); max-width: 40ch; }
.hero__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hero__pasos li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: rgba(255, 255, 255, .9); }
.hero__pasos .ico {
  width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: var(--oro);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}

.ultima {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px;
  background: #fff; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; font-weight: 600;
}
.ultima .ico { color: var(--verde); }
.ultima .ico--fin { margin-left: auto; color: var(--tinta-3); }

/* --- Cada paso ------------------------------------------------------------ */
.paso {
  background: var(--papel); border-radius: 24px; box-shadow: var(--sombra);
  padding: 20px 18px 18px; animation: subir .5s var(--ease) both;
}
.paso__t {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 600 1.32rem/1.15 var(--display); letter-spacing: -.01em;
}
.paso__t small { margin-left: auto; font: 500 .8rem var(--sans); color: var(--tinta-3); letter-spacing: .02em; }
.paso__n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--noche); color: var(--oro); font: 600 .92rem var(--sans);
}
.nota {
  display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0;
  color: var(--tinta-2); font-size: .9rem;
}
.nota .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--tinta-3); }
.nota--ojo { color: var(--ambar); }
.nota--ojo .ico { color: var(--ambar); }
.pista-sede {
  display: flex; align-items: center; gap: 8px; justify-content: center; margin: 4px 0;
  padding: 18px; border-radius: 18px; border: 2px dashed var(--crema-2); color: var(--tinta-2); font-size: .95rem;
}
.campo-error {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: #FDE8E6; color: var(--rojo-osc); font-size: .92rem; font-weight: 500;
}
.campo-error .ico { width: 17px; height: 17px; margin-top: 2px; }

/* --- 1 · Las sedes ---------------------------------------------------------- */
.sedes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sede {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  border: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.sede:active { transform: scale(.98); }
.sede--si { box-shadow: var(--sombra-si); }
.sede__foto { aspect-ratio: 16 / 9; background: var(--noche-2); overflow: hidden; }
.sede__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sede--si .sede__foto img { transform: scale(1.05); }
.sede__c { display: grid; gap: 3px; padding: 11px 12px 13px; }
.sede__c b { font: 600 1.06rem var(--display); }
.sede__c span { display: flex; gap: 4px; align-items: flex-start; font-size: .84rem; color: var(--tinta-2); line-height: 1.3; }
.sede__c span .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--rojo); }
.sede__c small { font-size: .78rem; color: var(--tinta-3); }
.sede__check, .kit__check {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--oro); color: var(--noche);
  transform: scale(0); transition: transform .3s var(--ease);
}
.sede__check .ico, .kit__check .ico { width: 16px; height: 16px; stroke-width: 3; }
.sede--si .sede__check, .kit--si .kit__check { transform: scale(1); }

/* --- 2 · Los días ---------------------------------------------------------- */
.dias {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 10px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.dias::-webkit-scrollbar { display: none; }
.dias__mes {
  flex: none; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-osc);
  padding: 0 2px;
}
.dia {
  position: relative; flex: none; width: 62px; padding: 10px 0 11px; scroll-snap-align: start;
  display: grid; justify-items: center; gap: 2px; border: 0; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 1px var(--linea);
  transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.dia small { font-size: .74rem; font-weight: 600; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.dia b { font: 600 1.45rem/1 var(--display); }
.dia--rojo b { color: var(--rojo); }
.dia__festivo { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); }
.dia:active { transform: scale(.95); }
.dia--si { background: var(--noche); box-shadow: 0 10px 20px -10px rgba(28, 19, 16, .7); }
.dia--si small { color: var(--oro-cl); }
.dia--si b, .dia--rojo.dia--si b { color: #fff; }
.dia--si .dia__festivo { background: var(--oro); }

/* --- 3 · Las horas --------------------------------------------------------- */
.franja + .franja { margin-top: 14px; }
.franja h3 {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font: 600 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.franja h3 .ico { width: 16px; height: 16px; color: var(--oro-osc); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.hora {
  padding: 12px 6px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linea);
  font-weight: 600; font-size: .98rem; transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.hora:active { transform: scale(.96); }
.hora--si { background: var(--noche); color: #fff; box-shadow: 0 10px 20px -10px rgba(28, 19, 16, .7); }

/* --- 4 · Personas ---------------------------------------------------------- */
.personas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--linea);
}
.personas__b {
  display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 16px;
  background: var(--crema); color: var(--tinta); transition: transform .15s var(--ease), background .2s;
}
.personas__b:active { transform: scale(.92); background: var(--crema-2); }
.personas__b .ico { width: 24px; height: 24px; }
.personas__n { display: grid; justify-items: center; line-height: 1; }
.personas__n b { font: 600 2.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.personas__n span { margin-top: 4px; font-size: .86rem; color: var(--tinta-2); }

/* --- 5 · Decoración -------------------------------------------------------- */
.kits { display: grid; gap: 10px; }
.kit {
  position: relative; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--linea);
  transition: box-shadow .25s var(--ease);
}
.kit--si { box-shadow: var(--sombra-si); }
.kit__elegir, .kit--sin {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 48px 12px 12px;
  border: 0; background: transparent; text-align: left; border-radius: 18px;
}
.kit--sin { padding-top: 14px; padding-bottom: 14px; }
.kit__foto { flex: none; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; background: var(--crema); }
.kit__foto img { width: 100%; height: 100%; object-fit: cover; }
.kit__i {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--crema); color: var(--tinta-2);
}
.kit__i .ico { width: 24px; height: 24px; }
.kit__c { display: grid; gap: 2px; min-width: 0; }
.kit__c b { font: 600 1.05rem/1.2 var(--display); }
.kit__c > span { font-size: .88rem; color: var(--tinta-2); }
.kit__c .kit__precio { font-weight: 700; color: var(--oro-osc); font-size: .95rem; }
.kit__c .kit__res { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kit__mas { border-top: 1px dashed var(--linea); margin: 0 12px; padding: 0 0 4px; }
.kit__mas summary {
  display: flex; align-items: center; gap: 4px; padding: 10px 0 8px; list-style: none; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--tinta-2);
}
.kit__mas summary::-webkit-details-marker { display: none; }
.kit__mas summary .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.kit__mas[open] summary .ico { transform: rotate(90deg); }
.kit__mas ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.kit__mas li { display: flex; gap: 8px; font-size: .9rem; color: var(--tinta-2); }
.kit__mas li .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--verde); }
.kit__mas p { margin: 4px 0 8px; font-size: .84rem; color: var(--tinta-3); font-style: italic; }

/* --- 6 · Datos ------------------------------------------------------------- */
.campo { display: grid; gap: 6px; margin-top: 12px; }
.campo:first-of-type { margin-top: 0; }
.campo > span:first-child { font-weight: 600; font-size: .95rem; }
.campo small { font-weight: 400; color: var(--tinta-3); }
.campo__caja {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .2s;
}
.campo__caja:focus-within, .campo textarea:focus { box-shadow: 0 0 0 2px var(--oro); }
.campo__caja .ico { color: var(--tinta-3); }
.campo input, .campo textarea {
  width: 100%; border: 0; outline: 0; background: transparent; color: var(--tinta);
  font: 400 1.05rem var(--sans); padding: 14px 0;
}
.campo textarea {
  padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linea);
  resize: vertical; min-height: 84px;
}
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso-final {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 20px;
  background: var(--noche); color: rgba(255, 255, 255, .86); font-size: .92rem;
}
.aviso-final .ico { width: 24px; height: 24px; color: var(--oro); margin-top: 2px; }
.aviso-final p { margin: 0; }
.aviso-final b { color: #fff; }

/* --- La barra de abajo: lo elegido y la única acción ---------------------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(253, 244, 231, 0), rgba(253, 244, 231, .94) 26%);
}
.barra__c {
  max-width: 620px; margin: 0 auto; display: grid; gap: 8px; padding: 12px;
  background: var(--noche); border-radius: 22px; box-shadow: 0 18px 40px -16px rgba(28, 19, 16, .7);
}
.barra__res { display: flex; flex-wrap: wrap; gap: 6px 12px; color: rgba(255, 255, 255, .86); font-size: .86rem; min-height: 20px; }
.barra__res span { display: inline-flex; align-items: center; gap: 5px; }
.barra__res .ico { width: 15px; height: 15px; color: var(--oro); }

.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 22px; border: 0; border-radius: 16px; font-weight: 700; font-size: 1.04rem; text-decoration: none;
  transition: transform .15s var(--ease), filter .2s, opacity .2s;
}
.bt:active { transform: scale(.98); }
.bt--oro { background: linear-gradient(180deg, #E8B95A, var(--oro)); color: var(--noche); width: 100%; }
.bt--apagado { opacity: .55; }
.bt--ocupado { opacity: .7; pointer-events: none; }
.bt--oscuro { background: var(--noche); color: #fff; }
.bt--ancho { width: 100%; }

/* --- Ver una reserva -------------------------------------------------------- */
.estado {
  margin: 18px 0 0; text-align: center; padding: 26px 20px 24px; border-radius: 28px;
  background: #fff; box-shadow: var(--sombra); animation: subir .5s var(--ease) both;
}
.estado__gracias {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 6px 12px; border-radius: 99px;
  background: var(--oro-cl); color: var(--oro-osc); font-size: .88rem; font-weight: 600;
}
.estado__gracias .ico { width: 16px; height: 16px; }
.estado__i {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
}
.estado__i .ico { width: 36px; height: 36px; }
.estado--ambar .estado__i { background: var(--ambar-cl); color: var(--ambar); }
.estado--ambar .estado__i .ico { animation: arena 2.4s ease-in-out infinite; }
.estado--verde .estado__i { background: var(--verde-cl); color: var(--verde); animation: latir .6s var(--ease) both; }
.estado--rojo .estado__i { background: #FDE8E6; color: var(--rojo); }
.estado h1 { margin: 0 0 6px; font: 600 1.7rem/1.1 var(--display); letter-spacing: -.01em; }
.estado p { margin: 0 auto; max-width: 36ch; color: var(--tinta-2); }

.boleto {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; padding: 20px;
  border-radius: 24px; background: var(--noche); color: #fff; overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(28, 19, 16, .8); animation: subir .5s .08s var(--ease) both;
}
.boleto::before {
  content: ''; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%;
  background: radial-gradient(closest-side, rgba(217, 164, 65, .25), rgba(217, 164, 65, 0));
}
.boleto__hoja {
  position: relative; display: grid; justify-items: center; align-content: center; width: 74px; padding: 8px 0 10px;
  border-radius: 16px; background: var(--papel); color: var(--tinta); line-height: 1;
}
.boleto__hoja span { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo); }
.boleto__hoja b { font: 600 2rem/1.05 var(--display); margin: 4px 0 2px; }
.boleto__hoja small { font-size: .74rem; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.boleto__hoja--roja b { color: var(--rojo); }
.boleto__c { position: relative; align-self: center; min-width: 0; }
.boleto__num { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); font-weight: 600; }
.boleto__c h2 { margin: 4px 0 4px; font: 600 1.3rem/1.15 var(--display); }
.boleto__hora { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .85); font-weight: 600; }
.boleto__hora .ico { width: 17px; height: 17px; color: var(--oro); }
.boleto__datos {
  position: relative; grid-column: 1 / -1; list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, .2); display: grid; gap: 10px;
}
.boleto__datos li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .88); font-size: .95rem; }
.boleto__datos .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--oro); }
.boleto__datos b { color: #fff; font-weight: 600; }

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.accion {
  display: flex; align-items: center; gap: 10px; padding: 14px; border: 0; border-radius: 18px;
  background: #fff; box-shadow: var(--sombra); color: var(--tinta); text-decoration: none;
  font-weight: 600; font-size: .92rem; text-align: left; line-height: 1.2;
}
.accion .ico {
  width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--crema); color: var(--rojo);
}
.guarda { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--tinta-2); font-size: .9rem; }
.guarda .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--tinta-3); }
.otra {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 0;
  color: var(--tinta-2); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.otra .ico { width: 17px; height: 17px; }

.toast {
  position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 14px;
  background: var(--noche); color: #fff; font-size: .94rem; box-shadow: var(--sombra);
  transition: opacity .25s, transform .25s var(--ease);
}
.toast--si { opacity: 1; transform: translate(-50%, 0); }

/* --- Pantalla ancha: la misma columna, con más aire ------------------------- */
@media (min-width: 680px) {
  main { gap: 22px; }
  .hero { margin: 18px 0 0; border-radius: 32px; min-height: 420px; }
  .hero__c { padding: 80px 36px 34px; }
  .paso { padding: 26px 26px 24px; }
  .dias { margin: 0 -26px; padding: 4px 26px 10px; }
}
@media (max-width: 360px) {
  .sedes { grid-template-columns: 1fr; }
  .acciones { grid-template-columns: 1fr; }
}

@keyframes gira { to { transform: rotate(360deg); } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { transform: scale(1.14); } to { transform: scale(1.04); } }
@keyframes latir { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes arena { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}