/* Astralizer · página de presentación
   La página se lee completa sin JS. Los estados ocultos para la entrada
   animada existen solo bajo html.js y sin reducción de movimiento.
   Las animaciones tocan solo transform y opacity. */

/* ---------- Fuentes (OFL, copias locales) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-5.3.0/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-5.3.0/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-5.3.0/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-5.3.0/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --noche: #12100e;
  --carbon: #1b1815;
  --ceniza: #26221d;
  --oro: #e8b458;
  --oro-hondo: #c99a4b;
  --pergamino: #d8cdb8;
  --humo: #8d8478;
  --linea: rgba(232, 180, 88, 0.28);
  --linea-suave: rgba(216, 205, 184, 0.12);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margen: 16px;
  --ancho: 1120px;
  --barra-alto: 64px;

  /* Escena: proporción de las capas (1920×1072) */
  --ar: 1.791;
  --dw: max(100vw, calc(100vh * var(--ar)));
  --dw: max(100vw, calc(100svh * var(--ar)));
  --dh: calc(var(--dw) / var(--ar));

  color-scheme: dark;
}
@media (min-width: 700px) {
  :root { --margen: 32px; --barra-alto: 72px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--pergamino);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
cite { font-style: normal; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

.sr-solo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: fixed; left: var(--margen); top: 8px; z-index: 200;
  padding: .5rem .9rem; background: var(--oro); color: var(--noche);
  border-radius: 6px; text-decoration: none; font-weight: 500;
  opacity: 0; pointer-events: none;
}
.saltar:focus-visible { opacity: 1; pointer-events: auto; }

/* Lenis (sus reglas mínimas, sin hoja aparte) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Barra ---------- */
.barra {
  position: fixed; z-index: 50;
  top: 10px; left: var(--margen); right: var(--margen);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marca entrar" "menu menu";
  align-items: center;
  gap: 2px 12px;
  padding: 8px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgba(18, 16, 14, 0.78);
}
.marca {
  grid-area: marca;
  font-family: var(--serif); font-size: 1.6rem; line-height: 1;
  text-decoration: none; color: var(--pergamino); letter-spacing: .01em;
}
.menu { grid-area: menu; }
.menu ul { display: flex; justify-content: center; flex-wrap: wrap; }
.menu li { display: flex; align-items: center; }
.menu li + li::before {
  content: "·"; color: var(--oro-hondo); padding: 0 .55em; opacity: .8;
}
.menu a {
  color: var(--oro); text-decoration: none; font-size: .95rem;
  padding: 6px 2px; letter-spacing: .01em;
}
.menu a:hover { color: var(--pergamino); }
.entrar {
  grid-area: entrar; color: var(--oro);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
}
.entrar:hover { color: var(--pergamino); }
/* Selector de idioma: junto a «Entrar», discreto. El actual en oro. */
.barra__fin {
  grid-area: entrar; justify-self: end;
  display: flex; align-items: center; gap: 6px;
}
.idioma { display: flex; align-items: center; }
.idioma li { display: flex; align-items: center; }
.idioma li + li::before {
  content: "/"; color: var(--humo); opacity: .55; font-size: .72rem; padding: 0 1px;
}
.idioma a {
  display: inline-block; padding: 8px 5px;
  font-size: .72rem; letter-spacing: .12em; line-height: 1;
  color: var(--humo); text-decoration: none;
}
.idioma a:hover { color: var(--pergamino); }
.idioma a[aria-current="page"] { color: var(--oro); }
@media (min-width: 760px) {
  .barra {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "marca menu entrar";
    padding: 10px 22px;
  }
  .marca { font-size: 1.85rem; }
  .menu a { font-size: 1.05rem; }
  .entrar { justify-self: end; }
}

/* ---------- 0 · Escena ---------- */
.escena { position: relative; height: 100vh; height: 100svh; }
.escena__marco {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #1a130f;
  isolation: isolate;
}
.diorama {
  position: absolute; left: 50%; top: 50%;
  width: var(--dw); height: var(--dh);
  transform: translate(-50%, -50%);
}
.capa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform;
}
.capa--fondo { z-index: 1; }
.capa--medio { z-index: 2; }

