/* ─── Reserva embebida — ZACO. ────────────────────────────────────────
   Misma paleta y mismas familias que index.html: tinta de noche, cobre
   del cartel, acero cepillado de la marquesina, esquinas de 1px.
   Nada acá se usa fuera del modal.                                     */

.tb-ov{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,10,14,.82);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s ease;
}
.tb-ov[hidden]{ display:none; }
.tb-ov.tb-in{ opacity:1; }

.tb-sheet{
  position:relative;
  width:100%; max-width:640px;
  display:flex; flex-direction:column;
  background:var(--ink, #101319);
  color:var(--bone, #E9E7E1);
  border:0; border-radius:0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.tb-ov.tb-in .tb-sheet{ transform:none; }

/* Móvil: pantalla completa. El teléfono no es una ventanita — nada de la
   página se ve por detrás, y solo el cuerpo del paso scrollea. */
@media (max-width:759px){
  .tb-ov{ align-items:stretch; padding:0; }
  .tb-sheet{
    max-width:none;
    height:100vh; height:100dvh;
    transform:translateY(100%);
  }
  .tb-head{ padding-top:max(8px, env(safe-area-inset-top)); }
}

/* Desktop: panel centrado, con el marco de acero del sitio. */
@media (min-width:760px){
  .tb-ov{ align-items:center; padding:24px; }
  .tb-sheet{
    max-height:88vh;
    border:1px solid var(--steel-line, #333C48);
    border-radius:1px;
    box-shadow:0 30px 80px -40px rgba(0,0,0,.95);
    transform:translateY(14px);
  }
}
@media (prefers-reduced-motion:reduce){
  .tb-ov, .tb-sheet{ transition:none; }
  .tb-sheet{ transform:none; }
}

/* ── Marquesina de acero, igual que la del sitio ── */
.tb-head{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.05) 1px 3px),
    linear-gradient(177deg, var(--plate-a,#D2D5D7) 0%, #C3C7CA 38%, var(--plate-b,#A7ACB0) 72%, #BCC0C3 100%);
  border-bottom:1px solid rgba(0,0,0,.35);
  flex:0 0 auto;
}
.tb-head .mark{ --mh:17px; }
.tb-head h2{
  margin:0; flex:1 1 auto;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#2A3038;
}
.tb-x{
  flex:0 0 auto;
  width:44px; height:44px; padding:0; margin:-8px -9px -8px 0;
  background:transparent; border:0; cursor:pointer;
  color:#2A3038; font-size:22px; line-height:1;
  font-family:var(--f-display, Archivo, sans-serif);
}
.tb-x:hover{ color:var(--copper-dp, #A4653C); }
.tb-x:focus-visible{ outline:2px solid #2A3038; outline-offset:1px; }

/* ── Cuerpo ── */
.tb-body{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(18px,4vw,26px) clamp(16px,4vw,26px) 34px;
  min-height:min(40vh, 260px);
  display:flex; flex-direction:column;
}
/* `margin-block:auto` centra la pantalla en el alto libre y, cuando el paso
   no entra, sigue dejando scrollear desde arriba (justify-content no). */
.tb-pantalla{ width:100%; margin-block:auto; }
/* ── El riel de progreso: 1 · 2 · 3 · 4 · 5 ── */
.tb-prog{
  flex:0 0 auto;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px clamp(16px,4vw,26px);
  border-bottom:1px solid var(--steel-line, #333C48);
  background:var(--ink-2, #171B23);
}
.tb-prog[hidden]{ display:none; }
.tb-prog__ns{
  display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none;
}
.tb-prog__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:1px;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:#5B626B; border:1px solid transparent;
}
.tb-prog__n + .tb-prog__n::before{
  content:"·"; color:var(--steel-line, #333C48); margin:0 7px 0 -1px;
}
.tb-prog__n.es-hecho{ color:var(--copper-lt, #DCA274); }
.tb-prog__n.es-hoy{
  color:#14100C; background:var(--copper, #C17C46); border-color:var(--copper, #C17C46);
}
.tb-prog__t{
  margin:0;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--concrete, #9DA0A0);
}

/* ── La pregunta de cada pantalla ── */
.tb-q{
  margin:0 0 18px;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:clamp(1.35rem,4.6vw,1.8rem); font-weight:600;
  letter-spacing:-.028em; line-height:1.06; color:var(--bone, #E9E7E1);
}

/* ── El resumen del pie ── */
.tb-sum{
  flex:1 1 auto; min-width:0; margin:0;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--bone, #E9E7E1);
}
.tb-sum__sep{ color:var(--steel-line, #333C48); margin:0 5px; }
.tb-sum__x{ color:var(--copper-lt, #DCA274); }
.tb-sum__b{
  background:none; border:0; padding:2px 0; cursor:pointer;
  font:inherit; color:var(--bone, #E9E7E1);
  border-bottom:1px dotted var(--steel-line, #333C48);
}
.tb-sum__b:hover{ color:var(--copper-lt, #DCA274); border-bottom-color:var(--copper, #C17C46); }
.tb-sum__b:focus-visible{ outline:2px solid var(--copper-lt,#DCA274); outline-offset:2px; }

.tb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tb-chips--dias{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:8px;
}
.tb-chips--dias .tb-chip{ min-width:0; }

.tb-chip{
  min-height:44px;
  display:inline-flex; flex-direction:column; justify-content:center; gap:3px;
  padding:8px 15px; border-radius:1px; cursor:pointer;
  background:var(--ink-2, #171B23);
  border:1px solid var(--steel-line, #333C48);
  color:var(--bone, #E9E7E1);
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:13px; font-weight:600; letter-spacing:.02em; text-align:left;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.tb-chip small{
  font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--concrete, #9DA0A0);
}
.tb-chip:hover{ border-color:var(--copper, #C17C46); }
.tb-chip[aria-pressed="true"]{
  background:var(--copper, #C17C46); border-color:var(--copper, #C17C46); color:#14100C;
}
.tb-chip[aria-pressed="true"] small{ color:#40301F; }
.tb-chip:focus-visible{ outline:2px solid var(--copper-lt,#DCA274); outline-offset:2px; }
.tb-chip--hour{ min-width:78px; align-items:center; text-align:center; font-variant-numeric:tabular-nums; }
.tb-chip--day{ min-width:0; }

/* ── El chip del paso 1: se tilda, y varios a la vez ── */
.tb-chip--sv{ flex-direction:row; align-items:center; gap:11px; padding-left:12px; }
.tb-chip__t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tb-chip__tick{
  flex:0 0 auto; width:16px; height:16px; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--steel-line, #333C48); background:transparent;
  transition:background .16s ease, border-color .16s ease;
}
.tb-chip__tick svg{ width:12px; height:12px; opacity:0; color:var(--copper, #C17C46); }
.tb-chip--sv[aria-pressed="true"] .tb-chip__tick{ background:#14100C; border-color:#14100C; }
.tb-chip--sv[aria-pressed="true"] .tb-chip__tick svg{ opacity:1; }
.tb-chip--sv:hover:not(:disabled) .tb-chip__tick{ border-color:var(--copper, #C17C46); }
/* Bloqueado por la regla de `sumable`: se ve, con el motivo, pero no se toca. */
.tb-chip--no{ opacity:.42; cursor:not-allowed; }
.tb-chip--no:hover{ border-color:var(--steel-line, #333C48); }
.tb-mini--sv{ margin-top:14px; }

.tb-note{
  font-family:var(--f-text, Newsreader, Georgia, serif);
  font-size:.98rem; font-weight:300; color:#A8A5A0; margin:0;
}
.tb-note--wait{ color:var(--concrete,#9DA0A0); }
.tb-err{
  border-left:2px solid var(--copper-dp, #A4653C);
  padding:2px 0 2px 16px; margin:0 0 16px;
  font-family:var(--f-text, Newsreader, Georgia, serif);
  font-size:1rem; font-weight:300; color:#D9CFC5;
}

/* ── Pie ── */
.tb-foot{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  padding:10px clamp(16px,4vw,26px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--steel-line, #333C48);
  background:var(--ink-2, #171B23);
}
.tb-foot__row{
  display:flex; align-items:center; gap:14px; min-height:48px;
}
.tb-foot__row .tb-btn{ margin-left:auto; flex:0 0 auto; }
.tb-hint{
  flex:1 1 auto; min-width:0; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--f-text, Newsreader, Georgia, serif);
  font-size:.95rem; font-weight:300; color:#A8A5A0;
}
.tb-btn{
  min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:1px; cursor:pointer;
  border:1px solid transparent; text-decoration:none;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.tb-btn--solid{ background:var(--copper, #C17C46); color:#14100C; }
.tb-btn--solid:hover:not(:disabled){ background:var(--copper-lt, #DCA274); }
.tb-btn--solid:disabled{ background:var(--ink-3, #1E242E); color:#6E747C; cursor:not-allowed; }
.tb-btn--ghost{ border-color:var(--steel-line, #333C48); color:var(--bone,#E9E7E1); background:transparent; }
.tb-btn--ghost:hover{ border-color:var(--copper, #C17C46); color:var(--copper-lt, #DCA274); }
.tb-btn:focus-visible{ outline:2px solid var(--copper-lt,#DCA274); outline-offset:3px; }
.tb-back{
  background:none; border:0; padding:8px 0; cursor:pointer; flex:0 0 auto;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--concrete,#9DA0A0);
}
.tb-back:hover{ color:var(--copper-lt, #DCA274); }

/* ── Identidad ── */
.tb-id{ display:flex; flex-direction:column; gap:18px; padding-top:6px; }
.tb-id h3{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:clamp(1.35rem,4.4vw,1.75rem); font-weight:600;
  letter-spacing:-.028em; line-height:1.08; margin:0; color:var(--bone,#E9E7E1);
}
.tb-field{ display:flex; flex-direction:column; gap:8px; }
.tb-label{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--concrete,#9DA0A0);
}
.tb-inputwrap{
  display:flex; align-items:stretch;
  border:1px solid var(--steel-line,#333C48); background:var(--ink-2,#171B23);
  border-radius:1px;
}
.tb-inputwrap:focus-within{ border-color:var(--copper,#C17C46); }
.tb-prefix{
  display:flex; align-items:center; padding:0 12px;
  border-right:1px solid var(--steel-line,#333C48);
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:14px; font-weight:600; color:var(--concrete,#9DA0A0);
  font-variant-numeric:tabular-nums;
}
.tb-input{
  flex:1 1 auto; min-width:0; min-height:52px;
  background:transparent; border:0; outline:0; color:var(--bone,#E9E7E1);
  padding:0 14px;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:17px; font-weight:600; letter-spacing:.04em;
}
.tb-input::placeholder{ color:#5B626B; font-weight:400; letter-spacing:.02em; }
.tb-input--code{ letter-spacing:.5em; text-align:center; font-size:20px; }
.tb-mini{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:11px; letter-spacing:.06em; color:#6E747C; margin:0;
}
.tb-linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--copper-lt,#DCA274); text-decoration:underline;
}
.tb-linkish:disabled{ color:#6E747C; text-decoration:none; cursor:default; }

/* Cargando */
.tb-load{
  display:inline-block; width:13px; height:13px; border-radius:50%;
  border:2px solid var(--steel-line,#333C48); border-top-color:var(--copper,#C17C46);
  animation:tb-spin .8s linear infinite; vertical-align:-2px; margin-right:8px;
}
@keyframes tb-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .tb-load{ animation:none; } }

/* ─── Lo vivo en la página: precios, equipo, horarios y huecos ───────── */

/* Pill de ejemplo — cuando la agenda todavía no tiene datos cargados */
.tb-demo{
  display:inline-block; max-width:100%; line-height:1.5;
  margin:0 0 18px; padding:8px 14px; border-radius:1px;
  border:1px solid var(--copper-dp, #A4653C);
  background:rgba(193,124,70,.10);
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--copper-lt, #DCA274);
}
.tb-demo::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--copper, #C17C46); margin-right:9px; vertical-align:middle;
}
.tb-demo[hidden]{ display:none; }

/* Servicios */
.precios{ border-top:1px solid var(--steel-line, #333C48); }
.precios__row{
  display:grid; grid-template-columns:1fr auto; gap:4px 20px;
  align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--steel-line, #333C48);
}
.precios__n{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:1.06rem; font-weight:600; letter-spacing:-.01em;
  color:var(--bone, #E9E7E1); min-width:0;
}
.precios__p{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:1.06rem; font-weight:600; letter-spacing:-.01em;
  color:var(--copper-lt, #DCA274); text-align:right;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.precios__d{
  grid-column:1/-1; grid-row:2;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--concrete, #9DA0A0);
}
.precios__n{ grid-column:1; grid-row:1; }
.precios__p{ grid-column:2; grid-row:1; }
@media (min-width:640px){
  .precios__row{ grid-template-columns:minmax(0,1fr) auto auto; }
  .precios__d{ grid-column:2; grid-row:1; text-align:right; }
  .precios__p{ grid-column:3; grid-row:1; min-width:120px; }
}

/* Equipo */
.equipo{
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--steel-line, #333C48);
  border-left:1px solid var(--steel-line, #333C48);
}
@media (max-width:359px){ .equipo{ grid-template-columns:1fr; } }
@media (min-width:700px){ .equipo{ grid-template-columns:repeat(3,1fr); } }
.equipo__p{
  background:var(--ink, #101319);
  border-right:1px solid var(--steel-line, #333C48);
  border-bottom:1px solid var(--steel-line, #333C48);
  display:flex; align-items:center; gap:14px;
  padding:16px clamp(14px,2vw,20px);
}
.equipo__f{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  object-fit:cover; background:var(--ink-3, #1E242E);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--steel-line, #333C48);
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:15px; font-weight:700; letter-spacing:.04em;
  color:var(--copper-lt, #DCA274);
}
.equipo__t{ min-width:0; }
.equipo__n, .equipo__r{ overflow-wrap:anywhere; }
.equipo__n{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
  color:var(--bone, #E9E7E1);
}
.equipo__r{
  display:block; margin-top:2px;
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--concrete, #9DA0A0);
}

/* Horarios */
.horarios{ display:flex; flex-direction:column; gap:3px; }
.horarios span{ display:block; }
.estado{
  display:inline-flex; align-items:center; gap:9px;
  margin:0; padding:7px 13px; border-radius:1px; width:max-content;
  border:1px solid var(--steel-line, #333C48);
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--concrete, #9DA0A0);
}
.estado::before{ content:""; width:7px; height:7px; border-radius:50%; background:#6E747C; }
.estado--on{ color:#7FD2A3; border-color:#2C5A43; }
.estado--on::before{ background:#1E7F4E; box-shadow:0 0 0 3px rgba(30,127,78,.22); }
.estado[hidden]{ display:none; }

/* Banda de próximos huecos */
.libres{
  background:var(--ink-2, #171B23);
  border-block:1px solid var(--steel-line, #333C48);
}
.libres[hidden]{ display:none; }
.libres__in{
  width:100%; max-width:var(--maxw, 1180px); margin-inline:auto;
  padding:16px var(--pad, 24px);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
}
.libres__t{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--concrete, #9DA0A0); margin:0; flex:0 0 auto;
}
.libres__hs{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; }
.libres__h{
  min-height:44px; display:inline-flex; align-items:center;
  padding:9px 16px; border-radius:1px; cursor:pointer;
  background:transparent; border:1px solid var(--steel-line, #333C48);
  color:var(--bone, #E9E7E1);
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.libres__h:hover{ background:var(--copper, #C17C46); border-color:var(--copper, #C17C46); color:#14100C; }
.libres__h:focus-visible{ outline:2px solid var(--copper-lt,#DCA274); outline-offset:3px; }
.libres__more{
  font-family:var(--f-display, Archivo, sans-serif);
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper-lt, #DCA274); background:none; border:0; cursor:pointer;
  padding:12px 0; flex:0 0 auto;
}
.libres__more:hover{ color:var(--copper, #C17C46); }
.libres .tb-demo{ margin:0; flex:1 1 100%; }

/* ── Densidad en pantallas angostas: el CTA se ve sin scrollear ────── */
@media (max-width:430px){
  .tb-q,
  .tb-id h3{ font-size:1.4rem; line-height:1.1; }
  .tb-id{ gap:14px; }
  .tb-note{ font-size:.94rem; }
  .tb-chip{ padding:8px 13px; }
  .tb-prog__t{ font-size:10px; letter-spacing:.16em; }
}