/* ---- FONDO ESPACIAL 3D (Three.js, ver js/core/veloris-bg.js) ----
   Fijo detrás de toda la página. No captura clics. Compartido por todas
   las páginas que lo carguen. */
#veloris-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
#veloris-bg canvas{ display:block; }
#veloris-bg .vignette{
  position:absolute; inset:0;
  z-index:2;
  /* Enmienda 5: viñeta real y sin ruido/textura, no la insinuación cálida
     de Enmienda 4 — la Constitución V1 es explícita: "no existe ruido, no
     existe textura, solo silencio". */
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,0.4) 78%, rgba(0,0,0,0.7) 100%);
  pointer-events:none;
}
/* ---- SPOTLIGHT — glow ambiental que sigue el cursor. Frío (no dorado
   difuso): la luz cálida se reserva para remates puntuales (spotlight-
   card, filos), no para bañar la página entera de ámbar. Ya 100% dirigido
   por --cool-accent-dim: bajo Home (Enmienda 5) se retiñe solo, vía el
   token redefinido en tokens.css — sin regla propia aquí. ---- */
#fx-spotlight{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background:radial-gradient(circle 380px at var(--mx,50%) var(--my,30%),
    var(--cool-accent-dim), transparent 70%);
}

/* ---- GRANO/TEXTURA — retirado bajo Enmienda 5 ("no existe ruido, no
   existe textura, solo silencio"). Se conserva el elemento y su fondo por
   si alguna pantalla futura lo reactiva a propósito, pero opacity:0 lo
   apaga en todo el sitio. ---- */
#fx-grain{
  position:fixed;inset:0;z-index:150;
  pointer-events:none;
  opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---- DIVISOR ENTRE MÓDULOS ---- */
.section-divider{
  display:flex;align-items:center;justify-content:center;gap:16px;
  max-width:360px;margin:0 auto;padding:0 24px;
  position:relative;z-index:1;
}
.section-divider::before,.section-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right, transparent, var(--divider-line));
}
.section-divider::after{background:linear-gradient(to left, transparent, var(--divider-line));}
.section-divider span{
  flex:0 0 auto;width:7px;height:7px;background:var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 10px var(--divider-glow);
}

/* ============================================================
   REVEAL AL SCROLL — Intersection Observer nativo, sin dependencias.
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-premium), transform var(--dur-slow) var(--ease-premium);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ============================================================
   LANDING — contenedor scrolleable de cada página de contenido.
   ============================================================ */
#landing{
  position:relative;z-index:1;
  background:transparent;
}
body.experience-active #landing{visibility:hidden;}

/* Cada módulo flota como una "isla" translúcida sobre el fondo espacial
   fijo (#veloris-bg): fondo gris semitransparente + blur. */
.landing-section{
  position:relative;
  padding:80px 48px;
  max-width:1080px;width:calc(100% - 48px);margin:0 auto 40px;
  background:var(--island-bg);
  border:1px solid var(--island-border);
  border-radius:28px;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 70px rgba(0,0,0,0.14);
}
@media (max-width:720px){
  .landing-section{padding:56px 24px;border-radius:20px;width:calc(100% - 32px);margin:0 auto 28px;}
}
.section-label{
  display:block;text-align:center;
  font-size:var(--fs-kicker);font-weight:500;
  letter-spacing:5px;text-transform:uppercase;
  color:var(--gold);opacity:0.75;
  margin-bottom:18px;
}
/* Titulares de capítulo con escala editorial: crecen con el viewport,
   interlineado ceñido y tracking negativo — revista, no dashboard. */
.section-title{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:var(--fs-display);
  line-height:1.12;letter-spacing:-0.015em;
  text-align:center;margin-bottom:18px;
  text-wrap:balance;
}
.section-sub{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;font-style:normal;
  font-size:var(--fs-body-lg);color:var(--muted);line-height:1.65;
  text-align:center;max-width:560px;margin:0 auto 64px;
}

