/* ==========================================================================
   MENTORÍA DE SANACIÓN CUÁNTICA · CON SENTIDO — v2 "Cosmos"
   Arquetipo: Cinematic Storytelling. Escena cósmica persistente + contenido flotante.
   ========================================================================== */

/* ---------- Tipografía de marca (local) ---------- */
@font-face { font-family:"Gelica"; font-style:normal; font-weight:200; font-display:swap;
  src:url("assets/fonts/Gelica-Extra-Light.otf") format("opentype"); }
@font-face { font-family:"Gelica"; font-style:normal; font-weight:300; font-display:swap;
  src:url("assets/fonts/Gelica-Light.otf") format("opentype"); }
@font-face { font-family:"Gelica"; font-style:normal; font-weight:400; font-display:swap;
  src:url("assets/fonts/Gelica-Regular.otf") format("opentype"); }
@font-face { font-family:"Gelica"; font-style:italic; font-weight:400; font-display:swap;
  src:url("assets/fonts/Gelica-Italic.otf") format("opentype"); }
@font-face { font-family:"Gelica"; font-style:normal; font-weight:500; font-display:swap;
  src:url("assets/fonts/Gelica-Medium.otf") format("opentype"); }
@font-face { font-family:"Gelica"; font-style:normal; font-weight:600; font-display:swap;
  src:url("assets/fonts/Gelica-Semi-Bold.otf") format("opentype"); }
@font-face { font-family:"Gelica"; font-style:normal; font-weight:700; font-display:swap;
  src:url("assets/fonts/Gelica-Bold.otf") format("opentype"); }

/* ---------- Tokens ---------- */
:root{
  --void:      #060409;
  --void-2:    #0b0714;
  --nebula:    #170d28;

  --purple:    #5B286B;
  --purple-l:  #7c3d93;
  --lavender:  #8C74A3;
  --lav-soft:  #b7a3c9;

  --gold:      #B7AA88;
  --gold-l:    #d9cca6;
  --gold-d:    #8f8465;

  --marfil:    #F7F4E5;
  --text:      #ece7d6;
  --muted:     rgba(247,244,229,.70);
  --dim:       rgba(247,244,229,.44);
  --line:      rgba(247,244,229,.13);
  --line-lav:  rgba(140,116,163,.28);

  --serif: "Gelica", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --maxw: 1180px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --r: 18px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  overflow-x:clip;                 /* clip, no hidden: preserva sticky */
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0; overflow-x:clip;
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.68;
  font-weight:330;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; line-height:1.06; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold-l); outline-offset:3px; border-radius:4px; }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:10001;
  background:var(--marfil); color:var(--void); padding:.7rem 1.1rem;
  border-radius:8px; font-size:.85rem; transition:top .2s;
}
.skip:focus{ top:1rem; }

/* ==========================================================================
   CAPAS CÓSMICAS FIJAS  (el "escenario" del arquetipo)
   ========================================================================== */
.cosmos{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.cosmos-photo{
  position:absolute; inset:-6%;
  background:url("assets/img/cosmos-hero.webp") center/cover no-repeat;
  opacity:.76;
  transform:scale(1.06);
  will-change:transform,opacity;
  transition:opacity 1.4s var(--ease);
}
.cosmos-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Capas de contraste — obligatorias para leer sobre el cosmos */
.cosmos-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,4,9,.16) 0%, rgba(6,4,9,.48) 42%, rgba(6,4,9,.86) 100%),
    radial-gradient(120% 90% at 50% 8%, rgba(91,40,107,.28), transparent 62%);
}
.cosmos-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, transparent 26%, rgba(6,4,9,.42) 68%, rgba(6,4,9,.88) 100%),
    linear-gradient(180deg, rgba(6,4,9,.44) 0%, transparent 26%, transparent 74%, rgba(6,4,9,.78) 100%);
}
.cosmos-grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Todo el contenido va por encima del cosmos */
main, .nav, .foot, .dock{ position:relative; z-index:3; }

/* ==========================================================================
   SPLASH
   ========================================================================== */
