/* =====================================================================
   ESTILOS — 4 temas: barberia, salon, spa, unas ([data-theme] en <html>)
   Cada tema define su paleta, tipografía y forma. Los colores están
   verificados para cumplir contraste de lectura (WCAG AA).
   ===================================================================== */

/* Barbería — carbón cálido + latón: tradición, oficio, masculino premium */
:root,
[data-theme="barberia"] {
  --bg: #0e0d0b;
  --bg-alt: #161410;
  --surface: #1d1a15;
  --surface-2: #27231c;
  --text: #f1ebe0;
  --muted: #a69c8c;
  --line: rgba(241, 235, 224, .12);
  --accent: #c9a45c;
  --accent-2: #e4c991;
  --on-accent: #15110a;
  --mesh-1: #4a3517;
  --mesh-2: #4a1a16;
  --veil: linear-gradient(180deg, rgba(14,13,11,.35) 0%, rgba(14,13,11,.55) 55%, #0e0d0b 100%);
  --hero-tint: rgba(14,13,11,.25);
  --shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  --radius: 4px;
  --radius-lg: 10px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 400;
  --ds: 1;
  color-scheme: dark;
}

/* Salón — marfil + baya/rosa empolvado + champagne: femenino, editorial */
[data-theme="salon"] {
  --bg: #faf6f1;
  --bg-alt: #f3e9e1;
  --surface: #ffffff;
  --surface-2: #f7eee8;
  --text: #2a1b20;
  --muted: #6f5c62;
  --line: rgba(42, 27, 32, .12);
  --accent: #9b4560;
  --accent-2: #c98a9b;
  --on-accent: #ffffff;
  --mesh-1: #f0cfd7;
  --mesh-2: #f3e1cb;
  --veil: linear-gradient(180deg, rgba(250,246,241,.1) 0%, rgba(250,246,241,.55) 55%, #faf6f1 100%);
  --hero-tint: rgba(42,27,32,.15);
  --shadow: 0 30px 60px -30px rgba(90,40,55,.35);
  --radius: 999px;
  --radius-lg: 22px;
  --font-display: "Playfair Display", Georgia, serif;
  --display-weight: 400;
  --ds: .94;
  color-scheme: light;
}

/* Spa — salvia + arena: calma, naturaleza, bienestar */
[data-theme="spa"] {
  --bg: #f1f2ec;
  --bg-alt: #e6eadf;
  --surface: #fbfcf8;
  --surface-2: #e2e7da;
  --text: #1d2822;
  --muted: #56645b;
  --line: rgba(29, 40, 34, .12);
  --accent: #4a6752;
  --accent-2: #7f9b85;
  --on-accent: #ffffff;
  --mesh-1: #cddbca;
  --mesh-2: #ebe2d1;
  --veil: linear-gradient(180deg, rgba(241,242,236,.15) 0%, rgba(241,242,236,.6) 55%, #f1f2ec 100%);
  --hero-tint: rgba(29,40,34,.12);
  --shadow: 0 30px 60px -30px rgba(31,60,40,.3);
  --radius: 14px;
  --radius-lg: 28px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --display-weight: 500;
  --ds: 1.12;
  color-scheme: light;
}

/* Nail bar — negro + nude rosado: moderno, chic, de tendencia */
[data-theme="unas"] {
  --bg: #131012;
  --bg-alt: #1b171a;
  --surface: #221c20;
  --surface-2: #2d252a;
  --text: #f7ede9;
  --muted: #b5a3a5;
  --line: rgba(247, 237, 233, .12);
  --accent: #eaa8b6;
  --accent-2: #f7cdd6;
  --on-accent: #24121a;
  --mesh-1: #4a2333;
  --mesh-2: #2e1f2c;
  --veil: linear-gradient(180deg, rgba(19,16,18,.3) 0%, rgba(19,16,18,.55) 55%, #131012 100%);
  --hero-tint: rgba(19,16,18,.3);
  --shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  --radius: 999px;
  --radius-lg: 18px;
  --font-display: "Instrument Serif", Georgia, serif;
  --display-weight: 400;
  --ds: 1.1;
  color-scheme: dark;
}
[data-theme="unas"] .hero__veil { background: var(--veil), linear-gradient(90deg, rgba(19,16,18,.85), transparent 75%); }
[data-theme="unas"] .visit__map iframe { filter: grayscale(1) invert(.92) contrast(.9); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Anclas y reserva quedan debajo del header fijo */
main section[id], .marquee { scroll-margin-top: 76px; }
.booking { scroll-margin-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
em { font-style: italic; color: var(--accent); }
::selection { background: var(--accent); color: var(--on-accent); }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 32px); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--accent); color: var(--on-accent); padding: 8px 14px; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Tipografía ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.eyebrow .line { width: 32px; height: 1px; background: currentColor; display: inline-block; }
.section__title, .hero__title, .cta-band h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: -.02em;
  line-height: 1.04;
  margin: 0;
  font-variation-settings: "opsz" 144;
}
.section__title { font-size: calc(clamp(2.2rem, 5vw, 3.8rem) * var(--ds)); }
.section__sub { color: var(--muted); max-width: 52ch; margin: 16px 0 0; }

/* ---------- Botones ---------- */
.btn {
  --pad: 14px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--pad); border-radius: var(--radius);
  font-weight: 600; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s, color .25s, border-color .25s, box-shadow .25s, opacity .2s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--accent); }
.btn--ghost { border-color: var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { --pad: 10px 18px; font-size: 14px; }
.btn--lg { --pad: 18px 30px; font-size: 16px; }
.btn:disabled { opacity: .35; pointer-events: none; }
.link-arrow { color: var(--accent); font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
.nav__links a { position: relative; opacity: .8; transition: opacity .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s; }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; width: 40px; height: 40px; position: relative; }
.nav__burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: currentColor; transition: transform .3s, top .3s; }
.nav__burger span:first-child { top: 15px; } .nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }
.nav__mobile { display: none; }

