/* ═══════════════════════════════════════════════════════════════════════════
   VIBES BARBERÍA — hoja de estilos
   Mobile-first. Sin frameworks. Sin build.

   REGLAS ANTI-RECORTE (no romper):
   1. Todo degradado radial llega a `transparent` ANTES del borde de su caja
      (closest-side + parada transparente ≤ 75%). Así ningún clip lo corta.
   2. Los recortes de barberos usan object-fit:contain en caja fija.
      Nunca width:auto + max-width:none.
   3. Nada de `mask-image` para "desvanecer" fotos: se usa una sombra
      elíptica de suelo debajo.
   4. Los reveals animan opacity/transform. Nunca clip-path persistente.
   5. Ninguna caja tiene alto fijo en `em` si su contenido usa otro font-size.
   6. overflow-x: clip (no hidden) en la raíz → no rompe position:sticky.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────────────────── */
:root{
  --void:#0A0A0B;
  --surface:#121316;
  --surface-2:#17181C;
  --neon:#E8A05C;
  --ember:#D97C34;
  --teal:#1E3A3A;
  --bone:#F4F1EC;
  --muted:#8A8A90;

  --line:rgba(244,241,236,.10);
  --line-2:rgba(244,241,236,.18);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);

  --pad:clamp(18px,5.2vw,40px);
  --maxw:1440px;
  --dock:64px;
  --head:clamp(64px,14vw,88px);

  --f-display:Archivo,'Arial Black','Helvetica Neue',sans-serif;
  --f-body:Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ── 2. RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--void);
  -webkit-text-size-adjust:100%;
  overflow-x:clip;                 /* clip, NO hidden: no rompe sticky */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 12px);
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  overflow-x:clip;
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
}

/* El atributo `hidden` DEBE ganar siempre.
   La regla del navegador es `[hidden]{display:none}`, con especificidad 0,1,0:
   cualquier `.mi-clase{display:flex}` la anula sin avisar. Eso dejaba el visor
   de fotos desplegado a pantalla completa, invisible pero tragándose todos
   los clics de la página. */
[hidden]{display:none !important}

img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--neon);text-decoration:none}

::selection{background:var(--neon);color:var(--void)}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--neon);color:var(--void);padding:14px 20px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.skip:focus{left:12px;top:12px}

/* ── 3. TEXTURA GLOBAL ────────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:-50%;z-index:120;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-repeat:repeat;
  animation:grain 1.2s steps(6) infinite;
  will-change:transform;
}
.vignette{
  position:fixed;inset:0;z-index:119;pointer-events:none;
  box-shadow:inset 0 0 16vmax 2vmax rgba(0,0,0,.55);
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

/* ── 4. PRIMITIVAS ────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.section{position:relative;z-index:2;padding-block:clamp(56px,11vh,120px)}

.dot{
  width:5px;height:5px;flex:none;border-radius:1px;
  background:var(--neon);box-shadow:0 0 10px rgba(232,160,92,.9);
  display:inline-block;
}

.over{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}

.kicker{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(10px,2.6vw,11px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);opacity:.85;
}

.accent{color:var(--neon);font-style:normal}
.stars{color:var(--neon);letter-spacing:.12em;font-size:.95em}
.is-num{font-variant-numeric:tabular-nums}
.is-dim{color:var(--muted)}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.03em;
  text-transform:uppercase;
  text-wrap:balance;
}

/* Título de sección */
.head{
  display:flex;flex-direction:column;gap:18px;
  margin-bottom:clamp(28px,5vh,56px);
}
.head h2{
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(2.4rem,13vw,6.4rem);
  line-height:.88;
  overflow-wrap:break-word;          /* palabras serbias largas nunca desbordan */
}
.head__note{
  max-width:34ch;font-size:clamp(13px,3.4vw,14.5px);line-height:1.6;
  color:var(--muted);text-wrap:pretty;
}

/* ── 5. BOTONES ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:15px 24px;
  font-size:clamp(11px,2.9vw,12px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  text-align:center;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),box-shadow .5s var(--ease),
             transform .35s var(--ease);
}
.btn__arrow{font-family:var(--f-display);font-style:normal;font-weight:700;transition:transform .4s var(--ease)}

.btn--solid{
  position:relative;overflow:hidden;
  background:var(--neon);color:var(--void);
  box-shadow:0 10px 30px -8px rgba(232,160,92,.45);
}
/* Barrido de luz: contenido dentro de la caja, sin bordes visibles */
.btn--solid::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:sheen 4.5s var(--ease) 1.6s infinite;
  pointer-events:none;
}
@keyframes sheen{0%{left:-60%}18%,100%{left:130%}}

.btn--ghost{
  border:1px solid var(--line-2);color:var(--bone);
  background:rgba(244,241,236,.02);
}
.btn--num{font-variant-numeric:tabular-nums;letter-spacing:.1em}
.btn--big{min-height:60px;padding:19px 32px;font-size:clamp(12px,3vw,13px);letter-spacing:.2em}

/* ── 6. HEADER ────────────────────────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:var(--head);
  padding-inline:var(--pad);
  padding-top:env(safe-area-inset-top);
  transition:background-color .5s var(--ease),backdrop-filter .5s;
}
.header.is-stuck{
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.header__logo img{
  height:clamp(38px,9vw,54px);width:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.8));
}
.header__right{display:flex;align-items:center;gap:clamp(10px,2.4vw,16px)}

.nav{display:none}

.lang{display:flex;align-items:center;gap:8px}
.lang button{
  padding:8px 2px;min-height:40px;
  font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--muted);transition:color .35s,text-shadow .35s;
}
.lang button[aria-pressed="true"],.lang button.is-on{
  color:var(--neon);text-shadow:0 0 16px rgba(232,160,92,.55);
}
.lang__sep{width:1px;height:11px;background:var(--line-2)}

.btn--head{display:none}

/* ── 7. HERO ──────────────────────────────────────────────────────────────── */
.hero{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--head) + 8px) var(--pad) clamp(28px,6vh,56px);
  /* SIN overflow:hidden — los halos ya se apagan solos antes de su borde */
}

.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}

/* Foto del salón. Va MUY atenuada a propósito: es atmósfera, no protagonista.
   Si compitiera con el retrato y con el titular, el hero no tendría foco. */
.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 36%;
  filter:saturate(.8) contrast(1.1);
  opacity:.82;
}
.hero__wash{position:absolute;inset:0}
.hero__wash--teal{
  background:radial-gradient(closest-side circle at 18% 26%,
    rgba(30,58,58,.55) 0%,rgba(30,58,58,.18) 42%,transparent 72%);
}
.hero__wash--ember{
  background:radial-gradient(closest-side circle at 86% 12%,
    rgba(232,160,92,.26) 0%,rgba(232,160,92,.07) 44%,transparent 74%);
}
/* Va DEBAJO del retrato. Sólo asienta la zona del header y el pie; en el
   centro se aparta para que la foto del salón se vea de verdad. La
   legibilidad del texto la resuelve .hero__scrim, que va por encima. */