.prisma {
  --p: clamp(240px, min(50vh, 44vw), 480px);
  position: absolute; z-index: 3;
  width: var(--p); height: var(--p);
  left: calc(50% - var(--p) / 2);
  top: calc(57% - var(--p) / 2);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.prisma img {
  width: 100%; height: 100%;
  /* La esfera ocupa el 70 % del radio del cuadro: queda entera; el anillo y
     las constelaciones se apagan hacia el borde. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 74%, transparent 99%);
          mask-image: radial-gradient(circle closest-side, #000 74%, transparent 99%);
}
/* Figura animada sobre el disco vacío de la esfera. Medidas en % del cuadro
   del prisma (las imprime tools/generar-imagenes.py): centro del disco 50 % / 50 %,
   radio del filete 20,06 %. El lienzo mide 43 % para que el anillo exterior de
   la figura quede apenas por dentro del filete; la máscara recorta el halo. */
.prisma {
  --disco-x: 50%;
  --disco-y: 50%;
  --figura: 43%;
}
.prisma__figura {
  position: absolute;
  left: calc(var(--disco-x) - var(--figura) / 2);
  top: calc(var(--disco-y) - var(--figura) / 2);
  width: var(--figura); height: var(--figura);
  display: block;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 86%, transparent 94%);
          mask-image: radial-gradient(circle closest-side, #000 86%, transparent 94%);
}

.frente {
  position: absolute; z-index: 4;
  top: calc(50% - var(--dh) / 2);
  height: var(--dh);
  width: auto;
  max-width: none;
  will-change: transform;
}
.frente--izq { left: calc(50% - var(--dw) / 2); }
.frente--der { right: calc(50% - var(--dw) / 2); }

.escena__texto {
  position: absolute; z-index: 6;
  left: var(--margen); right: var(--margen);
  top: calc(var(--barra-alto) + 48px);
  display: flex; justify-content: center;
}
.frase {
  max-width: 24ch;
  text-align: center;
  font-style: italic; font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
  line-height: 1.08;
  color: #ecdfc4;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(18, 16, 14, 0.85), 0 0 2px rgba(18, 16, 14, 0.6);
}
.frase__titular { display: block; }
.frase__bajada {
  display: block;
  margin-top: .45em;
  font-size: .5em;
  line-height: 1.2;
}
.escena__velo {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to bottom, rgba(18, 16, 14, 0) 0%, rgba(18, 16, 14, 0.7) 60%, var(--noche) 100%);
  pointer-events: none;
}

/* Vertical en teléfono: el frente se ancla a las esquinas para que se vea */
@media (max-aspect-ratio: 4/5) {
  .frente { top: auto; bottom: 4svh; height: auto; }
  .frente--izq { left: -16vw; width: 84vw; }
  .frente--der { right: -16vw; width: 84vw; }
  .prisma { top: calc(52% - var(--p) / 2); --p: min(76vw, 340px); }
  .escena__texto { top: calc(var(--barra-alto) + 64px); }
}

/* Con JS y movimiento: la escena se alarga para que el scroll la recorra */
@media (prefers-reduced-motion: no-preference) {
  html.js.con-scroll .escena { height: 175vh; height: 175svh; }
  html.js:not(.sin-entrada) [data-entra] { opacity: 0; }
}

/* ---------- Bloques ---------- */
section[id] { scroll-margin-top: 112px; }
@media (min-width: 760px) { section[id] { scroll-margin-top: 88px; } }

/* Paleta de las secciones: el bosque del hero baja al marrón cálido. */
:root {
  --marron: #2a1c14;
  --cobre: #a8613a;
  --coral: #d9785f;
  --tarjeta-fondo: linear-gradient(180deg, rgba(38, 34, 29, 0.62), rgba(27, 24, 21, 0.38));
  --tarjeta-borde: rgba(232, 180, 88, 0.2);
}

.bloque { position: relative; padding: clamp(4.5rem, 10vw, 8rem) var(--margen); }
.bloque__cuerpo { max-width: var(--ancho); margin: 0 auto; }
.bloque h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); color: var(--pergamino); text-wrap: balance; }
.bloque h3 { margin: 0; font-weight: 500; }
.bajada { margin-top: 1rem; max-width: 52ch; color: var(--humo); font-size: 1.0625rem; }
.nota-fina { margin-top: .9rem; max-width: 52ch; font-size: .9rem; color: var(--humo); }

