/* =========================================================
   4EVER BARBER STYLE — Secciones y componentes
   ========================================================= */

/* =========================================================
   BLOQUES DE IMAGEN
   Mientras no lleguen las fotos definitivas, cada bloque
   intenta cargar la foto del local y, si no existe, cae a una
   composición cálida de madera y cuero. Las capas de fondo de
   CSS se saltan solas las imágenes que fallan, así que no hace
   falta ni JavaScript ni marcadores rotos.

   Para poblarlo: basta con dejar assets/img/salon-01.jpg.
   Cada bloque usa --ph-pos para encuadrar una zona distinta,
   así una sola foto da una galería entera.
   Ver CONTEXTO.md para la lista de fotos definitivas.
   ========================================================= */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--graphite);
  background-image:
    /* Velo cálido y suave: unifica fotos de origen distinto sin
       ensuciarlas. Con --ph-veil se sube en un bloque concreto. */
    linear-gradient(168deg,
      rgba(11, 11, 12, var(--ph-veil, 0.28)),
      rgba(107, 74, 56, calc(var(--ph-veil, 0.28) * 0.42))),
    var(--ph-img, url('../assets/img/salon-01.jpg')),
    repeating-linear-gradient(115deg,
      rgba(232, 222, 210, 0.028) 0 2px,
      transparent 2px 10px),
    radial-gradient(120% 90% at 20% 0%, rgba(232, 177, 92, 0.16), transparent 60%),
    linear-gradient(155deg, var(--graphite) 0%, var(--wood) 62%, var(--leather) 100%);
  background-size: cover;
  background-position: var(--ph-pos, center);
  background-repeat: no-repeat;
}

/* Asignación de fotos. Van aquí y no en el HTML porque una url() dentro
   de una custom property se resuelve relativa a ESTA hoja de estilos,
   no al documento que la usa.
   ⚠ TEMPORALES: son imágenes de Unsplash para la demo. Sustituir por las
   fotos reales del cliente antes de publicar. Ver CONTEXTO.md. */
.ph--about    { --ph-img: url('../assets/img/about.jpg'); }
.ph--w1       { --ph-img: url('../assets/img/work-01.jpg'); }
.ph--w2       { --ph-img: url('../assets/img/work-02.jpg'); }
.ph--w3       { --ph-img: url('../assets/img/work-03.jpg'); }
.ph--w4       { --ph-img: url('../assets/img/work-04.jpg'); }
.ph--interior { --ph-img: url('../assets/img/interior.jpg'); }
.ph--detail   { --ph-img: url('../assets/img/detail.jpg'); }
.ph--t1       { --ph-img: url('../assets/img/team-01.jpg'); --ph-pos: center 25%; }
.ph--t2       { --ph-img: url('../assets/img/team-02.jpg'); --ph-pos: center 25%; }
.ph--t3       { --ph-img: url('../assets/img/team-03.jpg'); --ph-pos: center 25%; }
.ph--t4       { --ph-img: url('../assets/img/team-04.jpg'); --ph-pos: center 25%; }

/* Variante de reserva para las tarjetas del equipo cuando no hay retrato:
   un recorte de la sala no funciona como cara, así que va la marca. */
.ph--mark {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 -2 172 104'%3E%3Cpath d='M 100,50 C 115,35 130,15 150,15 C 180,15 180,85 150,85 C 130,85 115,65 100,50 L 25,50 L 65,10 L 65,70 C 65,85 85,65 100,50 Z' fill='none' stroke='%23E8DED2' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(90% 70% at 50% 22%, rgba(232, 177, 92, 0.14), transparent 62%),
    linear-gradient(168deg, var(--graphite-2) 0%, var(--wood) 74%, var(--leather) 100%);
  background-size: 52% auto, cover, cover;
  background-position: center 42%, center, center;
  background-repeat: no-repeat;
  opacity: 1;
}

.ph--mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 11, 12, 0.55));
}