.hero__fade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,11,.62) 0%, rgba(10,10,11,.10) 20%,
    rgba(10,10,11,0)   42%, rgba(10,10,11,.22) 66%,
    rgba(10,10,11,.55) 86%, rgba(10,10,11,.8) 100%);
}

/* Retrato — caja fija + contain ⇒ imposible que se salga */
.hero__figure{
  position:absolute;z-index:1;pointer-events:none;
  right:var(--pad); left:auto;
  top:calc(var(--head) + 2vh);
  height:52svh;
  width:min(76vw,380px);
  will-change:transform;
}
.hero__halo{
  position:absolute;inset:0;
  background:radial-gradient(closest-side circle at 52% 34%,
    rgba(232,160,92,.42) 0%, rgba(232,160,92,.13) 40%, transparent 70%);
  animation:breathe 6.5s ease-in-out infinite;
}
/* El recorte original está cortado A RAS en su última fila (65% de píxeles
   totalmente opacos), así que sin tratar muestra un borde recto y duro abajo.
   Se difumina esa franja para que la figura se funda en la penumbra.
   Distinto del caso del equipo: allí la máscara cortaba unos pies que SÍ
   existían; aquí no hay pies que preservar, solo un corte que disimular.
   Se mide en px desde abajo (no en %), así el degradado siempre cae en el
   mismo sitio aunque `contain` cambie la altura renderizada. */
.hero__cut{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  --cut-fade:clamp(46px,8.5vh,110px);
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 var(--cut-fade));
  mask-image:linear-gradient(to top,transparent 0,#000 var(--cut-fade));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  /* Sombra desplazada hacia ABAJO y con poco desenfoque. Antes era
     `0 26px 44px` al 85%: con 44px de radio esa sombra se derramaba también
     por los costados y, ahora que hay foto detrás, se leía como un cerco
     negro alrededor de la silueta. Así asienta la figura sin ensuciar el
     contorno. */
  filter:drop-shadow(0 32px 26px rgba(0,0,0,.5)) contrast(1.04) saturate(.96);
  opacity:0;
  /* Dos animaciones sobre propiedades distintas: cutIn usa transform/opacity,
     floatY usa `translate`. No compiten, así que el retrato respira sin fin
     después de entrar. */
  animation:cutIn 1.2s var(--ease) .2s both,
            floatY 9s ease-in-out 1.6s infinite;
}
@keyframes cutIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}

.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%, transparent 30%,
    rgba(10,10,11,.42) 46%, rgba(10,10,11,.82) 62%,
    rgba(10,10,11,.95) 76%, var(--void) 100%);
}

.hero__ghost{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:var(--pad);top:calc(var(--head) - 1vh);
  font-family:var(--f-display);
  font-variation-settings:'wdth' 118,'wght' 900;
  font-size:clamp(2.6rem,14vw,9rem);
  line-height:.8;letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(244,241,236,.13);
  will-change:transform;
}

.hero__inner{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-direction:column;gap:clamp(14px,2.6vh,26px);
}

/* En móvil se estrecha el eje `wdth` de Archivo (75–125) en vez de encoger
   la letra: "BEOGRADSKA" ocupa ~26% menos y el titular sigue siendo enorme.
   A partir de 760px se recupera la anchura editorial de 116. */
.hero__title{
  font-variation-settings:'wdth' 94,'wght' 800;
  font-size:clamp(2.3rem,10.6vw,8.5rem);
  line-height:.88;
  color:var(--bone);
  text-shadow:0 2px 24px rgba(10,10,11,.5);
}
/* La máscara de entrada necesita overflow:hidden, pero con line-height:.86
   las mayúsculas de Archivo sobresalen de la caja de línea y se cortarían.
   padding + margen negativo agranda SOLO la caja de recorte, sin mover nada. */
.hero__title .line{
  display:block;
  overflow:hidden;
  padding-block:.14em;
  margin-block:-.14em;
}
.hero__title .line__in{
  display:block;                   /* block, NO inline-block: sin hueco de línea base */
  white-space:nowrap;
  transform:translateY(115%);
  animation:lineUp 1s var(--ease) both;
}
/* Cuando app.js termina la entrada, marca esto y ya nada puede recortarse */
.hero__title.is-done .line{overflow:visible}
.hero__title .line:nth-child(1) .line__in{animation-delay:.10s}
.hero__title .line:nth-child(2) .line__in{animation-delay:.18s}
.hero__title .line:nth-child(3) .line__in{animation-delay:.26s}
.hero__title .line:nth-child(4) .line__in{animation-delay:.34s}
@keyframes lineUp{to{transform:none}}

.hero__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:clamp(12.5px,3.3vw,14px);
  font-variant-numeric:tabular-nums;
}
.hero__cta{display:flex;flex-direction:column;gap:10px;width:100%}
.hero__cta .btn{width:100%}

.hero__scroll{display:none}

