/* ============================================================
   LUNA AZUL · CAPA DE DISEÑO 2026
   Tendencias: navegación "smart", números fantasma editoriales,
   marquee, grano sutil, shines, diagramación por secciones.
   ㅡ Capa ADITIVA sobre main.css · no altera los hooks de JS.
   ============================================================ */

:root {
  --ease-out-quart: cubic-bezier(.2, .65, .25, 1);
}

/* ============================================================
   1. NAVEGACIÓN SMART (ocultar al bajar / mostrar al subir)
      El JS en assets/js/trends.js alterna .is-hidden y body.nav-hide
   ============================================================ */
.nav {
  transition: background .4s var(--ease), box-shadow .4s var(--ease),
    height .3s var(--ease), transform .45s var(--ease-out-quart);
  will-change: transform;
}
.nav.is-hidden { transform: translateY(-101%); }

/* Dock: al ocultarse el nav, trepa a la cima y se vuelve píldora flotante */
.dock {
  top: calc(var(--nav-h) + 0px);
  left: 16px; right: 16px;
  width: auto; max-width: 980px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 18px 50px rgba(26, 65, 108, .12);
  transform: translateY(calc(-100% - 12px));
  transition: transform .45s var(--ease-out-quart), opacity .3s var(--ease),
    visibility .45s, top .45s var(--ease-out-quart);
}
.dock.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
body.nav-hide .dock { top: 8px; }

/* El nav sólido gana profundidad y un filo dorado en la base */
.nav.is-solid {
  background: linear-gradient(180deg, rgba(254, 253, 251, .96), rgba(248, 246, 241, .9));
  box-shadow: 0 1px 0 var(--line), 0 14px 40px rgba(26, 65, 108, .07);
}
.nav.is-solid::after {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  height: 1px;
}

/* Enlaces: subrayado degradado + paso más firme */
.nav__links a::after {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  background-size: 100% 100%;
}
.nav__links a {
  font-weight: 500;
  transition: color .3s var(--ease), letter-spacing .3s var(--ease);
}
.nav__links a:hover { letter-spacing: .24em; }

/* CTA del nav: píldora + brillo */
.nav__cta {
  position: relative;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--gold), var(--gold-dark));
  overflow: hidden;
}
.nav__cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.nav__cta:hover::before { transform: translateX(130%); }