/* Píldora: dice en qué plan está lo que sigue. */
.pildora {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.1rem; padding: .28rem .8rem .3rem;
  border: 1px solid var(--tarjeta-borde); border-radius: 999px;
  background: rgba(38, 34, 29, 0.5);
  font-size: .85rem; color: var(--pergamino); letter-spacing: .01em;
}
.pildora::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--oro); box-shadow: 0 0 8px rgba(232, 180, 88, .7);
}
.pildora--pro::before { background: var(--coral); box-shadow: 0 0 8px rgba(217, 120, 95, .8); }
.pildora--lite::before { background: var(--cobre); box-shadow: 0 0 8px rgba(168, 97, 58, .8); }
.pildoras { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.pildoras .pildora { margin-bottom: 0; }

/* Tarjeta: borde fino luminoso sobre fondo translúcido. */
.tarjeta {
  position: relative;
  border: 1px solid var(--tarjeta-borde); border-radius: 14px;
  background: var(--tarjeta-fondo);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.06);
}

/* ---------- Fila: teléfono en su portal + texto ---------- */
.fila { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.fila__texto { min-width: 0; }
@media (min-width: 900px) {
  .fila { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fila--invertida { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .fila--invertida .escaparate { order: 2; }
}

/* Escaparate: el portal (arco cobre) y el teléfono que sube desde él.
   Solo se recorta abajo: el teléfono puede asomar por encima del arco. */
.escaparate {
  --tel: min(64vw, 260px);
  --tel-alto: calc(var(--tel) * 2.164);
  position: relative;
  height: calc(var(--tel-alto) * 0.8);
  display: flex; justify-content: center; align-items: flex-end;
  clip-path: inset(-40% -40% 0 -40%);
}
@media (min-width: 900px) { .escaparate { --tel: clamp(250px, 24vw, 300px); } }

.portal {
  position: absolute; bottom: 0; left: 50%;
  width: calc(var(--tel) * 1.36); height: 80%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(217, 120, 95, 0.55), transparent 70%),
    linear-gradient(180deg, #1f1610 0%, var(--marron) 35%, #5a301f 75%, #7d4129 100%);
  box-shadow: 0 0 80px -10px rgba(217, 120, 95, 0.25);
}
.portal::before {
  content: ""; position: absolute; inset: 10px 10px 0;
  border: 1px solid rgba(232, 180, 88, 0.3); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.telefono {
  position: relative; z-index: 1;
  width: var(--tel); height: var(--tel-alto);
  margin-bottom: calc(var(--tel-alto) * -0.2);
  padding: calc(var(--tel) * 0.03);
  border-radius: calc(var(--tel) * 0.15);
  background: linear-gradient(160deg, #3a3129 0%, #1a1612 45%, #2b241d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(232, 180, 88, 0.28),
    inset 0 0 0 3px rgba(0, 0, 0, 0.5),
    0 40px 70px -30px rgba(0, 0, 0, 0.9);
  will-change: transform;
}
.telefono__pantalla {
  position: relative; height: 100%; overflow: hidden;
  border-radius: calc(var(--tel) * 0.12);
  background: #0d0b09;
}
.telefono__pantalla img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
/* Isla, solo en pantallas que traen barra de estado */
.telefono--isla .telefono__pantalla::after {
  content: ""; position: absolute; top: calc(var(--tel) * 0.03); left: 50%;
  width: 30%; height: calc(var(--tel) * 0.075);
  transform: translateX(-50%);
  border-radius: 999px; background: #050403;
}

/* ---------- 1 · Pronóstico ---------- */
.pronostico { padding-top: clamp(2rem, 5vw, 4rem); }
.lunas { margin: clamp(2rem, 4vw, 2.75rem) 0 0; }
.lunas__fila {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: 460px;
}
.lunas__fila::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 22px; height: 1px;
  background: var(--linea);
}
.luna { position: relative; display: grid; justify-items: center; gap: .5rem; }
.luna svg { width: 44px; height: 44px; overflow: visible; }
.luna span { font-size: .8rem; color: var(--humo); }
.luna .disco { fill: #191512; stroke: rgba(232, 180, 88, 0.55); stroke-width: 1; }
.luna .neutra { fill: #e9d9b0; }
.luna .neutra[data-luz="0"] { fill-opacity: 0; }
.luna .neutra[data-luz="media"] { fill-opacity: .38; }
.luna .fase { fill: #ead8a6; display: none; transform-origin: 20px 20px; }
.luna .llena { fill: #efd9a0; filter: drop-shadow(0 0 7px rgba(232, 180, 88, .7)); }
.luna--llena span { color: var(--oro); }

/* Con hemisferio: lado iluminado real. Sur = espejo de norte. */
html[data-hemi] .luna .neutra { display: none; }
html[data-hemi] .luna .fase { display: inline; }
html[data-hemi="sur"] .luna .fase { transform: scaleX(-1); }

.lunas figcaption { margin-top: 1rem; font-size: .88rem; color: var(--humo); max-width: 52ch; }
.solo-hemi { display: none; }
html[data-hemi] .solo-hemi { display: inline; }
html[data-hemi] .solo-neutro { display: none; }

.ejemplo-nota {
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  font-size: .88rem; color: var(--humo);
}
.horizontes {
  margin-top: 1rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.horizonte {
  display: grid; gap: .35rem; align-content: start;
  padding: 1.1rem 1rem 1.25rem;
}
.horizonte::before {
  content: ""; position: absolute; top: -1px; left: 1rem; width: 2.25rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.horizonte__plazo { font-size: .9rem; color: var(--humo); }
.horizonte__valor {
  font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05;
  color: var(--oro);
}
.horizonte__nota { font-size: .85rem; color: var(--humo); margin-top: .2rem; max-width: 26ch; }
@media (min-width: 760px) {
  .horizontes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .horizonte { padding: 1.4rem 1.25rem 1.5rem; }
}

.hemisferio {
  margin-top: 1.75rem;
  display: none; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  font-size: .9rem; color: var(--humo);
}
html.js .hemisferio { display: flex; }
.hemisferio__rotulo { margin-right: .2rem; }
.hemisferio__opcion {
  font: inherit; color: var(--pergamino);
  background: transparent; border: 1px solid var(--linea-suave);
  border-radius: 999px; padding: .3rem .85rem; cursor: pointer;
  min-height: 36px;
}
.hemisferio__opcion:hover { border-color: var(--linea); }
.hemisferio__opcion[aria-pressed="true"] {
  border-color: var(--oro-hondo); color: var(--oro); background: rgba(232, 180, 88, 0.08);
}
.hemisferio__origen { flex-basis: 100%; }
@media (min-width: 560px) { .hemisferio__origen { flex-basis: auto; margin-left: .4rem; } }
html[data-hemi-origen="ninguno"] .hemisferio__opcion { border-color: var(--linea); }

/* ---------- 2 · Perfil ---------- */
.perfil {
  background: radial-gradient(50% 60% at 80% 50%, rgba(168, 97, 58, 0.08), transparent 70%), var(--noche);
}

/* ---------- 3 · Cómo funciona: tres pasos sobre una línea que sube ---------- */
.proceso { border-top: 1px solid var(--linea-suave); }
.pasos {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 2.25rem;
  padding-left: 3.25rem;
}
.pasos::before {
  content: ""; position: absolute; left: 1.2rem; top: 1.2rem; bottom: 1.2rem; width: 1px;
  background: linear-gradient(180deg, var(--oro-hondo), rgba(201, 154, 75, 0.15));
}
.paso { position: relative; max-width: 34ch; }
.paso__n {
  position: absolute; left: -3.25rem; top: -.1rem;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--oro-hondo); background: var(--noche);
  font-family: var(--serif); font-size: 1.35rem; color: var(--oro);
}
.paso__titulo { font-family: var(--serif); font-size: 1.65rem; line-height: 1.15; color: var(--pergamino); }
.paso p { margin-top: .4rem; color: var(--humo); }
@media (min-width: 860px) {
  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem; padding-left: 0;
    align-items: start;
  }
  /* La línea sube del paso 1 al paso 3: una diagonal de 1 px dibujada con un degradado. */
  .pasos::before {
    left: 1.2rem; top: 1.2rem; bottom: auto;
    width: calc((100% + 2.5rem) * 2 / 3); height: 7rem;
    background: linear-gradient(to bottom right,
      transparent calc(50% - 1px), rgba(201, 154, 75, 0.8) 50%, transparent calc(50% + 1px));
  }
  .paso { padding-top: 3.4rem; }
  .paso:nth-child(1) { margin-top: 7rem; }
  .paso:nth-child(2) { margin-top: 3.5rem; }
  .paso__n { left: 0; top: 0; }
}

/* ---------- 4 · PRO ---------- */
/* Escena en capas, como el hero: fondo (bosque rojo), orbe con la figura
   animada dentro, frente partido en telón. Sin pin: el parallax (js/pro.js)
   corre mientras la sección cruza la pantalla. El texto va a la izquierda en
   escritorio (velo lateral) y debajo del orbe en teléfono (velo inferior). */
.pro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noche);
}
.pro__escena {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #170c0b;
  pointer-events: none;
}
.pro__fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  /* Margen para el recorrido vertical del parallax sin dejar bordes. */
  scale: 1.08;
  will-change: transform;
}
/* Orbe: cuadro recortado por tools/generar-pro.py. Centro y radio del interior
   medidos sobre pro-0.png: centro 49,96 % / 49,96 % del cuadro, interior
   r = 19,91 % (filete 21,12 %). El lienzo mide el diámetro interior x 1,07 y la
   máscara recorta su halo, igual que en el prisma del hero. */
.pro__orbe {
  --p: clamp(300px, min(84vh, 50vw), 760px);
  --orbe-x: calc(50.9% - 3px);   /* 49,96 % medido; ajustado a ojo por Ale: +~1 %, luego 3 px a la izquierda */
  --orbe-y: 49.96%;
  --figura: 42.61%;
  position: absolute; z-index: 2;
  width: var(--p); height: var(--p);
  left: calc(64% - var(--p) / 2);
  top: calc(50% - var(--p) / 2);
  mix-blend-mode: screen;
  will-change: transform;
}
.pro__orbe img {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%);
}
.pro__figura {
  position: absolute;
  left: calc(var(--orbe-x) - var(--figura) / 2);
  top: calc(var(--orbe-y) - var(--figura) / 2);
  width: var(--figura); height: var(--figura);
  display: block;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 86%, transparent 94%);
          mask-image: radial-gradient(circle closest-side, #000 86%, transparent 94%);
}
/* Frente: las dos mitades se tocan en el centro (como en el original) y se
   recortan por los costados; mismo alto que el fondo cuando éste llena a lo ancho. */
.pro__frente {
  --fh: max(100%, 55.17vw);           /* 1059 / 1920 */
  position: absolute; z-index: 3;
  top: calc(50% - var(--fh) / 2 + 11%);   /* bajado: que el frente no tape el orbe */
  height: var(--fh); width: auto; max-width: none;
  will-change: transform;
}
.pro__frente--izq { right: 50%; }
.pro__frente--der { left: 50%; }
.pro__velo {
  position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(to bottom, var(--noche) 0%, rgba(18, 16, 14, 0) 16%, rgba(18, 16, 14, 0) 80%, var(--noche) 100%),
    linear-gradient(to right, rgba(18, 16, 14, 0.9) 0%, rgba(18, 16, 14, 0.72) 30%, rgba(18, 16, 14, 0.2) 48%, rgba(18, 16, 14, 0) 58%);
}
.pro__cuerpo { position: relative; z-index: 1; }
.pro__texto { max-width: 34rem; }
.pro .bajada, .pro .puntos li { color: #b3a894; }
.pro .pildora { background: rgba(18, 16, 14, 0.6); }
.pro h2, .pro .bajada, .pro .puntos { text-shadow: 0 1px 14px rgba(18, 16, 14, 0.9); }
@media (min-width: 900px) {
  .pro { display: flex; align-items: center; min-height: max(100vh, 660px); min-height: max(100svh, 660px); }
  .pro__cuerpo { width: 100%; }
  .pro__texto { max-width: min(31rem, 37vw); }
}
/* Teléfono y tableta vertical: el orbe arriba, el texto debajo sobre un velo
   que baja al color de la página; el frente enmarca la base del orbe. */
@media (max-width: 899px) {
  .pro { --escenario: min(116vw, 560px); }
  .pro__orbe { --p: min(104vw, 520px); left: calc(50% - var(--p) / 2); top: calc(var(--escenario) / 2 + 2.5rem - var(--p) / 2); }
  .pro__frente { --fh: auto; height: auto; width: 72vw; top: auto; bottom: auto;
                 top: calc(var(--escenario) + 2.5rem - 62vw); }
  .pro__frente--izq { right: auto; left: -20vw; }
  .pro__frente--der { left: auto; right: -20vw; }
  .pro__velo {
    background:
      linear-gradient(to bottom, var(--noche) 0%, rgba(18, 16, 14, 0) 9%),
      linear-gradient(to bottom, rgba(18, 16, 14, 0) 0, rgba(18, 16, 14, 0) calc(var(--escenario) - 4rem), rgba(18, 16, 14, 0.82) calc(var(--escenario) + 6rem), var(--noche) 100%);
  }
  .pro__cuerpo { padding-top: var(--escenario); }
}
.puntos { margin-top: 1.75rem; display: grid; gap: 1.1rem; max-width: 50ch; }
.puntos li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; color: var(--humo); }
.puntos strong { font-weight: 500; color: var(--pergamino); }
.puntos__glifo {
  margin-top: .35rem; width: 14px; height: 14px; transform: rotate(45deg);
  border: 1px solid var(--coral);
  background: linear-gradient(135deg, rgba(217, 120, 95, 0.4), transparent);
}

/* Gratis y Lite: el mismo rombo, en oro y en cobre. */
.puntos--gratis .puntos__glifo { border-color: var(--oro-hondo); background: linear-gradient(135deg, rgba(232, 180, 88, 0.4), transparent); }
.puntos--lite .puntos__glifo { border-color: var(--cobre); background: linear-gradient(135deg, rgba(168, 97, 58, 0.5), transparent); }

.montaje { position: relative; min-width: 0; }
.ficha {
  position: relative; z-index: 2;
  margin: 1.25rem auto 0; max-width: 320px;
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, rgba(42, 28, 20, 0.94), rgba(27, 24, 21, 0.92));
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85);
}
.ficha__rotulo { font-size: .8rem; color: var(--humo); }
.ficha__pregunta { margin-top: .3rem; font-family: var(--serif); font-size: 1.35rem; color: var(--pergamino); line-height: 1.2; }
.ficha__opciones { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha__opciones li {
  padding: .25rem .65rem; border-radius: 999px;
  border: 1px solid var(--linea-suave); font-size: .82rem; color: var(--pergamino);
}
.ficha__opciones li:first-child { border-color: var(--oro-hondo); color: var(--oro); }
/* Escritorio: la ficha flota sobre el borde del teléfono. */
@media (min-width: 900px) {
  .ficha { position: absolute; margin: 0; right: -6%; bottom: 4%; width: 236px; }
}

/* ---------- 4b · Lite: almanaque ilustrado en CSS (no es una pantalla de la app) ---------- */
.lite {
  background: radial-gradient(55% 60% at 75% 50%, rgba(168, 97, 58, 0.09), transparent 70%), var(--noche);
}
.almanaque {
  position: relative; min-width: 0;
  max-width: 400px; width: 100%; margin: 0 auto;
  padding-bottom: 3.5rem;
}
.almanaque__hoja { padding: 1.1rem 1.1rem 1.25rem; }
.almanaque__rotulo {
  font-family: var(--sans); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oro);
}
.almanaque__dias {
  margin-top: .9rem;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem;
}
.almanaque__dias li {
  position: relative;
  display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 8px; border: 1px solid rgba(232, 180, 88, 0.07);
  font-size: .82rem; color: var(--humo);
}
.almanaque__dias li.almanaque__vacio { border-color: transparent; }
.almanaque__luna { color: var(--pergamino) !important; }
.almanaque__luna::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid rgba(232, 180, 88, 0.7);
}
.almanaque__luna--llena::after { background: #efd9a0; box-shadow: 0 0 6px rgba(232, 180, 88, .7); }
.almanaque__hoy {
  border-color: var(--oro-hondo) !important; color: var(--oro) !important;
  background: rgba(232, 180, 88, 0.08);
}
.almanaque__diario {
  position: absolute; right: -4%; bottom: 0; width: 56%;
  display: grid; gap: .55rem;
  padding: .9rem 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(42, 28, 20, 0.95), rgba(27, 24, 21, 0.93));
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85);
}
.almanaque__renglon { display: block; height: 1px; background: rgba(216, 205, 184, 0.22); }
.almanaque__renglon:first-of-type { margin-top: .35rem; }
.almanaque__renglon--corto { width: 60%; }
@media (max-width: 420px) { .almanaque__diario { right: 0; } }