/* Entrada escalonada del bloque de texto */
.hero .kicker,.hero__meta,.hero__cta{
  opacity:0;animation:fadeUp .9s var(--ease) both;
}
.hero .kicker{animation-delay:.06s}
.hero__meta{animation-delay:.5s}
.hero__cta{animation-delay:.58s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── 8. MARQUEE ───────────────────────────────────────────────────────────── */
.marquee{
  position:relative;z-index:3;
  border-block:1px solid var(--line);
  background:var(--void);
  overflow:hidden;                 /* aquí SÍ: solo contiene texto plano */
  padding-block:clamp(11px,2.6vw,16px);
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__set{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(1rem,4.4vw,1.9rem);
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  color:var(--bone);opacity:.9;
}
.marquee__set i{color:var(--neon);font-style:normal;padding-inline:.2em}

/* ── 9. RECENZIJE ─────────────────────────────────────────────────────────── */
.proof__grid{display:grid;gap:clamp(32px,7vw,64px)}

.proof__big{display:flex;align-items:baseline;gap:clamp(12px,3.6vw,20px)}
.proof__num{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 122,'wght' 900;
  font-size:clamp(4.4rem,24vw,10rem);
  line-height:.82;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--bone);
  text-shadow:0 0 60px rgba(232,160,92,.24);
}
.proof__label{
  display:flex;flex-direction:column;gap:6px;padding-bottom:.5em;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.proof__label .stars{font-size:15px}

.proof__reviews{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.proof__count{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 112,'wght' 800;
  font-size:clamp(2rem,9vw,3.2rem);line-height:1;
  color:var(--neon);font-variant-numeric:tabular-nums;
}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:24px;padding:10px 14px;
  border:1px solid rgba(232,160,92,.42);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--neon);
}

.proof__quotes{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.quote{
  background:var(--void);
  padding:clamp(20px,5.4vw,32px);
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  min-height:150px;
}
.quote blockquote{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 102,'wght' 600;
  font-size:clamp(1.02rem,4.4vw,1.3rem);
  line-height:1.24;letter-spacing:-.015em;
  text-transform:none;text-wrap:pretty;
}
.quote figcaption{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ── 10. USLUGE (precios) ─────────────────────────────────────────────────── */
.svc{display:grid;gap:12px}

.card{
  position:relative;display:flex;flex-direction:column;gap:clamp(26px,7vw,44px);
  background:var(--surface);
  border:1px solid rgba(244,241,236,.08);
  padding:clamp(22px,5.6vw,34px);
  color:var(--bone);
  /* SIN overflow:hidden. Las 4 líneas de borde están en inset:0 y no
     desbordan, así que recortar aquí sólo podría dañar el precio. */
  transition:background-color .5s var(--ease),border-color .5s var(--ease);
}
.card__edge{position:absolute;background:var(--neon);transition:transform .34s var(--ease)}
.card__edge--t{top:0;left:0;height:1px;width:100%;transform:scaleX(0);transform-origin:left}
.card__edge--b{bottom:0;left:0;height:1px;width:100%;transform:scaleX(0);transform-origin:right}
.card__edge--r{top:0;right:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top}
.card__edge--l{bottom:0;left:0;width:1px;height:100%;transform:scaleY(0);transform-origin:bottom}

.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card__name{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 108,'wght' 700;
  font-size:clamp(1.35rem,5.4vw,2rem);
  line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;
  max-width:14ch;
  overflow-wrap:break-word;
}
.card__dur{
  flex:none;padding-top:5px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;
}

.card__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}

/* PRECIO — sin alto fijo, sin overflow. El bug original vivía justo aquí. */
.price{
  display:flex;align-items:baseline;gap:.35em;
  font-family:var(--f-display);
  font-variation-settings:'wdth' 116,'wght' 800;
  font-size:clamp(1.9rem,8.6vw,2.8rem);
  line-height:1.15;                /* holgura real para el trazo de Archivo */
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--bone);
  transition:color .4s var(--ease);
}
.price__num{display:block}
.price__cur{
  font-size:.4em;letter-spacing:.1em;color:var(--muted);
  transition:color .4s var(--ease);
}

.card__go{
  display:inline-flex;align-items:center;gap:8px;flex:none;padding-bottom:6px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  transition:color .45s var(--ease),transform .45s var(--ease);
}
.card__go i{font-style:normal;transition:transform .4s var(--ease)}

/* ── 11. TIM ──────────────────────────────────────────────────────────────── */
.team{padding-bottom:clamp(40px,8vh,90px)}

.team__rail{
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:var(--pad);
  /* overflow-x:auto convierte overflow-y en auto → este carril SÍ recorta.
     Holgura generosa para que ni halos, ni sombras, ni la deriva de scroll
     (±16px) rocen jamás el borde. */
  padding-block:36px 40px;
}
.team__rail::-webkit-scrollbar{display:none}

.barber{
  flex:0 0 84%;
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  padding-inline:6px;
}

/* Marco del retrato: alto fijo + contain ⇒ la foto nunca se corta.
   `--focus` (0-1) lo fija app.js según lo centrada que esté la tarjeta en el
   carrusel: la que estás mirando se agranda y las vecinas se atenúan. */
.barber{--focus:1}
.barber__frame{
  position:relative;
  height:clamp(300px,46svh,460px);
  margin-bottom:20px;
  scale:calc(.955 + var(--focus) * .045);
  transition:scale .55s var(--ease);
}
/* Suelo alto a propósito: la tarjeta vecina se ve perfectamente, sólo cede
   protagonismo. Atenuarla de más haría pensar que "no está". */
.barber__body{
  opacity:calc(.68 + var(--focus) * .32);
  transition:opacity .55s var(--ease);
}
/* El halo desborda el marco (inset negativo) para envolver bien la figura,
   pero el degradado ya es transparente al 74% de closest-side: llega a cero
   MUY dentro de su propia caja, así que ningún recorte puede dejar un borde. */
.barber__halo{
  position:absolute;inset:-5% -12%;
  background:
    radial-gradient(closest-side circle at 50% 34%,
      rgba(232,160,92,.30) 0%, rgba(232,160,92,.10) 38%, transparent 66%),
    radial-gradient(closest-side circle at 50% 46%,
      rgba(217,124,52,.42) 0%, rgba(217,124,52,.13) 44%, transparent 74%);
  opacity:.8;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
/* Sombra de suelo: sustituye al mask-image que cortaba los pies */
.barber__floor{
  position:absolute;left:50%;bottom:-2px;translate:-50% 0;
  width:72%;height:34px;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 46%, transparent 74%);
}
.barber__cut{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  filter:grayscale(.55) brightness(.9) contrast(1.04)
         drop-shadow(0 18px 30px rgba(0,0,0,.6));
  transition:filter .6s var(--ease),transform .7s var(--ease);
}

.barber__body{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--line-2)}
.barber__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.barber__head h3{
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(1.15rem,4.8vw,1.6rem);line-height:1.05;
}
.barber__tag{
  font-size:10.5px;letter-spacing:.12em;color:var(--neon);
  font-variant-numeric:tabular-nums;
}
.barber__meta{display:flex;flex-direction:column;gap:7px}
.barber__role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:.85}
.barber__meta p{font-size:13.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.barber__link{
  margin-top:4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .35s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO DEL EQUIPO
   Ni un solo bucle infinito. El movimiento perpetuo por temporizador se lee
   como salvapantallas. Aquí todo es de dos tipos:
     · DISPARADO  — entra una vez cuando la tarjeta aparece, y se acaba.
     · RESPONDIDO — reacciona al scroll o al puntero, o sea, al usuario.

   Cada capa usa una propiedad distinta para no pisarse:
     scale      → asentamiento de entrada del retrato y del halo
     translate  → deriva de scroll (marco y nombre, en sentidos opuestos)
     transform  → inclinación 3D con el ratón
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nombre gigante en contorno, detrás del retrato. Mismo recurso que el hero,
   así el sitio habla un solo idioma visual. */
.barber__ghost{
  position:absolute;left:50%;top:4%;
  translate:-50% 0;
  font-family:var(--f-display);
  font-variation-settings:'wdth' 116,'wght' 900;
  font-size:clamp(1.9rem,8vw,3.2rem);
  line-height:.8;letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(244,241,236,.14);
  pointer-events:none;user-select:none;
  opacity:0;transition:opacity 1s var(--ease) .2s;
}
.js .barber.is-in .barber__ghost{opacity:1}
html:not(.js) .barber__ghost{opacity:1}

/* DISPARADO — el retrato se asienta: entra un punto grande y aterriza.
   Sólo opacity y scale: el filtro de color lo gobiernan hover/táctil y
   tocarlo aquí rompería esos estados. */
.js .barber__cut{opacity:0;scale:1.06}
.js .barber__cut{transition:opacity .9s var(--ease),scale 1.25s var(--ease),
                            filter .6s var(--ease),transform .7s var(--ease)}
.js .barber.is-in .barber__cut{opacity:1;scale:1}

/* DISPARADO — el halo florece justo después. Sólo `scale`: la opacidad es
   territorio del hover y del táctil. */
.js .barber__halo{scale:.85;transition:scale 1.2s var(--ease) .18s}
.js .barber.is-in .barber__halo{scale:1}

/* DISPARADO — el nombre sube tras el retrato.
   El bloque de detalle NO entra aquí: su opacidad la gobierna el estado
   de selección, y dos reglas peleando por la misma propiedad se anulan. */
.js .barber__head{
  opacity:0;transform:translateY(15px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.js .barber.is-in .barber__head{opacity:1;transform:none;transition-delay:.3s}

/* RESPONDIDO — profundidad real al pasar: el marco y el nombre derivan en
   sentidos OPUESTOS con el scroll. Lo mueve el compositor, y sólo mientras
   el usuario desplaza. Amplitud contenida para no rozar el recorte del carril. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .barber__frame{
      animation:bDriftA linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%;
    }
    .barber:nth-child(2) .barber__frame{animation-name:bDriftB}
    .barber:nth-child(3) .barber__frame{animation-name:bDriftC}
    .barber__ghost{
      animation:ghostDrift linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes bDriftA{from{translate:0 14px}to{translate:0 -10px}}
@keyframes bDriftB{from{translate:0 22px}to{translate:0 -16px}}
@keyframes bDriftC{from{translate:0 10px}to{translate:0 -7px}}
@keyframes ghostDrift{from{translate:-50% -22px}to{translate:-50% 22px}}

/* RESPONDIDO — en táctil no hay hover, pero sí hay dedo: al pulsar la
   tarjeta el retrato se adelanta. Especificidad alta a propósito, para
   ganarle a la regla de asentamiento de entrada. */
.js .barber.is-in:active .barber__cut{scale:1.025;transition-duration:.18s}
.js .barber.is-in:active .barber__halo{scale:1.06;transition-duration:.18s}

.team__dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:22px;
}
.team__dots span{
  width:6px;height:6px;border-radius:50%;
  background:var(--line-2);
  transition:background-color .4s var(--ease),width .4s var(--ease);
}
.team__dots span.is-on{background:var(--neon);width:20px;border-radius:3px}

/* ── 12. ZANAT (sticky) ───────────────────────────────────────────────────── */
/* Alto y sticky se activan en la sección 20, sólo cuando hay JS. */
.craft{position:relative;z-index:2;background:var(--void)}
.craft__sticky{
  top:0;
  display:flex;align-items:center;
  padding-block:calc(var(--head) + 10px) calc(var(--dock) + 24px);
}
.craft__wash{
  position:absolute;left:-14%;top:16%;width:74vw;height:56svh;pointer-events:none;
  background:radial-gradient(closest-side circle,
    rgba(30,58,58,.55) 0%, rgba(30,58,58,.16) 46%, transparent 74%);
}
.craft__wrap{position:relative;z-index:1}
.craft__grid{display:grid;gap:clamp(22px,5vw,56px);align-items:center}

/* Los 4 pasos se apilan en la MISMA celda de grid. Así la caja mide siempre
   lo que mide el paso más alto — en serbio, en inglés o traducida por el
   navegador — y no puede desbordarse sobre la barra de abajo.
   (Con position:absolute el contenedor no medía a sus hijos y chocaban.) */
.craft__stage{display:grid;align-items:start}
.craft__step{
  grid-area:1/1;
  font-family:var(--f-display);
  font-variation-settings:'wdth' 114,'wght' 800;
  font-size:clamp(1.75rem,8.4vw,4.2rem);
  line-height:.98;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance;
  opacity:0;transform:translateY(18px);filter:blur(4px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);
}
.craft__step.is-on{opacity:1;transform:none;filter:none}

.craft__bar{display:flex;align-items:center;gap:14px;margin-top:clamp(36px,6vh,60px)}
.craft__idx{
  font-family:var(--f-display);font-variation-settings:'wdth' 108,'wght' 700;
  font-size:12px;letter-spacing:.14em;color:var(--neon);font-variant-numeric:tabular-nums;
}
.craft__idx--dim{color:var(--muted)}
.craft__rail{position:relative;flex:1;height:1px;background:var(--line-2);overflow:hidden}
.craft__rail i{
  position:absolute;inset:0;background:var(--neon);
  transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px rgba(232,160,92,.6);
}

.craft__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(16px,2.6vh,28px)}
.craft__tags li{
  border:1px solid var(--line-2);padding:7px 11px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:color .4s,border-color .4s,background-color .4s;
}
.craft__tags li.is-on{color:var(--bone);border-color:rgba(232,160,92,.5);background:rgba(232,160,92,.07)}

/* ── 13. FIGURAS CON RESPALDO (nunca vacías) ──────────────────────────────── */
/* Si la foto no existe, queda un panel diseñado — nunca un hueco roto. */
.craft__media,.visit__map{
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(closest-side circle at 50% 45%,
      rgba(232,160,92,.13) 0%, rgba(232,160,92,.03) 45%, transparent 72%),
    repeating-linear-gradient(135deg,
      rgba(244,241,236,.028) 0px, rgba(244,241,236,.028) 1px,
      transparent 1px, transparent 9px),
    linear-gradient(160deg,#141518 0%,#0C0D0F 100%);
}
.craft__media{aspect-ratio:4/5;max-height:52svh;width:100%;margin-inline:auto}
.craft__media img,.visit__map img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* Los 4 cortes: sólo uno visible a la vez. El que entra lo hace creciendo
   ligeramente y afilándose — se lee como un pase de diapositivas caro, no
   como un simple fundido. */
.craft__shot{
  opacity:0;
  scale:1.06;
  filter:blur(10px);
  transition:opacity .7s var(--ease),scale 1.1s var(--ease),filter .7s var(--ease);
}
.craft__shot.is-on{opacity:1;scale:1;filter:blur(0)}

/* Marcadores 1-4 sobre la foto */
.craft__ticks{
  position:absolute;right:14px;bottom:14px;z-index:3;
  display:flex;gap:5px;
}
.craft__ticks i{
  display:block;width:16px;height:2px;background:rgba(244,241,236,.28);
  transition:background-color .5s var(--ease),width .5s var(--ease);
}
.craft__ticks i.is-on{background:var(--neon);width:26px;box-shadow:0 0 10px rgba(232,160,92,.8)}
.craft__media figcaption,.visit__map figcaption{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,241,236,.6);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.craft__media::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.35) 0%,transparent 38%,rgba(10,10,11,.6) 100%);
}

