/* =========================================================================
   DAGR369 · style.css
   Ciberpunk sobrio, oscuro de principio a fin. Mobile-first.
   Las animaciones de scroll (GSAP) llegan en la fase 4; aquí todo es estático
   y visible. Los [data-reveal] solo se ocultan cuando hay JS (clase .js).
   ========================================================================= */

/* ---------- Fuentes self-hosted (subset latin) ---------- */
/* Display: Space Grotesk · Cuerpo: Hanken Grotesk (nada de Inter/Roboto) */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/space-grotesk-700.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/hanken-400.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/hanken-500.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/hanken-600.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/hanken-700.woff2") format("woff2");}

/* ---------- Tokens de marca ---------- */
:root{
  --black:#05070F;
  --navy:#0A0F26;
  --navy-2:#121A3A;
  --cyan:#22D3E8;
  --cyan-lt:#8FEAF6;
  --magenta:#E01FD0;
  --mag-lt:#F56BE6;
  --white:#FFFFFF;
  --muted:#93A0C4;
  --grad:linear-gradient(90deg,#22D3E8 0%,#E01FD0 100%);

  --line:rgba(147,160,196,.16);
  --line-strong:rgba(147,160,196,.28);

  --font-head:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;

  --container:1200px;
  --container-narrow:820px;
  --pad-x:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(4rem,9vw,8rem);
  --radius:18px;
  --radius-lg:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--white);
  background:var(--black);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button,input{font:inherit;color:inherit;}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.05;letter-spacing:-.01em;}
::selection{background:var(--cyan);color:var(--black);}

/* ---------- Accesibilidad: foco y skip link ---------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}
.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  transform:translateY(-150%);
  background:var(--cyan);color:var(--black);font-weight:600;
  padding:.6rem 1rem;border-radius:8px;transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x);}
.container--narrow{max-width:var(--container-narrow);}

/* ---------- Encabezados de sección ---------- */
.section-head{margin-bottom:clamp(2rem,4vw,3.5rem);}
.section-head--center{text-align:center;}
.section-head--center .section-kicker{justify-content:center;}
.section-kicker,.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan-lt);
}
.section-kicker::before,.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;background:var(--grad);
}
.section-title{
  font-size:clamp(1.9rem,4.5vw,3rem);margin-top:1rem;max-width:20ch;
}
.section-head--center .section-title{margin-inline:auto;}

/* ---------- Botones ---------- */
.btn{
  --glow:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;line-height:1;white-space:nowrap;
  padding:.8rem 1.35rem;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  box-shadow:0 0 0 0 var(--glow);
}
.btn--lg{padding:1rem 1.8rem;font-size:1.05rem;}
.btn--block{width:100%;}
.btn--grad{background:var(--grad);color:var(--black);font-weight:700;--glow:rgba(34,211,232,.35);}
.btn--grad:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px var(--glow);}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--white);}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan-lt);transform:translateY(-2px);}
.btn--wa{background:rgba(34,211,232,.12);border-color:rgba(34,211,232,.45);color:var(--cyan-lt);font-weight:600;}
.btn--wa:hover{background:rgba(34,211,232,.2);border-color:var(--cyan);transform:translateY(-2px);}
.btn__dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(5,7,15,.85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:64px;
}
.nav__brand{justify-self:start;display:inline-flex;}
.nav__logo{height:26px;width:auto;}
.nav__links{display:none;justify-self:center;gap:2rem;}
.nav__links a{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .2s var(--ease);}
.nav__links a:hover{color:var(--white);}
.nav__cta{justify-self:end;padding:.6rem 1.1rem;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;}
.hero__sticky{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;place-items:center;
}
.hero__video,.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero__orb{display:none;}
.hero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,15,.75) 0%,rgba(5,7,15,.25) 45%,#05070F 100%);
}
.hero__content{position:relative;z-index:2;text-align:center;padding-block:clamp(6rem,14vh,9rem) clamp(3rem,8vh,5rem);}
.hero__title{
  font-size:clamp(2.9rem,11vw,6.5rem);margin:1.1rem 0 0;
  text-shadow:0 2px 40px rgba(5,7,15,.6);
}
.hero__subtitle{
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(1.15rem,3vw,1.7rem);color:var(--white);
  margin:1.1rem auto 0;max-width:24ch;
}
.hero__lead{
  color:var(--muted);font-size:clamp(1rem,2vw,1.15rem);
  margin:1.4rem auto 0;max-width:52ch;
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.2rem;
}

