/* ─────────────────────────────────────────────────────────────
   Tokens — paleta derivada del logo de Auragenda
   ───────────────────────────────────────────────────────────── */
:root {
  --aura-midnight: #0A0A14;   /* fondo más profundo (héroe) */
  --aura-bg:       #101022;   /* fondo de página */
  --aura-surface:  #1A1A33;   /* superficies */
  --aura-violet:   #7B7FE0;   /* acento violeta (de la Λ) */
  --aura-blue:     #5AA0E8;   /* acento azul (de la Λ) */
  --aura-lilac:    #9D7BE8;   /* violeta claro */
  --aura-gradient: linear-gradient(135deg, var(--aura-blue), var(--aura-violet) 55%, var(--aura-lilac));
  --aura-text:     #EDEAF7;
  --aura-muted:    #9A97B5;
  --aura-paper:    #F5F3EF;   /* off-white cálido */

  --display: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --body:    "Satoshi", ui-sans-serif, system-ui, sans-serif;

  --wordmark: url("/assets/wordmark.svg");   /* vectorial: nítido a cualquier escala */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--aura-bg);
  color: var(--aura-text);
  font-family: var(--body);
  overscroll-behavior: none;       /* evita el overscroll que rompe el scrub */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────────────────────
   Stage: 400vh de scroll que pilota el timeline.
   El viewport interior es sticky → se siente fijo mientras scrolleas.
   ───────────────────────────────────────────────────────────── */
.stage { position: relative; height: 400vh; }

.stage__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--aura-midnight);
}

/* Capa 1 — fondo: foto cinematográfica del lobby con el neón de la Λ */
.bg {
  position: absolute; inset: -2%;
  transform: scale(1.25);
  background: url("/assets/hero-bg.png") center / cover no-repeat, var(--aura-midnight);
}
/* Scrim + viñeta para que la marca y la UI respiren sobre la foto */
.bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 50% at 38% 42%, rgba(10,10,20,.42), transparent 72%),
    linear-gradient(180deg, rgba(10,10,20,.34), transparent 26%, rgba(10,10,20,.5));
}

/* Capa que aclara el entorno hacia el final (sensación de luz) */
.aura-lift {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(60% 60% at 50% 46%, rgba(245,243,239,.55), transparent 72%);
  pointer-events: none;
}

