/* ══════════════════════════════════════════════════════════════
   ÁNGEL OF LIGHT BARBER SHOP · Sistema de diseño de lujo
   Negro · Oro · Mármol · Experiencia cinematográfica
   ══════════════════════════════════════════════════════════════ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---------- Tokens ---------- */
:root {
  /* Paleta */
  --black:        #070605;
  --ink:          #0d0b09;
  --ink-2:        #14110d;
  --ink-3:        #1c1813;
  --line:         rgba(201, 162, 75, 0.18);
  --line-strong:  rgba(201, 162, 75, 0.42);

  /* Oro */
  --gold:         #c9a24b;
  --gold-soft:    #e8c874;
  --gold-deep:    #9d7a2e;
  --gold-grad:    linear-gradient(135deg, #f3dfa0 0%, #c9a24b 42%, #8a6a24 100%);
  --gold-sheen:   linear-gradient(115deg, transparent 0%, rgba(255,246,214,0.85) 48%, transparent 60%);

  /* Texto */
  --text:         #efe9df;
  --text-dim:     #b7ad9c;
  --text-mute:    #8a8071;

  /* Tipografía */
  --f-display: 'Cinzel', 'Times New Roman', serif;
  --f-serif:   'Cormorant Garamond', Georgia, serif;
  --f-sans:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Ritmo */
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --sec-pad: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 4px;
}

/* ---------- Base ---------- */
/* overflow-x: hidden con respaldo (clip no existe en iOS Safari 15 o menos, donde
   dejaba escapar las capas decorativas y aparecía espacio/scroll a los lados) */
html { overflow-x: hidden; width: 100%; }
body {
  font-family: var(--f-sans);
  font-weight: 300;
  color: var(--text);
  background: var(--black);
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(201,162,75,0.35); color: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Fondo de mármol cinematográfico ---------- */
.marble-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--black); }
.marble-layer {
  position: absolute; inset: -20%;
  background:
    linear-gradient(rgba(6,5,4,0.62), rgba(6,5,4,0.62)),
    url('../img/marble.webp') center / cover no-repeat,
    #070605;
  filter: saturate(1.02);
  animation: marbleDrift 40s var(--ease) infinite alternate;
}
.marble-glow {
  position: absolute; inset: 0;
  background: radial-gradient(40% 30% at 50% 0%, rgba(201,162,75,0.10), transparent 70%);
  mix-blend-mode: screen;
  animation: glowBreathe 12s ease-in-out infinite alternate;
}
.grain {
  position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes marbleDrift { from { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); } to { transform: translate3d(1.2%, 1.2%, 0) scale(1.05); } }
@keyframes glowBreathe { from { opacity: 0.5; } to { opacity: 1; } }

/* ---------- Accesibilidad ---------- */
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--gold); color: #000; padding: 0.6rem 1.2rem; border-radius: var(--radius);
  z-index: 200; transition: top 0.3s;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ══════════════ NAV ══════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.5s var(--ease), backdrop-filter 0.5s, padding 0.4s;
  padding: 0.6rem 0;
}
.nav.is-scrolled {
  background: rgba(9,8,6,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.nav__inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}

.nav__logo { justify-self: start; display: inline-flex; }
.nav__logo img { width: clamp(150px, 15vw, 210px); height: auto; transition: filter 0.5s; }
.nav__logo:hover img { filter: drop-shadow(0 0 12px rgba(232,200,116,0.45)); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 1rem; }

.nav__links { justify-self: center; display: flex; align-items: center; gap: clamp(0.9rem, 1.5vw, 1.7rem); }
.nav__links > a:not(.btn) {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-dim); position: relative; padding: 0.4rem 0; transition: color 0.35s;
}
.nav__links > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold-grad); transition: width 0.4s var(--ease);
}
.nav__links > a:not(.btn):hover,
.nav__links > a.is-active { color: var(--gold-soft); }
.nav__links > a:not(.btn):hover::after,
.nav__links > a.is-active::after { width: 100%; }

.nav__cta { justify-self: end; }

.nav__burger { display: none; width: 34px; height: 26px; flex-direction: column; justify-content: center; gap: 6px; }
.nav__burger span { display: block; height: 2px; width: 28px; background: var(--gold-soft); transition: transform 0.4s var(--ease), opacity 0.3s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menú overlay a pantalla completa */
.nav__panel {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.6rem;
  background: rgba(7,6,5,0.97); backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.nav__panel.is-open, .nav__panel:target { opacity: 1; visibility: visible; }
.nav__panel-logo { width: clamp(170px, 30vw, 240px); height: auto; margin-bottom: 1rem; opacity: 0; transform: translateY(-12px); transition: all 0.6s var(--ease) 0.1s; }
.nav__panel.is-open .nav__panel-logo, .nav__panel:target .nav__panel-logo { opacity: 1; transform: none; }
.nav__panel nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.nav__panel a:not(.btn) {
  font-family: var(--f-display); font-size: clamp(1.3rem, 4vw, 2rem); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim); transition: color 0.35s, letter-spacing 0.35s;
  opacity: 0; transform: translateY(14px);
}
.nav__panel.is-open a:not(.btn), .nav__panel:target a:not(.btn) { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.35s, letter-spacing 0.35s; }
.nav__panel.is-open nav a:nth-child(1) { transition-delay: 0.12s; }
.nav__panel.is-open nav a:nth-child(2) { transition-delay: 0.17s; }
.nav__panel.is-open nav a:nth-child(3) { transition-delay: 0.22s; }
.nav__panel.is-open nav a:nth-child(4) { transition-delay: 0.27s; }
.nav__panel.is-open nav a:nth-child(5) { transition-delay: 0.32s; }
.nav__panel.is-open nav a:nth-child(6) { transition-delay: 0.37s; }
.nav__panel.is-open nav a:nth-child(7) { transition-delay: 0.42s; }
.nav__panel a:not(.btn):hover { color: var(--gold-soft); letter-spacing: 0.24em; }
.nav__panel-cta { margin-top: 1rem; opacity: 0; transition: opacity 0.5s var(--ease) 0.5s; }
.nav__panel.is-open .nav__panel-cta, .nav__panel:target .nav__panel-cta { opacity: 1; }
.nav__panel-close { position: absolute; top: 1.6rem; right: 2rem; font-size: 2.6rem; line-height: 1; color: var(--gold-soft); transition: transform 0.4s var(--ease); }
.nav__panel-close:hover { transform: rotate(90deg); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--f-sans); font-weight: 500; font-size: 0.74rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.85rem 1.7rem; border-radius: var(--radius); position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s, color 0.4s;
  will-change: transform;
}
.btn--lg { padding: 1.05rem 2.4rem; font-size: 0.78rem; }
.btn--gold { color: #17120a; background: var(--gold-grad); box-shadow: 0 6px 22px rgba(201,162,75,0.28); }
.btn--gold::before {
  content: ''; position: absolute; inset: 0; background: var(--gold-sheen);
  transform: translateX(-130%); transition: transform 0.8s var(--ease);
}
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(201,162,75,0.4); }
.btn--gold:hover::before { transform: translateX(130%); }
.btn--outline { color: var(--gold-soft); border: 1px solid var(--line-strong); }
.btn--outline:hover { border-color: var(--gold-soft); background: rgba(201,162,75,0.08); transform: translateY(-2px); }
.btn--ghost { color: var(--text-dim); border: 1px solid transparent; }
.btn--ghost:hover { color: var(--gold-soft); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none; }
/* Botón WhatsApp */
.btn--wa { color: #eafff2; border: 1px solid rgba(37,211,102,0.55); background: linear-gradient(180deg, rgba(37,211,102,0.16), rgba(37,211,102,0.06)); }
.btn--wa:hover { border-color: #25d366; background: linear-gradient(180deg, rgba(37,211,102,0.3), rgba(37,211,102,0.12)); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,0.22); }
.wa-ico { display: inline-flex; width: 1.15em; height: 1.15em; color: #25d366; }
.wa-ico svg { width: 100%; height: 100%; }

/* ══════════════ ACTO I · LA APARICIÓN ══════════════ */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #050403; isolation: isolate;
}
/* El vacío: una viñeta que profundiza el negro */
.hero__void {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(72% 62% at 50% 46%, rgba(22,16,9,0.65), #050403 74%);
}
/* Haz de luz volumétrico que desciende sobre el emblema */
.hero__beam {
  position: absolute; inset: -22% 0 auto 0; height: 132%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 62% at 50% 6%, rgba(232,200,116,0.15), transparent 60%),
    conic-gradient(from 180deg at 50% -8%, transparent 41%, rgba(201,162,75,0.12) 50%, transparent 59%);
  filter: blur(7px); transform-origin: 50% 0;
  animation: beamDrift 26s ease-in-out infinite alternate; will-change: transform;
}
@keyframes beamDrift {
  from { transform: translateX(-2%) rotate(-1.2deg); opacity: 0.82; }
  to   { transform: translateX(2%)  rotate(1.2deg);  opacity: 1; }
}
/* Motas de luz suspendidas (canvas) */
.hero__dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.6; }

.hero__stage {
  position: relative; z-index: 2; text-align: center;
  display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2.6rem); padding-block: 8vh;
}
.hero__emblem {
  width: clamp(280px, 42vw, 580px); height: auto;
  filter: drop-shadow(0 0 60px rgba(201,162,75,0.26)) drop-shadow(0 22px 60px rgba(0,0,0,0.7));
  will-change: transform, opacity, filter;
}
/* La aparición cinematográfica solo con JS; sin JS el emblema está presente */
html.js .hero__emblem { animation: emblemAppear 2.6s var(--ease) both, emblemBreath 9s ease-in-out 2.6s infinite; }
@keyframes emblemAppear {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(16px) drop-shadow(0 0 0 rgba(201,162,75,0)); }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 60px rgba(201,162,75,0.26)); }
}
@keyframes emblemBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
.hero__thesis {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0.05em;
  font-size: clamp(1.2rem, 2.7vw, 2rem); color: var(--text); margin: 0; opacity: 0.92;
}
html.js .hero__thesis { opacity: 0; animation: heroFade 1.7s var(--ease) 1.6s forwards; }
@keyframes heroFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 0.92; transform: none; } }