/* ---------- 5 · Biblioteca ---------- */
.biblioteca {
  background:
    radial-gradient(60% 50% at 85% 30%, rgba(201, 154, 75, 0.06), transparent 70%),
    var(--noche);
}
.obras {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
}
@media (min-width: 560px) { .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obra { display: grid; gap: .15rem; align-content: start; padding: 1rem 1.1rem 1.1rem; }
.obra__titulo { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; color: var(--pergamino); font-style: italic; }
.obra__autor { color: var(--pergamino); opacity: .85; font-size: .95rem; }
.obra__autor--vacio { display: none; }
.obra__derechos {
  justify-self: start; margin-top: .6rem;
  padding: .12rem .55rem; border-radius: 999px;
  border: 1px solid var(--linea-suave);
  font-size: .78rem; color: var(--humo);
}

/* ---------- 6 · AKASHA ---------- */
.akasha {
  background:
    radial-gradient(45% 50% at 50% 62%, rgba(232, 180, 88, 0.08), transparent 70%),
    var(--noche);
}
.akasha__cabeza { display: grid; justify-items: center; text-align: center; }
.candado { color: var(--oro); margin-bottom: 1.25rem; }
.akasha h2 { letter-spacing: .14em; font-size: clamp(2.4rem, 5vw, 4rem); }
.akasha__sub { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--oro); margin-top: .35rem; }
.akasha .bajada { margin-left: auto; margin-right: auto; }

