/* ============================================================
   COSMOS Y ESENCIA — Hoja de estilos
   Paleta oficial de marca (los mismos Pantone de tu manual):

     #131A29  289 C          → noche profunda (fondo base)
     #232F4C  533 C          → superficies / tarjetas
     #374462  7545 C         → líneas y bordes
     #473A68  2685 C         → nebulosa oscura
     #7D6BAE  2645 C         → nebulosa viva
     #B9A8D6  2635 C         → lavanda (textos secundarios)
     #F2CC91  7404 C         → oro claro (brillos)
     #E6B96C  7555 C         → oro (botones y acentos)
     #F7F3EE  Warm Gray 1 C  → marfil (textos principales)
   ============================================================ */

:root{
  /* — Color — */
  --noche:        #131A29;
  --noche-honda:  #0B111D;   /* variante aún más oscura, para el pie */
  --superficie:   #232F4C;
  --pizarra:      #374462;
  --violeta-hondo:#473A68;
  --violeta:      #7D6BAE;
  --lavanda:      #B9A8D6;
  --oro-claro:    #F2CC91;
  --oro:          #E6B96C;
  --marfil:       #F7F3EE;

  /* Derivados: textos y líneas sobre fondo oscuro */
  --texto:        rgba(247,243,238,.82);
  --texto-suave:  rgba(185,168,214,.80);
  --linea:        rgba(185,168,214,.18);
  --linea-fuerte: rgba(185,168,214,.34);
  --vidrio:       rgba(35,47,76,.42);   /* fondo de las tarjetas */

  /* — Tipografía — */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* — Ritmo — */
  --wrap: 1080px;
  --aire: clamp(4.5rem, 10vw, 9rem);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:5rem; background:var(--noche); }

body{
  margin:0;
  background:transparent;          /* el fondo real lo pinta .cielo */
  color:var(--texto);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--marfil);
  line-height:1.12;
  margin:0;
  letter-spacing:.005em;
}
h1{ font-size:clamp(2.35rem, 5vw, 3.7rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); }
h3{ font-size:1.35rem; }
h1 em{ font-style:italic; color:var(--oro); font-weight:300; }

p{ margin:0 0 1.1rem; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

/* ============================================================
   EL CIELO — las tres capas del fondo
   Todo va en position:fixed para que acompañe el scroll,
   y con pointer-events:none para que nunca estorbe al hacer clic.
   ============================================================ */
.cielo{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, #1A2338 0%, transparent 60%),
    linear-gradient(180deg, var(--noche) 0%, #101828 45%, var(--noche-honda) 100%);
  overflow:hidden;
}

/* 1. Nebulosas: manchas de color desenfocadas que respiran muy despacio */
.cielo__nebulosa{
  position:absolute; inset:-25%;
  background:
    radial-gradient(38% 30% at 16% 20%, rgba(125,107,174,.34), transparent 70%),
    radial-gradient(34% 30% at 84% 34%, rgba(71,58,104,.46), transparent 72%),
    radial-gradient(32% 26% at 62% 78%, rgba(55,68,98,.42), transparent 72%),
    radial-gradient(22% 18% at 28% 66%, rgba(230,185,108,.09), transparent 70%);
  filter:blur(46px);
  will-change:transform;
  animation:nebulosa 96s ease-in-out infinite alternate;
}
@keyframes nebulosa{
  from{ transform:translate3d(-2.5%, 1%, 0) scale(1); }
  to  { transform:translate3d(3%, -2.5%, 0) scale(1.14); }
}

/* 2. Estrellas: lo dibuja cielo.js dentro de este canvas */
#cielo-estrellas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* 3. Viñeta: oscurece las orillas para que el texto siempre se lea */
.cielo__vineta{
  position:absolute; inset:0;
  background:radial-gradient(125% 95% at 50% 38%, transparent 42%, rgba(6,10,20,.70) 100%);
}

/* ---------- Etiquetas pequeñas ---------- */
.eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--oro);
  margin:0 0 1.1rem;
  font-weight:400;
}

.microcopy{
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--texto-suave);
  margin:1rem 0 0;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05em 2.4em;
  border-radius:999px;
  border:1px solid transparent;
  transition:box-shadow .35s ease, transform .35s ease,
             background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover{ transform:translateY(-2px); }

