/* =====================================================================
   Pro Racing Park · reservar en una pantalla
   Cuatro preguntas que se abren de a una. Todo lo que no ayude a
   completar la reserva no entra acá. La hoja también la usan /grupos y el
   comprobante (.formulario, .resumen, .comprobante, .vacio).
   ===================================================================== */

.reserva-pagina{padding:100px var(--borde-pagina) var(--e-8);max-width:820px;margin-inline:auto}

.cabeza-reserva{margin-bottom:var(--e-7)}
.cabeza-reserva .kicker{margin-bottom:var(--e-3)}
.titulo-paso{font-size:clamp(34px,7vw,64px);margin-bottom:var(--e-3)}
.ayuda{color:var(--humo);font-size:16px;line-height:1.55;max-width:56ch}
.aviso-servicio{margin-top:var(--e-4);border:1px solid var(--amarillo-55);background:var(--amarillo-08);
  padding:var(--e-4);font-size:15px;color:var(--blanco);line-height:1.5}
.aviso-servicio a{color:var(--amarillo)}

/* ------------------------------------------------------------- bloques */
.bloque{padding:var(--e-6) 0;border-top:1px solid var(--linea)}
.bloque.abierto{animation:entrarBloque .5s var(--ease) both}
@keyframes entrarBloque{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.titulo-bloque{font-size:clamp(24px,4.4vw,34px);display:flex;align-items:baseline;gap:var(--e-3);margin-bottom:var(--e-4)}
.titulo-bloque .n{font-family:var(--mono);font-size:12px;letter-spacing:var(--tr-medio);color:var(--humo-tenue);
  border:1px solid var(--amarillo-55);padding:3px 8px;transform:translateY(-3px)}
.bloque .ayuda{margin-bottom:var(--e-4)}

/* ------------------------------------------------------- 1: cuántos son */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:560px){.numeros{grid-template-columns:repeat(7,1fr)}}
.numero{border:1px solid var(--linea);background:transparent;color:var(--blanco);cursor:pointer;
  padding:14px 6px 12px;display:grid;gap:2px;text-align:center;min-height:72px;
  transition:border-color var(--d-rapida),background var(--d-media),transform var(--d-presion) var(--ease)}
.numero b{font-family:var(--display);font-size:32px;line-height:1;font-weight:900}
.numero span{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-ancho);text-transform:uppercase;color:var(--humo)}
.numero:hover{border-color:var(--linea-clara);background:var(--carbon)}
.numero:active{transform:scale(.96)}
.numero[aria-pressed="true"]{border-color:var(--amarillo);background:var(--amarillo-08)}
.numero[aria-pressed="true"] b{color:var(--amarillo)}
.numero.pocos b{color:var(--humo)}
.numero.pocos[aria-pressed="true"] b{color:var(--amarillo)}
.numero.grupo{grid-column:span 2}
@media(min-width:560px){.numero.grupo{grid-column:auto}}

.tarjeta-wa{margin-top:var(--e-5);border:1px solid var(--linea-clara);background:var(--carbon);padding:var(--e-5);
  display:grid;gap:var(--e-3);animation:entrarBloque .4s var(--ease)}
.tarjeta-wa .t{font-family:var(--display);text-transform:uppercase;font-size:24px;line-height:1;color:var(--blanco)}
.tarjeta-wa .s{color:var(--texto);font-size:15px;line-height:1.55;max-width:60ch}
.tarjeta-wa .btn{justify-self:start;margin-top:var(--e-2)}

/* ---------------------------------------------------------- 2: qué día */
.semana-nav{display:flex;align-items:center;gap:var(--e-3);margin-bottom:var(--e-3)}
.semana-titulo{font-family:var(--mono);font-size:11px;letter-spacing:var(--tr-ancho);text-transform:uppercase;color:var(--humo);flex:1;text-align:center}
.flecha{width:40px;height:40px;border:1px solid var(--linea-clara);background:transparent;color:var(--blanco);
  font-size:22px;line-height:1;cursor:pointer;transition:border-color var(--d-rapida),color var(--d-rapida)}
