/* =============================================================
   LIBRA ESTHETIC CENTER - styles.css
   1. Tokens · 2. Reset · 3. Utilidades · 4. Componentes
   5. Secciones · 6. Efectos · 7. Responsive · 8. Reduced motion
   ============================================================= */

/* ========== 1. Tokens ========== */
:root {
  --bg: #0b111f;
  --bg-2: #0e1626;
  --bg-3: #121c31;
  --ink: #f3eee4;
  --muted: rgba(243, 238, 228, 0.64);
  --gold: #d2a15c;
  --gold-soft: #e6c186;
  --on-gold: #0a0e18; /* texto sobre el dorado sólido: 8.3:1 */
  --line: rgba(210, 161, 92, 0.18);
  --line-2: rgba(243, 238, 228, 0.1);

  --serif: "Marcellus", "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --gap: clamp(16px, 3vw, 40px);
  --maxw: 1360px;
  --nav-h: 76px;
  --radius: 18px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --shadow: 0 24px 60px rgba(4, 8, 18, 0.55);
}

/* ========== 2. Reset ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

/* Lenis: sólo aplica cuando la librería arrancó (agrega estas clases sola).
   Sin Lenis (reduced-motion o script caído), manda el scroll-behavior de arriba. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; } /* frenado durante el splash */
body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  transition: background-color 0.9s var(--ease-soft);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; text-wrap: balance; line-height: 1.06; letter-spacing: 0.005em; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: 0.6rem 1rem; background: var(--gold); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* ========== 3. Utilidades ========== */
/* El kicker en mayúsculas tracked se sacó de las tres secciones que lo tenían
   (Servicios / Sobre Libra / Reservas): sólo repetía en chico lo que dice el h2 de
   abajo, y el cliente marcó "landing de SaaS" como anti-referencia. Queda uno solo,
   .hero__kicker, que sí dice algo que no está en ningún otro lado. */
.h2 { font-size: clamp(32px, 4.6vw, 62px); margin-bottom: clamp(14px, 2vw, 24px); }

/* Área táctil de ~44px sin mover el diseño: el link mide lo que mide y el ::after
   agranda sólo la zona que recibe el dedo. Mismo truco que .contact__map-link, aplicado
   a los links que se medían por debajo de 44px de alto (contacto 30px, footer 23px,
   marca del nav 31px, links del nav 35px). */
a.contact__value, .footer__links a, .footer__made a, .nav__brand, .nav__links a { position: relative; }
a.contact__value::after { content: ""; position: absolute; inset: -8px -12px; }
.footer__links a::after { content: ""; position: absolute; inset: -11px -12px; }
.footer__made a::after { content: ""; position: absolute; inset: -13px -12px; }
.nav__brand::after { content: ""; position: absolute; inset: -7px -10px; }
/* En los links del nav el ::after ya es el subrayado animado, así que el área táctil
   va en el ::before para no pisarlo. */
.nav__links a::before { content: ""; position: absolute; inset: -5px -10px; }

/* Reveal on scroll: solo se oculta si el JS arrancó (html.js-ready) */
.js-ready .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(34px);
}
.reveal { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal[data-split] { opacity: 1; transform: none; }

/* ========== 4. Componentes ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 28px; border-radius: 999px;
  font-weight: 500; font-size: 15px; letter-spacing: 0.04em;
  transition: transform 0.35s var(--ease-out), background 0.35s var(--ease-out),
              color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.985); }
/* Reservando: entre el tap y la pestaña de AgendaPro hay medio segundo largo en mobile.
   Sin ninguna señal la clienta vuelve a tocar y abre dos pestañas. El pointer-events
   lo bloquea y la opacidad avisa que algo está pasando. */
.btn.is-booking { opacity: 0.6; pointer-events: none; }
.btn--solid { background: var(--gold); color: var(--on-gold); }
.btn--solid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.btn--solid:hover::after { transform: translateX(120%); }
.btn--solid:hover { background: var(--gold-soft); }
.btn--ghost {
  border: 1px solid var(--line); color: var(--ink);
  background: rgba(243, 238, 228, 0.02);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }

/* ========== 5. Secciones ========== */

/* ----- Splash ----- */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
  animation: splashSafety 0.01s 4.5s forwards; /* red de seguridad si el JS falla */
}
.splash.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes splashSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.splash__inner { display: grid; place-items: center; gap: 14px; }
.splash__scales { width: 44px; height: 44px; color: var(--gold); opacity: 0.9; }
.splash__word {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.42em; text-indent: 0.42em; color: var(--ink);
}
.splash__line {
  width: 120px; height: 1px; background: var(--line); position: relative; overflow: hidden;
}
.splash__line::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  animation: splashLine 1.6s var(--ease-soft) forwards;
}
@keyframes splashLine { to { transform: scaleX(1); } }

