/* =====================================================================
   LANDING v2 — "Código Barber" / mockup aprobado
   Tokens del mockup (modo oscuro, el principal). Mobile first.
   Prefijo .lb- para no colisionar con la landing vieja (.lnd-*).
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* superficies */
  --lb-bg: #141c26; /* azul noche */
  --lb-bg-alt: #10161e; /* fondo alterno de secciones */
  --lb-card: #1f2a38;
  --lb-line: #2d3a4b;
  --lb-line-soft: #253242;

  /* texto */
  --lb-ink: #f5f0e6; /* marfil */
  --lb-mut: #a9b3c1; /* secundario — 7.6:1 sobre --lb-bg */

  /* acento */
  --lb-brass: #c9a24b; /* dorado — texto y bordes */
  --lb-brass-h: #ddb968; /* hover */
  --lb-brass-solid: #c9a24b; /* fondo de botón */
  --lb-on-brass: #141c26; /* texto sobre dorado */

  /* estados */
  --lb-ok: #3e8e5a;
  --lb-warn: #d9902f;
  --lb-bad: #b3382c;
  /* Los mismos estados, pero aptos para TEXTO: --lb-ok y --lb-bad están
     calculados para bordes y rellenos, y como texto no llegan a AA sobre
     las superficies del asistente (3,6:1 el verde, 2,4:1 el rojo). */
  --lb-ok-t: #5cb87d;
  --lb-bad-t: #f2837a;
  /* Velo del modal: 62% del fondo de la propia página. Se declara una sola
     vez y sigue al tema, porque --lb-bg se reasigna en el modo claro. */
  --lb-velo: color-mix(in srgb, var(--lb-bg) 42%, transparent);

  /* franja barberil (fija en ambos modos) */
  --lb-stripe-a: #b3382c;
  --lb-stripe-b: #f5f0e6;
  --lb-stripe-c: #1d3f78;

  /* franja marfil de servicios (fija en ambos modos, por pedido del mockup) */
  --lb-ivory: #f5f0e6;
  --lb-on-ivory: #141c26;
  --lb-on-ivory-mut: #55637a;
  --lb-ivory-line: #d9d2c3;

  /* forma — 4px botones/chips, 8px tarjetas */
  --lb-r-sm: 4px;
  --lb-r-md: 8px;

  /* ritmo */
  --lb-pad: 20px;
  --lb-sec: 72px;
  --lb-max: 1240px;

  /* barra de progreso */
  --lb-track: #26313f;

  /* movimiento */
  --lb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lb-t-fast: 140ms;
  --lb-t: 260ms;
  --lb-t-slow: 620ms;

  /* franja diagonal */
  --lb-stripe-h: 6px;
}

/* Modo claro: derivado, no está en el mockup.
   El dorado de TEXTO se oscurece a #7a5c18 para mantener AA (5.5:1 sobre marfil). */
body[data-theme="light"] {
  --lb-bg: #f5f0e6;
  --lb-bg-alt: #eae4d6;
  --lb-card: #ffffff;
  --lb-line: #d9d2c3;
  --lb-line-soft: #e6e0d2;

  --lb-ink: #141c26;
  --lb-mut: #55637a; /* 5.36:1 sobre --lb-bg */

  --lb-brass: #7a5c18; /* texto/borde dorado sobre claro */
  --lb-brass-h: #6b5014;
  --lb-brass-solid: #c9a24b; /* el botón conserva el dorado de marca */
  --lb-on-brass: #141c26;

  --lb-ok: #2e7047;
  --lb-warn: #a96a18;
  --lb-bad: #a82f24;
  --lb-ok-t: #225a39;
  --lb-bad-t: #a0251b;
  /* El velo hay que redeclararlo acá: definido sólo en :root, el
     var(--lb-bg) de adentro ya se resolvió contra el valor oscuro y el
     modo claro quedaba con un velo azul sobre la página clara. */
  --lb-velo: color-mix(in srgb, var(--lb-bg) 42%, transparent);

  --lb-track: #e2dbc9;
}

/* ---------- 2. BASE ---------- */
.lb {
  background: var(--lb-bg);
  color: var(--lb-ink);
  font: 400 16px/1.55 "Barlow", system-ui, sans-serif;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.lb * {
  box-sizing: border-box;
}
.lb img {
  max-width: 100%;
  display: block;
}

.lb-wrap {
  width: 100%;
  max-width: var(--lb-max);
  margin-inline: auto;
  padding-inline: var(--lb-pad);
}

/* ---------- 3. TIPOGRAFÍA ---------- */
.lb h1,
.lb h2,
.lb h3 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.02;
}
.lb h1 {
  font-size: clamp(2.75rem, 12vw, 5.5rem);
}
.lb h2 {
  font-size: clamp(2rem, 8vw, 3.25rem);
}
.lb h3 {
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  font-weight: 600;
}
.lb p {
  margin: 0;
}

/* eyebrow: Barlow 600, mayúsculas, tracking .2em, dorado */
.lb-eyebrow {
  display: block;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--lb-brass);
  margin: 0 0 10px;
}
.lb-lead {
  font-size: 1.06rem;
  color: var(--lb-mut);
  max-width: 46ch;
}
.lb-price {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--lb-brass);
}

/* ---------- 4. FRANJA DIAGONAL ---------- */
.lb-stripe {
  height: var(--lb-stripe-h);
  background: repeating-linear-gradient(
    115deg,
    var(--lb-stripe-a) 0 33.3%,
    var(--lb-stripe-b) 33.3% 66.6%,
    var(--lb-stripe-c) 66.6% 100%
  );
}

/* ---------- 5. HEADER ---------- */
.lb-hd {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--lb-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lb-line);
}
.lb-hd-in {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--lb-brass);
  /* Nunca se encoge a 0: es el único ítem flexible de la fila, así que si
     la fila desborda se colapsaba hasta desaparecer. Con min-width: 0 el
     flex lo achica lo justo y el "b" recorta con ellipsis sólo cuando de
     verdad no entra.

     Sin max-width: el 38% de antes cortaba el nombre a 390 px, donde
     conviven sólo el logo y el botón de menú y sobraba lugar de sobra. */
  flex: 0 1 auto;
  min-width: 0;
}
/* ---------- El logo, siempre igual ----------
   El PNG (logo-256.png) YA tiene el fondo transparente: los bordes están en
   alfa 0. Lo que se veía como "un cuadrado blanco" es el badge claro del
   propio emblema, que sin marco parecía una caja blanca pegada en el
   panel. La solución no es borrar el blanco (la tipografía del logo es
   blanca y desaparecería con él), sino enmarcarlo para que el badge se lea
   como una decisión y no como un error.

   Cuadrado redondeado y no círculo: el emblema es una insignia cuadrada con
   un círculo adentro; un círculo recortaría las esquinas de la insignia. */
.lb-logo-marco,
.lb-brand img,
.wz-logo {
  border-radius: 14px;
  background: #0b0f16;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--lb-brass);
}
.lb-brand img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}
.lb-brand b {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En escritorio el nombre de la barbería no se recorta nunca. Es la
   identidad de la marca: si no entra entero, el problema es el espacio,
   no la fuente. Abajo, en la banda de 1280 a 1639, se le achica un poco
   la tipografía y se cierra el gap del nav para que entre entero. */
@media (min-width: 1280px) {
  .lb .lb-brand {
    flex: 0 0 auto;
    max-width: none;
  }
  .lb .lb-brand b {
    overflow: visible;
    text-overflow: clip;
  }
}

/* nav desktop: 104px de alto.
   Con 7 links + redes + 2 botones no entra en una fila a 1160px útiles:
   por eso el tamaño y el gap bajan un escalón, y las redes del header se
   ocultan antes de que el nav se parta en dos líneas. */
.lb .lb-nav {
  display: none;
  align-items: center;
  gap: 20px;
}
.lb .lb-nav a {
  font-family: "Barlow", sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lb-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--lb-t-fast) var(--lb-ease),
    border-color var(--lb-t-fast) var(--lb-ease);
}
.lb .lb-nav a:hover,
.lb .lb-nav a:focus-visible {
  color: var(--lb-brass);
  border-bottom-color: var(--lb-brass);
}

/* hamburguesa 48px */
.lb .lb-burger {
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  cursor: pointer;
}
.lb .lb-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--lb-ink);
  transition: transform var(--lb-t) var(--lb-ease), opacity var(--lb-t-fast) linear;
}
.lb .lb-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.lb .lb-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.lb .lb-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.lb .lb-burger:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}

/* toggle claro/oscuro */
.lb-tema {
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease);
}
.lb-tema:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.lb-tema:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
/* los dos íconos se cruzan con un fade corto: sin bounce */
.lb-tema svg {
  grid-area: 1 / 1;
  transition: opacity var(--lb-t) var(--lb-ease), transform var(--lb-t) var(--lb-ease);
}
.lb-ico-sol {
  opacity: 0;
  transform: rotate(-60deg) scale(0.7);
}
body[data-theme="light"] .lb-ico-luna {
  opacity: 0;
  transform: rotate(60deg) scale(0.7);
}
body[data-theme="light"] .lb-ico-sol {
  opacity: 1;
  transform: none;
}

/* panel móvil */
.lb .lb-panel {
  border-top: 1px solid var(--lb-line);
  background: var(--lb-bg);
  padding: 8px 0 20px;
}
.lb .lb-panel[hidden] {
  display: none;
}
.lb .lb-panel a {
  display: block;
  padding: 15px var(--lb-pad);
  font-family: "Barlow", sans-serif;
  font-size: 19px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lb-line-soft);
}
.lb .lb-panel a:last-child {
  border-bottom: 0;
  color: var(--lb-brass-solid);
  -webkit-text-fill-color: var(--lb-brass-solid);
}