.flecha:hover:not(:disabled){border-color:var(--amarillo);color:var(--amarillo)}
.flecha:disabled{opacity:.3;cursor:not-allowed}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dia{padding:10px 4px 9px;border:1px solid var(--linea);background:transparent;cursor:pointer;text-align:center;
  font-family:var(--mono);position:relative;min-height:72px;
  transition:border-color var(--d-rapida),background var(--d-media),transform var(--d-presion) var(--ease)}
.dia .sem{display:block;font-size:10px;letter-spacing:var(--tr-ancho);text-transform:uppercase;color:var(--humo)}
.dia .num{display:block;font-family:var(--display);font-size:26px;font-weight:900;color:var(--blanco);line-height:1.1;margin:3px 0 1px}
.dia .mes{display:block;font-size:10px;color:var(--humo);text-transform:uppercase}
.dia .lugar{position:absolute;left:50%;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--verde);transform:translateX(-50%)}
.dia:hover{border-color:var(--linea-clara);background:var(--carbon)}
.dia:active{transform:scale(.96)}
.dia[aria-pressed="true"]{border-color:var(--amarillo);background:var(--amarillo-08)}
.dia[aria-pressed="true"] .num{color:var(--amarillo)}
.dia.sin-lugar .num{color:var(--humo-tenue);text-decoration:line-through}
.dia.sin-lugar .lugar{display:none}

/* Feriados y fines de semana largos (migración 47), en la escala del
   amarillo de la marca (Juan, 2026-09-27: el naranja se leía como rojo y
   parecía "ocupado"). Acá el amarillo ya marca el día elegido, así que la
   diferencia la hace la forma: el feriado se anuncia con una barra arriba
   del botón, y el día elegido es el único con el borde amarillo entero.
   La barra se estira hacia los costados para tapar el hueco de 6 px entre
   botones, salvo en las puntas del bloque: así tres días seguidos se leen
   como un bloque y no como tres días sueltos, que es como lo piensa el
   que está eligiendo cuándo venir. */
.dia.es-feriado::before,.dia.finde-largo::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;
  height:3px;background:var(--amarillo-oscuro)}
.dia.es-feriado .num{color:var(--amarillo-oscuro)}
.dia.finde-largo{background:var(--amarillo-05);border-color:var(--amarillo-30)}
.dia.finde-largo .num{color:var(--amarillo)}
.dia.finde-largo::before{height:4px;background:var(--amarillo)}
.dia.finde-largo.pos-inicio::before{left:-1px;right:-7px}
.dia.finde-largo.pos-medio::before{left:-7px;right:-7px}
.dia.finde-largo.pos-fin::before{left:-7px;right:-1px}
/* El día elegido: borde amarillo entero, que no lo tiene ningún feriado. */
.dia[aria-pressed="true"]{border-color:var(--amarillo);background:var(--amarillo-08)}
.dia[aria-pressed="true"] .num{color:var(--amarillo)}

.aviso-feriado{margin-top:var(--e-4);padding:9px 12px;border-left:2px solid var(--amarillo);
  background:var(--amarillo-08);color:var(--texto);font-size:13.5px;line-height:1.5}
.aviso-feriado .et{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-ancho);
  text-transform:uppercase;color:var(--amarillo);margin-right:6px}

/* -------------------------------------------------------- 3: a qué hora */
.franja{margin-bottom:var(--e-5)}
.franja-nombre{font-family:var(--mono);font-size:10px;letter-spacing:var(--tr-ancho);text-transform:uppercase;color:var(--humo);
  margin-bottom:10px;display:flex;justify-content:space-between}
