/* ── Reserva embebida ─────────────────────────────────────────────────
   Same room as the rest of the site: paper, ink, one red, 1px rules and
   not a single rounded corner. The chips are the .hours table's cousins;
   the labels are the same Archivo at 'wdth' 70-ish that titles every
   section. Tokens come from index.html — this file adds no palette. */

.tb-ov{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:stretch; justify-content:center;
  background:rgba(12,12,11,.62);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
  backdrop-filter:saturate(120%) blur(2px);
  opacity:0;
  transition:opacity .22s ease;
}
.tb-ov[hidden]{ display:none; }
.tb-ov.tb-in{ opacity:1; }

/* En el teléfono el modal ES la pantalla: alto completo del viewport, sin
   dejar el sitio asomando arriba. Cabezal y pie quedan fijos y sólo el
   cuerpo del paso scrollea. En desktop vuelve a ser una ficha centrada. */
.tb-modal{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  max-height:none;
  display:flex; flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 -24px 60px -30px rgba(0,0,0,.7);
  transform:translateY(24px);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  font-family:"Newsreader","Iowan Old Style",Georgia,serif;
}
.tb-ov.tb-in .tb-modal{ transform:none; }

@media (min-width:760px){
  .tb-ov{ align-items:center; padding:24px; }
  .tb-modal{
    width:auto;
    max-width:840px;
    height:auto;
    max-height:88svh;
    border:1px solid var(--ink);
    border-top-width:2px;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.75);
  }
}

