/* ============================================================
   VECCHTELLIGENCE · estilos compartidos de páginas de producto
   Requiere tokens.css
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--v-ink-950);color:var(--v-text);font-family:var(--v-font);
  font-size:var(--v-t-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{line-height:1.08;letter-spacing:-.025em;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--v-maxw);margin:0 auto;padding-inline:var(--v-pad)}
.grad{background:var(--v-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--v-t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-gold);font-weight:600;margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--v-gradient)}

/* ---------- nav ---------- */
header{position:fixed;inset:0 0 auto;z-index:60;backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--v-ink-950) 80%, transparent);border-bottom:1px solid var(--v-line)}
nav{display:flex;align-items:center;gap:26px;height:66px}
.logo{display:flex;align-items:center}
.live{position:relative;display:block;line-height:0;width:150px;
  filter:drop-shadow(0 0 16px rgba(247,183,17,.26))}
.live img{display:block;width:100%;height:auto;animation:pulseLogo 6s ease-in-out infinite}
.live .lay{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:var(--src);mask-image:var(--src);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-mode:alpha;mask-mode:alpha}
.live .sheen{background:linear-gradient(100deg,transparent 41%,rgba(255,255,255,.9) 50%,transparent 59%);
  background-size:250% 100%;mix-blend-mode:screen;animation:sweepLogo 6.2s cubic-bezier(.35,0,.2,1) infinite}
@keyframes sweepLogo{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
@keyframes pulseLogo{0%,100%{filter:saturate(1.30) brightness(1.02)}50%{filter:saturate(1.60) brightness(1.10)}}
.back{margin-left:auto;font-size:.88rem;color:var(--v-muted);display:flex;align-items:center;gap:7px}
.back:hover{color:var(--v-gold)}
/* ---------- barra de navegación · ÚNICA para todo el sitio ----------
   Antes la home tenía su propia .navlinks (gap 26 / .9rem) y las internas
   .pnav (gap 22 / .89rem): se veían distintas al cambiar de página. */
.pnav{display:flex;gap:22px;margin-left:auto;font-size:.89rem;color:var(--v-muted)}
.pnav a{transition:color .2s;white-space:nowrap}
.pnav a:hover{color:var(--v-text)}
.pnav a[aria-current="page"]{color:var(--v-gold)}
.pnav+.lang{margin-left:22px}
@media(max-width:1200px){nav .btn{display:none}}   /* el CTA cede antes que los enlaces */
@media(max-width:1000px){.pnav{display:none}}
.lang{display:flex;border:1px solid var(--v-line-2);border-radius:var(--v-r-pill);overflow:hidden;
  font-size:var(--v-t-xs);font-weight:700}
.lang button{background:none;border:0;color:var(--v-dim);padding:6px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--v-gradient);color:#1B0D02}

/* ---------- hero con video ---------- */
.vhero{position:relative;min-height:92svh;display:flex;align-items:flex-end;padding-top:66px;overflow:hidden}
.vhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vhero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,9,13,.72) 0%,rgba(7,9,13,.32) 38%,rgba(7,9,13,.95) 100%)}
.vhero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(40px,7vw,86px)}
.vhero h1{font-size:clamp(2.5rem,6.4vw,5rem);font-weight:800;max-width:16ch;margin-bottom:18px}
.vhero p{font-size:clamp(1.02rem,1.5vw,1.24rem);color:#C9D2E0;max-width:56ch;margin:0 0 30px}
/* hero sin video */
.ghero{position:relative;min-height:84svh;display:flex;align-items:center;padding-top:66px;overflow:hidden;
  background:radial-gradient(1100px 620px at 72% 32%, rgba(242,107,31,.16), transparent 62%),
             linear-gradient(180deg,var(--v-ink-950),var(--v-ink-900))}
.ghero .wrap{position:relative;z-index:2;width:100%}
.ghero h1{font-size:clamp(2.4rem,6.2vw,4.8rem);font-weight:800;max-width:16ch;margin-bottom:18px}
.ghero p{font-size:clamp(1.02rem,1.5vw,1.24rem);color:var(--v-muted);max-width:56ch;margin:0 0 30px}
.badge-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--v-mono);font-size:10px;
  letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.55);border:1px solid var(--v-line-2);
  padding:6px 12px;border-radius:var(--v-r-pill);margin-bottom:20px}
.badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v-alert);
  animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- secciones ---------- */
