/* ============================================================
   Praksys — Landing
   Dos temas: claro (por defecto) y azul noche.
   La barra superior es SIEMPRE oscura, para que el logo viva
   sobre su fondo original en cualquiera de los dos.
   Zideral es siempre un bloque oscuro, en ambos temas.
   ============================================================ */

/* ---------- TEMA CLARO (base) ---------- */
:root{
  --bg:        #F7F6F3;
  --bg-alt:    #EFEDE7;
  --surface:   #FFFFFF;
  --surface-2: #FBFAF7;

  --text:      #16181D;
  --muted:     #5C6068;
  --dim:       #62666D;

  --line:      rgba(20,22,28,.13);
  --line-soft: rgba(20,22,28,.07);
  --tint:      rgba(20,22,28,.04);

  /* paleta sin verde: el verde queda reservado para Zideral.
     Oscurecida a propósito para llegar a contraste AA (>=4.5) sobre
     superficies blancas, incluso en textos pequeños de 11-12px */
  --c1:#1B5FD8;  --c2:#7231E0;  --c3:#8F5D08;
  --c4:#0A6F80;  --c5:#BE3819;  --c6:#A8256B;

  --accent:     var(--c1);
  --accent-2:   #1247AC;
  --accent-dim: rgba(27,95,216,.11);
  --on-accent:  #FFFFFF;

  --shadow:     0 10px 30px rgba(20,22,28,.10);
  --shadow-lg:  0 22px 50px rgba(20,22,28,.16);

  /* mockups: ventanas claras */
  --mock-bg:  #FFFFFF;
  --mock-bar: #F1EFEA;
  --mock-el:  #F0EEE9;
  --mock-el2: #E2DFD8;

  --input-bg:       #FFFFFF;
  --input-bg-focus: #FFFFFF;

  --track: #EAE8E2;
  --thumb: #C9C6BE;

  /* barra superior: oscura en los dos temas */
  --nav-bg:     rgba(14,14,14,.94);
  --nav-solid:  #0E0E0E;
  --nav-text:   #EDEBE6;
  --nav-muted:  #9C9B94;
  --nav-line:   rgba(255,255,255,.12);
  --nav-accent: #7FB4FF;

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-logo:    "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  --r:    22px;
  --r-sm: 14px;
  --max:  1180px;

  --pad: clamp(20px, 5vw, 40px);
  --sec: clamp(72px, 11vw, 138px);
}

/* ---------- TEMA AZUL NOCHE ---------- */
:root[data-theme="dark"]{
  --bg:        #0C1220;
  --bg-alt:    #0F1626;
  --surface:   #131C2E;
  --surface-2: #182236;

  --text:      #EDEBE6;
  --muted:     #94A0B4;
  --dim:       #8492A6;

  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);
  --tint:      rgba(255,255,255,.045);

  /* paleta brillante para fondo oscuro, también sin verde */
  --c1:#6AA8FF;  --c2:#B57BFF;  --c3:#FFC24D;
  --c4:#4FD8E8;  --c5:#FF7A59;  --c6:#FF7ABF;

  --accent:     var(--c1);
  --accent-2:   #9BC6FF;
  --accent-dim: rgba(106,168,255,.14);
  --on-accent:  #04142E;

  --shadow:     0 14px 34px rgba(0,0,0,.42);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.55);

  --mock-bg:  #0A101C;
  --mock-bar: #101827;
  --mock-el:  #162033;
  --mock-el2: #24304A;

  --input-bg:       #0A101C;
  --input-bg-focus: #0C1424;

  --track: #0A0F1A;
  --thumb: #2A3549;

  --nav-bg:    rgba(8,12,20,.94);
  --nav-solid: #080C14;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.68;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .3s ease, color .3s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--on-accent); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--track); }
::-webkit-scrollbar-thumb{ background:var(--thumb); border-radius:99px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.container--narrow{ max-width:860px; }
.section{ padding-block:var(--sec); position:relative; }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line-soft); }