/* ── head ─────────────────────────────────────────────────────────── */
.tb-head{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:9px 16px;
  padding-top:calc(9px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.tb-logo{ flex:0 0 auto; display:block; }
.tb-logo img{ width:28px; height:28px; object-fit:contain; }
.tb-logo .logo-ink{ display:var(--logo-ink-d,block); }
.tb-logo .logo-bone{ display:var(--logo-bone-d,none); }
.tb-head .tb-t{
  flex:1; min-width:0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 74,'wght' 700;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
  margin:0;
}
.tb-x{
  appearance:none; -webkit-appearance:none;
  width:44px; height:44px; margin:-9px -10px -9px 0;
  background:transparent; border:0; cursor:pointer;
  color:var(--ink-2); font-size:24px; line-height:1;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
.tb-x:hover{ color:var(--red); }

/* ── body ─────────────────────────────────────────────────────────── */
/* ── progreso: 1 · 2 · 3 · 4 · 5 ──────────────────────────────────── */
.tb-prog{
  flex:0 0 auto;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.tb-prog[hidden]{ display:none; }
.tb-steps{
  display:flex; align-items:center; gap:9px;
  margin:0; padding:0; list-style:none;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
.tb-steps li{
  display:flex; align-items:center; gap:8px;
  color:var(--ink-3);
}
.tb-steps li + li::before{
  content:"";
  width:14px; height:1px; background:var(--line);
  display:block;
}
.tb-steps li b{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 auto;
  border:1px solid var(--line);
  font-variation-settings:'wdth' 100,'wght' 700;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.tb-steps li.done b{ border-color:var(--ink-3); color:var(--ink-2); }
.tb-steps li[aria-current="step"] b{
  background:var(--red); border-color:var(--red); color:#FFF;
}
.tb-steps li[aria-current="step"] span{
  font-variation-settings:'wdth' 72,'wght' 700;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
@media (max-width:430px){
  .tb-steps{ gap:6px; }
  .tb-steps li + li::before{ width:8px; }
  .tb-steps li[aria-current="step"] span{ letter-spacing:.12em; }
}

/* ── la pantalla del paso ─────────────────────────────────────────── */
.tb-panel{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px 16px 28px;
  min-height:140px;
}
.tb-panel.tb-enter{ animation:tb-slide .26s cubic-bezier(.22,.61,.36,1); }
@keyframes tb-slide{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:none; }
}
.tb-panel-head{ display:grid; gap:3px; margin-bottom:14px; }
.tb-panel-head h3{
  margin:0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 104,'wght' 800;
  font-size:clamp(1.4rem,5.6vw,2rem);
  line-height:1.04; letter-spacing:-.025em;
}
.tb-panel-head p{ color:var(--ink-2); font-size:14px; line-height:1.4; }

/* El hint va DEBAJO del campo: es una nota, no una bajada. */
.tb-hint{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 88,'wght' 500;
  font-size:12.5px; line-height:1.4;
  color:var(--ink-3);
  margin-top:-4px;
}

/* En pantallas chicas el título no puede comerse el paso entero. */
@media (max-width:430px){
  .tb-panel-head h3,
  .tb-id h3{ font-size:23px; }
  .tb-panel{ padding:14px 16px 24px; }
}

/* ── el resumen que se va llenando ────────────────────────────────── */
.tb-resume-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  flex-wrap:nowrap; overflow:hidden;
  padding:7px 16px;
  border-top:1px solid var(--line);
  background:var(--paper);
}
.tb-resume-bar .tb-crumb{
  min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tb-resume-bar[hidden]{ display:none; }
.tb-crumb{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:2px 0; cursor:pointer;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 84,'wght' 700;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.tb-crumb:hover{ color:var(--red); border-bottom-color:var(--red); }
.tb-resume-bar .tb-sep{ color:var(--ink-3); font-size:12px; }

.tb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tb-chips.tb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
}
.tb-chip{
  appearance:none; -webkit-appearance:none;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 92,'wght' 600;
  font-size:14px; letter-spacing:.01em; text-align:left;
  min-height:44px;
  padding:9px 14px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--line);
  cursor:pointer;
  display:inline-flex; flex-direction:column; justify-content:center; gap:2px;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tb-chip:hover{ border-color:var(--ink-3); }
.tb-chip small{
  font-variation-settings:'wdth' 70,'wght' 500;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.tb-chip[aria-pressed="true"]{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.tb-chip[aria-pressed="true"] small{ color:currentColor; opacity:.62; }
.tb-chip[disabled]{ opacity:.4; cursor:default; }
.tb-chip.tb-hour{
  align-items:center; text-align:center;
  font-variation-settings:'wdth' 104,'wght' 700;
  font-variant-numeric:tabular-nums;
  padding:9px 6px;
}
/* Paso 1 · se pueden tildar varios: cada chip lleva su casilla a la derecha */
.tb-chip.tb-pick{ position:relative; padding-right:42px; }
.tb-chip.tb-pick::after{
  content:"\2713";
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:19px; height:19px;
  display:grid; place-items:center;
  font-size:12px; line-height:1;
  border:1px solid var(--line);
  background:var(--card);
  color:transparent;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tb-chip.tb-pick[aria-pressed="true"]::after{
  background:var(--paper); border-color:var(--paper); color:var(--ink);
}
.tb-chip.tb-pick[disabled]::after{ content:""; }
/* el motivo por el que un servicio no se puede sumar, en lugar del precio */
.tb-chip.tb-pick[disabled] small{ font-variation-settings:'wdth' 70,'wght' 700; }

.tb-chip.tb-any{ border-style:dashed; }
.tb-chip.tb-any[aria-pressed="true"]{ border-style:solid; }

/* A pantalla completa, servicios y barberos ganan como barras al ancho:
   se tocan con el pulgar y no dejan medio modal en blanco. */
@media (max-width:759px){
  .tb-chips.tb-stack{ display:grid; grid-template-columns:1fr; gap:8px; }
  .tb-chips.tb-stack .tb-chip{
    flex-direction:row; align-items:baseline; justify-content:space-between;
    gap:12px; padding:16px;
    font-size:16px;
  }
  .tb-chips.tb-stack .tb-chip small{ text-align:right; flex:0 0 auto; }
  .tb-chips.tb-stack .tb-chip.tb-pick{ padding-right:48px; }
}

.tb-muted{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 88,'wght' 500;
  font-size:13px;
  color:var(--ink-3);
  padding-block:4px;
}
.tb-err{ color:var(--red); }

/* lo que se está reservando, arriba del último paso */
.tb-sum{
  margin:0 0 4px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 78,'wght' 600;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.45;
}

/* con una pantalla entera para el día, la grilla respira mejor que una tira */
.tb-chips.tb-grid-day{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}

/* ── foot ─────────────────────────────────────────────────────────── */
.tb-foot{
  flex:0 0 auto;
  display:grid; gap:7px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--paper-2);
}
.tb-foot-actions{ display:flex; align-items:center; gap:8px; }
.tb-foot-actions[hidden]{ display:none; }
.tb-foot-actions .tb-btn{ flex:1 1 auto; }
.tb-foot-actions .tb-btn-ghost{ flex:0 0 auto; }
.tb-help{
  min-width:0; margin:0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 88,'wght' 500;
  font-size:12.5px; line-height:1.3;
  color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-help.tb-err{ color:var(--red); font-variation-settings:'wdth' 88,'wght' 700; }
.tb-btn{
  appearance:none; -webkit-appearance:none;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:14px; letter-spacing:.02em;
  min-height:46px;
  padding:12px 18px;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .18s ease, color .18s ease, opacity .18s ease;
  white-space:nowrap;
}
.tb-btn[hidden]{ display:none; }
.tb-btn:hover:not([disabled]){ background:var(--red); border-color:var(--red); }
.tb-btn[disabled]{ opacity:.34; cursor:default; }
.tb-btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--line);
  font-variation-settings:'wdth' 80,'wght' 600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 14px;
}
.tb-btn-ghost:hover:not([disabled]){ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ── identidad ────────────────────────────────────────────────────── */
.tb-id{ padding-block:2px 8px; display:grid; gap:12px; max-width:34rem; }
.tb-id h3{
  margin:0;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 104,'wght' 800;
  font-size:clamp(1.44rem,5.4vw,1.9rem);
  line-height:1.05; letter-spacing:-.025em;
}
.tb-id p{ color:var(--ink-2); font-size:14px; line-height:1.45; }
.tb-field{ display:flex; align-items:stretch; border:1px solid var(--ink); background:var(--card); }
.tb-field .tb-pre{
  display:flex; align-items:center; padding:0 12px;
  border-right:1px solid var(--line);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 90,'wght' 700;
  font-size:15px; color:var(--ink-2);
  background:var(--paper-2);
}
.tb-field input{
  flex:1; min-width:0;
  appearance:none; -webkit-appearance:none;
  border:0; background:transparent; outline:0;
  padding:14px 12px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 600;
  font-size:17px; /* never below 16: iOS zooms */
  letter-spacing:.04em;
  color:var(--ink);
}
.tb-field input::placeholder{ color:var(--ink-3); font-variation-settings:'wdth' 90,'wght' 400; letter-spacing:.02em; }
.tb-field:focus-within{ outline:2px solid var(--red); outline-offset:2px; }
.tb-code input{ letter-spacing:.5em; font-size:24px; text-align:center; font-variant-numeric:tabular-nums; }

.tb-resume{
  border-top:1px solid var(--line);
  margin-top:6px; padding-top:12px;
  display:grid; gap:4px;
}
.tb-resume dt{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 70,'wght' 600;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}
.tb-resume dd{
  margin:0 0 8px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 96,'wght' 700;
  font-size:16px;
}

/* ── spinner ──────────────────────────────────────────────────────── */
.tb-spin{
  width:14px; height:14px; flex:0 0 auto;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%;
  animation:tb-rot .7s linear infinite;
}
@keyframes tb-rot{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .tb-ov, .tb-modal, .tb-chip, .tb-btn{ transition:none; }
  .tb-spin{ animation:none; }
}

body.tb-lock{ overflow:hidden; }

/* ══ Lo que la API pinta en la página ═══════════════════════════════════
   Mismo idioma que el resto del sitio: reglas de 1px, Archivo condensada
   en las etiquetas, Newsreader en el cuerpo, y el rojo sólo para marcar. */

.tb-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px dashed var(--red);
  padding:6px 11px;
  width:max-content; max-width:100%;
  margin-block:10px 14px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
  font-variation-settings:'wdth' 74,'wght' 500;
}
.tb-pill b{ color:var(--red); font-variation-settings:'wdth' 90,'wght' 800; letter-spacing:.2em; }

/* ── precios en «Lo que hacemos» ─────────────────────────────────────── */
.svc li.tb-svc-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.tb-svc-name{ min-width:0; }
.tb-svc-meta{
  flex:0 0 auto;
  display:flex; align-items:baseline; gap:8px;
  font-variation-settings:'wdth' 88,'wght' 600;
}
.tb-svc-meta b{
  font-size:clamp(.95rem,2.6vw,1.15rem);
  letter-spacing:-.01em;
  font-variation-settings:'wdth' 100,'wght' 700;
  font-variant-numeric:tabular-nums;
}
.tb-svc-meta small{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  font-variation-settings:'wdth' 70,'wght' 500;
}

/* ── tira de huecos ──────────────────────────────────────────────────── */
#agenda{ padding-block:calc(var(--u) * 1.6); border-top:1px solid var(--line); }
#agenda[hidden]{ display:none; }
.tb-strip{ display:grid; gap:12px; }
.tb-strip-body{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tb-strip-row{
  display:flex; gap:8px;
  flex:0 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.tb-strip-row::-webkit-scrollbar{ display:none; }
.tb-slot{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  min-height:44px; padding:8px 15px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line);
  cursor:pointer;
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:1px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tb-slot b{ font-size:16px; font-variation-settings:'wdth' 104,'wght' 700; font-variant-numeric:tabular-nums; }
.tb-slot small{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  font-variation-settings:'wdth' 70,'wght' 500;
}
.tb-slot:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tb-slot:hover small{ color:currentColor; opacity:.6; }
.tb-strip-cta{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  min-height:44px; padding:11px 20px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); cursor:pointer;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:14px; letter-spacing:.02em;
  transition:background-color .18s ease, border-color .18s ease;
}
.tb-strip-cta:hover{ background:var(--red); border-color:var(--red); }

/* ── equipo ──────────────────────────────────────────────────────────── */
#equipo{ padding-block:calc(var(--u) * 3); border-top:1px solid var(--line); }
#equipo[hidden]{ display:none; }
.tb-team{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:var(--gut);
}
@media (min-width:900px){
  #equipo{ padding-block:calc(var(--u) * 4); }
  .tb-team{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
}
.tb-member{ display:grid; gap:10px; }
.tb-av{
  aspect-ratio:1/1;
  background:var(--paper-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.tb-av img{ width:100%; height:100%; object-fit:cover; }
.tb-av span{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(1.6rem,6vw,2.6rem);
  letter-spacing:-.02em;
  color:var(--ink-3);
}
.tb-member-name{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:'wdth' 96,'wght' 700;
  font-size:clamp(1rem,3.2vw,1.2rem);
  letter-spacing:-.015em;
}
.tb-team.tb-team-solo{ grid-template-columns:1fr; }
.tb-team-solo .tb-member{
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
  max-width:34rem;
}
.tb-team-solo .tb-av{ width:104px; aspect-ratio:1/1; }
.tb-team-solo .tb-av span{ font-size:2.2rem; }
.tb-team-solo .tb-member-name{ font-size:clamp(1.3rem,5vw,1.9rem); }