/* ============================================================
   PROFLOW — Landing styles
   Vanilla CSS. Dark premium. SaaS + industrial.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Colores fondo — negro profundo con tinte violeta */
  --bg-0:#06030B;
  --bg-1:#0B0714;
  --bg-2:#120A1E;
  --bg-3:#180F28;
  --bg-4:#1F1433;

  /* Lineas — violeta sutil */
  --line-soft:rgba(138,92,255,0.06);
  --line:rgba(138,92,255,0.12);
  --line-strong:rgba(138,92,255,0.22);

  /* Texto */
  --text-0:#F7F7FB;
  --text-1:#E5E2F0;
  --text-2:#B9B4C9;
  --text-3:#7C7592;
  --text-4:#4F4A63;

  /* Acentos dobles: azul electrico + violeta */
  --accent:#2F80FF;            /* azul electrico primario */
  --accent-bright:#4DA3FF;     /* azul glow */
  --accent-dim:#1A4FB3;
  --violet:#6C3BFF;            /* violeta profundo */
  --violet-bright:#8A5CFF;     /* violeta glow */
  --violet-dim:#3F1FA6;

  /* Glows + soft + lines */
  --accent-glow:rgba(47,128,255,0.35);
  --violet-glow:rgba(138,92,255,0.35);
  --accent-soft:rgba(47,128,255,0.10);
  --violet-soft:rgba(138,92,255,0.10);
  --accent-line:rgba(138,92,255,0.18);

  /* Gradiente firma — violeta → azul */
  --grad-primary:linear-gradient(135deg,#8A5CFF 0%,#6C3BFF 40%,#2F80FF 100%);
  --grad-primary-hover:linear-gradient(135deg,#9D73FF 0%,#7B4CFF 40%,#4DA3FF 100%);
  --grad-glow:radial-gradient(circle,rgba(138,92,255,0.35),rgba(47,128,255,0.15) 45%,transparent 70%);

  /* Estados */
  --success:#2ed689;
  --warning:#f5b850;
  --danger:#ff5c5c;

  /* Radios */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* Sombras */
  --shadow-1:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);
  --shadow-2:0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 80px rgba(0,0,0,0.5);
  --shadow-glow:0 0 0 1px var(--accent-line), 0 0 60px -10px var(--accent-glow);

  /* Easing */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);

  /* Layout */
  --container:1240px;
  --nav-h:72px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable; /* evita que el scrollbar descentre al navbar fijo */
}
body{
  font-family:'Inter Tight',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  background:var(--bg-0);
  color:var(--text-1);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;padding:0;margin:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;}
summary{cursor:pointer;list-style:none;}
summary::-webkit-details-marker{display:none;}
input,select,textarea,button{font:inherit;}

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

/* ---------- 3. Background layers ---------- */
.bg-grid{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(138,92,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,92,255,0.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,#000 20%,transparent 75%);
}
.bg-glows{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  overflow:hidden;
}
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:.35;
  will-change:transform;
}
.glow--1{
  width:680px;height:680px;
  top:-220px;left:-180px;
  background:radial-gradient(circle,var(--violet-bright) 0%,transparent 70%);
  opacity:.22;
  animation:floatA 22s ease-in-out infinite;
}
.glow--2{
  width:620px;height:620px;
  top:38%;right:-220px;
  background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
  opacity:.22;
  animation:floatB 28s ease-in-out infinite;
}
.glow--3{
  width:520px;height:520px;
  bottom:-180px;left:28%;
  background:radial-gradient(circle,var(--violet) 0%,transparent 70%);
  opacity:.18;
  animation:floatA 34s ease-in-out infinite reverse;
}
@keyframes floatA{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(40px,30px);}
}
@keyframes floatB{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-50px,-30px);}
}
.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
}

/* ---------- 4. Container ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:768px){
  .container{padding:0 40px;}
}

/* ---------- 5. Typography ---------- */
.h-display{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:1.02;
  letter-spacing:-0.035em;
  font-weight:600;
  color:var(--text-0);
}
.h-section{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:600;
  color:var(--text-0);
}
.h-section-sm{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.2;
  letter-spacing:-0.02em;
  font-weight:500;
  color:var(--text-1);
}
.lead{
  font-size:clamp(1rem,1.3vw,1.175rem);
  color:var(--text-2);
  max-width:560px;
  line-height:1.6;
}
.subsection{
  font-size:1.0625rem;
  color:var(--text-2);
  max-width:640px;
  margin:0 auto;
  line-height:1.65;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-2);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:999px;
  white-space:nowrap;
}

.gradient-text{
  /* cursor-follow halo: el punto caliente se mueve segun --mx / --my (seteadas por JS) */
  --mx:50%;
  --my:50%;
  background:
    radial-gradient(circle 420px at var(--mx) var(--my),
      var(--violet-bright) 0%,
      var(--accent-bright) 35%,
      var(--text-0) 70%,
      var(--text-2) 110%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:filter .5s ease;
  will-change:filter;
}
.gradient-text.is-cursor-active{
  filter:
    drop-shadow(0 0 24px rgba(138,92,255,0.45))
    drop-shadow(0 0 14px rgba(47,128,255,0.35));
}

/* Helper: aplicar el mismo efecto a cualquier texto (p.ej. h3 de cards) */
.cursor-glow{
  --mx:50%;
  --my:50%;
  background:
    radial-gradient(circle 300px at var(--mx) var(--my),
      var(--violet-bright) 0%,
      var(--accent-bright) 45%,
      var(--text-0) 85%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:filter .5s ease;
}
.cursor-glow.is-cursor-active{
  filter:
    drop-shadow(0 0 18px rgba(138,92,255,0.4))
    drop-shadow(0 0 10px rgba(47,128,255,0.3));
}

/* ---------- 6. Icons ---------- */
.icon{
  width:20px;
  height:20px;
  color:currentColor;
  flex-shrink:0;
}
.icon--xs{width:14px;height:14px;}
.icon--sm{width:16px;height:16px;}
.icon--lg{width:24px;height:24px;}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 20px;
  border-radius:10px;
  font-weight:500;
  font-size:.95rem;
  letter-spacing:-0.005em;
  transition:transform .25s var(--ease-out),background .25s ease,border-color .25s ease,box-shadow .3s ease;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
}
.btn--sm{height:38px;padding:0 16px;font-size:.88rem;}
.btn--lg{height:52px;padding:0 28px;font-size:1rem;}

.btn--primary{
  background:var(--grad-primary);
  color:#fff;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -4px 12px rgba(0,0,0,0.25) inset,
    0 10px 28px -10px var(--violet-glow),
    0 6px 22px -8px var(--accent-glow);
}
.btn--primary:hover{
  transform:translateY(-1px) scale(1.02);
  background:var(--grad-primary-hover);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 -4px 14px rgba(0,0,0,0.3) inset,
    0 18px 48px -10px var(--violet-glow),
    0 12px 32px -10px var(--accent-glow);
}
.btn--primary:active{transform:translateY(0) scale(1);}

.btn--ghost{
  background:rgba(18,10,30,0.6);
  color:var(--text-1);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{
  background:var(--bg-3);
  border-color:var(--violet-bright);
  color:var(--text-0);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(138,92,255,0.15),0 6px 20px -6px var(--violet-glow);
}

/* ---------- 8. Navbar — estado inicial expandido → scrolled pill compacto ---------- */
.nav{
  position:fixed;
  top:22px;
  left:0;
  right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
  height:auto;
  padding-right:var(--sbw,0px);
  transition:top .45s var(--ease-out);
}
.nav > .container{
  /* Wrapper invisible que contiene al pill y lo centra.
     No forza width: el pill interno tiene fit-content y se dimensiona a su contenido. */
  width:auto;
  max-width:calc(100% - 24px);
  padding:0;
  margin:0;
  pointer-events:auto;
  display:flex;
  justify-content:center;
}

/* Estado inicial — barra mas abierta, bordes suaves, respirada */
.nav__inner{
  display:flex;
  align-items:center;
  gap:32px;
  width:fit-content;
  max-width:100%;
  height:62px;
  padding:6px 10px 6px 30px;
  background:rgba(18,10,30,0.62);
  border:1px solid var(--line-strong);
  border-radius:22px;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 10px 36px -16px rgba(6,3,11,0.55),
    0 0 0 1px rgba(138,92,255,0.08) inset;
  isolation:isolate; /* contiene stacking de children */
  transition:
    height .45s var(--ease-out),
    padding .45s var(--ease-out),
    gap .45s var(--ease-out),
    border-radius .45s var(--ease-out),
    background .35s ease,
    border-color .35s ease,
    box-shadow .45s ease;
  white-space:nowrap;
}
.nav__inner > *{position:relative;z-index:1;} /* children sobre el background del pill */

/* Estado scrolled — capsula pill compacta centrada */
.nav.is-scrolled{top:10px;}
.nav.is-scrolled .nav__inner{
  gap:20px;
  height:48px;
  padding:4px 5px 4px 20px;
  border-radius:999px;
  background:rgba(11,7,20,0.88);
  border-color:var(--accent-line);
  box-shadow:
    0 14px 44px -12px rgba(6,3,11,0.8),
    0 0 26px -4px var(--violet-glow),
    0 0 0 1px rgba(138,92,255,0.14) inset;
}

/* Transiciones internas — sin jumps entre estados */
.nav__logo-text{
  font-size:1.3rem;
  transition:font-size .45s var(--ease-out);
}
.nav__logo-reg{
  transition:font-size .45s var(--ease-out);
}
.nav.is-scrolled .nav__logo-text{font-size:1.08rem;}
.nav.is-scrolled .nav__logo-reg{font-size:.5em;}

.nav__cta .btn--sm{
  height:44px;
  padding:0 20px;
  font-size:.9rem;
  transition:height .45s var(--ease-out), padding .45s var(--ease-out), font-size .45s var(--ease-out);
}
.nav.is-scrolled .nav__cta .btn--sm{
  height:36px;
  padding:0 16px;
  font-size:.82rem;
}

.nav__toggle{
  transition:width .45s var(--ease-out), height .45s var(--ease-out), background .2s ease, border-color .2s ease;
}
.nav.is-scrolled .nav__toggle{width:36px;height:36px;}

.nav__links{
  gap:6px;
  transition:gap .45s var(--ease-out);
}
.nav.is-scrolled .nav__links{gap:2px;}
.nav__links a{
  padding:9px 16px;
  font-size:.9rem;
  transition:padding .45s var(--ease-out), font-size .45s var(--ease-out), color .25s ease, background .25s ease, text-shadow .3s ease;
}
.nav.is-scrolled .nav__links a{
  padding:6px 12px;
  font-size:.82rem;
}
.nav__logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  letter-spacing:0.01em;
}
.nav__logo-text{
  font-family:'Poppins','Inter Tight',sans-serif;
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-0.035em;
  color:var(--text-0);
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  white-space:nowrap;
}
.nav__logo-reg{
  font-size:.5em;
  font-weight:700;
  line-height:1;
  color:var(--text-0);
  align-self:flex-start;
  transform:translateY(0.15em);
  letter-spacing:0;
}
.footer__brand .nav__logo-text{font-size:1.5rem;}

.nav__links{
  display:none;
  align-items:center;
  gap:4px;
}
.nav__links a{
  --mx:50%;
  position:relative;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--text-2);
  padding:7px 14px;
  border-radius:999px;
  transition:color .25s ease, background .25s ease, text-shadow .3s ease;
  overflow:hidden;
}
.nav__links a:hover{
  color:var(--text-0);
  background:rgba(138,92,255,0.08);
  text-shadow:0 0 14px rgba(138,92,255,0.55);
}
/* Underline luminoso que sigue al cursor */
.nav__links a::after{
  content:"";
  position:absolute;
  bottom:4px;
  left:var(--mx);
  width:48px;height:2px;
  margin-left:-24px;
  background:radial-gradient(ellipse 24px 2px at center, var(--violet-bright) 0%, var(--accent-bright) 40%, transparent 100%);
  filter:blur(0.4px);
  opacity:0;
  transform:translateY(2px);
  transition:
    opacity .25s ease,
    transform .35s var(--ease-out),
    left .18s cubic-bezier(0.22,1,0.36,1);
  pointer-events:none;
}
.nav__links a:hover::after{
  opacity:1;
  transform:translateY(0);
}
/* Halo sutil adicional que acompaña bajo el link */
.nav__links a::before{
  content:"";
  position:absolute;
  bottom:-4px;
  left:var(--mx);
  width:80px;height:14px;
  margin-left:-40px;
  background:radial-gradient(ellipse 40px 7px at center, rgba(138,92,255,0.35) 0%, transparent 70%);
  opacity:0;
  transition:opacity .3s ease, left .18s cubic-bezier(0.22,1,0.36,1);
  pointer-events:none;
  filter:blur(2px);
}
.nav__links a:hover::before{opacity:1;}

.nav__cta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.nav__cta .btn--sm{
  height:40px;
  padding:0 18px;
  font-size:.86rem;
  flex-shrink:0;
}
.nav__toggle{
  display:inline-flex;
  width:40px;height:40px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--text-1);
  border:1px solid var(--line-strong);
  background:rgba(18,10,30,0.6);
  flex-shrink:0;
}
.nav__toggle:hover{background:var(--bg-3);border-color:var(--violet-bright);}

/* Mobile: el CTA del navbar se oculta (el mobile menu ya tiene su propio "Empezar gratis") */
@media (max-width:959px){
  .nav__cta .btn--sm{display:none;}
  .nav__inner{gap:14px;padding:4px 4px 4px 18px;}
  .nav.is-scrolled .nav__inner{padding:3px 4px 3px 16px;}
}

@media (min-width:960px){
  .nav__links{display:flex;}
  .nav__toggle{display:none;}
}

/* Mobile menu */
.mobile-menu{
  position:fixed;
  top:76px;
  left:16px;right:16px;
  z-index:99;
  background:rgba(11,7,20,0.92);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line-strong);
  border-radius:24px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.7), 0 0 30px -10px var(--violet-glow);
  transform:translateY(-10px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:transform .35s var(--ease-out),opacity .3s ease;
  max-height:calc(100vh - 100px);
  overflow-y:auto;
}
.mobile-menu.is-open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
.mobile-menu__inner{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:20px 24px 28px;
}
.mobile-menu__inner a{
  padding:14px 16px;
  border-radius:10px;
  color:var(--text-1);
  font-size:1rem;
  transition:background .2s ease;
}
.mobile-menu__inner a:hover{background:var(--bg-2);}
.mobile-menu__inner .btn{
  margin-top:12px;
  justify-content:center;
}
@media (min-width:960px){
  .mobile-menu{display:none;}
}

/* ---------- 9. Hero ---------- */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 72px) 0 120px;
}
.hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:center;
}
@media (min-width:1024px){
  .hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:64px;
    align-items:center;
  }
  .hero{padding:calc(var(--nav-h) + 96px) 0 160px;}
}
.hero__copy{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.hero__copy .eyebrow{align-self:flex-start;}
.split-word{display:inline-block;margin-right:.22em;}

.hero__ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}
.hero__bullets{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:4px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.hero__bullets li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  color:var(--text-2);
}
.hero__bullets svg{color:var(--accent-bright);}

/* Hero visual / mock stack */
.hero__visual{
  position:relative;
  min-height:520px;
  perspective:1600px;
}
.mock-stack{
  position:relative;
  width:100%;
  height:100%;
  min-height:520px;
  transform-style:preserve-3d;
}
.mock-card{
  position:absolute;
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01)),var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:18px;
  box-shadow:var(--shadow-1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .6s var(--ease-out),box-shadow .4s ease;
  color:var(--text-1);
  will-change:transform;
  animation:cardFloat 6s ease-in-out infinite;
}
.mock-card:hover{box-shadow:var(--shadow-2);}

.mock-card--main{
  top:0;left:0;right:0;
  padding:22px;
  transform:perspective(1200px) rotateX(2deg) rotateY(-4deg);
  z-index:5;
}
.mock-card--metric{
  top:260px;left:20px;
  width:240px;
  transform:perspective(1200px) rotateX(2deg) rotateY(-4deg);
  animation-delay:-2s;
  z-index:4;
}
.mock-card--materials{
  top:290px;right:0;
  width:260px;
  transform:perspective(1200px) rotateX(2deg) rotateY(-4deg);
  animation-delay:-4s;
  z-index:4;
}
.mock-card--trace{
  display:flex;
  gap:12px;
  align-items:center;
  top:460px;left:40px;
  width:280px;
  transform:perspective(1200px) rotateX(2deg) rotateY(-4deg);
  animation-delay:-3s;
  z-index:3;
}
.mock-card--free{
  top:470px;right:30px;
  width:200px;
  transform:perspective(1200px) rotateX(2deg) rotateY(-4deg);
  animation-delay:-1s;
  z-index:3;
  background:linear-gradient(180deg,rgba(138,92,255,0.18),rgba(138,92,255,0.05)),var(--bg-2);
  border-color:var(--accent-line);
  box-shadow:0 0 0 1px var(--accent-line),0 24px 48px -20px var(--accent-glow);
}