.akasha__trio {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: 2rem;
}
.akasha__lado { display: grid; gap: 1.5rem; }
.akasha__lado li { padding-top: 1rem; border-top: 1px solid var(--linea); }
.akasha__lado h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--pergamino); line-height: 1.15; }
.akasha__lado p { margin-top: .35rem; color: var(--humo); font-size: .98rem; }
.escaparate--centro { order: -1; }
@media (min-width: 560px) and (max-width: 979px) {
  .akasha__trio { grid-template-columns: 1fr 1fr; }
  .escaparate--centro { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .akasha__trio { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3rem; }
  .escaparate--centro { order: 0; --tel: 290px; width: 420px; }
  .akasha__lado:first-child { text-align: right; }
  .akasha__lado:first-child li { border-top: 0; border-bottom: 1px solid var(--linea); padding: 0 0 1rem; }
  .akasha__lado:last-child li { border-top: 0; border-bottom: 1px solid var(--linea); padding: 0 0 1rem; }
}

/* ---------- 7 · La Senda: escalera de siete grados ---------- */
.senda { border-top: 1px solid var(--linea-suave); }
.escalera { position: relative; margin-top: clamp(2.25rem, 5vw, 3rem); }
.escalera__trazo { display: none; }
.grados {
  position: relative;
  display: flex; flex-direction: column-reverse; gap: 1rem;
  padding-left: 1.75rem;
}
.grado { position: relative; display: flex; align-items: baseline; gap: .7rem; }
.grado:nth-child(2) { margin-left: 4%; }
.grado:nth-child(3) { margin-left: 8%; }
.grado:nth-child(4) { margin-left: 12%; }
.grado:nth-child(5) { margin-left: 16%; }
.grado:nth-child(6) { margin-left: 20%; }
.grado:nth-child(7) { margin-left: 24%; }
.grado::before {
  content: ""; position: absolute; left: -1.75rem; top: .5em;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--oro); background: var(--noche);
}
.grado--cima::before { border-color: var(--oro-hondo); }
.grado__n { font-size: .9rem; color: var(--humo); min-width: 1ch; }
.grado__nombre { font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; color: var(--pergamino); }
/* Neófito abierto en Lite; los otros seis, con candado y Pro. */
.grado--abierto::before { background: var(--oro); box-shadow: 0 0 14px rgba(232, 180, 88, .75); }
.grado--abierto .grado__nombre { color: var(--oro); }
.grado--cerrado::before { border-color: rgba(232, 180, 88, 0.45); }
.grado--cerrado .grado__nombre { color: var(--pergamino); opacity: .62; }
.grado__plan {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem .12rem; border-radius: 999px;
  border: 1px solid rgba(217, 120, 95, 0.35);
  font-size: .72rem; line-height: 1.3; color: var(--humo);
  align-self: center;
}
.grado__plan svg { color: var(--coral); opacity: .85; flex: none; }
.grado__plan--lite { border-color: var(--oro-hondo); color: var(--oro); }
.senda__planes { max-width: 56ch; }