/* ---------- Tira de cifras ---------- */
.stats{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(10,15,38,.35),transparent);}
.stats__row{
  display:grid;grid-template-columns:1fr;gap:1.75rem;
  padding-block:clamp(2.25rem,5vw,3.25rem);text-align:center;
}
.stat{display:flex;flex-direction:column;gap:.35rem;}
.stat__num{
  font-family:var(--font-head);font-weight:700;font-size:clamp(2.2rem,6vw,3rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.stat__label{color:var(--muted);font-size:.98rem;}

/* ---------- Cómo funciona ---------- */
.steps{position:relative;overflow:hidden;padding-block:var(--section-y);}
.steps__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.62) saturate(1.3) contrast(1.05);
}
.steps__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#05070F 0%,rgba(5,7,15,.5) 18%,rgba(5,7,15,.38) 50%,rgba(5,7,15,.5) 82%,#05070F 100%);
}
.steps__inner{position:relative;z-index:2;}
.steps__grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.step-card{
  position:relative;border-radius:var(--radius);padding:1.75rem;
  background:rgba(10,15,38,.34);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 0 44px -16px rgba(34,211,232,.45);
}
/* Borde en gradiente con interior transparente (deja ver el fondo) */
.step-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.step-card > *{position:relative;}
.step-card__num{
  font-family:var(--font-head);font-weight:700;font-size:1.5rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.step-card__title{font-size:1.25rem;margin:.5rem 0 .6rem;}
.step-card p{color:var(--muted);}
.steps__dots{display:flex;gap:.5rem;justify-content:center;margin-top:2rem;}
.steps__dots span{width:8px;height:8px;border-radius:999px;background:var(--line-strong);transition:all .3s var(--ease);}
.steps__dots span.is-active{width:26px;background:var(--grad);}

/* ---------- El producto ---------- */
.product{padding-block:var(--section-y);}
.product__head{display:grid;grid-template-columns:1fr;gap:1.25rem;}
.product__lead{color:var(--muted);margin:0 0 1.4rem;font-size:1.08rem;}
.feature-list{display:grid;gap:.9rem;}
.feature-list li{position:relative;padding-left:1.6rem;color:var(--white);}
.feature-list li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 10px rgba(34,211,232,.6);
}
/* Vídeo grande, a todo el ancho de la sección */
.product__stage{margin-top:clamp(2rem,5vw,3.5rem);}
.product__frame{
  position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;margin-inline:auto;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid transparent;
  background:linear-gradient(var(--navy),var(--navy)) padding-box,var(--grad) border-box;
  box-shadow:0 40px 120px -50px rgba(34,211,232,.6),0 0 60px -28px rgba(224,31,208,.45);
}
.product__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- Planes ---------- */
.plans{padding-block:var(--section-y);}
.plans__grid{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:start;}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--navy);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem 1.75rem;
}
.plan--featured{
  border:1px solid transparent;
  background:linear-gradient(var(--navy),var(--navy)) padding-box,var(--grad) border-box;
  box-shadow:0 0 60px -22px rgba(34,211,232,.6);
}
.plan__badge{
  position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:var(--magenta);color:var(--black);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .85rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 20px -6px rgba(224,31,208,.7);
}
.plan__name{font-size:1.35rem;}
.plan__price{display:flex;align-items:baseline;gap:.2rem;margin-top:.9rem;}
.plan__amount{font-family:var(--font-head);font-weight:700;font-size:2.6rem;}
.plan__period{color:var(--muted);font-weight:500;}
.plan__vat{color:var(--muted);font-size:.86rem;margin-top:.15rem;}
.plan__list{display:grid;gap:.7rem;margin:1.5rem 0;}
.plan__list li{position:relative;padding-left:1.5rem;color:var(--white);font-size:.98rem;}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(34,211,232,.7);
}
.plan--featured .plan__list li::before{background:var(--grad);}
.plan__cta{margin-top:auto;}
.plans__fine{color:var(--muted);text-align:center;font-size:.9rem;margin-top:2rem;}