/* ---------- 6. BOTONES ---------- */
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap; /* el texto del CTA nunca se parte */
  border-radius: var(--lb-r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--lb-t-fast) var(--lb-ease),
    border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease), transform var(--lb-t-fast) var(--lb-ease);
}
.lb-btn--pri {
  background: var(--lb-brass-solid);
  color: var(--lb-on-brass);
}
.lb-btn--pri:hover {
  background: var(--lb-brass-h);
  color: var(--lb-on-brass);
}
body[data-theme="light"] .lb-btn--pri:hover {
  background: #b08c3c; /* 5.15:1 con texto #141C26 */
}
.lb-btn--ghost {
  background: transparent;
  border-color: var(--lb-line);
  color: var(--lb-ink);
}
.lb-btn--ghost:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.lb-btn--dark {
  background: var(--lb-bg);
  color: var(--lb-ink);
}
.lb-btn--dark:hover {
  background: #0d1219;
}
.lb-btn--lg {
  min-height: 60px;
  font-size: 1.5rem;
  padding: 0 34px;
}
.lb-btn:focus-visible {
  outline: 3px solid var(--lb-brass);
  outline-offset: 3px;
}
.lb-btn:active {
  transform: scale(0.98);
}
.lb-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* CTA fijo mobile */
.lb-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: block;
  padding: 10px var(--lb-pad) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--lb-bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--lb-line);
}
.lb-sticky .lb-btn {
  width: 100%;
}
.lb-sticky[hidden] {
  display: none;
}

/* ---------- 5c. ICONOS DE REDES ----------
   Los iconos son los PNG del dueño (assets/whatsapp.png e
   instagram.png), reescalados a 96 px en whatsapp-96.png /
   instagram-96.png. Los originales pesan 223 KB y 702 KB: esos tamaños
   son para imprenta, y pintar un icono de 20 px con eso es tirar 925 KB
   de datos en cada visita. 96 px es 4x el tamaño real en pantalla, de
   sobra para un monitor retina, y pesa 21 KB entre los dos.

   Antes eran SVG con fill="currentColor"; dentro de un <img> eso resuelve
   a negro y el ícono desaparecía en el header oscuro. Con <img> y color
   propio no hay ese problema en ningún tema. */
.ic-ig,
.ic-wa {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  /* object-fit porque los PNG vienen cuadrados: con un alto fijo y sin
     esto el gráfico se deformaría. */
  object-fit: contain;
}

/* ---------- 5b. REDES ---------- */
/* Los links con borde (.lb-soc-lnk) se fueron junto con lbSoc() y el pie
   compacto: las redes de la landing viven en Contacto como .lb-pill. Si
   vuelven, no reciclar estas reglas a ciegas. */

.lb-hd-cta {
  display: none;
}
.lb-hd-cta .lb-btn {
  min-height: 48px;
  padding: 0 20px;
  font-size: 1.1rem;
}
.lb-panel-btn {
  display: block;
  width: calc(100% - var(--lb-pad) * 2);
  margin: 14px var(--lb-pad) 0;
  padding: 14px;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  font-family: "Barlow", sans-serif;
  font-size: 19px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lb-panel-res {
  margin: 10px var(--lb-pad) 0;
  width: calc(100% - var(--lb-pad) * 2);
}

/* ---------- 7. HERO ---------- */
.lb-hero {
  padding-block: 44px 48px;
  border-bottom: 1px solid var(--lb-line-soft);
}
.lb-hero h1 em {
  font-style: normal;
  color: var(--lb-brass);
}
.lb-hero-cta {
  margin-top: 26px;
}
.lb-hero-note {
  margin-top: 18px;
  font-size: 0.94rem;
  color: var(--lb-mut);
}
.lb-hero-note b {
  color: var(--lb-ink);
}

/* widget de reserva rápida */
.lb-widget {
  margin-top: 34px;
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-md);
  padding: 20px;
}
.lb-widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.lb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 16px 0 20px;
  counter-reset: s;
}
.lb-step-i {
  counter-increment: s;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lb-mut);
  padding-top: 9px;
  border-top: 3px solid var(--lb-line);
  transition: color var(--lb-t) var(--lb-ease), border-color var(--lb-t) var(--lb-ease);
}
.lb-step-i::before {
  content: counter(s);
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 3px;
}
.lb-step-i[data-on="1"] {
  color: var(--lb-brass);
  border-top-color: var(--lb-brass);
}
.lb-wl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  margin-bottom: 7px;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  font-family: "Barlow", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--lb-t-fast) var(--lb-ease),
    background-color var(--lb-t-fast) var(--lb-ease);
}
.lb-wl-t {
  min-width: 0;
}
.lb-wl-t b {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-wl-t small {
  color: var(--lb-mut);
  font-size: 0.86rem;
}
.lb-wl[aria-pressed="true"] {
  border-color: var(--lb-brass);
  background: color-mix(in srgb, var(--lb-brass) 12%, var(--lb-bg));
}
.lb-wl:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}

.lb-widget-lbl {
  font-family: "Barlow", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lb-mut);
  margin: 20px 0 10px;
}

/* chips de horarios: 4 columnas */
.lb-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.lb-chip {
  min-height: 46px;
  padding: 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  cursor: pointer;
  transition: background-color var(--lb-t-fast) var(--lb-ease),
    border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease);
}
.lb-chip[aria-pressed="true"] {
  background: var(--lb-brass-solid);
  border-color: var(--lb-brass-solid);
  color: var(--lb-on-brass);
}
.lb-chip:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
/* deshabilitado: tachado y apagado */
.lb-chip[disabled] {
  cursor: not-allowed;
  color: var(--lb-mut);
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  background: transparent;
}

/* resumen del paso 4 */
.lb-sum {
  border: 1px solid var(--lb-line);
  border-top: 2px solid var(--lb-brass);
  border-radius: var(--lb-r-sm);
  overflow: hidden;
}
.lb-sum div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--lb-line-soft);
}
.lb-sum div:last-child {
  border-bottom: 0;
}
.lb-sum span {
  color: var(--lb-mut);
}
.lb-sum b {
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.lb-sum b:empty::after {
  content: "—";
  color: var(--lb-mut);
}
.lb-empty {
  color: var(--lb-mut);
  font-size: 0.95rem;
  padding: 14px;
  border: 1px dashed var(--lb-line);
  border-radius: var(--lb-r-sm);
  text-align: center;
}

/* ---------- 8. SECCIONES ---------- */
.lb-sec {
  padding: var(--lb-sec) 0;
}
.lb-sec--alt {
  background: var(--lb-bg-alt);
}
.lb-sec-h {
  margin-bottom: 30px;
}
.lb-sec-h p {
  margin-top: 12px;
}

/* ---------- 9. SERVICIOS (franja marfil, ambos modos) ---------- */
.lb-band-ivory {
  background: var(--lb-ivory);
  color: var(--lb-on-ivory);
}
.lb-band-ivory h2,
.lb-band-ivory h3 {
  color: var(--lb-on-ivory);
}
.lb-band-ivory .lb-eyebrow {
  color: #7a5c18;
}
.lb-band-ivory .lb-lead {
  color: var(--lb-on-ivory-mut);
}
/* borde superior grueso en las tarjetas de servicio.
   En mobile manda la lista de filas; la grilla es de desktop. */
.lb-sv-grid {
  display: none;
}
.lb-sv {
  background: #ffffff;
  border: 1px solid var(--lb-ivory-line);
  border-top: 4px solid var(--lb-brass-solid);
  border-radius: 0 0 var(--lb-r-md) var(--lb-r-md);
  /* El padding vive en .lb-sv-bd y no acá: si stayed en la tarjeta, la
     foto quedaría inset dentro del borde en vez de sangrar de lado a
     lado como pide la grilla. */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.lb-sv-bd {
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
/* Foto de preview del servicio: la carga el dueño desde Servicios y
   premios. Antes el dato venía en `img` pero ninguna tarjeta lo pintaba,
   así que las fotos que se subían no se veían en ningún lado.

   El marco es 4/5 y no una tira de altura fija. Con `height: 190px` sobre
   fotos verticales de ~1200x1350 se veía el 41-49% del alto: una franja con
   los ojos y la nariz, sin pelo ni mentón, donde no se reconocía el corte.
   En 4/5 entra el 100% del alto y se recorta como máximo el 17% del ancho,
   así que la foto se lee entera. */
.lb-sv-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
/* En la lista angosta (celular) la foto va al costado, chica. */
.lb-sv-mini {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--lb-line);
}
/* La tarjeta del asistente con foto. */
.wz-item--svc {
  align-items: center;
}
.wz-item-img {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--lb-line);
}
.lb-sv h3 {
  overflow-wrap: anywhere;
}
.lb-sv p {
  color: var(--lb-on-ivory-mut);
  font-size: 0.96rem;
  flex: 1;
}
/* sin descripción no queda un hueco: el texto empuja el pie de la tarjeta abajo */
.lb-sv h3 + .lb-sv-ft,
.lb-sv h3:only-child {
  margin-top: auto;
}
.lb-sv-ft {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--lb-ivory-line);
}
.lb-sv-dur {
  font-size: 0.9rem;
  color: var(--lb-on-ivory-mut);
}
/* mobile: lista de filas */
.lb-sv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 2px;
  border-top: 3px solid var(--lb-brass-solid);
  border-bottom: 1px solid var(--lb-ivory-line);
}
.lb-sv-row:first-child {
  border-top-width: 4px;
}
.lb-sv-row-t {
  min-width: 0;
}
.lb-sv-row-t b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.lb-sv-row-t small {
  color: var(--lb-on-ivory-mut);
}
/* La franja marfil es la misma en claro y en oscuro, así que sus textos
   usanSIEMPRE la variante oscura del dorado: el #C9A24B del tema da 2,4:1
   sobre la tarjeta blanca en modo oscuro y no llega a AA. */
.lb-band-ivory .lb-price {
  color: #7a5c18;
}
.lb-sv-row .lb-price {
  font-size: 1.45rem;
  flex: 0 0 auto;
  color: #7a5c18;
}
.lb-sv-desc {
  display: none;
}

/* ---------- 10. PUNTOS ---------- */
.lb-pts {
  display: grid;
  gap: 22px;
}
.lb-prizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.lb-prize {
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-md);
  padding: 20px 18px;
}
.lb-prize .lb-prize-n {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lb-brass);
  line-height: 1;
  display: block;
  overflow-wrap: anywhere;
}
.lb-prize .lb-prize-n small {
  font-size: 1.05rem;
  color: var(--lb-mut);
  letter-spacing: 0.04em;
}
.lb-prize p {
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 500;
}