.hero__scroll {
  position: absolute; left: 0; right: 0; bottom: 2.2rem; margin-inline: auto; width: fit-content; z-index: 3;
  display: grid; justify-items: center; gap: 0.8rem; color: var(--text-mute);
  font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; transition: color 0.4s;
}
html.js .hero__scroll { opacity: 0; animation: heroFade 1.7s var(--ease) 2.8s forwards; }
.hero__scroll:hover { color: var(--gold-soft); }
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--gold-soft), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ''; position: absolute; top: -60%; left: 0; width: 100%; height: 55%; background: var(--gold-soft); animation: scrollFall 2.6s var(--ease) infinite; }
@keyframes scrollFall { 0% { top: -60%; } 65%,100% { top: 100%; } }

/* ══════════════ ACTO II · EL CREDO ══════════════ */
/* Fundido inferior para que el negro entre en el mármol sin línea */
.credo { position: relative; z-index: 1; background: linear-gradient(180deg, #050403 calc(100% - 120px), transparent); }
.credo__phrase {
  min-height: 46svh; display: grid; place-items: center;
  padding: 4.5vh clamp(1.5rem, 6vw, 4rem); text-align: center;
}
.credo__text {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: 1.16; letter-spacing: 0.005em;
  color: #d9d1c4; max-width: 18ch; margin: 0;
}
.credo__turn { color: #fbf7ef; text-shadow: 0 0 34px rgba(255,240,214,0.18); }
/* La luz que revela: solo con JS. Sin JS, las frases están presentes. */
.credo__text::after {
  content: ''; display: block; width: 0; height: 1px; margin: clamp(1.8rem, 3.4vw, 3rem) auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,246,230,0.9), transparent);
}
html.js .credo__text {
  opacity: 0; filter: blur(10px); transform: translateY(30px) scale(0.975);
  transition: opacity 1.4s var(--ease), filter 1.4s var(--ease), transform 1.4s var(--ease);
}
html.js .credo__phrase.in .credo__text {
  opacity: 1; filter: blur(0); transform: none;
}
html.js .credo__text::after { transition: width 1.5s var(--ease) 0.4s; }
html.js .credo__phrase.in .credo__text::after { width: min(340px, 66%); }

/* ══════════════ ACTO III · LA EXCELENCIA ══════════════ */
/* Sin bloque sólido: el mármol se ve continuo; un velo que se desvanece
   por arriba y por abajo oscurece lo justo para leer, sin ninguna línea. */
.expo { position: relative; z-index: 1;
  background: linear-gradient(180deg, transparent 0, rgba(6,5,4,0.78) 16%, rgba(6,5,4,0.78) 84%, transparent 100%); }
/* La declaración: el oro regresa */
.expo__declare { min-height: 64svh; display: grid; place-items: center; text-align: center; padding: 10vh var(--gutter); }
.expo__declaration {
  font-family: var(--f-display); font-weight: 500; letter-spacing: 0.02em; line-height: 1.08; margin: 0; text-wrap: balance;
  font-size: clamp(2rem, 6vw, 4.4rem);
  background: linear-gradient(180deg, #fbf3dc, #e8c874 55%, #a9812f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.expo__declaration span { display: block; }
/* Sala de exposición: cada obra respira */
.expo__gallery { display: flex; flex-direction: column; align-items: center; gap: clamp(2.5rem, 5vh, 4.5rem); padding: 2vh var(--gutter) 5vh; }
.expo__piece { width: 100%; display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.3rem); }
.expo__frame {
  position: relative; width: 100%; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(160deg, #171208, #0a0806);
}
.expo__frame::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(232,200,116,0.20); font-size: 1.7rem; }
.expo__frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.expo__note { text-align: center; display: grid; gap: 0.7rem; }
.expo__kind { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft); }
.expo__pensa { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.8rem); line-height: 1.3; color: var(--text); max-width: 24ch; margin: 0 auto; }
/* Proporciones curadas (ritmo) */
.expo__piece--portrait .expo__frame { max-width: 460px; aspect-ratio: 4 / 5; }
.expo__piece--wide     .expo__frame { max-width: 920px; aspect-ratio: 16 / 9; }
.expo__piece--square   .expo__frame { max-width: 600px; aspect-ratio: 1 / 1; }
.expo__piece--macro    .expo__frame { max-width: 1000px; aspect-ratio: 3 / 2; }
.expo__piece--macro .expo__pensa { font-size: clamp(1.4rem, 3vw, 2.2rem); max-width: 28ch; }
/* Piezas-render: el oro regresa como hairline + destello especular */
.expo__piece--render .expo__frame {
  background: radial-gradient(60% 60% at 50% 38%, rgba(201,162,75,0.14), transparent 70%), linear-gradient(160deg, #12100b, #070605);
}
.expo__piece--render .expo__frame::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(116deg, transparent 42%, rgba(255,246,214,0.10) 50%, transparent 58%);
}
/* Revelado tipo foco: la obra emerge de la sombra */
html.js .expo__piece .expo__frame { filter: brightness(0.42) saturate(0.9); transition: filter 1.5s var(--ease); }
html.js .expo__piece.is-visible .expo__frame { filter: brightness(1); }

/* ══════════════ ACTO IV · EL LEGADO ══════════════ */
.legado { position: relative; z-index: 1; background: linear-gradient(180deg, transparent 0, rgba(6,5,4,0.74) 15%, rgba(6,5,4,0.74) 85%, transparent 100%); padding-block: clamp(2.5rem, 5vh, 4.5rem); overflow: hidden; }
/* La luz se multiplica: varios focos tenues (frente al haz único del Acto I) */
.legado::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.8;
  background:
    radial-gradient(24% 30% at 20% 12%, rgba(201,162,75,0.09), transparent 70%),
    radial-gradient(22% 28% at 78% 20%, rgba(201,162,75,0.07), transparent 70%),
    radial-gradient(26% 30% at 50% 92%, rgba(201,162,75,0.06), transparent 70%);
}
.legado > * { position: relative; z-index: 1; }
.legado__intro { text-align: center; display: grid; justify-items: center; gap: 1.5rem; padding-block: clamp(1.5rem, 4vh, 3rem); }
.legado__eyebrow { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-soft); }
.legado__declaration { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 6.5vw, 4.8rem); line-height: 1.06; letter-spacing: 0.01em; margin: 0; text-wrap: balance; color: var(--text); }
.legado__declaration span { display: block; background: linear-gradient(180deg, #fbf3dc, #e8c874 55%, #a9812f); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* La cifra de autoridad (un solo dato) */
.legado__stat { text-align: center; display: grid; justify-items: center; gap: 0.6rem; padding-block: clamp(1.8rem, 5vh, 3.5rem); }
.legado__num { font-family: var(--f-display); font-weight: 600; font-size: clamp(3.6rem, 13vw, 8.5rem); line-height: 1; background: linear-gradient(180deg, #fbf3dc, #e8c874 55%, #a9812f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.legado__label { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-dim); }
/* La transmisión */
.legado__piece { width: 100%; display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.3rem); padding-block: clamp(1.5rem, 4vh, 3rem); }
.legado__frame {
  position: relative; width: 100%; max-width: 620px; aspect-ratio: 1087 / 1447; overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #171208, #0a0806); margin-inline: auto;
}

/* Las fotos de los actos se DESVANECEN en el negro: sin bordes ni cajas,
   los cuatro lados se difuminan hacia la oscuridad (nada de líneas). */
.expo__frame, .legado__frame {
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.legado__piece--maestros .legado__frame { aspect-ratio: 1023 / 1537; max-width: 560px; }
.legado__frame::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(232,200,116,0.20); font-size: 1.7rem; }
.legado__frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
html.js .legado__piece .legado__frame { filter: brightness(0.45) saturate(0.9); transition: filter 1.5s var(--ease); }
html.js .legado__piece.is-visible .legado__frame { filter: brightness(1); }
.legado__cta { text-align: center; padding-top: clamp(1rem, 3vh, 2rem); }

/* ══════════════ ACTO V · LA CONFIANZA ══════════════ */
.trust { position: relative; z-index: 1; background: linear-gradient(180deg, transparent 0, rgba(7,6,5,0.76) 15%, rgba(7,6,5,0.76) 85%, transparent 100%); padding-block: clamp(3.5rem, 8vh, 7rem); overflow: hidden; }
/* Luz cálida (más presente y baja que en los actos anteriores) */
.trust::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 40%, rgba(201,162,75,0.10), transparent 70%);
}
.trust > * { position: relative; z-index: 1; }
.trust__intro { text-align: center; display: grid; justify-items: center; gap: 1.4rem; padding-block: clamp(1rem, 5vh, 4rem); }
.trust__eyebrow { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-soft); }
.trust__declaration { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem, 5.5vw, 4rem); line-height: 1.08; letter-spacing: 0.01em; margin: 0; text-wrap: balance; color: var(--text); }
.trust__declaration span { display: block; background: linear-gradient(180deg, #fbf3dc, #e8c874 55%, #a9812f); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Opiniones */
.trust__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 8vh, 6rem); }
.trust__quote { margin: 0; display: grid; gap: 1.4rem; text-align: center; }
.trust__quote::before { content: '\201C'; font-family: var(--f-serif); color: var(--gold-soft); font-size: 3rem; line-height: 0.6; height: 1.4rem; opacity: 0.7; }
.trust__text { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: var(--text); margin: 0; }
.trust__quote figcaption { display: grid; gap: 0.25rem; }
.trust__name { font-family: var(--f-display); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); }
.trust__detail { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
/* El cierre: del "¿si?" al "¿cuándo?" → hacia la reserva */
.trust__close { text-align: center; display: grid; justify-items: center; gap: 2rem; padding-top: clamp(2rem, 5vh, 4rem); }
.trust__closeline { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--text); margin: 0; }
.trust__closeline em { color: var(--text-mute); font-style: italic; }
.trust__closeline strong { font-weight: 500; background: linear-gradient(180deg, #fbf3dc, #e8c874 55%, #a9812f); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 780px) { .trust__quotes { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ══════════════ SECCIÓN base ══════════════ */
.section { position: relative; padding-block: var(--sec-pad); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.eyebrow {
  display: inline-block; font-size: 0.82rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem; position: relative; padding-bottom: 0.2rem;
}
.section__title {
  font-family: var(--f-display); font-weight: 600; line-height: 1.06;
  font-size: clamp(2.7rem, 6.6vw, 4.8rem); color: var(--text); letter-spacing: 0.01em;
  /* Nunca sobresalir: palabras largas traducidas (p. ej. alemán) se ajustan. */
  max-width: 100%; overflow-wrap: break-word; text-wrap: balance;
}
.section__title--serif { font-family: var(--f-serif); font-weight: 500; letter-spacing: 0; font-size: clamp(3.5rem, 8.6vw, 6.2rem); line-height: 1.02; }
.section__sub { color: var(--text); margin-top: 1rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.section__rule { width: 72px; height: 1px; margin: 1.5rem auto 0; background: var(--gold-grad); position: relative; }
.section__rule::after { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--gold); font-size: 0.6rem; background: var(--black); padding: 0 8px; }
.section__cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Tarjeta base ---------- */
.card {
  position: relative; background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform 0.5s var(--ease), box-shadow 0.5s, border-color 0.5s;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, rgba(201,162,75,0.35), transparent 40%, transparent 70%, rgba(201,162,75,0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(0,0,0,0.55); border-color: transparent; }
.card:hover::before { opacity: 1; }

/* ══════════════ SERVICIOS ══════════════ */
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.7rem); }
.service-card {
  padding: 0; text-align: center; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: linear-gradient(180deg, rgba(20,16,11,0.6), rgba(9,7,5,0.75));
}
.service-card__media {
  aspect-ratio: 1 / 1; position: relative; overflow: hidden;
  background-image:
    radial-gradient(60% 60% at 50% 35%, rgba(201,162,75,0.18), transparent 60%),
    linear-gradient(160deg, #241c11, #0b0906);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 0.9s var(--ease);
}
/* Foto que se coloca sobre el respaldo; si el archivo falta, se elimina y
   se muestra el degradado (ver onerror en el HTML). */
.media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.service-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(9,7,5,0.9));
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(0,0,0,0.55); border-color: var(--gold-soft); }
.service-card:hover .service-card__media { transform: scale(1.07); }
.service-card__inner { padding: 0.4rem 1.4rem 2rem; position: relative; z-index: 2; margin-top: -1.4rem; }
.service-card__name { font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.1rem, 1.4vw, 1.35rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
/* Ornamento ✦ entre nombre y precio */
.service-card__orn { display: block; width: 74px; height: 10px; margin: 0.7rem auto 0.5rem; position: relative; }
.service-card__orn::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent); }
.service-card__orn::after { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); color: var(--gold); font-size: 0.62rem; padding: 0 7px; background: #0d0a07; }
/* Precio discreto: el deseo llega antes que el precio */
.service-card__price { font-family: var(--f-serif); font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 500; color: var(--text-mute); letter-spacing: 0.14em; line-height: 1; margin: 0.7rem 0 1rem; }
.service-card__price span { font-size: 0.72em; margin-left: 1px; }
.service-card__desc { color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; max-width: 22ch; margin-inline: auto; }
.btn--wide { padding-inline: clamp(2.4rem, 6vw, 4.5rem); box-shadow: 0 8px 30px rgba(201,162,75,0.14); }
.services .section__title, .gallery .section__title { text-transform: uppercase; letter-spacing: 0.09em; font-size: clamp(3.8rem, 8vw, 6.4rem); }
.services .section__sub { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(0.9rem, 1.3vw, 1.05rem); color: var(--text-dim); }

