/* =============================================================
   AURA — Hair, Nails & Beauty Studio
   Proyecto conceptual de Prestigio Local.
   Hoja de estilos AUTOCONTENIDA: no depende de styles.css ni
   service.css (evita cualquier riesgo sobre el resto del sitio).
   Todas las clases usan el prefijo ah- para no poder colisionar
   nunca con el sistema global.
   ============================================================= */

:root {
  --ah-bg: #F2EBE0;
  --ah-bg-soft: #EAE1D2;
  --ah-ink: #1D1D1D;
  --ah-ink-soft: #45413E;
  --ah-mute: #7C766B;
  --ah-line: rgba(29,29,29,.12);
  --ah-cream: #F2EBE0;
  --ah-cream-mute: rgba(242,235,224,.66);
  --ah-accent: #7A2E35;
  --ah-accent-bright: #C4838A;

  --ah-font-display: "Archivo", "Inter", sans-serif;
  --ah-font-serif: "Fraunces", "Archivo", serif;
  --ah-font-body: "Inter", sans-serif;
  --ah-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ah-ease: cubic-bezier(.16,1,.3,1);
  --ah-container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ah-bg); color: var(--ah-ink);
  font-family: var(--ah-font-body); line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ah-ink); color: var(--ah-cream); padding: .8rem 1.2rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--ah-accent-bright); outline-offset: 3px; }

/* ---------- Reveal genérico (fade + rise) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ah-ease), transform .8s var(--ah-ease); }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header mínimo ---------- */
.ah-nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem clamp(1.2rem, 4vw, 2.6rem);
  background: transparent;
  transition: background .4s var(--ah-ease), padding .4s var(--ah-ease), box-shadow .4s var(--ah-ease);
}
.ah-nav.is-scrolled { background: rgba(29,29,29,.82); backdrop-filter: blur(10px); padding-block: .8rem; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.ah-nav-home { display: inline-flex; align-items: center; opacity: .92; transition: opacity .3s; }
.ah-nav-home:hover { opacity: 1; }
.ah-nav-home img { height: 22px; width: auto; }
.ah-nav-tag {
  font-family: var(--ah-font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ah-cream-mute);
}

/* ---------- ESCENA 1 · HERO ---------- */
.ah-hero {
  position: relative; min-height: 100svh; min-height: 100vh;
  display: flex; align-items: flex-end; overflow: clip;
  background: var(--ah-ink);
}
.ah-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ah-hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 76% 48%;
  filter: saturate(1.06) contrast(1.05) brightness(.98);
  transform: scale(1.1);
  will-change: transform;
}
.ah-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(182deg, rgba(12,10,9,.5) 0%, rgba(12,10,9,.06) 30%, rgba(12,10,9,.22) 60%, rgba(10,8,7,.88) 100%),
    linear-gradient(90deg, rgba(10,8,7,.42) 0%, rgba(10,8,7,0) 42%);
}
.ah-hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 min(22vw, 260px) rgba(8,6,5,.45);
}
.ah-hero-inner {
  position: relative; z-index: 1; width: 100%;
  padding: clamp(6rem, 12vw, 8rem) clamp(1.2rem, 5vw, 3rem) clamp(4.5rem, 9vw, 6rem);
  max-width: var(--ah-container); margin-inline: auto;
  color: var(--ah-cream);
}
.ah-hero-kicker {
  font-family: var(--ah-font-mono); font-size: .74rem; letter-spacing: .14em;
  color: var(--ah-accent-bright); margin-bottom: 1.1rem;
  opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ah-ease), transform .7s var(--ah-ease);
}
.ah-hero-kicker.is-revealed { opacity: 1; transform: none; }
.ah-hero-title {
  font-family: var(--ah-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 6.4rem); line-height: .96; letter-spacing: -.015em;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.ah-line-mask { display: block; overflow: hidden; }
.ah-line {
  display: block; transform: translateY(105%); opacity: 0;
  transition: transform 1s var(--ah-ease), opacity 1s var(--ah-ease);
}
.ah-line.is-revealed { transform: translateY(0); opacity: 1; }
.ah-line-accent { font-family: var(--ah-font-serif); font-style: italic; font-weight: 500; text-transform: none; color: var(--ah-accent-bright); }
@media (prefers-reduced-motion: reduce) {
  .ah-line, .ah-hero-kicker { transform: none; opacity: 1; transition: none; }
}
.ah-hero-sub {
  font-family: var(--ah-font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ah-cream-mute);
  max-width: 34ch; margin-bottom: 2rem;
  opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ah-ease) .1s, transform .7s var(--ah-ease) .1s;
}
.ah-hero-sub.is-revealed { opacity: 1; transform: none; }
.ah-hero-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ah-font-display); font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  background: var(--ah-cream); color: var(--ah-ink);
  padding: 1rem 1.6rem; border-radius: 999px;
  transition: transform .35s var(--ah-ease), background .35s;
  opacity: 0; transform: translateY(12px);
}
.ah-hero-cta.is-revealed { opacity: 1; transform: none; transition: opacity .7s var(--ah-ease) .2s, transform .7s var(--ah-ease) .2s, background .35s; }
.ah-hero-cta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; transition: transform .35s var(--ah-ease); }
.ah-hero-cta:hover { background: var(--ah-accent-bright); }
.ah-hero-cta:hover svg { transform: translateX(4px); }