/* ---------- Cumplimiento ---------- */
.trust{padding-block:var(--section-y);}
.trust__card{
  background:var(--navy);border-radius:var(--radius-lg);
  border-left:3px solid var(--cyan);
  padding:clamp(1.75rem,4vw,3rem);
  box-shadow:0 0 50px -30px rgba(34,211,232,.5);
}
.trust__title{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:1rem;}
.trust__text{color:var(--muted);font-size:1.08rem;max-width:70ch;}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--section-y);}
.faq__list{display:grid;gap:.75rem;}
.faq__item{
  background:var(--navy);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.35rem;font-family:var(--font-head);font-weight:700;font-size:1.05rem;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-top:-4px;
}
.faq__item[open] summary::after{transform:rotate(225deg);margin-top:2px;}
.faq__body{padding:0 1.35rem 1.25rem;}
.faq__body p{color:var(--muted);}

/* ---------- CTA final + contacto ---------- */
.final{position:relative;overflow:hidden;padding-block:var(--section-y);text-align:center;}
.final__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 30% 30%,rgba(34,211,232,.16),transparent 70%),
    radial-gradient(45% 40% at 72% 60%,rgba(224,31,208,.14),transparent 70%);
}
.final__orb{
  position:absolute;z-index:0;left:50%;bottom:-6%;transform:translateX(-50%);
  width:min(680px,120%);opacity:.12;pointer-events:none;
  mix-blend-mode:screen;
}
.final__inner{position:relative;z-index:2;display:grid;gap:2.5rem;justify-items:center;}
.final__title{font-size:clamp(1.9rem,5vw,3.2rem);max-width:16ch;}
.final__subtitle{color:var(--muted);font-size:1.15rem;margin-top:1rem;max-width:44ch;}
.final__wa{margin-top:1.8rem;font-family:var(--font-head);}
.final__email{color:var(--muted);margin-top:1.1rem;}
.final__email a{color:var(--cyan-lt);text-decoration:underline;text-underline-offset:3px;}

.final__form{
  width:100%;max-width:460px;text-align:left;
  background:var(--navy);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,4vw,2.25rem);
}
.final__form-title{font-family:var(--font-head);font-weight:700;font-size:1.2rem;margin-bottom:1.25rem;text-align:center;}
.field{display:grid;gap:.4rem;margin-bottom:1rem;}
.field label{font-size:.85rem;color:var(--muted);font-weight:500;}
.field input{
  width:100%;background:var(--navy-2);border:1px solid var(--line-strong);
  border-radius:12px;padding:.8rem .9rem;color:var(--white);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input::placeholder{color:rgba(147,160,196,.6);}
.field input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,232,.18);}
.consent{display:flex;gap:.65rem;align-items:flex-start;margin:.4rem 0 1.4rem;font-size:.9rem;color:var(--muted);}
.consent input{margin-top:.15rem;width:18px;height:18px;accent-color:var(--cyan);flex:none;}
.consent a{color:var(--cyan-lt);text-decoration:underline;text-underline-offset:2px;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:2.75rem;background:var(--black);}
.footer__inner{display:grid;gap:1.75rem;text-align:center;}
.footer__brand img{height:26px;width:auto;margin-inline:auto;}
.footer__brand p{color:var(--muted);margin-top:.6rem;font-size:.95rem;}
.footer__contact{display:flex;flex-direction:column;gap:.4rem;}
.footer__contact a{color:var(--muted);transition:color .2s var(--ease);}
.footer__contact a:hover{color:var(--cyan-lt);}
.footer__legal{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;}
.footer__legal a{color:var(--muted);font-size:.9rem;transition:color .2s var(--ease);}
.footer__legal a:hover{color:var(--white);}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (min-width:700px){
  .stats__row{grid-template-columns:repeat(3,1fr);}
  .stat{position:relative;}
  .stat + .stat::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    height:52px;width:1px;background:var(--line-strong);
  }
  .steps__grid{grid-template-columns:repeat(3,1fr);}
  .plans__grid{grid-template-columns:repeat(3,1fr);}
  .footer__inner{grid-template-columns:1fr auto 1fr;align-items:center;text-align:left;}
  .footer__brand img{margin-inline:0;}
  .footer__contact{align-items:center;}
  .footer__legal{justify-content:flex-end;}
}