/* Desplegable "Ver todos los servicios" */
.services-all { max-width: 760px; margin-inline: auto; }
.services-all summary { list-style: none; cursor: pointer; margin-inline: auto; }
.services-all summary::-webkit-details-marker { display: none; }
.services-all .lbl-open { display: none; }
.services-all[open] .lbl-closed { display: none; }
.services-all[open] .lbl-open { display: inline; }
.services-all__chev { display: inline-block; margin-left: 0.2rem; transition: transform 0.4s var(--ease); font-size: 0.8em; }
.services-all[open] .services-all__chev { transform: rotate(180deg); }
.services-all__panel {
  margin-top: 1.8rem; text-align: left; padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--line); border-radius: 6px;
  background: linear-gradient(180deg, rgba(20,16,11,0.55), rgba(9,7,5,0.7));
  animation: fadeSlide 0.5s var(--ease);
}
.price-list { display: grid; }
.price-list li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.95rem 0.2rem; border-bottom: 1px solid var(--line); }
.price-list li:last-child { border-bottom: 0; }
.price-list__name { font-family: var(--f-serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text); letter-spacing: 0.02em; }
.price-list__name em { font-style: italic; font-size: 0.8em; color: var(--text-mute); }
.price-list__dots { flex: 1; align-self: center; border-bottom: 1px dotted var(--line-strong); min-width: 20px; }
.price-list__price { font-family: var(--f-serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--gold-soft); white-space: nowrap; }
/* Encabezados de categoría dentro de la lista de precios */
.price-list li.price-list__cat { display: block; padding: 1.7rem 0.2rem 0.5rem; border-bottom: 0; }
.price-list li.price-list__cat:first-child { padding-top: 0.2rem; }
.price-list__cat span { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-soft); }

/* ══════════════ GALERÍA DE TRABAJOS (Nuestros trabajos) ══════════════ */
.works { width: 100%; max-width: 1120px; margin-inline: auto; display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); justify-items: center; text-align: center; }
.works__eyebrow { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-soft); }
.works__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.5vw, 1.8rem); width: 100%; }
.works__item { flex: 1 1 200px; max-width: 258px; display: grid; gap: 0.9rem; justify-items: center; margin: 0; }
.works__frame { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.works__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.works__item:hover .works__frame img { transform: scale(1.05); }
.works__name { font-family: var(--f-display); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); }
.works__grid--kids { max-width: 540px; grid-template-columns: repeat(2, 1fr); margin-inline: auto; }
/* Los retratos de niños se desvanecen aún más en los bordes (sin líneas). */
.works__grid--kids .works__frame {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* Gorras: desplegable con formato apaisado (se ve la gorra entera) */
.gorras-all { max-width: 780px; margin: clamp(1.6rem, 4vw, 2.6rem) auto 0; text-align: center; }
.works__grid--gorras .works__frame { aspect-ratio: 3 / 2; }
.works__grid--gorras .works__item { flex: 1 1 200px; max-width: 240px; }
@media (max-width: 780px) { .works__grid { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════ CÓMO LLEGAR (metro · bus · parking) ══════════════ */
.getting { max-width: 1080px; margin: clamp(2.6rem, 6vw, 4.2rem) auto 0; display: grid; gap: clamp(1.9rem, 4vw, 2.6rem); justify-items: center; text-align: center; }
.getting__lead { font-family: var(--f-serif); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text-dim); max-width: 42ch; line-height: 1.55; }
.getting__lead strong { color: var(--gold-soft); font-weight: 500; }
.getting__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); width: 100%; }
.getting__item { display: grid; justify-items: center; gap: 0.55rem; padding: 0 0.5rem; }
.getting__ico { color: var(--gold-soft); display: grid; place-items: center; height: 34px; }
.getting__label { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text); }
.getting__val { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; letter-spacing: 0.02em; }
@media (max-width: 620px) { .getting__grid { grid-template-columns: 1fr; gap: 1.7rem; } }