/* ----- Nav ----- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background 0.45s var(--ease-soft), border-color 0.45s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(9, 14, 26, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-2);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--nav-h);
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__scales { width: 30px; height: 30px; color: var(--gold); flex: 0 0 auto; }
.nav__name {
  font-family: var(--serif); font-size: 19px; letter-spacing: 0.18em;
  display: flex; flex-direction: column; line-height: 1.1;
}
.nav__name em {
  font-family: var(--sans); font-style: normal; font-size: 9.5px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
}
.nav__links { display: none; gap: clamp(18px, 2.4vw, 36px); }
.nav__links a {
  font-size: 14px; letter-spacing: 0.06em; color: var(--muted);
  position: relative; padding: 6px 0;
  transition: color 0.3s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__cta { display: none; padding: 11px 22px; font-size: 14px; }
.nav__burger {
  width: 44px; height: 44px; display: grid; place-items: center; gap: 0;
  position: relative;
}
.nav__burger span {
  position: absolute; width: 24px; height: 1.6px; background: var(--ink);
  transition: transform 0.4s var(--ease-out), top 0.4s;
}
.nav__burger span:first-child { transform: translateY(-4px); }
.nav__burger span:last-child { transform: translateY(4px); }
body.menu-open .nav__burger span:first-child { transform: rotate(45deg); }
body.menu-open .nav__burger span:last-child { transform: rotate(-45deg); }

/* ----- Menú mobile ----- */
.menu {
  position: fixed; inset: 0; z-index: 850;
  background: rgba(8, 12, 23, 0.97);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px;
  transform: translateY(-102%);
  transition: transform 0.6s var(--ease-out);
  padding: calc(var(--nav-h) + 20px) var(--pad) 40px;
}
body.menu-open .menu { transform: none; }
body.menu-open { overflow: hidden; }
.menu__links { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.menu__links a:not(.btn) {
  font-family: var(--serif); font-size: clamp(30px, 8vw, 44px); color: var(--ink);
}
.menu__links .btn { margin-top: 10px; }
.menu__foot { color: var(--muted); letter-spacing: 0.2em; font-size: 13px; }

/* ----- Hero ----- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; align-items: end;
  overflow: clip;
}
.hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img {
  position: absolute; right: 0; top: 0; height: 100%; width: min(66vw, 960px);
  object-fit: cover; object-position: 55% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  opacity: 1;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 17, 31, 0.5) 0%, transparent 34%, rgba(11, 17, 31, 0.8) 90%),
    linear-gradient(90deg, rgba(11, 17, 31, 0.35) 42%, transparent 72%);
}
.hero__content {
  position: relative; z-index: 2;
  max-width: var(--maxw); width: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) var(--pad) clamp(90px, 14vh, 150px);
}
.hero__kicker {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-soft); font-weight: 400; margin-bottom: 22px;
}
.hero__title {
  font-size: clamp(44px, 8.4vw, 118px);
  line-height: 1.04;
  max-width: 20ch;
  margin-bottom: 24px;
}
.hero__title .line {
  display: block; overflow: hidden;
  padding-bottom: 0.09em; margin-bottom: -0.09em; /* no cortar descendentes */
}
.hero__title .line-inner { display: block; }
.hero__sub { max-width: 44ch; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); margin-bottom: 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__scrollhint {
  position: absolute; z-index: 2; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 54px; background: var(--line); overflow: hidden;
}
.hero__scrollhint span {
  position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: var(--gold);
  animation: scrollhint 2.2s var(--ease-soft) infinite;
}
@keyframes scrollhint { 0% { top: -40%; } 60%, 100% { top: 110%; } }