/* tarjeta de progreso, borde dorado */
.lb-prog {
  background: var(--lb-card);
  border: 2px solid var(--lb-brass);
  border-radius: var(--lb-r-md);
  padding: 22px 20px;
}
.lb-prog-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.lb-prog-n {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lb-ink);
}
.lb-prog-n em {
  font-style: normal;
  color: var(--lb-mut);
  font-size: 1.5rem;
}
.lb-prog-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--lb-mut);
}
.lb-track {
  height: 12px;
  border-radius: 999px;
  background: var(--lb-track);
  overflow: hidden;
  margin: 16px 0 12px;
}
.lb-fill {
  height: 100%;
  width: var(--lb-p, 0%);
  border-radius: inherit;
  background: var(--lb-brass-solid);
  /* sin bounce ni elastic: ease-out puro */
  transition: width var(--lb-t-slow) var(--lb-ease);
}
.lb-prog-msg {
  font-size: 1rem;
  color: var(--lb-mut);
}
.lb-prog-msg b {
  color: var(--lb-brass);
}
.lb-prog-demo {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--lb-mut);
  border-top: 1px dashed var(--lb-line);
  padding-top: 12px;
}

/* ---------- 11. GALERÍA ----------
   Sin tope de fotos: entra todas las que haya cargado el barbero.
   Cada figura tiene aspect-ratio propio y la foto usa object-fit: cover,
   así una foto apaisada o vertical se encuadra sin deformarse. */
.lb-gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.lb-gal figure {
  margin: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--lb-r-md);
  overflow: hidden;
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
}
.lb-gal figure:first-child {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}
.lb-gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* marcador visible mientras no haya fotos reales */
.lb-gal-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 10px;
  border: 1px dashed var(--lb-line);
  border-radius: var(--lb-r-md);
  background: var(--lb-card);
  color: var(--lb-mut);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* ---------- 12. EQUIPO ---------- */
.lb-team {
  display: grid;
  gap: 14px;
  /* Cada foto define su alto (para no recortarla), así que dos barberos
     con fotos de distinta proporción dan tarjetas de distinta altura. Sin
     esto la grilla las estira y al más corto le queda un hueco vacío
     abajo, entre el botón y el borde. */
  align-items: start;
}
/* ---------- 12. EQUIPO: la tarjeta que se da vuelta ----------
   La tarjeta tiene dos caras superpuestas dentro de .lb-barber-int. Al
   tocarla, .lb-barber--abierta la rota 180° y muestra el dorso con la
   ficha. Sólo puede haber una abierta (lo resuelve lbFlip en main.js).

   Piezas del 3D, que son las que hay que respetar juntas:
   - `perspective` va en el CONTENEDOR (la tarjeta), no en la que rota;
   - `transform-style: preserve-3d` en la que rota, sin él los hijos se
     aplanan y no hay giro;
   - `backface-visibility: hidden` en las dos caras: la que queda atrás es
     invisible en vez de leerse al revés;
   - la cara de atrás lleva su propio rotateY(180deg), para que al girar
     el contenedor quede mirando al frente. */
/* ---------- EQUIPO (mockup del dueño) ----------
   La tarjeta se partió en dos: `.lb-barber-giro` (foto + nombre, es lo que
   gira) y `.lb-barber-pie` (los dos botones, fijo abajo). Antes era un
   solo elemento con role="button" que giraba entero.

   La `perspective` va en `.lb-barber-giro` y NO en `.lb-barber`: el pie no
   gira, y dejarlo en la misma pila 3D lo inclinaba con el dorso. */
.lb-barber {
  display: flex;
  flex-direction: column;
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-md);
  overflow: hidden;
  /* La altura la anima main.js (lbAbre) porque el dorso es más alto que
     el frente. Sin transición acá el alto salta de golpe. */
  transition: height 0.42s var(--lb-ease);
}
.lb-barber-giro {
  display: block;
  cursor: pointer;
  perspective: 1400px;
  padding: 0;
  /* Es un ítem flex de .lb-barber (columna): sin `flex` mide lo que mide el
     frente y, cuando el dorso es más alto —en el celular, con horario y
     servicios— la tarjeta quedaba con el alto puesto y 90 px de vacío
     abajo, sin que el dorso pudiera usar ese espacio. Estirándolo, el
     `inset:0` del dorso sí llega al alto real de la tarjeta. */
  flex: 1 1 auto;
  min-height: 0;
}
.lb-barber-giro:focus-visible {
  outline: 3px solid var(--lb-brass);
  outline-offset: -3px;
}
.lb-barber-int {
  position: relative;
  width: 100%;
  /* `height:100%` para que el dorso, que es `position:absolute; inset:0`,
     tome el alto REAL de la tarjeta y no el del frente. Sin esto el
     `inset:0` se resolvía contra el frente (533 px en el celular) y, con la
     tarjeta estirada a 628, el dorso no ocupaba los 95 px de más: el bloque
     de WhatsApp e Instagram quedaba fuera de vista.
     Contra un padre de alto `auto` el 100% no resuelve y cae a `auto`, que es
     lo mismo que:before de esta regla. */
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--lb-ease);
}
.lb-barber--abierta .lb-barber-int {
  transform: rotateY(180deg);
}
.lb-barber-cara {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
/* La de atrás está superpuesta y pre-rotada: al girar el contenedor queda
   mirando al frente. */
.lb-barber-atras {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 2px 0;
  overflow-y: auto;
  max-height: 100%;
}
.lb-bd-nom {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* El botón de reservar va clavado al pie del dorso, con `margin-top: auto`.
   El dorso es más bajo que el frente (la foto 4/5 es alta), así que sin esto
   el botón queda flotando en el medio y el borde de abajo de la tarjeta no
   coincide entre las dos caras. Medido con viewports reales, el aire que queda
   entre el último bloque y el botón es de 55 a 86 px: se lee como respiro. */
.lb-barber-atras .lb-btn--full {
  margin-top: auto;
}

/* "Ver información": vive arriba de la foto, como velo. */
.lb-barber-ph {
  position: relative;
}
.lb-barber-cta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 10px 10px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff8e6;
  background: linear-gradient(to top, rgba(6, 10, 15, 0.92), rgba(6, 10, 15, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s var(--lb-ease), transform 0.18s var(--lb-ease);
}
.lb-barber:hover .lb-barber-cta,
.lb-barber:focus-visible .lb-barber-cta {
  opacity: 1;
  transform: none;
}
/* En el dorso no hay foto, así que el cartelito va abajo plano y siempre
   visible: es el "Volver" del giro. */
.lb-barber-cta--atras {
  position: static;
  inset: auto;
  padding: 4px 0 0;
  background: none;
  color: var(--lb-mut);
  font-size: 0.78rem;
  opacity: 1;
  transform: none;
}
.lb-barber-cta--atras:hover {
  color: var(--lb-brass);
}
/* Sin hover (celular) el cartelito no se puede ver al pasar el mouse: se
   muestra siempre, más chico. */
@media (hover: none) {
  .lb-barber-cta {
    opacity: 1;
    transform: none;
    font-size: 0.82rem;
    padding: 16px 8px 8px;
  }
}
/* prefers-reduced-motion: sin giro. Las caras se cambian por opacidad, que
   es movimiento que el usuario pidió eliminar; el efecto sigue siendo
   claro porque el dorso tiene otro contenido. */
@media (prefers-reduced-motion: reduce) {
  .lb-barber,
  .lb-barber-int,
  .lb-barber-cta {
    transition: none;
  }
  .lb-barber--abierta .lb-barber-int {
    transform: none;
  }
  .lb-barber--abierta .lb-barber-frente {
    display: none;
  }
  .lb-barber--abierta .lb-barber-atras {
    position: static;
    transform: none;
  }
}

/* Dorso de la ficha. */
.lb-bd-esp {
  margin: 0 0 8px;
  color: var(--lb-brass);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}
/* Cuando el barbero no cargó nada: se dice, en vez de mostrar un dorso
   con un hueco raro. */
.lb-bd-vacio {
  margin: 0;
  color: var(--lb-mut);
  font-size: 0.9rem;
  line-height: 1.45;
}
.lb-bd-desc {
  margin: 0 0 14px;
  line-height: 1.5;
}
.lb-bd-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.lb-bd-red {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--lb-line);
  border-radius: 999px;
  color: var(--lb-ink);
  text-decoration: none;
  font-size: 0.9rem;
  min-height: 44px;
}
.lb-bd-red:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.lb-bd-red img {
  border-radius: 4px;
}
.lb-btn--full {
  width: 100%;
  margin-top: 4px;
}

/* La foto del barbero.
   Decisión del dueño (2026-10-10): marco fijo 4/5 con `contain`. La foto
   va COMPLETA, sin recortar y sin deformar; lo que sobra a los costados
   se ve como franja del color de la tarjeta.

   Descartado lo otro: sin marco (`height:auto`) la tarjeta de una foto
   vertical mide ~1000 px y al abrirla no entra en la ventana; con `cover`
   se le cortaba el 17% de abajo. Las franjas son el precio de no cortar.

   El fondo va en --lb-card, el mismo de la tarjeta, para que la franja se
   lea como un letterbox y no como una caja mal puesta. */
.lb-barber-ph {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--lb-card);
  position: relative;
}
/* En pantallas de poca altura la tarjeta abierta no entra debajo del
   header fijo: header 105 + banda de nombre + botones ≈ 260 px que no
   son foto, y con 900 de ventana sólo quedan 640. El tope recorta la CAJA,
   no la foto: como el alto se achica y el ancho sigue al 100%, la caja
   queda más ancha que 4/5 y `contain` mete más franja a los lados en vez
   de dejar que la tarjeta se vaya de la pantalla. Sólo en escritorio,
   donde las tarjetas van en dos columnas y se ven bien altas; en celular
   la 4/5 se respeta tal cual. */
@media (min-width: 900px) {
  .lb-barber-ph {
    max-height: calc(100vh - 300px);
    min-height: 260px;
  }
}
.lb-barber-ph img {
  /* Posicionada en absoluto y no con `height: 100%`. En cuanto el padre
     lleva `max-height`, su alto deja de ser un valor definitivo y el
     porcentaje del hijo no resuelve: cae a `auto`, la img toma su
     proporción natural (571x857) y, como la caja mide 600 con
     overflow:hidden, se le recortan 128 px de arriba y 128 de abajo —
     justo la cabeza. Con inset:0 el ancho y el alto salen de la caja
     siempre, se corte la caja o no. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.lb-barber-falta {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  height: 100%;
  color: var(--lb-brass);
}
.lb-barber-falta svg {
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 2px dashed var(--lb-brass);
  border-radius: 50%;
}
.lb-barber-falta small {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--lb-mut);
}
/* Nombre + pastilla de oficio. */
.lb-barber-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--lb-bg);
  border-top: 1px solid var(--lb-line-soft);
}
.lb-barber-id b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.lb-barber-pill {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lb-brass-solid);
  color: #141c26;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Los dos botones, siempre visibles: el de reservar no gira con la ficha. */