.splash{
  position:fixed; inset:0; z-index:10000;
  background:var(--void);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), clip-path 1.1s var(--ease);
  animation:splashSafety .01s 4.5s forwards;   /* red de seguridad si el JS falla */
}
.splash.is-out{ opacity:0; visibility:hidden; pointer-events:none; clip-path:inset(0 0 100% 0); }
@keyframes splashSafety{ to{ opacity:0; visibility:hidden; pointer-events:none; clip-path:inset(0 0 100% 0); } }
.splash-inner{ display:grid; justify-items:center; gap:1.6rem; }
.splash-logo{ width:min(210px,44vw); opacity:.92; filter:brightness(0) invert(1); }
.splash-bar{ display:block; width:130px; height:1px; background:var(--line); overflow:hidden; }
.splash-bar i{
  display:block; height:100%; width:40%;
  background:linear-gradient(90deg,transparent,var(--gold-l),transparent);
  animation:splashSweep 1.25s var(--ease) infinite;
}
@keyframes splashSweep{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(340%);} }

/* ==========================================================================
   SECUENCIA NUMÉRICA
   Marca de agua en la esquina superior izquierda. Deliberadamente casi
   invisible: se percibe si se busca, no compite con nada.
   Va por encima del contenido pero por debajo del menú, y no intercepta clics.
   ========================================================================== */
.secuencia{
  position:fixed; top:.55rem; left:.6rem; z-index:7000;
  font-family:var(--mono); font-size:7px; line-height:1.5;
  letter-spacing:.06em; color:var(--marfil);
  opacity:.07; pointer-events:none; user-select:none;
  text-align:left; white-space:nowrap;
}
@media (max-width:860px){
  /* En movil el logo llega hasta el borde: la secuencia baja por debajo del
     menu para no pisar la marca. Sigue en la zona superior izquierda. */
  .secuencia{ font-size:6px; opacity:.06; top:4.7rem; left:.5rem; }
}
@media print{ .secuencia{ display:none; } }

/* ==========================================================================
   PROGRESO + CURSOR
   ========================================================================== */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9000; background:transparent; }
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--purple-l),var(--lav-soft),var(--gold-l));
}

.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease);   /* evita el punto en (0,0) */
}
.cursor.is-ready{ opacity:1; }
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; margin:-50% 0 0 -50%; }
.cursor-dot{ width:6px; height:6px; background:var(--gold-l); }
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(183,170,136,.45);
  transition:width .28s var(--ease), height .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.cursor.is-hot .cursor-ring{ width:58px; height:58px; border-color:rgba(217,204,166,.8); background:rgba(183,170,136,.10); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  padding:1.15rem 0; transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:.6rem 0; background:rgba(6,4,9,.82); border-bottom-color:var(--line);
}
@supports (backdrop-filter:blur(16px)){
  .nav.is-stuck{ background:rgba(6,4,9,.62); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
}
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.nav-brand{ flex:0 0 auto; line-height:0; }
.nav-logo{ width:132px; filter:brightness(0) invert(1); opacity:.94; transition:opacity .3s; }
.nav-brand:hover .nav-logo{ opacity:1; }
.nav-links{ display:flex; gap:1.55rem; margin-left:auto; }
.nav-links a{
  position:relative; text-decoration:none; font-size:.83rem; letter-spacing:.02em;
  color:var(--muted); padding-block:.35rem; transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold-l); transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav-links a:hover{ color:var(--marfil); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-toggle{ display:none; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-size:.88rem; font-weight:500; letter-spacing:.015em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .32s var(--ease), color .32s var(--ease), border-color .32s var(--ease);
}
.btn-sm{ padding:.62rem 1.2rem; font-size:.8rem; }
.btn-block{ display:flex; width:100%; }
.btn-gold{
  background:linear-gradient(135deg,var(--gold-l),var(--gold));
  color:#1a1409; box-shadow:0 6px 26px rgba(183,170,136,.22);
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(183,170,136,.34); }
.btn-ghost{ border-color:rgba(247,244,229,.26); color:var(--marfil); background:rgba(247,244,229,.03); }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--gold-l); background:rgba(183,170,136,.10); }
.nav-cta{ flex:0 0 auto; }

/* ==========================================================================
   ESTRUCTURA / TIPOS
   ========================================================================== */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap.narrow{ max-width:820px; }
.sec{ padding-block:clamp(5rem,11vh,8.5rem); }
.center{ text-align:center; margin-inline:auto; }