/* Panel del mapa: cuadrícula de calles sugerida + chincheta. */
.ph--map {
  background-image:
    repeating-linear-gradient(0deg, rgba(232, 222, 210, 0.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(232, 222, 210, 0.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(58deg, rgba(232, 222, 210, 0.05) 0 1px, transparent 1px 118px),
    radial-gradient(60% 60% at 50% 50%, rgba(232, 177, 92, 0.13), transparent 70%),
    linear-gradient(160deg, var(--charcoal), var(--graphite-2));
  background-size: auto;
  background-position: center;
}

.ph--map::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(232, 177, 92, 0.18), 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height 0.35s var(--ease),
              background-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  height: 62px;
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.nav__logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
  transition: height 0.35s var(--ease);
}

.nav.is-scrolled .nav__logo img { height: 36px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

/* El menú se veía apagado al lado del resto de la página, sobre todo en
   pantallas grandes. Medido, el contraste PASABA de sobra (6.3 sobre el hero,
   8.19 al bajar), así que no era eso: era peso visual, y por tres motivos que
   se sumaban.

   1. Iba en --taupe, que es el color de texto SECUNDARIO. El contenido de la
      página va en --sand. El menú principal no es contenido secundario.

   2. El tamaño era FIJO mientras el resto de la página escala con clamp(). En
      un monitor de 1920 el cuerpo crece a 17px y el menú se quedaba en 12 —
      por eso cantaba justo en pantalla grande y no en el portátil.

   3. Con 0.18em de espaciado y peso 400 sobre una tipografía ligera, los
      trazos se ven más finos de lo que miden.

   El activo pasa a ámbar, que es el color del subrayado que ya tenía: así
   sigue habiendo tres estados distintos sin devolver el normal a apagado. */
.nav__link {
  position: relative;
  /* El vw tiene que ser lo bastante grande para SUPERAR el mínimo, o el clamp
     no crece nunca: con 0.62vw, a 1600px daban 9.9px y ganaba siempre el
     mínimo de 0.76rem. Medido, no supuesto. Ahora: 12.5px hasta ~1360px, y de
     ahí sube hasta 15.2px. */
  font-size: clamp(0.78rem, 0.92vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  padding-block: 0.4em;
  transition: color 0.25s var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

/* Ámbar, no --sand: desde que el estado normal es --sand, repetirlo aquí
   dejaría el activo sin distinguirse. El ámbar es el mismo color del subrayado
   que ya llevaba, así que no añade un color nuevo a la paleta. */
.nav__link:hover,
.nav__link.is-current { color: var(--amber); }

.nav__link:hover::after,
.nav__link.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* --- Selector de idioma --- */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.lang__btn {
  padding: 0.32em 0.6em;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  /* --taupe y no --taupe-dim: los idiomas que NO están activos se veían casi
     apagados al lado del menú. Siguen siendo secundarios —el activo va en
     ámbar y con fondo— pero legibles. */
  color: var(--taupe);
  border-radius: 2px;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.lang__btn:hover { color: var(--sand); }

.lang__btn.is-active {
  background: var(--graphite-2);
  color: var(--amber);
}

/* Aquí vivía la hamburguesa. La barra inferior la sustituyó en todo el rango
   móvil y en escritorio el menú es la fila de enlaces de la cabecera, así que
   se quedó sin ningún ancho de pantalla donde mostrarse. */

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Capas: foto del local (si existe) + luz ámbar + oscurecido.
   Si la foto falta, los degradados de abajo sostienen la escena. */
.hero__bg {
  position: absolute;
  inset: -6% 0 0 0;
  height: 112%;
  z-index: -2;
  background-image:
    url('../assets/img/salon-01.jpg');
  background-size: cover;
  background-position: center 42%;
  will-change: transform;
}

.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(232, 177, 92, 0.20), transparent 62%),
    linear-gradient(180deg,
      rgba(11, 11, 12, 0.86) 0%,
      rgba(11, 11, 12, 0.62) 34%,
      rgba(11, 11, 12, 0.78) 70%,
      var(--ink) 100%);
}

/* Respaldo cálido para cuando aún no hay foto del local */
.hero__fallback {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(232, 177, 92, 0.22), transparent 65%),
    linear-gradient(160deg, var(--charcoal) 0%, var(--wood) 58%, var(--leather) 100%);
}

/* Todo el bloque del hero está dimensionado para que los CTA queden por
   encima del pliegue en un portátil de 720px, que es el caso apretado. */
.hero__inner {
  padding-block: calc(var(--nav-h) + 1.4rem) 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* max-height en vez de atar el alto al ancho: así funciona igual con el
   logo actual (3:2) que con uno cuadrado, sin comerse la pantalla en
   portátiles ni en móviles apaisados. */
/* El tope de alto se aplica sobre el ancho (el logo es 3:2, así que
   26vh de alto = 39vh de ancho). Así la caja no queda con holgura.
   object-fit queda de red de seguridad: si mañana entra un logo con
   otra proporción, se encoge en vez de estirarse. */
.hero__logo {
  width: min(clamp(190px, 26vw, 360px), 39vh);
  object-fit: contain;
  margin-bottom: clamp(0.9rem, 1.8vw, 1.6rem);
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.6));
  animation: heroIn 1.1s var(--ease) both;
}

.hero__title {
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block: 0.4rem 0;
  animation: heroIn 1.1s var(--ease) 0.14s both;
}

.hero__eyebrow { animation: heroIn 1.1s var(--ease) 0.05s both; }

/* En --sand y no en --taupe, que es el color de texto secundario del resto de
   la web.

   Aqui va encima de una FOTO, y la del local tiene paredes crema y espejos con
   LED. Medido sobre la imagen con la capa oscura aplicada: en los bloques mas
   claros el taupe se quedaba en 3.72 de contraste, por debajo del 4.5 que pide
   AA. El promedio de la foto daba 5.6 y pasaba — pero el ojo no lee promedios,
   lee el trozo de frase que cae sobre la pared iluminada.

   Con --sand el peor bloque sube a 6.72. Se pierde algo de jerarquia frente al
   titulo, y compensa: son dos lineas que hay que poder leer. */
.hero__subtitle {
  max-width: 56ch;
  margin-top: 1.1rem;
  color: var(--sand);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  animation: heroIn 1.1s var(--ease) 0.24s both;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.2rem);
  animation: heroIn 1.1s var(--ease) 0.34s both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Decoración: en pantallas bajas se solapa con los CTA, y ahí los CTA mandan.
   Solo aparece cuando hay altura de sobra. */
.hero__scroll { display: none; }

@media (min-height: 800px) {
  .hero__scroll { display: flex; }
}

.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--amber), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}

/* =========================================================
   BARRA DE CONFIANZA
   ========================================================= */
.trust {
  /* Verde mas profundo que --olive: sobre el tono claro el texto no llegaba a AA */
  background: linear-gradient(180deg, #3F4427, var(--olive-lo));
  color: #F3F1E7;
  padding-block: clamp(28px, 3.4vw, 44px);
}

/*
   Columnas segun CUANTAS cifras haya, no cuatro fijas.

   Estaba en `repeat(4, 1fr)`, dando por hecho que siempre saldrian las cuatro.
   Pero son KPI: cada una aparece solo cuando pasa su umbral, asi que un negocio
   recien estrenado ensena dos. Con las cuatro columnas fijas, esas dos se
   apelotonaban en la mitad izquierda y la derecha quedaba vacia — la barra
   parecia rota, no incompleta.

   Asi se reparten el ancho entre las que haya y siempre queda simetrica: dos
   caen a un cuarto y tres cuartos, con su separador justo en el medio.
*/
.trust__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  text-align: center;
}

