/* ==========================================================================
   La Comunidad SusAstros | comunidad.susastros.com
   Misma base que el resto de la familia (mismo sistema tipográfico y de
   componentes). Paleta en violeta + menta, tomada de los colores que ya
   usa susastros.com para "la comunidad" (--lavanda/--menta), como puente
   entre esta landing y el sitio principal — a la vez que se diferencia
   claramente del resto de las landings (natal, solar, love, combo).
   Página de venta plana. Sin vídeo y sin scroll cinematográfico.
   ========================================================================== */

:root{
  --canvas:#0F0B1F;
  --canvas-deep:#0A0718;
  --panel:#191231;
  --panel-hi:#231A42;
  --accent:#B79FFF;
  --accent-hover:#CBB2FF;
  --ink:#8FEAC4;
  --ink-soft:#5E9E85;
  --text-primary:#F4EFEA;
  --text-secondary:#B9B2C9;

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(1.25rem,5vw,3rem);
  --sec:clamp(4.5rem,9vw,7.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 90;
  line-height:1.07;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.25rem,4.6vw,3.85rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.75rem)}
h3{font-size:clamp(1.1rem,1.55vw,1.3rem);line-height:1.24;font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 24}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:600;color:var(--text-primary)}

.kicker{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin:0 0 1rem;
}
.lede{color:var(--text-secondary);font-size:1.06em;max-width:58ch}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#1A0A03;padding:.7rem 1.1rem;border-radius:0 0 .5rem 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---------- El cielo de fondo, una sola capa detrás de todo ---------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sky-grad{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 70% at 78% 2%, #1D1440 0%, rgba(29,20,64,0) 56%),
    radial-gradient(100% 60% at 12% 98%, #2A1533 0%, rgba(42,21,51,0) 62%),
    linear-gradient(180deg,var(--canvas-deep) 0%,var(--canvas) 42%,#120C24 100%);
}
.sky-stars{position:absolute;inset:0;background-repeat:repeat}
.sky-stars--far{opacity:.5;animation:deriva 190s linear infinite;background-image:radial-gradient(0.94px 0.94px at 19.93% 81.14%, rgba(226,236,255,0.55) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.40px 1.40px at 84.97% 98.56%, rgba(226,236,255,0.68) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.73px 0.73px at 15.36% 32.09%, rgba(226,236,255,0.63) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.80px 0.80px at 39.98% 29.15%, rgba(255,206,180,0.33) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.04px 1.04px at 58.26% 10.23%, rgba(226,236,255,0.26) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.87px 0.87px at 76.52% 12.02%, rgba(255,206,180,0.55) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.18px 1.18px at 17.53% 80.18%, rgba(226,236,255,0.36) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.38px 1.38px at 51.22% 92.89%, rgba(226,236,255,0.29) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.29px 1.29px at 47.33% 51.60%, rgba(255,206,180,0.60) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.09px 1.09px at 27.04% 89.75%, rgba(255,206,180,0.39) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.61px 0.61px at 11.42% 61.75%, rgba(226,236,255,0.45) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.25px 1.25px at 46.33% 72.70%, rgba(226,236,255,0.37) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.77px 0.77px at 90.59% 46.44%, rgba(255,206,180,0.43) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.77px 0.77px at 20.55% 35.28%, rgba(226,236,255,0.63) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.76px 0.76px at 67.75% 34.95%, rgba(226,236,255,0.57) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.25px 1.25px at 4.95% 64.66%, rgba(255,206,180,0.66) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.67px 0.67px at 91.03% 4.03%, rgba(226,236,255,0.34) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.13px 1.13px at 0.35% 35.33%, rgba(226,236,255,0.39) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.90px 0.90px at 98.41% 90.26%, rgba(226,236,255,0.65) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.08px 1.08px at 86.04% 80.62%, rgba(226,236,255,0.36) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.24px 1.24px at 63.07% 97.92%, rgba(226,236,255,0.65) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.08px 1.08px at 82.86% 48.54%, rgba(226,236,255,0.27) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.74px 0.74px at 39.63% 49.47%, rgba(226,236,255,0.67) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.29px 1.29px at 22.05% 94.63%, rgba(226,236,255,0.46) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.24px 1.24px at 37.09% 50.13%, rgba(226,236,255,0.68) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.74px 0.74px at 72.40% 18.45%, rgba(226,236,255,0.36) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.32px 1.32px at 26.08% 14.34%, rgba(255,206,180,0.50) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.83px 0.83px at 32.37% 27.42%, rgba(226,236,255,0.59) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.37px 1.37px at 79.30% 51.36%, rgba(226,236,255,0.69) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.86px 0.86px at 94.25% 17.40%, rgba(226,236,255,0.41) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.31px 1.31px at 92.17% 55.84%, rgba(226,236,255,0.60) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.06px 1.06px at 15.45% 99.61%, rgba(226,236,255,0.68) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.31px 1.31px at 27.75% 70.67%, rgba(226,236,255,0.54) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.01px 1.01px at 62.58% 80.35%, rgba(226,236,255,0.68) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.03px 1.03px at 56.59% 28.92%, rgba(226,236,255,0.51) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.04px 1.04px at 20.84% 6.19%, rgba(226,236,255,0.60) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.04px 1.04px at 28.20% 44.79%, rgba(255,206,180,0.28) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.79px 0.79px at 80.42% 13.99%, rgba(255,206,180,0.56) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.65px 0.65px at 2.91% 76.59%, rgba(226,236,255,0.48) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.14px 1.14px at 64.36% 7.92%, rgba(255,206,180,0.44) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.28px 1.28px at 58.76% 29.84%, rgba(226,236,255,0.58) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.21px 1.21px at 72.18% 79.83%, rgba(226,236,255,0.56) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.89px 0.89px at 98.77% 19.94%, rgba(255,206,180,0.35) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.18px 1.18px at 68.09% 6.52%, rgba(226,236,255,0.41) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.07px 1.07px at 4.80% 9.45%, rgba(226,236,255,0.66) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.72px 0.72px at 75.80% 31.53%, rgba(226,236,255,0.40) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.15px 1.15px at 84.81% 54.12%, rgba(255,206,180,0.62) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.60px 0.60px at 70.21% 7.12%, rgba(255,206,180,0.27) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.74px 0.74px at 75.12% 58.29%, rgba(226,236,255,0.55) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.21px 1.21px at 84.28% 93.74%, rgba(226,236,255,0.39) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.23px 1.23px at 24.16% 83.47%, rgba(226,236,255,0.30) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.16px 1.16px at 58.09% 28.37%, rgba(226,236,255,0.43) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.04px 1.04px at 5.67% 25.92%, rgba(255,206,180,0.54) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.17px 1.17px at 64.44% 27.73%, rgba(226,236,255,0.28) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.13px 1.13px at 59.78% 44.03%, rgba(226,236,255,0.41) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.32px 1.32px at 24.73% 89.03%, rgba(226,236,255,0.44) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.97px 0.97px at 95.81% 2.39%, rgba(226,236,255,0.64) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.90px 0.90px at 10.38% 81.41%, rgba(255,206,180,0.42) 0%, rgba(0,0,0,0) 100%);background-size:760px 760px;}
.sky-stars--near{opacity:.75;animation:deriva 120s linear infinite reverse;background-image:radial-gradient(1.41px 1.41px at 9.79% 47.27%, rgba(226,236,255,0.97) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.96px 1.96px at 48.56% 19.67%, rgba(226,236,255,0.78) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.00px 1.00px at 76.40% 94.38%, rgba(226,236,255,0.85) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.86px 0.86px at 47.68% 2.25%, rgba(226,236,255,0.65) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.05px 1.05px at 14.81% 60.44%, rgba(226,236,255,0.62) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.80px 1.80px at 77.71% 78.20%, rgba(226,236,255,0.62) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.64px 0.64px at 86.58% 74.07%, rgba(226,236,255,0.95) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.64px 0.64px at 42.05% 89.85%, rgba(226,236,255,0.75) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.91px 1.91px at 99.09% 24.23%, rgba(255,206,180,0.59) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.86px 1.86px at 7.97% 68.14%, rgba(226,236,255,0.85) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.75px 1.75px at 6.22% 62.31%, rgba(255,206,180,0.65) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.30px 1.30px at 58.84% 5.99%, rgba(226,236,255,0.42) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.08px 1.08px at 25.91% 46.82%, rgba(226,236,255,0.71) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.82px 0.82px at 33.88% 6.38%, rgba(226,236,255,0.71) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.37px 1.37px at 23.46% 44.85%, rgba(226,236,255,0.99) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.18px 1.18px at 5.68% 33.98%, rgba(226,236,255,0.92) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.88px 1.88px at 57.02% 25.09%, rgba(255,206,180,0.47) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.77px 0.77px at 37.48% 15.10%, rgba(226,236,255,0.81) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.34px 1.34px at 27.87% 28.40%, rgba(226,236,255,0.92) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.84px 0.84px at 12.10% 48.26%, rgba(226,236,255,0.43) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.87px 0.87px at 44.94% 94.94%, rgba(255,206,180,0.69) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.63px 1.63px at 96.84% 43.84%, rgba(226,236,255,0.95) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.75px 1.75px at 29.01% 26.65%, rgba(226,236,255,0.41) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.95px 0.95px at 52.78% 60.47%, rgba(226,236,255,0.68) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.82px 1.82px at 63.85% 55.76%, rgba(226,236,255,0.60) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.88px 0.88px at 68.22% 72.40%, rgba(255,206,180,0.77) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.67px 0.67px at 83.84% 6.70%, rgba(226,236,255,0.42) 0%, rgba(0,0,0,0) 100%),radial-gradient(0.64px 0.64px at 16.64% 60.62%, rgba(226,236,255,0.67) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.60px 1.60px at 4.93% 18.79%, rgba(226,236,255,0.94) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.10px 1.10px at 10.66% 22.46%, rgba(226,236,255,0.76) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.31px 1.31px at 47.51% 84.88%, rgba(255,206,180,0.94) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.49px 1.49px at 83.63% 88.62%, rgba(226,236,255,0.74) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.63px 1.63px at 72.81% 26.06%, rgba(226,236,255,0.68) 0%, rgba(0,0,0,0) 100%),radial-gradient(1.73px 1.73px at 79.10% 6.07%, rgba(226,236,255,0.52) 0%, rgba(0,0,0,0) 100%);background-size:520px 520px;}
@keyframes deriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(-400px,-180px,0)}}
.sky-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%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='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#220C02;
  font-family:var(--body);font-weight:600;font-size:.98rem;
  text-decoration:none;padding:.82rem 1.5rem;border-radius:999px;border:1px solid transparent;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(183,159,255,.7)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:1.05rem 2.1rem;font-size:1.06rem}