.lb-barber-pie {
  display: flex;
  gap: 10px;
  padding: 14px 16px 16px;
  background: var(--lb-card);
}
/* Con la tarjeta dada vuelta el pie se oculta: el dorso ya trae su propio
   "Reservar con X" al final (como en el mockup) y, en el celular, el pie de
   dos botones apilados medía 144 px y tapaba el bloque de WhatsApp e
   Instagram. Así queda una sola acción visible y el dorso entra entero. */
.lb-barber--abierta .lb-barber-pie {
  display: none;
}
.lb-barber-pie .lb-btn {
  flex: 1;
  margin-top: 0;
}
@media (max-width: 560px) {
  /* En el celular, uno arriba del otro: en dos columnas los botones quedan
     demasiado angostos para el texto. */
  .lb-barber-pie {
    flex-direction: column;
  }
}
/* La tarjeta de llamado a reservar, debajo de la grilla del equipo. */
.lb-elige {
  margin-top: 22px;
  padding: 26px 24px 24px;
  border: 1px solid var(--lb-brass);
  border-radius: var(--lb-r-md);
  background: var(--lb-bg);
}
.lb-elige-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  color: var(--lb-brass);
}
.lb-elige-ico svg {
  width: 24px;
  height: 24px;
}
.lb-elige h3 {
  margin: 0 0 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.lb-elige p {
  margin: 0 0 18px;
  color: var(--lb-mut);
}

/* ---------- 12b. CARRUSEL DE RESEÑAS ----------
   Una reseña por vez, como los banners de Marketplace: el track se
   desplaza con translateX (GPU) y nunca con left/width. */
.lb-car {
  position: relative;
}
/* El recorte va en un envoltorio aparte del que se desplaza: poner
   overflow:hidden y transform en el MISMO elemento crea una capa
   composta que en Chromium a veces se pinta vacía. */
.lb-car-vent {
  overflow: hidden;
}
.lb-car-viz {
  display: flex;
  /* ease-out suave: entra y frena, sin rebote ni elástico */
  transition: transform 460ms var(--lb-ease);
  gap: 14px;
}
/* El ancho de cada tarjeta sale de --lb-car-por, que tiene que coincidir con
   lbCarPorVista() en main.js. Con 3 y gap fijo hay que descontar los dos
   gaps del ancho disponible, si no las 3 tarjetas no entran y la tercera
   queda asomando a la derecha. */
.lb-car-viz .lb-tst {
  flex: 0 0
    calc((100% - (var(--lb-car-por) - 1) * 14px) / var(--lb-car-por));
  min-width: 0;
  min-height: 190px;
}
:root {
  --lb-car-por: 1;
}
@media (min-width: 861px) {
  .lb {
    --lb-car-por: 3;
  }
}
.lb-car-ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
/* El contador reemplaza a los puntitos: con 12 reseñas eran 12 pastillas
   iguales, todas indistinguibles y ninguna decía en cuál estabas. */
.lb-car-n {
  margin: 0;
  min-width: 92px;
  text-align: center;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--lb-mut);
}
.lb-car-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  cursor: pointer;
  transition: border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease);
}
.lb-car-btn:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.lb-car-btn:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
/* Los puntitos se fueron: los reemplazó el contador .lb-car-n. Con 12
   reseñas eran 12 pastillas indistinguibles y ninguna decía en cuál
   estabas. Si vuelven a aparecer, tienen que coincidir con lbCarPinta(). */
.lb-barber b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.lb-barber small {
  color: var(--lb-mut);
}

/* ---------- TARJETA DE BARBERO: mockup del dueño (desktop y celular) ----------

   La franja de barbería (rojo/blanco/azul) que el mockup traía arriba de las
   dos caras ESTÁ FUERA: el dueño la pidió sacar después de verla montada, y
   además ya la había hecho sacar del login. No hay reglas que reciclar acá:
   si algún día vuelve, es un <span class="lb-franja"> más un bloque de CSS
   como el que estaba acá, y el hueco de arriba lo vuelve a tapar el borde
   redondeado de la tarjeta. */

/* Descripción en el frente, bajo el nombre. */
.lb-barber-id {
  flex-wrap: wrap;
}
.lb-barber-desc {
  flex: 1 0 100%;
  color: var(--lb-mut);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* --- Dorso ------------------------------------------------------------- */
.lb-barber-atras {
  padding: 0 0 14px;
  gap: 0;
  overflow: hidden;
}
/* El cuerpo scrollea y el botón de reservar queda clavado abajo: con el dorso
   nuevo (horario + servicios) el contenido es más alto que la tarjeta y sin
   esto el botón se iba fuera de vista al abrirla. */
.lb-bd-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 0;
}
.lb-bd-res {
  flex: 0 0 auto;
  margin: 14px 16px 0;
  width: calc(100% - 32px);
}
.lb-bd-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.lb-bd-cab .lb-bd-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
}
/* El botón de volver a girar la tarjeta. Va arriba a la derecha como en el
   mockup; es un <button> real y no un div, así que el teclado lo alcanza solo
   (el div que gira ya tiene su listener de Enter/Espacio, pero ese no lo
   registra dentro del dorso). */
.lb-bd-giro {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  background: transparent;
  color: var(--lb-ink);
  cursor: pointer;
}
.lb-bd-giro svg {
  width: 21px;
  height: 21px;
}
.lb-bd-giro:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.lb-bd-giro:focus-visible {
  outline: 3px solid var(--lb-brass);
  outline-offset: 2px;
}
/* En el dorso el oficio va como pastilla con borde (en el frente va dorada). */
.lb-barber-atras .lb-bd-esp {
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px 12px;
  border: 1px solid var(--lb-brass);
  border-radius: 999px;
  background: transparent;
  font-size: 0.72rem;
}
.lb-bd-sobre {
  margin: 16px 0 2px;
  color: var(--lb-mut);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lb-bd-desc {
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Bloque ATIENDE: horario del barbero, el mismo que usa la reserva. */
.lb-bd-atiende {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  margin-bottom: 18px;
  color: var(--lb-brass);
}
.lb-bd-atiende svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.lb-bd-atiende span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-bd-atiende small {
  color: var(--lb-mut);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lb-bd-atiende b {
  color: var(--lb-ink);
  font-size: 0.95rem;
  line-height: 1.3;
}
/* La pausa al mediodía, en su propia línea y más apagada: es un dato
   secundario, no parte del horario. */
.lb-bd-atiende em {
  color: var(--lb-mut);
  font-size: 0.82rem;
  font-style: normal;
}

/* Lista de servicios con precio. */
.lb-bd-lab {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lb-line);
  color: var(--lb-mut);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lb-bd-svs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lb-bd-sv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lb-line-soft);
}
.lb-bd-sv:last-child {
  border-bottom: 0;
}
.lb-bd-sv-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-bd-sv-t b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lb-bd-sv-t small {
  color: var(--lb-mut);
  font-size: 0.82rem;
}
.lb-bd-sv-p {
  flex: 0 0 auto;
  color: var(--lb-brass);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}
.lb-bd-sv-n {
  padding: 6px 0;
  color: var(--lb-mut);
  font-size: 0.9rem;
}

/* WhatsApp / Instagram: botones con borde, de a dos, como en el mockup.
   Antes eran pastillas en fila con el número pegado; ahora la etiqueta es fija
   y el link va al perfil, que es lo que hace la gente. */
.lb-bd-redes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.lb-bd-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  background: transparent;
  color: var(--lb-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  min-height: 46px;
  overflow-wrap: anywhere;
}
.lb-bd-red img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.lb-bd-red:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
/* Las redes extra que carga el barbero no entran en la grilla de dos (el
   nombre no siempre es corto y se rompería la línea): van a lo ancho. */
.lb-bd-redes .lb-bd-red:nth-child(n + 3) {
  grid-column: 1 / -1;
}
.lb-bd-vacio {
  margin: 16px 0 0;
  color: var(--lb-mut);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* En el celular los dos botones del pie van apilados, pero el de reservar
   primero: ya lo hace el bloque .lb-barber-pie de arriba. */


/* ---------- 13. TESTIMONIOS ---------- */
/* Contenedor del carrusel de reseñas. minmax(0, 1fr) y no 1fr a secas:
   un item de grilla tiene min-width:auto, así que adopta el min-content de
   su contenido, y el track del carrusel son 12 tarjetas al 100% (1717 px).
   Con 1fr la única columna se estiraba a ese ancho, el carrusel desbordaba
   la pantalla y los botones de anterior/siguiente quedaban FUERA del
   viewport: inalcanzables al tacto. Es la misma trampa que ya está
   documentada en .wz-dows. */
.lb-test {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
.lb-tst {
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-md);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-stars {
  display: flex;
  gap: 3px;
  color: var(--lb-brass);
}
.lb-tst blockquote {
  margin: 0;
  /* El texto de la reseña es lo importante de la caja: con 3 tarjetas a la
     vez tiene menos ancho, así que sube de cuerpo para que siga leyéndose
     como cita y no como una línea perdida. */
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--lb-ink);
}
.lb-tst footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lb-line);
}
/* Foto del que escribió la reseña, con la inicial de respaldo. */
.lb-tst-av {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--lb-line);
}
.lb-tst-av--ini {
  display: grid;
  place-items: center;
  background: var(--lb-bg);
  color: var(--lb-brass);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.lb-tst cite {
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--lb-mut);
}
/* marcador TODO: sin reseñas reales no se inventa ninguna */
.lb-todo {
  display: block;
  border: 1px dashed var(--lb-line);
  border-radius: var(--lb-r-md);
  padding: 24px 18px;
  text-align: center;
  color: var(--lb-mut);
}
.lb-todo b {
  display: block;
  color: var(--lb-brass);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* ---------- 14. CONTACTO ---------- */
/* Formulario de contacto: la clase .lb-field estaba en el markup pero
   sólo tenía una regla de transición, sin layout. Como el <textarea>
   es inline por defecto, se quedaba al lado de la etiqueta y se encogía
   al ancho por defecto en vez de ocupar la columna. */
.lb-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.lb-field > label {
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lb-mut);
}
.lb-field input,
.lb-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  background: var(--lb-bg);
  color: var(--lb-ink);
  font: inherit;
  font-size: 1rem;
}
.lb-field textarea {
  min-height: 130px;
  resize: vertical;
}
.lb-field input:focus,
.lb-field textarea:focus {
  outline: 0;
  border-color: var(--lb-brass);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-brass) 25%, transparent);
}
.lb-field input::placeholder,
.lb-field textarea::placeholder {
  color: var(--lb-mut);
}
.lb-err:empty {
  display: none;
}
.lb-err {
  font-size: 0.82rem;
  color: var(--lb-bad-t);
}
.lb-status:empty {
  display: none;
}