.trust__item {
  position: relative;
  padding-inline: 0.5rem;
}

.trust__item + .trust__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 42px;
  background: rgba(243, 241, 231, 0.22);
}

.trust__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.trust__label {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 241, 231, 0.88);
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.services { background: var(--ink); }

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--charcoal);
}

.tab {
  padding: 0.7em 1.9em;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe-dim);
  border-radius: 2px;
  transition: color 0.28s var(--ease), background-color 0.28s var(--ease);
}

.tab:hover { color: var(--sand); }

.tab.is-active {
  background: linear-gradient(135deg, var(--amber), var(--amber-lo));
  color: var(--ink);
}

.tab-panel[hidden] { display: none; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.svc {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.3s var(--ease),
              transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}

/* Filo cálido que aparece al pasar el ratón */
.svc::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.svc:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.svc:hover::before { opacity: 1; }

.svc__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.svc__name {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--sand);
}

/* Línea punteada estilo carta de restaurante */
.svc__dots {
  flex: 1;
  height: 1px;
  min-width: 16px;
  background-image: radial-gradient(circle, var(--taupe-dim) 1px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  opacity: 0.5;
  transform: translateY(-3px);
}

.svc__price {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--amber);
  white-space: nowrap;
}

.svc__price small {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe-dim);
  margin-right: 0.35em;
}

.svc__desc {
  color: var(--taupe);
  font-size: 0.94rem;
  flex: 1;
}

.svc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.svc__time {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.svc-note {
  margin-top: clamp(24px, 3vw, 36px);
  text-align: center;
  font-size: 0.82rem;
  color: var(--taupe-dim);
}

/* =========================================================
   NOSOTROS
   ========================================================= */
.about {
  background: var(--charcoal);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.about__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sello con los años de oficio, apoyado sobre la foto */
.about__badge {
  position: absolute;
  right: -14px;
  bottom: 28px;
  z-index: 2;
  padding: 1rem 1.3rem;
  background: var(--ink);
  border: 1px solid var(--amber-lo);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.about__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--amber);
}

.about__badge span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.about__body p + p { margin-top: 1.1rem; }

.about__body p {
  color: var(--taupe);
  font-size: 1.02rem;
}

.about__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(28px, 3.4vw, 44px);
}

.feature__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--amber);
}

.feature__icon svg { width: 19px; height: 19px; }

.feature h3 {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sand);
  margin-bottom: 0.35rem;
}

.feature p {
  font-size: 0.88rem;
  color: var(--taupe-dim);
  line-height: 1.6;
}

/* =========================================================
   GALERÍA
   ========================================================= */
.gallery { background: var(--ink); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: clamp(10px, 1.2vw, 16px);
}

.gallery__item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--graphite);
}

.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(4) { grid-column: span 2; }
.gallery__item:nth-child(6) { grid-row: span 2; }

.gallery__item img,
.gallery__item .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}

.gallery__item:hover img,
.gallery__item:hover .ph {
  transform: scale(1.07);
  filter: brightness(1.08);
}

/* Velo con lupa al pasar por encima */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(11, 11, 12, 0.72));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.gallery__item:hover::after { opacity: 1; }

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(6, 6, 7, 0.95);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__stage {
  max-width: min(1000px, 92vw);
  max-height: 82vh;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.lightbox__stage img,
.lightbox__stage .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox__btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--sand);
  background: rgba(20, 20, 22, 0.72);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.lightbox__btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.lightbox__btn--prev { left: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox__btn--close { top: clamp(12px, 3vw, 32px); right: clamp(12px, 3vw, 40px); }

.lightbox__counter {
  position: absolute;
  bottom: clamp(14px, 3vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--taupe-dim);
}

/* =========================================================
   EQUIPO
   ========================================================= */
.team { background: var(--charcoal); }

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

/* --- En pantallas pequeñas, el equipo se desliza en horizontal ---

   Con la rejilla, cuatro personas en una o dos columnas hacen una sección de
   metro y medio de alto: para ver al último barbero hay que bajar media
   pantalla varias veces. Deslizando de lado, la sección mide lo que UNA
   tarjeta y se recorre con el pulgar.

   Es scroll-snap del navegador, sin una línea de JavaScript. A propósito: el
   carrusel de opiniones sí lleva script, y aquí no hace falta ninguno. Lo
   nativo trae gratis el arrastre con el dedo, la inercia, el teclado y el
   lector de pantalla, y no se pelea con Blazor por el DOM.

   El corte está donde la rejilla bajaría a dos columnas o menos. */
@media (max-width: 760px) {
  .team__grid {
    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;

    /* Que no se cuele media tarjeta al soltar rápido: en un carrusel de
       personas, pasarse de largo obliga a volver. */
    scroll-padding-inline: var(--gutter);

    /* Se sale del contenedor a los lados y se le devuelve el margen por
       dentro. Sin esto, la tarjeta se corta en seco contra el borde y no se
       ve que hay más: el recorte limpio es lo que dice "aquí sigue". */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.4rem;

    /* La barra sobra: el dedo ya es la pista, y la que asoma detrás también. */
    scrollbar-width: none;
  }

  .team__grid::-webkit-scrollbar { display: none; }

  .member {
    /* Deja asomar la siguiente. Ese trocito visible es lo que le dice a
       cualquiera que se desliza, sin poner un cartel. */
    flex: 0 0 min(74%, 260px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

}

/* La entrada de las tarjetas no puede desplazarse en vertical aquí: con
   overflow-y oculto, el translateY se vería recortado por abajo mientras dura.
   Dentro del carrusel entra solo con opacidad.

   Va en su propio bloque, y no dentro del anterior, por el
   prefers-reduced-motion: esta regla tiene MÁS especificidad que el
   `.reveal { animation: none }` de base.css y se lo comería. Quien pide menos
   movimiento no debe recibir ninguno. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .team__grid .reveal { animation-name: revealFadeOnly; }
}

@keyframes revealFadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

.member__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.1rem;
}

.member__media img,
.member__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.member:hover .member__media img,
.member:hover .member__media .ph { transform: scale(1.05); }

.member__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 11, 12, 0.85));
}

.member__name {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--sand);
}

.member__role {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* =========================================================
   OPINIONES
   ========================================================= */
.reviews {
  background: var(--ink);
  overflow: hidden;
}

.reviews__viewport { overflow: hidden; }

.reviews__track {
  display: flex;
  transition: transform 0.7s var(--ease);
}

.review {
  flex: 0 0 100%;
  padding-inline: clamp(0px, 6vw, 90px);
  text-align: center;
}

.review__stars {
  color: var(--amber);
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  margin-bottom: 1.4rem;
}

.review__quote {
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 2.3vw, 1.72rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--sand);
}

.review__quote::before { content: '\201C'; }
.review__quote::after  { content: '\201D'; }

.review__author {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.reviews__arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--taupe);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.reviews__arrow:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.reviews__dots { display: flex; gap: 16px; }

.reviews__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--graphite-2);
  transition: background-color 0.25s var(--ease), width 0.25s var(--ease);
}