.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.status-pill.is-open i { background: #4cc38a; box-shadow: 0 0 0 0 rgba(76,195,138,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(76,195,138,0); } 100% { box-shadow: 0 0 0 0 rgba(76,195,138,0); } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: clamp(100px, 15vh, 140px) 0 clamp(40px, 7vh, 80px); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: -6% 0 0; z-index: -2; overflow: hidden;
  background: radial-gradient(45% 55% at 78% 28%, var(--mesh-1), transparent 70%), radial-gradient(40% 50% at 12% 85%, var(--mesh-2), transparent 70%), var(--bg); }
.hero__media::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(30% 35% at 60% 60%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-12%, -8%) scale(1.15); } }
.hero__media img { position: relative; opacity: 0; transition: opacity 1.2s ease; }
.hero__media img.is-loaded { opacity: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: heroZoom 2.4s cubic-bezier(.2,.8,.2,1) forwards; will-change: transform; }
.hero__media img.is-broken { display: none; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__veil { position: absolute; inset: 0; z-index: -1; background: var(--veil), linear-gradient(90deg, var(--hero-tint), transparent 70%); }
[data-theme="barberia"] .hero__veil { background: var(--veil), linear-gradient(90deg, rgba(15,14,12,.85), transparent 75%); }
.hero__title { font-size: calc(clamp(2.6rem, min(8vw, 10.5vh), 7.5rem) * var(--ds)); max-width: 14ch; margin-bottom: clamp(14px, 2.6vh, 26px); }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w > span { display: inline-block; transform: translateY(105%); animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { to { transform: none; } }
.hero__lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); max-width: 52ch; color: color-mix(in srgb, var(--text) 82%, transparent); margin: 0 0 clamp(20px, 3.6vh, 36px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__eyebrow, .hero__lead, .hero__cta, .hero__stats { animation: fadeUp .9s .5s cubic-bezier(.2,.8,.2,1) both; }
.hero__lead { animation-delay: .7s; } .hero__cta { animation-delay: .85s; } .hero__stats { animation-delay: 1s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero__stats { list-style: none; padding: 0; margin: clamp(22px, 4.5vh, 56px) 0 0; display: flex; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.hero__stats strong { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, min(4vw, 5.5vh), 2.8rem); font-weight: 400; line-height: 1; color: var(--accent); }
.hero__stats span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.hero__scroll { position: absolute; right: 32px; bottom: 40px; width: 26px; height: 42px; border: 1px solid var(--line); border-radius: 20px; }
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); animation: scrollDot 1.8s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

.next-slot { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 16px 10px 14px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeUp .9s 1.1s cubic-bezier(.2,.8,.2,1) both; transition: border-color .25s, transform .25s; }
.next-slot[hidden] { display: none; }
.next-slot:hover { border-color: var(--accent); transform: translateY(-2px); }
.next-slot i { width: 8px; height: 8px; border-radius: 50%; background: #3fb87a; box-shadow: 0 0 0 0 rgba(63,184,122,.6); animation: pulse 2s infinite; }
.next-slot strong { color: var(--accent); }
.next-slot__s { display: none; }
.next-slot > span[aria-hidden] { color: var(--accent); transition: transform .25s; }
.next-slot:hover > span[aria-hidden] { transform: translateX(3px); }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; background: var(--bg-alt); }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); font-style: italic; padding: 0 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.marquee__track span::after { content: "✦"; font-style: normal; color: var(--accent); font-size: .6em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.section { padding: clamp(80px, 12vw, 150px) 0; position: relative; }
.section--alt { background: var(--bg-alt); }
.section__head { margin-bottom: clamp(40px, 6vw, 70px); }
.section__head--center { text-align: center; }
.section__head--center .section__sub { margin-inline: auto; }
.section__head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

/* Reveal (con red de seguridad: si el JS falla, todo queda visible) */
.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* ---------- Servicios / precios ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.tab { padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; transition: all .25s; }
.tab:hover { border-color: var(--accent); }
.tab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.price-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 64px; }
.price {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%;
  position: relative; transition: padding .3s;
  animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) both;
}
.price::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.price:hover::before { transform: scaleX(1); }
.price:hover { padding-left: 10px; }
.price__name { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price__tag { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.price__value { font-family: var(--font-display); font-size: 1.45rem; color: var(--accent); white-space: nowrap; }
.price__desc { color: var(--muted); font-size: 14px; }
.price__dur { font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.price__book { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--accent); opacity: 0; transform: translateY(-4px); transition: all .3s; height: 0; }
.price:hover .price__book, .price:focus-visible .price__book { opacity: 1; transform: none; height: auto; }

/* ---------- Promos ---------- */
.section--tight { padding-top: 0; }
.promos { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; }
.promo { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform .4s, border-color .4s; }
.promo:hover { transform: translateY(-6px); border-color: var(--accent); }
.promo--feat { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface) 70%); }
.promo--feat::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.promo__tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.promo h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.15; }
.promo p { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
.promo__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.promo__foot strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--accent); }
.promo__foot a { font-size: 14px; font-weight: 600; }
.promo__foot a:hover { color: var(--accent); }