/* ══════════════ HORARIO DE APERTURA ══════════════ */
.hours { max-width: 1080px; margin: clamp(2.6rem, 6vw, 4.5rem) auto 0; display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.hours__eyebrow { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-soft); }
.hours__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(0.4rem, 1vw, 0.9rem); width: 100%; }
.hours__day { display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 0.5rem; border-radius: 10px; background: linear-gradient(180deg, rgba(22,17,11,0.55), rgba(9,7,5,0.3)); }
.hours__d { font-family: var(--f-display); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); margin-bottom: 0.15rem; }
.hours__h { font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.02em; }
.hours__day--off .hours__h { color: var(--gold-soft); opacity: 0.75; }
@media (max-width: 860px) { .hours__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .hours__grid { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════ SPLIT (Barbería / Academia / Contacto) ══════════════ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--reverse .split__media { order: -1; }
.split__text .eyebrow { margin-bottom: 1.2rem; }
.split__text p { color: var(--text-dim); margin-top: 1.2rem; max-width: 46ch; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.8; }
.split__text .section__title { margin-bottom: 0.4rem; }
.split__text .btn { margin-top: 2rem; }
.split__media { position: relative; }

/* Título "NUESTRA HISTORIA" en mayúsculas + divisor ✦ a la izquierda */
.barberia__title { text-transform: uppercase; letter-spacing: 0.02em; }
.rule-left {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--gold); font-size: 0.62rem; margin: 1rem 0 1.6rem;
}
.rule-left::before, .rule-left::after { content: ''; width: 26px; height: 1px; }
.rule-left::before { background: linear-gradient(90deg, var(--gold), transparent); }
.rule-left::after { background: linear-gradient(90deg, transparent, var(--gold)); }

/* Esquinas doradas art-decó del marco */
.frame__corner { position: absolute; width: clamp(38px, 5vw, 62px); height: clamp(38px, 5vw, 62px); z-index: 4; pointer-events: none; }
.frame__corner--tr { top: -12px; right: -12px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.frame__corner--bl { bottom: -12px; left: -12px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.frame__corner--tl { top: -12px; left: -12px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.frame__corner--br { bottom: -12px; right: -12px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.frame--ornate { border-color: var(--line-strong); }

/* Punto dorado del título y botón con flecha */
.dot-gold { color: var(--gold); }
.btn--arrow::after { content: '→'; margin-left: 0.7rem; display: inline-block; transition: transform 0.4s var(--ease); }
.btn--arrow:hover::after { transform: translateX(5px); }

.feature-list, .check-list { margin-top: 1.8rem; display: grid; gap: 0.7rem; }
.feature-list li, .check-list li { position: relative; padding-left: 1.8rem; color: var(--text-dim); font-size: 0.96rem; }
.feature-list li::before, .check-list li::before {
  content: '✦'; position: absolute; left: 0; top: 0; color: var(--gold);
}
.check-list li::before { content: '✓'; font-weight: 600; }

/* ---------- Marcos de imagen (placeholders premium) ---------- */
.frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* La foto se difumina en el fondo: sin borde, sin caja, sin líneas */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.frame::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 30%, transparent, rgba(0,0,0,0.6));
}
.frame--barberia {
  aspect-ratio: 1508 / 1043; border-color: var(--line-strong);
  background-image:
    radial-gradient(50% 40% at 50% 25%, rgba(201,162,75,0.28), transparent 60%),
    linear-gradient(160deg, #1a1611, #0a0806 70%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.frame--academia {
  background-image:
    radial-gradient(60% 50% at 60% 30%, rgba(201,162,75,0.22), transparent 60%),
    linear-gradient(200deg, #17130e, #090705 70%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.frame__mono { position: relative; z-index: 2; font-family: var(--f-display); font-size: clamp(3rem, 8vw, 5.5rem); color: rgba(232,200,116,0.22); letter-spacing: 0.1em; }
.frame__mono em { font-style: normal; color: rgba(232,200,116,0.12); }
.frame__badge { position: relative; z-index: 2; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.6rem, 5vw, 2.6rem); color: rgba(232,200,116,0.25); }

/* Ken Burns */
.kenburns { position: relative; }
.kenburns::before {
  content: ''; position: absolute; inset: 0; background: inherit; z-index: 0;
  animation: kenburns 22s var(--ease) infinite alternate;
}
@keyframes kenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(1.5%, -1.5%); } }

/* ══════════════ GALERÍA ══════════════ */
.gallery__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem clamp(1.2rem, 2.5vw, 2.4rem); margin-bottom: 2.8rem; }
.gallery__filter {
  font-size: 0.86rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
  padding: 0.4rem 0; position: relative; transition: color 0.35s; cursor: pointer; user-select: none;
}
.gallery__filter::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--gold-grad); transition: width 0.4s var(--ease); }
.gallery__filter:hover { color: var(--gold-soft); }
/* Estado activo según el radio marcado (sin JS) */
#gf-all:checked ~ .gallery__filters label[for="gf-all"],
#gf-cortes:checked ~ .gallery__filters label[for="gf-cortes"],
#gf-barbas:checked ~ .gallery__filters label[for="gf-barbas"],
#gf-lineup:checked ~ .gallery__filters label[for="gf-lineup"],
#gf-ambiente:checked ~ .gallery__filters label[for="gf-ambiente"],
#gf-productos:checked ~ .gallery__filters label[for="gf-productos"] { color: var(--gold-soft); }
#gf-all:checked ~ .gallery__filters label[for="gf-all"]::after,
#gf-cortes:checked ~ .gallery__filters label[for="gf-cortes"]::after,
#gf-barbas:checked ~ .gallery__filters label[for="gf-barbas"]::after,
#gf-lineup:checked ~ .gallery__filters label[for="gf-lineup"]::after,
#gf-ambiente:checked ~ .gallery__filters label[for="gf-ambiente"]::after,
#gf-productos:checked ~ .gallery__filters label[for="gf-productos"]::after { width: 100%; }
/* Filtrado según el radio marcado (sin JS) */
#gf-cortes:checked   ~ .gallery__grid .gallery__item:not([data-cat="cortes"]),
#gf-barbas:checked   ~ .gallery__grid .gallery__item:not([data-cat="barbas"]),
#gf-lineup:checked   ~ .gallery__grid .gallery__item:not([data-cat="lineup"]),
#gf-ambiente:checked ~ .gallery__grid .gallery__item:not([data-cat="ambiente"]),
#gf-productos:checked ~ .gallery__grid .gallery__item:not([data-cat="productos"]) { display: none; }

.gallery__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.7rem, 1.4vw, 1.1rem); }
.gallery__item {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 3; transition: transform 0.5s var(--ease), box-shadow 0.5s, opacity 0.5s;
}
.gallery__item.is-hidden { display: none; }
.gallery__ph {
  position: absolute; inset: 0; transition: transform 0.9s var(--ease), filter 0.5s; background-size: cover; background-position: center; background-repeat: no-repeat;
  /* Cada foto del mosaico se difumina en el negro: sin bordes ni rejilla visible */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.gallery__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1rem 0.9rem; z-index: 2;
  font-family: var(--f-serif); font-style: italic; font-size: 1.05rem; color: var(--text);
  background: linear-gradient(transparent, rgba(0,0,0,0.85)); opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}
.gallery__item:hover { box-shadow: 0 24px 50px rgba(0,0,0,0.55), 0 0 46px rgba(201,162,75,0.16); }
.gallery__item:hover .gallery__ph { transform: scale(1.12); filter: brightness(1.08); }
.gallery__item:hover figcaption { opacity: 1; transform: translateY(0); }