/* El punto se ve de 7px pero se pulsa en un área de 23×39 */
.reviews__dot::after {
  content: '';
  position: absolute;
  inset: -16px -8px;
}

.reviews__dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--amber);
}

/* =========================================================
   VISÍTANOS
   ========================================================= */
.visit { background: var(--charcoal); }

.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4.5vw, 70px);
  align-items: start;
}

.info-block + .info-block { margin-top: clamp(24px, 3vw, 36px); }

.info-block__label {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.7rem;
}

.info-block address,
.info-block p {
  font-style: normal;
  color: var(--sand);
  font-size: 1.02rem;
}

.info-block a { transition: color 0.2s var(--ease); }
.info-block a:hover { color: var(--amber); }

.hours { border-top: 1px solid var(--line); }

.hours li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.72rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--taupe);
}

/* El día de hoy se destaca para que se lea de un vistazo */
.hours li.is-today {
  color: var(--sand);
  font-weight: 500;
}

.hours li.is-today .hours__day::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.hours li.is-closed .hours__time { color: var(--taupe-dim); }

.visit__map {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.visit__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.86);
}

.visit__map .ph { width: 100%; height: 100%; }

/* Todo el recuadro del mapa es un enlace, no solo el botón: en el móvil, el
   gesto natural es tocar el mapa. El enlace va por encima como capa, y el
   botón queda dentro como lo que se ve. */
.visit__map-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* El centrado NO usa transform a propósito.
   Lo hacía —translateX(-50%)— y .btn:hover pone transform: translateY(-2px),
   que no se suma sino que SUSTITUYE: al pasar el ratón, el botón saltaba
   media anchura a la derecha. Con left/right y margen automático, el centrado
   no depende de transform y el hover puede usarlo sin pisar nada. */
.visit__map-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  width: max-content;
  margin-inline: auto;
}

/* El botón reacciona al pasar por CUALQUIER punto del recuadro: si todo es
   tocable, todo tiene que parecerlo. */
.visit__map-link:hover .visit__map-cta { transform: translateY(-2px); }
.visit__map-link:active .visit__map-cta { transform: translateY(0); }

.visit__cta { margin-top: clamp(26px, 3vw, 38px); }

/* =========================================================
   PIE
   ========================================================= */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 76px) 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
}

.footer__logo img {
  width: 150px;
  height: auto;
  object-fit: contain;
  margin-bottom: 1.2rem;
}

.footer__tagline {
  color: var(--taupe-dim);
  font-size: 0.92rem;
  max-width: 40ch;
}

.footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.1rem;
}

.footer__col li + li { margin-top: 0.65rem; }

.footer__col a {
  font-size: 0.9rem;
  color: var(--taupe);
  transition: color 0.2s var(--ease);
}

.footer__col a:hover { color: var(--sand); }

.socials {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--taupe);
  transition: border-color 0.25s var(--ease),
              color 0.25s var(--ease),
              transform 0.25s var(--ease);
}

.socials a:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-2px);
}

.socials svg { width: 17px; height: 17px; }

.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--taupe-dim);
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================= */
.wa-fab {
  position: fixed;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  z-index: 90;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #062E17;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.34);
  transition: box-shadow 0.3s var(--ease);
}

/* Antes entraba al pasar el hero (`transform: scale(0)` más una clase que
   ponía el JavaScript al desplazarse). Ahora es la única puerta a WhatsApp
   de toda la web, así que no puede estar escondida durante la primera
   pantalla, que es donde más gente se queda. */

.wa-fab:hover {
  box-shadow: 0 14px 40px rgba(37, 211, 102, 0.5);
}

.wa-fab svg { width: 28px; height: 28px; }

/* Halo que late suavemente para llamar la atención sin molestar */
.wa-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.5);
  animation: waPulse 2.6s ease-out infinite;
}