/* ── 14. RADOVI — tira horizontal ─────────────────────────────────────────── */
/* Una sola fila que se desliza en horizontal. Ocupa ~55svh en vez de los
   ~2.500px que se comía el mosaico vertical. */
.strip{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:var(--pad);
  padding-block:22px 26px;      /* holgura: aquí se recorta en vertical */
  cursor:grab;
  /* Los extremos se desvanecen: es la señal universal de "esto continúa".
     Sin ella la tira parece una fila de 3 fotos y ya. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.strip::-webkit-scrollbar{display:none}
.strip.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

.shot{
  position:relative;flex:0 0 auto;
  height:clamp(300px,50svh,470px);
  aspect-ratio:3/4;
  scroll-snap-align:center;
  overflow:hidden;padding:0;
  border:1px solid rgba(244,241,236,.08);
  background:linear-gradient(160deg,#141518,#0C0D0F);
  transition:border-color .4s var(--ease);
}
.shot--wide{aspect-ratio:4/3}
.shot--sq{aspect-ratio:1/1}

/* La foto es más ancha que su tarjeta (116% con 8% de holgura), así el
   desplazamiento de profundidad nunca descubre un borde. */
.shot img{
  position:absolute;top:0;left:-8%;
  width:116%;height:100%;object-fit:cover;
  transition:scale .8s var(--ease);
  pointer-events:none;
}
.shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(10,10,11,.55) 100%);
  transition:opacity .5s;
}