/* ----- Marquee ----- */
.marquee {
  border-block: 1px solid var(--line);
  padding: 20px 0;
  overflow: clip;
  background: var(--bg-2);
}
.marquee__track {
  display: flex; align-items: center; gap: 42px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee__track span {
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 27px);
  white-space: nowrap;
  /* Relleno tenue + contorno: el texto sólo contorneado quedaba hueco y costaba leerlo */
  color: rgba(210, 161, 92, 0.17);
  -webkit-text-stroke: 1px rgba(210, 161, 92, 0.85);
}
.marquee__track i { font-style: normal; color: var(--gold); font-size: 13px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ----- Servicios (card stack) ----- */
.svc { padding: clamp(90px, 12vh, 150px) var(--pad) clamp(60px, 8vh, 110px); }
.svc__head { max-width: var(--maxw); margin: 0 auto clamp(46px, 7vh, 90px); }
.svc__intro { max-width: 46ch; color: var(--muted); }
.stack { max-width: min(var(--maxw), 1180px); margin: 0 auto; display: grid; }
/* apilado pegajoso en TODOS los anchos: cada card se frena y la siguiente la tapa */
.stack .scard { position: sticky; top: 12px; margin-bottom: 26px; }
.scard {
  --shade: 0; /* velo oscuro animado por GSAP al apilarse (la card queda opaca, sin ghosting) */
  position: relative;
  display: grid; grid-template-columns: 1fr;
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow);
}
.scard::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: rgb(9 14 26 / var(--shade));
  pointer-events: none;
}
.scard__media { position: relative; min-height: 200px; }
.scard__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.scard:hover .scard__media img { transform: scale(1.045); }
.scard__body { padding: clamp(20px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; }
/* Numeral editorial: el pill con letter-spacing tenía aire de dashboard.
   En Marcellus grande acompaña a los títulos en vez de competir con ellos. */
.scard__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: rgba(210, 161, 92, 0.55);
  margin-bottom: 14px;
}
.scard__title { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
.scard__desc { color: var(--muted); max-width: 48ch; margin-bottom: 22px; }
.scard__meta {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 14px; color: var(--muted);
}
.scard__meta li { display: flex; align-items: center; gap: 8px; }
.scard__meta li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.scard__price { color: var(--gold-soft); font-weight: 500; }
.scard__cta { margin-top: auto; }

/* ----- Manifiesto ----- */
.manif {
  padding: clamp(110px, 18vh, 220px) var(--pad);
  display: grid; place-items: center; gap: 34px;
  background: var(--bg-2);
  text-align: center;
}
.manif__scales { width: 40px; height: 40px; color: var(--gold); opacity: 0.85; }
.manif__text {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 52px);
  line-height: 1.28;
  max-width: 24ch;
  text-wrap: balance;
}
.manif__text .w { display: inline-block; }

/* ----- Sobre ----- */
.about {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(80px, 11vh, 140px) var(--pad);
  display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 80px);
  align-items: center;
}
.about__media {
  border-radius: var(--radius); overflow: clip; box-shadow: var(--shadow);
  aspect-ratio: 4 / 4.6; position: relative;
}
.about__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.about__body p { color: var(--muted); max-width: 54ch; margin-bottom: 16px; }
.about__pillars { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; }
.about__pillars li {
  padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(18, 28, 49, 0.45);
  color: var(--muted); font-size: 15px;
}
.about__pillars b { color: var(--ink); font-weight: 500; }

/* ----- Prueba social (reemplaza a los testimonios inventados) ----- */
.proof {
  background: var(--bg-2);
  padding: clamp(90px, 12vh, 150px) var(--pad);
  display: grid; justify-items: center; text-align: center;
  gap: clamp(18px, 2.4vw, 26px);
}
.proof .h2 { max-width: 18ch; margin-bottom: 0; }
.proof__lead { color: var(--muted); max-width: 54ch; }