@keyframes cardFloat{
  0%,100%{transform:perspective(1200px) rotateX(2deg) rotateY(-4deg) translateY(0);}
  50%{transform:perspective(1200px) rotateX(2deg) rotateY(-4deg) translateY(-8px);}
}

.mock-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.mock-card__head h3,.mock-card__head h4{
  font-size:.98rem;
  font-weight:500;
  color:var(--text-0);
  letter-spacing:-0.01em;
}
.mock-card__head h4{font-size:.85rem;}
.mock-card__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--accent-bright);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.mock-card__tag .icon{color:var(--success);animation:blink 2s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.mock-card__meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-3);
}
.mock-card__badge{
  font-size:10px;
  padding:3px 8px;
  background:rgba(46,214,137,0.12);
  color:var(--success);
  border:1px solid rgba(46,214,137,0.25);
  border-radius:999px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.mock-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.82rem;
  margin-bottom:8px;
}
.mock-row__label{color:var(--text-3);}
.mock-row__value{
  font-family:'JetBrains Mono',monospace;
  color:var(--text-0);
  font-weight:500;
}
.mock-bar{
  position:relative;
  height:6px;
  background:var(--bg-3);
  border-radius:999px;
  overflow:hidden;
}
.mock-bar__fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  border-radius:999px;
  transition:width 1.2s var(--ease-out);
  box-shadow:0 0 12px var(--accent-glow);
}
.mock-bar__fill--warning{
  background:linear-gradient(90deg,var(--warning),#ffcf6f);
  box-shadow:0 0 12px rgba(245,184,80,0.25);
}

.mock-steps{
  display:flex;
  gap:6px;
  margin-top:14px;
  overflow-x:auto;
}
.mock-step{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  letter-spacing:0.03em;
  color:var(--text-3);
  text-transform:uppercase;
  padding-top:10px;
  border-top:2px solid var(--bg-3);
  position:relative;
}
.mock-step span{
  position:absolute;top:-5px;left:0;
  width:8px;height:8px;
  background:var(--bg-3);
  border-radius:50%;
}
.mock-step--done{color:var(--text-2);border-color:var(--accent);}
.mock-step--done span{background:var(--accent);}
.mock-step--active{color:var(--text-0);border-color:var(--accent-bright);}
.mock-step--active span{
  background:var(--accent-bright);
  box-shadow:0 0 0 3px rgba(138,92,255,0.25);
  animation:pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 3px rgba(138,92,255,0.25);}
  50%{box-shadow:0 0 0 6px rgba(138,92,255,0.12);}
}

.metric-big{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:2.2rem;
  color:var(--text-0);
  font-weight:500;
  letter-spacing:-0.02em;
  margin:6px 0 12px;
}
.metric-big em{
  font-family:'Inter Tight',sans-serif;
  font-style:normal;
  font-size:.78rem;
  color:var(--text-3);
  font-weight:400;
}
.mock-sparkline{
  color:var(--accent-bright);
  height:44px;
}
.mock-sparkline svg{
  width:100%;height:100%;
  filter:drop-shadow(0 0 6px var(--accent-glow));
}

.pulse{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 0 0 rgba(255,92,92,0.6);
  animation:pulseRed 2s ease-in-out infinite;
}
.pulse--green{
  background:var(--success);
  box-shadow:0 0 0 0 rgba(46,214,137,0.6);
  animation:pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseRed{
  0%{box-shadow:0 0 0 0 rgba(255,92,92,0.6);}
  70%{box-shadow:0 0 0 10px rgba(255,92,92,0);}
  100%{box-shadow:0 0 0 0 rgba(255,92,92,0);}
}
@keyframes pulseGreen{
  0%{box-shadow:0 0 0 0 rgba(46,214,137,0.5);}
  70%{box-shadow:0 0 0 10px rgba(46,214,137,0);}
  100%{box-shadow:0 0 0 0 rgba(46,214,137,0);}
}

.mock-bar--split{height:8px;margin:10px 0;}
.mock-legend{
  display:flex;gap:16px;
  font-size:11px;
  color:var(--text-3);
}
.mock-legend span{display:inline-flex;align-items:center;gap:6px;}
.mock-legend i{
  width:8px;height:8px;
  border-radius:2px;
}

.mock-card--trace .trace-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--bg-3);
  color:var(--accent-bright);
  flex-shrink:0;
  border:1px solid var(--line);
}
.mock-card--trace h4{
  font-family:'JetBrains Mono',monospace;
  font-size:.88rem;
  color:var(--text-0);
  margin-bottom:2px;
}
.mock-card--trace p{
  font-size:.75rem;color:var(--text-3);
}

.mock-card--free h4{
  font-size:1rem;color:var(--text-0);margin-bottom:4px;
}
.mock-card--free p{font-size:.82rem;color:var(--text-2);}
.mock-card__free-ribbon{
  display:inline-block;
  padding:4px 10px;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--accent-bright);
  color:#04060a;
  border-radius:999px;
  font-weight:600;
  margin-bottom:10px;
}

/* Scroll hint */
.hero__scroll-hint{
  position:absolute;
  bottom:24px;left:50%;
  transform:translateX(-50%);
  width:22px;height:36px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  display:none;
}
.hero__scroll-hint span{
  display:block;
  width:2px;height:6px;
  background:var(--text-2);
  border-radius:2px;
  margin:6px auto 0;
  animation:scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{transform:translateY(0);opacity:.3;}
  50%{transform:translateY(12px);opacity:1;}
  100%{transform:translateY(0);opacity:.3;}
}
@media (min-width:1024px){
  .hero__scroll-hint{display:block;}
}

/* ---------- 10. Trust / Metrics ---------- */
.trust{
  padding:64px 0;
  position:relative;
}
.trust::before,.trust::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.trust::before{top:0;}
.trust::after{bottom:0;}
.trust__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;
}
.metric-card{
  padding:32px 28px;
  text-align:center;
  position:relative;
}
.metric-card + .metric-card{border-top:1px solid var(--line);}
@media (min-width:768px){
  .metric-card + .metric-card{border-top:0;border-left:1px solid var(--line);}
}
.metric-card__value{
  font-family:'Inter Tight',sans-serif;
  font-size:clamp(2.8rem,5vw,4.2rem);
  line-height:1;
  letter-spacing:-0.04em;
  font-weight:500;
  color:var(--text-0);
  margin-bottom:8px;
}
.metric-card__label{
  font-size:.95rem;
  color:var(--text-2);
  letter-spacing:-0.01em;
  max-width:220px;
  margin:0 auto;
}

/* ---------- 11. Section head ---------- */
.section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
  margin:0 auto 64px;
  max-width:720px;
}
.section-head--compact{margin-bottom:40px;gap:12px;}
.section-head h2{margin-bottom:6px;}

/* ---------- 12. Modules (Tabs) ---------- */
.modules{padding:120px 0;}
.tabs{
  display:flex;
  gap:6px;
  padding:6px;
  margin:0 auto 48px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:14px;
  overflow-x:auto;
  width:fit-content;
  max-width:100%;
  scrollbar-width:thin;
}
.tabs::-webkit-scrollbar{height:4px;}
.tabs::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px;}

.tab{
  padding:10px 18px;
  font-size:.88rem;
  color:var(--text-2);
  border-radius:10px;
  transition:background .2s ease,color .2s ease;
  white-space:nowrap;
  position:relative;
  font-weight:500;
}
.tab:hover{color:var(--text-0);}
.tab.is-active{
  background:var(--bg-3);
  color:var(--text-0);
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,0 8px 20px -8px rgba(0,0,0,0.5);
}

.tab-panels{position:relative;}
.tab-panel{
  animation:panelIn .5s var(--ease-out);
}
.tab-panel[hidden]{display:none;}

@keyframes panelIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

.module-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.module-card{
  position:relative;
  padding:24px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:transform .35s var(--ease-out),border-color .25s ease,background .3s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:360px;
}
.module-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,transparent 40%,rgba(138,92,255,0.35),transparent 60%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.module-card:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:rgba(138,92,255,0.28);
  box-shadow:0 18px 48px -16px rgba(6,3,11,0.7), 0 0 30px -6px var(--violet-glow);
}
.module-card:hover::before{opacity:1;}

.module-card__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.module-card__icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--bg-3);
  color:var(--accent-bright);
  border:1px solid var(--line);
}
.module-card__tag{
  display:inline-block;
  font-size:10px;
  padding:3px 9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  background:rgba(138,92,255,0.08);
  color:var(--violet-bright);
  border:1px solid var(--accent-line);
  border-radius:999px;
}
.module-card__features{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 0 4px;
  border-top:1px solid var(--line);
  margin-top:4px;
  list-style:none;
}
.module-card__features li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.78rem;
  color:var(--text-2);
  line-height:1.4;
}
.module-card__features svg{
  color:var(--violet-bright);
  margin-top:3px;
  flex-shrink:0;
  width:11px;
  height:11px;
}
.module-card__benefit{
  padding:8px 12px;
  background:linear-gradient(135deg,rgba(138,92,255,0.1),rgba(47,128,255,0.05));
  border:1px solid var(--accent-line);
  border-radius:8px;
  font-size:.78rem;
  color:var(--text-1);
  line-height:1.4;
  letter-spacing:-0.005em;
}
.module-card__benefit strong{
  color:var(--violet-bright);
  font-weight:600;
  display:block;
  font-size:.82rem;
  letter-spacing:-0.01em;
}
.module-card h3{
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:-0.015em;
  color:var(--text-0);
}
.module-card p{
  font-size:.9rem;
  color:var(--text-2);
  line-height:1.55;
  flex:1;
}
.module-card__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  font-size:.82rem;
  color:var(--text-1);
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:8px;
  align-self:flex-start;
  font-weight:500;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.module-card__cta:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent-bright);
}
.module-card__cta--free{
  background:var(--accent-soft);
  color:var(--accent-bright);
  border-color:var(--accent-line);
  cursor:default;
}
.module-card__cta--free:hover{background:var(--accent-soft);color:var(--accent-bright);border-color:var(--accent-line);}

.module-card--free{
  background:linear-gradient(135deg,rgba(138,92,255,0.12),rgba(138,92,255,0.02)),var(--bg-1);
  border-color:var(--accent-line);
}
.module-card--free::before{opacity:.7;}
.module-card__free{
  position:absolute;
  top:16px;right:16px;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 10px;
  background:var(--accent-bright);
  color:#04060a;
  border-radius:999px;
}

/* ============================================================
   12.5. Plan de implementacion (timeline scroll)
   ============================================================ */
.plan{padding:120px 0 60px;}

.plan-timeline{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:40px 0 20px;
}

/* Rail (linea vertical con progress) */
.plan-timeline__rail{
  position:absolute;
  top:0;bottom:0;
  left:40px;
  width:2px;
  background:linear-gradient(180deg,
    transparent,
    rgba(138,92,255,0.12) 6%,
    rgba(138,92,255,0.12) 94%,
    transparent);
  border-radius:2px;
  pointer-events:none;
  overflow:visible;
}
.plan-timeline__rail-fill{
  display:block;
  position:absolute;
  top:0;left:-1px;
  width:4px;
  height:100%;
  transform:scaleY(0);
  transform-origin:top;
  background:linear-gradient(180deg,
    var(--violet-bright) 0%,
    var(--violet) 45%,
    var(--accent) 100%);
  border-radius:4px;
  box-shadow:
    0 0 22px var(--violet-glow),
    0 0 12px var(--accent-glow);
  will-change:transform;
  /* Sin transition: el update va 1:1 con el scroll via requestAnimationFrame */
}
.plan-timeline__rail-fill::after{
  /* Punto luminoso en la punta del fill — solo visible cuando hay progreso */
  content:"";
  position:absolute;
  left:50%;bottom:-6px;
  width:12px;height:12px;
  margin-left:-6px;
  border-radius:50%;
  background:radial-gradient(circle, var(--violet-bright) 0%, transparent 65%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  filter:blur(1px);
}
.plan-timeline.is-progressing .plan-timeline__rail-fill::after{opacity:1;}

.plan-step{
  position:relative;
  display:grid;
  grid-template-columns:80px 1fr;
  gap:20px;
  padding:36px 0;
  min-height:240px;
}
.plan-step:first-child{padding-top:8px;}
.plan-step:last-child{padding-bottom:8px;}

/* Nodo (circulo con numero) */
.plan-step__node{
  position:sticky;
  top:100px;
  display:grid;place-items:center;
  width:80px;
  z-index:2;
  align-self:start;
}
.plan-step__node-inner{
  position:relative;
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(138,92,255,0.3), rgba(11,7,20,1) 70%),
    var(--bg-1);
  border:2px solid rgba(138,92,255,0.25);
  font-family:'JetBrains Mono',monospace;
  font-size:.95rem;
  font-weight:600;
  color:var(--text-2);
  letter-spacing:-0.01em;
  transition:transform .6s var(--ease-out),
             border-color .5s ease,
             background .5s ease,
             color .4s ease,
             box-shadow .5s ease;
}
/* Ring concentrico animado alrededor del node activo */
.plan-step__node-inner::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(138,92,255,0.28);
  opacity:0;
  transform:scale(0.82);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events:none;
}
.plan-step__node-inner::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid rgba(47,128,255,0.18);
  opacity:0;
  transform:scale(0.7);
  transition:opacity .6s var(--ease-out) .08s, transform .6s var(--ease-out) .08s;
  pointer-events:none;
}
.plan-step.is-active .plan-step__node-inner{
  transform:scale(1.1);
  background:var(--grad-primary);
  color:#fff;
  border-color:rgba(255,255,255,0.25);
  font-size:1rem;
  box-shadow:
    0 0 0 6px rgba(138,92,255,0.12),
    0 0 36px -4px var(--violet-glow),
    0 0 22px -4px var(--accent-glow),
    0 1px 0 rgba(255,255,255,0.3) inset;
  animation:nodeBreathe 2.8s ease-in-out infinite;
}
.plan-step.is-active .plan-step__node-inner::before{
  opacity:1;
  transform:scale(1);
  animation:ringPulseInner 2.8s ease-in-out infinite;
}
.plan-step.is-active .plan-step__node-inner::after{
  opacity:1;
  transform:scale(1);
  animation:ringPulseOuter 2.8s ease-in-out infinite .15s;
}
@keyframes nodeBreathe{
  0%,100%{box-shadow:
    0 0 0 6px rgba(138,92,255,0.12),
    0 0 36px -4px var(--violet-glow),
    0 0 22px -4px var(--accent-glow),
    0 1px 0 rgba(255,255,255,0.3) inset;}
  50%{box-shadow:
    0 0 0 8px rgba(138,92,255,0.18),
    0 0 44px -2px var(--violet-glow),
    0 0 28px -2px var(--accent-glow),
    0 1px 0 rgba(255,255,255,0.35) inset;}
}
@keyframes ringPulseInner{
  0%{opacity:.9;transform:scale(1);}
  70%{opacity:0;transform:scale(1.35);}
  100%{opacity:0;transform:scale(1.4);}
}
@keyframes ringPulseOuter{
  0%{opacity:.5;transform:scale(1);}
  70%{opacity:0;transform:scale(1.5);}
  100%{opacity:0;transform:scale(1.55);}
}
.plan-step.is-done .plan-step__node-inner{
  background:linear-gradient(135deg,var(--violet-dim),rgba(47,128,255,0.4));
  color:var(--text-1);
  border-color:rgba(138,92,255,0.35);
}
.plan-step.is-done .plan-step__node-inner::before,
.plan-step.is-done .plan-step__node-inner::after{opacity:0;}