.franja-nombre small{font-size:10px;letter-spacing:0;text-transform:none}
.horas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(min-width:560px){.horas{grid-template-columns:repeat(6,1fr)}}
@media(min-width:760px){.horas{grid-template-columns:repeat(8,1fr)}}
.hora-chip{border:1px solid var(--linea);background:transparent;color:var(--blanco);cursor:pointer;
  font-family:var(--display);font-size:22px;padding:12px 4px;line-height:1;min-height:48px;
  transition:border-color var(--d-rapida),background var(--d-media),transform var(--d-presion) var(--ease)}
.hora-chip:hover{border-color:var(--linea-clara);background:var(--carbon)}
.hora-chip:active{transform:scale(.95)}
.hora-chip[aria-pressed="true"]{border-color:var(--amarillo);background:var(--amarillo);color:#000}
.vacio{border:1px dashed var(--linea-clara);padding:var(--e-6);text-align:center;color:var(--humo);line-height:1.6}
.enlace{background:none;border:0;padding:0;color:var(--amarillo);font:inherit;cursor:pointer;text-decoration:underline}

/* -------------------------------------------------------- 4: tu carrera */
.segmentado{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);margin-bottom:var(--e-5)}
@media(min-width:560px){.segmentado{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.opcion-prod{background:var(--negro);padding:var(--e-4);cursor:pointer;position:relative;display:grid;gap:3px;
  transition:background var(--d-media)}
.opcion-prod:hover{background:var(--carbon)}
.opcion-prod input{position:absolute;opacity:0;pointer-events:none}
.opcion-prod:has(input:checked){background:var(--carbon-alto);outline:1px solid var(--amarillo);outline-offset:-1px}
.opcion-prod .nom{font-family:var(--display);text-transform:uppercase;font-size:20px;color:var(--blanco);line-height:1}
.opcion-prod .val{font-family:var(--mono);font-size:19px;color:var(--blanco);font-variant-numeric:tabular-nums}
.opcion-prod .desc{font-size:13px;color:var(--humo);line-height:1.45}
.opcion-prod.no-vale{opacity:.4;cursor:not-allowed}

.formulario{display:grid;gap:var(--e-4);max-width:520px}
.formulario .entrada label em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--humo-tenue)}
.formulario .entrada input[type="date"]{background:var(--carbon);border:1px solid var(--linea);padding:13px 14px;
  font:inherit;font-size:18px;color:var(--blanco);width:100%;color-scheme:dark;min-height:52px;transition:border-color var(--d-rapida)}
.formulario .entrada input[type="date"]:focus{border-color:var(--amarillo);outline:none}

.resumen{border:1px solid var(--linea);padding:var(--e-5);margin-bottom:var(--e-5);
  display:grid;gap:8px;background:var(--carbon)}
.resumen div{display:flex;justify-content:space-between;gap:var(--e-4);font-size:15px;color:var(--texto)}
.resumen div b{color:var(--blanco);font-weight:700;text-align:right}
.resumen .total{border-top:1px solid var(--linea);padding-top:10px;margin-top:4px;font-size:19px}
.resumen .total b{font-family:var(--mono);color:var(--amarillo)}

/* ------------------------------------------------------ comprobante */
.comprobante{text-align:center;padding:var(--e-7) 0;border-top:0}
.comprobante .tilde{width:64px;height:64px;border:2px solid var(--verde);border-radius:50%;
  display:grid;place-items:center;margin:0 auto var(--e-5);color:var(--verde);font-size:30px;
  animation:aparecerTilde .6s var(--ease) backwards}