/* ----- Reservas ----- */
.book {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(90px, 13vh, 160px) var(--pad);
  display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 90px);
  align-items: start;
}
.book__info p { color: var(--muted); max-width: 46ch; }
.book__steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
.book__steps li { display: flex; align-items: center; gap: 16px; color: var(--muted); }
.book__steps span {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--gold); font-family: var(--serif); font-size: 15px;
}
.book__panel {
  background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 46px);
  box-shadow: var(--shadow);
  position: relative;
}

/* Tarjeta de reserva (CTA a la agenda online) */
.book__cta { text-align: center; padding: clamp(10px, 2vw, 26px) 4px; }
.book__cta-title { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; margin-bottom: 16px; }
.book__cta-lead { color: var(--muted); max-width: 40ch; margin: 0 auto 32px; font-size: 15.5px; line-height: 1.65; }
.book__cta-btn { display: inline-flex; align-items: center; gap: 11px; padding: 16px 34px; }
.book__cta-arrow { width: 20px; height: 20px; flex: 0 0 auto; transition: transform 0.35s var(--ease-soft); }
.book__cta-btn:hover .book__cta-arrow { transform: translateX(4px); }
.book__cta-fine { font-size: 12.5px; color: var(--muted); margin-top: 22px; }

/* ----- Barra de reserva fija (mobile/tablet) -----
   Escala de z-index de la web: bookbar 800 < nav 900 < splash 1000 < skip-link 9999.
   Va por debajo del menú (850) para que el menú abierto la tape. */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11, 17, 31, 0) 0%, rgba(11, 17, 31, 0.93) 42%);
  transform: translateY(115%);
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.bookbar.is-in { transform: none; pointer-events: auto; }
/* Ancho completo en teléfono (el pulgar llega a cualquier parte) pero con tope: en una
   tablet de 820px un botón de borde a borde se lee como banner, no como acción. */
.bookbar__inner { display: flex; justify-content: center; }
.bookbar__btn { width: 100%; max-width: 440px; }
body.menu-open .bookbar { transform: translateY(115%); pointer-events: none; }
@media (min-width: 1024px) { .bookbar { display: none; } }

/* ----- Contacto ----- */
.contact {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(80px, 11vh, 140px) var(--pad);
  display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 80px);
}
.contact__list { list-style: none; padding: 0; margin: 10px 0 0; }
.contact__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line-2);
}
.contact__label { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); }
a.contact__value { transition: color 0.3s; }
a.contact__value:hover { color: var(--gold-soft); }
.contact__value--soon { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); font-style: italic; }
.contact__map {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 320px; overflow: clip;
  background: radial-gradient(80% 90% at 60% 20%, rgba(210, 161, 92, 0.07), transparent 70%), var(--bg-2);
  display: grid; place-items: center;
}
/* El mapa no recibe clicks (para no robarle el scroll a la página): se navega con "Cómo llegar" */
.contact__map-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none;
  /* a color: se lee como mapa de verdad. Sólo un ajuste leve para que no queme al lado del navy */
  filter: saturate(1.06) contrast(1.02) brightness(0.97);
}
/* Viñeta dorada al borde: liga el mapa a la paleta sin apagarle el color */
.contact__map::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 90px 24px rgba(11, 17, 31, 0.55);
  background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(210, 161, 92, 0.1));
}
.contact__map-inner {
  /* a la esquina: centrado tapaba el marcador del mapa */
  position: relative; z-index: 2; place-self: end start; margin: clamp(14px, 1.8vw, 22px);
  text-align: left; padding: 24px 26px; max-width: 300px;
  background: rgba(11, 17, 31, 0.84);
  border: 1px solid var(--line); border-radius: calc(var(--radius) - 6px);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.contact__pin { width: 28px; height: 28px; margin: 0 0 10px; color: var(--gold); }
.contact__map-title { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 27px); margin-bottom: 6px; }
.contact__map-sub { color: var(--muted); font-size: 14.5px; }
.contact__map-link {
  position: relative;
  display: inline-block; margin-top: 18px;
  font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: color 0.3s;
}
/* Área táctil de ~44px sin mover el diseño: el mapa no recibe clicks, así que este
   link es la única forma de navegar y tiene que ser fácil de tocar en mobile */