.g1 { background-image: linear-gradient(150deg, #2a2116, #0c0a07); }
.g2 { background-image: linear-gradient(150deg, #241d13, #0a0806); }
.g3 { background-image: radial-gradient(60% 60% at 40% 30%, rgba(201,162,75,0.35), transparent), linear-gradient(#100d09, #100d09); }
.g4 { background-image: linear-gradient(200deg, #2d2417, #0b0906); }
.g5 { background-image: linear-gradient(150deg, #201a11, #0d0a07); }
.g6 { background-image: radial-gradient(50% 50% at 60% 40%, rgba(201,162,75,0.3), transparent), linear-gradient(#0f0c08, #0f0c08); }
.g7 { background-image: linear-gradient(170deg, #261e14, #090705); }
.g8 { background-image: linear-gradient(140deg, #2b2216, #0c0a07); }

/* ══════════════ AGENDA / ELYON ══════════════ */
.elyon-badge {
  display: flex; align-items: center; gap: 0.7rem; justify-content: center;
  margin: -1rem auto 2.4rem; width: fit-content;
  padding: 0.5rem 1.2rem; border: 1px solid var(--line); border-radius: 40px;
  background: rgba(201,162,75,0.05); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--text-dim);
}
.elyon-badge strong { color: var(--gold-soft); font-weight: 600; letter-spacing: 0.2em; }
.elyon-badge__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 0 rgba(232,200,116,0.6); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232,200,116,0.55); } 70% { box-shadow: 0 0 0 10px rgba(232,200,116,0); } 100% { box-shadow: 0 0 0 0 rgba(232,200,116,0); } }
/* ELYON pensando: el sello late */
.elyon-badge.is-thinking { border-color: var(--gold-soft); background: rgba(201,162,75,0.1); animation: elyonBeat 1.1s ease-in-out infinite; }
.elyon-badge.is-thinking .elyon-badge__pulse { animation: pulse 0.9s var(--ease) infinite; }
@keyframes elyonBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

/* Barra de pasos */
.booking__steps {
  display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1rem, 3vw, 2.4rem); justify-content: center;
  max-width: 1200px; margin: 0 auto 1.6rem; padding: 1rem 1.4rem;
  border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(9,7,5,0.5);
}
.booking__steps li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); transition: color 0.4s; }
.booking__steps li span { color: var(--gold); font-weight: 600; }
.booking__steps li.is-done { color: var(--text-dim); }
.booking__steps li.is-active { color: var(--gold-soft); }
.booking__steps li.is-active span { color: var(--gold-soft); }

.booking { max-width: 1200px; margin-inline: auto; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* El atributo hidden debe ocultar aunque haya display definido */
.booking__select[hidden], .booking__stage[hidden], .elyon-status[hidden] { display: none; }
/* Vista de selección: 4 columnas */
.booking__select { display: grid; grid-template-columns: 0.95fr 1.85fr 1.55fr 0.9fr; gap: clamp(0.8rem, 1.5vw, 1.3rem); align-items: start; }
/* Columna de barberos más ancha → fotos grandes, justo bajo su título */
.bk-list--barbers { margin-top: 0.3rem; }
.bk-col { border: 1px solid var(--line-strong); border-radius: 6px; background: linear-gradient(180deg, rgba(16,12,9,0.5), rgba(9,7,5,0.68)); padding: clamp(1rem, 1.6vw, 1.5rem); }
.bk-col--wide { padding: clamp(1.1rem, 1.8vw, 1.8rem); }
.bk-col__title { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.bk-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bk-list li + li .bk-service, .bk-list li + li .bk-barber { border-top: 1px solid var(--line); }
/* Separador de categoría dentro de la lista de servicios (p. ej. Color y Textura) */
.bk-cat { padding: 1.1rem 0.3rem 0.3rem; }
.bk-cat span { font-family: var(--f-display); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-soft); }
.bk-cat + li .bk-service { border-top: none; }

.bk-service { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 1rem 0.3rem; text-align: left; cursor: pointer; transition: color 0.3s, background 0.3s, padding 0.3s; border-radius: 3px; }
.bk-service .bk-name { font-family: var(--f-serif); font-size: 1.08rem; color: var(--text); }
.bk-service .bk-price { font-family: var(--f-serif); font-size: 1.08rem; font-weight: 600; color: var(--gold-soft); white-space: nowrap; }
.bk-service:hover .bk-name { color: var(--gold-soft); }
.bk-radio:checked + .bk-service { background: rgba(201,162,75,0.1); padding-inline: 0.7rem; }
.bk-radio:checked + .bk-service .bk-name { color: var(--gold-soft); }

.bk-barber { width: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.3rem; text-align: left; cursor: pointer; transition: background 0.3s; border-radius: 3px; }
.bk-barber .bk-name { font-family: var(--f-serif); font-size: 1.08rem; color: var(--text); }
.bk-barber .bk-name em { font-style: normal; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.bk-avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg,#2a2115,#100d09); background-size: cover; background-position: center; border: 1px solid var(--line-strong); font-family: var(--f-display); color: var(--gold-soft); font-size: 1.05rem; transition: all 0.3s; }
.bk-avatar::before { content: attr(data-initial); }
.bk-avatar--any { background: radial-gradient(circle, rgba(201,162,75,0.28), #100d09); }
.bk-barber:hover { background: rgba(255,255,255,0.02); }
.bk-radio:checked + .bk-barber { background: rgba(201,162,75,0.1); }
.bk-radio:checked + .bk-barber .bk-avatar { border-color: var(--gold-soft); box-shadow: 0 0 0 2px rgba(201,162,75,0.3); }
.bk-radio:checked + .bk-barber .bk-name { color: var(--gold-soft); }

/* --- Selección de barbero con FOTO (el cliente ve a su peluquero) --- */
.bk-list--barbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 1.4vw, 0.95rem); }
.bk-list--barbers li + li .bk-barber { border-top: none; } /* anula el separador de la lista vertical */
.bk-list--barbers .bk-barber {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(16,12,9,0.5), rgba(9,7,5,0.72));
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.bk-list--barbers .bk-barber:hover { transform: translateY(-3px); border-color: rgba(201,162,75,0.5); }
.bk-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0c0a08; }
.bk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.6s var(--ease); }
.bk-list--barbers .bk-barber:hover .bk-photo img { transform: scale(1.06); }
.bk-list--barbers .bk-name { font-family: var(--f-serif); font-size: clamp(0.9rem, 1.1vw, 1.04rem); color: var(--text); text-align: center; padding: 0.5rem 0.4rem 0.6rem; line-height: 1.2; }
.bk-list--barbers .bk-name em { display: block; font-style: normal; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-top: 0.2rem; }
.bk-photo--any { display: grid; place-items: center; aspect-ratio: 4 / 5; background: radial-gradient(circle at 50% 42%, rgba(201,162,75,0.22), #0c0a08 70%); }
.bk-any-star { font-family: var(--f-display); font-size: 2.6rem; color: var(--gold-soft); text-shadow: 0 0 20px rgba(201,162,75,0.55); }
/* Seleccionado: marco dorado + tilde */
.bk-list--barbers .bk-radio:checked + .bk-barber { background: linear-gradient(180deg, rgba(16,12,9,0.5), rgba(9,7,5,0.72)); border-color: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold-soft), 0 12px 32px rgba(0,0,0,0.55); }
.bk-list--barbers .bk-radio:checked + .bk-barber .bk-photo::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #0f0c08; font-size: 0.8rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.bk-list--barbers .bk-radio:checked + .bk-barber .bk-name { color: var(--gold-soft); }

/* Calendario */
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.calendar__title { font-family: var(--f-display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; color: var(--gold-soft); }
.calendar__nav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--gold-soft); font-size: 1.3rem; transition: all 0.3s; }
.calendar__nav:hover { border-color: var(--gold-soft); background: rgba(201,162,75,0.08); }
.calendar__dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.calendar__dows span { text-align: center; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-mute); text-transform: uppercase; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; font-size: 0.92rem; color: var(--text-dim); transition: all 0.3s var(--ease); border: 1px solid transparent; }
.cal-day:hover:not(.is-empty):not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.cal-day.is-empty { pointer-events: none; }
.cal-day:disabled { color: var(--text-mute); opacity: 0.3; cursor: not-allowed; }
.cal-day.is-today { color: var(--gold-soft); }
.cal-day.is-selected { background: var(--gold-grad); color: #17120a; font-weight: 600; }

/* Estado ELYON + horas */
.elyon-status { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; padding: 0.55rem 0.7rem; border-radius: 4px; background: rgba(201,162,75,0.06); border: 1px solid var(--line); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gold-soft); }
.elyon-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-soft); animation: pulse 1.6s var(--ease) infinite; flex-shrink: 0; }
.elyon-status.is-ready { color: var(--text-dim); }
.elyon-status.is-ready .elyon-status__dot { animation: none; background: #7bd88f; box-shadow: 0 0 10px rgba(123,216,143,0.6); }
.calendar__nojs { grid-column: 1 / -1; padding: 1.6rem 0.5rem; text-align: center; color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }
.calendar__nojs strong { color: var(--gold-soft); letter-spacing: 0.12em; }
/* ELYON pensando: visual de análisis */
.elyon-scan { position: relative; min-height: 210px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: rgba(201,162,75,0.03); }
.elyon-scan i { height: 32px; border-radius: 4px; border: 1px solid var(--line); background: linear-gradient(rgba(201,162,75,0.07), rgba(201,162,75,0.02)); animation: scanPulse 1.4s ease-in-out infinite; }
.elyon-scan i:nth-child(3){animation-delay:.1s} .elyon-scan i:nth-child(4){animation-delay:.2s} .elyon-scan i:nth-child(5){animation-delay:.3s}
.elyon-scan i:nth-child(6){animation-delay:.15s} .elyon-scan i:nth-child(7){animation-delay:.25s} .elyon-scan i:nth-child(8){animation-delay:.35s} .elyon-scan i:nth-child(9){animation-delay:.45s}
.elyon-scan__sweep { position: absolute; top: 0; left: -35%; width: 35%; height: 100%; padding: 0; border: none !important; background: linear-gradient(90deg, transparent, rgba(232,200,116,0.16), transparent) !important; animation: scanSweep 1.5s var(--ease) infinite !important; }
@keyframes scanPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes scanSweep { from { left: -35%; } to { left: 100%; } }

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.slots__hint { color: var(--text-mute); font-size: 0.85rem; padding: 0.8rem 0; }
.slot { padding: 0.8rem; border: 1px solid var(--line); border-radius: 4px; font-size: 0.98rem; color: var(--text); text-align: center; transition: all 0.3s var(--ease); animation: slotIn 0.5s var(--ease) both; }
@keyframes slotIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
/* La hora óptima que sugiere ELYON: destacada con luz */
.slot--opt { border-color: var(--gold-soft); background: rgba(201,162,75,0.12); animation: slotIn 0.5s var(--ease) both, optGlow 2.6s ease-in-out 0.5s infinite; }
@keyframes optGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(232,200,116,0.32), 0 0 16px rgba(232,200,116,0.16); } 50% { box-shadow: 0 0 0 1px rgba(232,200,116,0.6), 0 0 30px rgba(232,200,116,0.34); } }
.slot--opt:hover { background: rgba(201,162,75,0.2); }
.slot:hover:not(:disabled) { border-color: var(--gold-soft); color: var(--gold-soft); }
.slot.is-selected { background: var(--gold-grad); color: #17120a; font-weight: 600; border-color: transparent; }
.slot:disabled { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; color: var(--text-mute); }
.slot__opt { display: block; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--gold-soft); margin-top: 3px; }
.slot.is-selected .slot__opt { color: #3a2c10; }
.booking__continue { width: 100%; margin-top: 0.3rem; }

/* Datos + Confirmación */
.booking__stage { max-width: 760px; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 6px; background: linear-gradient(180deg, rgba(16,12,9,0.5), rgba(9,7,5,0.68)); padding: clamp(1.5rem, 3vw, 2.6rem); animation: fadeSlide 0.5s var(--ease); }
.booking__resume { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; margin-bottom: 1.6rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; color: var(--text-dim); }
.booking__resume strong { color: var(--gold-soft); font-weight: 600; }
.booking__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.booking__form label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.booking__form-full { grid-column: 1 / -1; }
.booking__form input, .booking__form textarea { font-family: var(--f-sans); font-size: 0.98rem; color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0.85rem 1rem; transition: border-color 0.3s; letter-spacing: normal; text-transform: none; }
.booking__form input:focus, .booking__form textarea:focus { outline: none; border-color: var(--gold-soft); }
.booking__form input::placeholder, .booking__form textarea::placeholder { color: var(--text-mute); }
.booking__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }

.booking__stage--confirm { text-align: center; }
.confirm { padding: 0.5rem 0; }
.confirm__seal { color: var(--gold-soft); display: inline-block; margin-bottom: 1.2rem; filter: drop-shadow(0 0 20px rgba(232,200,116,0.4)); }
.confirm__check { stroke-dasharray: 80; stroke-dashoffset: 80; }
#bookingConfirmWrap:not([hidden]) .confirm__check { animation: draw 0.9s var(--ease) forwards 0.3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confirm__title { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--text); letter-spacing: 0.03em; }
.confirm__sub { color: var(--text-dim); margin-top: 0.6rem; font-size: 1.05rem; }
.confirm__sub strong { color: var(--gold-soft); }
.confirm__summary { display: inline-grid; gap: 0.5rem; margin: 1.8rem auto; text-align: left; padding: 1.4rem 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink); min-width: min(380px, 92%); }
.confirm__summary li { display: flex; justify-content: space-between; gap: 2rem; font-size: 0.95rem; color: var(--text-dim); }
.confirm__summary li strong { color: var(--text); font-weight: 500; }
.confirm__note { color: var(--text-mute); font-size: 0.9rem; max-width: 42ch; margin: 0 auto 1.6rem; }

/* ══════════════ PRODUCTOS ══════════════ */
.products .section__title { text-transform: uppercase; letter-spacing: 0.08em; }
.products .section__sub { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(0.9rem, 1.3vw, 1.05rem); color: var(--text-dim); }
.products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.products__grid--three { display: flex; flex-wrap: wrap; justify-content: center; max-width: 960px; margin-inline: auto; }
.products__grid--three > .product-card { flex: 1 1 240px; max-width: 300px; }
.product-card { padding: clamp(1rem, 1.6vw, 1.4rem); text-align: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(180deg, rgba(14,11,8,0.5), rgba(8,7,5,0.5)); transition: border-color 0.45s, transform 0.45s var(--ease), box-shadow 0.45s; }
.product-card:hover { border-color: var(--gold-soft); transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.product-card__ph { aspect-ratio: 3/4; border-radius: var(--radius); margin-bottom: 1.3rem; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Merch: fotos de producto apaisadas (colecciones) */
.merch .product-card__ph { aspect-ratio: 3 / 2; }
.product-card__ph::after { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(232,200,116,0.28); font-size: 1.4rem; }
.p1 { background-image: linear-gradient(160deg, #1e1811, #0b0906); }
.p2 { background-image: linear-gradient(160deg, #241c12, #0b0906); }
.p3 { background-image: radial-gradient(60% 50% at 50% 40%, rgba(201,162,75,0.22), transparent), linear-gradient(#0d0a07,#0d0a07); }
.p4 { background-image: linear-gradient(160deg, #221a10, #0b0906); }
.product-card h3 { font-family: var(--f-serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 500; letter-spacing: 0.01em; color: var(--text); }
.product-card__price { color: var(--text-mute); font-family: var(--f-serif); font-size: 1.05rem; letter-spacing: 0.12em; font-weight: 500; margin-top: 0.45rem; }
.merch .product-card__price { color: var(--gold-soft); font-style: italic; letter-spacing: 0.08em; }
.merch__note { text-align: center; max-width: 640px; margin: 1.8rem auto 0; font-size: 0.86rem; letter-spacing: 0.05em; color: var(--gold-soft); opacity: 0.9; }
/* Merch: rejilla flexible centrada (los artículos sueltos quedan centrados) */
.merch .products__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.merch .product-card { flex: 1 1 230px; max-width: 300px; }
/* Escaparate de la colección completa */
.merch__showcase { max-width: 900px; margin: clamp(2rem, 5vw, 3.4rem) auto 0; display: grid; gap: 1.1rem; justify-items: center; text-align: center; }
.merch__showcase img {
  position: static; inset: auto; height: auto; object-fit: contain;
  width: 100%; border-radius: var(--radius);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.merch__showcase figcaption { font-family: var(--f-serif); font-style: italic; color: var(--text-dim); font-size: clamp(1rem, 2vw, 1.3rem); max-width: 42ch; }
.product-card__buy { margin-top: 1.1rem; width: 100%; font-size: 0.7rem; padding: 0.7rem 1rem; }
.products__cta { text-align: center; margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.products__all { letter-spacing: 0.2em; }

/* Sello "Próximamente" del merch */
.soon-badge {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem;
  padding: 0.42rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(201,162,75,0.16), rgba(201,162,75,0.05));
  font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-soft); box-shadow: 0 8px 26px rgba(201,162,75,0.14);
}
.soon-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: soonPulse 1.8s ease-in-out infinite; }
@keyframes soonPulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px rgba(201,162,75,0.6); } }
@media (prefers-reduced-motion: reduce) { .soon-badge__dot { animation: none; } }

/* ── Merch organizado por zonas (colecciones) ── */
.merch-cats { display: grid; gap: clamp(3rem, 7vw, 6rem); margin-top: clamp(2.4rem, 5vw, 4rem); }
.merch-cat { display: grid; justify-items: center; gap: clamp(1.2rem, 2.5vw, 1.8rem); text-align: center; }
.merch-cat__head { display: grid; justify-items: center; gap: 0.6rem; max-width: 640px; }
.merch-cat__eyebrow { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-soft); }
.merch-cat__title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); line-height: 1.05; }
.merch-cat__desc { color: var(--text-dim); font-size: clamp(0.92rem, 1.4vw, 1.05rem); line-height: 1.6; max-width: 52ch; }
.merch-cat__shots { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.2rem); width: 100%; max-width: 980px; }
.merch-cat__shots--two { max-width: 1120px; grid-template-columns: 1fr 1fr; }
.merch-shot { position: relative; margin: 0; cursor: zoom-in; display: grid; gap: 0.7rem; justify-items: center; }
.merch-shot img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
  transition: transform 0.6s var(--ease), box-shadow 0.6s;
}
.merch-shot:hover img { transform: translateY(-4px); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.merch-shot__cap { font-family: var(--f-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); }
.merch-cat__cta { letter-spacing: 0.12em; }
.merch-cat .gorras-all { margin-top: 0.4rem; }
@media (max-width: 720px) {
  .merch-cat__shots--two { grid-template-columns: 1fr; }
}

/* ══════════════ CONTACTO ══════════════ */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 1080px; margin-inline: auto; }
.contact__list { grid-column: 1; display: grid; gap: 1.8rem; align-content: center; position: relative; padding-right: clamp(1.5rem, 4vw, 3rem); }
.contact__mapcol { grid-column: 2; }
.contact__list::after { content: ''; position: absolute; top: 4%; bottom: 4%; right: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent); pointer-events: none; }
.contact__list li a, .contact__list li > span:not(.contact__ico):not(.contact__txt) { display: block; }
.contact__list li a, .contact__list li { display: flex; align-items: center; gap: 1.1rem; transition: transform 0.3s; }
.contact__list li a:hover { transform: translateX(4px); }
.contact__ico { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--gold-soft); }
.contact__ico svg { width: 22px; height: 22px; }
.contact__txt { display: flex; flex-direction: column; gap: 0.15rem; color: var(--text-dim); font-size: 1rem; }
.contact__txt strong { color: var(--text); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.02em; }

/* Mapa con borde + pin */
.contact__mapcol { display: grid; gap: 1.8rem; align-content: center; }
.map-frame {
  position: relative; display: block; aspect-ratio: 1144 / 1375; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,0.5);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.map-frame__img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(1) contrast(1.05) saturate(1.1); transition: filter 0.6s, transform 0.8s var(--ease); }
.map-frame::after { content: ''; position: absolute; inset: 0; background: radial-gradient(75% 75% at 50% 45%, transparent 60%, rgba(6,5,4,0.28)); }
.map-frame__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); z-index: 3; color: var(--gold-soft); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.7)); animation: pinFloat 3s ease-in-out infinite; }
@keyframes pinFloat { 0%,100% { transform: translate(-50%, -60%); } 50% { transform: translate(-50%, -72%); } }
.map-frame:hover { transform: translateY(-4px); border-color: var(--gold-soft); box-shadow: 0 34px 80px rgba(0,0,0,0.6); }
.map-frame:hover .map-frame__img { transform: scale(1.05); filter: brightness(1.12) contrast(1.08) saturate(1.15); }