/* Botón principal: oro sólido sobre la noche. Es el único elemento
   que brilla de verdad, para que la vista sepa a dónde ir. */
.btn--solid{
  background:linear-gradient(160deg, var(--oro-claro), var(--oro));
  color:var(--noche);
  font-weight:500;
  box-shadow:0 10px 30px -14px rgba(230,185,108,.75);
}
.btn--solid:hover{ box-shadow:0 16px 40px -14px rgba(242,204,145,.9); }

.btn--ghost{ border-color:var(--linea-fuerte); color:var(--marfil); background:transparent; }
.btn--ghost:hover{ border-color:var(--oro); color:var(--oro-claro); }

.btn--sm{ padding:.7em 1.5em; font-size:.68rem; }

:focus-visible{ outline:2px solid var(--oro-claro); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--oro); color:var(--noche);
  padding:.8rem 1.2rem; font-size:.8rem; text-decoration:none;
}
.skip-link:focus{ left:.5rem; top:.5rem; }

/* ---------- Glifo del eclipse ---------- */
.glyph{ width:26px; height:26px; color:var(--oro); }
.glyph--lg{ width:46px; height:46px; }

.divider{
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  padding:clamp(3rem,7vw,5rem) 1rem;
}
.divider::before,
.divider::after{
  content:""; height:1px; width:min(24vw, 190px);
  background:linear-gradient(to right, transparent, var(--linea-fuerte), transparent);
}

/* ============================================================
   ENCABEZADO
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:rgba(11,17,29,.35);
  border-bottom:1px solid transparent;
  transition:background-color .4s ease, border-color .4s ease;
}
.topbar.is-stuck{
  background:rgba(11,17,29,.82);
  border-bottom-color:var(--linea);
}
.topbar__inner{
  width:min(100% - 2.5rem, 1220px); margin-inline:auto;
  display:flex; align-items:center; gap:2rem;
  padding:.85rem 0;
}

.marca{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; margin-right:auto;
}
.marca__icono{
  width:34px; height:auto;
  filter:drop-shadow(0 0 10px rgba(230,185,108,.45));
}
.marca__texto{
  font-family:var(--display);
  font-size:1.02rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--marfil);
}

.topnav{ display:flex; gap:2.2rem; }
.topnav a{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-suave); text-decoration:none;
  transition:color .3s ease;
}
.topnav a:hover{ color:var(--oro-claro); }

/* ============================================================
   PORTADA
   El banner es PNG transparente, así que se apoya en el cielo.
   El "aura" es un halo dorado detrás para dar profundidad.
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(2.5rem,7vw,5rem) 0 0;
  text-align:center;
}
.hero__aura{
  position:absolute; left:50%; top:-6%;
  width:min(100%, 1200px); aspect-ratio:1.7/1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 45%, rgba(230,185,108,.16), rgba(125,107,174,.10) 42%, transparent 68%);
  pointer-events:none;
}
.hero__banner{
  position:relative;
  width:min(100% - 2.5rem, 900px);
  margin-inline:auto;
  animation:aparecer 1.4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes aparecer{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}

.hero__copy{
  position:relative;
  width:min(100% - 2.5rem, 780px);
  margin:clamp(1.5rem,4vw,3rem) auto 0;
}
.hero__copy .lede{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  margin:1.8rem auto 2.4rem;
  max-width:52ch;
}
.hero h1{ margin-bottom:0; }

/* ============================================================
   LOS LIBROS
   ============================================================ */
.books{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.book{
  display:grid;
  grid-template-columns:minmax(240px, 38%) 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:center;
  padding:clamp(2.2rem, 5vw, 3.4rem);
  border-radius:6px;
  background:var(--vidrio);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--linea);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.book + .book{ margin-top:clamp(2rem,4vw,3rem); }

/* --- Portada dibujada con CSS (mientras no tengas la imagen real) --- */
.book__cover{ position:relative; }
.book__cover::before{
  content:""; position:absolute; inset:-16% -12%;
  background:radial-gradient(circle at 50% 45%, rgba(230,185,108,.20), transparent 68%);
  z-index:0;
}
.book__cover img{
  position:relative; z-index:1;
  border-radius:3px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.85);
}