.contact__map-link::after { content: ""; position: absolute; inset: -14px -12px; }
.contact__map-link:hover { color: var(--gold-soft); }

/* ----- Footer ----- */
.footer {
  border-top: 1px solid var(--line-2);
  padding: clamp(50px, 8vh, 90px) var(--pad) 34px;
  overflow: clip;
}
.footer__giant {
  font-family: var(--serif);
  font-size: clamp(90px, 21vw, 320px);
  line-height: 0.9;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(210, 161, 92, 0.3);
  letter-spacing: 0.08em;
  user-select: none;
  margin-bottom: clamp(30px, 5vh, 60px);
}
.footer__row {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px;
  color: var(--muted); font-size: 14px;
}
.footer__links { display: flex; gap: 24px; }
.footer__links a { transition: color 0.3s; }
.footer__links a:hover { color: var(--gold-soft); }

/* Firma de autoria. Va separada de la fila por una hairline y en el tono apagado del
   footer: es la web del cliente, la firma no compite con su marca. El link si toma el
   dorado, que es lo unico que la distingue de texto muerto. */
.footer__made {
  max-width: var(--maxw);
  margin: clamp(22px, 3vh, 34px) auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.footer__made a { color: var(--gold-soft); transition: color 0.3s; }
.footer__made a:hover { color: var(--gold); }

/* ========== 7. Responsive (mobile-first hacia arriba) ========== */

/* Tablet (768-1023): sigue el apilado, pero la card pasa a dos columnas (imagen al
   costado). Se probó también la tira horizontal acá y no da: con el panel a 62vh el
   cuerpo queda apretado y en portrait se pierde media card en el borde. */
@media (min-width: 768px) {
  .scard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .scard__media { min-height: 430px; }
  .stack .scard { top: calc(var(--nav-h) + 18px); margin-bottom: clamp(26px, 5vh, 60px); }
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .contact { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; }
}

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
  .book { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

  /* ----- Servicios: tira horizontal pineada -----
     MISMAS seis cards que en mobile, mismo HTML. La clase .svc--track la pone
     initServicesMotion() sólo cuando GSAP arrancó y va a pinear de verdad: sin JS, o con
     prefers-reduced-motion, no se agrega y queda el apilado vertical, que funciona solo. */
  /* La sección ocupa exactamente una pantalla y se reparte por flex: el encabezado toma
     lo que necesita y la tira se queda con TODO el resto. Así la card nunca se pasa del
     viewport, que es lo que pasaba con una altura fija en vh (a 1280x720 los botones
     quedaban abajo del pliegue). El piso de altura lo pone la media query de main.js:
     por debajo de 800px de alto no se pinea y queda el apilado. */
  .svc--track {
    height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) + clamp(12px, 2.4vh, 34px)) 0 clamp(14px, 2.6vh, 36px);
    overflow: hidden;
  }
  .svc--track .svc__head {
    flex: 0 0 auto;
    padding: 0 var(--pad);
    margin-bottom: clamp(12px, 2.2vh, 30px);
  }
  .svc--track .svc__intro { max-width: 52ch; }
  /* El tope de 620px es para las pantallas altas: sin él, a 1920x1080 la card se estira a
     784px y entre el precio y el botón quedan 252px de aire muerto (el botón va anclado
     abajo con margin-top:auto). Con tope el hueco baja a ~88px y queda parejo con el
     resto de los tamaños. El sobrante lo reparte el justify-content:center de arriba. */
  .svc--track .stack {
    flex: 0 1 auto; min-height: 0; height: 100%; max-height: 620px;
    display: flex; align-items: stretch;
    width: max-content; max-width: none; margin: 0;
    gap: clamp(16px, 1.6vw, 28px);
    padding: 0 var(--pad);
    will-change: transform;
  }
  .svc--track .scard {
    position: static; margin-bottom: 0; height: 100%;
    flex: 0 0 clamp(390px, 30vw, 490px);
    grid-template-columns: 1fr;
    /* Foto de alto fijo y cuerpo elástico: si la foto tomara el sobrante, cada card la
       dejaría de un alto distinto (el texto no mide lo mismo en las seis) y la tira se
       vería desprolija al correr. Así las seis fotos y los seis botones se alinean. */
    grid-template-rows: auto minmax(0, 1fr);
  }
  /* 24vh es el techo medido: a 26vh el cuerpo de la card más cargada se desborda en
     1280x800 y su botón se desalinea de los otros cinco. */
  .svc--track .scard__media { min-height: 0; height: clamp(185px, 24vh, 250px); }
  .svc--track .scard__body { padding: clamp(20px, 1.7vw, 30px); }
  .svc--track .scard__num { font-size: clamp(28px, 2.2vw, 38px); margin-bottom: 8px; }
  .svc--track .scard__title { font-size: clamp(22px, 1.8vw, 29px); margin-bottom: 8px; }
  .svc--track .scard__desc { font-size: 14.5px; margin-bottom: 14px; max-width: none; }
  .svc--track .scard__meta { margin-bottom: 18px; font-size: 13.5px; gap: 6px 16px; }
}