.section__head{ max-width:740px; margin-bottom:clamp(40px,6vw,66px); }
.section__title{ font-size:clamp(30px,5vw,54px); margin-bottom:18px; font-weight:700; }
.section__lead{ color:var(--muted); font-size:clamp(15.5px,1.6vw,18px); max-width:660px; }

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
  background:var(--accent-dim); border:1px solid currentColor;
  padding:5px 13px; border-radius:99px;
}
.eyebrow--z{ color:var(--z1); background:rgba(166,255,25,.14); }

.grad{
  background:linear-gradient(96deg,var(--c1) 0%,var(--c6) 45%,var(--c2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:99px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s cubic-bezier(.3,1.4,.5,1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ transform:translateY(-3px) rotate(-.6deg); box-shadow:var(--shadow); }
.btn--ghost{ border-color:var(--line); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--text); transform:translateY(-3px) rotate(.6deg); }
.btn--sm{ padding:9px 19px; font-size:13.5px; }
.btn--lg{ padding:15px 32px; font-size:16px; }
.btn--block{ width:100%; }

/* ---------- Nav (siempre oscura) ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg); color:var(--nav-text);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease;
}
.nav.is-scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.28); border-bottom-color:var(--nav-line); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:70px; }

.logo{ display:inline-flex; align-items:flex-end; gap:5px; }
.logo__word{ font-family:var(--font-logo); font-weight:500; font-size:23px; color:var(--nav-text); line-height:1; }
.logo__bar{
  width:15px; height:3px; background:var(--nav-accent); border-radius:1px;
  margin-bottom:1px; animation:blink 1.6s steps(1) infinite;
}
.logo--lg .logo__word{ font-size:30px; color:var(--text); }
.logo--lg .logo__bar{ width:19px; height:4px; background:var(--accent); }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }

.nav__links{ display:flex; gap:28px; }
.nav__links a{ font-size:14.5px; color:var(--nav-muted); position:relative; padding-block:6px; transition:color .2s ease; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px;
  background:var(--nav-accent); transition:width .25s ease;
}
.nav__links a:hover{ color:var(--nav-text); }
.nav__links a:hover::after{ width:100%; }
.nav__links a[href="#zideral"]{ color:#BEFF57; }
.nav__links a[href="#zideral"]::after{ background:#BEFF57; }

.nav__actions{ display:flex; align-items:center; gap:10px; }

/* interruptor de tema */
.theme-toggle{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:transparent; border:1px solid var(--nav-line); border-radius:12px;
  color:var(--nav-text); cursor:pointer; padding:0;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.theme-toggle:hover{ border-color:var(--nav-accent); transform:translateY(-2px); background:rgba(255,255,255,.06); }
.theme-toggle svg{ width:17px; height:17px; display:block; }
.theme-toggle .i-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .i-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .i-moon{ display:none; }

.nav__burger{
  display:none; width:38px; height:38px; background:none; border:1px solid var(--nav-line);
  border-radius:12px; cursor:pointer; padding:0; place-items:center; gap:5px;
}
.nav__burger span{ display:block; width:16px; height:1.5px; background:var(--nav-text); transition:transform .25s ease; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

/* ojo: `display` debe respetar el atributo [hidden] que controla el JS */
.mobile-menu{ display:none; }
.mobile-menu:not([hidden]){
  display:flex; flex-direction:column; gap:4px;
  padding:14px var(--pad) 26px; border-top:1px solid var(--nav-line); background:var(--nav-solid);
}
.mobile-menu a{ padding:12px 0; color:var(--nav-muted); border-bottom:1px solid var(--nav-line); }
.mobile-menu a:last-child{ border:0; margin-top:14px; color:var(--on-accent); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:clamp(66px,12vw,132px) clamp(60px,9vw,110px); overflow:hidden; }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}
.hero__blob{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.5; }
.hero__blob--a{ width:540px; height:420px; top:-140px; left:-80px; background:var(--c1); animation:float1 14s ease-in-out infinite; }
.hero__blob--b{ width:480px; height:380px; top:-60px; right:-120px; background:var(--c2); animation:float2 17s ease-in-out infinite; }
:root[data-theme="dark"] .hero__blob{ opacity:.22; }
@keyframes float1{ 50%{ transform:translate(60px,40px) scale(1.12); } }
@keyframes float2{ 50%{ transform:translate(-50px,60px) scale(1.08); } }

.hero__inner{ position:relative; }
.hero__title{ font-size:clamp(38px,7.6vw,88px); font-weight:700; letter-spacing:-.03em; margin-bottom:28px; }
.caret{ color:var(--accent); animation:blink 1.2s steps(1) infinite; margin-left:2px; }
.hero__lead{ color:var(--muted); font-size:clamp(16px,1.9vw,19.5px); max-width:640px; margin-bottom:38px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(48px,8vw,82px); }

.hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hero__stats > div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.hero__stats > div:nth-child(1){ --c:var(--c1); }
.hero__stats > div:nth-child(2){ --c:var(--c2); }
.hero__stats > div:nth-child(3){ --c:var(--c4); }
.hero__stats > div:hover{ transform:translateY(-5px) rotate(-.5deg); border-color:var(--c); box-shadow:var(--shadow); }
.hero__stats dt{ font-family:var(--font-display); font-weight:600; font-size:17.5px; margin-bottom:7px; color:var(--c); }
.hero__stats dd{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.55; }

/* ---------- Marquee ---------- */
.marquee{
  border-block:1px solid var(--line); background:var(--bg-alt);
  overflow:hidden; padding-block:15px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; align-items:center; gap:26px; width:max-content; animation:slide 42s linear infinite; }
.marquee__track span{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em;
  color:var(--dim); text-transform:lowercase; white-space:nowrap;
}
.marquee__track i{ color:var(--accent); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Tarjetas de servicios ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.card{
  --c:var(--accent);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 28px 26px; position:relative; overflow:hidden;
  transition:border-color .25s ease, transform .28s cubic-bezier(.3,1.2,.5,1), box-shadow .28s ease;
}
.card:nth-child(1){ --c:var(--c1); } .card:nth-child(2){ --c:var(--c2); } .card:nth-child(3){ --c:var(--c3); }
.card:nth-child(4){ --c:var(--c4); } .card:nth-child(5){ --c:var(--c5); } .card:nth-child(6){ --c:var(--c6); }
.card::before{
  content:""; position:absolute; top:-70px; right:-70px; width:150px; height:150px; border-radius:50%;
  background:var(--c); opacity:.07; transition:opacity .3s ease, transform .4s ease;
}
.card:hover{ border-color:var(--c); transform:translateY(-6px) rotate(-.6deg); box-shadow:var(--shadow-lg); }
.card:hover::before{ opacity:.14; transform:scale(1.25); }
.card__num{
  display:inline-block; font-family:var(--font-mono); font-size:12px; color:var(--c);
  letter-spacing:.08em; margin-bottom:16px;
  border:1px solid currentColor; border-radius:99px; padding:2px 10px;
}
.card h3{ font-size:21px; margin-bottom:12px; }
.card p{ color:var(--muted); font-size:15px; margin-bottom:20px; }

.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags li{ font-family:var(--font-mono); font-size:11.5px; padding:4px 11px; border:1px solid var(--line); border-radius:99px; color:var(--dim); }

/* ---------- Para quién ---------- */
.who{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.who__item{
  --c:var(--accent);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 30px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.who__item:nth-child(1){ --c:var(--c1); }
.who__item:nth-child(2){ --c:var(--c3); }
.who__item:nth-child(3){ --c:var(--c5); }
.who__item:hover{ transform:translateY(-5px) rotate(.5deg); border-color:var(--c); box-shadow:var(--shadow); }
.who__item h3{ font-size:23px; margin-bottom:14px; }
.who__item h3::after{ content:"_"; color:var(--c); }
.who__item p{ color:var(--muted); font-size:15px; }

/* ---------- Herramientas: las dos modalidades de uso ---------- */
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:clamp(26px,4vw,42px); }
.mode{
  --c:var(--accent);
  position:relative; padding:26px 28px 26px 30px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.mode:nth-child(2){ --c:var(--c4); }
.mode::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c); }
.mode h3{ font-size:19px; margin-bottom:10px; color:var(--c); }
.mode p{ color:var(--muted); font-size:15px; }

/* ---------- Herramientas ---------- */
.products{ display:flex; flex-direction:column; gap:clamp(24px,4vw,40px); }
.product{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,4vw,48px);
}
.product:nth-child(1){ --c:var(--c1); } .product:nth-child(2){ --c:var(--c4); } .product:nth-child(3){ --c:var(--c2); }
.product--rev .product__body{ order:2; }
.product__kicker{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c); border:1px solid currentColor; border-radius:99px; padding:4px 12px; margin-bottom:16px;
}
.product__title{ font-size:clamp(26px,3.6vw,38px); font-weight:700; margin-bottom:16px; }
.product__body > p{ color:var(--muted); font-size:16px; margin-bottom:24px; }

.product__quote{
  margin:0 0 24px; padding:16px 20px;
  border-left:3px solid var(--c); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--tint);
  font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.45; color:var(--text);
}

.checks{ display:grid; gap:11px; }
.checks li{ position:relative; padding-left:27px; font-size:15px; color:var(--text); opacity:.92; }
.checks li::before{
  content:""; position:absolute; left:0; top:9px; width:12px; height:12px; border-radius:5px;
  border:1px solid var(--c);
  background:var(--tint);                                   /* respaldo navegadores viejos */
  background:color-mix(in srgb, var(--c) 16%, transparent);
}

/* mockups */
.product__visual{ display:grid; }
.mock{
  background:var(--mock-bg); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-lg); transition:transform .35s ease;
}
.product:hover .mock{ transform:translateY(-4px) rotate(.7deg); }
.mock__bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--mock-bar); }
.mock__bar i{ width:8px; height:8px; border-radius:99px; background:var(--mock-el2); }
.mock__bar i:first-child{ background:var(--c5); opacity:.75; }
.mock__bar i:nth-child(2){ background:var(--c3); opacity:.75; }
.mock__bar i:nth-child(3){ background:var(--c1); opacity:.75; }
.mock__bar span{ font-family:var(--font-mono); font-size:11px; color:var(--dim); margin-left:10px; }