@media (min-width: 860px) {
  .escalera { aspect-ratio: 1000 / 420; }
  .escalera__trazo {
    display: block; position: absolute; left: 0; right: 0; top: 0;
    width: 100%; height: calc(100% * 340 / 420);
    fill: none; stroke: var(--oro-hondo); stroke-width: 1.2; opacity: .75;
  }
  .escalera__trazo path { vector-effect: non-scaling-stroke; }
  .grados { position: absolute; inset: 0; padding: 0; display: block; }
  .grado {
    position: absolute; left: var(--x); top: var(--y);
    margin: 0 !important;
    transform: translate(-50%, -6.5px);
    display: grid; justify-items: center; gap: .35rem;
    padding-top: 1.35rem; text-align: center; white-space: nowrap;
  }
  .grado::before { left: 50%; top: 0; transform: translateX(-50%); }
  .grado__nombre { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
  .grado__plan { margin-top: .15rem; }
  /* Coordenadas = centro de cada escalón del trazo (viewBox 1000×340, caja 1000×420):
     y = escalón / 340 × (340 / 420) = escalón / 420 */
  .grado:nth-child(1) { --x: 7.14%;  --y: 71.19%; }
  .grado:nth-child(2) { --x: 21.43%; --y: 61.43%; }
  .grado:nth-child(3) { --x: 35.71%; --y: 51.9%; }
  .grado:nth-child(4) { --x: 50%;    --y: 42.14%; }
  .grado:nth-child(5) { --x: 64.29%; --y: 32.38%; }
  .grado:nth-child(6) { --x: 78.57%; --y: 22.62%; }
  .grado:nth-child(7) { --x: 92.86%; --y: 12.86%; }
}

/* ---------- 8 · Llamada final ---------- */
.llamada { padding-top: clamp(2rem, 5vw, 3rem); }
.llamada__caja {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: var(--ancho); margin: 0 auto;
  border: 1px solid var(--linea); border-radius: 20px;
  background: var(--marron);
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.llamada__bosque {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  opacity: .5;
}
.llamada__caja::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(18, 16, 14, 0.55), rgba(18, 16, 14, 0.85) 80%);
}
.llamada__texto { display: grid; justify-items: center; }
.llamada h2 { font-style: italic; font-weight: 400; }
.llamada .bajada { margin: .9rem auto 0; color: var(--pergamino); opacity: .85; }
.llamada .boton { margin-top: 2rem; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.7rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 500 1.05rem/1.1 var(--sans); letter-spacing: .01em;
  color: #1d150b; text-decoration: none;
  background: linear-gradient(180deg, #efc46e 0%, var(--oro) 45%, var(--oro-hondo) 100%);
  box-shadow: 0 0 0 1px rgba(255, 230, 170, .25) inset, 0 6px 24px rgba(232, 180, 88, .18);
  transition: transform .2s ease, opacity .2s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); opacity: .9; }

