/* ============================================================
   MENUVERSE · LANDING
   Secciones y layout.
   ============================================================ */

/* ---------------- NAVBAR ---------------- */
.navbar{
  position:fixed; inset:0 0 auto 0; z-index:50; padding:14px 0;
  transition:background .3s, box-shadow .3s, padding .3s;
}
.navbar.scrolled{
  background:rgba(250,247,255,.78);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line); padding:9px 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.6em; font-family:'Space Grotesk'; font-weight:700; font-size:1.1rem; letter-spacing:-.02em; color:#fff; transition:color .3s; }
.navbar.scrolled .brand{ color:var(--text); }
.brand-mark{
  width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--violet),var(--violet-deep));
  box-shadow:0 6px 16px -6px rgba(124,58,237,.8);
}
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-size:.92rem; font-weight:500; color:rgba(255,255,255,.82); transition:color .2s; }
.navbar.scrolled .nav-links a{ color:var(--muted); }
.nav-links a:hover{ color:#fff; }
.navbar.scrolled .nav-links a:hover{ color:var(--violet); }
.nav-cta{ display:flex; align-items:center; gap:.7rem; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.navbar.scrolled .nav-toggle span{ background:var(--text); }

/* menú mobile desplegable */
.mobile-menu{
  display:none; position:fixed; inset:64px 12px auto 12px; z-index:49;
  background:rgba(15,10,28,.96); backdrop-filter:blur(16px);
  border:1px solid var(--line-dark); border-radius:var(--r-md);
  padding:14px; flex-direction:column; gap:4px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-8px); transition:opacity .25s, transform .25s;
}
.mobile-menu.open{ display:flex; opacity:1; transform:none; }
.mobile-menu a{ color:#fff; font-family:'Space Grotesk'; font-weight:500; padding:12px 14px; border-radius:10px; }
.mobile-menu a:hover{ background:rgba(167,139,250,.14); }
.mobile-menu .btn{ margin-top:8px; }

/* ---------------- HERO ---------------- */
.hero{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(124,58,237,.42), transparent 55%),
    radial-gradient(90% 70% at 12% 90%, rgba(76,29,149,.5), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  padding:clamp(120px,17vh,180px) 0 clamp(70px,9vh,110px);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(rgba(167,139,250,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,139,250,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent 85%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hero-copy{ max-width:560px; }
.hero h1{ font-size:clamp(2.5rem,6vw,4.4rem); margin:.5rem 0 1.1rem; }
.hero h1 .accent{
  background:linear-gradient(105deg,var(--iris) 10%,var(--violet) 45%,var(--amber) 75%,var(--iris) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s ease-in-out infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }
.hero-sub{ font-size:clamp(1.05rem,1.7vw,1.22rem); color:rgba(255,255,255,.72); max-width:44ch; margin-bottom:2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.hero-trust{ margin-top:1.9rem; display:flex; align-items:center; gap:.7rem; font-size:.85rem; color:rgba(255,255,255,.6); }
.hero-trust b{ color:#fff; font-weight:600; }
.hero-trust .dot{ width:5px; height:5px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(34,197,94,.18); }

/* Signature: holo-proyector — el plato real como holograma sobre un portal AR */
.stage{ position:relative; display:grid; place-items:center; min-height:470px; --par:0px; }
.holo-scene{ position:relative; width:min(400px,92vw); height:440px; translate:0 var(--par); }

/* haz de luz del proyector (angosto en el portal, ancho arriba) */
.beam{
  position:absolute; left:50%; bottom:13%; translate:-50% 0; z-index:0;
  width:80%; height:74%;
  background:linear-gradient(180deg, rgba(167,139,250,0) 0%, rgba(124,58,237,.10) 55%, rgba(124,58,237,.30) 100%);
  clip-path:polygon(4% 0, 96% 0, 66% 100%, 34% 100%);
  filter:blur(2px);
  animation:beamFlicker 6s ease-in-out infinite;
}
@keyframes beamFlicker{ 0%,100%{ opacity:.7 } 40%{ opacity:1 } 62%{ opacity:.55 } 72%{ opacity:.95 } }

/* portal de anillos concéntricos */
.portal{ position:absolute; left:50%; bottom:2%; translate:-50% 0; width:100%; z-index:1; pointer-events:none; }
.portal svg{ width:100%; overflow:visible; }
.pr1{ stroke:url(#ringGrad); stroke-width:2.4; fill:none; animation:ringPulse 4s ease-in-out infinite; }
.pr2{ stroke:rgba(167,139,250,.55); stroke-width:1.4; fill:none; animation:orbitHero 10s linear infinite; }
.pr3{ fill:rgba(124,58,237,.10); stroke:rgba(167,139,250,.25); stroke-width:1; }
@keyframes orbitHero{ to{ stroke-dashoffset:-300 } }
@keyframes ringPulse{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.portal-glow{ position:absolute; left:50%; bottom:-46%; translate:-50% 0; width:110%; height:130%; background:radial-gradient(closest-side, rgba(124,58,237,.45), transparent 70%); filter:blur(10px); z-index:-1; }

/* el holograma: modelo 3D real */
.hero-mv{
  position:absolute; left:50%; bottom:24%; translate:-50% 0; z-index:2;
  width:min(300px,74vw); height:min(270px,62vw);
  background:transparent; --poster-color:transparent; --progress-bar-color:transparent;
  pointer-events:none;
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }

/* línea de escaneo que recorre el holograma */
.holo-scanline{
  position:absolute; z-index:3; left:50%; translate:-50% 0; bottom:24%;
  width:min(300px,74vw); height:min(270px,62vw); pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, transparent 46%, rgba(167,139,250,.28) 50%, transparent 54%, transparent 100%);
  background-size:100% 300%;
  animation:heroScan 4.5s linear infinite;
  mask-image:radial-gradient(62% 62% at 50% 55%, #000, transparent 80%);
}
@keyframes heroScan{ from{ background-position:0 130% } to{ background-position:0 -130% } }

/* transición de cambio de plato: des-materializar / re-materializar */
.hero-mv, .chip--name{ transition:opacity .45s var(--ease), filter .45s var(--ease); }
.holo-scene.swapping .hero-mv{ opacity:0; filter:blur(9px); }
.holo-scene.swapping .chip--name{ opacity:0; }
.holo-scene.swapping .holo-scanline{ animation-duration:1.1s; }
.holo-scene.swapping .beam{ animation:none; opacity:1; }

/* chips HUD flotantes */
.chip{
  position:absolute; z-index:4;
  font-family:'Space Mono'; font-size:.64rem; letter-spacing:.08em; color:#fff;
  background:rgba(21,12,36,.55); border:1px solid rgba(167,139,250,.4);
  padding:.5em .85em; border-radius:999px; backdrop-filter:blur(8px);
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.6);
  animation:chipFloat 5s ease-in-out infinite;
}
.chip b{ color:var(--iris-soft); font-weight:700; }
.chip i{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(34,197,94,.18); flex:none; }
.chip--scale{ right:2%; top:12%; animation-delay:0s; }
.chip--name{ left:0; bottom:32%; animation-delay:.7s; }
.chip--live{ right:3%; bottom:16%; animation-delay:1.3s; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* partículas */
.spark{ position:absolute; z-index:2; width:5px; height:5px; border-radius:50%; background:var(--iris); box-shadow:0 0 8px 2px rgba(167,139,250,.55); animation:sparkFloat 7s ease-in-out infinite; }
.spark.s1{ left:11%; top:26%; }
.spark.s2{ right:15%; top:40%; animation-delay:1.4s; width:4px; height:4px; }
.spark.s3{ left:20%; bottom:24%; animation-delay:2.8s; width:3px; height:3px; }
.spark.s4{ right:7%; bottom:42%; animation-delay:4.1s; }
@keyframes sparkFloat{ 0%,100%{ transform:translateY(0); opacity:.9 } 50%{ transform:translateY(-16px); opacity:.35 } }

/* ---------------- SECCIONES ---------------- */
.section{ padding:clamp(72px,11vh,130px) 0; }
.section-head{ max-width:640px; margin-bottom:clamp(38px,5vw,64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-family:'Space Grotesk'; font-weight:700; letter-spacing:-.025em; font-size:clamp(1.9rem,4vw,3rem); line-height:1.05; margin:.8rem 0 .7rem; }
.section-head p{ color:var(--muted); font-size:1.08rem; max-width:52ch; }
.section-head.center p{ margin-inline:auto; }
.section-head.center .eyebrow::before{ display:none; }

/* Beneficios */
.value{ background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%); }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:26px 22px 28px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card::after{ content:""; position:absolute; inset:auto -30% -55% -30%; height:120px; background:radial-gradient(closest-side,rgba(124,58,237,.16),transparent 70%); opacity:0; transition:opacity .35s; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:var(--line-dark); }
.card:hover::after{ opacity:1; }
.card .ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(150deg,rgba(124,58,237,.12),rgba(124,58,237,.04)); border:1px solid rgba(124,58,237,.16); color:var(--violet); margin-bottom:16px; }
.card h3{ font-family:'Space Grotesk'; font-weight:600; font-size:1.12rem; margin-bottom:.4rem; }
.card p{ color:var(--muted); font-size:.95rem; }

/* Cómo funciona */
.how{ background:var(--paper); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step{ position:relative; padding-top:8px; }
.step-n{ font-family:'Space Mono'; font-weight:700; font-size:.8rem; letter-spacing:.1em; color:var(--violet); display:inline-flex; align-items:center; gap:.6em; margin-bottom:16px; }
.step-n .num{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--ink); color:#fff; font-family:'Space Grotesk'; font-size:.95rem; }
.step-visual{ height:150px; border-radius:var(--r-md); border:1px solid var(--line); background:linear-gradient(160deg,#fff,var(--paper-2)); display:grid; place-items:center; margin-bottom:18px; color:var(--violet); }
.step h3{ font-family:'Space Grotesk'; font-weight:600; font-size:1.15rem; margin-bottom:.35rem; }
.step p{ color:var(--muted); font-size:.96rem; }

/* ---------------- PLATOS 3D (holo-galería) ---------------- */
.holo{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  background:
    radial-gradient(110% 80% at 20% 0%, rgba(124,58,237,.3), transparent 55%),
    radial-gradient(90% 70% at 90% 100%, rgba(76,29,149,.4), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}
.holo::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:
    linear-gradient(rgba(167,139,250,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(167,139,250,.07) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(75% 70% at 50% 40%,#000,transparent 90%);
}
.holo .eyebrow::before{ background:currentColor; }
.pods{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pod{
  display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(167,139,250,.16);
  backdrop-filter:blur(6px); perspective:900px;
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease);
}
.pod:hover{ transform:translateY(-6px); border-color:rgba(167,139,250,.45); box-shadow:0 30px 70px -30px rgba(124,58,237,.6); }
.pod-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; font-family:'Space Mono'; font-size:.66rem; letter-spacing:.14em;
  color:var(--iris-soft); border-bottom:1px solid rgba(167,139,250,.14);
}
.pod-live{ display:inline-flex; align-items:center; gap:.5em; }
.pod-live i{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(34,197,94,.2); animation:blink 2.4s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.pod-stage{
  position:relative; height:300px; display:grid; place-items:center;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .25s var(--ease);
}
.pod-stage model-viewer{
  width:100%; height:100%; background:transparent;
  --poster-color:transparent; --progress-bar-color:var(--violet);
  --progress-bar-height:2px; cursor:grab;
}
.pod-stage model-viewer:active{ cursor:grabbing; }
.pod-ring{ position:absolute; left:50%; bottom:8%; translate:-50% 0; width:86%; pointer-events:none; }
.pod-ring .orbit{ animation:orbit 9s linear infinite; }
@keyframes orbit{ to{ stroke-dashoffset:-300 } }
.pod-scan{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(180deg, transparent 0%, rgba(167,139,250,.14) 48%, rgba(167,139,250,.32) 50%, rgba(167,139,250,.14) 52%, transparent 100%);
  background-size:100% 240%; background-position:0 -70%;
}
.pod:hover .pod-scan{ opacity:1; animation:scan 2.2s linear infinite; }
@keyframes scan{ from{ background-position:0 -70% } to{ background-position:0 170% } }
.pod-ar{
  position:absolute; left:50%; bottom:14px; translate:-50% 0;
  font-size:.85rem; padding:.7em 1.15em; white-space:nowrap;
  background:rgba(124,58,237,.9); backdrop-filter:blur(8px);
  border:1px solid rgba(167,139,250,.5);
}
.pod-ar::before{ content:"◉ "; }
.pod-foot{ padding:16px 18px 20px; border-top:1px solid rgba(167,139,250,.14); }
.pod-foot h3{ font-family:'Space Grotesk'; font-weight:600; font-size:1.08rem; }
.pod-foot p{ font-family:'Space Mono'; font-size:.66rem; letter-spacing:.1em; color:rgba(255,255,255,.45); margin-top:.3rem; text-transform:uppercase; }
.holo-hint{ text-align:center; margin-top:clamp(26px,4vw,40px); color:rgba(255,255,255,.55); font-size:.9rem; }
.holo-hint b{ color:var(--iris-soft); }

/* ---------------- PLANES ---------------- */
.plans{ background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 60%); }
.plan-promo{
  display:inline-flex; align-items:center; gap:.6em; margin:0 auto clamp(30px,4vw,44px);
  font-family:'Space Mono'; font-size:.78rem; letter-spacing:.04em; color:var(--violet-deep);
  background:rgba(124,58,237,.09); border:1px solid rgba(124,58,237,.2);
  padding:.55em 1em; border-radius:999px;
}
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{
  --accent:var(--violet);
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px 32px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--accent); }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.plan--start{ --accent:var(--plan-start); }
.plan--pro{ --accent:var(--plan-pro); border-color:rgba(124,58,237,.4); box-shadow:0 30px 70px -30px rgba(124,58,237,.5); transform:translateY(-14px); }
.plan--pro:hover{ transform:translateY(-20px); }
.plan--premium{ --accent:var(--plan-premium); }
.plan-badge{
  position:absolute; top:-13px; left:50%; translate:-50% 0;
  font-family:'Space Grotesk'; font-weight:700; font-size:.74rem; letter-spacing:.06em;
  background:var(--violet); color:#fff; padding:.5em 1em; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4em; box-shadow:0 10px 20px -8px rgba(124,58,237,.7);
}
.plan-name{ font-family:'Space Grotesk'; font-weight:700; font-size:1.7rem; color:var(--accent); letter-spacing:-.01em; }
.plan-tagline{ color:var(--muted); font-size:.92rem; margin-top:.2rem; min-height:2.6em; }
.plan-platos{ display:flex; align-items:center; gap:.6em; font-family:'Space Grotesk'; font-weight:600; font-size:1.05rem; padding:14px 0; margin-top:6px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--text); }
.plan-platos svg{ color:var(--accent); flex:none; }
.plan-reg{ font-family:'Space Mono'; font-size:.68rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; margin-top:22px; }
.plan-reg s{ color:var(--muted); text-decoration-color:var(--plan-premium); text-decoration-thickness:2px; margin-left:.4em; font-family:'Inter'; letter-spacing:0; font-size:1rem; }
.plan-off{ display:inline-block; margin-top:12px; font-family:'Space Grotesk'; font-weight:700; font-size:.82rem; letter-spacing:.02em; color:#fff; background:var(--accent); padding:.6em .95em; border-radius:10px; line-height:1.15; }
.plan-off small{ display:block; font-size:.72rem; font-weight:600; opacity:.92; letter-spacing:.08em; }
.plan-price{ display:flex; align-items:baseline; gap:.15em; margin-top:16px; }
.plan-price .cur{ font-family:'Space Grotesk'; font-weight:700; font-size:1.6rem; color:var(--accent); }
.plan-price .num{ font-family:'Space Grotesk'; font-weight:700; font-size:3rem; line-height:1; color:var(--accent); letter-spacing:-.02em; }
.plan-price .per{ color:var(--muted); font-size:1rem; }
.plan-features{ list-style:none; margin:22px 0 26px; display:flex; flex-direction:column; gap:11px; }
.plan-features li{ display:flex; align-items:flex-start; gap:.6em; font-size:.95rem; color:var(--text); }
.plan-features svg{ color:var(--accent); flex:none; margin-top:2px; }
.plan .btn{ margin-top:auto; }
.plan--start .btn{ --bg:var(--plan-start); }
.plan--premium .btn{ --bg:var(--plan-premium); }
.plan-note{ text-align:center; color:var(--muted); font-size:.85rem; margin-top:26px; }

/* ---------------- CTA FINAL ---------------- */
.cta{ padding:clamp(30px,5vw,50px) 0 clamp(60px,8vw,90px); }
.cta-band{
  position:relative; overflow:hidden; border-radius:28px; color:#fff;
  background:
    radial-gradient(120% 140% at 85% 15%, rgba(167,139,250,.55), transparent 55%),
    linear-gradient(120deg,var(--violet-deep),var(--violet-600));
  padding:clamp(38px,6vw,66px); display:grid; grid-template-columns:1.4fr auto; gap:28px; align-items:center;
  box-shadow:var(--shadow-float);
}
.cta-band::before{ content:""; position:absolute; inset:0; opacity:.4; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(70% 100% at 80% 0,#000,transparent); }
.cta-band h2{ font-family:'Space Grotesk'; font-weight:700; letter-spacing:-.02em; font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.05; }
.cta-band h2 .soft{ color:var(--iris-soft); }
.cta-band p{ color:rgba(255,255,255,.8); margin-top:.6rem; }
.cta-phone{ font-family:'Space Grotesk'; font-weight:700; font-size:clamp(1.3rem,2.6vw,1.7rem); margin-top:1rem; letter-spacing:.02em; }
.cta-side{ position:relative; display:flex; flex-direction:column; gap:.8rem; align-items:stretch; min-width:240px; }

/* ---------------- FOOTER ---------------- */
footer{ padding:34px 0 46px; }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--muted); font-size:.86rem; }
.foot .brand{ color:var(--text); }
.foot .brand small{ display:block; font-family:'Inter'; font-weight:400; font-size:.72rem; color:var(--muted); letter-spacing:0; }

/* ---------------- REVEAL / ENTRADA ---------------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s }
[data-reveal][data-d="2"]{ transition-delay:.16s }
[data-reveal][data-d="3"]{ transition-delay:.24s }
[data-reveal][data-d="4"]{ transition-delay:.32s }
.hero-copy > *{ opacity:0; transform:translateY(18px); animation:heroIn .8s var(--ease) forwards; }
.hero-copy > *:nth-child(1){ animation-delay:.1s }
.hero-copy > *:nth-child(2){ animation-delay:.2s }
.hero-copy > *:nth-child(3){ animation-delay:.3s }
.hero-copy > *:nth-child(4){ animation-delay:.42s }
.hero-copy > *:nth-child(5){ animation-delay:.54s }
.stage{ opacity:0; transform:translateY(26px) scale(.98); animation:heroIn 1s var(--ease) .35s forwards; }
@keyframes heroIn{ to{ opacity:1; transform:none } }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .plan-grid{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .plan--pro{ transform:none; }
  .plan--pro:hover{ transform:translateY(-6px); }
}
@media (max-width:900px){
  .hero{ padding-top:96px; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ margin-inline:auto; }
  .hero-sub{ margin-inline:auto; }
  .hero-actions,.hero-trust{ justify-content:center; }
  /* la escena va primero; ahora está contenida, no pisa el navbar */
  .stage{ order:-1; min-height:auto; margin-top:6px; }
  .holo-scene{ height:400px; }
  .hero-mv, .holo-scanline{ width:min(250px,70vw); height:min(225px,62vw); }
  .chip{ font-size:.6rem; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .pods{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .pod-stage{ height:280px; }
  .cta-band{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta .btn--ghost{ display:none; }
  .cards{ grid-template-columns:1fr; }
  .eyebrow::before{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-copy>*,.stage{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ===================== FAQ ===================== */
.faq{ background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%); }
.faq-list{ max-width:760px; margin-inline:auto; display:grid; gap:12px; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:2px 4px; overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item[open]{ border-color:var(--line-dark); box-shadow:var(--shadow-card); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
  font-family:'Space Grotesk'; font-weight:600; font-size:1.04rem; color:var(--text);
  padding:18px 20px; user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; margin-left:auto; flex:0 0 20px; width:20px; height:20px; position:relative;
  transition:transform .35s var(--ease);
}
.faq-item summary::before{
  content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%;
  background:var(--violet); box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
.faq-item summary span.tog{ display:none; }
.faq-item summary::after{
  background:
    linear-gradient(var(--violet),var(--violet)) center/12px 2px no-repeat,
    linear-gradient(var(--violet),var(--violet)) center/2px 12px no-repeat;
}
.faq-item[open] summary::after{ transform:rotate(135deg); }
.faq-a{ padding:0 20px 20px 42px; }
.faq-a p{ color:var(--muted); font-size:.98rem; line-height:1.6; }
@media (max-width:560px){
  .faq-item summary{ font-size:.98rem; padding:16px 16px; }
  .faq-a{ padding:0 16px 18px 38px; }
}
@media (prefers-reduced-motion:reduce){
  .faq-item summary::after{ transition:none; }
}