/* ---------- Nosotros ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.about__media { position: relative; margin: 0; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }
.about__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.about__media:hover img { transform: scale(1.04); }
.about__badge { position: absolute; left: 20px; bottom: 20px; background: var(--bg); padding: 18px 22px; border-radius: calc(var(--radius-lg) * .7); display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow); max-width: 260px; }
.about__badge strong { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; color: var(--accent); line-height: 1; }
.about__badge span { font-size: 13px; line-height: 1.35; color: var(--muted); }
.about__text p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; }
.about__text .section__title { margin-bottom: 26px; }
.features { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; }
.features li { display: flex; gap: 16px; align-items: flex-start; }
.features svg { flex: 0 0 auto; width: 42px; height: 42px; padding: 10px; border-radius: 50%; border: 1px solid var(--line); fill: var(--accent); color: var(--accent); }
.features strong { display: block; }
.features span { color: var(--muted); font-size: 14px; }

/* ---------- Galería ---------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 120px; gap: 14px; }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); cursor: zoom-in; padding: 0; }
.gallery { grid-auto-flow: dense; }
.gallery__item:nth-child(6n+1) { grid-column: span 7; grid-row: span 4; }
.gallery__item:nth-child(6n+2), .gallery__item:nth-child(6n+3) { grid-column: span 5; grid-row: span 2; }
.gallery__item:nth-child(6n+4), .gallery__item:nth-child(6n+5), .gallery__item:nth-child(6n+6) { grid-column: span 4; grid-row: span 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .5s; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after { content: attr(data-alt); position: absolute; left: 14px; bottom: 12px; font-size: 13px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(8px); transition: all .35s; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.gallery__item:hover::after { opacity: 1; transform: none; }
.img-fallback { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; height: 100%; overflow: hidden; color: var(--accent);
  background: radial-gradient(70% 60% at 30% 20%, color-mix(in srgb, var(--mesh-1) 85%, transparent), transparent 70%), radial-gradient(60% 60% at 80% 90%, color-mix(in srgb, var(--mesh-2) 85%, transparent), transparent 70%), var(--surface-2); }
.img-fallback::after { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: calc(var(--radius-lg) * .6); pointer-events: none; }
.img-fallback__mono { font-family: var(--font-display); font-style: italic; font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1; opacity: .85; }
.img-fallback small { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.fade-img { opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .5s; }
.fade-img.is-loaded { opacity: 1; }

/* ---------- Equipo ---------- */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.member { position: relative; }
.member__photo .img-fallback small { white-space: nowrap; }
.member__photo { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); margin-bottom: 18px; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .5s; }
.member:hover .member__photo img { transform: scale(1.05); filter: grayscale(0); }
.member h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0; }
.member p { margin: 2px 0 12px; color: var(--muted); font-size: 14px; }
.member button { font-size: 14px; font-weight: 600; color: var(--accent); }