.socials { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.socials__label { font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); margin-right: 0.4rem; }
.social-ico { color: var(--gold-soft); display: grid; place-items: center; transition: transform 0.35s var(--ease), color 0.35s; }
.social-ico svg { width: 26px; height: 26px; }
.social-ico:hover { transform: translateY(-3px) scale(1.1); color: var(--gold-soft); filter: drop-shadow(0 0 8px rgba(232,200,116,0.5)); }

/* ══════════════ POLÍTICAS ══════════════ */
.policies .section__title { text-transform: uppercase; letter-spacing: 0.08em; }
.policies .section__sub { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(0.9rem, 1.3vw, 1.05rem); color: var(--text-dim); }
.policy__list { max-width: 1080px; margin-inline: auto; display: grid; gap: 1.1rem; }
.policy { border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(180deg, rgba(15,12,9,0.6), rgba(8,7,5,0.6)); overflow: hidden; transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease); }
.policy:hover { border-color: var(--gold-soft); box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
.policy[open] { border-color: var(--gold-soft); }
.policy summary { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.8rem); padding: clamp(1.2rem, 2.4vw, 1.7rem) clamp(1.2rem, 2.6vw, 2rem); cursor: pointer; list-style: none; }
.policy summary::-webkit-details-marker { display: none; }
.policy__ico { flex-shrink: 0; width: clamp(52px, 5vw, 64px); height: clamp(52px, 5vw, 64px); display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line-strong); color: var(--gold-soft); background: rgba(0,0,0,0.25); transition: border-color 0.4s, color 0.4s; }
.policy__ico svg { width: 46%; height: 46%; }
.policy:hover .policy__ico, .policy[open] .policy__ico { border-color: var(--gold-soft); }
.policy__body { flex: 1; min-width: 0; }
.policy__title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.7rem); color: var(--text); letter-spacing: 0.01em; }
.policy__desc { margin-top: 0.35rem; color: var(--text-dim); font-size: clamp(0.9rem, 1.3vw, 1.02rem); line-height: 1.5; max-width: 62ch; }
.policy__chev { flex-shrink: 0; color: var(--gold-soft); width: 26px; height: 26px; display: grid; place-items: center; transition: transform 0.45s var(--ease); }
.policy__chev svg { width: 100%; height: 100%; }
.policy[open] .policy__chev { transform: rotate(90deg); }
.policy__more { padding: 0 clamp(1.2rem, 2.6vw, 2rem) clamp(1.3rem, 2.4vw, 1.7rem) clamp(1.2rem, 8vw, 6rem); }
.policy__more p { color: var(--text-dim); font-size: clamp(0.9rem, 1.3vw, 1rem); line-height: 1.7; max-width: 70ch; padding-top: 0.9rem; border-top: 1px solid var(--line); }