.lb-cont {
  display: grid;
  gap: 22px;
}
/* Dirección. La clase estaba en el markup pero nunca tuvo CSS: antes
   se veía bien por accidente porque los <span> eran etiquetas sueltas
   ("Dirección", "Ciudad"). Ahora cada parte va en su línea. */
.lb-addr {
  display: grid;
  gap: 2px;
  margin: 0 0 4px;
}
.lb-addr > b {
  font-weight: 600;
  line-height: 1.35;
}
.lb-addr > span {
  color: var(--lb-mut);
  font-size: 0.94rem;
  line-height: 1.35;
}
.lb-addr:last-of-type {
  margin-bottom: 0;
}
.lb-cont h3 + .lb-addr {
  margin-bottom: 18px;
}

/* Horarios: los días con el mismo horario van agrupados en una sola
   fila ("Lunes a Jueves", "Viernes a Sábado"), en vez de una fila por día
   con cuatro líneas repetidas. */
.lb-hor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.lb-hg {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--lb-line);
}
.lb-hor .lb-hg:last-child {
  border-bottom: 0;
}
.lb-hg b {
  font-weight: 600;
  font-size: 1rem;
  text-transform: capitalize;
}
.lb-hg-h {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lb-brass);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lb-hg-h i {
  font-style: normal;
  font-size: 0.72em;
  opacity: 0.7;
}
.lb-hg small {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: var(--lb-mut);
}
.lb-hg--cerrado b,
.lb-hg--cerrado span {
  color: var(--lb-mut);
}
.lb-hg--cerrado .lb-hg-h,
.lb-hg--cerrado span {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}
.lb-cont .lb-hg {
  padding: 9px 2px;
}

.lb-hint {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--lb-mut);
}
.lb-w {
  width: 100%;
  margin-top: 14px;
}

/* ---------- 15. CTA FINAL ---------- */
.lb-band-gold {
  background: var(--lb-brass-solid);
  padding: 52px 0;
}
.lb-band-gold .lb-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.lb-band-gold h2 {
  color: var(--lb-on-brass);
  max-width: 20ch;
}

/* ---------- 16. FOOTER ---------- */
/* Se eliminó: el pie compacto (.lb-ft) con "© Codigo Barber · Turnos y
   puntos" y las redes repetía lo que ya está en Contacto, así que la
   landing ahora cierra con la banda dorada de "Reservar ahora". Las reglas
   de .lb-soc que quedaban acá nacieron para ese pie y tampoco aplican. */

/* ---------- 17. REVEAL ---------- */
.lb .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lb-t-slow) var(--lb-ease),
    transform var(--lb-t-slow) var(--lb-ease);
}
.lb .reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- 18. HOVER SOLO EN PUNTERO REAL (mobile-native) ---------- */
@media (hover: none) {
  .lb .lb-nav a:hover,
  .lb-btn:hover,
  .lb-chip:not([disabled]):hover,
  .lb-wl:hover {
    /* sin estado pegado en táctil: se revierte al valor base */
    color: inherit;
    border-bottom-color: transparent;
    background-color: transparent;
  }
  .lb-btn--pri:hover {
    background: var(--lb-brass-solid);
    color: var(--lb-on-brass);
  }
  .lb-chip[aria-pressed="true"]:hover {
    background: var(--lb-brass-solid);
    color: var(--lb-on-brass);
  }
}

/* =====================================================================
   ASISTENTE DE RESERVA — 6 pasos (modal en la landing y panel del usuario)
   ===================================================================== */

/* --- modal --- */
/* El fondo es la landing desenfocada, no un velo negro: el velo tapaba
   todo y el modal quedaba flotando sobre un rectángulo gris sin relación
   con el resto del sitio. Se tiñe con el color de marca para que el blur
   se lea como parte del diseño y no como un fondo genérico.
   --lb-velo es opaco justo para que la hoja siga teniendo AA contra él. */
#wzm {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--lb-velo);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  overflow-y: auto;
}
#wzm[hidden] {
  display: none;
}
body.wz-abierto {
  overflow: hidden;
}
/* Navegadores sin backdrop-filter (ninguno de los actuales, pero por si
   acaso) se llevan un velo más cerrado: sin el desenfoque, el texto de la
   landing de atrás compite con la hoja.
   OJO: cada operando del "or" va con sus propios paréntesis. Sin ellos la
   condición no es la que uno cree y el bloque se aplica igual, dejando el
   modal con el velo al 88% y sin ver la página de fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #wzm {
    background: color-mix(in srgb, var(--lb-bg) 80%, transparent);
  }
}
/* --- identidad: logo + nombre arriba de la hoja --- */
.wz-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 44px 16px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--lb-line);
}
.wz-logo {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}
.wz-marca > span {
  min-width: 0;
}
.wz-marca b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--lb-ink);
  overflow-wrap: anywhere;
}
.wz-marca small {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lb-brass);
}
/* la hoja deja de depender del paso para saber cuánto alto puede ser */
.wz-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--lb-card);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-md);
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.wz-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-mut);
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
}
.wz-x:hover {
  color: var(--lb-brass);
  border-color: var(--lb-brass);
}
.wz-x:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}

/* --- cabecera de pasos --- */
.wz-head {
  margin-bottom: 20px;
  padding-right: 48px;
}
.wz-pasos {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wz-paso {
  flex: 1;
  min-width: 0;
  padding-top: 8px;
  border-top: 3px solid var(--lb-line);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lb-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--lb-t) var(--lb-ease),
    border-color var(--lb-t) var(--lb-ease);
}
.wz-paso b {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: inherit;
}
.wz-paso.he {
  border-top-color: color-mix(in srgb, var(--lb-brass) 45%, var(--lb-line));
}
.wz-paso.on {
  color: var(--lb-brass);
  border-top-color: var(--lb-brass);
}
.wz-mini {
  margin: 10px 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lb-mut);
}

/* --- pasos 1 y 2 --- */
.wz-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  cursor: pointer;
  transition: border-color var(--lb-t-fast) var(--lb-ease),
    background-color var(--lb-t-fast) var(--lb-ease);
}
.wz-item-t {
  min-width: 0;
}
.wz-item-t b {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wz-item-t small {
  color: var(--lb-mut);
  font-size: 0.88rem;
}
.wz-item:hover {
  border-color: var(--lb-brass);
}
.wz-item.on {
  border-color: var(--lb-brass);
  background: color-mix(in srgb, var(--lb-brass) 12%, var(--lb-bg));
}
.wz-item:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}

/* En pantallas chicas no entran 6 etiquetas: se ve el número de cada paso,
   y el nombre del actual ya está en "Paso N de 6". */
@media (max-width: 479px) {
  .wz-paso {
    font-size: 0;
    padding-top: 6px;
  }
  .wz-paso b {
    font-size: 1.25rem;
    text-align: center;
  }
  .wz-head {
    padding-right: 44px;
  }
}

/* --- paso 3: calendario --- */
.wz-cal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.wz-cal-top b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wz-nav {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  background: none;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.wz-nav:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.wz-nav:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
/* minmax(0, 1fr) y no 1fr a secas: 1fr es minmax(auto, 1fr), y el "auto"
   no deja que la pista baje del min-content de la celda. Con aspect-ratio
   las celdas quedaban 49 px en vez de 42 y la fila se pasaba 7 px, que
   cortaba la columna del sábado. */
.wz-dows,
.wz-cels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.wz-dows {
  margin-bottom: 4px;
}
.wz-dows span {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lb-mut);
  padding-bottom: 4px;
}
.wz-cel {
  aspect-ratio: 1 / 1;
  min-height: 42px;
  display: grid;
  place-content: center;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--lb-t-fast) var(--lb-ease),
    border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease);
}
.wz-cel.vacia {
  border: 0;
  background: none;
  cursor: default;
}
/* verde = hay horarios libres */
.wz-cel.libre {
  border-color: var(--lb-ok);
  color: var(--lb-ok-t);
  background: color-mix(in srgb, var(--lb-ok) 14%, var(--lb-bg));
}
.wz-cel.libre:hover {
  background: color-mix(in srgb, var(--lb-ok) 26%, var(--lb-bg));
}
/* rojo = día abierto pero sin ningún horario */
.wz-cel.completo {
  border-color: color-mix(in srgb, var(--lb-bad) 55%, var(--lb-line));
  color: var(--lb-bad-t);
  cursor: not-allowed;
  opacity: 0.85;
}
/* cerrado según config/horario, o día ya pasado */
.wz-cel.cerrado,
.wz-cel.pasado {
  color: var(--lb-mut);
  opacity: 0.4;
  cursor: not-allowed;
}
.wz-cel.on {
  box-shadow: inset 0 0 0 2px var(--lb-brass);
  border-color: var(--lb-brass);
}
.wz-cel:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
.wz-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--lb-mut);
}
.wz-leyenda .p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wz-leyenda .p::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid;
}
.wz-leyenda .libre::before {
  border-color: var(--lb-ok);
  background: color-mix(in srgb, var(--lb-ok) 26%, transparent);
}
.wz-leyenda .completo::before {
  border-color: var(--lb-bad);
  background: color-mix(in srgb, var(--lb-bad) 20%, transparent);
}
.wz-leyenda .cerrado::before {
  border-color: var(--lb-line);
}