@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .about__grid,
  .visit__grid { grid-template-columns: 1fr; }

  .about__media { max-width: 460px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  :root { --nav-h: 64px; }

  /* ⚠ SIN backdrop-filter EN LA CABECERA. No es cosa de gusto ni de
     rendimiento: es lo que hace que la hoja de "Mas" funcione.

     Un elemento con backdrop-filter distinto de `none` se convierte en el
     BLOQUE CONTENEDOR de sus descendientes `position: fixed`. La hoja vive
     dentro de <header class="nav"> —tiene que vivir ahi, porque en escritorio
     es la fila de enlaces de la cabecera—, asi que en cuanto .nav se
     desenfoca la hoja deja de posicionarse respecto a la VENTANA y pasa a
     hacerlo respecto a la CABECERA: su `inset: auto 0 58px 0` pasa a
     significar "58px por encima del borde inferior del header", aparece
     arriba en vez de abajo, y como el header mide 62px la recorta entera al
     deslizarse. Sale bien en el hero y se rompe en cuanto bajas.

     Ya se rompio una vez asi. Aqui se compensa dejando la cabecera OPACA al
     bajar, que sobre una foto clara se lee incluso mejor que el desenfoque.

     El apaño de poner `backdrop-filter: none` solo mientras el menu esta
     abierto NO vale: al cerrar, la clase se quita en el acto y el bloque
     contenedor cambia a media animacion, con lo que la hoja da un salto a la
     cabecera justo al esconderse. */
  .nav.is-scrolled {
    background: var(--ink);
    backdrop-filter: none;
  }

  /* --- La hoja de "Más" ---

     Sube desde la barra inferior, que es el botón que la abre y el sitio al
     que llega el pulgar. Un cajón lateral obligaba a cruzar la pantalla en
     diagonal desde el botón hasta el menú, y una capa a pantalla completa
     —lo que había antes— tapaba la web entera para enseñar dos enlaces.

     Se apoya justo encima de la barra, así que al cerrarse se esconde detrás
     de ella: se ve de dónde sale y adónde vuelve.

     La barra sube por encima del oscurecedor mientras está abierta (más
     abajo, en su propio bloque). Es lo que hace que "Más" siga encendido y
     se pueda volver a pulsar para cerrar. */
  .nav__links {
    position: fixed;

    /* El 58px de respaldo NO es adorno. --tabbar-h se declara en base.css, y
       si ese archivo llega viejo de la cache el navegador no puede resolver el
       calc(), tira la declaracion de `inset` ENTERA y la hoja deja de estar
       anclada abajo: se pinta donde le toca en el flujo —dentro de la
       cabecera— y al bajar la recorta el propio header. Con el respaldo, lo
       peor que puede pasar es que la hoja quede unos pixeles descuadrada. */
    inset: auto 0 calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom, 0px)) 0;
    z-index: 140;

    flex-direction: column;
    justify-content: flex-start;
    gap: 0;

    /* Nunca más de dos tercios de pantalla: una hoja que llega arriba del
       todo ya no es una hoja, es la capa a pantalla completa de antes. */
    max-height: 62dvh;
    overflow-y: auto;

    background: var(--charcoal);
    border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-lg);

    /* visibility, además del desplazamiento: escondida solo por transform,
       la hoja sigue estando ahí para el tabulador y el lector de pantalla, y
       se tabula a enlaces que no se ven. */
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.28s var(--ease), visibility 0.28s var(--ease);
  }

  body.menu-open .nav__links { transform: none; visibility: visible; }

  /* --- El agarradero ---

     La linea mide 38x4, pero lo que se toca es la fila entera: 44px de alto y
     todo el ancho de la hoja. Una diana de 4px de alto no la acierta nadie con
     el pulgar, y esta es la unica salida que queda dentro de la hoja. */
  .nav__sheet-grip {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 44px;
    padding: 1.25rem 0 1rem;

    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    flex-shrink: 0;
  }

  .nav__sheet-grip-line {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background-color 0.2s var(--ease);
  }

  .nav__sheet-grip:hover .nav__sheet-grip-line,
  .nav__sheet-grip:active .nav__sheet-grip-line { background: var(--taupe); }

  /* --- El fondo oscurecedor ---

     Opaco a propósito: detrás está el hero, que es una foto clara con luz
     ámbar, y cualquier transparencia le roba contraste a los enlaces.

     visibility y no `display:none`: así el fondo no queda invisible pero
     cubriendo la pantalla, tragándose todos los clics. */
  .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
  }

  body.menu-open .nav__backdrop { opacity: 1; visibility: visible; }

  /* En la hoja los enlaces son una lista, no una columna centrada: se
     alinean a la izquierda y ocupan todo el ancho, para que el area que se
     pulsa sea la fila entera y no solo el texto. */
  .nav__link {
    display: block;
    padding: 0.95rem 1.3rem;
    font-size: 0.98rem;
    letter-spacing: 0.18em;
    border-bottom: 1px solid var(--line);
  }

  .nav__link:last-of-type { border-bottom: 0; }

  /* Lo que ya está en la barra inferior no se repite aquí. Se pinta igual
     porque en escritorio esto es la navegación entera. */
  .nav__link--en-barra { display: none; }

  /* El subrayado animado del escritorio no pinta nada en una lista. */
  .nav__link::after { display: none; }

  .nav__actions .btn { display: none; }

  /* En pantalla táctil todo lo que se pulsa necesita más carne */
  .lang__btn {
    display: grid;
    place-items: center;
    min-width: 38px;
    min-height: 38px;
    padding-inline: 0.5em;
  }

  .footer__col a,
  .info-block a {
    display: inline-block;
    padding-block: 0.35rem;
  }

  /* En movil se parten en dos filas de dos, asi que aqui SI hay que volver a
     fluir por filas: con `grid-auto-flow: column` heredado, la rejilla seguiria
     creando columnas nuevas y no se envolveria nunca. */
  .trust__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }

  /* Numero impar de cifras: la ultima se quedaria sola en la segunda fila,
     pegada a la izquierda, con medio hueco vacio al lado. Que ocupe las dos
     columnas y quede centrada. */
  .trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .trust__item:nth-child(odd)::before { display: none; }

  .about__features { grid-template-columns: 1fr; }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }

  .gallery__item:nth-child(6) { grid-row: span 1; }
}