@media (max-width: 767px) {
  /* El min() no es adorno: la card es sticky, así que si crece más que la pantalla su
     botón queda permanentemente abajo del pliegue mientras está frenada. Con 24vh la
     foto se agranda en un teléfono normal y se achica sola en uno de pantalla corta. */
  .scard__media { min-height: min(175px, 24vh); }
  /* mas aire entre cards: cada una se lee completa antes de que la tape la siguiente */
  .stack .scard { margin-bottom: 64px; }
  .hero__img { width: 100vw; opacity: 0.7; -webkit-mask-image: none; mask-image: none; }
  .hero__veil {
    background: linear-gradient(180deg, rgba(11, 17, 31, 0.6) 0%, rgba(11, 17, 31, 0.42) 40%, rgba(11, 17, 31, 0.9) 88%);
  }
  .footer__row { flex-direction: column; text-align: center; }
}

/* La card frenada tiene que quedar DEBAJO del nav, no atrás. En mobile se pegaba a
   `top: 12px` con un nav de 76px, así que la foto entraba tapada por la barra (en
   desktop el offset ya estaba). No se aplica siempre porque el texto de la card es lo
   que manda: a 320px de ancho el cuerpo solo mide 507px y sumarle el nav lo saca de
   pantalla. Los dos rangos salen de medir dónde entra:
     · desde 375px de ancho con 640px de alto  → iPhone SE2 en adelante
     · desde 360px de ancho con 760px de alto  → los Android angostos pero largos
   Fuera de eso (320px, o pantallas muy bajas) queda el comportamiento anterior, que es
   feo pero entra. Ver la tabla de medición en HANDOFF.md. */
@media (min-width: 375px) and (max-width: 767px) and (min-height: 640px),
       (min-width: 360px) and (max-width: 767px) and (min-height: 760px) {
  .stack .scard { top: calc(var(--nav-h) + 10px); }
}

/* ========== 8. Reduced motion (solo lo intrusivo) ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* El marquee se frena del todo: el movimiento horizontal continuo es justo lo que
     molesta con trastornos vestibulares. Es decorativo (aria-hidden) y los mismos
     servicios están listados abajo, así que no se pierde nada. */
  .marquee__track { animation: none; }
  .hero__scrollhint { display: none; }

  /* El reveal deja de deslizarse: queda el crossfade, que es la alternativa que pide
     la preferencia. La opacidad sigue porque el IntersectionObserver la resuelve sola
     (y tiene red de 6s), así que nunca queda contenido invisible. */
  .js-ready .reveal:not(.is-in) { transform: none; }
  .reveal { transition: opacity 0.5s linear; }

  /* La barra de reserva aparece sin deslizarse */
  .bookbar { transition: none; }

  /* Las micro-interacciones (hover, transiciones de color) quedan activas a propósito.
     El resto del movimiento —apilado, tira horizontal, scrub del manifiesto, parallax—
     no se inicializa: lo cortan initServicesMotion/initScrub/initParallax en main.js. */
}