.mock__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:16px; }
.mock__col p{ font-family:var(--font-mono); font-size:9.5px; color:var(--dim); margin-bottom:9px; text-transform:uppercase; letter-spacing:.06em; }
.chip{ height:26px; border-radius:8px; background:var(--mock-el); border:1px solid var(--line); margin-bottom:7px; }
.chip--sm{ height:18px; opacity:.6; }
.chip--hot{ border-color:var(--c3); background:var(--tint); }
.chip--win{ border-color:var(--c1); background:var(--tint); }

.mock__chat{ padding:14px; display:grid; gap:8px; }
.thread{ display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--mock-el); }
.thread--on{ border-color:var(--c4); background:var(--tint); }
.dot{ width:11px; height:11px; border-radius:99px; flex:none; }
.dot--wa{ background:#25BF63; } .dot--ig{ background:#DD3E80; }
.dot--tg{ background:#2C9BDC; } .dot--web{ background:var(--dim); }
.lines{ display:grid; gap:6px; flex:1; }
.lines b{ display:block; height:7px; width:42%; background:var(--mock-el2); border-radius:99px; }
.lines em{ display:block; height:6px; width:76%; background:var(--mock-el); border-radius:99px; }

.mock__ai{ padding:26px 18px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; }
.node{
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--mock-el);
}
.node--core{ border-color:var(--c2); color:var(--c2); background:var(--tint); }
.node--out{ border-color:var(--c1); color:var(--c1); }
.wire{ width:30px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--line),var(--c2),var(--line)); }