@keyframes aparecerTilde{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.codigo{font-family:var(--mono);font-size:clamp(34px,7vw,56px);letter-spacing:.18em;color:var(--amarillo);
  margin:var(--e-5) 0 var(--e-2)}
.comprobante .instruccion{color:var(--texto);max-width:46ch;margin:0 auto;line-height:1.55}
.comprobante .instruccion + .instruccion{margin-top:var(--e-2)}

/* lo que todavía usa /grupos */
.enviado{display:none;border:1px solid var(--linea);padding:var(--e-6);background:var(--carbon)}
.enviado.visible{display:block}
.par{display:grid;gap:var(--e-4)}
@media(min-width:560px){.par{grid-template-columns:1fr 1fr}}
.formulario select,.formulario textarea{background:var(--carbon);border:1px solid var(--linea);padding:13px 14px;
  font:inherit;font-size:18px;color:var(--blanco);width:100%}
.formulario textarea{min-height:110px;resize:vertical;line-height:1.5}

@media (prefers-reduced-motion: reduce){
  .bloque.abierto,.tarjeta-wa,.comprobante .tilde{animation:none}
}

/* ------------------------------- comprobante (/reserva/CODIGO) ---------
   Tres paneles en el mismo documento y uno solo visible: "buscando",
   el buscador por código y la reserva encontrada. js/reserva.js prende
   el que corresponde con la clase .activo. Esta regla se perdió al
   reescribir la hoja con el flujo nuevo de reserva y los tres quedaban
   apilados: la persona veía "Buscando tu reserva…" y el buscador arriba
   de su propia reserva. */
.panel{display:none}
.panel.activo{display:block}

/* ------------------------------------------- después del hero corto -----
   La regla de `.hero-corto` vive en estilo.css, porque también la usan las
   páginas legales, que no cargan esta hoja. Acá queda solo lo que es propio
   del flujo de reserva. */
/* Después del hero no hacen falta los 100px de aire de arriba. */
.reserva-pagina.tras-hero{padding-top:var(--e-7)}
.tras-hero .cabeza-reserva:empty,
.tras-hero .cabeza-reserva:has(.aviso-servicio[hidden]){margin-bottom:0}
.tras-hero .bloque:first-of-type{border-top:0;padding-top:0}

/* ------------------------------------------ ampliación del CRM (m. 44) ---
   Precio de valle en la hora, agregados y el código. Sin lugares restantes:
   eso es solo del mostrador (decisión de Juan, 2026-09-24). */
.hora-chip.con-valle{border-color:var(--amarillo-55)}
.hora-chip small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--amarillo);line-height:1;margin-top:3px}
.hora-chip[aria-pressed="true"] small{color:#000}
.nota-valle{margin-top:var(--e-3)}
.off-valle,.off-codigo{background:transparent;border:1px solid var(--amarillo-55);color:var(--amarillo)}

.agregados-reserva{border:1px solid var(--linea);margin-bottom:var(--e-5)}
.agregados-titulo{font-family:var(--display);text-transform:uppercase;font-size:18px;color:var(--blanco);padding:var(--e-4) var(--e-4) 6px;margin:0}
.agregados-titulo span{display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--tr-ancho);color:var(--humo);margin-top:4px}
.agregado{display:grid;grid-template-columns:1fr auto auto;gap:var(--e-4);align-items:center;padding:12px var(--e-4);border-top:1px solid var(--linea)}
.agregado.elegido{background:var(--carbon)}
.agregado .nom{font-size:16px;color:var(--blanco);font-weight:600;line-height:1.25}
.agregado .nom small{display:block;font-size:13px;font-weight:400;color:var(--humo);margin-top:2px}
.agregado .val{font-family:var(--mono);font-size:15px;color:var(--blanco);font-variant-numeric:tabular-nums;white-space:nowrap}
.contador{display:flex;align-items:center;border:1px solid var(--linea-clara)}
.contador button{width:44px;height:44px;background:transparent;border:0;color:var(--blanco);font-size:20px;cursor:pointer}
.contador button:hover:not([disabled]){background:var(--carbon-alto)}
.contador button:focus-visible{outline:2px solid var(--amarillo);outline-offset:-2px}
.contador button[disabled]{color:var(--humo-tenue);cursor:not-allowed}
.contador b{min-width:28px;text-align:center;font-family:var(--mono);font-size:16px;color:var(--blanco)}
.agregado.elegido .contador{border-color:var(--amarillo)}
@media(max-width:480px){.agregado{grid-template-columns:1fr auto}.agregado .contador{grid-column:1/-1;justify-self:start}}
#cCodigoCanal input{text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)}