/* Menú móvil: cierre de utilidades */
.mnav__utils {
  display: flex; flex-direction: column; gap: 10px;
  width: min(320px, 78vw);
  margin: 22px auto 0;
}
.mnav__util {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 22px; min-height: 46px;
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.mnav__util:hover { border-color: var(--gold); color: var(--gold-light); }
.mnav__util svg { width: 15px; height: 15px; fill: var(--gold); flex: none; }
.mnav__util--wa { background: rgba(228, 153, 81, .12); }

/* ============================================================
   2. HERO — brillo cálido + acento degradado
   ============================================================ */
.hero__content { position: relative; }
.hero__content::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: min(52vw, 620px); height: 340px;
  left: -8%; top: -24%;
  background: radial-gradient(closest-side, rgba(228, 153, 81, .24), transparent 70%);
  filter: blur(14px);
}
.hero__title em {
  background: linear-gradient(95deg, var(--gold-light) 10%, var(--gold) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ============================================================
   3. MARQUEE — banda editorial entre el hero y "Nosotros"
   ============================================================ */
.marquee {
  position: relative; z-index: 3;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(228, 153, 81, .07), transparent 18%, transparent 82%, rgba(228, 153, 81, .07)),
    var(--ink);
  border-block: 1px solid rgba(245, 216, 170, .18);
  padding-block: 15px;
}
.marquee__track {
  display: flex; align-items: center;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__track > span {
  display: flex; align-items: center; gap: 2.6rem;
  padding-right: 2.6rem;
  white-space: nowrap;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: rgba(255, 255, 255, .88);
}
.marquee b {
  font-family: var(--sans); font-style: normal;
  font-weight: 500; font-size: .7rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-light);
}
.marquee .marquee__sep { color: var(--gold); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* El marquee, como franja en el borde inferior del slide del hero,
   queda "detrás" del contenido del hero (los dots y el texto van por encima). */
#main .hero .marquee {
  position: absolute; inset: auto 0 0; margin: 0;
  z-index: 1;
  border-block: 1px solid rgba(245, 216, 170, .22);
}

/* ============================================================
   4. DIAGRAMACIÓN — números fantasma en las secciones
   ============================================================ */
.section[data-num] { isolation: isolate; }
.section[data-num]::before {
  content: attr(data-num);
  position: absolute; z-index: -1;
  top: clamp(20px, 4vw, 44px); right: var(--gutter);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(5.5rem, 10vw, 9.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(228, 153, 81, .18);
  pointer-events: none;
  user-select: none;
}

/* Acento degradado en los emfáticos de los títulos */
.sec-title em {
  background: linear-gradient(92deg, var(--gold-dark) 20%, var(--gold) 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ============================================================
   5. GALERÍA — pan desplazado alternado (tendencia "editorial")
   ============================================================ */
.gal:nth-child(odd):hover img { transform: scale(1.08) translateX(-2.5%); }
.gal:nth-child(even):hover img { transform: scale(1.08) translateX(2.5%); }

/* ============================================================
   6. BOTONES — brillo de barrido sobre el oro
   ============================================================ */
.btn--gold, .search__submit, .mbar__cta, .dock__cta {
  position: relative; overflow: hidden;
}
.btn--gold::before, .search__submit::before,
.mbar__cta::before, .dock__cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  transform: translateX(-135%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.btn--gold:hover::before, .search__submit:hover::before,
.mbar__cta:hover::before, .dock__cta:hover::before { transform: translateX(135%); }
.btn--gold { background: linear-gradient(120deg, var(--gold), var(--gold-dark)); }

/* ============================================================
   7. VOLVER ARRIBA + pulido general
   ============================================================ */
.totop {
  position: fixed; right: 88px; bottom: 22px; z-index: 88;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease-out-quart),
    visibility .3s, background .25s var(--ease), color .25s var(--ease);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.totop svg { width: 18px; height: 18px; fill: currentColor; }
body.is-locked .totop { opacity: 0; visibility: hidden; }

@media (max-width: 860px) {
  .totop { right: 16px; bottom: 158px; }
}

/* Grano cinematográfico sutil sobre todo el sitio */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .035;
}

/* Scroll suave para anclas (respetando prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Focos visibles accesibles (sin duplicar los rings de los campos) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

::selection { background: var(--gold); color: #fff; }

@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: rgba(26, 65, 108, .28) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb {
    background: rgba(26, 65, 108, .24);
    border: 3px solid transparent; background-clip: content-box;
    border-radius: 20px;
  }
  *::-webkit-scrollbar-thumb:hover { background: rgba(228, 153, 81, .55); border: 3px solid transparent; background-clip: content-box; }
}

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .section[data-num]::before { top: -20px; right: var(--gutter); }
}

@media (max-width: 860px) {
  .section[data-num]::before {
    font-size: clamp(4.4rem, 20vw, 7.5rem);
    top: -26px; opacity: .55;
  }
  .marquee { padding-block: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .nav { transform: none !important; }
  .dock { transform: none !important; }
  .hero__slide, .hero__slide.is-active {
    transition-property: opacity, transform !important;
    transition-duration: 1.6s, 8s !important;
    transition-timing-function: var(--ease), linear !important;
  }
  .hero__slide { transform: scale(1.06) !important; }
  .hero__slide.is-active { transform: scale(1) !important; }
  .hero__dot[aria-current="true"]::after { animation-duration: 6s !important; }
  .room::after, .amen::after, .attr::after, .rcard::after, .ocard::after { transition: none; }
}

/* ============================================================
   9. SPOTLIGHT · resplandor dorado que sigue al ratón
   Capa ADITIVA · solo con puntero fino · no bloquea clic
   ============================================================ */
@media (pointer: fine) {
  .room, .amen, .attr, .rcard, .ocard {
    position: relative;
    --mx: 50%;
    --my: 40%;
  }
  .room::after, .amen::after, .attr::after, .rcard::after, .ocard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: radial-gradient(
      240px circle at var(--mx, 50%) var(--my, 40%),
      rgba(228, 153, 81, .16),
      rgba(228, 153, 81, .03) 55%,
      transparent 75%
    );
    opacity: 0;
    transition: opacity .3s var(--ease);
    pointer-events: none;
  }
  .room:hover::after, .amen:hover::after, .attr:hover::after,
  .rcard:hover::after, .ocard:hover::after { opacity: 1; }
}