/* El efecto: la tarjeta centrada crece y se ilumina; las de los lados se
   retiran. Lo lleva el compositor con animaciones ligadas al scroll
   HORIZONTAL del propio carril — cero JavaScript. Donde no hay soporte,
   las tarjetas quedan planas y todo sigue funcionando. */
@supports (animation-timeline:view()){
  @media not (prefers-reduced-motion:reduce){
    .shot{
      animation:shotFocus linear both;
      animation-timeline:view(inline);
      animation-range:cover 0% cover 100%;
    }
    .shot img{
      animation:shotDepth linear both;
      animation-timeline:view(inline);
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes shotFocus{
  0%  {scale:.88;opacity:.42;filter:grayscale(.6)}
  50% {scale:1;  opacity:1;  filter:grayscale(0)}
  100%{scale:.88;opacity:.42;filter:grayscale(.6)}
}
@keyframes shotDepth{from{translate:7% 0}to{translate:-7% 0}}

/* Pie: pista, barra de posición y flechas */
.strip__foot{
  display:flex;align-items:center;gap:16px;
  max-width:var(--maxw);margin:6px auto 0;padding-inline:var(--pad);
}
/* Contador explícito: no hay forma de que se te escape que hay 15 */
.strip__count{
  flex:none;
  font-family:var(--f-display);font-variation-settings:'wdth' 108,'wght' 700;
  font-size:12px;letter-spacing:.14em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.strip__count b{color:var(--neon);font-weight:inherit}
.strip__hint{
  flex:none;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.strip__bar{position:relative;flex:1;height:2px;background:var(--line-2);overflow:hidden}
/* Pulgar: su ancho representa cuánto se ve y su posición dónde estás.
   Se mueve con `left` en % del propio raíl, no con transformaciones. */
.strip__bar i{
  position:absolute;top:0;bottom:0;left:0;width:20%;
  background:var(--neon);
  box-shadow:0 0 10px rgba(232,160,92,.6);
}
.strip__nav{display:none}
.strip__arrow{
  width:46px;height:46px;flex:none;
  border:1px solid rgba(232,160,92,.45);color:var(--neon);
  background:rgba(232,160,92,.07);
  font-size:22px;line-height:1;
  transition:border-color .35s,background-color .35s,scale .3s var(--ease);
}
.strip__arrow:active{scale:.92}
.strip__arrow[disabled]{opacity:.3;pointer-events:none}

.gallery__empty{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  margin-top:26px;font-size:13.5px;line-height:1.6;color:var(--muted);
}
.gallery__empty a{letter-spacing:.1em}

/* ── 15. KONTAKT ──────────────────────────────────────────────────────────── */
.visit__grid{display:grid;gap:clamp(30px,7vw,60px);align-items:start}
.visit__addr{
  font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(2.1rem,11vw,4.4rem);line-height:.92;
  margin-bottom:14px;
}
.visit__sub{font-size:14.5px;color:var(--muted);margin-bottom:24px}

.status{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(232,160,92,.4);padding:10px 14px;margin-bottom:26px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon);font-variant-numeric:tabular-nums;
  transition:border-color .5s,color .5s;
}
.status__dot{width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.status.is-closed{border-color:var(--line-2);color:var(--muted)}
.status.is-closed .status__dot{background:var(--muted);box-shadow:none}

.hours{border-top:1px solid var(--line)}
.hours > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:14px;border-bottom:1px solid rgba(244,241,236,.08);
  transition:border-color .5s;
}
.hours dt{font-size:13.5px;color:var(--bone);opacity:.85}
.hours dd{font-size:13.5px;color:var(--bone);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.hours > div.is-today{border-bottom-color:rgba(232,160,92,.45)}
.hours > div.is-today dt,.hours > div.is-today dd{color:var(--bone);opacity:1}

.amen{display:grid;grid-template-columns:1fr;gap:11px;margin-top:26px}
.amen li{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--muted);
}
.amen li::before{
  content:'';width:4px;height:4px;flex:none;background:var(--neon);
}

.visit__cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.visit__cta .btn{width:100%}

.visit__map{aspect-ratio:1/1;width:100%}

/* Mapa de Google incrustado, siempre en vivo y sin API key.
   Se le da tratamiento oscuro para que no rompa el diseño: el `invert`
   + `hue-rotate` es el truco estándar para convertir un mapa claro en uno
   oscuro conservando los colores razonablemente. */
.visit__map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.65) contrast(.92) brightness(.95);
  /* Sin esto, al hacer scroll sobre el mapa el gesto se lo queda él:
     en móvil te atrapa la página y en escritorio te hace zoom sin querer. */
  pointer-events:none;
}
.visit__map.is-live iframe{pointer-events:auto}

/* Portón: un toque libera el mapa. Patrón estándar para no secuestrar
   el scroll de la página. */
.visit__mapgate{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;gap:9px;
  padding-bottom:clamp(46px,9%,64px);
  background:linear-gradient(180deg,rgba(10,10,11,.12) 0%,rgba(10,10,11,.05) 55%,rgba(10,10,11,.5) 100%);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  transition:opacity .45s var(--ease);
}
.visit__map.is-live .visit__mapgate{opacity:0;pointer-events:none}

/* ── 16. CTA FINAL ────────────────────────────────────────────────────────── */
.final{
  border-top:1px solid var(--line);
  padding-block:clamp(64px,14vh,150px);
  text-align:center;
}
.final__glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(94vw,900px);height:min(58svh,520px);pointer-events:none;
  background:radial-gradient(closest-side circle,
    rgba(232,160,92,.2) 0%, rgba(232,160,92,.05) 44%, transparent 72%);
  animation:breathe 7s ease-in-out infinite;
}
.final__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:clamp(24px,5vh,42px);
}
.final h2{
  font-variation-settings:'wdth' 120,'wght' 900;
  font-size:clamp(2.3rem,12.4vw,7.5rem);line-height:.88;letter-spacing:-.035em;
}
.final__note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ── 17. FOOTER ───────────────────────────────────────────────────────────── */
.footer{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding-block:clamp(40px,7vh,64px) clamp(26px,4vh,42px);
}
.footer__grid{display:grid;gap:clamp(26px,6vw,44px)}
.footer__grid > div{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.footer__logo{height:56px;width:auto;margin-bottom:5px}
.footer__grid p{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:28ch}
.footer h4{
  font-family:var(--f-body);font-weight:600;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:4px;
}
.footer__grid a,.footer__grid span:not(.dot){font-size:13px;color:var(--bone);transition:color .3s}
.footer__bar{
  display:flex;flex-direction:column;gap:16px;
  margin-top:clamp(28px,5vh,48px);padding-top:20px;
  border-top:1px solid rgba(244,241,236,.08);
  font-size:11px;color:var(--muted);
}
.lang--foot button{font-size:11px;letter-spacing:.16em;color:var(--muted)}
.lang--foot button.is-on{color:var(--bone);text-shadow:none}

/* ── 18. BARRAS FLOTANTES ─────────────────────────────────────────────────── */
.wa{display:none}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:106;
  display:grid;grid-template-columns:1.4fr 1fr;gap:1px;
  background:var(--line-2);
  border-top:1px solid var(--line-2);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(0);
  transition:transform .45s var(--ease);
}
.dock.is-hidden{transform:translateY(105%)}
.dock a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--dock);padding:16px 10px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.dock__book{background:var(--neon);color:var(--void)}
.dock__wa{background:var(--void);color:var(--bone);font-weight:400}
.dock .btn__arrow{font-size:13px}