/* ---- NAV (partials/nav.html) ----
   Header minimal: el sello lineal de 4 puntas a la izquierda es el único
   trigger de navegación (abre el menú-estrella overlay, mismo
   comportamiento en mobile y desktop) — a la derecha, idioma/divisa y el
   estado de sesión. Estado base: barra fija a todo lo ancho; al hacer
   scroll (initNavScroll, js/core/nav.js) se añade .nav-scrolled: se
   convierte en una píldora flotante, centrada, con borde/blur/sombra. */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  margin:0 auto;max-width:100%;
  border:1px solid transparent;border-radius:16px;
  background:var(--glass-bg);
  backdrop-filter:var(--blur-panel);
  border-bottom:1px solid var(--border);
  transition:opacity var(--dur-base) var(--ease-premium), max-width var(--dur-base) var(--ease-premium), top var(--dur-base) var(--ease-premium),
             border-color var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), background var(--dur-base) var(--ease-premium);
}
#nav.nav-scrolled{
  top:14px;max-width:720px;
  border-color:var(--glass-border);border-bottom-color:var(--glass-border);
  background:var(--glass-bg-strong);
  box-shadow:0 18px 40px rgba(0,0,0,0.14);
}
body.experience-active #nav{opacity:0;pointer-events:none;}
.nav-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
}
#nav.nav-scrolled .nav-inner{padding:9px 24px;}

/* ---- Estrella-trigger — único acceso a la navegación ---- */
.nav-star-btn{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  background:none;border:none;cursor:pointer;
  color:var(--gold);
}
.nav-star-icon{
  width:26px;height:26px;
  filter:drop-shadow(0 0 6px var(--nav-icon-glow));
  transition:transform var(--dur-base) var(--ease-menu), filter var(--dur-base) var(--ease-premium), color var(--dur-base) var(--ease-premium);
  animation:navStarPulse 4.5s ease-in-out infinite;
}
.nav-star-btn:hover .nav-star-icon,
.nav-star-btn:focus-visible .nav-star-icon{
  filter:drop-shadow(0 0 14px var(--nav-icon-glow-hover));
  animation-play-state:paused;
}
.nav-star-btn[aria-expanded="true"] .nav-star-icon{
  transform:rotate(135deg) scale(0.92);
  color:var(--ink);
  filter:drop-shadow(0 0 20px var(--nav-icon-glow-active));
  animation-play-state:paused;
}
@keyframes navStarPulse{
  0%,100%{filter:drop-shadow(0 0 6px var(--nav-icon-glow-pulse-a));}
  50%{filter:drop-shadow(0 0 12px var(--nav-icon-glow-pulse-b));}
}

.nav-right{display:flex;align-items:center;gap:18px;}

/* ---- Selector idioma/divisa — UI únicamente, sin traducción real
   todavía (ver plan de rediseño Fase 0). ---- */