@media (min-width:900px){
  .nav__links{display:flex;}
  .product__head{grid-template-columns:1fr 1fr;align-items:end;gap:clamp(2rem,4vw,3.5rem);}
  .plan--featured{transform:scale(1.05);z-index:2;}
  .hero__content{padding-block:clamp(7rem,16vh,11rem) clamp(4rem,10vh,7rem);}
  /* Orbe de marca: solo desktop y sin reduced-motion (evita cargar 196 KB en móvil) */
  @media (prefers-reduced-motion:no-preference){
    .hero__orb{
      display:block;position:absolute;z-index:0;
      top:50%;left:50%;transform:translate(-50%,-50%);
      width:900px;height:900px;max-width:120vw;
      background:url("/assets/img/logo-orb.webp") center/contain no-repeat;
      opacity:.18;mix-blend-mode:screen;pointer-events:none;
    }
  }
}

/* =========================================================================
   FASE 4 · Estados para animación (activos solo con la clase .anim en <html>)
   ========================================================================= */
.anim [data-reveal]{opacity:0;}

/* El hero se revela por CSS (no espera a que descargue GSAP) -> LCP rápido.
   Anima los HIJOS; el fade-out por scrub anima el contenedor .hero__content,
   así que no chocan. */
@keyframes heroReveal{from{transform:translateY(22px);}to{transform:none;}}
/* opacity:1 pisa el opacity:0 global -> el H1 (LCP) pinta al instante */
.anim .hero__content [data-reveal]{opacity:1;animation:heroReveal .75s var(--ease) both;}
.anim .hero__content [data-reveal]:nth-child(1){animation-delay:.05s;}
.anim .hero__content [data-reveal]:nth-child(2){animation-delay:.13s;}
.anim .hero__content [data-reveal]:nth-child(3){animation-delay:.21s;}
.anim .hero__content [data-reveal]:nth-child(4){animation-delay:.29s;}
.anim .hero__content [data-reveal]:nth-child(5){animation-delay:.37s;}

/* Hero: scrub de fotogramas en <canvas> (desktop) */
.hero__canvas{opacity:0;transition:opacity .5s var(--ease);z-index:1;}
.hero__canvas.is-ready{opacity:1;}
@media (min-width:900px){
  .hero.is-scrub{height:300vh;min-height:0;}
  .hero.is-scrub .hero__sticky{position:sticky;top:0;height:100vh;min-height:0;}
}

/* Cómo funciona: carrusel horizontal pineado (desktop), tarjeta activa centrada */
@media (min-width:900px){
  .steps.is-pinned{padding-block:0;overflow:hidden;}
  .steps.is-pinned .steps__inner{
    max-width:none;padding-inline:0;
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(1.5rem,4vh,3rem);padding-block:7vh;
  }
  .steps.is-pinned .section-head{margin-bottom:0;padding-inline:var(--pad-x);}
  .steps.is-pinned .steps__grid{
    display:flex;flex-wrap:nowrap;position:relative;
    gap:clamp(1.5rem,3vw,2.5rem);width:max-content;
    padding-inline:calc(50vw - min(38vw,300px)); /* centra 1ª y última tarjeta */
    will-change:transform;
  }
  .steps.is-pinned .step-card{
    flex:0 0 min(76vw,600px);
    min-height:clamp(260px,40vh,400px);
    display:flex;flex-direction:column;justify-content:center;
    will-change:transform,opacity;transition:box-shadow .3s var(--ease);
  }
  .steps.is-pinned .step-card__num{font-size:2.2rem;}
  .steps.is-pinned .step-card__title{font-size:1.7rem;margin:.7rem 0 .8rem;}
  .steps.is-pinned .step-card p{font-size:1.15rem;max-width:34ch;}
  .steps.is-pinned .steps__dots{margin-top:0;}
}