/* ---------- Cómo trabajamos ----------
   Sin numerar: no es una secuencia de pasos sino una forma de trabajar.
   La intro queda fija mientras los bloques pasan al lado.
------------------------------------------------------------------ */
.approach{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,74px); align-items:start; }
.approach__intro{ position:sticky; top:100px; }
.approach__intro .section__title{ font-size:clamp(28px,4.4vw,46px); }

.approach__grid{ display:grid; }
.approach__item{ --c:var(--accent); padding:28px 0; border-top:1px solid var(--line); }
.approach__item:first-child{ border-top:0; padding-top:0; }
.approach__item:nth-child(1){ --c:var(--c1); } .approach__item:nth-child(2){ --c:var(--c4); }
.approach__item:nth-child(3){ --c:var(--c3); } .approach__item:nth-child(4){ --c:var(--c2); }
.approach__item h3{ font-size:21px; margin-bottom:11px; display:flex; align-items:center; gap:11px; }
.approach__item h3::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--c); flex:none;
  box-shadow:0 0 0 4px var(--tint);
}
.approach__item p{ color:var(--muted); font-size:15.5px; }

/* ---------- Zideral (oscuro en ambos temas) ---------- */
.zideral{
  --text:#EDEBE6; --muted:#9FA69C; --dim:#7E8A7A;
  --line:rgba(255,255,255,.12);
  --z1:#A6FF19; --z2:#4FE000;      /* verde eléctrico */

  position:relative; overflow:hidden; color:var(--text);
  padding-block:clamp(80px,12vw,150px);
  background:
    radial-gradient(ellipse 70% 55% at 78% 8%, rgba(166,255,25,.20), transparent 62%),
    radial-gradient(ellipse 60% 50% at 10% 96%, rgba(79,224,0,.12), transparent 60%),
    #060A05;
}
.zideral__stars{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 30px 40px, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 110px 90px, rgba(255,255,255,.30) 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 160px, rgba(255,255,255,.22) 50%, transparent 51%);
  background-size:190px 190px, 150px 150px, 220px 220px;
  animation:drift 90s linear infinite; opacity:.7;
}
@keyframes drift{ to{ background-position:190px 0, -150px 0, 110px 0; } }