/* ══════════════ FOOTER ══════════════ */
.footer { position: relative; border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); margin-top: clamp(2rem, 5vw, 4rem); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5)); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem; }
.footer__brand img { width: clamp(140px, 16vw, 190px); margin-bottom: 1rem; }
.footer__brand p { font-family: var(--f-serif); font-style: italic; color: var(--text-mute); }
.footer__col h4 { font-family: var(--f-display); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.2rem; }
.footer__col a { display: block; color: var(--text-dim); font-size: 0.9rem; padding: 0.32rem 0; transition: color 0.3s, transform 0.3s; }
.footer__col a:hover { color: var(--gold-soft); transform: translateX(3px); }
.footer__hours { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-dim); font-size: 0.88rem; padding: 0.32rem 0; }
.footer__hours span:last-child { color: var(--text-mute); }
.footer__news p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1rem; }
.footer__form { display: flex; gap: 0.5rem; }
.footer__form input { flex: 1; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 1rem; color: var(--text); font-family: var(--f-sans); transition: border-color 0.3s; }
.footer__form input:focus { outline: none; border-color: var(--gold-soft); }
.footer__form .btn { padding: 0.75rem 1.1rem; font-size: 1rem; }
.footer__bar { border-top: 1px solid var(--line); padding: 1.6rem var(--gutter); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; max-width: var(--container); margin-inline: auto; }
.footer__bar p { font-size: 0.76rem; letter-spacing: 0.05em; color: var(--text-mute); }
.footer__elyon strong { color: var(--gold-soft); letter-spacing: 0.2em; }

/* ══════════════ PRÓLOGO · EL UMBRAL ══════════════ */
.intro { display: none; }
html.js .intro {
  display: grid; position: fixed; inset: 0; z-index: 200; place-items: center; overflow: hidden;
  background: #040302; transition: opacity 1.2s var(--ease), visibility 1.2s;
}
/* Sombra que hace el negro físico, no muerto */
html.js .intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 50% at 50% 52%, transparent, rgba(0,0,0,0.6));
}
/* El punto de luz: respira y sigue al cursor con inercia (JS mueve --mx/--my) */
.intro__light {
  position: absolute; top: 50%; left: 50%; width: 62vmax; height: 62vmax; z-index: 0;
  transform: translate3d(calc(-50% + var(--mx, 0px)), calc(-50% + var(--my, 0px)), 0);
  background: radial-gradient(closest-side, rgba(232,200,116,0.17), rgba(201,162,75,0.06) 42%, transparent 70%);
  animation: umbralBreath 6s ease-in-out infinite; pointer-events: none; will-change: transform;
}
@keyframes umbralBreath { 0%,100% { opacity: 0.72; } 50% { opacity: 1; } }
.intro__inner {
  position: relative; z-index: 1; text-align: center; padding: 2rem;
  display: grid; justify-items: center; gap: clamp(1.8rem, 4vw, 2.6rem);
  animation: introUp 1.8s var(--ease) both;
}
@keyframes introUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.intro__eyebrow { font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-soft); opacity: 0.85; }
.intro__enter {
  font-family: var(--f-sans); font-size: 0.82rem; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--text); background: none; cursor: pointer; padding: 0.5rem 0 0.7rem; position: relative;
  transition: color 0.6s var(--ease), letter-spacing 0.6s var(--ease);
}
.intro__enter::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px;
  background: var(--gold-grad); transform: translateX(-50%);
  transition: width 0.7s var(--ease); box-shadow: 0 0 12px rgba(232,200,116,0.6);
}
.intro__enter:hover { color: var(--gold-soft); letter-spacing: 0.58em; }
.intro__enter:hover::after { width: 100%; }
.intro__hint { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-mute); }
/* La puerta se abre: la luz florece y todo se funde */
.intro.is-opening .intro__light { animation: none; transform: translate3d(-50%,-50%,0) scale(2.7); opacity: 1; transition: transform 1.4s var(--ease), opacity 1.4s var(--ease); }
.intro.is-opening .intro__inner { opacity: 0; transition: opacity 0.5s var(--ease); }
.intro.is-hiding { opacity: 0; visibility: hidden; }
html.intro-open, html.intro-open body { overflow: hidden; }