/* Contenido de cada etapa */
.plan-step__content{
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 30px;
  opacity:.38;
  transform:translateY(18px) scale(0.985);
  filter:blur(4px);
  transition:opacity .8s var(--ease-out),
             transform .8s var(--ease-out),
             filter .8s var(--ease-out),
             border-color .6s ease,
             box-shadow .6s ease;
  will-change:opacity,transform,filter;
}
.plan-step.is-done .plan-step__content{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.plan-step.is-active .plan-step__content{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
  border-color:rgba(138,92,255,0.34);
  box-shadow:
    0 28px 64px -22px rgba(6,3,11,0.75),
    0 0 44px -10px var(--violet-glow),
    0 0 20px -14px var(--accent-glow);
}
/* Eyebrow + heading del step activo: acento violeta */
.plan-step__eyebrow{transition:color .4s ease, text-shadow .4s ease;}
.plan-step.is-active .plan-step__eyebrow{
  color:var(--violet-bright);
  text-shadow:0 0 16px rgba(138,92,255,0.55);
}
.plan-step__head h3{transition:color .4s ease;}
.plan-step.is-active .plan-step__head h3{color:var(--text-0);}

.plan-step__head{
  display:flex;flex-direction:column;gap:4px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.plan-step__eyebrow{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--violet-bright);
  font-weight:600;
}
.plan-step__head h3{
  font-family:'Inter Tight',sans-serif;
  font-size:1.5rem;
  font-weight:500;
  color:var(--text-0);
  letter-spacing:-0.02em;
  line-height:1.2;
}
.plan-step__duration{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;
  color:var(--text-3);
  letter-spacing:0.02em;
  margin-top:4px;
}
.plan-step__body{
  display:flex;flex-direction:column;gap:14px;
  color:var(--text-2);
  font-size:.95rem;
  line-height:1.65;
}
.plan-step__body > p{margin:0;}
.plan-step__subtitle{color:var(--text-1);font-size:.95rem;margin-top:2px!important;}
.plan-step__list{
  display:flex;flex-direction:column;gap:8px;
  padding:0;margin:0;list-style:none;
}
.plan-step__list li{
  display:flex;align-items:flex-start;gap:10px;
  color:var(--text-1);
  font-size:.9rem;
  line-height:1.55;
}
.plan-step__list li svg{
  color:var(--violet-bright);
  margin-top:4px;
  flex-shrink:0;
}

.plan-step__days{
  display:flex;flex-direction:column;gap:12px;
  padding:16px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.plan-day{
  display:grid;
  grid-template-columns:68px 1fr;
  gap:14px;
  align-items:flex-start;
}
.plan-day__label{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  color:var(--violet-bright);
  letter-spacing:0.04em;
  padding-top:2px;
}
.plan-day ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:4px;
  font-size:.86rem;color:var(--text-2);
  line-height:1.5;
}
.plan-day b{color:var(--text-1);font-weight:500;}

.plan-step__benefit{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(138,92,255,0.08),rgba(47,128,255,0.04));
  border:1px solid var(--accent-line);
  border-radius:10px;
  font-size:.9rem;
  color:var(--text-1);
  line-height:1.5;
}
.plan-step__benefit svg{color:var(--violet-bright);margin-top:2px;flex-shrink:0;}
.plan-step__benefit strong{color:var(--violet-bright);font-weight:600;}

.plan-step__note{
  font-size:.85rem;
  color:var(--text-3);
  font-style:italic;
  padding:10px 14px;
  border-left:2px solid var(--accent-line);
  background:rgba(138,92,255,0.04);
  border-radius:0 6px 6px 0;
}

/* Responsive timeline: mobile simplifica */
@media (max-width:700px){
  .plan-timeline__rail{left:22px;}
  .plan-step{
    grid-template-columns:52px 1fr;
    gap:12px;
    padding:22px 0;
    min-height:auto;
  }
  .plan-step__node{
    top:80px;
    width:52px;
  }
  .plan-step__node-inner{
    width:42px;height:42px;
    font-size:.82rem;
  }
  .plan-step__content{padding:22px 20px;}
  .plan-step__head h3{font-size:1.2rem;}
  .plan-day{
    grid-template-columns:1fr;
    gap:4px;
  }
  .plan-day__label{
    padding-bottom:2px;
    border-bottom:1px solid var(--line);
    margin-bottom:4px;
  }
}

/* ---------- 13. Pillars ---------- */
.pillars{padding:120px 0;position:relative;}
.pillars__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media (min-width:960px){
  .pillars__grid{grid-template-columns:repeat(3,1fr);}
}
.pillar-card{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease-out),border-color .25s ease;
}
.pillar-card:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(138,92,255,0.32);
  box-shadow:0 22px 56px -18px rgba(6,3,11,0.8), 0 0 36px -8px var(--violet-glow), 0 0 22px -10px var(--accent-glow);
}
.pillar-card__visual{
  position:relative;
  height:220px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 120%,var(--accent-soft),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.pillar-viz{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:32px;
}
.pillar-viz__label{
  position:absolute;
  bottom:14px;left:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-3);
}
.pillar-viz__label .icon{color:var(--success);animation:blink 2s infinite;}

.pillar-card__body{
  padding:28px 26px 32px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pillar-card__num{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  color:var(--accent-bright);
  letter-spacing:0.12em;
  display:block;
  margin-bottom:4px;
}
.pillar-card__body h3{
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--text-0);
  line-height:1.2;
}
.pillar-card__body p{
  font-size:.9rem;
  color:var(--text-2);
  line-height:1.6;
}

/* Grid viz (pillar 1) */
.grid-viz{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  width:130px;height:130px;
  color:var(--accent-bright);
}
.grid-viz__cell{
  background:var(--bg-3);
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.grid-viz__cell::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-bright));
  transform-origin:bottom;
  transform:scaleY(0);
  animation:cellFill 3.2s ease-in-out infinite;
  animation-delay:calc(var(--d) * .22s);
}
@keyframes cellFill{
  0%{transform:scaleY(0);}
  30%{transform:scaleY(1);}
  80%{transform:scaleY(1);}
  100%{transform:scaleY(0);}
}

/* Ring viz (pillar 2) */
.ring-viz{
  position:relative;
  width:160px;height:160px;
  color:var(--accent-bright);
}
.ring-viz svg{transform:rotate(-90deg);}
.ring-viz__track,.ring-viz__fill{transition:stroke-dashoffset 1.5s var(--ease-out);}
.ring-viz__fill{filter:drop-shadow(0 0 8px var(--accent-glow));}
.ring-viz__center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-family:'JetBrains Mono',monospace;
  color:var(--text-0);
}
.ring-viz__center span{font-size:2.2rem;font-weight:500;}
.ring-viz__center em{font-style:normal;font-size:1rem;color:var(--text-2);margin-left:2px;}
.ring-viz__center small{font-size:10px;color:var(--text-3);letter-spacing:0.08em;text-transform:uppercase;margin-top:6px;}

/* ─── Loss chart (pillar 3): barras + trend line + insight ─── */
.loss-chart{
  position:relative;
  width:100%;
  height:160px;
  padding:6px 12px 26px;
  overflow:hidden;
}
.loss-chart__grid{
  position:absolute;
  inset:6px 12px 26px;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;
  z-index:1;
}
.loss-chart__grid span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(138,92,255,0.08),transparent);
}
.loss-chart__bars{
  position:absolute;
  inset:6px 12px 26px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  z-index:2;
}
.loss-bar{
  position:relative;
  flex:1;
  height:var(--h);
  background:linear-gradient(180deg,rgba(138,92,255,0.85),rgba(108,59,255,0.25));
  border-radius:3px 3px 0 0;
  transform-origin:bottom;
  transform:scaleY(0);
  animation:barRise .9s cubic-bezier(0.22,1,0.36,1) forwards;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
.loss-bar i{
  position:absolute;
  bottom:-20px;
  font-style:normal;
  font-size:9px;
  color:var(--text-3);
  letter-spacing:0.06em;
  font-weight:600;
  text-transform:uppercase;
}
.loss-bar em{
  position:absolute;
  top:-16px;
  font-style:normal;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;
  color:var(--text-3);
  opacity:0;
  transition:opacity .3s ease;
}
.loss-bar:hover em{opacity:1;}
.loss-bar--alert{
  background:linear-gradient(180deg,rgba(255,92,92,0.85),rgba(255,92,92,0.2));
  box-shadow:0 0 14px -4px rgba(255,92,92,0.5);
}
.loss-bar--alert em{color:#ff8888;opacity:1;}
.loss-bar:nth-child(1){animation-delay:.1s;}
.loss-bar:nth-child(2){animation-delay:.18s;}
.loss-bar:nth-child(3){animation-delay:.26s;}
.loss-bar:nth-child(4){animation-delay:.34s;}
.loss-bar:nth-child(5){animation-delay:.42s;}
.loss-bar:nth-child(6){animation-delay:.5s;}
.loss-bar:nth-child(7){animation-delay:.58s;}
@keyframes barRise{to{transform:scaleY(1);}}

.loss-chart__trend{
  position:absolute;
  inset:6px 12px 26px;
  width:calc(100% - 24px);
  height:calc(100% - 32px);
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(138,92,255,0.4));
}
.loss-chart__line{
  stroke-dasharray:800;
  stroke-dashoffset:800;
  animation:lineDraw 1.8s cubic-bezier(0.22,1,0.36,1) .7s forwards;
}
.loss-chart__area{
  opacity:0;
  animation:areaFade .8s ease 1.6s forwards;
}
.loss-chart__pt{
  fill:#8A5CFF;
  opacity:0;
  animation:ptFade .4s ease forwards;
}
.loss-chart__pt:nth-of-type(1){animation-delay:.9s;}
.loss-chart__pt:nth-of-type(2){animation-delay:1.1s;}
.loss-chart__pt:nth-of-type(3){animation-delay:1.3s;}
.loss-chart__pt:nth-of-type(4){animation-delay:1.5s;}
.loss-chart__pt:nth-of-type(5){animation-delay:1.7s;}
.loss-chart__pt:nth-of-type(6){animation-delay:1.9s;}
.loss-chart__pt:nth-of-type(7){animation-delay:2.1s;}
.loss-chart__pt--alert{
  fill:#ff5c5c;
  filter:drop-shadow(0 0 6px rgba(255,92,92,0.7));
  animation:ptFade .4s ease forwards, ptPulse 2s ease-in-out infinite 2.2s;
}
@keyframes lineDraw{to{stroke-dashoffset:0;}}
@keyframes areaFade{to{opacity:1;}}
@keyframes ptFade{to{opacity:1;}}
@keyframes ptPulse{
  0%,100%{r:4;}
  50%{r:6;}
}

.loss-chart__insight{
  position:absolute;
  top:8px;right:12px;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px 6px 8px;
  background:rgba(11,7,20,0.85);
  border:1px solid rgba(255,92,92,0.3);
  border-radius:8px;
  backdrop-filter:blur(8px);
  z-index:4;
  opacity:0;
  transform:translateY(-4px);
  animation:insightIn .5s ease 2.3s forwards;
}
.loss-chart__insight-dot{
  width:8px;height:8px;border-radius:50%;
  background:#ff5c5c;
  box-shadow:0 0 0 0 rgba(255,92,92,0.6);
  animation:pulseRed 2s ease-in-out infinite;
  flex-shrink:0;
}
.loss-chart__insight strong{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:#ff8888;
  font-weight:600;
  letter-spacing:-0.01em;
}
.loss-chart__insight small{
  display:block;
  font-size:9px;
  color:var(--text-3);
  letter-spacing:0.02em;
  margin-top:1px;
}
@keyframes insightIn{to{opacity:1;transform:translateY(0);}}

/* ---------- 14. Compat (marquee) ---------- */
.compat{
  padding:72px 0;
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee__track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text-2);
  white-space:nowrap;
  transition:background .25s ease,color .2s ease,border-color .2s ease;
  font-size:.92rem;
  font-weight:500;
  letter-spacing:-0.005em;
}
.logo-pill:hover{
  background:var(--bg-3);
  color:var(--text-0);
  border-color:var(--line-strong);
}
.logo-pill svg{width:22px;height:22px;}

/* ---------- 15. Evolution ---------- */
.evolution{padding:120px 0;}
.evolution__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
@media (min-width:768px){
  .evolution__grid{grid-template-columns:repeat(3,1fr);}
}
.evo-card{
  padding:32px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform .4s var(--ease-out),border-color .25s ease;
  min-height:340px;
}
.evo-card:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:rgba(138,92,255,0.3);
  box-shadow:0 20px 52px -18px rgba(6,3,11,0.75), 0 0 32px -8px var(--violet-glow);
}
.evo-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.evo-card__icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--bg-3);
  color:var(--accent-bright);
  border:1px solid var(--line);
}
.evo-card__tag{
  font-size:10px;
  padding:4px 10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--bg-3);
  color:var(--text-3);
  border-radius:999px;
  border:1px solid var(--line);
}
.evo-card h3{
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--text-0);
  line-height:1.25;
}
.evo-card p{
  font-size:.92rem;
  color:var(--text-2);
  line-height:1.6;
  flex:1;
}
.evo-card__foot{
  padding-top:16px;
  border-top:1px solid var(--line);
}
.mini-chips{display:flex;gap:6px;}
.mini-chips span{
  width:38px;height:30px;
  display:grid;place-items:center;
  border-radius:8px;
  background:var(--bg-3);
  border:1px solid var(--line);
  font-size:10px;
  color:var(--text-2);
  letter-spacing:0.06em;
  font-weight:600;
}
.mini-progress{
  position:relative;
  height:6px;
  background:var(--bg-3);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:8px;
}
.mini-progress span{
  display:block;
  height:100%;
  width:var(--w);
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  border-radius:999px;
  box-shadow:0 0 12px var(--accent-glow);
}
.evo-card__foot small{
  font-size:11px;
  color:var(--text-3);
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.mini-flow{
  display:flex;
  align-items:center;
  gap:10px;
}
.mini-flow span{
  flex:1;
  height:4px;
  background:var(--bg-3);
  border-radius:999px;
  position:relative;
  overflow:hidden;
}
.mini-flow span::after{
  content:"";
  position:absolute;
  top:0;left:0;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,transparent,var(--accent-bright),transparent);
  animation:miniFlow 3s linear infinite;
}
.mini-flow span:nth-child(2)::after{animation-delay:.5s;}
.mini-flow span:nth-child(3)::after{animation-delay:1s;}
.mini-flow span:nth-child(4)::after{animation-delay:1.5s;}
@keyframes miniFlow{
  from{left:-40%;}
  to{left:100%;}
}

/* ---------- 16. Implementation ---------- */
.implementation{padding:120px 0;}
.impl__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:start;
}
@media (min-width:1024px){
  .impl__grid{grid-template-columns:1.05fr 1fr;gap:80px;}
}
.impl__copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.impl__text{
  color:var(--text-2);
  line-height:1.7;
  font-size:1rem;
}
.impl-steps{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:8px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.impl-step{
  display:flex;
  gap:20px;
  padding:22px;
  background:var(--bg-2);
  border-radius:var(--r-md);
  border:1px solid var(--line-soft);
  transition:background .25s ease,border-color .25s ease,transform .3s ease;
}
.impl-step:hover{
  background:var(--bg-3);
  border-color:var(--line-strong);
  transform:translateX(4px);
}
.impl-step__num{
  font-family:'JetBrains Mono',monospace;
  font-size:1.3rem;
  font-weight:500;
  color:var(--accent-bright);
  flex-shrink:0;
  width:44px;
  letter-spacing:-0.02em;
}
.impl-step h4{
  font-size:1rem;
  font-weight:500;
  color:var(--text-0);
  margin-bottom:4px;
  letter-spacing:-0.015em;
}
.impl-step p{
  font-size:.88rem;
  color:var(--text-2);
  line-height:1.55;
}

/* ---------- 17. FAQ ---------- */
.faq{padding:120px 0;}
.faq__list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.faq__item{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .25s ease,background .25s ease;
}
.faq__item[open]{
  border-color:var(--accent-line);
  background:var(--bg-2);
}
.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 26px;
  font-size:1rem;
  font-weight:500;
  color:var(--text-0);
  letter-spacing:-0.01em;
  transition:color .2s ease;
}
.faq__item summary:hover{
  color:var(--violet-bright);
  text-shadow:0 0 14px rgba(138,92,255,0.55);
}
.faq__icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:8px;
  background:var(--bg-3);
  color:var(--text-2);
  border:1px solid var(--line);
  transition:transform .35s var(--ease-out),color .2s ease,border-color .2s ease,background .2s ease;
}
.faq__item summary:hover .faq__icon{
  border-color:var(--violet-bright);
  color:var(--violet-bright);
}
.faq__item[open] .faq__icon{transform:rotate(90deg);color:var(--violet-bright);}
.faq__item[open] summary{color:var(--text-0);}
.faq__body{
  padding:0 26px 24px;
  animation:faqIn .5s cubic-bezier(0.22,1,0.36,1);
}
.faq__body p{
  color:var(--text-2);
  font-size:.95rem;
  line-height:1.7;
  max-width:640px;
}
@keyframes faqIn{
  from{opacity:0;transform:translateY(-6px);filter:blur(4px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}

/* ============================================================
   17.5. Contacto — formulario integrado antes del Final CTA
   ============================================================ */
.contact{padding:120px 0;}

.contact__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
}
@media (min-width:960px){
  .contact__grid{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:64px;}
}

/* ── Info column ── */
.contact__info{
  display:flex;flex-direction:column;gap:20px;
  align-items:flex-start;
}
.contact__info .eyebrow{align-self:flex-start;}
.contact__info h2{text-align:left;}
.contact__lead{
  font-size:1rem;
  color:var(--text-2);
  line-height:1.65;
  max-width:460px;
}

.contact__channels{
  display:flex;flex-direction:column;gap:10px;
  width:100%;
  margin-top:4px;
}
.contact-channel{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.contact-channel:hover{
  background:var(--bg-2);
  border-color:var(--accent-line);
  transform:translateY(-2px);
}
.contact-channel__icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--bg-3);
  border:1px solid var(--line);
  color:var(--violet-bright);
  flex-shrink:0;
}
.contact-channel__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.contact-channel__body small{
  font-size:.72rem;
  color:var(--text-3);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.contact-channel__body a,
.contact-channel__body strong{
  font-family:'JetBrains Mono',monospace;
  font-size:.92rem;
  color:var(--text-0);
  font-weight:500;
  letter-spacing:-0.01em;
  transition:color .2s ease;
  text-decoration:none;
}
.contact-channel__body a:hover{color:var(--violet-bright);}

.contact__trust{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  background:rgba(138,92,255,0.05);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.82rem;
  color:var(--text-2);
  line-height:1.5;
}
.contact__trust svg{color:var(--violet-bright);margin-top:3px;flex-shrink:0;}
.contact__trust a{color:var(--violet-bright);text-decoration:underline;text-decoration-color:rgba(138,92,255,0.4);text-underline-offset:3px;}
.contact__trust a:hover{text-decoration-color:var(--violet-bright);}

/* ── Form column ── */
.contact__form{
  position:relative;
  display:flex;flex-direction:column;gap:16px;
  padding:32px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
@media (max-width:640px){
  .contact__form{padding:22px 20px;gap:14px;}
}

.contact-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:640px){
  .contact-field-row{grid-template-columns:1fr;gap:14px;}
}

.contact-field{
  display:flex;flex-direction:column;gap:6px;
}
.contact-field > span{
  font-size:.8rem;
  color:var(--text-2);
  letter-spacing:0.01em;
  font-weight:500;
}
.contact-field > span em{
  font-style:normal;
  color:var(--violet-bright);
  margin-left:2px;
}
.contact-field input,
.contact-field textarea,
.contact-field select{
  font-family:inherit;
  padding:12px 14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text-0);
  font-size:.95rem;
  transition:border-color .2s ease, background .2s ease, box-shadow .3s ease;
  width:100%;
  resize:none;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:var(--text-3);}