.kicker{
  font-family:var(--mono); font-size:.71rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.5rem;
}
.kicker.small{ margin-top:2.2rem; margin-bottom:.9rem; color:var(--lav-soft); }
.kicker.center{ text-align:center; }

.h2{
  font-size:clamp(1.95rem,4.4vw,3.5rem);
  letter-spacing:-.015em; text-wrap:balance;
  max-width:26ch; margin:0 0 1.6rem;
}
.h2.center{ max-width:26ch; }
.h2 em, .hero-title em, .close-title em{
  font-style:italic; font-weight:400;
  background:linear-gradient(115deg,#e8d6a6,#fdf6e2 42%,#cbb6e0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted); max-width:62ch; line-height:1.72; }
.lead.center{ max-width:56ch; }
.note{ font-size:.83rem; color:var(--dim); line-height:1.62; max-width:64ch; margin-bottom:0; }
.note.center{ margin-inline:auto; text-align:center; }

/* Halo de legibilidad para texto sobre el cosmos */
.halo{ position:relative; }
.halo::before{
  content:""; position:absolute; inset:-42px -56px; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(6,4,9,.86) 0%, rgba(6,4,9,.52) 58%, transparent 100%);
  filter:blur(10px); pointer-events:none;
}
.hero-title, .h2.halo, .close-title{ text-shadow:0 2px 26px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.7); }

/* Panel opaco para bloques de lectura densa */
.panel{
  background:rgba(9,6,16,.90);
  border:1px solid var(--line-lav);
  border-radius:var(--r);
  padding:clamp(1.7rem,4.4vw,3.5rem);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
@supports (backdrop-filter:blur(18px)){
  .panel{ background:rgba(9,6,16,.72); backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:grid; align-items:center;
  padding-block:9rem 6rem;
}
.hero-in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); width:100%; text-align:center; }
.hero-title{
  font-size:clamp(2.45rem,7.4vw,6rem);
  line-height:.99; letter-spacing:-.025em;
  text-wrap:balance; max-width:24ch; margin:0 auto 1.7rem;
}
.hero-sub{ font-size:clamp(1.02rem,1.7vw,1.24rem); color:var(--muted); max-width:60ch; margin:0 auto 2.4rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-bottom:3.4rem; }

.hero-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  max-width:820px; margin:0 auto;
  background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.hero-facts > div{ background:rgba(6,4,9,.62); padding:1.05rem .8rem; }
.hero-facts dt{ font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:.4rem; }
.hero-facts dd{ margin:0; font-size:.92rem; color:var(--marfil); }

/* Sol de marca */
.hero-sun{
  position:absolute; top:13%; right:-7%;
  width:clamp(190px,28vw,420px); height:auto;
  opacity:.24; pointer-events:none; z-index:-1;
  filter:drop-shadow(0 0 70px rgba(183,170,136,.4));
  animation:sunSpin 190s linear infinite;
  will-change:transform;
}
@keyframes sunSpin{ to{ transform:rotate(360deg); } }

.hero-scroll{
  position:absolute; bottom:2.1rem; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; transition:color .3s;
}
.hero-scroll:hover{ color:var(--gold-l); }
.hero-scroll span{ width:1px; height:48px; background:linear-gradient(180deg,transparent,var(--gold)); }

/* ==========================================================================
   01 · SEÑALES
   ========================================================================== */
.signals{ display:grid; gap:0; margin:2.6rem 0 3rem; border-top:1px solid var(--line); }
.signals li{
  position:relative; border-bottom:1px solid var(--line);
  padding:1.15rem 1rem 1.15rem 2.8rem;
  font-size:clamp(1rem,1.5vw,1.15rem); color:var(--text);
  transition:background .4s var(--ease), padding-left .4s var(--ease), color .4s var(--ease);
}
.signals li::before{
  content:"✦"; position:absolute; left:.85rem; top:1.2rem;
  color:var(--lavender); font-size:.8rem; transition:color .4s var(--ease), transform .4s var(--ease);
}
.signals li:hover{ background:rgba(91,40,107,.16); padding-left:3.2rem; color:var(--marfil); }
.signals li:hover::before{ color:var(--gold-l); transform:rotate(90deg); }

/* ==========================================================================
   02 · DESARROLLO
   ========================================================================== */