/* ---------- 9 · Pie ---------- */
.pie {
  background: var(--carbon);
  border-top: 1px solid var(--linea-suave);
  padding: 3.5rem var(--margen) 2.5rem;
  font-size: .9rem; color: var(--humo);
}
.pie__cuerpo {
  max-width: var(--ancho); margin: 0 auto;
  display: grid; gap: 2.25rem;
}
.marca--pie { grid-area: auto; font-size: 1.6rem; }
.pie__lema { margin-top: .5rem; }
.pie__titulo {
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  color: var(--pergamino); margin-bottom: .8rem;
}
.pie__col ul { display: grid; gap: .45rem; }
.pie__col a { color: var(--humo); text-decoration: none; }
.pie__col a:hover { color: var(--oro); }
.pie__avisos { max-width: 40ch; }
.pie__fin { font-size: .82rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-suave); }
@media (min-width: 760px) {
  .pie__cuerpo { grid-template-columns: 1.3fr 1fr 1.5fr 1.2fr; gap: 2.5rem; }
  .pie__fin { grid-column: 1 / -1; }
}

/* ---------- Ventana de acceso ---------- */
.login {
  width: min(420px, calc(100vw - 2 * var(--margen)));
  padding: 0; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--carbon); color: var(--pergamino);
}
.login::backdrop { background: rgba(10, 9, 8, 0.74); }
/* Sin JS: el enlace #login muestra la ventana con :target */
.login:target {
  display: block; position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 100;
  box-shadow: 0 0 0 100vmax rgba(10, 9, 8, 0.74);
}
.login__caja { position: relative; padding: 2rem 1.5rem 1.75rem; }
.login h2 { font-size: 2rem; margin-bottom: 1.25rem; padding-right: 2rem; }
.login__cerrar {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--humo);
}
.login__cerrar:hover { color: var(--pergamino); }
.login__form { display: grid; gap: .45rem; }
.login__form label { font-size: .9rem; color: var(--humo); margin-top: .5rem; }
.login__form input {
  font: inherit; color: var(--pergamino);
  background: var(--noche); border: 1px solid var(--linea-suave); border-radius: 8px;
  padding: .7rem .8rem; min-height: 46px;
}
.login__form input:focus-visible { border-color: var(--oro-hondo); outline-offset: 1px; }
.login__form .boton { margin-top: 1.1rem; }
.login__aviso { margin-top: .75rem; color: var(--oro); font-size: .95rem; min-height: 1.5em; }

/* ---------- Movimiento reducido: composición estática ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
  .boton:hover { transform: none; }
  .capa, .frente, .prisma, .telefono,
  .pro__fondo, .pro__orbe, .pro__frente { will-change: auto; }
}