.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus{
  outline:0;
  border-color:var(--violet-bright);
  background:var(--bg-3);
  box-shadow:0 0 0 3px rgba(138,92,255,0.15);
}
.contact-field textarea{min-height:100px;line-height:1.5;}
.contact-field input:invalid:not(:placeholder-shown):not(:focus){
  border-color:rgba(255,92,92,0.4);
}

/* Select custom chevron */
.contact-field__select{position:relative;}
.contact-field__select select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  cursor:pointer;
}
.contact-field__select select:invalid,
.contact-field__select select option[value=""]{color:var(--text-3);}
.contact-field__chevron{
  position:absolute;
  top:50%;right:14px;
  transform:translateY(-50%) rotate(90deg);
  color:var(--text-3);
  pointer-events:none;
  transition:color .2s ease;
}
.contact-field__select:focus-within .contact-field__chevron{color:var(--violet-bright);}

/* Submit row: check + button */
.contact-submit-row{
  display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
  margin-top:4px;
}
.contact-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.82rem;
  color:var(--text-2);
  line-height:1.5;
  flex:1 1 240px;
  cursor:pointer;
}
.contact-check input{
  margin-top:3px;
  width:16px;height:16px;
  accent-color:var(--violet-bright);
  cursor:pointer;
}
.contact-submit-row .btn{flex:0 0 auto;}
@media (max-width:520px){
  .contact-submit-row{flex-direction:column;align-items:stretch;}
  .contact-submit-row .btn{justify-content:center;width:100%;}
}

/* Error + success */
.contact-error{
  padding:10px 14px;
  background:rgba(255,92,92,0.1);
  border:1px solid rgba(255,92,92,0.3);
  border-radius:8px;
  color:#ff8080;
  font-size:.88rem;
}

.contact-success{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;
  background:linear-gradient(135deg,rgba(46,214,137,0.1),rgba(47,128,255,0.05));
  border:1px solid rgba(46,214,137,0.3);
  border-radius:12px;
  animation:contactSuccess .5s var(--ease-out);
}
.contact-success[hidden]{display:none;}
.contact-error[hidden]{display:none;}
.contact-success__icon{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,var(--success),#1f9b63);
  color:#fff;flex-shrink:0;
  box-shadow:0 6px 18px -6px rgba(46,214,137,0.5);
}
.contact-success__body{display:flex;flex-direction:column;gap:4px;}
.contact-success__body strong{
  font-size:1rem;
  color:var(--text-0);
  font-weight:500;
  letter-spacing:-0.01em;
}
.contact-success__body small{
  font-size:.85rem;
  color:var(--text-2);
  line-height:1.5;
}
.contact-success__body a{color:var(--violet-bright);text-decoration:underline;text-decoration-color:rgba(138,92,255,0.35);}
@keyframes contactSuccess{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- 18. Final CTA ---------- */
.final-cta{padding:120px 0;}
.final-cta__card{
  position:relative;
  padding:72px 40px;
  text-align:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,var(--accent-soft),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  box-shadow:var(--shadow-2);
}
.final-cta__card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);
  pointer-events:none;
}
.final-cta__card > *{position:relative;z-index:1;}
.final-cta__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}

/* ---------- 19. Footer ---------- */
.footer{
  padding:80px 0 40px;
  border-top:1px solid var(--line);
  background:var(--bg-1);
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
@media (min-width:768px){
  .footer__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;}
}
.footer__brand p{
  margin-top:16px;
  font-size:.92rem;
  color:var(--text-2);
  max-width:340px;
  line-height:1.6;
}
.footer__col h5{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:16px;
}
.footer__col ul{display:flex;flex-direction:column;gap:10px;}
.footer__col a{
  font-size:.92rem;
  color:var(--text-2);
  transition:color .2s ease;
}
.footer__col a:hover{color:var(--text-0);}
.footer__social{flex-direction:row!important;gap:10px!important;}
.footer__social a{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--bg-2);
  border:1px solid var(--line);
  transition:background .25s ease,color .2s ease;
}
.footer__social a:hover{background:var(--accent);color:#fff;}
.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:.85rem;
  color:var(--text-3);
}
.footer__tag{color:var(--text-2);letter-spacing:-0.005em;}

/* ---------- 20. Trial Modal ---------- */
.trial-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.trial-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.trial-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,4,8,0.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.trial-modal__card{
  position:relative;
  width:100%;
  max-width:540px;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  padding:44px 36px 36px;
  box-shadow:var(--shadow-2),0 0 0 1px var(--accent-line);
  transform:translateY(12px) scale(0.98);
  opacity:0;
  transition:transform .35s var(--ease-out),opacity .3s ease;
  text-align:center;
}
.trial-modal.is-open .trial-modal__card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.trial-modal__close{
  position:absolute;
  top:16px;right:16px;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:8px;
  color:var(--text-2);
  border:1px solid var(--line);
  background:var(--bg-3);
  transition:background .2s ease;
}
.trial-modal__close:hover{background:var(--bg-4);color:var(--text-0);}

.trial-modal__phase{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.trial-modal__phase[hidden]{display:none;}
.trial-modal__icon{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dim));
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset,0 12px 28px -8px var(--accent-glow);
  margin-bottom:4px;
}
.trial-modal__icon--lock{
  background:linear-gradient(135deg,#2a3140,#131927);
  color:var(--text-2);
  box-shadow:0 0 0 1px var(--line) inset;
}
.trial-modal h3{
  font-size:1.6rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--text-0);
}
.trial-modal__lead{
  font-size:.95rem;
  color:var(--text-2);
  line-height:1.6;
  max-width:420px;
}
.trial-bar{
  width:100%;
  height:6px;
  background:var(--bg-3);
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.trial-bar__fill{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  border-radius:999px;
  box-shadow:0 0 10px var(--accent-glow);
  transition:width .8s linear;
}
.trial-meta{
  display:flex;
  justify-content:space-between;
  width:100%;
  font-size:.8rem;
  color:var(--text-3);
  font-family:'JetBrains Mono',monospace;
}
.trial-meta strong{color:var(--text-0);font-weight:500;}
.trial-meta__status{display:inline-flex;align-items:center;gap:8px;color:var(--success);}
.trial-feed{
  width:100%;
  min-height:120px;
  margin-top:8px;
  padding:16px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  color:var(--text-2);
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.trial-feed__line{
  display:flex;gap:10px;
  opacity:0;
  transform:translateY(6px);
  animation:feedIn .4s var(--ease-out) forwards;
}
.trial-feed__line span:first-child{color:var(--text-3);flex-shrink:0;}
.trial-feed__line span:last-child{color:var(--text-1);}
.trial-feed__line--ok span:last-child{color:var(--success);}
.trial-feed__line--warn span:last-child{color:var(--warning);}
@keyframes feedIn{
  to{opacity:1;transform:translateY(0);}
}

.trial-benefits{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
  width:100%;
  max-width:440px;
  margin:8px auto 0;
}
.trial-benefits li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:var(--text-1);
  line-height:1.5;
}
.trial-benefits li svg{color:var(--violet-bright);flex-shrink:0;margin-top:4px;}
.trial-benefits li strong{color:var(--text-0);font-weight:600;}
.trial-benefits li span{flex:1;}

/* ── Trial 6hs: hints, countdown, data backup ── */
.trial-modal__hint{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;
  margin-top:4px;
  background:rgba(138,92,255,0.06);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:left;
  max-width:440px;
  width:100%;
}
.trial-modal__hint svg{color:var(--violet-bright);margin-top:2px;flex-shrink:0;}
.trial-modal__hint small{font-size:.8rem;color:var(--text-2);line-height:1.5;}

.trial-modal__note{
  font-size:.78rem;
  color:var(--text-3);
  line-height:1.5;
  max-width:420px;
  padding:0 8px;
  margin-top:4px;
}

.trial-countdown{
  display:flex;align-items:flex-end;justify-content:center;gap:8px;
  margin:12px 0 8px;
  font-family:'JetBrains Mono',monospace;
}
.trial-countdown__unit{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 18px;
  min-width:72px;
  background:var(--bg-1);
  border:1px solid var(--accent-line);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.trial-countdown__unit strong{
  font-size:2rem;
  font-weight:600;
  color:var(--text-0);
  letter-spacing:-0.03em;
  line-height:1;
  background:linear-gradient(135deg,var(--text-0) 0%,var(--violet-bright) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums;
}
.trial-countdown__unit small{
  font-size:.65rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-3);
  font-weight:500;
}
.trial-countdown__sep{
  font-size:1.8rem;
  font-weight:400;
  color:var(--text-3);
  padding-bottom:20px;
}

.trial-locked-data{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;
  width:100%;max-width:440px;
  background:linear-gradient(135deg,rgba(46,214,137,0.1),rgba(47,128,255,0.05));
  border:1px solid rgba(46,214,137,0.3);
  border-radius:12px;
  text-align:left;
  margin:4px auto;
}
.trial-locked-data__icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,var(--success),#1f9b63);
  color:#fff;
  flex-shrink:0;
  box-shadow:0 6px 16px -6px rgba(46,214,137,0.45);
}
.trial-locked-data strong{
  display:block;
  color:var(--text-0);
  font-weight:600;
  font-size:.95rem;
  margin-bottom:2px;
}
.trial-locked-data small{
  font-size:.8rem;
  color:var(--text-2);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:-0.005em;
}

/* Phase container: respetar hidden y animar entrada */
.trial-modal__phase{animation:trialPhaseIn .4s var(--ease-out);}
.trial-modal__phase[hidden]{display:none;}
@keyframes trialPhaseIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

.trial-modal__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
  width:100%;
}
.trial-modal__actions .btn{flex:1 1 auto;justify-content:center;}

/* ---------- 21. Scroll reveals (con blur suave) ---------- */
[data-reveal]{
  opacity:0;
  filter:blur(6px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  will-change:opacity,transform,filter;
}
[data-reveal="fade-up"]{transform:translateY(28px);}
[data-reveal="fade-left"]{transform:translateX(36px);}
[data-reveal="fade"]{transform:translateY(0);}
[data-reveal].is-visible{
  opacity:1;
  transform:translate(0,0);
  filter:blur(0);
}
[data-delay="1"]{transition-delay:.12s;}
[data-delay="2"]{transition-delay:.24s;}
[data-delay="3"]{transition-delay:.36s;}

/* ---------- 22. Responsive hero visual ---------- */
@media (max-width:1023px){
  .hero__visual{min-height:auto;display:grid;gap:16px;grid-template-columns:1fr;}
  .mock-stack{min-height:auto;display:grid;gap:16px;grid-template-columns:1fr;}
  .mock-card{position:static;width:100%!important;animation:none;transform:none!important;}
  .mock-card:hover{transform:none;}
}
@media (max-width:640px){
  .hero{padding:calc(var(--nav-h) + 48px) 0 80px;}
  .tabs{border-radius:10px;}
  .tab{padding:9px 14px;font-size:.82rem;}
  .section-head{margin-bottom:40px;}
  .trust{padding:40px 0;}
  .modules,.pillars,.evolution,.implementation,.faq,.final-cta{padding:80px 0;}
  .final-cta__card{padding:48px 24px;}
  .nav__logo-text{font-size:.88rem;}
}

/* ============================================================
   24. Devices showcase (MacBook + iPhone)
   ============================================================ */
.showcase{padding:100px 0 120px;}
.devices{
  position:relative;
  display:grid;
  gap:56px;
  grid-template-columns:1fr;
  align-items:end;
  justify-items:center;
}
@media (min-width:1024px){
  .devices{grid-template-columns:1.3fr 0.7fr;gap:40px;justify-items:stretch;align-items:end;}
}

/* Base device */
.device{position:relative;}
.device__label{
  display:block;
  text-align:center;
  margin-top:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-3);
}

/* MacBook */
.device--laptop{
  width:100%;
  max-width:720px;
  justify-self:start;
}
.device--laptop .device__frame{
  position:relative;
  padding:12px 12px 16px;
  background:linear-gradient(180deg,#1c222e,#0c1019);
  border:1px solid var(--line-strong);
  border-radius:16px 16px 8px 8px;
  box-shadow:var(--shadow-2),0 0 0 1px rgba(255,255,255,0.05) inset;
}
.device--laptop .device__notch{
  position:absolute;
  top:12px;left:50%;
  transform:translateX(-50%);
  width:60px;height:6px;
  background:#000;
  border-radius:0 0 6px 6px;
  z-index:2;
}
.device--laptop .device__stand{
  position:relative;
  width:calc(100% + 40px);
  margin:-2px -20px 0;
  height:8px;
  background:linear-gradient(180deg,#1c222e 0%,#0c1019 60%,transparent);
  border-radius:0 0 20px 20px;
  clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);
}
.device--laptop .device__screen{
  aspect-ratio:16/10;
  background:var(--bg-0);
  border-radius:4px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--line);
}

/* Laptop UI */
.laptop-ui{
  display:grid;
  grid-template-columns:160px 1fr;
  height:100%;
  font-size:10px;
  color:var(--text-1);
  font-family:'Inter Tight',sans-serif;
}
.laptop-ui__sidebar{
  background:var(--bg-1);
  border-right:1px solid var(--line);
  padding:12px 10px;
  display:flex;flex-direction:column;gap:10px;
}
.laptop-ui__brand{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:14px;
  color:var(--text-0);
  letter-spacing:-0.03em;
  padding:4px 6px;
}
.laptop-ui__brand sup{font-size:.5em;}
.laptop-ui__search{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text-3);
  font-size:9px;
}
.laptop-ui__nav{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.laptop-ui__item{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;
  border-radius:6px;
  color:var(--text-2);
  font-size:10px;
  transition:background .2s;
}
.laptop-ui__item.is-active{
  background:var(--accent-soft);
  color:var(--accent-bright);
}
.laptop-ui__item .icon{width:12px;height:12px;}

.laptop-ui__main{
  padding:14px;
  display:flex;flex-direction:column;gap:12px;
  overflow:hidden;
}
.laptop-ui__topbar{
  display:flex;justify-content:space-between;align-items:center;
}
.laptop-ui__topbar small{color:var(--text-3);font-size:9px;letter-spacing:0.05em;text-transform:uppercase;}
.laptop-ui__topbar h4{font-size:14px;color:var(--text-0);font-weight:500;margin-top:2px;}
.laptop-ui__avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent-dim));
}
.laptop-ui__kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.laptop-ui__kpi{
  padding:10px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:6px;
}
.laptop-ui__kpi small{display:block;color:var(--text-3);font-size:9px;margin-bottom:4px;letter-spacing:0.03em;}
.laptop-ui__kpi strong{
  font-family:'JetBrains Mono',monospace;
  color:var(--text-0);
  font-size:16px;
  letter-spacing:-0.02em;
  font-weight:500;
}
.laptop-ui__kanban{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1;
  min-height:0;
}
.laptop-ui__col{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px;
  display:flex;flex-direction:column;gap:6px;
  min-height:0;
  overflow:hidden;
}
.laptop-ui__col header{
  display:flex;justify-content:space-between;align-items:center;
  font-size:9px;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.06em;
  padding:2px 0 6px;
  border-bottom:1px solid var(--line);
}
.laptop-ui__col header span{
  padding:1px 6px;background:var(--bg-3);border-radius:999px;color:var(--text-2);font-weight:600;
}
.laptop-ui__col header span.is-hot{background:var(--accent-soft);color:var(--accent-bright);}
.laptop-ui__card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:6px 8px;
  font-size:10px;
  color:var(--text-1);
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.laptop-ui__card i{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-4);
}
.laptop-ui__card i.hot{background:var(--accent-bright);box-shadow:0 0 8px var(--accent-glow);animation:blink 1.8s infinite;}
.laptop-ui__card i.done{background:var(--success);}
.laptop-ui__card--active{
  border-color:var(--accent-line);
  background:linear-gradient(135deg,rgba(138,92,255,0.10),transparent),var(--bg-2);
  animation:cardPulse 3s ease-in-out infinite;
}
@keyframes cardPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(138,92,255,0);}
  50%{box-shadow:0 0 0 3px rgba(138,92,255,0.12);}
}