/* ---------- Reserva ---------- */
.booking-section { background:
  radial-gradient(60% 50% at 10% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
  radial-gradient(50% 40% at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), var(--bg); }
.booking { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius-lg) * 1.4); box-shadow: var(--shadow); overflow: hidden; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.steps li { display: flex; align-items: center; gap: 10px; padding: 20px 24px; font-size: 14px; font-weight: 600; color: var(--muted); position: relative; transition: color .3s; }
.steps li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.steps li b { font-weight: inherit; white-space: nowrap; }
.steps li span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; transition: all .3s; flex: 0 0 auto; }
.steps li.is-active, .steps li.is-done { color: var(--text); }
.steps li.is-active::after, .steps li.is-done::after { transform: scaleX(1); }
.steps li.is-active span, .steps li.is-done span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.booking__body { display: grid; grid-template-columns: 1fr 340px; }
.booking__main { padding: clamp(24px, 4vw, 44px); min-height: 460px; }
.booking.is-finished .booking__body { grid-template-columns: 1fr; }
.pane { display: none; }
.pane.is-active { display: block; animation: fadeUp .5s cubic-bezier(.2,.8,.2,1); }
.pane__title { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; margin: 0 0 4px; }
.pane__hint { color: var(--muted); margin: 0 0 26px; font-size: 14px; }

.svc-pick { display: grid; gap: 10px; }
.svc-group { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }
.svc-group:first-child { margin-top: 0; }
.opt {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: calc(var(--radius-lg) * .7);
  background: var(--bg); transition: border-color .2s, background-color .2s, transform .2s;
}
[data-theme="salon"] .opt { background: var(--surface-2); }
.opt:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.opt.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.opt__check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; transition: all .2s; }
.opt.is-selected .opt__check { background: var(--accent); border-color: var(--accent); }
.opt__check svg { width: 14px; height: 14px; fill: none; stroke: var(--on-accent); stroke-width: 3; opacity: 0; }
.opt.is-selected .opt__check svg { opacity: 1; }
.opt__body { flex: 1; min-width: 0; }
.opt__body strong { display: block; font-weight: 600; }
.opt__body small { color: var(--muted); font-size: 13px; }
.opt__price { font-weight: 700; white-space: nowrap; }

.pro-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pro { flex-direction: column; text-align: center; padding: 22px 14px; }
.pro__avatar { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.8rem; color: var(--accent); border: 2px solid transparent; transition: border-color .2s; }
.pro.is-selected .pro__avatar { border-color: var(--accent); }
.pro__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pro small { display: block; color: var(--muted); font-size: 12px; }

.datetime { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__head strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
.cal__head button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); font-size: 18px; transition: all .2s; }
.cal__head button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal__head button:disabled { opacity: .25; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); text-align: center; padding: 6px 0; letter-spacing: .08em; }
.cal__day { aspect-ratio: 1; border-radius: 10px; font-size: 14px; font-weight: 600; position: relative; transition: all .2s; }
.cal__day:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.cal__day:disabled { color: var(--muted); opacity: .35; cursor: default; text-decoration: line-through; text-decoration-color: transparent; }
.cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.cal__day.is-selected, .cal__day.is-selected:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: 0 6px 16px -6px var(--accent); }
.cal__day.is-selected::after { background: var(--on-accent); }
.slots__label { font-weight: 600; margin: 6px 0 14px; }
.slots__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.slot { padding: 11px 0; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 600; transition: all .2s; font-variant-numeric: tabular-nums; }
.slot:hover { border-color: var(--accent); color: var(--accent); }
.slot.is-selected, .slot.is-selected:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.slot.is-busy { display: grid; gap: 1px; padding: 6px 0; cursor: not-allowed; color: var(--muted); border-style: dashed; background: color-mix(in srgb, var(--text) 4%, transparent); opacity: .75; }
.slot.is-busy:hover { border-color: var(--line); color: var(--muted); }
.slot.is-busy s { text-decoration-thickness: 1.5px; }
.slot.is-busy small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.slots__empty a { display: block; margin-top: 10px; color: var(--accent); font-weight: 700; }
.slots__empty { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 20px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; font-weight: 400; font-size: 15px; transition: border-color .2s, box-shadow .2s; resize: vertical;
}
[data-theme="salon"] .field input, [data-theme="salon"] .field textarea { background: var(--surface-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.has-error input { border-color: #d65a5a; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); width: 18px; height: 18px; }

.summary { border-left: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg) 40%, var(--surface)); }
.summary h4 { margin: 0 0 18px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.summary__list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; font-size: 14px; }
.summary__list li { display: flex; justify-content: space-between; gap: 12px; }
.summary__meta { margin: 0; display: grid; gap: 10px; padding: 18px 0; border-block: 1px solid var(--line); font-size: 14px; }
.summary__meta div { display: flex; justify-content: space-between; gap: 12px; }
.summary__meta dt { color: var(--muted); }
.summary__meta dd { margin: 0; text-align: right; font-weight: 600; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; }
.summary__total strong { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--accent); }
.summary__sena { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--muted); margin: -8px 0 16px; }
.summary__sena strong { color: var(--text); }
.sena-box { text-align: left; border: 1px solid var(--line); border-radius: calc(var(--radius-lg) * .8); padding: 20px; margin: 0 0 22px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); display: grid; gap: 12px; }
.sena-box p { margin: 0; font-size: 14px; }
.sena-box__title strong { color: var(--accent); }
.sena-box__alias { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--accent); }
.sena-box__alias span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.sena-box__alias strong { flex: 1; font-size: 16px; letter-spacing: .02em; word-break: break-all; }
.sena-box__alias button { font-size: 13px; font-weight: 700; color: var(--accent); }
.sena-box__note { color: var(--muted); font-size: 12.5px !important; }
.summary__nav { display: flex; gap: 10px; margin-top: auto; }
.summary__nav .btn { --pad: 14px 18px; }
.summary__nav #nextBtn { flex: 1; min-width: 0; }
.summary__note { font-size: 12px; color: var(--muted); text-align: center; margin: 14px 0 0; }