/* ── 19. LIGHTBOX ─────────────────────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:140;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,7,.97);
  padding:clamp(14px,5vw,56px);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb.is-open{opacity:1}
.lb__img{
  max-width:100%;max-height:100%;object-fit:contain;
  transform:scale(.97);transition:transform .5s var(--ease);
}
.lb.is-open .lb__img{transform:none}
.lb__close,.lb__nav{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  border:1px solid var(--line-2);color:var(--bone);
  font-size:20px;line-height:1;
  transition:border-color .3s,background-color .3s;
}
.lb__close{top:max(14px,env(safe-area-inset-top));right:14px}
.lb__nav{top:50%;translate:0 -50%;font-size:26px}
.lb__nav--prev{left:10px}
.lb__nav--next{right:10px}

/* ═══════════════════════════════════════════════════════════════════════════
   19b. CAPA DE RESPUESTA — feedback al pulsar
   Apple: "responde en el pointer-down, no al soltar". En táctil no hay hover:
   si al tocar no pasa nada hasta que navega, la interfaz se siente muerta.
   Se usa la propiedad `scale` (independiente de `transform`) para no pelearse
   con el hover ni con el parallax.
   ═══════════════════════════════════════════════════════════════════════════ */
a,button,.shot,.card{touch-action:manipulation}   /* mata el retardo de 300ms */

.btn,.card,.shot,.dock a,.barber,.lb__close,.lb__nav,.wa,.lang button{
  transition:scale .35s var(--ease);
}
.btn:active,.dock a:active,.wa:active,.lb__close:active,.lb__nav:active{
  scale:.965;
  transition-duration:90ms;        /* la respuesta entra rápido, sale suave */
}
.card:active{scale:.985;transition-duration:90ms}
.lang button:active{scale:.9;transition-duration:90ms}

/* En la tarjeta pulsada, el precio se enciende igual que en hover:
   el táctil merece la misma recompensa visual que el ratón. */
.card:active .price,.card:active .price__cur{color:var(--neon)}
.card:active .card__go{color:var(--neon)}
.card:active .card__edge--t,.card:active .card__edge--b{transform:scaleX(1)}
.card:active .card__edge--r,.card:active .card__edge--l{transform:scaleY(1)}

/* ── 19c. BARRA DE PROGRESO DE LECTURA ────────────────────────────────────── */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:118;
  pointer-events:none;background:rgba(244,241,236,.07);
  opacity:0;transition:opacity .5s var(--ease);
}
.progress.is-on{opacity:1}
.progress i{
  display:block;height:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ember),var(--neon));
  box-shadow:0 0 12px rgba(232,160,92,.7);
}
/* Donde el navegador lo soporta, la barra se anima fuera del hilo principal:
   coste cero en JavaScript y suavidad perfecta. */
@supports (animation-timeline:scroll()){
  .progress i{
    animation:progressGrow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes progressGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 19d. LUZ AMBIENTE A LA DERIVA ────────────────────────────────────────── */
/* Blobs cálidos que se desplazan muy despacio (18-26s, muy por encima del
   umbral de 5s que resulta molesto). Como todo halo aquí: transparente
   dentro de su propia caja, así que jamás muestra un borde. */
/* z-index:-1 → pinta por encima del fondo de la sección pero por debajo del
   texto. La sección tiene z-index:2, que crea contexto de apilamiento, así
   que el -1 no se escapa hacia atrás. */
.amb{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:-1}
.amb i{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(closest-side circle,
    rgba(232,160,92,.16) 0%, rgba(232,160,92,.05) 42%, transparent 72%);
  will-change:transform;
}
.amb i:nth-child(1){width:70vw;height:70vw;left:-18%;top:6%;animation:drift1 24s ease-in-out infinite}
.amb i:nth-child(2){width:56vw;height:56vw;right:-14%;bottom:2%;
  background:radial-gradient(closest-side circle,
    rgba(30,58,58,.34) 0%, rgba(30,58,58,.1) 44%, transparent 74%);
  animation:drift2 19s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6%,-5%,0)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-7%,4%,0)}}

/* ── 20. REVEALS ──────────────────────────────────────────────────────────── */
/* El estado oculto SÓLO existe si app.js ha arrancado (pone .js en <html>).
   Sin JavaScript la web se ve entera: degrada a "sin animación", nunca a
   "en blanco". */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none}

/* Titulares: entran desenfocados y se afilan. Es la variante premium del
   revelado por máscara, pero SIN overflow ni clip-path — así que no puede
   recortar un trazo por muy alta que sea la caja de la letra. */
/* Ojo al `.reveal` en el selector: sólo se oculta lo que el vigilante de
   app.js sabe volver a mostrar. Un h2 sin esa clase nunca desaparece. */
.js .head h2.reveal,.js .visit__addr.reveal,.js .final h2.reveal{
  opacity:0;transform:translateY(30px) scale(.985);filter:blur(14px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease);
}
.js .head h2.reveal.is-in,.js .visit__addr.reveal.is-in,.js .final h2.reveal.is-in{
  opacity:1;transform:none;filter:blur(0);
}

/* Las tarjetas del equipo llegan desde algo más abajo y con un punto de
   escala: la profundidad se lee como jerarquía (Material: entrar desde
   abajo = más profundo). */
.js .barber{transform:translateY(38px) scale(.97);transition-duration:1s}
.js .barber.is-in{transform:none}

/* Las tejas de galería entran en cascada desde su propia esquina */


/* La sección sticky del zanat también necesita JS: sin él, se apila normal. */
.js .craft{height:300svh}
.js .craft__sticky{position:sticky;height:100svh}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINTS — mobile-first, se AÑADE complejidad hacia arriba
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ≥ 560px : móviles grandes / phablets ─────────────────────────────────── */
@media (min-width:560px){
  .hero__cta{flex-direction:row;flex-wrap:wrap}
  .hero__cta .btn{width:auto;flex:1 1 auto;min-width:210px}
  .visit__cta{flex-direction:row;flex-wrap:wrap}
  .visit__cta .btn{width:auto}
  .proof__quotes{grid-template-columns:repeat(2,1fr)}
  .amen{grid-template-columns:repeat(2,1fr)}
  .barber{flex:0 0 62%}
}