@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; }

  .svc-grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; }

  .footer__bottom { justify-content: center; text-align: center; }

  .lightbox__btn--prev { left: 8px; }
  .lightbox__btn--next { right: 8px; }

  .about__badge { right: 10px; }
}

/* =========================================================
   PÁGINAS COMPLETAS: CATÁLOGO Y GALERÍA

   La portada enseña una muestra y manda aquí. Estas reglas son
   solo del filtro y del botón «ver todo»: las tarjetas y la
   cuadrícula reutilizan las clases de la portada, para que las
   dos páginas se vean como la misma web.
   ========================================================= */

/* Botón «ver todo» al pie de una sección de la portada. */
.section-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* --- Barra de filtros --- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.filters__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.filters__label {
  margin-right: 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.chip {
  padding: 0.42em 1em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}

.chip:hover { border-color: var(--amber); color: var(--amber); }

.chip.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

.filters__search { flex: 1 1 220px; min-width: 200px; }

.filters__search input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: var(--charcoal);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--sand);
  font: inherit;
  font-size: 0.9rem;
}

.filters__search input:focus-visible {
  outline: none;
  border-color: var(--amber);
}

.filters__count {
  margin-bottom: 1.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--taupe-dim);
}

.filters__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--taupe);
}

/* --- Catálogo agrupado por categoría --- */
.catalogue__group { margin-bottom: clamp(2.4rem, 5vw, 4rem); }

.catalogue__heading {
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: 0.06em;
  color: var(--sand);
}

/* Oculto a la vista, no al lector de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   ASISTENTE DE RESERVA

   Isla interactiva: el recorrido lo lleva Blazor, no el DOM.
   Todo lo pulsable es un <button> de verdad, así que llega
   gratis el foco, el Enter y el lector de pantalla.
   ========================================================= */

.wiz { margin-top: 2rem; }

.wiz__title {
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--sand);
}

.wiz__lead { margin-bottom: 1.6rem; color: var(--taupe); }
.wiz__hint { margin: 1.6rem 0 0.7rem; color: var(--taupe); font-size: 0.88rem; }

/* --- Por donde avisar: casillas de las de toda la vida ---
   Fueron botones que se encendian, y el cliente no sabia si estaban
   marcados o solo resaltados. Una casilla no deja esa duda, y es ademas lo
   que ya usa el mostrador: la misma pregunta se contesta igual en las dos
   pantallas. 44px de alto para el pulgar; la etiqueta tambien marca.

   En fila, y con wrap: son dos etiquetas cortas y en columna dejaban un
   hueco vacio a la derecha. Si algun dia hay un canal mas, o el idioma
   alarga los textos, bajan solas. */

.wiz__checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.6rem;
  margin-bottom: 0.4rem;
}

.wiz__check {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  color: var(--sand);
  font-size: 0.95rem;
  cursor: pointer;
}

.wiz__check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--amber);
  cursor: pointer;
}

/* --- Indicador de pasos --- */
.stepper {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 2.2rem;
  padding: 0;
  list-style: none;
}

.stepper__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  text-align: center;
}

.stepper__item + .stepper__item::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--line-strong);
}

.stepper__item.is-done + .stepper__item::before { background: var(--amber); }

.stepper__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--taupe-dim);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}

.stepper__dot:disabled { cursor: default; }

.stepper__item.is-current .stepper__dot {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--ink);
}

/* El paso hecho lleva símbolo además de color: quien no distingue bien
   los tonos también tiene que verlo. */
.stepper__item.is-done .stepper__dot { border-color: var(--amber); color: var(--amber); font-size: 0; }
.stepper__item.is-done .stepper__dot::after { content: '✓'; font-size: 0.9rem; }
.stepper__item.is-done .stepper__dot:hover { background: rgba(232, 177, 92, 0.16); }

.stepper__label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--taupe-dim); line-height: 1.3; }
.stepper__item.is-current .stepper__label { color: var(--sand); }

/* Cuatro rótulos en 375px se parten en dos líneas cada uno y ensucian. */
@media (max-width: 520px) {
  .stepper__label { display: none; }
  .stepper__item.is-current .stepper__label { display: block; }
}

/* --- El paso, con entrada suave --- */
.wiz__step { animation: wizIn 0.26s var(--ease) both; }

@keyframes wizIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wiz__step { animation: none; }
}

/* --- Opciones --- */
.wiz__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
}

.wiz__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wiz__chips--inline { gap: 0.5rem; }

.pick {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--charcoal);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
}

.pick:hover { border-color: var(--amber); transform: translateY(-2px); }
.pick.is-on { border-color: var(--amber); background: rgba(232, 177, 92, 0.1); }

.pick__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 0.3rem;
}

.pick__name { color: var(--sand); font-size: 0.92rem; }
.pick__meta { color: var(--taupe-dim); font-size: 0.76rem; line-height: 1.4; }

.pick__queue {
  margin-top: auto;
  padding-top: 0.4rem;
  color: var(--amber);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.pick--row { flex-direction: row; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pick--xs { padding: 0.55rem 1.05rem; }

/* --- Los próximos días --- */
.wiz__days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
}

.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.7rem 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--charcoal);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.day:hover { border-color: var(--amber); }
.day.is-on { border-color: var(--amber); background: var(--amber); }
.day.is-on .day__name,
.day.is-on .day__num,
.day.is-on .day__month { color: var(--ink); }

.day__name { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe-dim); }
.day__num { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; color: var(--sand); }
.day__month { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe-dim); }

/* --- Las horas ---

   Mismo lenguaje que los días, pero más pequeñas: de un día hay catorce y de
   horas puede haber veinte, y a tamaño de día no cabrían sin hacer scroll.
   Siguen midiendo 44px de alto, que es el mínimo táctil. */
.wiz__times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.time {
  min-height: 44px;
  padding: 0.5rem 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--charcoal);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.time:hover { border-color: var(--amber); }