/* iPhone */
.device--phone{
  width:260px;
  justify-self:end;
}
.device--phone .device__frame{
  position:relative;
  padding:10px;
  background:linear-gradient(180deg,#1f2631,#0d1119);
  border:1.5px solid rgba(255,255,255,0.12);
  border-radius:46px;
  box-shadow:var(--shadow-2),0 0 0 2px rgba(255,255,255,0.04) inset;
}
.device--phone .device__dynamic-island{
  position:absolute;
  top:22px;left:50%;
  transform:translateX(-50%);
  width:82px;height:26px;
  background:#000;
  border-radius:999px;
  z-index:2;
  border:1px solid rgba(255,255,255,0.05);
}
.device--phone .device__screen{
  aspect-ratio:9/19.5;
  background:var(--bg-0);
  border-radius:36px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--line);
}

/* Phone UI */
.phone-ui{
  position:relative;
  padding:40px 16px 16px;
  display:flex;flex-direction:column;gap:12px;
  height:100%;
  font-size:11px;
  color:var(--text-1);
}
.phone-ui__status{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--text-2);
  position:absolute;
  top:14px;left:20px;right:20px;
  z-index:3;
}
.phone-ui__pills{display:flex;gap:3px;}
.phone-ui__pills i{
  width:3px;height:8px;background:var(--text-2);border-radius:1px;
}
.phone-ui__brand{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;
}
.phone-ui__brand strong{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:18px;
  color:var(--text-0);
  letter-spacing:-0.03em;
}
.phone-ui__brand strong sup{font-size:.5em;}
.phone-ui__avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent-dim));
}
.phone-ui__banner{
  position:relative;
  padding:14px 14px;
  background:linear-gradient(135deg,rgba(138,92,255,0.22),rgba(138,92,255,0.06));
  border:1px solid var(--accent-line);
  border-radius:12px;
  display:flex;flex-direction:column;gap:3px;
}
.phone-ui__banner small{font-size:9px;color:var(--accent-bright);text-transform:uppercase;letter-spacing:0.06em;}
.phone-ui__banner strong{font-size:12px;color:var(--text-0);font-weight:500;letter-spacing:-0.01em;}
.phone-ui__dot{
  position:absolute;top:14px;right:14px;
  width:8px;height:8px;background:var(--accent-bright);border-radius:50%;
  box-shadow:0 0 8px var(--accent-glow);
  animation:blink 1.5s infinite;
}
.phone-ui__stats{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.phone-ui__stats > div{
  padding:10px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:10px;
}
.phone-ui__stats small{display:block;color:var(--text-3);font-size:9px;margin-bottom:2px;letter-spacing:0.04em;text-transform:uppercase;}
.phone-ui__stats strong{
  font-family:'JetBrains Mono',monospace;
  color:var(--text-0);font-size:18px;font-weight:500;letter-spacing:-0.02em;
}
.phone-ui__list{
  display:flex;flex-direction:column;gap:6px;
  flex:1;overflow:hidden;
}
.phone-ui__row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 8px;
  padding:10px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:10px;
  align-items:center;
  font-size:11px;
}
.phone-ui__row span:nth-child(2){color:var(--text-1);font-weight:500;grid-column:2;}
.phone-ui__tag{
  grid-row:1;
  font-size:8px;
  padding:2px 6px;
  background:var(--bg-3);
  color:var(--text-3);
  border-radius:999px;
  letter-spacing:0.05em;
  font-weight:600;
  justify-self:start;
}
.phone-ui__tag--done{background:rgba(46,214,137,0.15);color:var(--success);}
.phone-ui__row b{
  grid-column:1/-1;
  height:3px;
  background:var(--bg-3);
  border-radius:2px;
  position:relative;
  overflow:hidden;
  margin-top:2px;
}
.phone-ui__row b::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:var(--w);
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
  border-radius:2px;
}
.phone-ui__row b.done::after{background:var(--success);}
.phone-ui__fab{
  position:absolute;
  bottom:22px;right:16px;
  width:44px;height:44px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent));
  color:#fff;font-size:22px;font-weight:500;
  display:grid;place-items:center;
  box-shadow:0 8px 20px -4px var(--accent-glow);
}

/* ============================================================
   25. Pricing section
   ============================================================ */
.pricing{padding:120px 0;}

.access-banner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  padding:24px 28px;
  background:linear-gradient(135deg,rgba(138,92,255,0.14),rgba(138,92,255,0.02)),var(--bg-1);
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  margin-bottom:40px;
  box-shadow:0 0 40px -10px var(--accent-glow);
}
.access-banner__icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:12px;
  background:var(--accent-bright);color:#04060a;
  flex-shrink:0;
}
.access-banner__body h3{
  font-size:1.1rem;font-weight:500;color:var(--text-0);letter-spacing:-0.02em;margin-bottom:4px;
}
.access-banner__body p{font-size:.9rem;color:var(--text-2);line-height:1.55;}
.access-banner__body code{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;
  padding:2px 6px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--accent-bright);
}
@media (max-width:768px){
  .access-banner{grid-template-columns:1fr;gap:16px;text-align:center;}
  .access-banner__icon{margin:0 auto;}
  .access-banner .btn{justify-self:stretch;justify-content:center;}
}

/* Launch flags bajo el subtitle */
.launch-flags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:6px;
}
.launch-flag{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  font-size:.82rem;
  font-weight:500;
  color:var(--text-1);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:999px;
  letter-spacing:-0.005em;
}
.launch-flag svg{color:var(--violet-bright);width:13px;height:13px;}
.launch-flag--hot{
  background:linear-gradient(135deg,rgba(245,184,80,0.12),rgba(138,92,255,0.06)),var(--bg-2);
  border-color:rgba(245,184,80,0.35);
  color:#ffd48c;
}
.launch-flag--hot svg{color:var(--warning);}

.pricing__grid{
  display:grid;
  gap:20px;
  grid-template-columns:1fr;
  margin-bottom:56px;
}
@media (min-width:1024px){
  .pricing__grid{grid-template-columns:1fr 1.4fr 1fr;}
}

.price-card{
  position:relative;
  padding:32px 28px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:18px;
  min-height:520px;
}
.price-card--modules{
  border-color:var(--accent-line);
  background:linear-gradient(180deg,rgba(138,92,255,0.10),rgba(138,92,255,0.02)),var(--bg-1);
  box-shadow:0 0 60px -20px var(--accent-glow);
}
.price-card__label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10px;
  padding:4px 10px;
  background:var(--bg-3);
  border:1px solid var(--line);
  color:var(--text-3);
  border-radius:999px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  align-self:flex-start;
  font-weight:600;
}
.price-card--modules .price-card__label{
  background:var(--accent-soft);
  color:var(--accent-bright);
  border-color:var(--accent-line);
}
.price-card__label--hot{
  background:linear-gradient(135deg,rgba(245,184,80,0.18),rgba(138,92,255,0.08))!important;
  color:#ffd48c!important;
  border-color:rgba(245,184,80,0.4)!important;
  box-shadow:0 0 18px -6px rgba(245,184,80,0.4);
}
.price-card__label--hot svg{color:var(--warning);width:11px;height:11px;}

.price-card__note{
  padding:10px 12px;
  font-size:.78rem;
  color:var(--text-2);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  line-height:1.4;
}
.price-card__icon{
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line);
  border-radius:12px;color:var(--accent-bright);
  margin-bottom:4px;
}
.price-card header h3{
  font-size:1.35rem;font-weight:500;color:var(--text-0);letter-spacing:-0.02em;margin-bottom:8px;
}
.price-card header p{font-size:.9rem;color:var(--text-2);line-height:1.55;}

.price-card__price{
  display:flex;align-items:baseline;gap:6px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.price-card__amount{
  font-family:'Inter Tight',sans-serif;
  font-size:2.4rem;font-weight:500;letter-spacing:-0.035em;color:var(--text-0);
}
.price-card__price em{font-style:normal;font-size:.95rem;color:var(--text-3);}

.price-card__features{display:flex;flex-direction:column;gap:10px;flex:1;}
.price-card__features li{
  display:flex;align-items:center;gap:10px;
  font-size:.92rem;color:var(--text-1);
}
.price-card__features svg{color:var(--accent-bright);flex-shrink:0;}

.price-card__custom{
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
}
.price-card__custom span{color:var(--text-3);font-size:.82rem;letter-spacing:0.04em;text-transform:uppercase;}
.price-card__custom strong{
  font-family:'Inter Tight',sans-serif;
  font-size:1.6rem;color:var(--text-0);font-weight:500;letter-spacing:-0.02em;
}
.price-card__custom small{color:var(--text-2);font-size:.88rem;}

.price-card .btn{align-self:stretch;justify-content:center;}

/* Price tiers inside modules card */
.price-tiers{
  display:flex;flex-direction:column;gap:10px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.price-tier{
  position:relative;
  padding:16px 18px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  display:flex;flex-direction:column;gap:4px;
}
.price-tier--best{
  border-color:var(--accent-line);
  background:linear-gradient(135deg,rgba(138,92,255,0.14),transparent);
}
.price-tier--hero{
  border-color:rgba(138,92,255,0.4);
  background:
    linear-gradient(135deg,rgba(138,92,255,0.16),rgba(47,128,255,0.08)),
    var(--bg-2);
  box-shadow:0 0 0 1px rgba(138,92,255,0.15), 0 18px 40px -18px rgba(138,92,255,0.4);
}
.price-tier__badge{
  position:absolute;top:-9px;right:14px;
  font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 10px;
  background:var(--accent-bright);color:#04060a;
  border-radius:999px;
}
.price-tier__flag{
  position:absolute;top:-9px;left:14px;
  font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 12px;
  background:linear-gradient(135deg,var(--violet-bright),var(--accent));
  color:#fff;
  border-radius:999px;
  box-shadow:0 4px 12px -4px var(--violet-glow);
}
.price-tier__was{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  color:var(--text-3);
  letter-spacing:0.02em;
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,0.25);
  text-decoration-thickness:1px;
  margin-bottom:2px;
  opacity:.9;
}
.price-tier__price{
  font-family:'Inter Tight',sans-serif;
  font-size:1.5rem;font-weight:600;color:var(--text-0);letter-spacing:-0.03em;
  line-height:1.05;
}
.price-tier--hero .price-tier__price{
  font-size:1.7rem;
  background:linear-gradient(135deg,var(--text-0) 0%,var(--violet-bright) 60%,var(--accent-bright) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.price-tier__price em{font-style:normal;font-size:.78rem;color:var(--text-3);margin-left:4px;-webkit-text-fill-color:var(--text-3);}
.price-tier__label{font-size:.86rem;color:var(--text-1);font-weight:500;}
.price-tier__save{
  display:inline-flex;align-items:center;
  align-self:flex-start;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:0.02em;
  padding:3px 10px;
  margin:2px 0;
  background:rgba(46,214,137,0.12);
  color:var(--success);
  border:1px solid rgba(46,214,137,0.3);
  border-radius:999px;
}
.price-tier small{
  font-size:.78rem;color:var(--text-3);line-height:1.5;display:block;margin-top:2px;
}
.price-tier small b{color:var(--text-1);font-weight:500;}

/* Financing row — 6 cuotas sin interes */
.price-card__financing{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(47,128,255,0.10),rgba(138,92,255,0.05));
  border:1px solid var(--accent-line);
  border-radius:10px;
  color:var(--text-1);
  line-height:1.4;
}
.price-card__financing-icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:8px;
  background:var(--bg-2);
  color:var(--violet-bright);
  border:1px solid var(--accent-line);
  flex-shrink:0;
}
.price-card__financing > div:last-child{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.price-card__financing strong{
  font-size:.9rem;
  font-weight:600;
  color:var(--text-0);
}
.price-card__financing small{font-size:.78rem;color:var(--text-2);}

/* Legend */
.pricing__legend{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:28px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
@media (min-width:768px){
  .pricing__legend{grid-template-columns:repeat(4,1fr);}
}
.legend-step{
  display:flex;gap:14px;align-items:flex-start;
}
.legend-step > span{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--accent-soft);color:var(--accent-bright);
  border:1px solid var(--accent-line);
  font-family:'JetBrains Mono',monospace;
  font-weight:500;font-size:.95rem;
  flex-shrink:0;
}
.legend-step p{font-size:.88rem;color:var(--text-2);line-height:1.55;}
.legend-step strong{color:var(--text-0);font-weight:500;font-size:.95rem;}

/* ============================================================
   26. Local Host Service + Hardware
   ============================================================ */
.host{padding:120px 0;}
.host__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-bottom:40px;
}
@media (min-width:768px){
  .host__grid{grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:auto auto;}
  .host-card--main{grid-column:1;grid-row:1 / span 2;}
}

.host-card{
  padding:28px;
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .4s var(--ease-out),border-color .25s ease;
}
.host-card:hover{
  transform:translateY(-5px) scale(1.01);
  border-color:rgba(138,92,255,0.3);
  box-shadow:0 20px 48px -18px rgba(6,3,11,0.75), 0 0 28px -8px var(--violet-glow);
}
.host-card--main{
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,var(--accent-soft),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border-color:var(--accent-line);
}
.host-card__icon{
  width:52px;height:52px;
  display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line);
  color:var(--accent-bright);
  border-radius:14px;
}
.host-card__head{display:flex;align-items:center;gap:16px;margin-bottom:2px;}
.host-card__head h3{font-size:1.6rem;letter-spacing:-0.025em;}
.host-card h3{font-size:1.15rem;font-weight:500;color:var(--text-0);letter-spacing:-0.02em;}
.host-card p{font-size:.92rem;color:var(--text-2);line-height:1.6;}
.host-card__features{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.host-card__features li{
  display:flex;align-items:center;gap:10px;
  font-size:.9rem;color:var(--text-1);
}
.host-card__features svg{color:var(--accent-bright);}

/* Hardware */
.hardware{
  padding:36px 32px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  margin-bottom:32px;
}
.hardware__head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.hardware__financing{text-align:right;}
.hardware__financing span{display:block;font-size:.8rem;color:var(--text-3);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:2px;}
.hardware__financing strong{
  font-family:'Inter Tight',sans-serif;
  font-size:1.3rem;font-weight:500;color:var(--accent-bright);letter-spacing:-0.02em;
}
.hardware__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:10px;
}
.hardware-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.88rem;
  color:var(--text-1);
  transition:background .2s ease,border-color .2s ease,transform .3s ease;
}
.hardware-item:hover{
  background:var(--bg-3);
  border-color:var(--accent-line);
  transform:translateY(-2px);
}
.hardware-item svg{color:var(--accent-bright);}
.hardware__foot{margin-top:20px;font-size:.85rem;color:var(--text-3);line-height:1.6;}

.host__cta{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:32px;
  background:linear-gradient(135deg,rgba(138,92,255,0.12),rgba(138,92,255,0.02)),var(--bg-2);
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  flex-wrap:wrap;
}
.host__cta h4{font-size:1.2rem;color:var(--text-0);font-weight:500;letter-spacing:-0.02em;margin-bottom:6px;}
.host__cta p{font-size:.92rem;color:var(--text-2);line-height:1.55;max-width:520px;}

/* ============================================================
   27. Signup modal
   ============================================================ */
.signup-modal{
  position:fixed;inset:0;
  z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.signup-modal.is-open{opacity:1;pointer-events:auto;}
.signup-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(2,4,8,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.signup-modal__card{
  position:relative;
  width:100%;
  max-width:540px;
  max-height:92vh;
  overflow-y:auto;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  padding:36px 36px 32px;
  box-shadow:var(--shadow-2),0 0 0 1px var(--accent-line);
  transform:translateY(12px) scale(0.98);
  opacity:0;
  transition:transform .35s var(--ease-out),opacity .3s ease;
}
.signup-modal.is-open .signup-modal__card{transform:translateY(0) scale(1);opacity:1;}
.signup-modal__close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:8px;color:var(--text-2);
  border:1px solid var(--line);background:var(--bg-3);
  transition:background .2s ease;
}
.signup-modal__close:hover{background:var(--bg-4);color:var(--text-0);}

.signup-stepper{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:28px;
}
.signup-step-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--line);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.signup-step-dot.is-active{
  background:var(--accent-bright);border-color:var(--accent-bright);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.signup-step-dot.is-done{background:var(--accent);border-color:var(--accent);}
.signup-step-line{flex:0 1 30px;height:1px;background:var(--line);}

.signup-step[hidden]{display:none;}
.signup-step{display:flex;flex-direction:column;gap:14px;animation:panelIn .4s var(--ease-out);}
.signup-step h3{font-size:1.6rem;font-weight:500;letter-spacing:-0.02em;color:var(--text-0);}
.signup-lead{font-size:.92rem;color:var(--text-2);line-height:1.6;}

.signup-field{
  display:flex;flex-direction:column;gap:6px;
}
.signup-field > span{
  font-size:.8rem;color:var(--text-2);letter-spacing:0.02em;font-weight:500;
}
.signup-field input{
  padding:12px 14px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text-0);
  font-size:.95rem;
  transition:border-color .2s ease,background .2s ease;
}
.signup-field input::placeholder{color:var(--text-3);}
.signup-field input:focus{outline:0;border-color:var(--accent-bright);background:var(--bg-2);}
.signup-field input:invalid:not(:placeholder-shown){border-color:rgba(255,92,92,0.5);}