.ah-scroll {
  position: absolute; z-index: 1; right: clamp(1.2rem, 4vw, 2.6rem); bottom: 1.6rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--ah-cream-mute); font-family: var(--ah-font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
}
.ah-scroll svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; fill: none; animation: ah-bob 1.8s ease-in-out infinite; }
@keyframes ah-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .ah-scroll svg { animation: none; } }

/* ---------- Kickers / H2 compartidos ---------- */
.ah-kicker {
  font-family: var(--ah-font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ah-accent); margin-bottom: 1rem;
}
.ah-kicker-dark { color: var(--ah-accent); }
.ah-h2 {
  font-family: var(--ah-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem); line-height: 1.04; letter-spacing: -.01em;
  color: var(--ah-ink); max-width: 18ch;
}
.ah-h2-light { color: var(--ah-cream); }

/* ---------- ESCENA 2 · Antes de reservar ---------- */
.ah-scene2 { padding-top: clamp(5rem, 10vw, 7rem); background: var(--ah-bg); }
.ah-scene2-head { max-width: var(--ah-container); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3rem); margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.ah-sticky { max-width: var(--ah-container); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3rem); }
.ah-sticky[data-ah-pinned] { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ah-sticky-visual { position: relative; align-self: start; }
/* OJO: en desktop NO se usa position:sticky aquí — GSAP ScrollTrigger
   controla el pin él mismo (pin:true en aura.js) mediante position:fixed
   inline. Combinar sticky (CSS) + pin (GSAP) en el mismo elemento es un
   conflicto conocido de ScrollTrigger que impide que el pin se aplique
   de verdad. position:relative dejar el control 100% a GSAP. */
.ah-sticky[data-ah-pinned] .ah-sticky-visual { position: relative; }
.ah-sticky-frame {
  position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(11,11,12,.4);
  background: var(--ah-ink);
}
/* Las 4 imágenes viven apiladas en el mismo marco y se funden entre sí
   (crossfade real, no solo texto) — la que tiene .is-active se ve, con
   un ligerísimo zoom tipo Ken Burns mientras está activa. */
.ah-sticky-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s var(--ah-ease), transform 3.2s var(--ah-ease);
}
.ah-sticky-img.is-active { opacity: 1; transform: scale(1.13); z-index: 1; }
.ah-sticky-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(200deg, rgba(10,8,7,.06) 0%, rgba(10,8,7,.5) 100%);
}
/* Capa de reseña: solo visible durante el paso 3 ("Lee lo que dicen tus clientas") */
.ah-sticky-review {
  position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.3rem; z-index: 3;
  background: rgba(242,235,224,.96); color: var(--ah-ink); border-radius: 12px; padding: 1rem 1.2rem;
  opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ah-ease), transform .55s var(--ah-ease);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5);
}
.ah-sticky-review.is-active { opacity: 1; transform: translateY(0); }
.ah-sticky-review-stars { display: block; color: #E3A340; font-size: .7rem; letter-spacing: 2px; margin-bottom: .4rem; }
.ah-sticky-review p { font-family: var(--ah-font-serif); font-style: italic; font-size: .88rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  .ah-sticky-img { transition: opacity .3s linear; transform: scale(1.06) !important; }
  .ah-sticky-img.is-active { transform: scale(1.06) !important; }
}
.ah-sticky-badge {
  position: absolute; left: -.9rem; bottom: -.9rem; width: 68px; height: 68px; border-radius: 50%;
  background: var(--ah-ink); color: var(--ah-cream); display: grid; place-items: center;
  box-shadow: 0 18px 34px -12px rgba(11,11,12,.5);
}
.ah-sticky-badge-num { font-family: var(--ah-font-mono); font-size: .82rem; letter-spacing: .04em; }

.ah-sticky-steps { display: flex; flex-direction: column; gap: 3.2rem; padding-block: .5rem 2rem; }
.ah-step { max-width: 42ch; opacity: .32; transition: opacity .5s var(--ah-ease); }
.ah-step.is-active { opacity: 1; }
.ah-step-eyebrow { display: block; font-family: var(--ah-font-mono); font-size: .72rem; color: var(--ah-accent); margin-bottom: .5rem; }
.ah-step h3 { font-family: var(--ah-font-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.7rem); text-transform: uppercase; margin-bottom: .5rem; }
.ah-step p { color: var(--ah-ink-soft); font-size: .96rem; }

@media (max-width: 900px) {
  .ah-sticky { display: block; }
  /* En móvil no hay pin por scroll-jacking (riesgo de romper el scroll
     nativo): el marco usa sticky nativo del navegador y sigue
     cambiando de imagen real por cada paso, vía IntersectionObserver
     (ver aura.js) — conserva el "cambia de verdad" sin la complejidad
     del pin de escritorio. */
  .ah-sticky-visual { position: sticky; top: 5.5rem; margin-bottom: -1.5rem; z-index: 1; }
  .ah-sticky-frame { aspect-ratio: 4/3; max-height: 46vh; }
  .ah-step { opacity: .4; transition: opacity .4s var(--ah-ease); background: var(--ah-bg); padding-top: 2.4rem; }
  .ah-step.is-active { opacity: 1; }
  .ah-sticky-steps { gap: 0; padding-block: 0 2rem; }
}

/* ---------- Galería editorial ---------- */
.ah-gallery-wrap { margin-top: clamp(3rem, 7vw, 5rem); }
.ah-gallery {
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 clamp(1.2rem, 5vw, 3rem) 1.5rem;
  scrollbar-width: none;
}
.ah-gallery::-webkit-scrollbar { display: none; }
.ah-gcard {
  position: relative; flex: 0 0 clamp(240px, 62vw, 320px); scroll-snap-align: start;
  border-radius: 16px; overflow: hidden; aspect-ratio: 3/4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.3rem; color: var(--ah-cream);
  background: var(--ah-ink);
  transition: transform .5s var(--ah-ease);
}
.ah-gcard:hover { transform: translateY(-6px); }
.ah-gcard:hover img { transform: scale(1.06); }
.ah-gcard img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform .8s var(--ah-ease);
}
.ah-gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,10,9,.82) 100%); z-index: 1; }
.ah-gcard-label { position: relative; z-index: 2; font-family: var(--ah-font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--ah-cream-mute); margin-bottom: .4rem; }
.ah-gcard-text { position: relative; z-index: 2; font-family: var(--ah-font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.3; }

/* ---------- ESCENA 3 · Reputación (fondo oscuro) ---------- */
.ah-scene3 { position: relative; background: var(--ah-ink); padding-top: clamp(5rem, 10vw, 7rem); padding-bottom: clamp(5rem, 10vw, 7rem); }
.ah-scene3-seam {
  position: absolute; top: -1px; left: 0; right: 0; height: 140px; translate: 0 -100%;
  background: linear-gradient(180deg, var(--ah-bg) 0%, var(--ah-ink) 100%);
  pointer-events: none;
}
.ah-scene3-inner { max-width: var(--ah-container); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3rem); }
.ah-scene3-text { font-family: var(--ah-font-serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ah-cream-mute); max-width: 46ch; margin-top: 1.4rem; }