.tomo{
  position:relative; z-index:1;
  aspect-ratio:1/1.42;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem;
  padding:2rem 1.5rem;
  text-align:center;
  border-radius:3px;
  border:1px solid rgba(230,185,108,.30);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9), inset 0 0 60px rgba(125,107,174,.16);
  overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.3,1), box-shadow .6s ease;
}
.tomo--renacer{ background:linear-gradient(165deg, #232F4C 0%, #131A29 55%, #0B111D 100%); }
.tomo--matriz { background:linear-gradient(165deg, #473A68 0%, #232F4C 55%, #131A29 100%); }

/* El lomo del libro: una franja de luz en el borde izquierdo */
.tomo::before{
  content:""; position:absolute; inset:0 auto 0 0; width:9px;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.07));
}
/* Marco dorado interior */
.tomo::after{
  content:""; position:absolute; inset:14px 12px;
  border:1px solid rgba(230,185,108,.22);
  border-radius:2px; pointer-events:none;
}
.book:hover .tomo{
  transform:translateY(-7px);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.95), inset 0 0 70px rgba(125,107,174,.24);
}

.tomo__marca{ width:34%; margin-bottom:1rem; opacity:.95; }
.tomo__kicker{
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--lavanda); margin:0 0 .8rem;
}
.tomo__titulo{
  font-family:var(--display); font-size:clamp(1.4rem,3.2vw,1.9rem);
  color:var(--oro-claro); line-height:1.15; margin:0;
}
.tomo__rule{ display:block; width:44px; height:1px; background:rgba(230,185,108,.5); margin:.9rem 0; }
.tomo__sub{
  font-family:var(--display); font-style:italic; font-size:.92rem;
  color:var(--texto); margin:0; max-width:18ch;
}
.tomo__pie{
  position:absolute; bottom:1.6rem; left:0; right:0;
  font-size:.5rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(185,168,214,.62); margin:0;
}

.book__sub{
  font-family:var(--display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--oro);
  margin:.6rem 0 1.5rem;
  line-height:1.4;
}
.book__text{ max-width:56ch; }

.specs{ list-style:none; margin:2rem 0; padding:0; }
.specs li{
  border-top:1px solid var(--linea);
  padding:.85rem 0;
  font-size:.94rem;
}
.specs li:last-child{ border-bottom:1px solid var(--linea); }
.specs span{
  display:inline-block; min-width:5.5rem;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--texto-suave);
}

.buyline{ display:flex; align-items:center; flex-wrap:wrap; gap:1.6rem; }

.price{
  font-family:var(--display);
  font-size:2.3rem; color:var(--marfil);
  margin:0; line-height:1;
}
.price span{
  font-family:var(--sans);
  font-size:.7rem; letter-spacing:.2em;
  color:var(--texto-suave); vertical-align:.9em; margin-left:.2rem;
}

/* ============================================================
   CÓMO LLEGA
   Banda de ancho completo, un poco más clara que el cielo.
   ============================================================ */
.process{
  position:relative;
  background:linear-gradient(180deg, rgba(35,47,76,.0), rgba(35,47,76,.55) 22%, rgba(35,47,76,.55) 78%, rgba(35,47,76,0));
  padding-block:var(--aire);
  margin-top:var(--aire);
  text-align:center;
}
.section-title{ margin-bottom:3rem; }

.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,5vw,3.5rem);
  text-align:left;
}
.steps li{ position:relative; padding-top:2.6rem; }
.steps__n{
  position:absolute; top:0; left:0;
  font-family:var(--display);
  font-size:1.5rem; color:var(--oro-claro);
  letter-spacing:.08em;
}
.steps li::before{
  content:""; position:absolute; top:1.9rem; left:0; right:0;
  height:1px; background:linear-gradient(to right, rgba(230,185,108,.35), rgba(230,185,108,.05));
}
.steps h3{ font-size:1.25rem; margin-bottom:.5rem; }
.steps p{ font-size:.93rem; margin:0; }

.process__note{
  margin:3.5rem auto 0; max-width:52ch;
  font-size:.86rem; color:var(--texto-suave);
}

