/* ============================================================
   Barbería Jean Pierre — reserva embebida (wizard de 5 pasos)
   Misma paleta y misma tipografía que el sitio: papel marfil,
   tinta negra, filetes de 1px, nada redondeado, versalitas.
   ============================================================ */

.tb-root{position:fixed;inset:0;z-index:200;display:none}
.tb-root.tb-open{display:block}
html.tb-locked,body.tb-locked{overflow:hidden}

.tb-veil{
  position:absolute;inset:0;
  background:rgba(19,19,19,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:tb-fade .22s ease both;
}
@keyframes tb-fade{from{opacity:0}to{opacity:1}}
@keyframes tb-rise{from{transform:translateY(2%)}to{transform:none}}
@keyframes tb-slide{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* ---------- el panel ---------- */
/* En el teléfono ocupa la pantalla entera: nada de la página asomando
   atrás. Cabezal y pie quedan fijos; en el medio scrollea sólo el paso. */
.tb-panel{
  position:absolute;
  inset:0;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--paper,#F2EFE9);
  color:var(--ink,#131313);
  font-family:var(--f-body,"Karla",Arial,sans-serif);
  animation:tb-rise .3s cubic-bezier(.4,0,.2,1) both;
  overflow:hidden;
}
@media (min-width:761px){
  .tb-panel{
    inset:auto;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:min(760px,calc(100vw - 48px));
    height:auto;
    max-height:min(88svh,820px);
    border:1px solid var(--ink,#131313);
    box-shadow:0 30px 90px rgba(19,19,19,.35);
    animation:tb-fade .22s ease both;
  }
  .tb-body{min-height:340px}
}

/* ---------- cabezal ---------- */
.tb-head{
  flex:none;
  display:flex;align-items:center;gap:14px;
  padding:14px var(--gut,20px);
  border-bottom:1px solid var(--ink,#131313);
}
.tb-head img{width:34px;height:auto;flex:none}
.tb-head h2{
  margin:0;flex:1 1 auto;min-width:0;
  font-family:var(--f-display,"Big Shoulders Display",sans-serif);
  font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(22px,5.4vw,32px);line-height:.92;
}
.tb-x{
  flex:none;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule,#D3CCC0);
  color:var(--ink,#131313);cursor:pointer;padding:0;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.tb-x:hover{background:var(--ink,#131313);color:var(--paper,#F2EFE9);border-color:var(--ink,#131313)}
.tb-x svg{width:16px;height:16px}

/* ---------- progreso ---------- */
.tb-prog{
  flex:none;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px var(--gut,20px);
  border-bottom:1px solid var(--rule-soft,#E0DAD0);
  background:var(--sand,#E8E3DA);
}
.tb-prog[hidden]{display:none}
.tb-dots{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;flex:none}
.tb-dot{
  width:26px;height:26px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--rule,#D3CCC0);
  color:var(--ash,#565049);
  background:transparent;
}
.tb-dot--done{border-color:var(--ink,#131313);color:var(--ink,#131313)}
.tb-dot--now{background:var(--ink,#131313);border-color:var(--ink,#131313);color:var(--paper,#F2EFE9)}
.tb-dot--skip{opacity:.38}
.tb-prog-name{
  margin:0;flex:1 1 auto;min-width:0;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash,#565049);
}

/* ---------- cuerpo ---------- */
.tb-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 var(--gut,20px) 28px;
}
.tb-screen{
  padding-top:clamp(22px,3.6vw,32px);
  animation:tb-slide .22s ease both;
}
.tb-q{
  font-family:var(--f-display,"Big Shoulders Display",sans-serif);
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(28px,7vw,44px);line-height:.92;
  margin:0 0 8px;
  text-wrap:balance;
}
.tb-sub2{
  margin:0 0 20px;
  font-size:13px;line-height:1.55;color:var(--ash,#565049);
  max-width:42ch;
}
.tb-q + .tb-opts,.tb-q + .tb-days,.tb-q + .tb-times{margin-top:20px}

/* ---------- opciones en fila (servicio y barbero) ---------- */
.tb-opts{display:grid;gap:8px}
.tb-opt{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;text-align:left;
  display:flex;align-items:center;gap:14px;
  width:100%;min-height:60px;padding:12px 16px;
  background:transparent;color:var(--ink,#131313);
  border:1px solid var(--rule,#D3CCC0);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.tb-opt:hover{border-color:var(--ink,#131313)}
.tb-opt[aria-pressed="true"]{background:var(--ink,#131313);color:var(--paper,#F2EFE9);border-color:var(--ink,#131313)}
.tb-opt[aria-pressed="true"] .tb-opt-m{color:#B6AFA4}
.tb-opt-t{flex:1 1 auto;min-width:0;font-size:16px;font-weight:600;letter-spacing:.01em}
.tb-opt-m{
  flex:none;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash,#565049);font-variant-numeric:tabular-nums;
}
.tb-opt-go{flex:none;font-size:15px;opacity:.45;margin-left:2px}
.tb-opt:hover .tb-opt-go{opacity:1}

/* varios servicios en un turno: la fila se tilda en vez de avanzar */
.tb-opt-c{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.tb-opt-c .tb-opt-t{flex:0 0 auto}
.tb-opt-note{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash,#565049);
}
.tb-opt-chk{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-left:2px;
  border:1.5px solid var(--rule,#D3CCC0);
  font-size:12px;line-height:1;color:transparent;
  transition:border-color .18s ease,color .18s ease;
}
.tb-opt--check:hover .tb-opt-chk{border-color:var(--ink,#131313)}
.tb-opt[aria-pressed="true"] .tb-opt-chk{border-color:currentColor;color:currentColor}
.tb-opt:disabled{cursor:not-allowed;opacity:.5}
.tb-opt:disabled:hover{border-color:var(--rule,#D3CCC0)}
.tb-opt:disabled:hover .tb-opt-chk{border-color:var(--rule,#D3CCC0)}

.tb-av{
  flex:none;width:44px;height:44px;
  object-fit:cover;background:var(--sand,#E8E3DA);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule,#D3CCC0);
  font-family:var(--f-display,"Big Shoulders Display",sans-serif);
  font-weight:700;font-size:17px;letter-spacing:.04em;color:var(--ink,#131313);
}
.tb-av--any{font-family:var(--f-body,Arial,sans-serif);font-size:15px}

/* ---------- días ---------- */
.tb-days{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.tb-day{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:64px;padding:10px 12px;
  background:transparent;color:var(--ink,#131313);
  border:1px solid var(--rule,#D3CCC0);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.tb-day:hover{border-color:var(--ink,#131313)}
.tb-day[aria-pressed="true"]{background:var(--ink,#131313);color:var(--paper,#F2EFE9);border-color:var(--ink,#131313)}
.tb-day[aria-pressed="true"] .tb-day-s{color:#B6AFA4}
.tb-day-t{font-size:15px;font-weight:600;letter-spacing:.01em}
.tb-day-s{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash,#565049);font-variant-numeric:tabular-nums;
}

/* ---------- horas ---------- */
.tb-times{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.tb-hour{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:12px 8px;
  font-size:16px;font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  background:transparent;color:var(--ink,#131313);
  border:1px solid var(--rule,#D3CCC0);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.tb-hour:hover{border-color:var(--ink,#131313)}
.tb-hour[aria-pressed="true"]{background:var(--ink,#131313);color:var(--paper,#F2EFE9);border-color:var(--ink,#131313)}

.tb-note{font-size:14px;line-height:1.6;color:var(--ash,#565049);margin:0 0 18px}
.tb-alt{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;
  min-height:48px;padding:13px 22px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--ink,#131313);border:1px solid var(--ink,#131313);
  transition:background .2s ease,color .2s ease;
}
.tb-alt:hover{background:var(--ink,#131313);color:var(--paper,#F2EFE9)}

/* ---------- pie: resumen + acciones ---------- */
.tb-foot{
  flex:none;
  border-top:1px solid var(--ink,#131313);
  background:var(--paper,#F2EFE9);
  padding:0 var(--gut,20px) calc(14px + env(safe-area-inset-bottom));
}
.tb-foot[hidden]{display:none}
.tb-sum{
  display:flex;align-items:baseline;flex-wrap:nowrap;gap:8px;
  padding:10px 0 9px;
  border-bottom:1px solid var(--rule-soft,#E0DAD0);
}
.tb-sum-list{
  flex:1 1 auto;min-width:0;
  display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-sum[hidden]{display:none}
.tb-sum-l{
  flex:none;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash,#565049);
}
.tb-sum-i{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;
  background:transparent;color:var(--ink,#131313);
  border:0;border-bottom:1px dashed var(--rule,#D3CCC0);
  padding:2px 0;
}
.tb-sum-i:hover{border-bottom-color:var(--ink,#131313)}
.tb-sum-sep{color:var(--ash,#565049);font-size:12px;padding:0 5px}
.tb-sum-tot{
  margin-left:10px;
  font-size:11px;font-weight:600;letter-spacing:.08em;
  color:var(--ash,#565049);font-variant-numeric:tabular-nums;
}

.tb-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px}
.tb-backbtn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:inherit;flex:none;
  min-height:44px;padding:12px 16px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--ash,#565049);
  border:1px solid var(--rule,#D3CCC0);
  transition:color .2s ease,border-color .2s ease;
}
.tb-backbtn:hover{color:var(--ink,#131313);border-color:var(--ink,#131313)}
.tb-backbtn[hidden]{display:none}
.tb-hint{
  flex:1 1 140px;min-width:0;margin:0;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash,#565049);line-height:1.4;
}
.tb-hint.tb-bad{color:#8C2F1E}
.tb-go{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  min-height:48px;padding:14px 24px;
  border:1px solid var(--ink,#131313);
  background:var(--ink,#131313);color:var(--paper,#F2EFE9);
  cursor:pointer;white-space:nowrap;
  transition:background .22s ease,color .22s ease;
}
.tb-go:hover:not(:disabled){background:var(--paper,#F2EFE9);color:var(--ink,#131313)}
.tb-go:disabled{opacity:.34;cursor:not-allowed}
.tb-go[hidden]{display:none}
/* "Seguir" del paso 1: el total va debajo, en chico */
.tb-go--stack{flex-direction:column;gap:2px;line-height:1.15;padding:10px 20px}
.tb-go-sum{
  font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:none;
  opacity:.72;font-variant-numeric:tabular-nums;
}

/* el recuento de la visita, antes de confirmar */
.tb-recap{
  margin:0 0 18px;padding:12px 14px;
  border:1px solid var(--rule,#D3CCC0);border-left:3px solid var(--ink,#131313);
}
.tb-recap b{display:block;font-size:15px;font-weight:600;letter-spacing:.01em}
.tb-recap span{
  display:block;margin-top:3px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ash,#565049);font-variant-numeric:tabular-nums;
}
@media (max-width:559px){
  .tb-actions{flex-wrap:nowrap;gap:8px}
  .tb-backbtn{flex:none;padding:12px 13px;letter-spacing:.12em}
  .tb-hint{flex:1 1 auto;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-go{flex:1 1 auto;min-width:0;padding:14px 12px;font-size:12px;letter-spacing:.08em}
}

/* ---------- estados ---------- */
.tb-skel{display:grid;gap:8px}
.tb-skel--rows{grid-template-columns:1fr}
.tb-skel--rows i{height:60px}
.tb-skel--times{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.tb-skel--times i{height:52px}
.tb-skel i{display:block;height:56px;background:var(--sand,#E8E3DA);animation:tb-pulse 1.3s ease-in-out infinite}
@keyframes tb-pulse{0%,100%{opacity:1}50%{opacity:.5}}

.tb-msg{
  border:1px solid var(--rule,#D3CCC0);
  border-left:3px solid var(--ink,#131313);
  padding:16px 18px;
}
.tb-msg p{margin:0;font-size:14px;line-height:1.55}
.tb-msg .tb-msg-t{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash,#565049);margin-bottom:8px;
}
.tb-msg .tb-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.tb-link{
  display:inline-flex;align-items:center;gap:.5em;
  min-height:44px;padding:12px 18px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--ink,#131313);background:var(--ink,#131313);color:var(--paper,#F2EFE9);
  transition:background .22s ease,color .22s ease;
}
.tb-link--ghost{background:transparent;color:var(--ink,#131313)}
.tb-link:hover{background:var(--paper,#F2EFE9);color:var(--ink,#131313)}
.tb-link--ghost:hover{background:var(--ink,#131313);color:var(--paper,#F2EFE9)}
.tb-link svg{width:15px;height:15px;flex:none}

/* ---------- identidad ---------- */
.tb-ident{max-width:34rem}
.tb-field{margin-top:22px}
.tb-label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash,#565049);margin-bottom:8px;
}
.tb-inputrow{display:flex;align-items:stretch;border:1px solid var(--ink,#131313)}
.tb-prefix{
  display:flex;align-items:center;padding:0 14px;
  border-right:1px solid var(--rule,#D3CCC0);
  font-size:15px;font-weight:600;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--ash,#565049);
  background:var(--sand,#E8E3DA);
}
.tb-input{
  flex:1 1 auto;min-width:0;
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font-family:inherit;font-size:17px;color:var(--ink,#131313);
  padding:14px;min-height:52px;letter-spacing:.04em;
}
.tb-input:focus{outline:none}
.tb-inputrow:focus-within{outline:2px solid var(--ink,#131313);outline-offset:2px}
.tb-input--code{letter-spacing:.5em;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tb-fhint{
  margin:10px 0 0;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash,#565049);line-height:1.4;
}
.tb-fhint.tb-bad{color:#8C2F1E;text-transform:none;letter-spacing:.02em;font-size:13px}
.tb-hint[hidden]{display:none}

.tb-resend{
  margin-top:14px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash,#565049);border-bottom:1px solid var(--rule,#D3CCC0);
}
.tb-resend:hover:not(:disabled){color:var(--ink,#131313);border-bottom-color:var(--ink,#131313)}
.tb-resend:disabled{cursor:default;opacity:.6;border-bottom-color:transparent}

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

@media (prefers-reduced-motion:reduce){
  .tb-veil,.tb-panel,.tb-screen,.tb-skel i,.tb-spin{animation:none}
}

/* ---------- los CTA del sitio que ahora abren el modal ---------- */
button.btn{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:var(--f-body)}
.dock button{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  font-family:var(--f-body);
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 10px;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
}
@media (min-width:900px){.dock button{padding:14px 22px}}

/* ============================================================
   El sitio en vivo — carta, equipo y próximos horarios
   ============================================================ */
.tb-sec[hidden],.tb-next[hidden]{display:none}
.tb-sec{padding-top:clamp(48px,8vw,110px);padding-bottom:clamp(8px,2vw,20px)}

.tb-pill{
  display:inline-block;
  margin:0 0 22px;
  padding:8px 14px;
  border:1px dashed var(--ash,#565049);
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash,#565049);
  line-height:1.4;
}

.tb-carta li b{font-weight:600}
.tb-cta-row{margin-top:clamp(24px,4vw,36px)}

.tb-team{
  display:grid;gap:clamp(18px,3vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  max-width:1000px;
}
.tb-team li{margin:0}
.tb-team img,.tb-team .tb-mono{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  background:var(--sand,#E8E3DA);
  filter:grayscale(.15);
}
.tb-team .tb-mono{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display,"Big Shoulders Display",sans-serif);
  font-weight:700;font-size:clamp(34px,5vw,54px);letter-spacing:.04em;
  color:var(--ink,#131313);
  border:1px solid var(--rule,#D3CCC0);
  filter:none;
}
.tb-team b{
  display:block;margin-top:12px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}

.tb-next{
  border-top:1px solid var(--ink,#131313);
  background:var(--sand,#E8E3DA);
  padding:clamp(26px,4vw,40px) var(--gut,20px);
}
.tb-next-in{max-width:900px}
.tb-next-t{
  margin:0 0 12px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash,#565049);
}
.tb-next-t b{color:var(--ink,#131313);font-weight:600}
.tb-next-times{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tb-time,.tb-time-x{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  min-height:46px;min-width:80px;padding:11px 16px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--ink,#131313);
  background:var(--paper,#F2EFE9);color:var(--ink,#131313);
  transition:background .18s ease,color .18s ease;
}
.tb-time{cursor:pointer}
.tb-time:hover{background:var(--ink,#131313);color:var(--paper,#F2EFE9)}
.tb-time-x{border-style:dashed;border-color:var(--ash,#565049);color:var(--ash,#565049);background:transparent}
.tb-next-btn{margin-top:2px}

/* ============================================================
   Teléfono: cabezal bajo, títulos chicos, todo más apretado
   para que el CTA entre sin scroll.
   ============================================================ */
@media (max-width:430px){
  .tb-head{padding:9px 18px;gap:10px}
  .tb-head img{width:26px}
  .tb-head h2{font-size:19px;letter-spacing:.02em}
  .tb-x{width:40px;height:40px}
  .tb-x svg{width:15px;height:15px}

  .tb-prog{padding:8px 18px;gap:10px;flex-wrap:nowrap}
  .tb-dots{gap:5px}
  .tb-dot{width:28px;height:28px;font-size:11px}
  .tb-prog-name{
    font-size:10px;letter-spacing:.13em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
  }

  .tb-body{padding:0 18px 34px}
  .tb-screen{padding-top:18px}
  .tb-q{font-size:23px;line-height:.96;margin-bottom:6px}
  .tb-sub2{font-size:12.5px;margin-bottom:16px;line-height:1.45}
  .tb-q + .tb-opts,.tb-q + .tb-days,.tb-q + .tb-times{margin-top:16px}

  .tb-opt{min-height:56px;padding:10px 14px;gap:12px}
  .tb-opt-t{font-size:15px}
  .tb-av{width:40px;height:40px}
  .tb-day{min-height:58px}
  .tb-hour{min-height:48px;font-size:15px}
  .tb-field{margin-top:16px}
  .tb-input{min-height:50px;padding:13px}

  .tb-foot{padding:0 18px calc(12px + env(safe-area-inset-bottom))}
  .tb-actions{padding-top:10px}
}