.ah-scene3-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: clamp(3rem, 6vw, 4rem); }
@media (min-width: 860px) { .ah-scene3-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.ah-gbiz {
  background: var(--ah-cream); color: var(--ah-ink); border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.ah-gbiz-tag { display: block; font-family: var(--ah-font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ah-mute); margin-bottom: 1rem; }
.ah-gbiz-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.ah-gbiz-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ah-ink); color: var(--ah-cream); display: grid; place-items: center; font-family: var(--ah-font-display); font-weight: 800; flex-shrink: 0; }
.ah-gbiz-name { display: block; font-family: var(--ah-font-display); font-weight: 800; font-size: .95rem; }
.ah-gbiz-cat { display: block; font-family: var(--ah-font-mono); font-size: .66rem; color: var(--ah-mute); }
.ah-gbiz-rating { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ah-gbiz-stars { display: flex; gap: 2px; }
.ah-gbiz-stars svg { width: 14px; height: 14px; fill: #E3A340; }
.ah-gbiz-rating strong { font-family: var(--ah-font-display); font-size: .9rem; }
.ah-gbiz-count { font-family: var(--ah-font-mono); font-size: .72rem; color: var(--ah-mute); }
.ah-gbiz-row { display: flex; justify-content: space-between; padding-block: .5rem; border-top: 1px solid var(--ah-line); font-size: .84rem; }
.ah-gbiz-check { font-family: var(--ah-font-mono); font-size: .68rem; color: var(--ah-accent); font-weight: 600; }
.ah-gbiz-review { font-family: var(--ah-font-serif); font-style: italic; font-size: .92rem; color: var(--ah-ink-soft); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ah-line); }

.ah-nfc { color: var(--ah-cream); padding-top: 2.5rem; }
.ah-nfc-visual { display: flex; align-items: center; gap: 1.4rem; perspective: 900px; margin-bottom: 1.1rem; }
.ah-nfc-caption { font-family: var(--ah-font-serif); font-style: italic; font-size: .95rem; color: var(--ah-cream-mute); max-width: 30ch; }
.ah-nfc-card {
  width: 108px; height: 68px; border-radius: 10px; background: linear-gradient(155deg, #fff 0%, #EFE7DA 100%);
  color: var(--ah-ink); padding: .7rem .8rem; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,.55);
  transform: rotateY(-18deg) rotateX(6deg);
  transition: transform .5s var(--ah-ease);
}
.ah-nfc:hover .ah-nfc-card { transform: rotateY(-8deg) rotateX(3deg) scale(1.03); }
.ah-nfc-card-stars { color: #E3A340; font-size: .62rem; letter-spacing: 1px; }
.ah-nfc-card-line { display: block; width: 70%; height: 5px; border-radius: 3px; background: var(--ah-line); }
.ah-nfc-wave { width: 30px; height: 30px; stroke: var(--ah-accent-bright); stroke-width: 1.6; fill: none; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ah-nfc-card { transition: none; } }

/* ---------- ESCENA 4 · Revelación final / CTA ---------- */
.ah-final { background: var(--ah-bg); padding-block: clamp(6rem, 12vw, 9rem); position: relative; overflow: clip; }
.ah-final-inner { max-width: 880px; margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3rem); text-align: center; }
.ah-final-title {
  font-family: var(--ah-font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.01em;
  margin-block: 1rem 1.6rem;
}
.ah-final .ah-line-mask { display: flex; justify-content: center; }
.ah-final-text {
  font-family: var(--ah-font-serif); font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--ah-ink-soft); max-width: 48ch; margin-inline: auto; margin-bottom: 2.2rem;
}
.ah-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 1.8rem; }
.ah-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ah-font-display); font-weight: 700; font-size: .9rem;
  padding: 1rem 1.7rem; border-radius: 999px; transition: transform .35s var(--ah-ease), background .35s, color .35s;
}
.ah-btn-primary { background: var(--ah-accent); color: var(--ah-cream); }
.ah-btn-primary:hover { background: var(--ah-ink); transform: translateY(-2px); }
.ah-btn-ghost { border: 1.5px solid var(--ah-ink); color: var(--ah-ink); }
.ah-btn-ghost:hover { background: var(--ah-ink); color: var(--ah-cream); }
.ah-final-back { font-family: var(--ah-font-mono); font-size: .76rem; }
.ah-final-back a { color: var(--ah-mute); border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.ah-final-back a:hover { color: var(--ah-ink); border-color: currentColor; }

/* ---------- Footer mínimo ---------- */
.ah-footer {
  background: var(--ah-ink); color: var(--ah-cream-mute);
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  padding: 2.4rem 1.2rem;
}
.ah-footer-word { font-family: var(--ah-font-display); font-weight: 800; font-size: .85rem; letter-spacing: .1em; color: var(--ah-cream); }
.ah-footer-line { font-size: .8rem; max-width: 46ch; }
.ah-footer-copy { font-family: var(--ah-font-mono); font-size: .7rem; opacity: .7; }

/* ---------- Utilidad: contenedor de ancho consistente ---------- */
@media (max-width: 480px) {
  .ah-hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .ah-h2 { max-width: 14ch; }
}