.signup-field--slug input{padding-right:130px;}
.signup-slug-row{position:relative;}
.signup-slug-suffix{
  position:absolute;top:50%;right:12px;
  transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:.85rem;color:var(--text-3);
  pointer-events:none;
}
.signup-slug-status{
  font-size:.8rem;
  color:var(--text-3);
  padding-left:2px;
}
.signup-slug-status.is-ok{color:var(--success);}
.signup-slug-status.is-err{color:var(--danger);}
.signup-slug-status.is-loading{color:var(--text-2);}

.signup-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.88rem;color:var(--text-2);line-height:1.5;
}
.signup-check input{
  margin-top:2px;
  width:16px;height:16px;
  accent-color:var(--accent);
}

.signup-error{
  padding:10px 14px;
  background:rgba(255,92,92,0.12);
  border:1px solid rgba(255,92,92,0.3);
  border-radius:8px;
  color:#ff8080;
  font-size:.88rem;
}

.signup-actions{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:8px;
}
.signup-actions .btn{flex:1;justify-content:center;}
.signup-actions .btn--primary{flex:1.4;}

.signup-step--success{align-items:center;text-align:center;}
.signup-success__icon{
  width:64px;height:64px;
  display:grid;place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--success),#1f9b63);
  color:#fff;
  box-shadow:0 12px 28px -8px rgba(46,214,137,0.5);
  margin-bottom:4px;
}
.signup-success__box{
  width:100%;
  padding:18px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;flex-direction:column;gap:2px;
  text-align:left;
}
.signup-success__box small{color:var(--text-3);font-size:.8rem;letter-spacing:0.04em;text-transform:uppercase;}
.signup-success__box strong{
  font-family:'JetBrains Mono',monospace;
  font-size:1.05rem;
  color:var(--accent-bright);
  font-weight:500;
  letter-spacing:-0.01em;
  word-break:break-all;
}
.signup-next{font-size:.85rem;color:var(--text-3);max-width:420px;}

/* ============================================================
   Signup — Upgrade options (step 4) + Modules picker (step 5)
   ============================================================ */
.upgrade-options{
  display:flex;flex-direction:column;gap:10px;
  margin-top:8px;
}
.upgrade-opt{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  text-align:left;
  transition:transform .25s var(--ease-out),border-color .2s ease,background .2s ease;
  cursor:pointer;
}
.upgrade-opt:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  background:var(--bg-2);
}
.upgrade-opt__icon{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:10px;
  background:var(--bg-3);border:1px solid var(--line);
  color:var(--accent-bright);
  flex-shrink:0;
}
.upgrade-opt strong{
  display:block;
  color:var(--text-0);
  font-weight:500;
  font-size:.98rem;
  letter-spacing:-0.01em;
  margin-bottom:2px;
}
.upgrade-opt span{
  color:var(--text-2);
  font-size:.84rem;
  line-height:1.4;
  display:block;
}
.upgrade-opt__arrow{color:var(--text-3);}
.upgrade-opt:hover .upgrade-opt__arrow{color:var(--accent-bright);}
.upgrade-opt--free .upgrade-opt__icon{background:rgba(46,214,137,0.12);color:var(--success);border-color:rgba(46,214,137,0.3);}
.upgrade-opt--all{
  background:linear-gradient(135deg,rgba(138,92,255,0.14),rgba(138,92,255,0.02)),var(--bg-1);
  border-color:var(--accent-line);
}
.upgrade-opt--all .upgrade-opt__icon{background:var(--accent-bright);color:#04060a;}

/* Modules picker (step 5) */
.signup-step--picker{gap:18px;}
.signup-step--picker h3{margin-bottom:2px;}

.picker-block{
  padding:18px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:12px;
}
.picker-toggle{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;
}
.picker-toggle input{
  margin-top:3px;
  width:18px;height:18px;
  accent-color:var(--accent-bright);
  flex-shrink:0;
}
.picker-toggle__body strong{
  display:block;color:var(--text-0);font-weight:500;font-size:.98rem;margin-bottom:2px;
}
.picker-toggle__body small{color:var(--text-2);font-size:.85rem;line-height:1.45;display:block;}
.picker-toggle__body b{color:var(--accent-bright);font-weight:500;}

.picker-users{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.picker-users label{font-size:.88rem;color:var(--text-1);}
.picker-users label small{display:block;font-size:.75rem;color:var(--text-3);margin-top:2px;}
.picker-users input{
  width:70px;padding:8px 10px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text-0);
  font-family:'JetBrains Mono',monospace;
  text-align:center;
}
.picker-users input:focus{outline:0;border-color:var(--accent-bright);}

.picker-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.picker-head strong{display:block;color:var(--text-0);font-size:.95rem;margin-bottom:2px;}
.picker-head small{color:var(--text-3);font-size:.8rem;}
.picker-head #pick-tier-label.is-pack3{color:var(--accent-bright);}
.picker-quick{display:flex;gap:8px;flex-wrap:wrap;}

.picker-modules{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  max-height:280px;
  overflow-y:auto;
  padding:10px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
}
@media (min-width:500px){
  .picker-modules{grid-template-columns:1fr 1fr;}
}
.picker-cat{
  grid-column:1 / -1;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-3);
  padding:8px 6px 4px;
  border-bottom:1px solid var(--line);
  margin-top:4px;
}
.picker-cat:first-child{margin-top:0;}
.picker-mod{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  font-size:.82rem;
  color:var(--text-1);
  border-radius:6px;
  cursor:pointer;
  transition:background .15s ease;
}
.picker-mod:hover{background:var(--bg-3);}
.picker-mod input{
  margin:0;
  width:15px;height:15px;
  accent-color:var(--accent-bright);
  flex-shrink:0;
}
.picker-mod span{line-height:1.3;}

.picker-total{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:18px 20px;
  background:linear-gradient(135deg,rgba(138,92,255,0.10),transparent),var(--bg-1);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  flex-wrap:wrap;
}
.picker-total > div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;}
.picker-total small{color:var(--text-3);font-size:.78rem;letter-spacing:0.04em;text-transform:uppercase;}
.picker-total strong{
  font-family:'Inter Tight',sans-serif;
  font-size:1.8rem;font-weight:500;color:var(--text-0);
  letter-spacing:-0.03em;
  line-height:1;
}
.picker-breakdown{font-size:.78rem;color:var(--text-2);display:block;}

/* ============================================================
   Signup inline spinner
   ============================================================ */
.spinner{
  display:inline-block;
  width:14px;height:14px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  vertical-align:-2px;
  margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================================
   28. Module card --hot badge + host card tweaks
   ============================================================ */
.module-card--hot{
  border-color:rgba(245,184,80,0.3);
  background:linear-gradient(135deg,rgba(245,184,80,0.06),rgba(255,255,255,0)),var(--bg-1);
}
.module-card__hot{
  position:absolute;top:16px;right:16px;
  font-size:10px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 10px;
  background:var(--warning);color:#04060a;
  border-radius:999px;
}

/* ============================================================
   29. Cursor-follow glow en textos destacados
   Extras de microinteraccion (links navbar, headings, h3)
   ============================================================ */

/* H2 y H3 de secciones: transicion sutil de color al hover */
.section-head h2,
.pillar-card__body h3,
.evo-card h3,
.host-card h3,
.module-card h3{
  transition:color .35s ease, text-shadow .4s ease;
}
.pillar-card:hover .pillar-card__body h3,
.evo-card:hover h3,
.host-card:hover h3,
.module-card:hover h3{
  color:var(--violet-bright);
  text-shadow:0 0 18px rgba(138,92,255,0.4);
}

/* Eyebrow hover glow */
.eyebrow{transition:border-color .25s ease, color .25s ease, box-shadow .3s ease;}
.section-head:hover .eyebrow,
.final-cta__card:hover .eyebrow{
  border-color:var(--accent-line);
  color:var(--violet-bright);
  box-shadow:0 0 18px -6px var(--violet-glow);
}

/* Logo navbar: glow al hover */
.nav__logo{transition:filter .3s ease;}
.nav__logo:hover{filter:drop-shadow(0 0 10px rgba(138,92,255,0.55));}

/* CTA del hero con pulso sutil */
.hero__ctas .btn--primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:var(--grad-glow);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:-1;
  filter:blur(18px);
}
.hero__ctas .btn--primary:hover::after{opacity:.75;}

/* Links del footer / FAQ con micro-hover */
.footer__col a{transition:color .25s ease, text-shadow .3s ease;}
.footer__col a:hover{color:var(--violet-bright);text-shadow:0 0 14px rgba(138,92,255,0.5);}

/* Upgrade-opt refinement */
.upgrade-opt:hover{
  transform:translateY(-3px) scale(1.005);
  border-color:rgba(138,92,255,0.28);
  box-shadow:0 16px 42px -18px rgba(6,3,11,0.7), 0 0 26px -8px var(--violet-glow);
}
.upgrade-opt--all:hover{
  box-shadow:0 20px 50px -18px rgba(6,3,11,0.8), 0 0 36px -8px var(--violet-glow), 0 0 22px -10px var(--accent-glow);
}

/* Price-card hover */
.price-card{transition:transform .4s var(--ease-out), border-color .3s ease, box-shadow .4s ease;}
.price-card:hover{
  transform:translateY(-4px);
  border-color:rgba(138,92,255,0.3);
  box-shadow:0 18px 48px -18px rgba(6,3,11,0.75), 0 0 30px -8px var(--violet-glow);
}

/* logo-pill en marquee hover glow */
.logo-pill{transition:background .25s ease, color .2s ease, border-color .2s ease, box-shadow .3s ease, transform .25s ease;}
.logo-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 0 22px -8px var(--violet-glow);
}

/* ============================================================
   30. Legal page — Terminos y Condiciones
   ============================================================ */
.legal-body .nav > .container{max-width:1120px;}

.legal{
  padding:calc(var(--nav-h) + 72px) 0 80px;
}
.legal__container{max-width:860px;}

.legal__hero{
  display:flex;flex-direction:column;gap:14px;
  padding-bottom:32px;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
}
.legal__hero .eyebrow{align-self:flex-start;}
.legal__title{
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.05;
  letter-spacing:-0.03em;
}
.legal__lead{max-width:680px;color:var(--text-2);font-size:1.05rem;line-height:1.6;}
.legal__lead strong{color:var(--text-0);font-weight:500;}

.legal__meta{
  display:flex;flex-wrap:wrap;gap:28px;
  margin-top:16px;
  padding:16px 20px;
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.legal__meta > span{display:flex;flex-direction:column;gap:2px;min-width:120px;}
.legal__meta small{font-size:.72rem;color:var(--text-3);letter-spacing:0.08em;text-transform:uppercase;}
.legal__meta strong{font-family:'JetBrains Mono',monospace;font-size:.92rem;color:var(--text-0);font-weight:500;}

.legal__content{
  display:flex;flex-direction:column;gap:36px;
}
.legal__section{
  background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0)),var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 34px;
  transition:border-color .3s ease;
}
.legal__section:hover{border-color:var(--accent-line);}

.legal__section h2{
  font-family:'Inter Tight',sans-serif;
  font-size:1.45rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--text-0);
  line-height:1.25;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.legal__section h3{
  font-family:'Inter Tight',sans-serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--violet-bright);
  margin-top:20px;
  margin-bottom:8px;
}
.legal__section h3:first-of-type{margin-top:0;}
.legal__section p{
  color:var(--text-1);
  font-size:.95rem;
  line-height:1.75;
  margin-bottom:12px;
}
.legal__section p:last-child{margin-bottom:0;}
.legal__section p b{color:var(--violet-bright);font-weight:600;}

.legal__list{
  list-style:none;
  padding:0;margin:12px 0 0;
  display:flex;flex-direction:column;gap:8px;
}
.legal__list li{
  padding:10px 14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:.92rem;
  color:var(--text-1);
  line-height:1.55;
}
.legal__list li b{color:var(--violet-bright);}

.legal__back{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:48px;padding-top:32px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.legal__back .btn{flex:0 1 auto;}

@media (max-width:640px){
  .legal{padding:calc(var(--nav-h) + 48px) 0 56px;}
  .legal__section{padding:22px 20px;}
  .legal__section h2{font-size:1.2rem;}
  .legal__meta{gap:16px;padding:12px 16px;}
  .legal__meta > span{min-width:100px;}
  .legal__back{flex-direction:column;}
  .legal__back .btn{width:100%;justify-content:center;}
}

/* ---------- 23. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .glow,.grain,.mock-card{animation:none;}
}

/* ============================================================
   24. FRANCO BOT (service section + internal page)
   Reutiliza tokens y patrones existentes (eyebrow, btn, pulse)
   ============================================================ */

/* ---------- 24.1 Section container + ambient glows ---------- */
.wa-ai{
  position:relative;
  padding:clamp(88px,10vw,140px) 0;
  overflow:hidden;
}
.wa-ai::before,
.wa-ai::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
}
.wa-ai::before{
  top:10%; left:-8%;
  width:55%; height:60%;
  background:radial-gradient(circle,rgba(138,92,255,.10) 0%,transparent 60%);
}
.wa-ai::after{
  bottom:8%; right:-8%;
  width:50%; height:55%;
  background:radial-gradient(circle,rgba(47,128,255,.09) 0%,transparent 60%);
}

.wa-ai__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:center;
}
@media (min-width:1024px){
  .wa-ai__inner{
    grid-template-columns:1fr 1.15fr;
    gap:72px;
  }
}

/* ---------- 24.2 Copy column ---------- */
.wa-ai__copy > * + *{ margin-top:18px; }
.wa-ai__copy .h-section{ margin:6px 0 0; }

/* Feature cards grid (2x2 desktop, 1-col mobile) — matchea el patron
   de cards del sitio: icon box violet + h4 + micro-descripcion,
   hover con gradient border animada. */
.wa-ai__features{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:32px;
}
@media (min-width:560px){
  .wa-ai__features{ grid-template-columns:1fr 1fr; gap:14px; }
}

.wa-ai__feat{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:14px;
  transition:transform .3s ease-out,background .3s ease-out,border-color .3s ease-out;
  overflow:hidden;
}
.wa-ai__feat::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(138,92,255,.4),rgba(47,128,255,.25) 50%,transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease-out;
  pointer-events:none;
}
.wa-ai__feat:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(138,92,255,.06),transparent),var(--bg-1);
  border-color:transparent;
}
.wa-ai__feat:hover::before{ opacity:1; }

.wa-ai__feat-icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(138,92,255,.2),rgba(47,128,255,.08));
  border:1px solid rgba(138,92,255,.28);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--violet-bright);
  box-shadow:inset 0 0 12px rgba(138,92,255,.08);
}
.wa-ai__feat-icon svg{ width:18px; height:18px; }

.wa-ai__feat-body{ min-width:0; }
.wa-ai__feat-body h4{
  margin:0 0 4px;
  font-size:.96rem;
  font-weight:600;
  color:var(--text-0);
  line-height:1.25;
  letter-spacing:-.01em;
}
.wa-ai__feat-body p{
  margin:0;
  font-size:.82rem;
  color:var(--text-2);
  line-height:1.5;
}

.wa-ai__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}

/* ---------- 24.3 Visual stage (phone + panel + connector) ---------- */
.wa-ai__visual{
  position:relative;
  min-height:540px;
  perspective:1600px;
}
@media (max-width:1023px){
  .wa-ai__visual{
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
  }
}