/* Capa 2 — wordmark de marca (relleno aura claro + glow) sobre el héroe oscuro */
.hero-wordmark {
  position: absolute; left: 50%; top: 46%;
  width: min(64vw, 820px); aspect-ratio: 3664 / 729; /* viewBox del wordmark oficial */
  transform: translate(-50%, -50%);
  background: linear-gradient(120deg, #FFFFFF, #CFCBFF 55%, #BFE0FF);
  -webkit-mask: var(--wordmark) no-repeat center / contain;
  mask: var(--wordmark) no-repeat center / contain;
  filter: drop-shadow(0 0 38px rgba(160,150,255,.45));
}

/* Capa 3 — el reveal: papel + glow aura recortado por el wordmark.
   mask-size colapsa de gigante → ajustado (lo anima GSAP). */
.reveal {
  position: absolute; inset: 0; opacity: 0;
  background:
    /* realce que sigue al cursor (recortado por las letras → glow interactivo) */
    radial-gradient(360px 360px at calc(var(--rx, -999) * 1px) calc(var(--ry, -999) * 1px),
      #FFFFFF, rgba(200,190,255,.7) 38%, rgba(170,150,255,0) 66%),
    radial-gradient(48% 48% at 50% 46%, rgba(176,158,255,.5), transparent 70%),
    linear-gradient(180deg, #FBFAF7, #ECE7FB); /* base con un punto menos de brillo → el cursor destaca */
  -webkit-mask: var(--wordmark) no-repeat center 46% / 900vw auto;
  mask: var(--wordmark) no-repeat center 46% / 900vw auto;
  /* halo en dos capas para un glow más presente */
  filter: drop-shadow(0 0 54px rgba(140,130,255,.6)) drop-shadow(0 0 18px rgba(196,186,255,.55));
}

/* ── Header ── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0;
}
.site-header--floating { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.site-header--solid { position: relative; border-bottom: 1px solid rgba(157,123,232,.14); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { display: block; height: 34px; width: auto; }
.brand span {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: .01em; color: #fff;
}
.header-right { display: inline-flex; align-items: center; gap: 22px; }
.sds-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; color: rgba(237,234,247,.72);
}
.sds-link:hover { color: #fff; }
.sds-link img { height: 20px; width: auto; opacity: .9; }
/* "South Desert Studio": highlight naranja en degradado horizontal que se desplaza lento */
.sds-name {
  font-weight: 600;
  background: linear-gradient(100deg,
    #FF7A18 0%, #FFA63D 28%, #FFE08A 50%, #FFA63D 72%, #FF7A18 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: sds-shimmer 7s linear infinite;
}
@keyframes sds-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
.cta {
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  padding: 11px 20px; border-radius: 999px; color: var(--aura-midnight);
  background: linear-gradient(120deg, #EDEAF7, #CFCBFF);
  box-shadow: 0 6px 24px -8px rgba(140,130,255,.7);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(140,130,255,.85); }

/* ── Indicador keep-scrolling ── */
.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(237,234,247,.7); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.scroll-hint .chev {
  width: 22px; height: 22px; border-right: 2px solid var(--aura-violet);
  border-bottom: 2px solid var(--aura-violet); transform: rotate(45deg);
  animation: bouncePulse 2s ease-in-out infinite;
}
@keyframes bouncePulse {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity:.45; }
  50%     { transform: rotate(45deg) translate(4px,4px); opacity:1; }
}

/* ─────────────────────────────────────────────────────────────
   Contenido tras el héroe — aterrizaje en "luz"
   ───────────────────────────────────────────────────────────── */
.promesa {
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(157,123,232,.16), transparent 60%),
    var(--aura-paper);
  color: #1A1430;
  padding: 16vh 24px 18vh;
  text-align: center;
}
.promesa .eyebrow {
  font-family: var(--display); font-weight: 600; font-size: .89 rem;
  letter-spacing: .16em; text-transform: uppercase; color: #6A5AD0; margin: 0 0 22px;
}
.promesa h1 {
  font-family: var(--display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem); letter-spacing: -.015em;
  max-width: 16ch; margin: 0 auto 24px;
}
.promesa p {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: #4A4366;
  max-width: 54ch; margin: 0 auto 36px; line-height: 1.55;
}
.cta-dark {
  display: inline-block; font-family: var(--display); font-weight: 600;
  padding: 14px 28px; border-radius: 999px; color: #fff;
  background: var(--aura-gradient);
  box-shadow: 0 14px 40px -12px rgba(123,127,224,.8);
}

.next {
  background: var(--aura-bg); color: var(--aura-text);
  padding: 16vh 24px; text-align: center;
}
.next h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 16px;
}
.next .two {
  display: flex; gap: 24px; max-width: 920px; margin: 40px auto 0; flex-wrap: wrap;
}

/* Border-glow reutilizable (patrón SDS frontend-patterns/border-glow),
   adaptado a tonos de marca azul→violeta. El brillo sigue al cursor. */
[data-glow-card] {
  position: relative; isolation: isolate;
  transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
[data-glow-card]:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
  border-color: rgba(157,123,232,.4);
  transform: translateY(-2px);
}
[data-glow-card]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(200px 200px at calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(var(--glow-hue, 235) 90% 66% / .95), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s ease;
}
[data-glow-card]:hover::before { opacity: 1; }

.next .card {
  flex: 1 1 320px; text-align: left; padding: 32px;
  border: 1px solid rgba(157,123,232,.22); border-radius: 18px;
  background:
    radial-gradient(260px 260px at calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
      hsl(var(--glow-hue, 235) 80% 65% / .10), transparent 72%),
    linear-gradient(180deg, rgba(26,26,51,.6), rgba(16,16,34,.3));
}
.next .card h3 { font-family: var(--display); font-weight:600; margin: 0 0 10px; font-size: 1.3rem; }
.next .card p { margin: 0; color: var(--aura-muted); line-height: 1.55; }

/* ── Footer (glass-card + aura blobs, inspirado en Teragenda) ── */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--aura-midnight);
  border-top: 1px solid rgba(157,123,232,.16);
  padding: 84px 24px 40px;
}
.footer-blob {
  position: absolute; border-radius: 50%; filter: blur(95px);
  opacity: .5; pointer-events: none;
}
.footer-blob--1 {
  width: 360px; height: 360px; left: -90px; top: -70px;
  background: radial-gradient(circle, rgba(90,160,232,.5), transparent 70%);
}
.footer-blob--2 {
  width: 440px; height: 440px; right: -120px; bottom: -140px;
  background: radial-gradient(circle, rgba(157,123,232,.45), transparent 70%);
}
.footer-inner { position: relative; width: min(1100px, calc(100% - 48px)); margin: 0 auto; }
.footer-card {
  border: 1px solid rgba(157,123,232,.2); border-radius: 24px; padding: 44px;
  background: linear-gradient(180deg, rgba(26,26,51,.55), rgba(16,16,34,.4));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px;
}
.footer-brand-mark { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand-mark img { height: 34px; width: auto; }
.footer-brand-mark span {
  font-family: var(--display); font-weight: 600; color: #fff; font-size: 1.2rem;
}
.footer-tagline {
  color: var(--aura-muted); margin: 14px 0 20px; max-width: 34ch;
  line-height: 1.55; font-size: .92rem;
}
.footer-sds {
  display: inline-flex; align-items: center; gap: 9px;
  color: rgba(237,234,247,.74); font-size: .84rem; transition: color .2s ease;
}
.footer-sds:hover { color: #fff; }
.footer-sds img { height: 24px; width: auto; opacity: .9; }
.footer-col-title {
  font-family: var(--display); font-weight: 600; color: #fff;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-list a { color: rgba(237,234,247,.72); font-size: .9rem; transition: color .2s ease; }
.footer-list a:hover { color: #fff; }
.footer-list a[aria-disabled="true"] { opacity: .55; cursor: default; }
.footer-bottom {
  position: relative; width: min(1100px, calc(100% - 48px)); margin: 28px auto 0;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  color: var(--aura-muted); font-size: .78rem;
}

/* ─────────────────────────────────────────────────────────────
   Páginas legales (tema oscuro, lectura cómoda)
   ───────────────────────────────────────────────────────────── */
.legal-page { background: var(--aura-bg); min-height: 100vh; }
.legal { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0 96px; }
.legal-back { display: inline-block; color: var(--aura-muted); font-size: .85rem; margin-bottom: 26px; }
.legal-back:hover { color: #fff; }
.legal h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 24px;
}
.legal-content { color: var(--aura-text); line-height: 1.7; }
.legal-content h2 { font-family: var(--display); font-weight: 600; margin: 32px 0 12px; }
.legal-content a { color: var(--aura-violet); text-decoration: underline; }
.legal-content ul, .legal-content ol { padding-left: 20px; }
.legal-invite {
  border: 1px solid rgba(157,123,232,.2); border-radius: 16px; padding: 32px;
  background: rgba(26,26,51,.4);
  text-align: center;
}
.legal-invite p { color: var(--aura-muted); line-height: 1.6; margin: 0 0 22px; }
.legal-cta {
  display: inline-block; font-family: var(--display); font-weight: 600;
  padding: 13px 26px; border-radius: 999px; color: #fff;
  background: var(--aura-gradient);
  box-shadow: 0 14px 40px -12px rgba(123,127,224,.8);
  transition: transform .2s ease, box-shadow .2s ease;
}
.legal-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 46px -12px rgba(123,127,224,.9); }

/* ── Responsive / mobile ── */
@media (max-width: 760px) {
  .site-header { width: calc(100% - 32px); padding: 16px 0; }
  .sds-link { display: none; }                 /* SDS vive en el footer en mobile */
  .brand span { font-size: 1rem; }
  .brand img { height: 28px; }
  .cta { padding: 9px 15px; font-size: .8rem; }
  .hero-wordmark { width: 86vw; top: 44%; }
  .promesa { padding: 13vh 20px 15vh; }
  .promesa h1 { max-width: 100%; }
  .next { padding: 13vh 20px; }
  .next .two { gap: 14px; }
  .next .card { padding: 24px; flex-basis: 100%; }
  .scroll-hint { bottom: 24px; }
  .site-footer { padding: 64px 20px 32px; }
  .footer-card { grid-template-columns: 1fr; gap: 30px; padding: 30px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .hero-wordmark { width: 90vw; }
}

/* ── Reduced motion: sin scroll-jacking ── */
@media (prefers-reduced-motion: reduce) {
  .stage { height: 100vh; }
  .stage__viewport { position: static; height: 100vh; }
  .bg { transform: none; }
  .bg::after, .scroll-hint .chev { animation: none; }
  .reveal { display: none; }
  [data-glow-card], [data-glow-card]::before { transition: none; }
  .sds-name { animation: none; background-position: 50% 50%; }
}