/* --- paso 4: mañana / tarde --- */
.wz-turnos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* styles.css (el CSS del PANEL, que se carga en el mismo documento) tiene
   `button:hover:not(:disabled) { background: #2a3849 }`: un azul oscuro
   CLAVADO, pensado para los botones del panel. Como el asistente de la
   landing vive en la misma página, esa regla le entraba a sus tarjetas:
   al pasar el mouse la opción se ponía azul noche con el texto casi negro
   encima, ilegible en modo claro. En el celular peor: :hover se queda
   pegado después de tocar, así que la tarjeta quedaba oscura fija.
   Se devuelve el fondo del componente; el hover de la landing se marca
   con el borde, como ya se hacía. */
.wz-item:hover:not(:disabled),
.wz-turno:hover:not(:disabled),
.wz-hora:hover:not(:disabled),
.wz-cel:hover:not(:disabled) {
  background: var(--lb-bg);
}
.wz-turno {
  display: grid;
  gap: 4px;
  align-content: start;
  text-align: left;
  padding: 16px 14px;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  cursor: pointer;
}
.wz-turno b {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wz-turno small {
  color: var(--lb-mut);
  font-size: 0.88rem;
}
.wz-turno em {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lb-ok-t);
}
.wz-turno:hover {
  border-color: var(--lb-brass);
}
.wz-turno.on {
  border-color: var(--lb-brass);
  background: color-mix(in srgb, var(--lb-brass) 12%, var(--lb-bg));
}
/* Sin disponibilidad: deshabilitado y con mensaje debajo.
   SIN opacity a propósito. Con `opacity: .45` el texto del turno apagado
   quedaba en 2.8:1 en modo claro (y 3.73:1 el contador): bajar la
   transparencia compone el color del texto con el fondo y no hay forma de
   llegar a 4.5:1 sin que la tarjeta deje de leerse como "apagada". Con
   esta opacidad mínima tampoco: a .85 el <small> seguía en 3.93:1.
   El estado se marca con el color del texto y el tachado, que es lo que
   ya distingue el turno cerrado del disponible. */
.wz-turno.off {
  cursor: not-allowed;
}
.wz-turno.off b,
.wz-turno.off small {
  color: var(--lb-mut);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.wz-turno.off em {
  color: var(--lb-bad-t);
  text-decoration: none;
}
.wz-turno:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}

/* --- paso 5: horarios --- */
.wz-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.wz-hora {
  min-height: 48px;
  padding: 0 6px;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  color: var(--lb-ink);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color var(--lb-t-fast) var(--lb-ease),
    border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease);
}
.wz-hora:hover {
  border-color: var(--lb-brass);
}
.wz-hora.on {
  background: var(--lb-brass-solid);
  border-color: var(--lb-brass-solid);
  color: var(--lb-on-brass);
}
/* horario ya tomado: se ve, pero apagado y no seleccionable */
.wz-hora.oc {
  color: var(--lb-mut);
  background: transparent;
  border-style: dashed;
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.wz-hora:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
.wz-ocupadas {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--lb-mut);
}

/* --- resumen y avisos --- */
/* El resumen viejo (.wz-sum) era una tabla de 6 filas planas, sin icono y
   sin forma de corregir un dato: para cambiar la hora había que acertar
   con "Atrás" tres veces. Ahora es una tarjeta con cada fila apuntando a su
   propio paso, y el precio aparte. */
.wz-sum {
  border: 1px solid var(--lb-line);
  border-top: 2px solid var(--lb-brass);
  border-radius: var(--lb-r-sm);
  overflow: hidden;
}
.wz-sum div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  font-size: 0.98rem;
  border-bottom: 1px solid var(--lb-line-soft);
}
.wz-sum div:last-child {
  border-bottom: 0;
}
.wz-sum span {
  color: var(--lb-mut);
}
.wz-sum b {
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.wz-res-tit {
  margin: 0 0 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wz-res-sub {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--lb-mut);
}
.wz-res-cols {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 640px) {
  .wz-res-cols {
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.85fr);
    gap: 18px;
  }
}
.wz-res-card {
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  overflow: hidden;
  /* Franja de barbero en el borde de arriba, como en el mockup. */
  border-top: 3px solid var(--lb-brass-solid);
}
.wz-res-lado {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wz-res-precio {
  border: 1px solid var(--lb-brass);
  border-radius: var(--lb-r-sm);
  padding: 14px 16px;
}
.wz-res-precio span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb-mut);
}
.wz-res-precio b {
  display: block;
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 4px 0 2px;
}
.wz-res-precio small {
  color: var(--lb-mut);
}
/* Una fila: icono, etiqueta + valor, y el "Cambiar" que lleva a ese paso. */
.wz-rf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--lb-line-soft);
}
.wz-rf:last-child {
  border-bottom: 0;
}
.wz-rf-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line-soft);
  color: var(--lb-brass);
}
.wz-rf-ico svg {
  width: 20px;
  height: 20px;
}
/* Foto en el resumen: reemplaza al ícono cuando el servicio o el barbero
   tienen una. Mismo ancho que el ícono (38px) para que las filas no se
   descuadren entre sí. */
.wz-rf-img {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line-soft);
}
.wz-rf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La del barbero, redonda: es una cara. */
.wz-rf-img--red {
  border-radius: 50%;
}
/* Casilla de términos y condiciones. Es OBLIGATORIA para confirmar, así que
   el borde se pone dorado al marcarla: el cliente ve que la casilla quedó
   marcada sin tener que volver a mirar el botón. */
.wz-tyc {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  background: var(--lb-bg);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--lb-mut);
  transition: border-color var(--lb-t-fast) var(--lb-ease),
    background-color var(--lb-t-fast) var(--lb-ease);
}
.wz-tyc:hover {
  border-color: var(--lb-brass);
}
.wz-tyc input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--lb-brass);
  cursor: pointer;
}
.wz-tyc a {
  color: var(--lb-brass);
  font-weight: 700;
  text-decoration: underline;
}
.wz-tyc.on {
  border-color: var(--lb-brass);
  background: color-mix(in srgb, var(--lb-brass) 8%, transparent);
  color: var(--lb-ink);
}
.wz-tyc:focus-within {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
.wz-rf-t {
  flex: 1;
  min-width: 0;
}
.wz-rf-t > span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lb-mut);
}
.wz-rf-t b {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wz-rf-t small {
  /* block y no inline: como el <small> va dentro del <b>, inline lo
     pegaba al valor ("Corte (incluye cejas)30 min", "09:00hstermina 09:30"). */
  display: block;
  color: var(--lb-mut);
  font-weight: 500;
}
.wz-rf-c {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lb-brass);
  border: 1px solid color-mix(in srgb, var(--lb-brass) 45%, transparent);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.wz-rf-c:hover {
  background: color-mix(in srgb, var(--lb-brass) 12%, transparent);
}
.wz-rf-c:focus-visible {
  outline: 2px solid var(--lb-brass);
  outline-offset: 2px;
}
.wz-pol {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--lb-line);
  border-left: 3px solid var(--lb-brass);
  border-radius: var(--lb-r-sm);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--lb-mut);
}
/* Aviso de "estás reprogramando": sin él el cliente ve "Confirmar turno"
   y no sabe si le queda el turno viejo además del nuevo. */
.wz-aviso-rep {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--lb-brass);
  border-left: 3px solid var(--lb-brass);
  border-radius: var(--lb-r-sm);
  background: color-mix(in srgb, var(--lb-brass) 8%, transparent);
  font-size: 0.88rem;
}
.wz-aviso-rep b {
  font-weight: 700;
}
.wz-aviso-rep span {
  color: var(--lb-mut);
}
.wz-aviso-rep button {
  justify-self: start;
  margin-top: 6px;
  padding: 5px 0;
  min-height: 32px;
  background: none;
  border: 0;
  color: var(--lb-brass);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.wz-aviso-rep button:hover {
  color: var(--lb-brass-h);
}

.wz-vacio,
.wz-aviso {
  padding: 14px;
  border: 1px dashed var(--lb-line);
  border-radius: var(--lb-r-sm);
  font-size: 0.94rem;
  color: var(--lb-mut);
  text-align: center;
}
.wz-aviso {
  margin-top: 12px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--lb-bad) 55%, var(--lb-line));
  color: var(--lb-bad-t);
}

/* --- foto del barbero (paso 2) --- */
/* space-between sirve para la fila de servicio (nombre a la izquierda,
   precio a la derecha). Acá el texto va PEGADO a la foto, no al borde. */
.wz-item--bar {
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}
.wz-item--bar .wz-item-t {
  flex: 1 1 auto;
}
.wz-foto {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--lb-brass) 22%, var(--lb-bg));
  border: 1px solid var(--lb-line);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lb-brass);
}
.wz-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.wz-item.on .wz-foto {
  border-color: var(--lb-brass);
}

