/* ── Reserva embebida · Barbería Lander ───────────────────────────
   Usa las mismas variables que el sitio (--noche, --cobre, --hueso,
   --display, --texto, --letrero) para que el asistente sea una pieza
   más del local y no una ventana ajena.                            */

.tb-velo{
  position:fixed; inset:0; z-index:80;
  background:rgba(6,5,4,.78);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.75rem, 3vw, 2rem);
  opacity:0;
  transition:opacity .22s ease;
  overscroll-behavior:contain;
}
@supports (backdrop-filter: blur(6px)){
  .tb-velo{ background:rgba(6,5,4,.66); backdrop-filter:blur(8px); }
}
.tb-velo.tb-abierto{ opacity:1; }
.tb-velo[hidden]{ display:none !important; }

.tb-modal{
  position:relative;
  width:100%;
  max-width:42rem;
  max-height:min(88svh, 50rem);
  display:flex; flex-direction:column;
  background:var(--carbon, #1C1817);
  border:1px solid var(--humo, #2C2523);
  box-shadow:0 28px 80px rgba(0,0,0,.6);
  color:var(--hueso, #EFE9E1);
  transform:translateY(18px);
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.tb-velo.tb-abierto .tb-modal{ transform:none; }

/* ── cabecera ─────────────────────────────────────────────── */
.tb-cabeza{
  flex:none;
  display:flex; align-items:center; gap:.85rem;
  padding:1rem clamp(1rem, 3vw, 1.8rem);
  border-bottom:1px solid var(--humo, #2C2523);
  background:var(--noche-deep, #0C0A09);
}
.tb-cabeza img{
  width:2.4rem; height:2.4rem; object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 1px rgba(146,72,40,.55);
  flex:none;
}
.tb-cabeza h2{
  font-family:var(--display, Georgia, serif);
  font-weight:400;
  font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem);
  line-height:1.1; letter-spacing:.01em;
  margin:0;
}
.tb-cabeza p{
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--hueso-low, #8A7F76);
  margin:.2rem 0 0; max-width:none;
}
.tb-cabeza__txt{ min-width:0; flex:1; }

.tb-cerrar{
  margin-left:auto; flex:none;
  width:2.75rem; height:2.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--humo, #2C2523);
  color:var(--hueso-mid, #B6ABA1);
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.tb-cerrar:hover{ color:var(--cobre-hi, #D98A55); border-color:var(--cobre, #B15E32); }
.tb-cerrar svg{ width:1.05rem; height:1.05rem; fill:currentColor; }

/* ── progreso ─────────────────────────────────────────────── */
.tb-progreso{
  flex:none;
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.8rem clamp(1rem, 3vw, 1.8rem);
  border-bottom:1px solid var(--humo, #2C2523);
  background:var(--noche, #131010);
}
.tb-progreso[hidden]{ display:none !important; }
.tb-pasos{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:.3rem;
}
.tb-pasos__p{
  width:1.75rem; height:1.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--humo, #2C2523);
  border-radius:50%;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.8rem; font-weight:600;
  color:var(--hueso-low, #8A7F76);
  font-variant-numeric:tabular-nums;
}
.tb-pasos__p[data-estado="hecho"]{ border-color:var(--cobre, #B15E32); color:var(--cobre-hi, #D98A55); }
.tb-pasos__p[data-estado="actual"]{
  background:var(--cobre, #B15E32); border-color:var(--cobre, #B15E32); color:#160D06;
}
.tb-pasos__sep{ color:#4A423E; font-size:.9rem; }
.tb-progreso__nombre{
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--cobre-hi, #D98A55);
  margin:0; max-width:none;
}

/* ── cuerpo del paso ──────────────────────────────────────── */
.tb-cuerpo{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:clamp(1.2rem, 3vw, 1.9rem);
}
@media (min-width: 761px){
  .tb-cuerpo{ min-height:17rem; }
}

.tb-paso-titulo{
  font-family:var(--display, Georgia, serif);
  font-weight:400;
  font-size:clamp(1.45rem, 1.1rem + 1.5vw, 2.05rem);
  line-height:1.1;
  margin:0 0 1.4rem; max-width:none;
  text-wrap:balance;
}
.tb-paso-bajada{
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.82rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--cobre-hi, #D98A55);
  margin:-1rem 0 1.4rem; max-width:none;
}

.tb-opciones{
  display:grid;
  gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.tb-opciones--dias{ grid-template-columns:repeat(auto-fill, minmax(6.8rem, 1fr)); }
.tb-opciones--horas{ grid-template-columns:repeat(auto-fill, minmax(5rem, 1fr)); }

.tb-opcion{
  min-height:3.4rem;
  display:flex; flex-direction:column; justify-content:center; gap:.12rem;
  padding:.8rem 1rem;
  background:transparent;
  border:1px solid var(--humo, #2C2523);
  color:var(--hueso, #EFE9E1);
  font-family:var(--letrero, Arial, sans-serif);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.tb-opcion:hover{ border-color:var(--cobre, #B15E32); color:var(--cobre-hi, #D98A55); }
.tb-opcion__t{ font-size:1.05rem; letter-spacing:.08em; }
.tb-opcion__d{
  display:block;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hueso-low, #8A7F76);
  font-variant-numeric:tabular-nums;
}
.tb-opcion[aria-pressed="true"]{
  background:var(--cobre, #B15E32);
  border-color:var(--cobre, #B15E32);
  color:#160D06;
}
.tb-opcion[aria-pressed="true"] .tb-opcion__d{ color:rgba(22,13,6,.74); }
.tb-opcion[aria-pressed="true"] .tb-opcion__ini{ border-color:rgba(22,13,6,.3); color:#160D06; }

/* ── paso 1: se tildan varios ──────────────────────────────── */
.tb-opcion--serv{ flex-direction:row; align-items:center; gap:.8rem; }
.tb-opcion__txt{ display:flex; flex-direction:column; gap:.12rem; min-width:0; flex:1 1 auto; }
.tb-opcion__d--no{ color:var(--cobre, #B15E32); text-transform:none; letter-spacing:.06em; }
.tb-tilde{
  flex:none;
  width:1.35rem; height:1.35rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--humo, #2C2523);
  border-radius:50%;
  transition:border-color .18s ease, background .18s ease;
}
.tb-tilde svg{ width:1rem; height:1rem; fill:#160D06; opacity:0; transition:opacity .15s ease; }
.tb-opcion--serv:hover .tb-tilde{ border-color:var(--cobre, #B15E32); }
.tb-opcion--serv[aria-pressed="true"] .tb-tilde{
  background:#160D06; border-color:#160D06;
}
.tb-opcion--serv[aria-pressed="true"] .tb-tilde svg{ fill:var(--cobre-hi, #D98A55); opacity:1; }
.tb-opcion[disabled]{
  cursor:not-allowed;
  opacity:.42;
  border-style:dashed;
}
.tb-opcion[disabled]:hover{ border-color:var(--humo, #2C2523); color:var(--hueso, #EFE9E1); }
.tb-opcion[disabled] .tb-tilde{ visibility:hidden; }

.tb-opcion--cara{ flex-direction:row; align-items:center; justify-content:flex-start; gap:.8rem; }
.tb-opcion--cara img, .tb-opcion__ini{
  width:2.4rem; height:2.4rem; border-radius:50%;
  object-fit:cover; flex:none;
  background:var(--noche, #131010);
}
.tb-opcion__ini{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--humo, #2C2523);
  color:var(--cobre-hi, #D98A55);
  font-family:var(--display, Georgia, serif);
  font-size:.95rem;
  background:var(--noche, #131010);
}
.tb-opcion--dia{ align-items:center; text-align:center; }
.tb-opcion--hora{
  align-items:center; justify-content:center; text-align:center;
  min-height:3rem; padding:.7rem .4rem;
  font-size:1.02rem; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}

.tb-acciones-paso{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }

/* ── mensajes ─────────────────────────────────────────────── */
.tb-nota{
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.95rem; letter-spacing:.05em;
  color:var(--hueso-mid, #B6ABA1);
  margin:0; max-width:none;
}
.tb-nota--vacio{ color:var(--hueso-low, #8A7F76); }
.tb-titulo{
  font-family:var(--display, Georgia, serif);
  font-weight:400;
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height:1.1;
  margin:0 0 .8rem; max-width:none;
}
.tb-error{
  border-left:2px solid var(--cobre, #B15E32);
  background:rgba(146,72,40,.12);
  padding:.75rem .9rem;
  margin:0 0 1.3rem; max-width:none;
  color:var(--hueso, #EFE9E1);
  font-size:.95rem;
}
.tb-cargando{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.88rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--hueso-low, #8A7F76);
  margin:0;
}
.tb-cargando::before{
  content:""; width:.85rem; height:.85rem; flex:none;
  border:2px solid var(--humo, #2C2523);
  border-top-color:var(--cobre, #B15E32);
  border-radius:50%;
  animation:tb-giro .8s linear infinite;
}
@keyframes tb-giro{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .tb-cargando::before{ animation:none; }
  .tb-velo, .tb-modal{ transition:none; }
}

/* ── pie: resumen + botones ───────────────────────────────── */
.tb-pie{
  flex:none;
  display:flex; flex-direction:column; gap:.75rem;
  padding:.9rem clamp(1rem, 3vw, 1.8rem) calc(.9rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--humo, #2C2523);
  background:var(--noche-deep, #0C0A09);
}
.tb-resumen-linea{
  display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .45rem;
}
.tb-res{
  background:none; border:0;
  border-bottom:1px dashed var(--humo, #2C2523);
  padding:.3rem .1rem; margin:0;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.86rem; letter-spacing:.09em;
  color:var(--hueso-mid, #B6ABA1);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease;
}
.tb-res:hover{ color:var(--cobre-hi, #D98A55); border-bottom-color:var(--cobre, #B15E32); }
.tb-res__sep{ color:#4A423E; }
.tb-ayuda{
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.86rem; letter-spacing:.09em;
  color:var(--hueso-mid, #B6ABA1);
  margin:0; max-width:none;
}
.tb-pie__botones{ display:flex; align-items:center; gap:.6rem; }
.tb-pie__botones #tb-ok,
.tb-pie__botones .tb-seguir{ margin-left:auto; }
.tb-total{
  color:var(--hueso, #EFE9E1);
  font-variant-numeric:tabular-nums;
}
.tb-pie__botones:empty{ display:none; }

.tb-boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:2.9rem;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:1.02rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em;
  text-decoration:none;
  padding:.85rem 1.5rem;
  border:1px solid var(--cobre, #B15E32);
  background:var(--cobre, #B15E32);
  color:#160D06;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.tb-boton:hover:not([disabled]){ background:var(--cobre-hi, #D98A55); border-color:var(--cobre-hi, #D98A55); }
.tb-boton[disabled]{ opacity:.4; cursor:not-allowed; }
.tb-boton--linea{
  background:transparent; color:var(--hueso, #EFE9E1); border-color:var(--humo, #2C2523);
}
.tb-boton--linea:hover:not([disabled]){
  background:transparent; border-color:var(--cobre, #B15E32); color:var(--cobre-hi, #D98A55);
}
.tb-boton svg{ width:1.1em; height:1.1em; fill:currentColor; flex:none; }

/* ── campos ───────────────────────────────────────────────── */
.tb-campo{ display:block; margin:0 0 1.2rem; max-width:24rem; }
.tb-campo__et{
  display:block;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--hueso-low, #8A7F76);
  margin-bottom:.5rem;
}
.tb-tel{ display:flex; align-items:stretch; }
.tb-tel__pre{
  display:inline-flex; align-items:center;
  padding:0 .85rem;
  border:1px solid var(--humo, #2C2523);
  border-right:0;
  background:var(--noche-deep, #0C0A09);
  color:var(--hueso-mid, #B6ABA1);
  font-family:var(--letrero, Arial, sans-serif);
  font-size:1.05rem; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.tb-input{
  width:100%;
  min-height:3rem;
  padding:.7rem .9rem;
  background:var(--noche, #131010);
  border:1px solid var(--humo, #2C2523);
  color:var(--hueso, #EFE9E1);
  font-family:var(--texto, Arial, sans-serif);
  font-size:1.05rem;
  letter-spacing:.04em;
}
.tb-input::placeholder{ color:#6E645C; }
.tb-input:focus{ outline:2px solid var(--cobre-hi, #D98A55); outline-offset:2px; }
.tb-input--codigo{
  font-family:var(--letrero, Arial, sans-serif);
  font-size:1.6rem; letter-spacing:.5em; text-align:center;
  font-variant-numeric:tabular-nums;
  padding-left:1.4rem;
}
.tb-reenviar{
  background:none; border:0; padding:0; margin:0;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:.84rem; letter-spacing:.1em;
  color:var(--cobre-hi, #D98A55);
  cursor:pointer; text-decoration:underline;
}
.tb-reenviar[disabled]{ color:var(--hueso-low, #8A7F76); cursor:default; text-decoration:none; }

/* ── móvil: el asistente ocupa la pantalla entera ─────────── */
@media (max-width: 760px){
  .tb-velo{
    padding:0;
    align-items:stretch; justify-content:stretch;
  }
  .tb-modal{
    max-width:none;
    width:100%;
    height:100vh;
    height:100dvh;
    max-height:none;
    border:0;
    box-shadow:none;
    transform:translateY(100%);
  }
  .tb-pie__botones .tb-boton{ flex:1 1 auto; }
  .tb-pie__botones .tb-volver-b{ flex:0 0 auto; padding-inline:1.1rem; }
  .tb-pie__botones #tb-ok,
  .tb-pie__botones .tb-seguir{ margin-left:0; }
}

html.tb-quieto, html.tb-quieto body{ overflow:hidden; }

/* ── secciones vivas del sitio (equipo · carta · huecos) ──────── */
.tb-seccion{ padding:var(--sec) 0; border-top:1px solid var(--humo); }
.tb-seccion--fondo{ background:var(--noche-deep); }

.tb-ejemplo{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--letrero);
  font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--cobre-hi);
  border:1px dashed var(--cobre);
  background:rgba(146,72,40,.1);
  padding:.5rem .9rem;
  margin:0 0 1.8rem; max-width:none;
}
.tb-ejemplo[hidden]{ display:none !important; }

/* equipo */
.tb-equipo{
  display:grid;
  gap:clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top:.6rem;
}
.tb-barbero{
  display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
  background:var(--carbon);
  border:1px solid var(--humo);
  padding:clamp(1.1rem, 2.4vw, 1.5rem);
}
.tb-barbero__cara{
  width:4.6rem; height:4.6rem; border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(146,72,40,.5);
  background:var(--noche);
}
.tb-barbero__ini{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:1.5rem; color:var(--cobre-hi);
  letter-spacing:.02em;
}
.tb-barbero__nombre{
  font-family:var(--letrero);
  font-size:1.08rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--hueso);
  margin:0; max-width:none;
}
.tb-barbero__que{
  font-family:var(--letrero);
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hueso-low);
  margin:-.55rem 0 0; max-width:none;
}

/* carta */
.tb-carta{
  list-style:none; margin:.6rem 0 0; padding:0;
  border-top:1px solid var(--humo);
  max-width:44rem;
}
.tb-carta li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--humo);
}
.tb-carta__nombre{
  font-family:var(--letrero);
  font-size:1.1rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hueso);
}
.tb-carta__dur{
  display:block;
  font-size:.78rem; letter-spacing:.16em;
  color:var(--hueso-low);
  margin-top:.15rem;
}
.tb-carta__precio{
  font-family:var(--letrero);
  font-size:1.15rem; letter-spacing:.06em;
  color:var(--cobre-hi);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tb-carta__precio small{
  display:block; text-align:right;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hueso-low);
}

/* próximos huecos */
.tb-huecos{
  margin-top:clamp(2rem, 5vw, 3rem);
  border:1px solid var(--humo);
  background:var(--carbon);
  padding:clamp(1.2rem, 3vw, 1.8rem);
  max-width:44rem;
}
.tb-huecos[hidden]{ display:none !important; }
.tb-huecos__rot{
  font-family:var(--letrero);
  font-size:.76rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--cobre);
  margin:0 0 1.1rem; max-width:none;
}
.tb-huecos__fila{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem;
  padding:.65rem 0;
}
.tb-huecos__fila + .tb-huecos__fila{ border-top:1px solid var(--humo); }
.tb-huecos__dia{
  font-family:var(--letrero);
  font-size:.84rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--hueso-mid);
  min-width:5.5rem;
}
.tb-hueco{
  min-height:2.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .95rem;
  background:transparent;
  border:1px solid var(--humo);
  color:var(--hueso);
  font-family:var(--letrero);
  font-size:1rem; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
button.tb-hueco:hover{ background:var(--cobre); border-color:var(--cobre); color:#160D06; }
span.tb-hueco{ cursor:default; color:var(--hueso-mid); }
.tb-huecos__nada{
  font-family:var(--letrero);
  font-size:.95rem; letter-spacing:.06em;
  color:var(--hueso-low);
  margin:0; max-width:none;
}
.tb-huecos__pie{
  margin:1.2rem 0 0; max-width:none;
  font-family:var(--letrero);
  font-size:.86rem; letter-spacing:.08em;
  color:var(--hueso-low);
}

/* Fila "Reservar turno" dentro de la lista de enlaces del sitio. */
button.enlace{
  width:100%;
  background:none;
  border-width:0 0 1px 0;
  border-style:solid;
  border-color:var(--humo, #2C2523);
  font:inherit;
  font-family:var(--letrero, Arial, sans-serif);
  font-size:1.02rem; letter-spacing:.08em;
  cursor:pointer;
  text-align:left;
}

/* ── densidad en móvil: que el CTA se vea sin scroll ──────────── */
@media (max-width: 430px){
  /* cabezal en una sola fila: logo + RESERVAR TURNO */
  .tb-cabeza{ padding:.6rem .95rem; gap:.65rem; }
  .tb-cabeza img{ width:2rem; height:2rem; }
  .tb-cabeza h2{ font-size:1rem; letter-spacing:.02em; }
  .tb-cabeza p{ display:none; }
  .tb-cerrar{ width:2.5rem; height:2.5rem; }

  /* progreso compacto */
  .tb-progreso{ padding:.55rem .95rem; gap:.55rem; }
  .tb-pasos__p{ width:1.75rem; height:1.75rem; font-size:.78rem; }
  .tb-progreso__nombre{ font-size:.68rem; letter-spacing:.16em; }

  /* el paso respira, y el campo nunca queda contra el pie */
  .tb-cuerpo{ padding:1.1rem .95rem 2.2rem; }
  .tb-paso-titulo{
    font-size:1.4rem;
    line-height:1.14;
    margin:0 0 1rem;
  }
  .tb-paso-bajada{ margin:-.65rem 0 1.1rem; font-size:.76rem; }
  .tb-titulo{ font-size:1.4rem; }
  .tb-campo{ margin-bottom:.85rem; }
  .tb-nota{ font-size:.9rem; }
  .tb-opcion{ min-height:3.2rem; padding:.7rem .9rem; }
  .tb-opciones{ gap:.5rem; }

  /* pie: resumen en UNA línea con ellipsis + una fila de botones */
  .tb-pie{ gap:.5rem; padding:.65rem .95rem calc(.65rem + env(safe-area-inset-bottom)); }
  .tb-resumen-linea{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
  }
  .tb-resumen-linea > *{ display:inline; }
  .tb-res{ padding:0; font-size:.8rem; letter-spacing:.06em; }
  .tb-res__sep{ margin:0 .3rem; }
  .tb-ayuda{ font-size:.8rem; }
  .tb-pie__botones{ gap:.5rem; }
  .tb-pie__botones .tb-boton{
    min-height:2.9rem;
    padding:.75rem 1rem;
    font-size:.92rem;
    letter-spacing:.1em;
  }
  .tb-pie__botones .tb-volver-b{ padding-inline:.95rem; }
}