.wa-connection{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
@media (max-width:1023px){
  .wa-connection{ display:none; }
}
.wa-connection__path{
  animation:waFlow 2.6s linear infinite;
  opacity:.75;
}
.wa-connection__dot{
  filter:drop-shadow(0 0 6px currentColor);
}
.wa-connection__dot--a{ animation:waDotPulse 2.2s ease-in-out infinite; transform-origin:120px 110px; }
.wa-connection__dot--b{ animation:waDotPulse 2.2s ease-in-out infinite 1.1s; transform-origin:420px 300px; }

@keyframes waFlow{ to{ stroke-dashoffset:-26; } }
@keyframes waDotPulse{
  0%,100%{ transform:scale(1);   opacity:.9; }
  50%    { transform:scale(1.6); opacity:1;  }
}

/* ---------- 24.4 Phone mock (front) ---------- */
.wa-phone{
  position:relative;
  z-index:3;
  width:290px;
  max-width:100%;
  margin:0 auto;
  background:linear-gradient(180deg,#0b0714,#06030b);
  border:1px solid var(--line-strong);
  border-radius:36px;
  padding:22px 10px 10px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 6px rgba(138,92,255,.04),
    0 20px 80px -10px rgba(138,92,255,.22);
  transform:perspective(1400px) rotateY(-5deg) rotateX(3deg) translateZ(20px);
  animation:waFloatA 7s ease-in-out infinite;
}
@media (min-width:1024px){
  .wa-phone{ position:absolute; top:0; right:40px; }
}

.wa-phone__notch{
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  width:90px; height:18px;
  background:#000;
  border-radius:0 0 16px 16px;
  z-index:2;
}

.wa-phone__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(138,92,255,.08),rgba(138,92,255,.02));
  border:1px solid var(--line);
  border-radius:14px;
  margin-top:6px;
}
.wa-phone__back svg{ color:var(--text-3); transform:rotate(180deg); }

.wa-phone__contact{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
}
.wa-phone__avatar{
  width:34px; height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#8A5CFF,#6C3BFF,#2F80FF);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 0 20px rgba(138,92,255,.4);
}
.wa-phone__contact strong{
  display:block;
  color:var(--text-0);
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
}
.wa-phone__contact small{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:.72rem;
  line-height:1.2;
}
.wa-phone__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 6px rgba(46,214,137,.6);
  animation:waBlink 2.2s ease-in-out infinite;
}
@keyframes waBlink{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

.wa-phone__chat{
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:360px;
  overflow:hidden;
}

/* ---------- 24.5 Message bubbles ---------- */
.wa-msg{
  max-width:84%;
  padding:8px 12px 6px;
  border-radius:14px;
  font-size:.78rem;
  line-height:1.45;
  animation:waMsgIn .5s ease-out backwards;
}
.wa-msg:nth-child(1){ animation-delay:.25s; }
.wa-msg:nth-child(2){ animation-delay:.65s; }
.wa-msg:nth-child(3){ animation-delay:1.05s; }
.wa-msg:nth-child(4){ animation-delay:1.45s; }
.wa-msg:nth-child(5){ animation-delay:1.85s; }
@keyframes waMsgIn{
  from{ opacity:0; transform:translateY(6px) scale(.97); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}

.wa-msg p{ margin:0; color:var(--text-1); }
.wa-msg p strong{ color:var(--text-0); font-weight:600; }
.wa-msg__time{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.62rem;
  color:var(--text-3);
  margin-top:4px;
}
.wa-msg__time svg{ color:var(--accent-bright); width:12px; height:12px; }

.wa-msg--in{
  align-self:flex-start;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-bottom-left-radius:4px;
}
.wa-msg--out{
  align-self:flex-end;
  background:linear-gradient(180deg,rgba(138,92,255,.18),rgba(47,128,255,.12));
  border:1px solid rgba(138,92,255,.28);
  border-bottom-right-radius:4px;
}

.wa-msg--rich .wa-msg__tags{
  display:flex; gap:6px;
  margin-top:6px;
  flex-wrap:wrap;
}
.wa-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  font-size:.6rem;
  font-weight:600;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.wa-tag--hot { background:rgba(255,92,92,.16);  color:#ff7878; border:1px solid rgba(255,92,92,.28);  }
.wa-tag--warm{ background:rgba(245,184,80,.16); color:#f5c378; border:1px solid rgba(245,184,80,.28); }
.wa-tag--cold{ background:rgba(77,163,255,.14); color:#7bb8ff; border:1px solid rgba(77,163,255,.24); }

.wa-msg--typing{ padding:10px 14px; }
.wa-typing{ display:inline-flex; gap:3px; }
.wa-typing i{
  display:block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--text-3);
  animation:waTyping 1.2s ease-in-out infinite;
}
.wa-typing i:nth-child(2){ animation-delay:.15s; }
.wa-typing i:nth-child(3){ animation-delay:.3s;  }
@keyframes waTyping{
  0%,60%,100%{ transform:translateY(0);    opacity:.4; }
  30%        { transform:translateY(-4px); opacity:1;  }
}

.wa-phone__input{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  margin:0 4px 4px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--text-3);
  font-size:.78rem;
}
.wa-phone__input svg{ color:var(--violet-bright); }

/* ---------- 24.6 Dashboard panel (back) ---------- */
.wa-panel{
  position:relative;
  z-index:2;
  width:100%;
  max-width:360px;
  margin:24px auto 0;
  padding:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:18px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(138,92,255,.08),
    0 12px 40px -10px rgba(47,128,255,.22);
  transform:perspective(1400px) rotateY(4deg) rotateX(-2deg);
  animation:waFloatB 8s ease-in-out infinite .3s;
}
@media (min-width:1024px){
  .wa-panel{
    position:absolute;
    bottom:20px;
    left:0;
    margin:0;
  }
}

@keyframes waFloatA{
  0%,100%{ transform:perspective(1400px) rotateY(-5deg) rotateX(3deg) translateY(0)    translateZ(20px); }
  50%    { transform:perspective(1400px) rotateY(-5deg) rotateX(3deg) translateY(-8px) translateZ(20px); }
}
@keyframes waFloatB{
  0%,100%{ transform:perspective(1400px) rotateY(4deg) rotateX(-2deg) translateY(0);    }
  50%    { transform:perspective(1400px) rotateY(4deg) rotateX(-2deg) translateY(-6px); }
}

.wa-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}
.wa-panel__eyebrow{
  padding:4px 10px !important;
  font-size:10px !important;
}
.wa-panel__head h4{
  margin:6px 0 0;
  font-size:.95rem;
  color:var(--text-0);
  font-weight:600;
}

.wa-panel__kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:14px;
}
.wa-kpi{
  position:relative;
  padding:10px 12px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.wa-kpi small{
  display:block;
  color:var(--text-3);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.wa-kpi strong{
  display:block;
  color:var(--text-0);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:1.2rem;
  font-weight:500;
  line-height:1;
}
.wa-kpi__delta{
  position:absolute;
  top:8px;
  right:8px;
  font-style:normal;
  font-size:.62rem;
  font-weight:600;
  color:var(--success);
  background:rgba(46,214,137,.12);
  padding:2px 6px;
  border-radius:6px;
}

.wa-panel__chart{
  height:56px;
  margin-bottom:14px;
  opacity:.9;
}
.wa-panel__chart svg{ width:100%; height:100%; display:block; }

.wa-panel__feed{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.wa-feed__row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  color:var(--text-2);
}
.wa-feed__row strong{ color:var(--text-0); font-weight:500; }
.wa-feed__row em{
  margin-left:auto;
  font-style:normal;
  color:var(--text-3);
  font-size:.66rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
.wa-feed__dot{
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.wa-feed__dot--violet{ background:var(--violet-bright); box-shadow:0 0 8px rgba(138,92,255,.5); }
.wa-feed__dot--blue  { background:var(--accent-bright); box-shadow:0 0 8px rgba(77,163,255,.5);  }
.wa-feed__dot--green { background:var(--success);       box-shadow:0 0 8px rgba(46,214,137,.5);  }

@media (max-width:520px){
  .wa-phone{ width:100%; max-width:320px; }
  .wa-panel{ max-width:100%; }
  .wa-panel__kpis{ grid-template-columns:1fr 1fr; }
  .wa-panel__kpis .wa-kpi:last-child{ grid-column:span 2; }
}

@media (prefers-reduced-motion:reduce){
  .wa-phone, .wa-panel,
  .wa-connection__path, .wa-connection__dot,
  .wa-phone__dot, .wa-typing i, .wa-msg{
    animation:none !important;
  }
}

/* ============================================================
   25. WHATSAPP-AI PAGE (internal /whatsapp-ai.html)
   Premium enterprise service page. Reutiliza todo el token system
   del sitio + la seccion 24 (wa-phone/wa-panel) en el hero.
   ============================================================ */

.wap-body{ background:var(--bg-0); color:var(--text-1); }
.wap-main{ position:relative; z-index:1; }

/* Espacio sobre el hero para dejar que el nav no se coma el contenido */
.wap-main > section{ position:relative; padding:clamp(80px,9vw,128px) 0; }
.wap-main > section:first-child{ padding-top:clamp(120px,14vw,180px); }

/* ---------- 25.1 Hero ---------- */
.wap-hero__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  align-items:center;
}
@media (min-width:1024px){
  .wap-hero__inner{ grid-template-columns:1.05fr 1fr; gap:72px; }
}
.wap-hero__copy > * + *{ margin-top:18px; }
.wap-hero__lead{ max-width:580px; }
.wap-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px !important; }
.wap-hero__trust{
  list-style:none;
  padding:0;
  margin:28px 0 0 !important;
  display:flex;
  flex-wrap:wrap;
  gap:18px 24px;
  color:var(--text-3);
  font-size:.88rem;
}
.wap-hero__trust li{ display:flex; align-items:center; gap:8px; }
.wap-hero__trust svg{ color:var(--accent-bright); }

.wap-hero__visual{
  position:relative;
  min-height:540px;
  perspective:1600px;
}
@media (max-width:1023px){
  .wap-hero__visual{ min-height:auto; display:flex; flex-direction:column; align-items:center; gap:28px; }
  .wap-hero__visual .wa-connection{ display:none; }
}

/* ---------- 25.2 What it does (4-card) ---------- */
.wap-what__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:56px;
}
@media (min-width:640px){ .wap-what__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .wap-what__grid{ grid-template-columns:repeat(4,1fr); } }

.wap-what__card{
  position:relative;
  padding:28px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:16px;
  transition:transform .3s ease-out,border-color .3s ease-out,background .3s ease-out;
  overflow:hidden;
}
.wap-what__card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(138,92,255,.45),rgba(47,128,255,.25) 60%,transparent 85%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease-out; pointer-events:none;
}
.wap-what__card:hover{ transform:translateY(-4px); border-color:transparent; }
.wap-what__card:hover::before{ opacity:1; }

.wap-what__icon{
  width:48px; height:48px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(138,92,255,.2),rgba(47,128,255,.08));
  border:1px solid rgba(138,92,255,.3);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--violet-bright);
  margin-bottom:18px;
  box-shadow:inset 0 0 14px rgba(138,92,255,.1);
}
.wap-what__icon svg{ width:22px; height:22px; }
.wap-what__card h3{ margin:0 0 8px; font-size:1.1rem; font-weight:600; color:var(--text-0); letter-spacing:-.01em; }
.wap-what__card p { margin:0; font-size:.9rem; color:var(--text-2); line-height:1.55; }

/* ---------- 25.3 Capabilities (6 module-cards) ---------- */
.wap-caps__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:56px;
}
@media (min-width:768px){  .wap-caps__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1200px){ .wap-caps__grid{ grid-template-columns:repeat(3,1fr); } }

.wap-cap{
  position:relative;
  padding:26px 24px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:16px;
  transition:transform .3s ease-out,border-color .3s ease-out;
  overflow:hidden;
}
.wap-cap::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,rgba(138,92,255,.4),rgba(47,128,255,.22) 60%,transparent 85%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease-out; pointer-events:none;
}
.wap-cap:hover{ transform:translateY(-3px); border-color:transparent; }
.wap-cap:hover::before{ opacity:1; }

.wap-cap__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.wap-cap__icon{
  width:44px; height:44px;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(138,92,255,.22),rgba(47,128,255,.08));
  border:1px solid rgba(138,92,255,.3);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--violet-bright);
}
.wap-cap__icon svg{ width:20px; height:20px; }
.wap-cap__tag{
  display:inline-block;
  padding:4px 10px;
  font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--violet-bright);
  background:rgba(138,92,255,.1);
  border:1px solid rgba(138,92,255,.25);
  border-radius:999px;
}
.wap-cap h3{
  margin:0 0 8px;
  font-size:1.2rem;
  font-weight:600;
  color:var(--text-0);
  letter-spacing:-.015em;
}
.wap-cap__desc{
  margin:0 0 16px;
  font-size:.88rem;
  color:var(--text-2);
  line-height:1.55;
}
.wap-cap__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.wap-cap__list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.83rem;
  color:var(--text-2);
  line-height:1.45;
}
.wap-cap__list li svg{ color:var(--violet-bright); flex-shrink:0; margin-top:2px; }

/* ---------- 25.4 Control Center (split) ---------- */
.wap-control__inner{
  display:grid; grid-template-columns:1fr; gap:48px; align-items:center;
}
@media (min-width:1024px){
  .wap-control__inner{ grid-template-columns:.95fr 1.05fr; gap:72px; }
}
.wap-control__copy > * + *{ margin-top:18px; }

.wap-control__list{
  list-style:none; padding:0;
  margin:32px 0 0 !important;
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:560px){
  .wap-control__list{ grid-template-columns:1fr 1fr; gap:14px 18px; }
}
.wap-control__list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 14px 12px;
  background:linear-gradient(180deg,rgba(138,92,255,.04),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .25s ease-out, background .25s ease-out;
}
.wap-control__list li:hover{
  border-color:var(--line-strong);
  background:linear-gradient(180deg,rgba(138,92,255,.08),transparent),var(--bg-1);
}
.wap-control__dot{
  flex-shrink:0;
  width:10px; height:10px;
  margin-top:5px;
  border-radius:50%;
  background:var(--violet-bright);
  box-shadow:0 0 8px rgba(138,92,255,.55);
}
.wap-control__list strong{
  display:block;
  color:var(--text-0);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:2px;
}
.wap-control__list p{
  margin:0;
  font-size:.8rem;
  color:var(--text-3);
  line-height:1.4;
}

/* Dashboard mockup del control center */
.wap-controlmock{
  position:relative;
  padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:18px;
  backdrop-filter:blur(10px);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(138,92,255,.1),
    0 16px 50px -10px rgba(47,128,255,.2);
  transform:perspective(1400px) rotateY(-3deg) rotateX(2deg);
}
.wap-controlmock__top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.wap-controlmock__brand{ font-family:"Poppins",sans-serif; font-weight:700; color:var(--text-0); letter-spacing:-.02em; }
.wap-controlmock__brand em{ color:var(--text-3); font-style:normal; font-weight:400; font-size:.8em; margin-left:6px; }
.wap-controlmock__status{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; }