/* --- pie --- */
.wz-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.wz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--lb-r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--lb-t-fast) var(--lb-ease),
    border-color var(--lb-t-fast) var(--lb-ease),
    color var(--lb-t-fast) var(--lb-ease);
}
.wz-btn--pri {
  background: var(--lb-brass-solid);
  color: var(--lb-on-brass);
}
.wz-btn--pri:hover {
  background: var(--lb-brass-h);
}
body[data-theme="light"] .wz-btn--pri:hover {
  background: #b08c3c;
}
.wz-btn--ghost {
  background: none;
  border-color: var(--lb-line);
  color: var(--lb-ink);
}
.wz-btn--ghost:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
.wz-btn--full {
  width: 100%;
  margin-top: 10px;
}
.wz-btn:focus-visible {
  outline: 3px solid var(--lb-brass);
  outline-offset: 3px;
}
.wz-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- tarjeta del hero (abre el modal) --- */
.lb-wcard {
  display: grid;
  gap: 14px;
  align-content: start;
}
.lb-wcard h3 {
  font-size: clamp(1.5rem, 5vw, 2rem);
}
.lb-wpasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
  margin: 4px 0 0;
}
.lb-wpasos .wz-paso {
  border-top-width: 2px;
}
/* La lista de pasos de la tarjeta "Reservá tu turno" es decorativa y en el
   celular no se entendía: seis números sueltos que no dicen qué paso es
   cuál. El asistente real ya muestra los pasos con nombre arriba, así que
   acá alcanza con el botón.

   Va DESPUÉS de `.lb-wpasos` a propósito: es el mismo selector y la misma
   especificidad, así que si la regla queda antes la gana la de arriba y
   `display:none` no hace nada. */
@media (max-width: 640px) {
  .lb-wpasos {
    display: none;
  }
}
.lb-wcard-note {
  margin: 0;
  font-size: 0.86rem;
  color: var(--lb-mut);
}

/* ---------- 18b. HEADER EN PANTALLAS MUY ANGOSTAS ----------
   A 320 px la fila queda justa: logo, nombre, toggle de tema y menú de
   opciones llenan todo el ancho y el nombre se cortaba. Se achica el logo
   y la tipografía, y se cierra el gap: es lo mínimo para que "CODIGO BARBER"
   entre entero sin tocar el diseño que se ve desde 390 px para arriba. */
@media (max-width: 359px) {
  .lb-hd-in {
    gap: 10px;
  }
  .lb-brand img {
    width: 36px;
    height: 36px;
  }
  .lb-brand b {
    font-size: 1.1rem;
  }
}

/* ---------- ver la web con sesion abierta ----------
   La barra de arriba avisa que estas mirando la landing con la cuenta
   abierta y da el boton para volver al panel, sin cerrar sesion. */
.lb-volver {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 16px;
  background: var(--lb-brass);
  color: var(--lb-on-brass);
  font-size: 0.86rem;
  text-align: center;
}
/* En pantallas chicas el texto y el botón van en dos filas: en una sola
   el conjunto no entra y el texto se salía del borde. */
@media (max-width: 520px) {
  .lb-volver {
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px;
    font-size: 0.82rem;
  }
  .lb-volver button {
    width: 100%;
    max-width: 260px;
  }
}
.lb-volver b {
  font-weight: 700;
}
.lb-volver button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 0.82rem/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.lb-volver button:hover {
  background: color-mix(in srgb, var(--lb-on-brass) 16%, transparent);
}
.lb-volver button:focus-visible {
  outline: 3px solid var(--lb-on-brass);
  outline-offset: 2px;
}

/* Boton "Ver la web" del header de la app y del menu movil: mismo formato
   que "Cerrar sesion", asi se leen como la misma familia de acciones. */
#web {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#web:hover {
  border-color: var(--brass);
  color: var(--brass);
}
#web svg {
  width: 18px;
  height: 18px;
}
#web:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  #web span {
    display: none;
  }
  #web {
    padding: 0 10px;
  }
}
#nmenu .irweb {
  width: 100%;
  margin-top: 6px;
  text-align: left;
}



/* ---------- ajustes pedidos ----------
   1. El header con sesion va solo con la foto de perfil. El nombre sigue
      en el title y aria-label del avatar, asi no se pierde para lectores
      de pantalla ni al pasar el mouse. */
#mefn {
  display: none;
}
#med {
  width: 34px;
  height: 34px;
}

/* 2. "Volver a la web" con mas presencia: dorado pleno con borde marcado.
   Antes era un boton fantasma gris sobre navy y no se leia. */
.marca .volver {
  background: var(--brassFill);
  border-color: var(--brassFill);
  color: #141c26;
  font-weight: 700;
  min-height: 44px;
  padding: 0 16px;
}
.marca .volver:hover {
  background: #b08c3c;
  border-color: #b08c3c;
  color: #141c26;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 28%, transparent);
}
.marca .volver:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}
/* El dorado de superficie (--brassFill) es MAS CLARO en tema claro
   (#d4a84b) que en oscuro (#c9a24b), asi que encima va tinta oscura en los
   dos temas. Este override ponia marfil y dejaba el boton en 2.09:1,
   ilegible. Se borra: la regla base de mas arriba ya dice #141c26, que
   sobre el dorado claro da 7.76:1.

   OJO: estas reglas viven en landing.css y pisan a las de styles.css con el
   mismo selector. Otra fuga tipo 10h. */

/* 3. El mapa se achica en pantallas anchas: antes ocupaba todo el ancho y
   empujaba el resto de la banda de contacto. */
/* El mapa va en la tarjeta de contacto. Chiquito y con bordes
   redondeados, no un bloque que se come media banda. */
.lb-map {
  margin-top: 18px;
  border: 1px solid var(--lb-line);
  border-radius: var(--lb-r-sm);
  overflow: hidden;
  background: var(--lb-bg);
}
.lb-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}

/* ---------- CONTACTO (mockup del dueño) ----------
   Reorganiza la sección en dos columnas: a la izquierda mapa, dirección y
   horarios; a la derecha el formulario y las redes. En el celular se
   apila en ese mismo orden. */
.lb-cont {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .lb-cont {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
}
.lb-cont-col {
  display: grid;
  gap: 16px;
  min-width: 0;
}
/* Etiqueta en versalitas dorada, como las del resto de la landing. */
.lb-etq {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lb-brass);
  margin-bottom: 8px;
}
/* El mapa ahora encabeza la columna, con la etiqueta arriba y el botón
   "Cómo llegar" sobre el mapa. */
.lb-map--top {
  position: relative;
  margin-top: 0;
  min-height: 230px;
}
.lb-map--top iframe {
  height: 230px;
}
.lb-map-lbl {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  right: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lb-card) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lb-line);
  pointer-events: none;
}
.lb-map-lbl b {
  display: block;
  font-weight: 700;
}
.lb-map-lbl small {
  color: var(--lb-mut);
}
.lb-map-btn {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lb-card) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lb-line);
  color: var(--lb-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.lb-map-btn:hover {
  border-color: var(--lb-brass);
  color: var(--lb-brass);
}
/* "Dónde estamos": ícono a la izquierda, dirección al lado. */
.lb-donde-t {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.lb-donde-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--lb-bg);
  border: 1px solid var(--lb-line-soft);
  color: var(--lb-brass);
}
.lb-donde-ico svg {
  width: 22px;
  height: 22px;
}
/* Con el ícono de reloj, la etiqueta tiene que ir en línea al lado. */
.lb-donde-ico.lb-etq {
  display: flex;
  gap: 10px;
  align-items: center;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  margin-bottom: 12px;
  padding: 0;
}
.lb-donde-t b,
.lb-donde-t > div > span:not(.lb-etq) {
  display: block;
}
.lb-donde-t > div > b {
  font-weight: 600;
  line-height: 1.4;
}
.lb-donde-t > div > span:not(.lb-etq) {
  color: var(--lb-mut);
  font-size: 0.94rem;
  line-height: 1.4;
}
.lb-llegar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  color: var(--lb-brass);
}
/* Como paso suelto de la columna (no dentro de la tarjeta de dirección),
   se estira y deja de depender del texto que tenga al lado. */
.lb-llegar--suelto {
  justify-content: center;
  width: 100%;
  margin-top: 0;
  padding: 14px 18px;
  border: 1px solid var(--lb-brass);
  background: var(--lb-bg);
}
/* Una fila de horario: días a la izquierda, horario (o "Cerrado") a la
   derecha, con una línea de por medio entre grupos. */
.lb-hr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--lb-line-soft);
}
.lb-hr:first-child {
  border-top: 0;
  padding-top: 0;
}
.lb-hr b {
  display: block;
  font-weight: 700;
}
.lb-hr small {
  color: var(--lb-mut);
}
.lb-hr strong {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.5rem;
  color: var(--lb-brass);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lb-hr--cerrado b,
.lb-hr--cerrado strong {
  color: var(--lb-mut);
}
.lb-hr-cerrado {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--lb-line);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lb-mut);
  white-space: nowrap;
}
.lb-card--form h3 {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lb-card--form label abbr {
  color: var(--lb-brass);
  text-decoration: none;
}
/* "También podés escribirnos por": botones pastilla con el ícono. */
.lb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lb-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  background: var(--lb-bg);
  color: var(--lb-ink);
  font-weight: 600;
  text-decoration: none;
}
.lb-pill:hover {
  border-color: var(--lb-brass);
}
.lb-pill img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
@media (min-width: 900px) {
  .lb-map iframe {
    height: 200px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lb-map iframe {
    transition: filter var(--lb-t) var(--lb-ease);
  }
  .lb-map:hover iframe {
    filter: saturate(1.1);
  }
}



/* ---------- header de la app en modo claro ----------
   El header usaba var(--navy) y texto #fff fijo, asi que se quedaba navy
   con la landing en claro: los dos temas no coincidian. Ahora sigue al
   tema como todo lo demas. */
body[data-theme="light"] header {
  background: var(--card);
}
body[data-theme="light"] header,
body[data-theme="light"] header a,
body[data-theme="light"] header button,
body[data-theme="light"] header .navlink {
  color: var(--ink);
}
body[data-theme="light"] header .lnd-nv a {
  color: var(--ink);
}
/* El botón activo del nav: dorado sobre tinte claro daba 1,76:1, ilegible.
   Se usa el mismo patrón que ya tienen .chip.on y .tabs .on: fondo dorado
   sólido con tinta oscura. */
body[data-theme="light"] header nav .on,
body[data-theme="light"] #nmenu button.on {
  /* --brassFill (superficie), no --brass (tinta): con el dorado oscuro de
     texto el #141c26 encima se iba a ~2.9:1. */
  background: var(--brassFill);
  color: #141c26;
}
/* El boton de tema venia con fondo blanco fijo y en claro quedaba un
   cuadrado blanco sobre la barra. */