.zideral__orbit{
  position:absolute; top:6%; right:-160px; width:430px; height:430px;
  border:1px solid rgba(166,255,25,.26); border-radius:50%; pointer-events:none;
  animation:spin 26s linear infinite;
}
.zideral__orbit::after{
  content:""; position:absolute; top:-6px; left:50%; width:11px; height:11px; border-radius:50%;
  background:var(--z1); box-shadow:0 0 20px 3px rgba(166,255,25,.6);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.zideral__inner{ position:relative; }
.zideral__head{ margin-bottom:clamp(36px,6vw,60px); }
.zideral__title{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.34em;
  font-size:clamp(46px,10vw,110px); font-weight:700; letter-spacing:-.04em; line-height:.95;
}
.zideral__name{
  background:linear-gradient(100deg,var(--z1) 10%,var(--z2) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* "by Praksys": pequeño junto al nombre, y el "by" aún más pequeño */
.zideral__by{
  /* proporcional al nombre, pero nunca por debajo de un tamaño legible */
  font-size:clamp(14px, .19em, 22px); font-weight:500; letter-spacing:.05em;
  color:var(--text); opacity:.75; white-space:nowrap;
}
.zideral__by i{ font-style:normal; font-size:.8em; opacity:.65; margin-right:.15em; }
.zideral__tag{
  font-family:var(--font-display); font-weight:500; font-size:clamp(16px,2.2vw,21px);
  color:var(--text); opacity:.75; margin-top:12px;
}

.zideral__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:start; }
.zideral__lead{ font-size:clamp(18px,2.3vw,24px); font-family:var(--font-display); font-weight:500; line-height:1.42; margin-bottom:20px; }
.zideral__lead strong{ color:var(--z1); font-weight:600; }
.zideral__text p{ color:var(--muted); font-size:16px; margin-bottom:18px; }
.zideral__ps{ border-left:2px solid var(--z1); padding-left:18px; font-size:15px !important; color:var(--text) !important; opacity:.85; }

.zideral__cards{ display:grid; gap:14px; }
.zideral__card{
  background:rgba(255,255,255,.03); border:1px solid rgba(166,255,25,.18); border-radius:var(--r);
  padding:24px 26px; transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.zideral__card:hover{ border-color:var(--z1); transform:translateX(6px) rotate(-.4deg); background:rgba(166,255,25,.07); }
.zideral__icon{ color:var(--z1); font-size:13px; display:block; margin-bottom:12px; }
.zideral__card h3{ font-size:19.5px; margin-bottom:9px; }
.zideral__card p{ color:var(--muted); font-size:14.5px; }

.zideral__foot{
  margin-top:clamp(36px,5vw,58px); padding-top:22px; border-top:1px solid rgba(166,255,25,.2);
  font-family:var(--font-mono); font-size:12.5px; color:var(--dim);
}

/* ---------- Stack ---------- */
.stack{ display:flex; flex-wrap:wrap; gap:10px; }
.stack li{
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
  padding:9px 18px; border:1px solid var(--line); border-radius:99px; background:var(--surface);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.stack li:nth-child(3n+1):hover{ border-color:var(--c1); color:var(--c1); }
.stack li:nth-child(3n+2):hover{ border-color:var(--c2); color:var(--c2); }
.stack li:nth-child(3n+3):hover{ border-color:var(--c3); color:var(--c3); }
.stack li:hover{ transform:translateY(-3px) rotate(-1deg); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:12px; }
.faq__item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; transition:border-color .2s ease; }
.faq__item[open]{ border-color:var(--accent); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:20px 24px;
  font-family:var(--font-display); font-weight:500; font-size:17px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; transition:color .2s ease;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; font-family:var(--font-mono); color:var(--accent); font-size:19px; flex:none; transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__item summary:hover{ color:var(--accent); }
.faq__item p{ padding:0 24px 22px; color:var(--muted); font-size:15px; max-width:70ch; }
.faq__item p a{ color:var(--c2); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Contacto ---------- */
.contact__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:start; }
.contact__list{ margin-top:32px; display:grid; gap:10px; }
.contact__list li{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 20px; display:flex; gap:18px; align-items:baseline;
}
.contact__list span{ font-family:var(--font-mono); font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; min-width:84px; }
.contact__list a{ color:var(--accent); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.contact__list a:hover{ border-bottom-color:var(--accent); }
.contact__list p{ color:var(--muted); font-size:15px; }

.form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3.4vw,38px); display:grid; gap:18px; box-shadow:var(--shadow);
}
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field .opt{ color:var(--dim); text-transform:none; letter-spacing:0; }
.field input,.field select,.field textarea{
  background:var(--input-bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 16px; font-size:15px; font-family:var(--font-body); font-weight:300; width:100%;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); background:var(--input-bg-focus); }
.field input.is-error,.field textarea.is-error{ border-color:var(--c5); }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 21px) 21px, calc(100% - 15px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.form__note{ font-size:14px; color:var(--muted); min-height:20px; text-align:center; }
.form__note.is-ok{ color:var(--accent); }
.form__note.is-bad{ color:var(--c5); }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-alt); padding-top:clamp(48px,7vw,78px); }
.footer__inner{ display:grid; grid-template-columns:1.2fr 1.8fr; gap:clamp(32px,5vw,60px); padding-bottom:50px; }
.footer__brand p{ color:var(--muted); font-size:15px; max-width:340px; margin-top:18px; }
.footer__nav{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:460px; }
.footer__nav h4{ font-size:12.5px; font-family:var(--font-mono); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.footer__nav a{ display:block; color:var(--muted); font-size:14.5px; padding:5px 0; transition:color .2s ease; }
.footer__nav a:hover{ color:var(--accent); }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  border-top:1px solid var(--line); padding-block:24px;
  font-family:var(--font-mono); font-size:12px; color:var(--dim);
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .contact__inner{ grid-template-columns:1fr; }
  .approach{ grid-template-columns:1fr; }
  .approach__intro{ position:static; }
  .modes{ grid-template-columns:1fr; }
  .zideral__grid{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .zideral__orbit{ display:none; }
}
@media (min-width:861px){
  .mobile-menu{ display:none !important; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .product{ grid-template-columns:1fr; }
  .product--rev .product__body{ order:0; }
  .hero__stats{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .footer__nav{ grid-template-columns:1fr 1fr; }
  .contact__list li{ flex-direction:column; gap:4px; }
  .mock__cols{ grid-template-columns:repeat(2,1fr); }
}

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