.nav-locale{position:relative;}
.nav-locale-btn{
  font-family:inherit;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  background:none;border:1px solid var(--glass-border);border-radius:20px;
  color:var(--muted);cursor:pointer;padding:6px 14px;
  transition:color var(--dur-micro) var(--ease-premium), border-color var(--dur-micro) var(--ease-premium);
}
.nav-locale-btn:hover{color:var(--gold-soft);border-color:var(--glass-border-strong);}
.nav-locale-menu{
  display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:5;
  min-width:170px;padding:6px;
  background:var(--glass-bg-strong);backdrop-filter:var(--blur-panel);
  border:1px solid var(--glass-border);border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,0.16);
}
.nav-locale-btn[aria-expanded="true"] + .nav-locale-menu,
.nav-locale-menu.is-open{display:block;}
.nav-locale-menu button{
  display:block;width:100%;text-align:left;
  font-family:inherit;font-size:12.5px;color:var(--muted);
  background:none;border:none;cursor:pointer;
  padding:8px 10px;border-radius:6px;
  transition:background var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.nav-locale-menu button:hover{background:var(--hover-tint);color:var(--gold-soft);}

/* ---- AUTH — bloque invitado / usuario en el nav (js/core/auth.js) ---- */
.nav-auth-guest{display:flex;align-items:center;gap:14px;}
.nav-auth-guest[hidden],
.nav-auth-user[hidden]{display:none;}
.nav-auth-link{
  font-family:inherit;font-size:12px;letter-spacing:1px;
  background:none;border:none;color:var(--muted);cursor:pointer;
  transition:color var(--dur-micro) var(--ease-premium);
}
.nav-auth-link:hover{color:var(--gold-soft);}

.nav-auth-user{position:relative;display:flex;}
.nav-avatar{
  width:34px;height:34px;padding:0;
  border-radius:50%;border:1px solid var(--hover-border);
  background:var(--avatar-bg);
  color:var(--gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.nav-avatar-initial{font-size:13px;font-weight:600;letter-spacing:0;text-transform:uppercase;}
.nav-avatar-menu{
  display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:5;
  min-width:180px;padding:8px;
  background:var(--glass-bg-strong);backdrop-filter:var(--blur-panel);
  border:1px solid var(--glass-border);border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,0.16);
}
.nav-avatar-btn[aria-expanded="true"] + .nav-avatar-menu,
.nav-avatar-menu.is-open{display:block;}
.nav-avatar-menu a,
.nav-avatar-menu button{
  display:block;width:100%;text-align:left;
  font-family:inherit;font-size:13px;color:var(--muted);
  background:none;border:none;text-decoration:none;cursor:pointer;
  padding:9px 10px;border-radius:6px;
  transition:background var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.nav-avatar-menu a:hover,
.nav-avatar-menu button:hover{background:var(--hover-tint);color:var(--gold-soft);}

/* ---- Menú-estrella — overlay a pantalla completa con drawer de cristal
   a la derecha. Un único componente para mobile y desktop: nada de
   hamburguesa ni panel separado. ---- */
.nav-menu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:60;
  opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(0.98);
  transform-origin:top left;
  transition:opacity var(--dur-base) var(--ease-menu), transform var(--dur-base) var(--ease-menu);
}
.nav-menu.is-open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
/* Capa invisible a pantalla completa solo para detectar "clic fuera"
   (ver js/core/nav.js) — sin oscurecer la página: es un dropdown anclado,
   no un modal a pantalla completa. */
.nav-menu-backdrop{position:fixed;inset:0;z-index:-1;background:transparent;}
.nav-menu-panel{
  display:flex;flex-direction:column;gap:2px;
  width:min(420px, 88vw);
  max-height:min(620px, calc(100vh - 100px));
  overflow-y:auto;
  padding:16px;
  background:var(--glass-bg-strong);backdrop-filter:var(--blur-panel);
  border:1px solid var(--glass-border);border-radius:16px;
  box-shadow:0 30px 70px -18px rgba(0,0,0,0.24);
}
.nav-menu-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;
  background:none;border:none;cursor:pointer;
  padding:11px 12px;border-radius:8px;
  transition:background var(--dur-micro) var(--ease-premium), color var(--dur-micro) var(--ease-premium);
}
.nav-menu-link:hover{background:var(--hover-tint);color:var(--gold-soft);}
.nav-menu-group-caret{width:16px;height:16px;flex:0 0 auto;transition:transform var(--dur-micro) var(--ease-premium);}
.nav-menu-group-btn[aria-expanded="true"] .nav-menu-group-caret{transform:rotate(180deg);}

/* "Consultar" — mosaicos con icono + descripción (referencia visual: un
   mega-menú tipo NavigationMenuContent, traducido a vanilla). */
.nav-menu-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  max-height:0;overflow:hidden;
  transition:max-height var(--dur-base) var(--ease-menu), padding var(--dur-base) var(--ease-menu);
  padding:0 4px;
}
.nav-menu-grid.is-open{max-height:400px;padding:4px 4px 12px;}
.nav-menu-tile{
  display:flex;flex-direction:column;gap:8px;
  padding:12px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);
  text-decoration:none;color:var(--ink);
  transition:border-color var(--dur-micro) var(--ease-premium), background var(--dur-micro) var(--ease-premium);
}
.nav-menu-tile:hover{border-color:var(--glass-border-strong);background:var(--hover-tint-soft);}
.nav-menu-tile-icon{
  width:28px;height:28px;flex:0 0 auto;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--icon-tint);color:var(--gold);
}
.nav-menu-tile-icon svg{width:15px;height:15px;}
.nav-menu-tile-text{display:flex;flex-direction:column;gap:2px;}
.nav-menu-tile-text strong{font-size:12.5px;font-weight:600;}
.nav-menu-tile-text span{font-size:10.5px;color:var(--muted);line-height:1.4;}