/* =========================================================================
   REDISEÑO $10K · fondo continuo, superficies de cristal, más jerarquía
   ========================================================================= */
/* Más aire entre secciones (jerarquía que respira) */
:root{--section-y:clamp(5rem,11vw,9.5rem);}

/* --- Fondo continuo que recorre la web (tras el hero) --- */
.bg-scroll{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:#05070F center/cover no-repeat;
  background-image:url("/assets/video/kling_5563-poster.jpg");
}
.bg-scroll__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);}
.bg-scroll__canvas.is-ready{opacity:1;}
.bg-scroll__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,7,15,.88) 0%,rgba(5,7,15,.52) 14%,rgba(5,7,15,.52) 86%,rgba(5,7,15,.88) 100%),
    radial-gradient(120% 75% at 50% 42%,transparent 28%,rgba(5,7,15,.5) 100%);
}

/* --- Secciones transparentes: dejan ver el fondo --- */
.stats{background:none;}
.footer{background:none;}

/* --- Superficies de cristal, legibles sobre el fondo en movimiento --- */
.plan,.trust__card,.faq__item,.final__form{
  background:rgba(9,13,32,.56);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
}
.plan{border-color:rgba(147,160,196,.22);}
.plan--featured{
  background:rgba(12,17,42,.62);border:1px solid transparent;
  box-shadow:0 0 70px -20px rgba(34,211,232,.55);
}
.plan--featured::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.faq__item{border-color:rgba(147,160,196,.2);}
.final__form input{background:rgba(5,7,15,.55);}
.step-card{background:rgba(10,15,38,.44);}

/* Legibilidad real del texto que va directo sobre el fondo en movimiento */
.section-head .section-title,.section-head .section-kicker,.stats .stat__label,
.plans__fine,.final__title,.final__subtitle,.final__email{
  text-shadow:0 1px 12px rgba(5,7,15,.78);
}

/* --- Micro-interacciones (motion que susurra) --- */
.plan{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s var(--ease);}
.faq__item[open] summary{color:var(--cyan-lt);}
.nav__links a{position:relative;}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1);}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .plan:not(.plan--featured):hover{transform:translateY(-6px);border-color:rgba(34,211,232,.4);}
}

/* =========================================================================
   PÁGINAS LEGALES (mismo tono oscuro, sencillo, sin animaciones)
   ========================================================================= */
.legal-nav{border-bottom:1px solid var(--line);padding-block:1.1rem;position:sticky;top:0;background:rgba(5,7,15,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;}
.legal-nav .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.legal-nav img{height:24px;width:auto;display:block;}
.legal-back{color:var(--muted);font-size:.92rem;transition:color .2s var(--ease);}
.legal-back:hover{color:var(--cyan-lt);}
.legal-main{padding-block:clamp(2.5rem,6vw,5rem);}
.legal-main h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.4rem;}
.legal-updated{color:var(--muted);font-size:.9rem;margin-bottom:2.6rem;}
.legal-main h2{font-size:1.35rem;margin:2.4rem 0 .8rem;}
.legal-main h3{font-size:1.05rem;margin:1.4rem 0 .5rem;color:var(--cyan-lt);}
.legal-main p,.legal-main li{color:var(--muted);line-height:1.75;}
.legal-main p{margin-bottom:1rem;}
.legal-main ul{padding-left:1.25rem;list-style:disc;margin-bottom:1rem;}
.legal-main li{margin-bottom:.5rem;}
.legal-main a{color:var(--cyan-lt);text-decoration:underline;text-underline-offset:2px;}
.legal-main strong{color:var(--white);font-weight:600;}
.legal-pending{background:rgba(224,31,208,.12);border:1px solid rgba(224,31,208,.4);color:var(--mag-lt);padding:.05em .4em;border-radius:4px;font-size:.92em;white-space:nowrap;}

/* =========================================================================
   PREFERS-REDUCED-MOTION  (base; la fase 4 amplía la lógica en JS)
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
  .btn:hover{transform:none;}
}