section{padding:clamp(70px,9vw,128px) 0;position:relative}
section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;mask:radial-gradient(120% 80% at 50% 0%,#000 15%,transparent 78%)}
section>.wrap{position:relative;z-index:1}
.sec-head{max-width:62ch;margin-bottom:48px;position:relative}
.sec-head h2{font-size:var(--v-t-h2);font-weight:800;margin-bottom:14px}
.sec-head p{color:var(--v-muted);margin:0}
.sec-num{position:absolute;top:-4px;right:0;font-family:var(--v-mono);font-size:var(--v-t-xs);
  color:var(--v-dim);letter-spacing:.18em;opacity:.55}

/* ---------- zonas (3 anillos) ---------- */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.zones{grid-template-columns:1fr}}
.zone{padding:26px 24px;border-radius:var(--v-r-lg);border:1px solid var(--v-line);
  background:linear-gradient(160deg,var(--v-ink-850),var(--v-ink-900));position:relative;overflow:hidden}
.zone::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--zc)}
.zone .ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--zc);margin-bottom:16px;
  box-shadow:0 0 22px color-mix(in srgb,var(--zc) 55%,transparent)}
.zone h3{font-size:1.08rem;margin-bottom:8px}
.zone p{color:var(--v-muted);font-size:.92rem;margin:0 0 12px}
.zone .act{font-family:var(--v-mono);font-size:var(--v-t-xs);color:var(--zc);letter-spacing:.08em}

/* ---------- capacidades ---------- */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
  background:var(--v-line);border:1px solid var(--v-line);border-radius:var(--v-r-lg);overflow:hidden}
.cap{background:var(--v-ink-900);padding:26px 24px;transition:.3s}
.cap:hover{background:var(--v-ink-850)}
.cap em{font-style:normal;font-family:var(--v-mono);font-size:9.5px;color:var(--v-gold);
  letter-spacing:.14em;display:block;margin-bottom:11px}
.cap b{display:block;margin-bottom:6px;font-size:1rem}
.cap span{font-size:.88rem;color:var(--v-muted)}

/* ---------- hardware ---------- */
.hw{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
@media(max-width:900px){.hw{grid-template-columns:1fr}}
.hwlist{display:flex;flex-direction:column;gap:1px;background:var(--v-line);
  border:1px solid var(--v-line);border-radius:var(--v-r-md);overflow:hidden}
.hwlist div{background:var(--v-ink-850);padding:15px 18px;display:flex;justify-content:space-between;
  align-items:center;gap:16px}
.hwlist em{font-style:normal;font-family:var(--v-mono);font-size:10px;color:var(--v-dim);letter-spacing:.13em}
.hwlist b{font-size:.95rem;text-align:right}
.diagram{border:1px solid var(--v-line-2);border-radius:var(--v-r-lg);background:var(--v-ink-850);
  padding:22px;position:relative}
.diagram::before,.diagram::after{content:"";position:absolute;width:18px;height:18px;
  border-color:var(--v-gold);border-style:solid}
.diagram::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:var(--v-r-lg) 0 0 0}
.diagram::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 var(--v-r-lg) 0}

/* ---------- roadmap ---------- */
.road{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.road{grid-template-columns:1fr}}
.rd{padding:22px;border-radius:var(--v-r-md);border:1px solid var(--v-line);background:var(--v-ink-850);
  display:flex;gap:15px;align-items:flex-start}
.rd .st{font-family:var(--v-mono);font-size:9px;letter-spacing:.12em;padding:4px 8px;border-radius:5px;
  flex:none;margin-top:2px}
.st.now{background:rgba(47,212,138,.16);color:var(--v-ok);border:1px solid rgba(47,212,138,.4)}
.st.next{background:rgba(247,183,17,.14);color:var(--v-gold);border:1px solid rgba(247,183,17,.4)}
.rd b{display:block;font-size:.97rem;margin-bottom:4px}
.rd span{font-size:.88rem;color:var(--v-muted)}

/* ---------- métricas ---------- */
.mets{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid var(--v-line);padding-top:28px;margin-top:40px}
.met b{display:block;font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;letter-spacing:-.03em}
.met span{font-size:var(--v-t-xs);color:var(--v-dim);text-transform:uppercase;letter-spacing:.12em}

/* ---------- CTA + footer ---------- */
.cta{text-align:center;border-radius:var(--v-r-lg);padding:clamp(44px,7vw,82px) 26px;
  border:1px solid var(--v-line-2);background:var(--v-gradient-soft)}
.cta h2{font-size:var(--v-t-h2);font-weight:800;margin-bottom:14px}
.cta p{color:var(--v-muted);max-width:52ch;margin:0 auto 28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--v-r-pill);
  font-weight:600;font-size:.94rem;border:1px solid transparent;cursor:pointer;transition:.25s var(--v-ease)}
.btn-primary{background:var(--v-gradient);color:#1B0D02;box-shadow:var(--v-glow)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
footer{border-top:1px solid var(--v-line);padding:46px 0 38px;color:var(--v-dim);font-size:.88rem}

[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--v-ease-out),transform .8s var(--v-ease-out)}
[data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.live img,.live .sheen{animation:none}}