/* ── ≥ 760px : tablet ─────────────────────────────────────────────────────── */
@media (min-width:760px){
  :root{--dock:0px}

  body{padding-bottom:0}
  .dock{display:none}
  .wa{
    display:inline-flex;align-items:center;gap:10px;
    position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:105;
    background:var(--surface);border:1px solid rgba(232,160,92,.42);color:var(--bone);
    padding:14px 18px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    transition:background-color .35s,border-color .35s,transform .35s var(--ease);
  }

  /* El h2 es enorme y se comía todo el ancho, dejando la nota en 5 líneas.
     Se le reserva una cuota fija y se permite al título encoger. */
  .head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}
  .head > div:first-child{flex:1 1 auto;min-width:0}
  .head__note{flex:0 0 auto;width:min(34ch,34%);text-align:right}
  /* En una fila el h2 sólo dispone de ~55% del ancho, no del 100%: si sigue
     escalando a 13vw se queda sin sitio y break-word parte la palabra
     ("USLUG / E"). Se reduce la pendiente para ese rango. */
  .head h2{font-size:clamp(2.6rem,7.4vw,6.4rem)}

  .svc{grid-template-columns:repeat(2,1fr);gap:14px}
  .visit__grid{grid-template-columns:1fr 1fr}
  .craft__grid{grid-template-columns:1.05fr .95fr}
  .craft__media{max-height:62svh;justify-self:end}
  /* A dos columnas el texto sólo tiene ~44% del ancho: misma corrección de
     pendiente que en el h2 para que "improvizuje." no se parta. */
  .craft__step{font-size:clamp(1.7rem,5vw,4.2rem);overflow-wrap:break-word}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .footer__bar{flex-direction:row;align-items:center;justify-content:space-between}

  /* La tira gana altura y aparecen las flechas: con ratón, arrastrar no es
     obvio, así que hace falta un control visible. */
  .shot{height:clamp(360px,54svh,560px)}
  .strip__nav{display:flex;gap:8px}
  .strip{padding-block:26px 30px}

  /* Equipo: de carrusel a rejilla */
  .team__rail{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(10px,1.6vw,20px);
    overflow:visible;scroll-snap-type:none;
    max-width:var(--maxw);margin-inline:auto;
    align-items:end;
  }
  /* En rejilla no hay tarjeta "centrada": todas al 100% */
  .barber{flex:none;padding-inline:0;--focus:1}
  .barber__frame{height:clamp(320px,38vw,500px)}
  .team__dots{display:none}

  .hero__figure{
    top:auto;bottom:0;
    height:min(88svh,860px);
    width:min(52vw,560px);
    right:2vw;
  }
  .hero__ghost{top:12%;right:1%;font-size:clamp(4rem,9vw,8rem)}
  .hero__inner{gap:clamp(18px,2.6vh,28px)}

  /* Recupera la anchura editorial: ya hay sitio de sobra */
  .hero__title{
    font-variation-settings:'wdth' 116,'wght' 800;
    font-size:clamp(2.9rem,9.6vw,8.5rem);
    line-height:.86;
    text-shadow:none;
  }
  .hero__scrim{
    background:linear-gradient(180deg,
      transparent 0%, transparent 54%,
      rgba(10,10,11,.45) 76%, rgba(10,10,11,.86) 93%, var(--void) 100%);
  }

  .hero__scroll{
    display:flex;align-items:center;gap:10px;
    position:absolute;right:var(--pad);bottom:clamp(24px,4vh,44px);z-index:4;
    writing-mode:vertical-rl;
    font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  }
  .hero__scrollline{width:1px;height:52px;background:linear-gradient(180deg,var(--neon),transparent)}

  /* En móvil los CTA ocupan todo el ancho (área de toque); aquí ya no hace
     falta estirarlos: se ajustan a su contenido. */
  .hero__cta .btn,.visit__cta .btn{flex:0 0 auto;min-width:0}
}

/* ── ≥ 1000px : escritorio ────────────────────────────────────────────────── */
@media (min-width:1000px){
  .svc{grid-template-columns:repeat(4,1fr)}
  .proof__grid{grid-template-columns:minmax(280px,.82fr) 1.18fr;gap:clamp(32px,5vw,72px)}
  .footer__grid{grid-template-columns:repeat(4,1fr)}
  .quote{min-height:190px}

  .header{height:auto;padding-block:clamp(12px,1.6vw,20px)}
  .btn--head{
    display:inline-flex;
    opacity:0;pointer-events:none;transform:translateY(-6px);
    min-height:44px;padding:12px 22px;font-size:11px;
    transition:opacity .45s var(--ease),transform .45s var(--ease),background-color .35s;
  }
  .btn--head.is-on{opacity:1;pointer-events:auto;transform:none}

  .nav{
    position:relative;display:flex;align-items:center;gap:2px;padding:5px;
    border-radius:999px;border:1px solid rgba(244,241,236,.12);
    background:linear-gradient(180deg,rgba(244,241,236,.10) 0%,rgba(244,241,236,.025) 46%,rgba(10,10,11,.3) 100%);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    box-shadow:inset 0 1px 0 rgba(244,241,236,.22),inset 0 -1px 0 rgba(10,10,11,.55),0 16px 38px rgba(0,0,0,.45);
    transition:border-color .5s,box-shadow .5s;
  }
  .nav a{
    position:relative;z-index:1;
    padding:9px clamp(11px,1.2vw,16px);border-radius:999px;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
    color:var(--bone);opacity:.7;
    transition:opacity .35s var(--ease),color .35s;
  }
  .nav a.is-active{opacity:1;color:var(--neon)}
  .nav__pill{
    position:absolute;top:5px;left:0;height:calc(100% - 10px);width:0;
    border-radius:999px;opacity:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(244,241,236,.18),rgba(244,241,236,.07));
    box-shadow:inset 0 1px 0 rgba(244,241,236,.3),0 4px 14px rgba(0,0,0,.35);
    transition:transform .55s var(--ease),width .55s var(--ease),opacity .35s;
  }
  .header.is-stuck{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
  .header.is-stuck .nav{border-color:rgba(244,241,236,.2)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER — solo en dispositivos con puntero fino. En táctil NUNCA se aplica,
   que es exactamente el bug que dejaba las tarjetas congeladas en zoom.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--ember)}
  .btn--solid:hover{background:#F0B173;box-shadow:0 14px 40px -8px rgba(232,160,92,.6);transform:translateY(-2px)}
  .btn--solid:hover .btn__arrow{transform:translateX(4px)}
  .btn--ghost:hover{border-color:rgba(232,160,92,.55);background:rgba(232,160,92,.06);color:var(--bone)}

  .card:hover{background:var(--surface-2)}
  .card:hover .card__edge--t,.card:hover .card__edge--b{transform:scaleX(1)}
  .card:hover .card__edge--r,.card:hover .card__edge--l{transform:scaleY(1)}
  .card:hover .card__edge--t{transition-delay:0ms}
  .card:hover .card__edge--r{transition-delay:90ms}
  .card:hover .card__edge--b{transition-delay:180ms}
  .card:hover .card__edge--l{transition-delay:270ms}
  .card:hover .price,.card:hover .price__cur{color:var(--neon)}
  .card:hover .card__go{color:var(--neon);transform:translateY(0)}
  .card:hover .card__go i{transform:translateX(4px)}

  .barber__halo{opacity:0}
  .barber__cut{transform:scale(.96)}
  /* Inclinación 3D siguiendo el puntero: --rx/--ry las fija app.js.
     `transform` aquí, `scale` arriba — propiedades distintas, se componen. */
  .barber__frame{
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:scale .55s var(--ease),transform .5s var(--ease);
  }
  .team__rail:hover .barber{opacity:.34;transition:opacity .55s var(--ease)}
  .team__rail:hover .barber:hover{opacity:1}
  .barber:hover .barber__halo{opacity:1;transform:scale(1.04)}
  .barber:hover .barber__cut{
    transform:scale(1.03);
    filter:grayscale(0) brightness(1) contrast(1.04) drop-shadow(0 22px 36px rgba(0,0,0,.7));
  }
  .barber:hover .barber__link{color:var(--neon)}

  .shot:hover{border-color:rgba(232,160,92,.55)}
  .shot:hover img{scale:1.05}             /* `scale`, no `transform`: convive con la profundidad */
  .shot:hover::after{opacity:.35}
  .strip__arrow:hover{border-color:rgba(232,160,92,.6);background:rgba(232,160,92,.08)}

  .wa:hover{background:var(--neon);border-color:var(--neon);color:var(--void);transform:translateY(-2px)}
  .footer__grid a:hover{color:var(--neon)}
  .lb__close:hover,.lb__nav:hover{border-color:var(--neon);background:rgba(232,160,92,.1)}
  .barber__link:hover{color:var(--neon)}
}