.time.is-on { border-color: var(--amber); background: var(--amber); color: var(--ink); }

/* Cuando el día está cerrado o ya no quedan horas: se dice, no se deja el
   hueco en blanco, que se lee como que la web falló. */
.wiz__note {
  margin-top: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--taupe);
  font-size: 0.9rem;
}

/* --- Campos --- */
.wiz__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.2rem; }
.wiz__field { margin-bottom: 1.2rem; }

.wiz__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.wiz__input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--charcoal);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--sand);
  font: inherit;
  font-size: 0.95rem;
}

.wiz__input:focus-visible { outline: none; border-color: var(--amber); }

/* --- Navegación --- */
.wiz__nav { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
.wiz__nav .btn:last-child { flex: 1; }

.wiz__error {
  margin-bottom: 1.4rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid #C0705A;
  border-radius: var(--radius);
  background: rgba(192, 112, 90, 0.14);
  color: #E39C86;
  font-size: 0.9rem;
}

/* --- Resumen y confirmación --- */
.wiz__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.3rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--charcoal);
}

.wiz__summary--pre { margin-top: 0.6rem; }

.wiz__summary dt {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-dim);
}

.wiz__summary dd { margin: 0; color: var(--sand); font-size: 0.92rem; }
.wiz__summary dd strong { color: var(--amber); letter-spacing: 0.14em; }

.wiz__done { text-align: center; }
.wiz__done .wiz__summary { max-width: 430px; margin: 2rem auto; text-align: left; }

.wiz__mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: rgba(185, 197, 138, 0.16);
  border: 1px solid #B9C58A;
  color: #B9C58A;
  font-size: 1.6rem;
}

.wiz__empty {
  padding: 2rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--charcoal);
  text-align: center;
}

.wiz__empty p { margin-bottom: 1.2rem; color: var(--sand); }

@media (max-width: 520px) {
  .wiz__cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* =========================================================
   MODAL DE RESERVA

   Es un <dialog> nativo abierto con showModal(). Se pinta en la
   capa superior del navegador, así que no le afecta el transform
   del hero — con un div y position:fixed salía como un cuadrito
   dentro de la sección.
   ========================================================= */

.modal {
  /* margin:auto es lo que centra un <dialog> abierto con showModal(), y el
     reset `* { margin: 0 }` de base.css se lo comía: el modal salía pegado a
     la esquina superior izquierda. Hay que reponerlo a mano. */
  margin: auto;

  width: min(620px, 100vw - 2rem);
  max-height: min(760px, 100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--sand);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(2px);
}

.modal[open] { animation: modalIn 0.22s var(--ease) both; }
.modal[open]::backdrop { animation: backdropIn 0.22s var(--ease) both; }

.modal__panel {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

/* El asistente ya no necesita su margen superior aquí dentro. */
.modal__panel .wiz { margin-top: 0; }

.modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--taupe);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.modal__close:hover { color: var(--sand); background: var(--graphite); }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

/* En móvil ocupa casi todo: un recorrido de cuatro pasos en una caja
   pequeña obliga a desplazar dentro de algo que ya se desplaza. */
@media (max-width: 620px) {
  .modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .modal__panel { max-height: 100dvh; padding-top: 3.4rem; }
}

/* ===================== DEJAR UNA RESENA ===================== */

.reviews__empty {
  margin: 2rem auto 0;
  max-width: 46ch;
  text-align: center;
  color: var(--taupe-dim);
  font-style: italic;
}

.reviews__leave {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;
}

/* Dentro del <dialog> el formulario ocupa el ancho entero y no se centra:
   el modal ya está centrado en la pantalla. */
.revform { width: 100%; }

/* Dentro del modal no lleva fondo ni borde propios: el <dialog> ya los pone.
   Dos cajas anidadas con el mismo borde se ven como un error. */
.revform__panel {
  width: 100%;
  padding: clamp(1.4rem, 4vw, 1.9rem);
  text-align: left;
}

.revform__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: var(--sand);
  margin-bottom: 0.8rem;
  padding-right: 2rem;   /* deja sitio a la × del modal */
}

.revform__intro {
  margin-bottom: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--taupe);
}

.revform__field { margin-bottom: 1.1rem; }

.revform__field label,
.revform__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.revform__input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.96rem;
  transition: border-color 0.2s var(--ease);
}

.revform__input:focus { outline: none; border-color: var(--amber); }

.revform__textarea { resize: vertical; min-height: 110px; line-height: 1.6; }

.revform__hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--taupe-dim);
  line-height: 1.5;
}

.revform__stars { display: flex; gap: 0.25rem; }

.revform__star {
  padding: 0.1rem 0.15rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--graphite-2);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}

.revform__star:hover { transform: scale(1.12); }
.revform__star.is-on { color: var(--amber); }

.revform__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.revform__error {
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
  border-left: 3px solid #C0705A;
  border-radius: var(--radius);
  background: rgba(192, 112, 90, 0.15);
  color: #E39C86;
  font-size: 0.9rem;
  line-height: 1.55;
}

.revform__done {
  width: 100%;
  padding: 1.6rem;
  text-align: center;
  border: 1px solid rgba(185, 197, 138, 0.4);
  border-radius: var(--radius-lg);
  background: rgba(107, 114, 69, 0.14);
  color: #C3CE9B;
}

.revform__done-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }

/* El campo trampa: fuera de la vista pero dentro del formulario, para que un
   robot que rellena todo lo encuentre y una persona no. No se usa display:none
   porque algunos robots ya lo detectan. */
.revform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El modal de la resena pide menos ancho que el del asistente de reserva:
   son cuatro campos, no cuatro pasos. */
.modal--narrow { width: min(520px, 100vw - 2rem); }

@media (max-width: 520px) {
  .modal--narrow { width: 100vw; }
}