.develop{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem 2rem; margin:2.6rem 0 2.2rem; }
.develop li{ border-top:1px solid var(--line-lav); padding-top:1.1rem; }
.develop span{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; color:var(--gold); margin-bottom:.55rem; }
.develop b{ display:block; font-family:var(--serif); font-size:1.28rem; font-weight:400; color:var(--marfil); margin-bottom:.35rem; }
.develop p{ margin:0; font-size:.91rem; color:var(--muted); line-height:1.6; }

/* ==========================================================================
   03 · LO QUE CULTIVAS
   ========================================================================== */
.grid-cult{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1.1rem; margin-top:2.8rem; }
.cult{
  position:relative; overflow:hidden;
  background:rgba(11,7,20,.72);
  border:1px solid var(--line-lav); border-radius:var(--r);
  padding:1.75rem 1.6rem;
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.cult::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%, rgba(140,116,163,.22), transparent 70%);
  transition:opacity .45s var(--ease);
}
.cult:hover{ transform:translateY(-6px); border-color:rgba(183,170,136,.42); background:rgba(23,13,40,.8); }
.cult:hover::after{ opacity:1; }
.cult h3{ font-size:1.32rem; color:var(--marfil); margin-bottom:.6rem; }
.cult p{ margin:0; font-size:.9rem; color:var(--muted); line-height:1.62; }

/* ==========================================================================
   04 · ¿ES TU MOMENTO?
   ========================================================================== */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:2.6rem 0 2rem; }
.fit-col{ border-radius:var(--r); padding:1.7rem 1.6rem; border:1px solid var(--line-lav); }
.fit-yes{ background:linear-gradient(160deg, rgba(91,40,107,.24), rgba(11,7,20,.5)); }
.fit-no{ background:rgba(11,7,20,.55); }
.fit-col h3{ font-size:1.24rem; color:var(--marfil); margin-bottom:1.1rem; }
.fit-col li{ position:relative; padding-left:1.5rem; margin-bottom:.72rem; font-size:.93rem; color:var(--muted); line-height:1.55; }
.fit-yes li::before{ content:"✦"; position:absolute; left:0; top:.05rem; color:var(--gold-l); font-size:.72rem; }
.fit-no li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--lavender); }

/* ==========================================================================
   05 · MODALIDAD (timeline)
   ========================================================================== */
.timeline{ position:relative; margin-top:3rem; padding-left:2.2rem; }
.timeline::before{
  content:""; position:absolute; left:5px; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(180deg,var(--gold),var(--lavender),transparent);
}
.timeline li{ position:relative; padding-bottom:2.6rem; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-2.2rem; top:.55rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--void); border:1px solid var(--gold);
  box-shadow:0 0 0 4px rgba(6,4,9,.9);
}
.timeline .tl-special::before{ background:var(--gold-l); box-shadow:0 0 0 4px rgba(6,4,9,.9), 0 0 22px rgba(217,204,166,.6); }
.timeline .when{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 .4rem; }
.timeline h3{ font-size:1.5rem; color:var(--marfil); margin-bottom:.5rem; }
.timeline li > p:last-child{ margin:0; color:var(--muted); font-size:.96rem; max-width:56ch; }

/* ==========================================================================
   06 · BANDA CALENDARIO
   ========================================================================== */
.band{ position:relative; padding-block:clamp(5rem,12vh,8rem); overflow:hidden; text-align:center; }
.band-img{
  position:absolute; inset:0;
  background:url("assets/img/cosmos-galaxy.webp") center/cover no-repeat;
  opacity:.5;
}
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--void) 0%, rgba(6,4,9,.55) 30%, rgba(6,4,9,.62) 70%, var(--void) 100%);
}
.band-in{ position:relative; z-index:2; }
.band .kicker,.band .h2{ margin-inline:auto; }
.band .h2{ max-width:24ch; }
.band-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; margin:2.6rem auto 2rem; max-width:860px; }
.band-facts > div{ background:rgba(6,4,9,.78); border:1px solid var(--line-lav); border-radius:14px; padding:1.4rem 1.1rem; }
.band-facts b{ display:block; font-family:var(--serif); font-size:1.14rem; font-weight:400; color:var(--marfil); margin-bottom:.35rem; }
.band-facts p{ margin:0; font-size:.88rem; color:var(--muted); }

/* ==========================================================================
   07 · SHERLLY
   ========================================================================== */