/* ============================================================
   PREGUNTAS
   ============================================================ */
.faq{ padding-block:var(--aire); text-align:center; }
.faq .wrap{ max-width:760px; }

.faq details{
  border-bottom:1px solid var(--linea);
  text-align:left;
}
.faq details:first-of-type{ border-top:1px solid var(--linea); }

.faq summary{
  cursor:pointer; list-style:none;
  padding:1.4rem 2.5rem 1.4rem 0;
  position:relative;
  font-family:var(--display);
  font-size:1.28rem; color:var(--marfil);
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--oro-claro); }
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--sans); font-weight:300; font-size:1.4rem;
  color:var(--oro); transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{
  margin:0 0 1.5rem; padding-right:2.5rem;
  font-size:.96rem;
}

/* ============================================================
   CIERRE — el momento del eclipse
   ============================================================ */
.closing{
  position:relative;
  padding-block:calc(var(--aire) * 1.2);
  text-align:center;
  overflow:hidden;
}
.closing__aura{
  position:absolute; left:50%; top:50%;
  width:min(140vw, 1100px); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(230,185,108,.17) 0%, rgba(125,107,174,.12) 34%, rgba(125,107,174,.05) 54%, rgba(125,107,174,.01) 72%, transparent 84%);
  pointer-events:none;
  animation:latido 9s ease-in-out infinite alternate;
}
@keyframes latido{
  from{ opacity:.75; transform:translate(-50%,-50%) scale(.94); }
  to  { opacity:1;   transform:translate(-50%,-50%) scale(1.06); }
}
.closing blockquote{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  line-height:1.35;
  color:var(--marfil);
  max-width:20ch;
  margin:1.8rem auto 2.6rem;
}

/* ============================================================
   PIE
   ============================================================ */
.foot{
  position:relative;
  background:var(--noche-honda);
  color:var(--texto-suave);
  padding:4.5rem 0 3rem;
  text-align:center;
  border-top:1px solid var(--linea);
}
.foot__inner{ width:min(100% - 2.5rem, 640px); margin-inline:auto; }
.foot__logo{
  width:min(290px, 72%);
  margin:0 auto 2.2rem;
  filter:drop-shadow(0 0 26px rgba(230,185,108,.18));
}
.foot__legal{ font-size:.8rem; line-height:1.8; }
.foot__legal a{ color:var(--oro-claro); }

/* ============================================================
   ANIMACIÓN DE ENTRADA
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .steps{ grid-template-columns:1fr; gap:2.4rem; }
  .steps li::before{ display:none; }
  .steps li{ padding-top:0; padding-left:3.2rem; }
  .steps__n{ top:.15rem; }
}

@media (max-width:780px){
  .topnav{ display:none; }
  .btn{ white-space:nowrap; }
  .marca__texto{ font-size:.85rem; letter-spacing:.18em; }
  .marca__icono{ width:28px; }

  /* El logo vertical del inicio: más chico y con aire alrededor */
  .hero__banner{ width:min(100% - 3.5rem, 340px); }
  .hero{ padding-top:clamp(1.5rem,6vw,3rem); }
  .hero__copy{ margin-top:2.6rem; }

  .book,
  .book--flip{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .book__cover{ max-width:250px; width:100%; }
  .book__text{ max-width:60ch; }
  .specs li{ text-align:left; }
  .specs span{ display:block; min-width:0; margin-bottom:.15rem; }
  .buyline{ justify-content:center; }
  .faq summary{ font-size:1.15rem; }
}

/* En escritorio, el segundo libro invierte el orden: texto | portada */
@media (min-width:781px){
  .book--flip{ grid-template-columns:1fr minmax(240px, 38%); }
  .book--flip .book__cover{ grid-column:2; grid-row:1; }
  .book--flip .book__body{ grid-column:1; grid-row:1; }
}

@media (max-width:560px){
  /* En pantallas angostas el botón del encabezado estorba */
  .topbar .btn--ghost{ display:none; }
}

/* ============================================================
   MENOS MOVIMIENTO
   Si la persona configuró su sistema para reducir animaciones,
   el cielo se queda quieto (cielo.js también lo detecta).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__banner{ opacity:1; transform:none; }
}