/* =========================================================
   BARRA INFERIOR — SOLO MOVIL

   Sustituye a la hamburguesa como forma principal de moverse por la web en el
   telefono: los destinos a la vista y al alcance del pulgar, en vez de
   escondidos detras de tres rayas.
   ========================================================= */

.tabbar { display: none; }

/*
   860 y no 760, que es donde estaba: es el mismo corte en el que la cabecera
   deja de enseñar la fila de enlaces.

   Con los dos cortes separados quedaba una franja de 100 px —tableta en
   vertical— sin barra abajo y sin menú arriba salvo la hamburguesa. En cuanto
   la hoja de "Mas" pasó a enseñar solo lo que NO esta en la barra, esa franja
   dejaba cuatro secciones sin ninguna forma de llegar a ellas.
*/
@media (max-width: 860px) {
  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    position: fixed;
    inset: auto 0 0 0;

    /* Por encima del oscurecedor (130) y de la hoja (140), SIEMPRE, no solo
       mientras esta abierta.

       Puesto solo con body.menu-open, al cerrar la clase se quita en el acto
       pero la hoja tarda 0.28s en bajar: durante esa fracción la barra ya
       había vuelto a 90 y la hoja bajaba POR DELANTE, tapando las opciones.
       Por debajo del lightbox (150), que sí debe cubrirlo todo. */
    z-index: 145;

    background: rgba(11, 11, 12, 0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);

    /* El area de gestos del iPhone se come la ultima franja de pantalla: sin
       esto, la fila de abajo queda debajo de la barra del sistema. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;

    /* 58px + el texto: por encima del minimo tactil con holgura. */
    min-height: var(--tabbar-h, 58px);
    padding: 0.5rem 0.25rem;

    background: none;
    border: 0;
    color: var(--taupe-dim);
    font-family: var(--font-body);
    cursor: pointer;

    /* La marca del activo entra por arriba, como una pestana. */
    border-top: 2px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  }

  .tabbar__icon { display: grid; place-items: center; }
  .tabbar__icon svg { width: 21px; height: 21px; }

  .tabbar__label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;

    /* Una etiqueta larga no puede romper la rejilla ni partirse en dos
       lineas: se recorta, que es mas honesto que descuadrar la barra. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tabbar__item:active { color: var(--sand); }

  /* --- El activo ---

     Lo marca el atributo data-seccion que main.js escribe en <html>, NO una
     clase en estos botones.

     Es a proposito: el DOM de estos botones lo pinta Blazor, y una clase
     puesta por JavaScript desaparece en cuanto Blazor vuelve a renderizar —
     ya paso cuatro veces en este proyecto. El elemento <html> no lo toca
     Blazor, asi que ahi la marca sobrevive. Si el script falla, la barra
     sigue funcionando: solo se queda sin resaltar. */
  html[data-seccion="services"] .tabbar__item[data-key="services"],
  html[data-seccion="about"]    .tabbar__item[data-key="about"],
  html[data-seccion="gallery"]  .tabbar__item[data-key="gallery"],
  html[data-seccion="team"]     .tabbar__item[data-key="team"],
  html[data-seccion="reviews"]  .tabbar__item[data-key="reviews"],
  html[data-seccion="visit"]    .tabbar__item[data-key="visit"] {
    color: var(--amber);
    border-top-color: var(--amber);
  }

  /* Con la hoja abierta, "Mas" queda encendido: la barra esta por encima del
     oscurecedor, asi que sigue pulsable y volver a tocarlo la cierra, que es
     el gesto que la gente hace antes de buscar la x. */
  body.menu-open .tabbar__more { color: var(--amber); border-top-color: var(--amber); }

  /* Sitio para la barra al final de la pagina, y para el boton flotante de
     WhatsApp, que si no se solapan. */
  body { padding-bottom: calc(var(--tabbar-h, 58px) + env(safe-area-inset-bottom, 0px)); }
  .wa-fab { bottom: calc(var(--tabbar-h, 58px) + 1rem + env(safe-area-inset-bottom, 0px)); }
}

/* La hoja y su fondo son cosa del movil: en escritorio el menu es una fila de
   enlaces en la cabecera, y ni el agarradero ni el oscurecedor pintan nada
   ahi. */
.nav__backdrop,
.nav__sheet-grip { display: none; }

/* Y el agarradero se vuelve a encender aqui, no arriba con el resto de la
   hoja: esta regla va DESPUES en el archivo, asi que a igualdad de
   especificidad gana ella. Puesta solo arriba, el `display: none` de aqui la
   apagaba. */
@media (max-width: 860px) {
  .nav__sheet-grip { display: flex; }
}

/* Quien haya pedido menos movimiento ve la hoja aparecer sin deslizamiento. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav__links,
  .nav__backdrop { transition: none; }
}

/* =========================================================
   CAMPAÑA DE PRECIOS

   Tres reglas, y ninguna toca lo que ya había: con la campaña
   apagada el servicio llega sin PromoPrice, no se pinta ningún
   `svc__was` y la lista se ve exactamente como siempre.
   ========================================================= */

/* El precio de la carta, delante del de oferta.
   El tachado NO es solo color: se distingue impreso en blanco y
   negro y para quien no separa bien los tonos. */
.svc__was {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--taupe-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 0.45rem;
}

/* La chapa, bajo el título de la sección. En ámbar y no en rojo:
   el único rojo de la paleta es el de «cita anulada», y repetirlo
   para una oferta mezclaría dos significados. */
.promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.5rem 1rem;
  background: var(--amber);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.promo-tag svg { width: 15px; height: 15px; }

/* Marca discreta en la tarjeta rebajada, para distinguirla de las
   que no entran en la campaña cuando están una al lado de otra. */
.svc--promo { border-color: rgba(232, 177, 92, 0.34); }