.wap-controlmock__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:520px){ .wap-controlmock__grid{ grid-template-columns:1fr 1fr; } }
.wap-controlmock__tile{
  padding:14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.wap-controlmock__tile--wide{ grid-column:span 2; }
@media (max-width:520px){ .wap-controlmock__tile--wide{ grid-column:span 2; } }
.wap-controlmock__tile small{
  display:block;
  color:var(--text-3);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.wap-controlmock__tile strong{
  display:block;
  color:var(--text-0);
  font-family:"JetBrains Mono",monospace;
  font-size:1.3rem;
  line-height:1;
  font-weight:500;
}
.wap-controlmock__tile strong span{ color:var(--text-3); font-size:.7em; font-weight:400; margin-left:2px; }
.wap-controlmock__bar{
  margin-top:10px;
  height:6px;
  background:var(--bg-3);
  border-radius:999px;
  overflow:hidden;
}
.wap-controlmock__bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#8A5CFF,#2F80FF);
  border-radius:inherit;
  animation:wapBarFill 1.4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes wapBarFill{ from{ width:0 !important; } }

.wap-controlmock__chips{ display:flex; gap:4px; margin-top:10px; flex-wrap:wrap; }
.wap-controlmock__chips .chip{
  font-style:normal;
  font-size:.6rem; font-weight:600;
  padding:3px 7px;
  border-radius:999px;
  text-transform:uppercase; letter-spacing:.04em;
}
.wap-controlmock__chips .chip--hot { background:rgba(255,92,92,.16); color:#ff7878; border:1px solid rgba(255,92,92,.28); }
.wap-controlmock__chips .chip--warm{ background:rgba(245,184,80,.16); color:#f5c378; border:1px solid rgba(245,184,80,.28); }
.wap-controlmock__chips .chip--cold{ background:rgba(77,163,255,.14); color:#7bb8ff; border:1px solid rgba(77,163,255,.24); }

.wap-controlmock__spark{ width:100%; height:50px; margin-top:6px; }
.wap-controlmock__delta{
  font-style:normal;
  font-size:.7rem; font-weight:600;
  color:var(--success);
  margin-top:6px;
  display:inline-block;
}
.wap-controlmock__delta--up::before{ content:"↑ "; }

/* ---------- 25.5 Dashboard Viz ---------- */
.wap-viz__grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:768px){ .wap-viz__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .wap-viz__grid{ grid-template-columns:1.3fr 1fr 1fr; } }

.wap-viz__tile{
  padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .25s ease-out;
}
.wap-viz__tile:hover{ border-color:var(--line-strong); }
.wap-viz__tile header{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.wap-viz__tile header .eyebrow{
  padding:4px 10px !important;
  font-size:10px !important;
  background:transparent !important;
  border:none !important;
}
.wap-viz__tile h4{
  margin:0 0 14px;
  color:var(--text-0);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.wap-viz__tile--wide{ grid-column:span 1; }
@media (min-width:1100px){ .wap-viz__tile--wide{ grid-column:span 3; } }
.wap-viz__tile--chart{ grid-row:span 1; }
@media (min-width:1100px){ .wap-viz__tile--chart{ grid-row:span 2; } }

/* Funnel */
.wap-viz__funnel{ display:flex; flex-direction:column; gap:8px; }
.wap-funnel__step{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  background:linear-gradient(90deg,rgba(138,92,255,.2),rgba(47,128,255,.08));
  border:1px solid rgba(138,92,255,.25);
  border-radius:8px;
  font-size:.85rem; color:var(--text-1);
  width:var(--w,100%);
  animation:wapFunnelIn .6s cubic-bezier(.22,1,.36,1) both;
}
.wap-funnel__step:nth-child(1){ animation-delay:.05s; }
.wap-funnel__step:nth-child(2){ animation-delay:.15s; }
.wap-funnel__step:nth-child(3){ animation-delay:.25s; }
.wap-funnel__step:nth-child(4){ animation-delay:.35s; }
.wap-funnel__step:nth-child(5){ animation-delay:.45s; }
.wap-funnel__step em{ font-style:normal; font-family:"JetBrains Mono",monospace; color:var(--text-0); font-weight:500; }
@keyframes wapFunnelIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:translateX(0); } }

/* KPIs */
.wap-viz__kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wap-viz__kpis > div{
  padding:14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
}
.wap-viz__kpis small{ display:block; color:var(--text-3); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.wap-viz__kpis strong{ display:block; color:var(--text-0); font-family:"JetBrains Mono",monospace; font-size:1.4rem; font-weight:500; line-height:1; }
.wap-viz__kpis strong span{ color:var(--text-3); font-size:.65em; font-weight:400; margin-left:2px; }

/* Alerts */
.wap-viz__alerts{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.wap-viz__alerts li{ display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--text-2); }
.wap-viz__alerts strong{ color:var(--text-0); font-weight:500; }
.wap-viz__alerts em{ margin-left:auto; font-style:normal; color:var(--text-3); font-size:.7rem; font-family:"JetBrains Mono",monospace; flex-shrink:0; }
.wap-viz__alerts .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.wap-viz__alerts .dot--hot { background:#ff5c5c; box-shadow:0 0 8px rgba(255,92,92,.5); animation:wapPulse 2s ease-in-out infinite; }
.wap-viz__alerts .dot--warm{ background:#f5b850; box-shadow:0 0 8px rgba(245,184,80,.5); }
.wap-viz__alerts .dot--info{ background:var(--accent-bright); box-shadow:0 0 8px rgba(77,163,255,.5); }
.wap-viz__alerts .dot--ok  { background:var(--success); box-shadow:0 0 8px rgba(46,214,137,.5); }
@keyframes wapPulse{ 0%,100%{opacity:1;} 50%{opacity:.5;} }

/* Automation monitor */
.wap-viz__monitors{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:768px){ .wap-viz__monitors{ grid-template-columns:1fr 1fr; } }
.wap-viz__monitor{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:.84rem;
}
.wap-viz__monitor span{ color:var(--text-1); min-width:140px; font-family:"JetBrains Mono",monospace; font-size:.8rem; }
.wap-viz__monitor .bar{ flex:1; height:6px; background:var(--bg-3); border-radius:999px; overflow:hidden; }
.wap-viz__monitor .bar b{ display:block; height:100%; background:linear-gradient(90deg,#8A5CFF,#2F80FF); border-radius:inherit; animation:wapBarFill 1.4s cubic-bezier(.22,1,.36,1) both; }
.wap-viz__monitor em{ font-style:normal; color:var(--text-0); font-family:"JetBrains Mono",monospace; font-size:.78rem; min-width:40px; text-align:right; }

/* ---------- 25.6 How it works (steps) ---------- */
.wap-how__steps{
  list-style:none; padding:0;
  margin:56px 0 0;
  display:grid; grid-template-columns:1fr; gap:14px;
  counter-reset:how;
}
@media (min-width:768px){ .wap-how__steps{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .wap-how__steps{ grid-template-columns:repeat(4,1fr); } }

.wap-how__steps li{
  position:relative;
  padding:28px 24px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .25s ease-out, transform .25s ease-out;
}
.wap-how__steps li:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.wap-how__num{
  display:inline-block;
  font-family:"JetBrains Mono",monospace;
  font-size:1.4rem; font-weight:500;
  color:var(--violet-bright);
  margin-bottom:12px;
}
.wap-how__steps h3{
  margin:0 0 8px;
  font-size:1.05rem; font-weight:600;
  color:var(--text-0);
  letter-spacing:-.01em;
}
.wap-how__steps p{ margin:0; font-size:.88rem; color:var(--text-2); line-height:1.55; }

/* ---------- 25.7 System flow diagram ---------- */
.wap-flow__diagram{
  position:relative;
  margin-top:56px;
  padding:56px 0;
  min-height:260px;
}
.wap-flow__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.wap-flow__line{
  animation:wapFlowLine 3s linear infinite;
  opacity:.7;
}
@keyframes wapFlowLine{ to{ stroke-dashoffset:-24; } }

.wap-flow__nodes{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
}
@media (min-width:768px){ .wap-flow__nodes{ grid-template-columns:repeat(5,1fr); gap:0; } }

.wap-flow__node{
  position:relative;
  text-align:center;
  padding:20px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:14px;
  transition:transform .3s ease-out;
  animation:wapNodeBreathe 3s ease-in-out infinite;
}
.wap-flow__node:nth-child(1){ animation-delay:0s; }
.wap-flow__node:nth-child(2){ animation-delay:.4s; }
.wap-flow__node:nth-child(3){ animation-delay:.8s; }
.wap-flow__node:nth-child(4){ animation-delay:1.2s; }
.wap-flow__node:nth-child(5){ animation-delay:1.6s; }
@keyframes wapNodeBreathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(138,92,255,0); }
  50%    { box-shadow:0 0 0 8px rgba(138,92,255,.08); }
}
.wap-flow__node:hover{ transform:translateY(-3px); }
.wap-flow__node-icon{
  width:54px; height:54px;
  margin:0 auto 12px;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(138,92,255,.22),rgba(47,128,255,.08));
  border:1px solid rgba(138,92,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--violet-bright);
}
.wap-flow__node-icon svg{ width:22px; height:22px; }
.wap-flow__node strong{ display:block; color:var(--text-0); font-size:.95rem; font-weight:600; letter-spacing:-.01em; }
.wap-flow__node small{ display:block; margin-top:4px; color:var(--text-3); font-size:.72rem; line-height:1.35; }

.wap-flow__legend{
  margin-top:48px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  max-width:720px;
  margin-left:auto; margin-right:auto;
}
.wap-flow__legend > div{
  display:flex; gap:10px; align-items:center;
  padding:12px 16px;
  background:linear-gradient(180deg,rgba(138,92,255,.03),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:.88rem;
  color:var(--text-2);
}
.wap-flow__legend strong{ color:var(--violet-bright); font-weight:600; flex-shrink:0; }

/* ---------- 25.8 Integrations ---------- */
.wap-ints__grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media (min-width:560px){ .wap-ints__grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:880px){ .wap-ints__grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1100px){ .wap-ints__grid{ grid-template-columns:repeat(6,1fr); } }

.wap-int{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:12px;
  transition:transform .25s ease-out, border-color .25s ease-out, background .25s ease-out;
  color:var(--text-2);
  font-size:.8rem;
  text-align:center;
}
.wap-int:hover{
  transform:translateY(-3px);
  border-color:rgba(138,92,255,.3);
  background:linear-gradient(180deg,rgba(138,92,255,.06),transparent),var(--bg-1);
  color:var(--text-0);
}
.wap-int svg{ width:28px; height:28px; color:var(--violet-bright); }

/* ---------- 25.9 Use cases ---------- */
.wap-cases__grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){  .wap-cases__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .wap-cases__grid{ grid-template-columns:repeat(4,1fr); } }

.wap-case{
  padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:14px;
  transition:transform .25s ease-out, border-color .25s ease-out;
}
.wap-case:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.wap-case__icon{
  width:40px; height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(138,92,255,.2),rgba(47,128,255,.06));
  border:1px solid rgba(138,92,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--violet-bright);
  margin-bottom:14px;
}
.wap-case h4{ margin:0 0 6px; font-size:.98rem; font-weight:600; color:var(--text-0); letter-spacing:-.01em; }
.wap-case p { margin:0; font-size:.84rem; color:var(--text-2); line-height:1.5; }

/* ---------- 25.10 Complex business (orbit visual) ---------- */
.wap-complex__inner{
  display:grid; grid-template-columns:1fr; gap:56px; align-items:center;
}
@media (min-width:1024px){ .wap-complex__inner{ grid-template-columns:1.15fr 1fr; gap:80px; } }
.wap-complex__copy > * + *{ margin-top:18px; }
.wap-complex__copy em{ color:var(--violet-bright); font-style:normal; font-weight:600; }

.wap-complex__visual{
  position:relative;
  min-height:440px;
  display:flex; align-items:center; justify-content:center;
}
.wap-complex__web{
  position:relative;
  width:100%; max-width:440px;
  aspect-ratio:1/1;
}
.wap-complex__center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:88px; height:88px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(138,92,255,.3),rgba(47,128,255,.12));
  border:1.5px solid rgba(138,92,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 0 40px rgba(138,92,255,.4),inset 0 0 20px rgba(138,92,255,.2);
  z-index:3;
}
.wap-complex__center svg{ width:34px; height:34px; }

.wap-complex__orbit{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.wap-complex__orbit--1{
  width:320px; height:320px;
  animation:wapOrbit1 60s linear infinite;
}
.wap-complex__orbit--2{
  width:440px; height:440px;
  animation:wapOrbit2 80s linear infinite reverse;
}
@keyframes wapOrbit1{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes wapOrbit2{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (max-width:520px){
  .wap-complex__orbit--1{ width:260px; height:260px; }
  .wap-complex__orbit--2{ width:360px; height:360px; }
}

.wap-complex__item{
  position:absolute;
  top:50%; left:50%;
  transform:rotate(var(--a)) translateX(calc(50% + 0px)) rotate(calc(-1 * var(--a)));
  padding:6px 12px;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:.72rem;
  color:var(--text-1);
  font-style:normal;
  white-space:nowrap;
  box-shadow:0 0 12px rgba(0,0,0,.4);
  animation:wapItemGlow 3s ease-in-out infinite;
}
.wap-complex__orbit--1 .wap-complex__item{ transform:rotate(var(--a)) translateX(160px) rotate(calc(-1 * var(--a))); }
.wap-complex__orbit--2 .wap-complex__item{ transform:rotate(var(--a)) translateX(220px) rotate(calc(-1 * var(--a))); }
@media (max-width:520px){
  .wap-complex__orbit--1 .wap-complex__item{ transform:rotate(var(--a)) translateX(130px) rotate(calc(-1 * var(--a))); font-size:.65rem; }
  .wap-complex__orbit--2 .wap-complex__item{ transform:rotate(var(--a)) translateX(180px) rotate(calc(-1 * var(--a))); font-size:.6rem; }
}
.wap-complex__item--sm{ font-size:.65rem; color:var(--text-3); }
@keyframes wapItemGlow{
  0%,100%{ box-shadow:0 0 12px rgba(0,0,0,.4); }
  50%    { box-shadow:0 0 20px rgba(138,92,255,.2), 0 0 12px rgba(0,0,0,.4); }
}

/* ---------- 25.11 Benefits ---------- */
.wap-benefits__grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:560px){  .wap-benefits__grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){  .wap-benefits__grid{ grid-template-columns:repeat(4,1fr); } }

.wap-benefit{
  padding:20px 20px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--bg-1);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .25s ease-out, transform .25s ease-out;
}
.wap-benefit:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.wap-benefit__num{
  display:inline-block;
  font-family:"JetBrains Mono",monospace;
  font-size:.75rem;
  font-weight:500;
  color:var(--violet-bright);
  margin-bottom:10px;
  opacity:.8;
}
.wap-benefit h4{
  margin:0 0 4px;
  font-size:.95rem; font-weight:600;
  color:var(--text-0);
  letter-spacing:-.01em;
}
.wap-benefit p{ margin:0; font-size:.82rem; color:var(--text-2); line-height:1.5; }

/* ---------- 25.12 Final CTA ---------- */
.wap-final{ padding-bottom:clamp(100px,12vw,160px) !important; }
.wap-final__card{
  position:relative;
  padding:clamp(40px,6vw,72px) clamp(32px,5vw,64px);
  background:linear-gradient(180deg,rgba(138,92,255,.1),rgba(47,128,255,.04)),var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:24px;
  text-align:center;
  overflow:hidden;
}
.wap-final__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 0%, rgba(138,92,255,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 100%, rgba(47,128,255,.14), transparent 60%);
  pointer-events:none;
}
.wap-final__card > *{ position:relative; z-index:1; }
.wap-final__card > * + *{ margin-top:16px; }
.wap-final__card .eyebrow{ margin:0 auto; }
.wap-final__card .h-section{ max-width:760px; margin-left:auto; margin-right:auto; }
.wap-final__card .subsection{ max-width:560px; margin-left:auto; margin-right:auto; }
.wap-final__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .wap-flow__line, .wap-flow__node, .wap-complex__orbit--1, .wap-complex__orbit--2,
  .wap-complex__item, .wap-controlmock__bar span, .wap-viz__monitor .bar b,
  .wap-funnel__step, .wap-viz__alerts .dot--hot{
    animation:none !important;
  }
  .wap-controlmock__bar span, .wap-viz__monitor .bar b{ width:var(--w,100%); }
}



/* ==================== Franco Bot Public Panel ==================== */
.franco-public {
  position: relative;
  padding: clamp(96px, 12vw, 160px) 0;
  overflow: hidden;
}

.franco-public::before {
  content: "";
  position: absolute;
  inset: 12% auto auto 50%;
  width: min(820px, 92vw);
  height: min(820px, 92vw);
  transform: translateX(-50%);
  background:
    radial-gradient(circle, rgba(124,58,237,.26), transparent 58%),
    radial-gradient(circle at 72% 30%, rgba(59,130,246,.18), transparent 45%);
  filter: blur(24px);
  pointer-events: none;
}

.franco-public__wrap {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.franco-public__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  margin-bottom: 22px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 999px;
  color: #a5b4fc;
  background: rgba(15,23,42,.58);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.franco-public__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.franco-public__copy h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .92;
  letter-spacing: -.07em;
  max-width: 820px;
}

.franco-public__copy p {
  max-width: 700px;
  margin: 0;
  color: rgba(226,232,240,.72);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.65;
}

.franco-public__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.franco-live-card {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 20% 0%, rgba(124,58,237,.22), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: 0 28px 100px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}

.franco-live-card__top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.franco-live-card__top strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 20px;
}

.franco-live-card__label {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.franco-live-card__status {
  padding: 6px 9px;
  border: 1px solid rgba(34,197,94,.28);
  border-radius: 999px;
  color: #86efac;
  background: rgba(34,197,94,.11);
  font-size: 11px;
  font-weight: 800;
}

.franco-public__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.franco-public__kpis article {
  padding: 14px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.franco-public__kpis small {
  display: block;
  min-height: 30px;
  color: rgba(226,232,240,.55);
  font-size: 11px;
  line-height: 1.25;
}

.franco-public__kpis strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.05em;
}

.franco-public__flow {
  display: grid;
  gap: 13px;
}

.franco-public__flow span {
  display: block;
  margin-bottom: 7px;
  color: rgba(226,232,240,.72);
  font-size: 13px;
}

.franco-public__flow div > i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #38bdf8);
  box-shadow: 0 0 28px rgba(56,189,248,.28);
}

.franco-public__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.franco-public__grid article {
  min-height: 210px;
  padding: 20px;
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}

.franco-public__grid span {
  display: inline-flex;
  margin-bottom: 22px;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.franco-public__grid h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}

.franco-public__grid p {
  margin: 0;
  color: rgba(226,232,240,.58);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .franco-public__hero,
  .franco-public__grid {
    grid-template-columns: 1fr;
  }

  .franco-live-card {
    max-width: 620px;
  }
}

@media (max-width: 620px) {
  .franco-public__kpis {
    grid-template-columns: 1fr;
  }
}



/* ==================== Franco Bot Public Panel Polish ==================== */
.franco-public {
  scroll-margin-top: 110px;
}

.franco-public__copy h2 {
  max-width: 780px;
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: .94;
}

.franco-live-card__note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.14);
  color: rgba(226,232,240,.52);
  font-size: 12px;
  line-height: 1.5;
}

.franco-public__actions .btn {
  min-width: 150px;
  justify-content: center;
}

.franco-public__grid article {
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.franco-public__grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(96,165,250,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
}

@media (min-width: 981px) {
  .franco-public {
    padding-top: clamp(88px, 10vw, 140px);
  }

  .franco-public__hero {
    grid-template-columns: minmax(0, .98fr) minmax(390px, 520px);
  }
}