@media (max-width:560px){
  .nav-menu-panel{width:88vw;}
  .nav-menu-grid{grid-template-columns:1fr;}
  .nav-right{gap:10px;}
  .nav-locale-btn{padding:6px 10px;font-size:10px;}
}

/* ---- FOOTER (partials/footer.html) ---- */
#landing-footer{
  position:relative;
  padding:96px 24px 40px;
  text-align:center;
  border-top:1px solid var(--border);
  background:var(--footer-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:32px;
  max-width:1180px;
  margin:0 auto 48px;
  text-align:left;
}
.footer-col-brand{padding-right:24px;}
.footer-wordmark{
  font-size:12px;font-weight:500;
  letter-spacing:5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;opacity:0.8;
}
.footer-tagline{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:var(--fs-caption);color:var(--muted);margin-bottom:12px;opacity:0.7;
}
.footer-desc{
  font-size:var(--fs-kicker);line-height:1.6;color:var(--muted);opacity:0.55;
}
.footer-col-title{
  font-size:var(--fs-kicker);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:16px;opacity:0.85;
}
.footer-links{
  display:flex;flex-direction:column;gap:12px;
}
.footer-links a{
  font-size:12px;color:var(--muted);text-decoration:none;opacity:0.75;
  transition:color var(--dur-micro) var(--ease-premium),opacity var(--dur-micro) var(--ease-premium);
}
.footer-links a:hover{color:var(--gold-soft);opacity:1;}
.footer-copy{font-size:var(--fs-kicker);color:var(--muted);opacity:0.45;text-align:center;}

/* ---- WORDMARK GIGANTE — remate de marca del footer: el contorno queda
   siempre visible tenue; el color solo se revela donde pasa el cursor,
   como un foco que descubre el degradado dorado→frío (adaptación vanilla
   de un "text hover effect", sin framer-motion — ver
   js/core/footer-wordmark.js). Firma de "tecnología prodigiosa" reservada
   al footer: no se repite en otro sitio del layout. ---- */
.footer-hero-wordmark{
  margin-top:56px;width:100%;
  pointer-events:none;
}
.footer-wordmark-svg{
  display:block;width:100%;height:auto;max-height:200px;
  pointer-events:auto;
}
.footer-wordmark-outline,
.footer-wordmark-fill{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:300;
  font-size:150px;letter-spacing:0.01em;
  dominant-baseline:middle;
}
.footer-wordmark-outline{
  fill:none;stroke:var(--border);stroke-width:1;
}
.footer-wordmark-fill{
  fill:url(#footerWordmarkGradient);
}
@media (max-width:720px){
  .footer-wordmark-outline,.footer-wordmark-fill{font-size:78px;}
}

/* Wordmark monocromático — aplicado a toda la plataforma (antes aislado a
   body.page-veloris; Home se quedaba fuera por error, ver auditoría
   2026-08). No se toca partials/footer.html ni el diseño del wordmark: el
   degradado sigue siendo el mismo efecto de "foco que sigue el cursor"
   (js/core/footer-wordmark.js, sin cambios), solo cambian los 3
   stop-color del gradiente vía CSS (la propiedad `stop-color` gana sobre
   el atributo SVG del mismo nombre). */
#footerWordmarkGradient stop:nth-child(1){stop-color:var(--gh);}
#footerWordmarkGradient stop:nth-child(2){stop-color:var(--mu);}
#footerWordmarkGradient stop:nth-child(3){stop-color:var(--s1);}

@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr;gap:32px;text-align:center;}
  .footer-col-brand{padding-right:0;}
  .footer-links{align-items:center;}
}