/* En táctil el retrato se muestra ya nítido y con halo: no hay estado "hover"
   que se quede pegado, y sobre todo no hay zoom que recorte nada. */
@media (hover:none){
  .barber__cut{filter:grayscale(.15) brightness(.98) contrast(1.04) drop-shadow(0 18px 30px rgba(0,0,0,.6))}
  .barber__halo{opacity:.9}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECCIÓN DE BARBERO
   Va al FINAL a propósito: varias de estas reglas empatan en especificidad
   con las de hover y con las de entrada, y en un empate gana la última
   declarada. Aquí abajo siempre mandan.
   ═══════════════════════════════════════════════════════════════════════════ */

.barber__head{margin:0;font-size:inherit;font-weight:inherit}
.barber__toggle{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  width:100%;padding:6px 0;text-align:left;font:inherit;color:inherit;
  min-height:44px;                        /* objetivo táctil */
}
.barber__name{
  font-family:var(--f-display);
  font-variation-settings:'wdth' 110,'wght' 700;
  font-size:clamp(1.15rem,4.8vw,1.6rem);
  line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;
  transition:color .4s var(--ease);
}
/* Un "+" que gira hasta "×": dice sin palabras que ahí se pulsa */
.barber__chev{
  position:relative;width:24px;height:24px;flex:none;margin-left:auto;
  border:1px solid var(--line-2);border-radius:50%;
  transition:border-color .45s var(--ease),rotate .55s var(--ease),background-color .45s;
}
.barber__chev::before,.barber__chev::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--muted);
  transition:background-color .45s var(--ease);
}
.barber__chev::before{width:10px;height:1px;translate:-50% -50%}
.barber__chev::after{width:1px;height:10px;translate:-50% -50%}

/* El detalle se despliega con grid 0fr→1fr: sin alto fijo, así nunca puede
   recortar el texto por muy largo que sea o por mucho que crezca la letra. */
.barber__meta{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .7s var(--ease),opacity .45s var(--ease);
}
.barber__meta > div{
  overflow:hidden;min-height:0;
  display:flex;flex-direction:column;gap:8px;padding-top:12px;
}
.barber.is-open .barber__meta{grid-template-rows:1fr;opacity:1}

/* ── El seleccionado: zoom, color pleno y destello detrás ── */
.barber.is-open .barber__frame{scale:1.06}
.barber.is-open .barber__cut{
  filter:grayscale(0) brightness(1.04) contrast(1.06)
         drop-shadow(0 24px 34px rgba(0,0,0,.55));
}
.js .barber.is-in.is-open .barber__halo{scale:1.16}
.barber.is-open .barber__halo{opacity:1}
.barber.is-open .barber__ghost{-webkit-text-stroke-color:rgba(232,160,92,.4)}
.barber.is-open .barber__name{color:var(--neon)}
.barber.is-open .barber__chev{rotate:135deg;border-color:rgba(232,160,92,.6);background:rgba(232,160,92,.1)}
.barber.is-open .barber__chev::before,
.barber.is-open .barber__chev::after{background:var(--neon)}
.barber.is-open .barber__body{opacity:1}

/* ── Los demás se retiran para que no compitan ── */
.team__rail.has-open .barber:not(.is-open) .barber__frame{scale:.9}
.team__rail.has-open .barber:not(.is-open) .barber__cut{
  filter:grayscale(1) brightness(.5) contrast(1.02);
}
.team__rail.has-open .barber:not(.is-open) .barber__halo{opacity:.15}
.team__rail.has-open .barber:not(.is-open) .barber__body{opacity:.45}
.barber__frame,.barber__cut,.barber__halo,.barber__body{
  transition:scale .7s var(--ease),opacity .55s var(--ease),
             filter .7s var(--ease),transform .5s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .barber__toggle:hover .barber__name{color:var(--neon)}
  .barber__toggle:hover .barber__chev{border-color:rgba(232,160,92,.6)}
  .barber__frame{cursor:pointer}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD DE MOVIMIENTO
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain{animation:none}
  .js .reveal{opacity:1;transform:none}
  .hero__title .line{overflow:visible}
  .hero__title .line__in{transform:none}
  .hero__cut{opacity:1}
  .hero .kicker,.hero__meta,.hero__cta{opacity:1}
  .js .craft{height:auto}
  .js .craft__sticky{position:static;height:auto;padding-block:clamp(48px,8vh,90px)}
  .craft__stage{display:flex;flex-direction:column;gap:16px}
  .craft__step{grid-area:auto;opacity:1;transform:none;filter:none}
  .craft__tags li{color:var(--bone)}
  .craft__rail i{transform:scaleX(1)}
  .btn--solid::after{display:none}

  /* Movimiento decorativo fuera; el feedback al pulsar SE QUEDA — no es
     decoración, es la confirmación de que el toque ha llegado. */
  .amb{display:none}
  .progress{display:none}
  .hero__cut{translate:none}
  .shot img{translate:none}
  .shot{scale:1;opacity:1;filter:none}
  .barber__frame{transform:none;scale:1;translate:none}
  .js .barber__cut{opacity:1;scale:1;translate:none}
  .js .barber__halo{scale:1}
  .barber__ghost{opacity:1;translate:-50% 0}
  .js .barber__head{opacity:1;transform:none}
  .craft__shot{scale:1;filter:none}
  .js .head h2.reveal,.js .visit__addr.reveal,.js .final h2.reveal{
    opacity:1;transform:none;filter:none;
  }
}