.who{ display:grid; grid-template-columns:.85fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.who-photo{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-lav); }
.who-photo img{ width:100%; height:auto; filter:saturate(.88) contrast(1.04); }
.who-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(6,4,9,.88) 100%);
}
.who-photo figcaption{
  position:absolute; left:1.25rem; bottom:1.1rem; z-index:2; display:grid; gap:.15rem;
}
.who-photo figcaption b{ font-family:var(--serif); font-size:1.24rem; font-weight:400; color:var(--marfil); }
.who-photo figcaption span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.who-text p{ color:var(--muted); }
.tools{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.tools li{
  font-size:.79rem; color:var(--lav-soft);
  border:1px solid var(--line-lav); border-radius:999px; padding:.42rem .95rem;
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.tools li:hover{ border-color:var(--gold); color:var(--gold-l); background:rgba(183,170,136,.08); }

/* ==========================================================================
   08 · INVERSIÓN
   ========================================================================== */
.price{
  background:linear-gradient(165deg, rgba(91,40,107,.30), rgba(9,6,16,.92) 60%);
  border:1px solid rgba(183,170,136,.30); border-radius:24px;
  padding:clamp(1.9rem,4.5vw,3.2rem); text-align:center; margin-top:2.5rem;
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}
.price-head{ padding-bottom:1.6rem; border-bottom:1px solid var(--line); margin-bottom:1.7rem; }
.price-amount{
  font-family:var(--serif); font-size:clamp(3rem,8vw,4.6rem); line-height:1; margin:0 0 .35rem;
  background:linear-gradient(120deg,var(--gold-l),var(--marfil),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.price-per{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 .9rem; }
.price-usd{ margin:0; font-size:.95rem; color:var(--lav-soft); }
.price-list{ display:grid; gap:.72rem; margin-bottom:2rem; text-align:left; max-width:420px; margin-inline:auto; }
.price-list li{ position:relative; padding-left:1.5rem; font-size:.93rem; color:var(--muted); }
.price-list li::before{ content:"✦"; position:absolute; left:0; top:.1rem; color:var(--gold); font-size:.7rem; }
.price .note{ margin-top:1.4rem; margin-inline:auto; text-align:center; }

/* ==========================================================================
   09 · FAQ
   ========================================================================== */
.faq{ margin:2.4rem 0 2.2rem; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.08rem,1.9vw,1.3rem); color:var(--marfil);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.3rem; font-weight:300; color:var(--gold);
  transition:transform .38s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq summary:hover{ color:var(--gold-l); }
.faq details p{ margin:0 0 1.35rem; color:var(--muted); font-size:.96rem; max-width:62ch; }

/* ==========================================================================
   CIERRE
   ========================================================================== */
.close{ padding-block:clamp(6rem,14vh,10rem); text-align:center; }
.close-title{
  font-size:clamp(2.1rem,5.6vw,4.3rem); line-height:1.04; letter-spacing:-.02em;
  text-wrap:balance; max-width:18ch; margin:0 auto 1.8rem;
}
.close .hero-cta{ margin-top:2.6rem; margin-bottom:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ border-top:1px solid var(--line); background:rgba(4,3,7,.9); padding-block:3.6rem 2.2rem; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.4rem; margin-bottom:2.8rem; }
.foot-logo{ width:150px; filter:brightness(0) invert(1); opacity:.9; margin-bottom:1.1rem; }
.foot-brand p{ font-size:.87rem; color:var(--dim); max-width:34ch; }
.foot-wa{ font-family:var(--mono); font-size:.78rem; color:var(--gold); text-decoration:none; transition:color .3s; }
.foot-wa:hover{ color:var(--gold-l); }
.foot-col h4{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.foot-col a{ display:block; font-size:.87rem; color:var(--muted); text-decoration:none; margin-bottom:.6rem; transition:color .3s, transform .3s var(--ease); }
.foot-col a:hover{ color:var(--marfil); transform:translateX(3px); }
.foot-note{ font-size:.78rem; color:var(--dim); border-top:1px solid var(--line); padding-top:1.6rem; max-width:70ch; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; align-items:baseline; }
.foot-bottom p{ margin:0; font-size:.76rem; color:var(--dim); }
.foot-credits{ max-width:62ch; }
.foot-credits a{ color:var(--lav-soft); text-decoration:underline; text-underline-offset:2px; }
.foot-credits a:hover{ color:var(--gold-l); }

/* ==========================================================================
   DOCK CTA
   ========================================================================== */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:8500;
  transform:translateY(115%); transition:transform .55s var(--ease);
  pointer-events:none;
}
.dock.is-up{ transform:translateY(0); pointer-events:auto; }
.dock-in{
  max-width:var(--maxw); margin-inline:auto; margin-bottom:.9rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  background:rgba(9,6,16,.94); border:1px solid var(--line-lav);
  border-radius:999px; padding:.7rem .7rem .7rem 1.6rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
@supports (backdrop-filter:blur(18px)){
  .dock-in{ background:rgba(9,6,16,.78); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
}
.dock-in p{ margin:0; display:grid; line-height:1.3; }
.dock-in b{ font-family:var(--serif); font-size:1rem; font-weight:400; color:var(--marfil); }
.dock-in span{ font-size:.76rem; color:var(--dim); }
@media (max-width:640px){
  .dock-in{ margin-inline:.6rem; padding-left:1.1rem; }
  .dock-in b{ font-size:.86rem; }
  .dock-in span{ font-size:.68rem; }
}

/* ==========================================================================
   REVELADOS (JS añade .is-revealed / GSAP anima [data-split])
   ========================================================================== */
/* El estado oculto SOLO se activa cuando el JS ha arrancado (body.js-on).
   Si el JS nunca carga, todo el contenido se ve: contenido primero. */
[data-reveal]{ transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
html.js-on [data-reveal]{ opacity:0; transform:translateY(26px); }
html.js-on [data-reveal].is-revealed{ opacity:1; transform:none; }

/* DEFENSA: un elemento con reveal + split nunca puede quedar invisible */
html.js-on [data-reveal][data-split]{ opacity:1; transform:none; }

.split-word{ display:inline-block; will-change:transform,opacity; }
[data-split] em .split-word, .split-word em{ font-style:italic; }

/* ==========================================================================
   HERO · prueba social bajo los datos
   ========================================================================== */
.hero-proof{
  margin:1.5rem auto 0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}

/* ==========================================================================
   03 · QUÉ INCLUYE (pila de valor)
   ========================================================================== */
.stack{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1.1rem; margin-top:2.8rem; }
.stack-item{
  position:relative; background:rgba(11,7,20,.74);
  border:1px solid var(--line-lav); border-radius:var(--r);
  padding:1.75rem 1.6rem;
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.stack-item:hover{ transform:translateY(-6px); border-color:rgba(183,170,136,.42); background:rgba(23,13,40,.82); }
.stack-item .stack-n{
  font-family:var(--serif); font-size:2.7rem; line-height:1; margin:0 0 .55rem;
  background:linear-gradient(120deg,var(--gold-l),var(--lav-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stack-item h3{ font-size:1.24rem; color:var(--marfil); margin-bottom:.5rem; }
.stack-item p{ margin:0; font-size:.9rem; color:var(--muted); line-height:1.6; }
.stack-hero{
  background:linear-gradient(160deg, rgba(91,40,107,.34), rgba(11,7,20,.7));
  border-color:rgba(183,170,136,.42);
}

.anchor-box{
  margin-top:2.2rem; text-align:center;
  background:rgba(9,6,16,.86); border:1px solid rgba(183,170,136,.30);
  border-radius:var(--r); padding:clamp(1.6rem,3.6vw,2.6rem);
}
@supports (backdrop-filter:blur(16px)){
  .anchor-box{ background:rgba(9,6,16,.68); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
}
.anchor-line{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--marfil); margin:0 0 .5rem; }
.anchor-line b{ font-weight:400; color:var(--gold-l); }
.anchor-sub{ font-size:.92rem; color:var(--muted); margin:0 0 1.6rem; }

/* ==========================================================================
   05 · TESTIMONIOS
   ========================================================================== */
.testis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem; margin-top:1rem; }
.testi{
  margin:0; background:rgba(11,7,20,.78); border:1px solid var(--line-lav);
  border-radius:var(--r); padding:1.9rem 1.7rem 1.6rem; position:relative;
  /* columna flex: las firmas quedan alineadas abajo aunque el texto varíe */
  display:flex; flex-direction:column;
}
.testi::before{
  content:"\201C"; position:absolute; top:.2rem; left:1.1rem;
  font-family:var(--serif); font-size:4rem; line-height:1; color:rgba(183,170,136,.28);
}
.testi blockquote{ margin:0 0 1.2rem; font-size:.98rem; color:var(--text); line-height:1.68; position:relative; flex:1; }
.testi figcaption{ display:grid; gap:.15rem; border-top:1px solid var(--line); padding-top:.9rem; }
.testi figcaption b{ font-family:var(--serif); font-size:1.06rem; font-weight:400; color:var(--marfil); }
.testi figcaption span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

/* ==========================================================================
   06 · TEMARIO (variante del acordeón)
   ========================================================================== */
.modules summary{ padding-left:3.2rem; }
.modules summary i{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-style:normal; font-size:.72rem; letter-spacing:.1em; color:var(--gold);
}
.modules details .mod-lead{ color:var(--lav-soft); font-size:.93rem; margin-bottom:1rem; max-width:62ch; }
.modules ul{ display:grid; gap:.5rem; margin-bottom:1.5rem; }
.modules ul li{
  position:relative; padding-left:1.4rem; font-size:.92rem; color:var(--muted); line-height:1.55;
}
.modules ul li::before{ content:"\2726"; position:absolute; left:0; top:.1rem; color:var(--gold); font-size:.62rem; }

/* ==========================================================================
   08 · CALENDARIO
   ========================================================================== */
.cal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:.9rem; margin:2.6rem auto 2rem; text-align:left; }
.cal-m{
  background:rgba(6,4,9,.82); border:1px solid var(--line-lav); border-radius:14px; padding:1.2rem 1.1rem;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.cal-m:hover{ border-color:rgba(183,170,136,.42); background:rgba(23,13,40,.8); }
.cal-m h3{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.85rem;
}
.cal-m li{ font-size:.86rem; color:var(--muted); padding:.28rem 0; border-bottom:1px solid rgba(247,244,229,.07); }
.cal-m li:last-child{ border-bottom:0; }
.cal-m li b{ color:var(--marfil); font-weight:500; margin-right:.4rem; }
.cal-special{ background:linear-gradient(160deg, rgba(91,40,107,.38), rgba(6,4,9,.8)); border-color:rgba(183,170,136,.45); }
.cal-note{ color:var(--dim) !important; font-size:.76rem !important; font-style:italic; }


/* ==========================================================================
   10-11 · INVERSIÓN Y PASOS
   ========================================================================== */
.price-terms{ font-size:.88rem; color:var(--muted); max-width:52ch; margin:0 auto 1.8rem; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.8rem; }
.steps li{
  background:rgba(11,7,20,.74); border:1px solid var(--line-lav); border-radius:var(--r);
  padding:1.7rem 1.5rem; text-align:center;
}
.steps span{
  display:grid; place-items:center; width:42px; height:42px; margin:0 auto 1rem;
  border-radius:50%; border:1px solid var(--gold); color:var(--gold-l);
  font-family:var(--mono); font-size:.85rem;
}
.steps h3{ font-size:1.16rem; color:var(--marfil); margin-bottom:.5rem; }
.steps p{ margin:0; font-size:.89rem; color:var(--muted); line-height:1.58; }


/* ==========================================================================
   PÁGINAS LEGALES (privacidad.html)
   Fondo cósmico en reposo: sin canvas ni foto, para no distraer de la lectura.
   ========================================================================== */
.cosmos-quiet .cosmos-scrim{
  background:
    linear-gradient(180deg, rgba(23,13,40,.55) 0%, rgba(6,4,9,.92) 55%, var(--void) 100%);
}

.nav-links-legal{ margin-left:auto; }
.nav-links-legal a{ font-size:.83rem; }

.legal-main{ padding:8.5rem 0 5rem; }
.legal-title{
  font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.02em;
  margin:0 0 .7rem; text-wrap:balance;
}
.legal-meta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:2.6rem;
}

.legal{ font-size:1rem; line-height:1.78; color:var(--muted); }
.legal h2{
  font-size:clamp(1.32rem,2.4vw,1.72rem); color:var(--marfil);
  margin:2.9rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.legal h3{
  font-size:1.1rem; color:var(--lav-soft); font-family:var(--sans);
  font-weight:500; margin:1.9rem 0 .6rem;
}
.legal p{ margin:0 0 1.15em; max-width:68ch; }
.legal ul{ display:grid; gap:.6rem; margin:0 0 1.5em; max-width:68ch; }
.legal li{ position:relative; padding-left:1.5rem; }
.legal li::before{
  content:"º6"; position:absolute; left:0; top:.15rem;
  color:var(--gold); font-size:.6rem;
}
.legal b{ color:var(--marfil); font-weight:500; }
.legal a{ color:var(--gold-l); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--marfil); }
.legal .mono{
  font-family:var(--mono); font-size:.86em; color:var(--lav-soft);
  background:rgba(140,116,163,.14); padding:.12em .45em; border-radius:5px;
}

.legal-intro{ font-size:1.08rem; color:var(--text); }

.legal-highlight{
  background:linear-gradient(160deg, rgba(91,40,107,.30), rgba(11,7,20,.72));
  border:1px solid rgba(183,170,136,.34); border-radius:var(--r);
  padding:1.4rem 1.5rem; margin:0 0 2.4rem !important; color:var(--text);
  max-width:none !important;
}

.legal-warn{
  border-left:2px solid var(--gold); background:rgba(183,170,136,.07);
  border-radius:0 10px 10px 0; padding:1.1rem 1.3rem; color:var(--text);
}

.legal-back{ margin-top:3.4rem; }

@media (max-width:620px){
  .legal-main{ padding-top:7rem; }
  .legal h2{ margin-top:2.3rem; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .who{ grid-template-columns:1fr; }
  .who-photo{ max-width:420px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; align-items:center; gap:1.6rem;
    background:rgba(6,4,9,.97); margin:0;
    /* visibility es binaria: aunque la transición de opacidad se quede a medias,
       el panel cerrado nunca puede tapar la pantalla. */
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .4s var(--ease), visibility 0s linear .4s;
  }
  .nav-links a{ font-size:1.35rem; font-family:var(--serif); color:var(--marfil); }
  .nav.is-open .nav-links{
    opacity:1; visibility:visible; pointer-events:auto; z-index:1;
    transition:opacity .4s var(--ease), visibility 0s linear 0s;
  }
  .nav-cta{ margin-left:auto; }
  .nav-toggle{
    display:grid; gap:5px; place-content:center; width:42px; height:42px;
    background:none; border:1px solid var(--line); border-radius:50%; cursor:pointer; padding:0;
    position:relative; z-index:2;
  }
  .nav-toggle span{ display:block; width:16px; height:1px; background:var(--marfil); transition:transform .35s var(--ease), opacity .35s; }
  .nav.is-open .nav-toggle span:first-child{ transform:translateY(3px) rotate(45deg); }
  .nav.is-open .nav-toggle span:last-child{ transform:translateY(-3px) rotate(-45deg); }
  .hero-facts{ grid-template-columns:1fr 1fr; }
  .fit{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .nav-logo{ width:108px; }
  .hero{ padding-block:7.5rem 5rem; }
  .hero-sun{ top:4%; right:-22%; opacity:.22; }
  .hero-cta .btn{ width:100%; }
  .hero-facts{ grid-template-columns:1fr; }
  .halo::before{ inset:-24px -22px; }
  .signals li{ padding-left:2.4rem; font-size:1rem; }
  .timeline{ padding-left:1.7rem; }
  .timeline li::before{ left:-1.7rem; }
  .foot-grid{ grid-template-columns:1fr; }
  .dock-in p{ max-width:56%; }
  .cal{ grid-template-columns:1fr 1fr; }
  .modules summary{ padding-left:2.6rem; }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO
   Solo se apaga lo intrusivo. Los micro-gestos (hover, tilt, fades) siguen vivos
   porque en muchos Windows esta preferencia está activada sin que nadie la pida.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .cosmos-canvas{ display:none; }        /* campo de estrellas: intrusivo */
  .hero-sun{ animation:none; }           /* giro infinito: intrusivo */
  .splash-bar i{ animation:none; }
  /* NO se desactivan hovers, fades ni transiciones: son feedback, no adorno */
}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print{
  .cosmos,.splash,.cursor,.progress,.dock,.nav,.hero-scroll{ display:none !important; }
  body{ background:#fff; color:#000; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}