.success { text-align: center; max-width: 480px; margin: 20px auto; }
.success__icon svg { width: 84px; height: 84px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 20px; }
.success__icon circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .8s ease-out forwards; }
.success__icon path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: draw .5s .6s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success__code { display: inline-block; padding: 10px 18px; border: 1px dashed var(--accent); border-radius: 10px; margin-bottom: 26px; font-size: 14px; letter-spacing: .06em; }
.success__actions { display: grid; gap: 10px; margin-bottom: 20px; }

.my-bookings { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 22px; background: var(--surface); }
.my-bookings summary { cursor: pointer; font-weight: 600; }
.my-bookings ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.my-bookings li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.my-bookings li button { color: #d65a5a; font-size: 13px; font-weight: 600; }

/* ---------- Testimonios ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote { margin: 0; padding: 34px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; gap: 20px; transition: transform .4s, border-color .4s; }
.quote:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.quote__stars { color: var(--accent); letter-spacing: 3px; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; font-weight: 400; flex: 1; }
.quote figcaption { font-size: 14px; color: var(--muted); font-weight: 600; }

/* ---------- Horarios ---------- */
.visit { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: stretch; }
.hours { width: 100%; border-collapse: collapse; margin: 34px 0; font-size: 15px; }
.hours td { padding: 14px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today td { color: var(--accent); font-weight: 700; }
.hours tr.is-today td:first-child::after { content: " · hoy"; font-weight: 500; font-size: 13px; }
.hours .closed { color: var(--muted); }
.contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact li { display: flex; gap: 14px; align-items: center; }
.contact svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; flex: 0 0 auto; }
.contact a:hover { color: var(--accent); }
.visit__map { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; border: 1px solid var(--line);
  background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--surface-2); }
.visit__map::before { content: ""; position: absolute; left: 50%; top: 45%; width: 46px; height: 46px; transform: translate(-50%, -50%); opacity: .5;
  background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.visit__map iframe { position: relative; }
.map-go { position: absolute; left: 16px; bottom: 16px; z-index: 2; box-shadow: var(--shadow); }
.visit__map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
[data-theme="barberia"] .visit__map iframe { filter: grayscale(1) invert(.92) contrast(.9); }

.pay { margin-top: 28px; }
.pay > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pay-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pay-list li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.terms { margin: 0; font-size: 12.5px; color: var(--muted); }
.terms a, .footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.terms a:hover, .footer__legal a:hover { color: var(--accent); }
.footer__legal { display: inline-flex; gap: 16px; }
.legal { border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100% - 32px)); width: 100%; color: var(--text); }
.legal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.legal__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.legal__card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.legal__card h2 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.7rem; }
.legal__card header button { font-size: 26px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.legal__body p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.legal__body strong { color: var(--text); }
.legal__card > .btn { justify-self: end; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font-family: var(--font-display); font-size: 1.35rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: 26px; font-weight: 300; color: var(--accent); transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--muted); max-width: 62ch; animation: fadeUp .4s; }

/* ---------- CTA band ---------- */
.cta-band { padding: clamp(80px, 10vw, 130px) 0; background: var(--accent); color: var(--on-accent); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 16ch; }
.cta-band em { color: inherit; opacity: .75; }
.cta-band .btn--primary { background: var(--on-accent); color: var(--accent); }
.cta-band .btn--primary:hover { box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }

/* ---------- Footer ---------- */
.footer { padding: 80px 0 30px; border-top: 1px solid var(--line); }
.footer__inner { display: flex; justify-content: space-between; gap: 50px; flex-wrap: wrap; padding-bottom: 50px; }
.footer__tag { color: var(--muted); max-width: 32ch; margin: 10px 0 0; }
.footer__cols { display: flex; gap: clamp(40px, 6vw, 90px); flex-wrap: wrap; }
.footer__cols h5 { margin: 0 0 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.footer__cols a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Flotantes ---------- */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .3s, opacity .3s, visibility .3s, bottom .4s cubic-bezier(.2,.8,.2,1); }
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.6); }
.wa-float:hover { transform: scale(1.08) rotate(-6deg); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.mobile-cta { display: none; }
.demo { position: fixed; left: 22px; bottom: 22px; z-index: 60; font-size: 13px; }
.demo__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; }
.demo__toggle svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2; }
.demo__form { display: none; position: absolute; left: 0; bottom: calc(100% + 10px); width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow-y: auto; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(0,0,0,.55); gap: 12px; }
.demo.is-open .demo__form { display: grid; animation: fadeUp .3s cubic-bezier(.2,.8,.2,1); }
.demo__head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.demo__x { font-size: 24px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); }
.demo__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.demo__modes button { padding: 8px; border-radius: 10px; font-weight: 700; font-size: 12px; }
.demo__modes button.is-active { background: var(--accent); color: var(--on-accent); }
.demo__field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.demo__field input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.demo__field input:focus { outline: none; border-color: var(--accent); }
.demo__row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.demo__field--color input { padding: 2px; height: 40px; cursor: pointer; }
.demo__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.demo__copy { width: 100%; border-color: var(--accent); color: var(--accent); }
.demo__note { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }
.seller { color: var(--accent); font-weight: 600; }
.demo__row--2 { grid-template-columns: 1fr auto; align-items: end; }
.demo__check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding-bottom: 10px; cursor: pointer; }
.demo__check input { accent-color: var(--accent); width: 18px; height: 18px; }
.demo__links { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.demo__links a { font-size: 12px; font-weight: 700; color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; visibility: hidden; pointer-events: none; background: var(--text); color: var(--bg); padding: 14px 22px; border-radius: 12px; font-size: 14px; font-weight: 600; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility .3s; max-width: calc(100% - 32px); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,8,.92); display: grid; place-items: center; padding: 40px; animation: fadeIn .3s; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1100px, 100%); max-height: 86vh; object-fit: contain; border-radius: 8px; }
.lightbox button { position: absolute; color: #fff; font-size: 40px; line-height: 1; width: 56px; height: 56px; border-radius: 50%; transition: background .2s; }
.lightbox button:hover { background: rgba(255,255,255,.12); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .nav__links, .status-pill { display: none !important; }
  .nav__burger { display: block; }
  .nav__actions .btn { display: none; }
  .nav__mobile { display: grid; gap: 4px; padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1), padding .4s; background: var(--bg); }
  .nav__mobile a { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.4rem; }
  .nav__mobile .btn { margin-top: 14px; border: 0; font-family: var(--font-body); font-size: 15px; }
  .nav.is-open { background: var(--bg); }
  .nav.is-open .nav__mobile { max-height: 520px; padding: 6px 16px 24px; }
  .booking__body { grid-template-columns: 1fr; }
  .summary { border-left: 0; border-top: 1px solid var(--line); }
  .datetime { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .promos { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .price-list { grid-template-columns: 1fr; }
  .about, .visit { grid-template-columns: 1fr; }
  .about__media { aspect-ratio: 4/3; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 10px; }
  .gallery__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery__item:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; }
  /* Pasos en mobile: solo números + nombre del paso activo, en una línea */
  .steps { display: flex; }
  .steps li { flex: 0 0 auto; padding: 14px 10px; justify-content: center; gap: 0; font-size: 13px; }
  .steps li b { display: none; }
  .steps li.is-active { flex: 1 1 auto; gap: 8px; }
  .steps li.is-active b { display: inline; }
  .steps li:not(.is-active) { flex: 1 1 0; }
  /* Profesionales en filas compactas */
  .team { grid-template-columns: 1fr; gap: 10px; }
  .member { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: calc(var(--radius-lg) * .8); background: var(--surface); }
  .member__photo { grid-row: 1 / span 3; width: 56px; height: 56px; aspect-ratio: 1; border-radius: 50%; margin: 0; position: relative; }
  .member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
  .member__photo .img-fallback::after, .member__photo .img-fallback small { display: none; }
  .member__photo .img-fallback__mono { font-size: 1.5rem; }
  .member h3 { font-size: 1.2rem; line-height: 1.2; }
  .member p { margin: 0; font-size: 13px; }
  .member button { justify-self: start; margin-top: 4px; font-size: 13px; }
  .pro-pick { grid-template-columns: 1fr; gap: 8px; }
  .pro { flex-direction: row; text-align: left; padding: 10px 14px; gap: 14px; }
  .pro__avatar { width: 56px; height: 56px; font-size: 1.4rem; }
  .form { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  .mobile-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  .mobile-cta.is-on { transform: none; }
  .mobile-cta .btn { width: 100%; }
  /* WhatsApp: más chico y, cuando aparece la barra de reservar, se ubica arriba de ella */
  .wa-float { bottom: calc(16px + env(safe-area-inset-bottom)); right: 14px; width: 48px; height: 48px; }
  .wa-float svg { width: 26px; height: 26px; }
  .has-cta .wa-float { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .demo { left: 0; bottom: auto; top: 46%; }
  .demo__toggle span { display: none; }
  .demo__toggle { padding: 12px 10px 12px 8px; border-radius: 0 12px 12px 0; border-left: 0; }
  .demo__form { position: fixed; left: 12px; right: 12px; bottom: 84px; top: auto; width: auto; max-height: 72vh; }
  .footer { padding-bottom: 100px; }
}
@media (max-width: 480px) {
  /* Portada compacta: título, botones y cifras entran en la primera pantalla */
  .hero { padding-top: 92px; }
  .hero__title { font-size: calc(clamp(2.3rem, 11vw, 3rem) * var(--ds)); margin-bottom: 12px; }
  .hero__eyebrow { margin-bottom: 12px; font-size: 11px; }
  .hero__lead { font-size: .98rem; line-height: 1.5; margin-bottom: 18px; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { --pad: 14px 16px; font-size: 15px; }
  .next-slot { margin-top: 14px; padding: 8px 14px; font-size: 13px; }
  .hero__stats { margin-top: 18px; gap: 18px; }
  .hero__stats strong { font-size: 1.6rem; }
  .hero__stats span { font-size: 11px; letter-spacing: .08em; }
  .next-slot__l { display: none; }
  .next-slot__s { display: inline; }
  .gallery__item:not(:nth-child(3n+1)) .img-fallback small { display: none; }
  .hero { padding-bottom: 60px; }
  .hero__cta .btn { flex: 1 1 0; }
  .slots__grid { grid-template-columns: repeat(3, 1fr); }
  .price { grid-template-columns: 1fr auto; }
  .price__name, .price__value { font-size: 1.25rem; }
}

/* ---------- Entrada de cine ----------
   Filmación del rubro a pantalla completa (assets/intro/: vertical para el
   celular, horizontal para la computadora). El nombre del local aparece sobre
   la imagen como el título de una película, en texto real, con una entrada
   propia de cada rubro. Después la tapa sube como un telón. Un toque la saltea. */
.intro { --intro-bg: #050504; --intro-acc: #d8b56c; }
[data-theme="salon"] .intro { --intro-acc: #e7b9bb; }
[data-theme="spa"] .intro { --intro-acc: #d9c79c; }
[data-theme="unas"] .intro { --intro-acc: #f0b6c3; }
/* Mientras corre la entrada la página está oculta, no solo tapada: ningún
   navegador llega a mostrarla antes de tiempo. */
html.intro-on, html.intro-on body { overflow: hidden; background: var(--intro-bg) !important; }
html.intro-on body > :not(.intro) { visibility: hidden; }
html.intro-on { --intro-bg: #050504; }
/* La portada espera detrás del telón y arranca cuando se levanta. */
html.intro-on .hero *, html.intro-on .hero *::before { animation-play-state: paused !important; }

.intro { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: var(--intro-bg); color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; clip-path: inset(0 0 0 0); }
.intro:not(.is-go) * { animation-play-state: paused !important; }
.intro.is-out { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.76,0,.24,1); }
.intro__film, .intro__film video, .intro__film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__film { transition: transform 1s cubic-bezier(.76,0,.24,1); }
.intro.is-out .intro__film { transform: translateY(-12vh) scale(1.04); }
/* Sombra de cine abajo para que el título se lea sobre cualquier toma. */
.intro__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 22%, transparent 48%, rgba(0,0,0,.72) 100%); }

.intro__title { position: absolute; left: 0; right: 0; bottom: max(13vh, calc(env(safe-area-inset-bottom) + 72px)); padding: 0 7vw;
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.6vh, 16px); text-align: center; }
.intro__name { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 400); line-height: 1.05;
  font-size: clamp(34px, 9.6vw, 80px); letter-spacing: .02em; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; opacity: 0; }
.intro__line { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-family: var(--font-body); font-size: clamp(8.5px, 2.2vw, 11.5px);
  font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--intro-acc); opacity: 0;
  animation: introFade 1.1s ease 2.05s forwards; }
.intro__line::before, .intro__line::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
@keyframes introFade { to { opacity: 1; } }

/* Cada rubro entra a su manera. */
/* Barbería: el nombre se enciende y lo cruza un brillo de metal pulido. */
[data-theme="barberia"] .intro__name { background: linear-gradient(100deg, #fff 0 38%, var(--intro-acc) 46%, #fff8e6 50%, var(--intro-acc) 54%, #fff 62%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: introOn 1.2s ease 1.15s forwards, introMetal 1.6s cubic-bezier(.4,0,.2,1) 1.5s forwards; }
@keyframes introMetal { to { background-position: 0 0; } }
/* Salón: aparece de izquierda a derecha, como un paño de seda que se corre. */
[data-theme="salon"] .intro__name { font-style: italic; -webkit-mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 260% 100% no-repeat;
  mask: linear-gradient(90deg, #000 40%, transparent 60%) 100% 0 / 260% 100% no-repeat; opacity: 1;
  animation: introSilk 1.8s cubic-bezier(.45,0,.2,1) 1.1s forwards; }
@keyframes introSilk { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; letter-spacing: .08em; } to { -webkit-mask-position: 0 0; mask-position: 0 0; letter-spacing: .02em; } }
/* Spa: se forma desde una bruma, despacio. */
[data-theme="spa"] .intro__name { animation: introMist 2.2s cubic-bezier(.2,.6,.2,1) 1.05s forwards; }
@keyframes introMist { from { opacity: 0; filter: blur(18px); transform: scale(1.06); letter-spacing: .12em; } to { opacity: 1; filter: blur(0); transform: none; letter-spacing: .02em; } }
/* Uñas: un trazo de esmalte que se pinta y queda con brillo. */
[data-theme="unas"] .intro__name { background: linear-gradient(100deg, #fff 0 40%, #fff 46%, #ffe3ea 49%, #fff 52%, #fff 100%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 240% 100% no-repeat; mask: linear-gradient(90deg, #000 45%, transparent 55%) 100% 0 / 240% 100% no-repeat;
  opacity: 1; animation: introPaint 1.3s cubic-bezier(.6,0,.3,1) 1.15s forwards, introMetal 1.1s ease 2.3s forwards; }
@keyframes introPaint { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes introOn { from { opacity: 0; letter-spacing: .1em; } to { opacity: 1; letter-spacing: .02em; } }
/* Turno confirmado: el mismo lenguaje de la entrada, más breve. La última
   imagen de la filmación, desenfocada, y el título con la entrada del rubro. */
.intro--done { animation: introFade .45s ease both; opacity: 0; }
.intro--done .intro__film img { filter: blur(18px) brightness(.72); transform: scale(1.12); }
.intro--done .intro__shade { background: radial-gradient(70% 60% at 50% 60%, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.intro--done .intro__title { top: 50%; bottom: auto; transform: translateY(-50%); }
.intro--done .intro__kicker { margin: 0; font-family: var(--font-body); font-size: clamp(9.5px, 2.4vw, 11.5px); font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--intro-acc); opacity: 0; animation: introFade .7s ease .15s forwards; }
.intro--done .intro__line { animation-delay: .9s; letter-spacing: .22em; }
[data-theme="barberia"] .intro--done .intro__name { animation-delay: .3s, .6s; }
[data-theme="salon"] .intro--done .intro__name { animation-delay: .25s; animation-duration: 1.3s; }
[data-theme="spa"] .intro--done .intro__name { animation-delay: .2s; animation-duration: 1.4s; }
[data-theme="unas"] .intro--done .intro__name { animation-delay: .3s, 1.25s; }
.intro--done.is-out { clip-path: inset(0 0 100% 0); }

/* Si el sistema pide menos movimiento: la misma entrada, solo con fundidos. */
@media (prefers-reduced-motion: reduce) {
  .intro__name { animation: none !important; filter: none !important; transform: none !important; -webkit-mask: none !important; mask: none !important;
    opacity: 0 !important; transition: opacity 1.4s ease 1.1s; }
  .intro.is-go .intro__name { opacity: 1 !important; }
  .intro--done .intro__name { transition-delay: .3s; }
  .intro.is-out { clip-path: none; opacity: 0; transition: opacity .8s ease; }
  .intro.is-out .intro__film { transform: none; }
}

/* Zona táctil cómoda (44 px) en los links chicos, sin cambiar cómo se ven. */
.promo__foot a, .member button, .contact a, .footer__cols a, .footer__legal a, .link-arrow { position: relative; }
.promo__foot a::after, .member button::after, .contact a::after, .footer__cols a::after, .footer__legal a::after, .link-arrow::after {
  content: ""; position: absolute; inset: -10px -6px; }