.btn--sm{padding:.56rem 1.1rem;font-size:.88rem}
.btn--block{display:block;text-align:center;width:100%}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn--block{display:flex}
  /* Todo lo que se toca con el dedo necesita 44px de alto, no solo los botones. */
  .nav-brand,.pie-links a,.link-arrow,.link-quiet{min-height:44px;display:inline-flex;align-items:center}
  .pie-links{gap:.4rem 1.4rem}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--pad);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(15,11,31,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(143,234,196,.14)}
.nav-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-primary)}
.nav-mark{width:26px;height:26px;color:var(--accent);flex:none}
.nav-name{font-family:var(--display);font-weight:600;font-size:1.06rem;font-variation-settings:"SOFT" 40,"opsz" 20;letter-spacing:-.01em}
.nav-sep{width:1px;height:15px;background:rgba(143,234,196,.32)}
.nav-prod{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:.9rem}
.nav-precio{font-family:var(--mono);font-size:.82rem;color:var(--text-primary);letter-spacing:.04em}
@media (max-width:620px){.nav-sep,.nav-prod,.nav-precio{display:none}}

/* ---------- Héroe plano ---------- */
.hero{padding:clamp(6.5rem,12vw,9rem) var(--pad) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.hero-inner{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero-copy{max-width:38rem}
.hero h1{margin-bottom:1.2rem;max-width:17ch}
.hero-sub{color:var(--text-secondary);font-size:1.1rem;max-width:50ch}

.hero-datos{display:flex;flex-wrap:wrap;gap:.6rem .5rem;margin:1.8rem 0}
.hero-datos li{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid rgba(143,234,196,.28);border-radius:999px;
  padding:.4rem .9rem;font-size:.86rem;color:var(--text-secondary);
}
.hero-datos svg{width:17px;height:17px;color:var(--ink);flex:none}

.hero-compra{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:.4rem}
.precio{display:flex;align-items:baseline;gap:.4rem;font-family:var(--display);color:var(--text-primary)}
.precio-n{font-size:clamp(2.6rem,4.4vw,3.4rem);font-weight:600;font-variation-settings:"SOFT" 50,"opsz" 90;line-height:1}
.precio-m{font-family:var(--mono);font-size:.9rem;letter-spacing:.14em;color:var(--ink)}
.hero-nota{margin-top:1rem;font-size:.85rem;color:var(--ink-soft);max-width:44ch}
.link-accent{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link-accent:hover{color:var(--accent-hover)}

.hero-art{display:grid;place-items:center;position:relative}
.hero-art::before{
  content:"";position:absolute;inset:-10%;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(183,159,255,.2) 0%,rgba(143,234,196,.08) 45%,rgba(183,159,255,0) 72%);
  pointer-events:none;
}
.wheel{
  width:min(100%,520px);height:auto;color:var(--ink);
  filter:drop-shadow(0 0 44px rgba(183,159,255,.2));
  animation:girolento 320s linear infinite;
}
@keyframes girolento{to{transform:rotate(-360deg)}}
/* En pantallas estrechas la rueda pasa a ser fondo, detrás del texto, para que
   el precio y el botón no se caigan por debajo de la primera pantalla. */
@media (max-width:900px){
  .hero{padding-top:clamp(5.5rem,17vw,7rem)}
  .hero-inner{grid-template-columns:1fr;gap:0}
  .hero-copy{grid-column:1;grid-row:1;z-index:3;max-width:none;position:relative}
  .hero-copy::before{
    content:"";position:absolute;inset:-8% -12%;z-index:-1;border-radius:50%;
    background:radial-gradient(62% 50% at 45% 48%,rgba(15,11,31,.92) 0%,rgba(15,11,31,.66) 52%,rgba(15,11,31,0) 80%);
  }
  .hero-art{
    grid-column:1;grid-row:1;z-index:1;opacity:.26;pointer-events:none;
    align-self:start;justify-self:center;margin-top:1.5rem;
  }
  .wheel{width:min(112%,430px)}
  .hero-datos{margin:1.4rem 0}
  .hero-datos li{padding:.34rem .78rem;font-size:.82rem}
  .hero-sub{font-size:1.05rem}
}

/* --- La rueda se dibuja sola al cargar. Es un gesto de entrada, no scroll. --- */
@property --p{syntax:"<number>";inherits:true;initial-value:1}
.hero-art{--p:1;animation:dibuja 2.4s var(--ease) .1s both}
@keyframes dibuja{from{--p:0}to{--p:1}}
.wheel line,.wheel circle,.wheel path,.wheel text{vector-effect:non-scaling-stroke}
.w-core{fill:var(--accent);opacity:clamp(0,calc(var(--p) * 30),1);filter:drop-shadow(0 0 10px rgba(183,159,255,.9))}
.w-ring{fill:none;stroke:var(--ink);stroke-width:1;opacity:.55;
  stroke-dasharray:var(--len);
  stroke-dashoffset:calc(var(--len) * (1 - clamp(0,calc((var(--p) - .02) * 3.4),1)))}
.w-ring--2{opacity:.4;stroke-dashoffset:calc(var(--len) * (1 - clamp(0,calc((var(--p) - .16) * 3.4),1)))}
.w-ring--3{opacity:.3;stroke-dashoffset:calc(var(--len) * (1 - clamp(0,calc((var(--p) - .36) * 3.4),1)))}
.w-tickring{fill:none;stroke:var(--ink);stroke-width:6;opacity:calc(.3 * clamp(0,calc((var(--p) - .10) * 7),1))}
.w-tickring--5{stroke-width:12;opacity:calc(.45 * clamp(0,calc((var(--p) - .12) * 7),1))}
.w-sign-line{stroke:var(--ink);stroke-width:1;opacity:calc(.42 * clamp(0,calc((var(--p) - .17 - var(--i) * .009) * 24),1))}
.w-sign-label{fill:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-anchor:middle;
  opacity:calc(.75 * clamp(0,calc((var(--p) - .19 - var(--i) * .009) * 24),1))}
.w-house-line{stroke:var(--ink);stroke-width:1;opacity:calc(.3 * clamp(0,calc((var(--p) - .37 - var(--i) * .008) * 26),1))}
.w-house-line--eje{stroke:var(--accent);stroke-width:1.6;opacity:calc(.7 * clamp(0,calc((var(--p) - .37 - var(--i) * .008) * 26),1))}
.w-house-num{fill:var(--ink-soft);font-family:var(--mono);font-size:10px;text-anchor:middle;
  opacity:calc(.9 * clamp(0,calc((var(--p) - .40 - var(--i) * .008) * 26),1))}
.w-planet{fill:none;stroke:var(--text-primary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:clamp(0,calc((var(--p) - .44 - var(--i) * .022) * 26),1)}
.w-planet .fill{fill:var(--text-primary);stroke:none}
.w-planet-tick{stroke:var(--ink);stroke-width:1;opacity:calc(.5 * clamp(0,calc((var(--p) - .45 - var(--i) * .022) * 26),1))}
.w-aspect{stroke-width:1;stroke-dasharray:var(--len);
  stroke-dashoffset:calc(var(--len) * (1 - clamp(0,calc((var(--p) - .58 - var(--i) * .016) * 9),1)))}
.w-aspect--tr{stroke:var(--ink);opacity:.42}
.w-aspect--op{stroke:var(--accent);opacity:.55}
.w-aspect--cu{stroke:var(--ink-soft);opacity:.34}

/* ---------- Estructura de secciones ---------- */
section[id]{scroll-margin-top:5rem}
.s-dolor,.s-recibes,.s-como,.s-hora,.s-reservar,.s-faq{
  max-width:var(--wrap);margin-inline:auto;padding:var(--sec) var(--pad);position:relative;
}
.sec-head{max-width:54ch;margin-bottom:clamp(2.4rem,5vw,3.4rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:1.1rem}

.reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- El reconocimiento ---------- */
.s-dolor{max-width:900px}
.s-dolor h2{max-width:16ch;margin-bottom:clamp(2rem,4vw,2.8rem)}
.dolor-list{display:grid;gap:clamp(1.3rem,2.6vw,1.9rem);padding-left:clamp(1.6rem,4vw,2.6rem)}
.dolor-list p{color:var(--text-secondary);font-size:1.08rem;max-width:50ch}
.dolor-rail{position:absolute;left:var(--pad);top:calc(var(--sec) + 9rem);bottom:var(--sec);width:1px;background:rgba(143,234,196,.16)}
.dolor-rail i{position:absolute;inset:0 auto 0 0;width:1px;height:var(--fill,0%);background:linear-gradient(var(--accent),var(--ink));display:block}
@media (max-width:680px){.dolor-rail{display:none}.dolor-list{padding-left:0}}

/* ---------- Qué recibes ---------- */
.rec-bloques{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(143,234,196,.14);
  border:1px solid rgba(143,234,196,.14);border-radius:20px;overflow:hidden}
@media (min-width:820px){.rec-bloques{grid-template-columns:1fr 1fr}}
.rec-bloque{background:var(--panel);padding:clamp(1.8rem,3.4vw,2.6rem);display:flex;flex-direction:column;gap:1rem}
.rec-ico{width:44px;height:44px;color:var(--accent);flex:none}
.rec-lista{display:grid;gap:.8rem}
.rec-lista li{position:relative;padding-left:1.7rem;color:var(--text-secondary);font-size:1rem}
.rec-lista li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--accent)}
.rec-cierre{margin-top:2rem;color:var(--text-primary);font-family:var(--display);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;font-size:clamp(1.15rem,1.9vw,1.45rem);
  line-height:1.35;max-width:44ch}

/* ---------- Cómo funciona ---------- */
.pasos{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,4vw,3rem)}
@media (min-width:820px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{display:flex;flex-direction:column;gap:.7rem;text-align:center;align-items:center}
.paso-art{width:100%;color:var(--ink);opacity:.9;margin-bottom:.5rem}
.paso-art svg{width:100%;height:auto;max-width:220px}
.paso-hi{stroke:var(--accent);fill:none}
.paso-n{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.paso p:not(.paso-n){color:var(--text-secondary);font-size:.98rem;max-width:34ch}

/* ---------- La hora exacta ---------- */
.hora-panel{
  display:flex;gap:clamp(1.1rem,2.5vw,1.8rem);align-items:flex-start;
  border:1px solid rgba(183,159,255,.32);border-radius:18px;
  background:linear-gradient(120deg,rgba(183,159,255,.09),rgba(183,159,255,.02));
  padding:clamp(1.5rem,3.2vw,2.2rem);
}
.hora-ico{width:38px;height:38px;color:var(--accent);flex:none;margin-top:.15rem}
.hora-panel h2{font-size:clamp(1.25rem,2.1vw,1.65rem);margin-bottom:.6rem;max-width:22ch}
.hora-panel p{color:var(--text-secondary);max-width:60ch}

/* ---------- Reservar ---------- */
.s-reservar{max-width:720px}
.res-panel{
  background:linear-gradient(160deg,var(--panel-hi),var(--panel) 60%);
  border:1px solid rgba(143,234,196,.16);border-radius:24px;
  padding:clamp(2rem,4.5vw,3.2rem);position:relative;overflow:hidden;text-align:center;
}
.res-panel::before{content:"";position:absolute;top:-60%;right:-30%;width:70%;height:150%;
  background:radial-gradient(closest-side,rgba(183,159,255,.16),transparent);pointer-events:none}
.res-panel>*{position:relative}
.res-panel h2{margin-bottom:1rem}
.res-precio{display:flex;align-items:baseline;gap:.4rem;justify-content:center;
  font-family:var(--display);color:var(--text-primary);margin-bottom:2rem}
.res-lista{display:grid;gap:.7rem;margin-bottom:2.1rem;text-align:left;max-width:26rem;margin-inline:auto}
.res-lista li{position:relative;padding-left:1.9rem;color:var(--text-secondary)}
.res-lista li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--accent)}
.res-nota{margin-top:1rem;font-size:.86rem;color:var(--ink-soft);max-width:42ch;margin-inline:auto}

/* ---------- Planes ---------- */
.planes{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media (min-width:900px){.planes{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan-card{
  background:linear-gradient(165deg,rgba(33,33,80,.42),rgba(20,20,46,.4));
  border:1px solid rgba(143,234,196,.16);border-radius:22px;
  padding:clamp(1.6rem,3vw,2.1rem);display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.plan-card.destacado{
  border-color:var(--accent);
  background:linear-gradient(165deg,rgba(183,159,255,.14),rgba(20,20,46,.5));
  box-shadow:0 24px 60px -24px rgba(183,159,255,.4);
}
@media (min-width:900px){.plan-card.destacado{transform:translateY(-10px)}}
.plan-badge{
  position:absolute;top:1.1rem;right:1.1rem;background:var(--accent);color:#1C1030;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:.32rem .7rem;border-radius:999px;
}
.plan-nombre{font-family:var(--display);font-size:1.3rem;font-weight:600;margin-bottom:.5rem}
.plan-precio{display:flex;align-items:baseline;gap:.35rem;margin-bottom:.3rem}
.plan-precio .n{font-family:var(--display);font-size:clamp(2rem,3.6vw,2.5rem);font-weight:600}
.plan-precio .per{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
.plan-alt{font-size:.82rem;color:var(--ink-soft);margin-bottom:.9rem}
.plan-pitch{color:var(--text-secondary);font-size:.94rem;margin-bottom:1.3rem;min-height:2.6em}
.plan-lista{display:grid;gap:.6rem;margin-bottom:1.6rem;flex:1}
.plan-lista li{position:relative;padding-left:1.7rem;color:var(--text-secondary);font-size:.9rem}
.plan-lista li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
.plan-card .btn{width:100%;justify-content:center;text-align:center}
.plan-card:not(.destacado) .btn{background:transparent;border:1.5px solid rgba(143,234,196,.4);color:var(--text-primary)}
.plan-card:not(.destacado) .btn:hover{background:rgba(143,234,196,.08);border-color:var(--ink)}

/* ---------- Compartir ---------- */
.compartir{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.4rem;
  background:transparent;border:1.5px solid rgba(143,234,196,.35);color:var(--text-secondary);
  font-family:inherit;font-size:.86rem;font-weight:600;padding:.6rem 1.1rem;border-radius:999px;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.compartir:hover{border-color:var(--ink);color:var(--text-primary);background:rgba(143,234,196,.06)}
.compartir svg{width:16px;height:16px;flex:none}

/* ---------- Preguntas ---------- */
.s-faq{max-width:860px}
.faq-list{border-top:1px solid rgba(143,234,196,.16)}
.faq-item{border-bottom:1px solid rgba(143,234,196,.16)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 40,"opsz" 24;
  font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.35;transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary i{flex:none;width:20px;height:20px;position:relative;transition:transform .35s var(--ease)}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;background:var(--accent);border-radius:2px;left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-item summary i::before{width:14px;height:1.5px}
.faq-item summary i::after{width:1.5px;height:14px;transition:opacity .3s var(--ease)}
.faq-item[open] summary i{transform:rotate(90deg)}
.faq-item[open] summary i::after{opacity:0}
.faq-body{padding:0 0 1.4rem;max-width:64ch}
.faq-body p{color:var(--text-secondary)}

/* ---------- Cierre ---------- */
.s-cierre{position:relative;padding:clamp(5rem,11vw,8.5rem) var(--pad);text-align:center;overflow:hidden}
.cierre-horizonte{position:absolute;left:-10%;right:-10%;bottom:-40%;height:90%;
  background:radial-gradient(58% 100% at 50% 100%,rgba(183,159,255,.34) 0%,rgba(183,159,255,.08) 42%,transparent 72%);pointer-events:none}
.cierre-inner{position:relative;max-width:660px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:1rem}
.cierre-inner h2{max-width:18ch;margin-bottom:.4rem}
.cierre-sub{color:var(--text-secondary);max-width:44ch;margin-bottom:.8rem}
.cierre-nota{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Pie ---------- */
.pie{border-top:1px solid rgba(143,234,196,.14);background:rgba(10,7,24,.5)}
.pie-inner{max-width:var(--wrap);margin-inline:auto;padding:2.6rem var(--pad) 6.5rem;display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center}
.pie-links{display:flex;flex-wrap:wrap;gap:1.4rem;margin-left:auto}
.pie-links a{color:var(--text-secondary);text-decoration:none;font-size:.92rem;transition:color .3s}
.pie-links a:hover{color:var(--accent)}
.pie-legal{flex-basis:100%;color:var(--ink-soft);font-size:.8rem;max-width:60ch}

/* ---------- Barra fija de reserva ---------- */
.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(15,11,31,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(143,234,196,.16);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.cta-bar.is-on{transform:none}
.cta-bar-txt{display:flex;flex-direction:column;line-height:1.2}
.cta-bar-txt strong{font-family:var(--mono);font-size:.95rem;letter-spacing:.04em}
.cta-bar-txt span{font-size:.74rem;color:var(--ink-soft)}
@media (max-width:860px){.cta-bar{display:flex}}

/* ---------- Sin JavaScript la página sigue entera y vendiendo ---------- */
html:not(.js) .reveal{opacity:1;transform:none;transition:none}
html:not(.js) .cta-bar{transform:none}

/* Móviles pequeños o pantallas bajas: primero la promesa y el botón,
   los tres datos de apoyo pasan justo debajo. */
@media (max-width:420px),(max-height:700px){
  .hero{padding-top:clamp(4.6rem,15vw,6rem)}
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy .kicker{order:1}
  .hero-copy h1{order:2;font-size:clamp(1.95rem,8.6vw,2.35rem)}
  .hero-sub{order:3;font-size:1rem}
  .hero-compra{order:4;margin-top:1.4rem}
  .hero-datos{order:5;margin:1.4rem 0 0}
  .hero-nota{order:6}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .hero-art{--p:1}
}