body[data-theme="light"] #thm {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
body[data-theme="light"] #web,
body[data-theme="light"] #lo {
  background: none;
  color: var(--ink);
  border-color: var(--line);
}
body[data-theme="light"] #mebadge {
  background: var(--bg);
  border-color: var(--line);
}
body[data-theme="light"] .msg {
  background: var(--card);
  color: var(--ink);
}



/* ---------- modo claro: controles con color clavado ----------
   En styles.css hay varios fondos y textos escritos a mano (#141c26,
   #a9b4c4, #6f7d90) que en vez de seguir al tema quedan oscuros con la
   pagina en claro: los <select> del formulario de agendar y los <input
   type="date"> del panel salian como recuadros negros sobre fondo marfil. */
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: var(--mut);
}
/* La lista desplegable de <datalist>/<select> la pinta el navegador segun
   el color-scheme. Sin esto el desplegable sale negro en claro. */
body[data-theme="light"] {
  color-scheme: light;
}
body:not([data-theme="light"]) {
  color-scheme: dark;
}
body[data-theme="light"] option {
  background: var(--card);
  color: var(--ink);
}
body[data-theme="light"] .reglas,
body[data-theme="light"] .clave .ver,
body[data-theme="light"] label small {
  color: var(--mut);
}
body[data-theme="light"] .ver:hover {
  color: var(--ink);
}
/* El calendario del asistente se desborda en pantallas anchas: las celdas
   quedan de 130 px y hay que scrollear para ver el mes entero. Se limita
   el ancho de la hoja en escritorio, que es donde el problema aparece. */
@media (min-width: 900px) {
  .wz-sheet {
    max-width: 460px;
  }
  .wz-cel {
    min-height: 46px;
    font-size: 1rem;
  }
  .wz-dows span {
    font-size: 0.64rem;
  }
}



/* ---------- pestana de la resena ----------
   Las estrellas quedaban juntas, pegadas al centro, y el hover de una
   tapaba a la de al lado. Ahora la fila ocupa todo el ancho de la tarjeta
   y cada estrella se estira, asi el area sensible es la mitad de la fila. */
.rev-tit {
  text-align: center;
}
.rev-card {
  max-width: 560px;
  margin: 10px auto 0;
  text-align: center;
}
.rev-card h2 {
  margin-bottom: 6px;
}
.rev-estrellas {
  display: flex;
  gap: 6px;
  margin: 6px 0 4px;
}
.rev-estrella {
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--rad, 10px);
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1;
  color: var(--mut);
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.rev-estrella.on {
  color: var(--brass);
}
.rev-estrella:hover {
  transform: scale(1.12);
}
.rev-estrella:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}
.rev-hint {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--brass);
}
.rev-hint--vacio {
  color: var(--mut);
}
.rev-hint .lnk2 {
  background: none;
  border: 0;
  padding: 0;
  color: var(--mut);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.rev-hint .lnk2:hover {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .rev-estrella {
    transition: none;
  }
  .rev-estrella:hover {
    transform: none;
  }
}


/* ---------- 19. DESKTOP (>= 1280px) ----------
   El nav completo (7 links) mide ~560 px y con la marca, los dos botones y
   el toggle hacen ~1160 px de contenido. Por debajo de 1280 de viewport
   no entran sin partirse en dos líneas, así que ahí va el hamburguesa.
   Primer escalón: aparece el nav de 7 links + Ingresar + Reservar,
   pero las redes del header todavía no. Siguen estando en Contacto,
   en el panel móvil y en el footer. */
@media (min-width: 1280px) {
  .lb {
    --lb-pad: 40px;
    --lb-sec: 104px;
    --lb-stripe-h: 8px;
    padding-bottom: 0;
  }
  .lb-hd-in {
    min-height: 104px; /* menú GRANDE */
  }
  .lb-brand img {
    width: 54px;
    height: 54px;
  }
  .lb-brand b {
    font-size: 2.1rem;
  }
  .lb .lb-nav {
    display: flex;
  }
  .lb .lb-burger,
  .lb .lb-panel {
    display: none !important;
  }
  .lb .lb-hd-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
  .lb-sticky {
    display: none;
  }

  .lb-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    padding-block: 72px 88px;
  }
  .lb-hero h1 {
    max-width: 11ch;
  }
  .lb-widget {
    margin-top: 0;
  }
  .lb .lb-hero-tx {
    position: sticky;
    top: 140px;
  }

  /* servicios: grilla auto-fill (la lista de filas es solo mobile) */
  .lb .lb-sv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
  }
  .lb .lb-sv-list-m {
    display: none;
  }
  .lb-sv-desc {
    display: block;
  }

  .lb .lb-prizes {
    grid-template-columns: repeat(3, 1fr);
  }
  /* puntos: premios izq + progreso der */
  .lb-pts {
    grid-template-columns: 1.55fr 1fr;
    gap: 34px;
    align-items: start;
  }
  .lb-prog {
    position: sticky;
    top: 128px;
  }

  /* galería: 4 columnas, 1 grande 2x2 + el resto chicas.
     Con muchas fotos la grilla sigue creciendo sola: entra todas. */
  .lb-gal {
    grid-template-columns: repeat(4, 1fr);
  }
  .lb-gal figure:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 1 / 1;
  }

  /* equipo: 2 columnas en escritorio, como el mockup */
  .lb-team {
    grid-template-columns: repeat(2, 1fr);
  }
  /* La caja de la foto ya trae aspect-ratio 4/5 y contain en la regla
     base. Este `height:auto` de acá la pisaba y la volvía a la proporción
     natural de la imagen, que es justo lo que ya no queremos. */

  /* Las reseñas ya no son tarjetas sueltas en grilla: viven en un carrusel
     que él solo se encarga de las 3 columnas. Esta regla era de cuando
     cada .lb-tst era un item suelto del grid; ahora hay un solo hijo (el
     carrusel) y con 3 columnas lo encogía al tercio. */
  .lb-test {
    grid-template-columns: minmax(0, 1fr);
  }

  /* contacto: 2 columnas */
  .lb-cont {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
  }

  .lb-band-gold {
    padding: 72px 0;
  }
}

/* hover de tarjetas: solo con puntero real (evita el hover pegado en táctil).
   Sombra únicamente como respuesta al estado — el resto del sistema es plano. */
@media (hover: hover) {
  .lb-sv,
  .lb-prize,
  .lb-barber,
  .lb-tst {
    transition: transform var(--lb-t) var(--lb-ease),
      border-color var(--lb-t) var(--lb-ease),
      box-shadow var(--lb-t) var(--lb-ease);
  }
  .lb-sv:hover,
  .lb-prize:hover,
  .lb-barber:hover,
  .lb-tst:hover {
    transform: translateY(-4px);
    border-color: var(--lb-brass);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
  }
  .lb-band-ivory .lb-sv:hover {
    border-top-color: var(--lb-brass-solid);
    box-shadow: 0 10px 26px -16px rgba(20, 28, 38, 0.45);
  }
  .lb-widget:hover {
    border-color: color-mix(in srgb, var(--lb-brass) 55%, var(--lb-line));
  }
}

/* ---------- 19b. TRANSICIÓN DEL TOGGLE CLARO/OSCURO ----------
   Solo en las superficies que cambian de tono. .lb-btn y .lb-chip ya tienen
   su propia transition (gana la regla del componente, no se pisa). */
body,
.lb,
.lb-hd,
.lb .lb-panel,
.lb-card,
.lb-sv,
.lb-prize,
.lb-prog,
.lb-barber,
.lb-tst,
.lb-wl,
.lb-gal figure,
.lb-barber-ph,
.lb-field input,
.lb-field textarea,
.lb-sum,
.lb-hor th,
.lb-hor td,
.lb-band-gold {
  transition: background-color 320ms var(--lb-ease),
    color 320ms var(--lb-ease), border-color 320ms var(--lb-ease);
}
/* safe-area arriba del header (notch en landscape) */
.lb-hd {
  padding-top: env(safe-area-inset-top);
}

/* ---------- 19b. MARCA EN ANCHOS MEDIOS ----------
   Marca 233 + nav 572 + botones 259 + tema 48 = 1112, y ya entra justo en
   los 1240 px del header. Igual el nombre de la marca va primero. */
@media (min-width: 1280px) and (max-width: 1639px) {
  /* El nombre de la marca va primero: se le baja un punto la tipografía y
     se cierra el gap del nav para que "CODIGO BARBER" entre entero en los
     1240 px del header. Medido: sobran ~9 px de aire. */
  .lb .lb-brand b {
    font-size: 1.9rem;
  }
  .lb .lb-nav {
    gap: 12px;
  }
  .lb .lb-nav a {
    font-size: 16px;
  }
  .lb .lb-hd-cta .lb-btn {
    padding: 0 16px;
    font-size: 1rem;
  }
}

/* ---------- 19c. HEADER ANCHO ----------
   El contenido mide 1240 px y el header se abre a 1560 en pantallas
   anchas: así el header respira más que el cuerpo, que sigue en 1240. */
@media (min-width: 1640px) {
  .lb .lb-hd-in {
    max-width: 1560px;
    gap: 20px;
  }
  .lb .lb-nav {
    gap: 20px;
  }
  .lb .lb-nav a {
    font-size: 17px;
  }
  .lb .lb-hd-cta .lb-btn {
    padding: 0 20px;
    font-size: 1.1rem;
  }
}

/* ---------- 20. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .lb *,
  .lb *::before,
  .lb *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lb .reveal {
    opacity: 1;
    transform: none;
  }
  .lb-btn:active {
    transform: none;
  }
  /* el carrusel no rota solo (eso lo corta el JS), pero el salto manual
     tampoco se desliza: cambia de una */
  .lb-car-viz {
    transition: none !important;
  }
}

/* ---------- 21. ACCESIBILIDAD ---------- */
@media (prefers-contrast: more) {
  .lb-mut {
    color: var(--lb-ink);
  }
  .lb-chip,
  .lb-wl,
  .lb-btn--ghost {
    border-width: 2px;
  }
}
.lb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}