/* ══════════════ MÚSICA (botón flotante) ══════════════ */
.music-toggle {
  position: fixed; right: clamp(0.9rem, 2.5vw, 1.6rem); bottom: clamp(0.9rem, 2.5vw, 1.6rem); z-index: 90;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold-soft);
  background: rgba(10,8,6,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45); cursor: pointer; opacity: 0.82;
  transition: border-color 0.4s, transform 0.4s var(--ease), box-shadow 0.4s, opacity 0.4s;
}
.music-toggle:hover { border-color: var(--gold-soft); transform: translateY(-2px); opacity: 1; box-shadow: 0 12px 30px rgba(201,162,75,0.24); }
.music-toggle__bars { display: flex; align-items: center; gap: 2px; height: 14px; }
.music-toggle__bars i { width: 2.5px; height: 5px; border-radius: 2px; background: currentColor; transition: height 0.3s; }
.music-toggle.is-playing .music-toggle__bars i { animation: eq 0.9s ease-in-out infinite; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(1) { animation-delay: -0.2s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(2) { animation-delay: -0.5s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(3) { animation-delay: -0.1s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(4) { animation-delay: -0.4s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 12px; } }
/* Barra diagonal (silencio) cuando NO suena */
.music-toggle__off { position: absolute; width: 30px; height: 1.5px; background: currentColor; transform: rotate(-45deg); opacity: 0.85; transition: opacity 0.3s; }
.music-toggle.is-playing .music-toggle__off { opacity: 0; }

/* ══════════════ REVEAL on scroll ══════════════ */
html.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@keyframes floatUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 980px) {
  .services__grid, .products__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .booking__select { grid-template-columns: 1fr 1fr; }
  .booking__select > .bk-col--wide,
  .booking__select > .bk-col:last-child { grid-column: 1 / -1; }
}
/* Acto I en móvil: el emblema respira algo más estrecho */
@media (max-width: 820px) {
  .hero__emblem { width: clamp(240px, 74vw, 420px); }
  .hero__beam { filter: blur(10px); }
}
/* Tablet y móvil: menú ☰ (los enlaces en línea no caben) */
@media (max-width: 1320px) {
  .nav__inner { grid-template-columns: auto 1fr auto; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 820px) {
  .contact__grid { grid-template-columns: 1fr; gap: 2.8rem; max-width: 460px; }
  .contact__list { grid-column: 1; padding-right: 0; }
  .contact__mapcol { grid-column: 1; }
  .contact__list::after { display: none; }
  .contact__list li, .contact__list li a { justify-content: flex-start; }
  .socials { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 2.4rem; }
  .split--reverse .split__media { order: 0; }
  .schedule { grid-template-columns: 1fr; }
  .pick-grid--barbers { grid-template-columns: repeat(2, 1fr); }
  .booking__steps { gap: 0.3rem 0.9rem; }
  .booking__steps li { font-size: 0.62rem; }
  .booking__steps li span { width: 22px; height: 22px; }
}
@media (max-width: 600px) {
  .service-card__name { white-space: normal; }
}
@media (max-width: 560px) {
  .booking__select { grid-template-columns: 1fr; }
  .booking__form { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .services__grid, .products__grid, .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar { flex-direction: column; }
}
/* En pantallas estrechas, los títulos grandes se reducen para que ninguna
   palabra larga (traducciones al alemán, francés, etc.) se corte por los lados. */
@media (max-width: 480px) {
  .section__title--serif { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .services .section__title, .gallery .section__title,
  .products .section__title, .policies .section__title { font-size: clamp(2.6rem, 12vw, 3.8rem); }
}

/* ══════════════ Móvil/tablet: menos espacio negro, contenido unido ══════════════
   Las alturas en svh/vh (pensadas para pantallas anchas) creaban huecos negros
   enormes en móvil. Aquí se compactan para que el contenido fluya conectado. */
@media (max-width: 820px) {
  :root { --sec-pad: clamp(3rem, 7vw, 5rem); }
  .credo__phrase { min-height: 36svh; padding-block: 3vh; }
  .expo__declare { min-height: 44svh; padding-block: 6vh; }
  .expo__gallery { gap: clamp(2rem, 4vh, 3.5rem); padding-block: 1vh 4vh; }
  .trust__quotes { padding-block: clamp(1.6rem, 4vh, 3rem); }
  .trust__intro, .trust__close { padding-block: clamp(1rem, 3vh, 2.4rem); }
  .trust { padding-block: clamp(2.6rem, 6vh, 5rem); }
  .legado__intro, .legado__stat, .legado__piece { padding-block: clamp(1.2rem, 3vh, 2.2rem); }
  .hero__stage { gap: clamp(1.2rem, 3vw, 2rem); }
}
@media (max-width: 560px) {
  .credo__phrase { min-height: 30svh; padding-block: 2.4vh; }
  .expo__declare { min-height: 38svh; padding-block: 5vh; }
  .trust__quotes { gap: 1.6rem; }
}

/* ══════════════ Reduce motion ══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.1ms !important; scroll-behavior: auto !important; }
  /* Se conserva SOLO el fundido de aparición (opacidad, sin desplazamiento ni blur)
     para que el contenido siga apareciendo al deslizar también con "Reducir movimiento"
     activado en el móvil, respetando la ausencia de movimiento brusco. */
  html.js .reveal { opacity: 0; transform: none !important; transition: opacity 0.8s ease !important; }
  html.js .reveal.is-visible { opacity: 1 !important; }
  html.js .credo__text { opacity: 0; filter: none !important; transform: none !important; transition: opacity 1s ease !important; }
  html.js .credo__phrase.in .credo__text { opacity: 1 !important; }
}

/* ══════════════ Selector de idioma (banderas) ══════════════ */
.lang { position: relative; display: inline-flex; }
.lang__btn { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(20,15,10,0.5); border: 1px solid var(--line-strong); color: var(--gold-soft); border-radius: 999px; padding: 0.35rem 0.62rem; font-size: 1rem; cursor: pointer; transition: border-color 0.3s, background 0.3s; line-height: 1; }
.lang__btn:hover { border-color: var(--gold-soft); }
.lang__caret { font-size: 0.58rem; color: var(--text-mute); }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 176px; background: rgba(12,9,7,0.98); border: 1px solid var(--line-strong); border-radius: 12px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 300; box-shadow: 0 18px 44px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lang.open .lang__menu { display: flex; }
.lang__menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; color: var(--text); font-family: var(--f-sans); font-size: 0.92rem; padding: 0.5rem 0.7rem; border-radius: 8px; cursor: pointer; text-align: left; transition: background 0.2s, color 0.2s; }
.lang__menu button:hover { background: rgba(255,255,255,0.05); }
.lang__menu button.is-active { color: var(--gold-soft); background: rgba(201,162,75,0.12); }
.lang__flag { font-size: 1.15rem; line-height: 1; }

/* Árabe · de derecha a izquierda */
[dir="rtl"] .lang__menu { right: auto; left: 0; }
[dir="rtl"] .lang__menu button, [dir="rtl"] .booking__form label, [dir="rtl"] .bk-service,
[dir="rtl"] .contact__list li, [dir="rtl"] .contact__list li a, [dir="rtl"] .price-list__name { text-align: right; }
[dir="rtl"] .bk-service { flex-direction: row-reverse; }
[dir="rtl"] .booking__form input, [dir="rtl"] .booking__form textarea { text-align: right; direction: rtl; }
/* Mini-bandera de Cataluña (la senyera; el emoji no existe en la mayoría de móviles) */
.flag-cat { display: inline-block; width: 1.15em; height: 0.82em; border-radius: 2px; vertical-align: -0.1em; box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
  background: repeating-linear-gradient(180deg, #FCDD09 0, #FCDD09 0.164em, #DA121A 0.164em, #DA121A 0.328em); }

/* Valoración de Google en la sección de opiniones */
.trust__rating { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.2rem; font-family: var(--f-serif); font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--text); }
.trust__stars { color: var(--gold); letter-spacing: 2px; }
.trust__rating strong { color: var(--gold-soft); font-weight: 700; }
.trust__reviews { color: var(--text-mute); font-size: 0.82em; }
[dir="rtl"] .trust__rating { direction: ltr; }

/* ══════════════ VISOR DE IMÁGENES (ampliar galería al clic) ══════════════ */
.lightbox {
  position: fixed; inset: 0; z-index: 240;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2rem; padding: clamp(1.2rem, 4vw, 3rem);
  background: rgba(4,3,2,0.92); backdrop-filter: blur(8px);
  animation: lbFade 0.35s var(--ease);
}
/* El atributo hidden debe ganar aunque haya display:flex */
.lightbox[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
  max-width: min(92vw, 1100px); max-height: 82vh; width: auto; height: auto;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7);
  animation: lbZoom 0.4s var(--ease);
}
@keyframes lbZoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.lightbox__cap {
  font-family: var(--f-display); font-size: 0.78rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-soft); text-align: center;
}
.lightbox__close {
  position: absolute; top: clamp(0.8rem, 2.5vw, 1.8rem); right: clamp(0.8rem, 2.5vw, 1.8rem);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(12,9,6,0.7);
  color: var(--text); font-size: 1.7rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.lightbox__close:hover { border-color: var(--gold-soft); color: var(--gold-soft); transform: rotate(90deg); }

/* ══════════════ Modificaciones cliente (asesoramiento de imagen) ══════════════ */
/* Nuestra Historia: dos fotos del local apiladas */
.split__media--stack { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.frame--barberia-sec { aspect-ratio: 16 / 10; opacity: 0.96; }
/* Foto del local (fachada de noche 4:3): se ve entero el rótulo y los barber poles */
.frame--local { aspect-ratio: 4 / 3; }

/* Tarjeta de servicio destacada (flagship) + insignia "Exclusivo · Roberto" */
.service-card--flag { border-color: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold-soft), 0 22px 55px rgba(0,0,0,0.5); }
.service-card--flag:hover { box-shadow: 0 0 0 1px var(--gold), 0 26px 60px rgba(0,0,0,0.6); }
/* La foto de asesoramiento (retrato) se encuadra hacia la escena del barbero */
.service-card--flag .media-img { object-position: center 20%; }
.service-card__badge {
  display: inline-block; margin-bottom: 0.5rem;
  font-family: var(--f-display); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #0e0b07; background: linear-gradient(180deg, #f3dd9f, #c9a24b); border-radius: 999px;
  padding: 0.3rem 0.8rem;
}
/* Nombre de servicio largo: permite dos líneas y reduce tamaño */
.service-card__name--sm { white-space: normal; font-size: clamp(0.98rem, 1.2vw, 1.15rem); line-height: 1.2; text-transform: uppercase; }

/* Servicio exclusivo oculto en la agenda hasta que corresponda el barbero */
.bk-list li[hidden] { display: none; }

/* ══════════════ Clic con el León ══════════════ */
/* Al hacer clic, el emblema del León florece y se desvanece (decorativo). */
.lion-click {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  background: url('../img/lion-head.webp') no-repeat center / contain;
  filter: drop-shadow(0 0 8px rgba(201,162,75,0.5));
  opacity: 0; will-change: transform, opacity;
  animation: lionPop 0.7s var(--ease) forwards;
}
@keyframes lionPop {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  35%  { opacity: 0.9; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .lion-click { display: none; } }

/* ══════════════ ASISTENTE (chatbot) ══════════════ */
.chatbot { position: fixed; right: clamp(0.9rem, 2.5vw, 1.6rem); bottom: clamp(0.9rem, 2.5vw, 1.6rem); z-index: 130; }
.chatbot__fab {
  width: 58px; height: 58px; border-radius: 50%; cursor: pointer; position: relative;
  border: 1px solid var(--gold-soft); background: radial-gradient(circle at 50% 35%, #1b1409, #0b0806);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,162,75,0.25);
  display: grid; place-items: center; transition: transform 0.3s var(--ease), box-shadow 0.3s;
  margin-left: auto;
}
.chatbot__fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 18px rgba(201,162,75,0.35); }
.chatbot__fab-ico { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(201,162,75,0.4)); }
.chatbot__fab-badge { position: absolute; top: 4px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: #25d366; border: 2px solid #0b0806; animation: soonPulse 1.8s ease-in-out infinite; }
.chatbot.is-open .chatbot__fab { transform: scale(0.92); opacity: 0.85; }

.chatbot__panel {
  position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 2rem));
  height: min(72vh, 540px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,14,10,0.98), rgba(9,7,5,0.98));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.65); animation: chatIn 0.35s var(--ease);
  transform-origin: bottom right;
}
@keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
.chatbot__panel[hidden] { display: none; }
.chatbot__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(201,162,75,0.08), transparent); }
.chatbot__brand { display: flex; align-items: center; gap: 0.5rem; font-family: var(--f-display); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--gold-soft); }
.chatbot__dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 8px #25d366; }
.chatbot__close { background: none; border: 0; color: var(--text-mute); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; transition: color 0.3s; }
.chatbot__close:hover { color: var(--gold-soft); }
.chatbot__body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.chatbot__msg { display: flex; }
.chatbot__msg--user { justify-content: flex-end; }
.chatbot__bubble {
  max-width: 85%; padding: 0.65rem 0.85rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.45;
  white-space: pre-line; color: var(--text);
}
.chatbot__msg--bot .chatbot__bubble { background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chatbot__msg--user .chatbot__bubble { background: linear-gradient(180deg, rgba(201,162,75,0.22), rgba(201,162,75,0.12)); border: 1px solid var(--gold-soft); color: #f6ecd6; border-bottom-right-radius: 4px; }
.chatbot__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chatbot__action {
  font-family: var(--f-display); font-size: 0.72rem; letter-spacing: 0.04em; cursor: pointer;
  padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(201,162,75,0.16), rgba(201,162,75,0.05)); color: var(--gold-soft);
  transition: background 0.3s, transform 0.2s;
}
.chatbot__action:hover { background: rgba(201,162,75,0.28); transform: translateY(-1px); }
.chatbot__msg--bot { flex-direction: column; align-items: flex-start; }
.chatbot__typing { display: inline-flex; gap: 4px; align-items: center; }
.chatbot__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); opacity: 0.5; animation: chatDot 1s infinite; }
.chatbot__typing i:nth-child(2) { animation-delay: 0.15s; } .chatbot__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.chatbot__quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.6rem; }
.chatbot__chip {
  font-size: 0.74rem; cursor: pointer; padding: 0.4rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--text-dim);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.chatbot__chip:hover { border-color: var(--gold-soft); color: var(--gold-soft); background: rgba(201,162,75,0.08); }
.chatbot__form { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem; border-top: 1px solid var(--line); }
.chatbot__input { flex: 1; background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 0.95rem; color: var(--text); font-family: var(--f-sans); font-size: 0.9rem; }
.chatbot__input:focus { outline: none; border-color: var(--gold-soft); }
.chatbot__send { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(180deg, #f3dd9f, #c9a24b); color: #0e0b07; font-size: 1rem; display: grid; place-items: center; transition: transform 0.2s; }
.chatbot__send:hover { transform: scale(1.08); }
@media (max-width: 480px) {
  .chatbot__panel { width: calc(100vw - 1.4rem); height: min(70vh, 520px); }
}

/* El botón de música sube para no chocar con el asistente */
.music-toggle { bottom: calc(clamp(0.9rem, 2.5vw, 1.6rem) + 70px) !important; }

/* Aviso de señal en el paso de datos de la reserva */
.booking__deposit { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.1rem 0 0; padding: 0.85rem 1.05rem; border: 1px solid var(--gold-soft); border-radius: 10px; background: linear-gradient(180deg, rgba(201,162,75,0.1), rgba(201,162,75,0.03)); font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }
.booking__deposit-badge { flex-shrink: 0; font-family: var(--f-display); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #0e0b07; background: linear-gradient(180deg, #f3dd9f, #c9a24b); border-radius: 999px; padding: 0.32rem 0.7rem; }