/* Estilos de /preview/ (el recorrido de producto).

   Estaba en un <style> dentro del HTML. Se saca a fichero para que la CSP pueda
   prohibir el estilo en linea: mientras hiciera falta 'unsafe-inline' en
   style-src, la politica no frenaba la inyeccion de estilos (repintar la marca,
   tapar el formulario con una capa falsa, exfiltrar valores por selectores de
   atributo). Es el mismo motivo por el que el JavaScript ya vive en assets/js/.

   Por el mismo motivo los antiguos style="" del HTML son ahora clases; las que
   se anadieron para eso van agrupadas al final del fichero. */

/* Montserrat autoalojada. Antes se cargaba de fonts.googleapis.com / fonts.gstatic.com,
   lo que enviaba la IP de cada visitante a Google sin consentimiento y contradecía el
   banner de cookies del propio sitio ("no cargamos scripts de terceros que te rastreen").
   Son las fuentes variables (300-900) del subconjunto latino, servidas desde el mismo
   origen: 78 KB en dos ficheros en lugar de nueve estáticos. Licencia OFL en
   /assets/fonts/OFL.txt. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
  

  :root{
    --navy:#08192B; --navy2:#040D17; --panel:#0E2438; --panel2:#0b1c2e;
    --well:#06121F; --chrome:#0c2236;
    --ink:#EAF2FB; --muted:#8AA2BA; --line:#1E3A55; --body:#cdddec;
    --irid:linear-gradient(90deg,#FF7A59,#FFC24B,#3FC9B0,#36B7F0,#9A7BF5);
    --tesseris:#36B7F0; --nerya:#3FC9B0; --auriga:#9A7BF5;
    --gold:#F5A24B;
    --ease:cubic-bezier(.22,.61,.36,1);
    --r-card:12px; --r-pill:30px; --r-badge:8px;
    --maxw:1180px;
    --font:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:78px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;font-family:var(--font);background:#040D17;color:var(--ink);line-height:1.55;
    font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;overflow-x:hidden}
  a{color:inherit}

  /* language visibility (default ES; EN hidden until chosen) */
  :root:not([data-lang="en"]) [data-l="en"]{display:none}
  :root[data-lang="en"] [data-l="es"]{display:none}

  /* aurora + vignette */
  .aurora{position:fixed;inset:-22%;z-index:-2;filter:blur(120px);opacity:.42;pointer-events:none}
  .blob{position:absolute;width:760px;height:760px;border-radius:50%;mix-blend-mode:screen;will-change:transform}
  .b1{background:radial-gradient(circle,#234a9e,transparent 60%);left:6%;top:2%;animation:aur1 74s linear infinite}
  .b2{background:radial-gradient(circle,#2f9fd8,transparent 60%);right:2%;top:-6%;animation:aur2 91s linear infinite}
  .b3{background:radial-gradient(circle,#2a7fae,transparent 60%);left:30%;bottom:-16%;animation:aur3 83s linear infinite}
  .b4{background:radial-gradient(circle,#6f3d86,transparent 62%);right:14%;bottom:-4%;opacity:.7;animation:aur4 102s linear infinite}
  @keyframes aur1{0%{transform:translate(0,0) scale(1)}25%{transform:translate(220px,90px) scale(1.12)}50%{transform:translate(60px,200px) scale(.96)}75%{transform:translate(-150px,80px) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
  @keyframes aur2{0%{transform:translate(0,0) scale(1.05)}25%{transform:translate(-200px,120px) scale(.92)}50%{transform:translate(-80px,-120px) scale(1.1)}75%{transform:translate(120px,40px) scale(1)}100%{transform:translate(0,0) scale(1.05)}}
  @keyframes aur3{0%{transform:translate(0,0) scale(1)}25%{transform:translate(180px,-120px) scale(1.15)}50%{transform:translate(-60px,-40px) scale(.95)}75%{transform:translate(-160px,-150px) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
  @keyframes aur4{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-160px,-100px) scale(1.12)}50%{transform:translate(80px,-60px) scale(.94)}75%{transform:translate(60px,120px) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
  @media (prefers-reduced-motion:reduce){.blob{animation:none}}
  .vig{position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(75% 60% at 50% 30%,transparent 40%,rgba(4,13,23,.5) 100%),
      radial-gradient(120% 90% at 50% 120%,rgba(4,13,23,.7),transparent 55%)}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .kicker{font-size:12px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
  .irid-text{background:var(--irid);-webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{font-size:clamp(14px,1.55vw,17.5px);font-weight:400;color:var(--body);line-height:1.65}
  .lead b{color:#fff;font-weight:600}

  /* marks */
  .brand-logo{height:32px;width:auto;display:block}

  /* nav */
  header.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);
    background:rgba(4,13,23,.72);border-bottom:1px solid var(--line)}
  .nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:18px}
  .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
  .nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
  .nav-links a:not(.btn){text-decoration:none;color:var(--muted);font-size:14px;font-weight:600}
  .nav-links a:not(.btn):hover{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:14.5px;font-weight:700;
    padding:10px 19px;border-radius:10px;text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:transform .12s var(--ease),filter .2s,background .2s,border-color .2s;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-cta{background:var(--tesseris);color:#08131f;font-weight:800}
  .btn-cta:hover{filter:brightness(1.09)}
  .btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--tesseris);color:#fff}
  .langtog{display:inline-flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.04);flex:none}
  .langtog button{background:none;border:none;cursor:pointer;font-family:var(--font);font-size:11.5px;font-weight:800;
    letter-spacing:.06em;color:var(--muted);padding:6px 11px;transition:background .2s,color .2s}
  .langtog button.on{background:var(--tesseris);color:#08131f}
  @media (max-width:820px){.nav-links a:not(.btn){display:none}}
  @media (max-width:480px){
    .nav-in{padding:11px 16px;gap:10px}
    .brand-logo{height:24px}
    .nav-links{gap:10px}
    .langtog button{padding:5px 8px;font-size:10.5px}
    .nav-links .btn-cta{padding:9px 13px;font-size:12.5px}
  }

  /* hero */
  .hero{position:relative;min-height:94vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:64px 0 96px}
  .hero-badge-wrap{position:relative;display:inline-block;isolation:isolate;margin-bottom:30px}
  .hero-badge-wrap::before{content:"";position:absolute;inset:-24%;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(63,201,176,.30),rgba(54,183,240,.22) 42%,transparent 66%);filter:blur(38px);animation:glowPulse 5.5s ease-in-out infinite}
  .hero-logo{position:relative;z-index:1;width:clamp(152px,21vw,236px);height:auto;display:block;filter:drop-shadow(0 22px 56px rgba(54,183,240,.34));animation:floaty 6.5s ease-in-out infinite}
  .hero .lede{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .hero-badges{justify-content:center}
  .hero h1{max-width:20ch}
  .hero-sub{font-size:clamp(14px,1.7vw,18px);font-weight:600;color:var(--tesseris);margin:-6px auto 32px;max-width:52ch}
  .claims{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:2px auto 30px;max-width:640px}
  .claims .cl{display:inline-flex;align-items:center;gap:9px;font-size:clamp(13px,1.5vw,15.5px);font-weight:700;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:30px;padding:9px 17px}
  .claims .cl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tesseris);flex:none}
  .vert-tags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 2px;margin:8px auto 34px;width:100%}
  .vert-tags .vt{font-size:clamp(15px,2vw,22px);font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:0 clamp(12px,2vw,22px);color:var(--a)}
  .vert-tags .vdot{width:6px;height:6px;border-radius:50%;background:var(--line)}
  .engine-teaser{display:flex;flex-direction:column;align-items:center;gap:9px;margin:2px auto 32px}
  .engine-teaser .et-label{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .engine-teaser .et-names{display:inline-flex;align-items:center;gap:14px;font-size:clamp(19px,2.5vw,27px);font-weight:800;letter-spacing:-.01em}
  .engine-teaser .et-names .n{color:var(--nerya);text-shadow:0 0 22px rgba(63,201,176,.35)}
  .engine-teaser .et-names .t{color:var(--tesseris);text-shadow:0 0 22px rgba(54,183,240,.35)}
  .engine-teaser .et-names .plus{color:var(--muted);font-weight:400;font-size:.82em}
  .value{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  @media (max-width:820px){.value{grid-template-columns:1fr 1fr;gap:26px}}
  @media (max-width:460px){.value{grid-template-columns:1fr}}
  .vitem{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:var(--shadow,0 1px 2px rgba(0,0,0,.3),0 18px 40px -24px rgba(0,0,0,.6));transition:border-color .25s var(--ease),transform .25s var(--ease)}
  .vitem:hover{border-color:color-mix(in srgb,var(--tesseris) 42%,var(--line));transform:translateY(-3px)}
  .value.gain .vic{background:rgba(63,201,176,.1);border-color:rgba(63,201,176,.3);color:var(--nerya)}
  .vitem .vic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:rgba(54,183,240,.1);border:1px solid rgba(54,183,240,.28);color:var(--tesseris)}
  .vitem h4{font-size:1.14rem;font-weight:800;margin:0;color:#fff;letter-spacing:-.01em;line-height:1.2}
  .engines-beat{text-align:center}
  .engines-beat .eb-label{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
  .engines-beat .eb-names{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:26px;font-weight:900;letter-spacing:-.02em;font-size:clamp(34px,7vw,66px);margin:16px 0 18px}
  .engines-beat .eb-names .n{color:var(--nerya);text-shadow:0 0 46px rgba(63,201,176,.45)}
  .engines-beat .eb-names .t{color:var(--tesseris);text-shadow:0 0 46px rgba(54,183,240,.45)}
  .engines-beat .eb-names .plus{color:var(--muted);font-weight:300;font-size:.7em}
  .engines-beat .eb-hint{color:var(--muted);font-size:clamp(14px,1.6vw,16px)}
  .eb-units{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:22px;margin:20px 0 20px}
  .eb-unit{display:inline-flex;align-items:center;gap:15px}
  .eb-unit img{width:clamp(46px,6.2vw,64px);height:auto;display:block;filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
  .eb-unit .nm{font-weight:900;letter-spacing:-.02em;font-size:clamp(32px,6.4vw,60px)}
  .eb-unit .nm.n{color:var(--nerya);text-shadow:0 0 46px rgba(63,201,176,.5)}
  .eb-unit .nm.t{color:var(--tesseris);text-shadow:0 0 46px rgba(54,183,240,.5)}
  .eb-units .plus{color:var(--muted);font-weight:300;font-size:clamp(26px,5vw,46px)}
  .hero .enter{opacity:0;transform:translateY(28px);animation:heroUp .9s var(--ease) forwards}
  @keyframes heroUp{to{opacity:1;transform:none}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  @keyframes glowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
  .scrollcue{position:absolute;bottom:20px;left:50%;margin-left:-13px;width:26px;height:40px;border:2px solid var(--muted);border-radius:13px;opacity:.5}
  .scrollcue::before{content:"";position:absolute;left:50%;top:7px;margin-left:-2px;width:4px;height:7px;border-radius:2px;background:var(--muted);animation:cue 1.7s var(--ease) infinite}
  @keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}65%{opacity:1;transform:translateY(11px)}100%{opacity:0;transform:translateY(13px)}}
  @media (prefers-reduced-motion:reduce){.hero .enter{opacity:1;transform:none;animation:none}.hero-logo,.hero-badge-wrap::before,.scrollcue::before{animation:none}}
  .hero .badge{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:var(--body);
    background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:30px;padding:7px 15px}
  .hero .badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--tesseris);
    box-shadow:0 0 0 0 rgba(54,183,240,.6);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(54,183,240,.55)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .hero h1{font-size:clamp(40px,7.4vw,86px);font-weight:900;letter-spacing:-.03em;line-height:1.02;
    margin:.42em 0 .32em;max-width:19ch;width:100%;text-wrap:balance}
  .hero .lede{max-width:60ch;margin:0 0 34px;font-size:clamp(15px,1.9vw,20px)}
  .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-top:4px;width:100%}
  .cta-row .btn{font-size:15.5px;padding:13px 24px}
  .hero-badges{margin-top:52px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:13px}
  .hero-badges .sep{width:1px;height:26px;background:var(--line)}
  .engine-tag{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);font-size:13.5px}
  .engine-tag i{width:9px;height:9px;border-radius:50%;background:var(--a);display:block;flex:none}

  /* section shell */
  section.blk{padding:82px 0;position:relative}
  section.blk+section.blk::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:var(--line)}
  .shead{max-width:62ch;margin-bottom:44px}
  .shead h2{font-size:clamp(30px,4.6vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.05;
    margin:.3em 0 .3em;text-wrap:balance}
  .shead .lead{max-width:60ch}

  /* engines */
  .engines{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:720px){.engines{grid-template-columns:1fr}}
  .engine{background:var(--panel);border:1px solid var(--line);border-top:2.5px solid var(--a);
    border-radius:var(--r-card);padding:26px 26px 28px;position:relative;overflow:hidden}
  .engine::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;pointer-events:none;
    background:radial-gradient(80% 100% at 15% 0%,color-mix(in srgb,var(--a) 16%,transparent),transparent 70%)}
  .engine .emark{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;position:relative;
    background:color-mix(in srgb,var(--a) 15%,transparent);border:1px solid color-mix(in srgb,var(--a) 45%,transparent);margin-bottom:16px}
  .emark.brandmark{width:54px;height:54px;background:none;border:none;place-items:center}
  .emark.brandmark img{width:54px;height:54px;display:block;object-fit:contain}
  .engine .ename{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
  .engine h3{font-size:1.5rem;font-weight:900;letter-spacing:-.01em;margin:0;color:#fff}
  .engine .role{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--a)}
  .engine p{color:var(--body);font-size:14.5px;margin:12px 0 16px;line-height:1.6}
  .engine .feats{display:flex;flex-wrap:wrap;gap:7px}
  .engine .feats span{font-size:11px;font-weight:600;color:var(--body);background:rgba(255,255,255,.05);
    border:1px solid var(--line);border-radius:30px;padding:5px 12px}

  /* problem / solution */
  .pscols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
  @media (max-width:720px){.pscols{grid-template-columns:1fr}}
  .pscol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 28px}
  .pscol.reto{border-top:2.5px solid #FF7A59}
  .pscol.sol{border-top:2.5px solid var(--tesseris)}
  .pscol .lab{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
  .pscol.reto .lab{color:#FF7A59}
  .pscol.sol .lab{color:var(--tesseris)}
  .pscol ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
  .pscol li{padding-left:24px;position:relative;font-size:14.5px;line-height:1.5}
  .pscol.reto li{color:var(--muted)}
  .pscol.sol li{color:var(--body)}
  .pscol li b{color:#fff;font-weight:700}
  .pscol.reto li::before{content:"\00d7";position:absolute;left:0;top:-1px;color:#FF7A59;font-weight:800;font-size:16px}
  .pscol.sol li::before{content:"\2192";position:absolute;left:0;color:var(--tesseris);font-weight:800}

  /* launch band */
  .launch-band{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;
    padding:56px 30px;position:relative;overflow:hidden}
  .launch-band::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--irid)}
  .lb-date{font-size:clamp(42px,7.5vw,76px);font-weight:900;letter-spacing:-.02em;margin:16px 0 12px;color:#fff}
  .lb-diamond{display:inline-block;width:18px;height:18px;background:#fff;border:2.5px solid var(--gold);
    transform:rotate(45deg);margin-right:16px;vertical-align:middle}
  .launch-band .lead{max-width:50ch;margin:0 auto 26px}
  .launch-band .btn{font-size:15.5px;padding:13px 26px}

  /* contact */
  .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
  @media (max-width:780px){.contact-grid{grid-template-columns:1fr;gap:30px}}
  .contact-side h2{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.06;margin:.3em 0 .35em}
  .contact-side .lead{margin:.6em 0}
  .direct{margin-top:24px;font-size:14px;color:var(--muted)}
  .direct a{color:var(--tesseris);font-weight:700;text-decoration:none}
  form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:var(--ink)}
  .field label .req{color:var(--tesseris)}
  .field input,.field textarea{width:100%;font-family:var(--font);font-size:15px;color:var(--ink);
    background:var(--well);border:1px solid var(--line);border-radius:9px;padding:12px 13px;
    transition:border-color .18s,box-shadow .18s}
  .field input::placeholder,.field textarea::placeholder{color:#5c728a}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--tesseris);
    box-shadow:0 0 0 3px rgba(54,183,240,.16)}
  .field textarea{resize:vertical;min-height:98px}
  .consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:2px 0 18px;line-height:1.5}
  .consent input{margin-top:2px;accent-color:var(--tesseris);width:17px;height:17px;flex:none}
  .consent a{color:var(--tesseris);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .basic-info{margin:0 0 18px;padding:12px 14px;background:var(--well);border:1px solid var(--line);border-radius:9px;font-size:11.5px;line-height:1.6;color:var(--muted)}
  .basic-info b{color:#fff}
  .basic-info a{color:var(--tesseris);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  form .btn-cta{width:100%;justify-content:center;font-size:15.5px;padding:14px}
  .form-ok{display:none;margin-top:14px;background:rgba(63,201,176,.14);border:1px solid rgba(63,201,176,.4);
    color:var(--body);border-radius:9px;padding:14px 16px;font-size:14px}
  .form-ok.show{display:block}
  .form-ok b{color:#5fe0c7}
  .form-ok a{color:var(--tesseris)}

  /* footer */
  footer.ft{border-top:1px solid var(--line);background:rgba(6,18,31,.5)}
  .ft-in{max-width:var(--maxw);margin:0 auto;padding:44px 28px 30px;display:flex;flex-wrap:wrap;gap:30px 44px}
  .ft-brand{max-width:300px}
  .ft-brand p{color:var(--muted);font-size:13.5px;margin:14px 0 0;line-height:1.6}
  .ft-links{display:flex;flex-wrap:wrap;gap:10px 44px;margin-left:auto}
  .ft-col h5{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 13px}
  .ft-col a{display:block;color:var(--body);opacity:.8;text-decoration:none;font-size:14px;padding:4px 0;cursor:pointer}
  .ft-col a:hover{opacity:1;color:#fff}
  .ft-legal{max-width:var(--maxw);margin:0 auto;padding:16px 28px 30px;border-top:1px solid var(--line);
    color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:6px 20px;opacity:.75}

  /* dialogs */
  dialog{border:1px solid var(--line);border-radius:14px;padding:0;max-width:680px;width:calc(100% - 32px);
    background:var(--navy);color:var(--ink);box-shadow:0 40px 100px -20px rgba(0,0,0,.7)}
  dialog::backdrop{background:rgba(2,8,15,.66);backdrop-filter:blur(3px)}
  .dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;
    border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--navy)}
  .dlg-h h3{margin:0;font-size:1.12rem;font-weight:800;color:#fff}
  .dlg-x{background:none;border:none;cursor:pointer;color:var(--muted);font-size:24px;line-height:1;padding:2px 8px;border-radius:8px}
  .dlg-x:hover{background:var(--panel);color:#fff}
  .dlg-b{padding:22px 24px 28px;max-height:70vh;overflow-y:auto;font-size:14px;line-height:1.62;color:var(--body)}
  .dlg-b h4{color:#fff;font-size:.98rem;font-weight:800;margin:1.5em 0 .3em}
  .dlg-b h4:first-child{margin-top:0}
  .dlg-b p{margin:.5em 0}
  .dlg-b ul{margin:.5em 0;padding-left:1.2em}.dlg-b li{margin:.3em 0}
  .dlg-b a{color:var(--tesseris)}
  .dlg-b code{font-family:ui-monospace,Menlo,monospace;font-size:.85em;background:var(--panel);padding:.1em .4em;border-radius:5px;color:#fff}
  .dlg-b .ph{color:var(--gold);font-size:.9em;font-style:italic}

  /* cookie banner */
  .cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy);
    border-top:1px solid var(--line);box-shadow:0 -14px 50px -18px rgba(0,0,0,.6);padding:16px 28px;display:none}
  .cookie.show{display:block}
  .cookie-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
  .cookie p{margin:0;font-size:13px;color:var(--muted);flex:1 1 340px;line-height:1.5}
  .cookie p a{color:var(--tesseris);text-decoration:underline;cursor:pointer}
  .cookie .c-actions{display:flex;gap:10px;flex-wrap:wrap}
  .cookie .btn{font-size:13.5px;padding:9px 17px}

  .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}


/* ── Preview-specific components ──────────────────────────────────────────── */









/* ---- reveal-on-scroll ---- */
.reveal{opacity:0;transform:translateY(46px);
 transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.wrap.center{text-align:center}
.kicker{font-size:12px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:var(--muted)}
.big{font-size:clamp(34px,6vw,68px);font-weight:900;line-height:1.02;letter-spacing:-1px;margin:14px 0 18px}
.big span{background:var(--irid);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(14px,1.5vw,17px);font-weight:400;color:#cdddec;max-width:680px;margin:0 auto;line-height:1.65}
.lead b{color:#fff}
.center .lead{margin-inline:auto}

/* ---- hero ---- */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;padding:90px 28px 60px;position:relative}
.hero-in{max-width:840px}
.hero-badge{width:84px;height:84px;margin-bottom:22px;filter:drop-shadow(0 16px 44px rgba(54,183,240,.3))}
.hero-kic{font-size:12px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:var(--muted);transition-delay:.05s}
.hero h1{font-size:clamp(46px,9vw,104px);font-weight:900;letter-spacing:-2px;line-height:1;margin:12px 0 6px;
 background:var(--irid);-webkit-background-clip:text;background-clip:text;color:transparent;transition-delay:.1s}
.hero-sub{font-size:clamp(14px,1.7vw,18px);color:#cdddec;max-width:600px;margin:14px auto 0;line-height:1.6;transition-delay:.18s}
.hero-eng{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px;transition-delay:.26s}
.hero-eng>span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;font-weight:800;color:#fff;
 background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:14px 22px;min-width:150px;
 backdrop-filter:blur(6px)}
.hero-eng img{width:30px;height:30px;margin-bottom:5px}
.hero-eng em{width:30px;height:30px;border-radius:8px;background:#9A7BF5;color:#0a0a12;font-style:normal;
 font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:5px}
.hero-eng i{font-style:normal;font-size:10px;font-weight:500;color:var(--muted)}
.hero-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:26px;transition-delay:.34s}
.hero-chips span{font-size:10.5px;font-weight:600;color:#cdddec;background:rgba(255,255,255,.05);
 border:1px solid var(--line);border-radius:30px;padding:6px 14px}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;
 letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue span{width:22px;height:34px;border:2px solid var(--line);border-radius:13px;position:relative}
.scrollcue span::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;
 background:var(--muted);transform:translateX(-50%);animation:cue 1.7s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:0;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,9px)}}

/* ---- bands ---- */
.band{padding:18vh 0}
.band .big{margin-top:16px}

/* ---- chapters ---- */
.chapter{padding:12vh 0}
.chead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);
 padding-bottom:26px;margin-bottom:7vh}
.chead-icon{width:58px;height:58px;border-radius:15px;background:color-mix(in srgb,var(--a) 16%,transparent);
 border:1px solid var(--a);display:flex;align-items:center;justify-content:center;flex:none}
.chead-icon img{width:34px;height:34px}
.chead-kic{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--a)}
.chead-name{font-size:clamp(32px,4.5vw,52px);font-weight:900;color:#fff;line-height:1}
.chead-tag{margin-left:auto;max-width:430px;font-size:13px;font-weight:500;color:var(--muted);line-height:1.55}

/* ---- feature rows ---- */
.feat{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;margin-bottom:9vh}
.feat.alt .feat-txt{order:2}
.feat.alt .feat-media{order:1}
.feat-kic{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--a);margin-bottom:12px}
.feat-txt h3{font-size:clamp(24px,3vw,38px);font-weight:900;color:#fff;line-height:1.08;letter-spacing:-.5px}
.feat-txt p{font-size:14px;font-weight:400;color:#cdddec;line-height:1.65;margin-top:14px;max-width:420px}

/* ---- act dividers (guide the eye into each beat) ---- */
.act{margin:9vh 0 3.5vh;padding-left:22px;border-left:3px solid var(--a);max-width:680px}
.act-kic{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--a)}
.act-head{font-size:clamp(22px,2.7vw,33px);font-weight:900;color:#fff;margin:9px 0 9px;line-height:1.12;letter-spacing:-.4px}
.act-sub{font-size:13.5px;font-weight:400;color:#cdddec;line-height:1.6}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:3vh}
.pair .card:nth-child(2){transition-delay:.1s}

/* ---- card / screen widget (NO traffic dots) ---- */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:zoom-in;
 box-shadow:0 16px 40px rgba(0,0,0,.45);position:relative;
 transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s}
.card:hover,.card:focus-visible{transform:translateY(-6px);border-color:color-mix(in srgb,var(--a) 55%,var(--line));
 box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--a) 40%,transparent)}
.card:focus{outline:none}
.cbar{height:34px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#0c2236;border-bottom:1px solid var(--line)}
.cbar .live{width:8px;height:8px;border-radius:50%;background:var(--a);flex:none;
 box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 70%,transparent);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.cbar .path{flex:1;font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .exp{font-size:13px;color:var(--muted);opacity:.55;transition:opacity .3s,color .3s}
.card:hover .exp,.card:focus-visible .exp{opacity:1;color:var(--a)}
.cimg{overflow:hidden;background:#06121f}
.cimg img{display:block;width:100%;height:210px;object-fit:cover;object-position:var(--pos,top);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.card.big .cimg img{height:340px}
.card:hover .cimg img{transform:scale(1.035)}
figcaption{padding:13px 16px;display:flex;flex-direction:column;gap:3px}
figcaption b{font-size:14px;font-weight:800;color:#fff;letter-spacing:.1px}
figcaption span{font-size:11.5px;font-weight:600;color:#AFC2D6;letter-spacing:.1px}
.feat-media .card{margin:0}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2vh}
.gallery .card:nth-child(2){transition-delay:.08s}
.gallery .card:nth-child(3){transition-delay:.16s}
.gallery .card:nth-child(5){transition-delay:.08s}
.gallery .card:nth-child(6){transition-delay:.16s}

/* ---- vision ---- */
.vision{padding:20vh 0 16vh}
.vcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1000px;margin:42px auto 0}
.vcards>div{background:var(--panel);border:1px solid var(--line);border-top:2.5px solid var(--a);
 border-radius:14px;padding:20px 18px;text-align:left}
.vcards>div:nth-child(2){transition-delay:.08s}.vcards>div:nth-child(3){transition-delay:.16s}
.vcards>div:nth-child(4){transition-delay:.24s}
.vcards b{font-size:16px;font-weight:800;color:#fff;display:block;margin-bottom:8px}
.vcards span{font-size:11.5px;font-weight:500;color:#C2D2E2;line-height:1.6}
.vfoot{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:48px;flex-wrap:wrap}
.vfoot img{height:28px}
.vfoot img.vfoot-mark{height:44px;width:auto}
.vfoot span{font-size:13px;font-weight:600;color:#cdddec}

/* ---- side index (minimal chapter rail) ---- */
.dotnav{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:40;
 display:flex;flex-direction:column;gap:30px;opacity:0;visibility:hidden;
 transition:opacity .55s ease,visibility .55s}
.dotnav.show{opacity:1;visibility:visible}
.dotnav::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:1px;
 background:linear-gradient(180deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.dotnav a{position:relative;display:flex;align-items:center;gap:13px;text-decoration:none}
.dotnav .dnum{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--muted);opacity:.45;
 width:14px;text-align:center;transition:opacity .3s,color .3s}
.dotnav .dot{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;flex:none;
 background:#0b1c2e;border:2px solid var(--line);transition:all .35s cubic-bezier(.22,.61,.36,1)}
.dotnav .dlabel{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
 color:var(--muted);opacity:0;transform:translateX(-7px);transition:all .35s;white-space:nowrap}
.dotnav a:hover .dlabel,.dotnav a.active .dlabel{opacity:1;transform:none}
.dotnav a:hover .dot{border-color:var(--d)}
.dotnav a.active .dnum{opacity:1;color:var(--d)}
.dotnav a.active .dot{border-color:var(--d);background:var(--d);
 box-shadow:0 0 0 4px color-mix(in srgb,var(--d) 20%,transparent)}
.dotnav a.active .dlabel{color:#fff}
@media (max-width:1180px){.dotnav{display:none}}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;
 opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s}
.lb.open{opacity:1;visibility:visible}
.lb-back{position:absolute;inset:0;background:rgba(3,9,16,.82);backdrop-filter:blur(10px)}
.lb-panel{position:relative;display:grid;grid-template-columns:1.55fr .9fr;gap:0;max-width:1180px;width:100%;
 max-height:92vh;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;
 box-shadow:0 50px 120px rgba(0,0,0,.7);transform:scale(.94);transition:transform .36s cubic-bezier(.22,.61,.36,1)}
.lb.open .lb-panel{transform:scale(1)}
.lb-img{background:#06121f;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-img img{width:100%;height:100%;max-height:92vh;object-fit:contain}
.lb-txt{padding:40px 38px;display:flex;flex-direction:column;justify-content:center;
 border-left:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.lb-kic{font-size:11px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent,#36B7F0);margin-bottom:14px}
.lb-title{font-size:30px;font-weight:900;color:#fff;line-height:1.08;letter-spacing:-.5px}
.lb-desc{font-size:14.5px;font-weight:400;color:#cdddec;line-height:1.7;margin-top:18px}
.lb-hint{font-size:10.5px;font-weight:600;color:var(--muted);margin-top:auto;padding-top:26px;letter-spacing:.5px}
.lb-x{position:absolute;top:14px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
 background:rgba(8,25,43,.7);color:#fff;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);
 transition:background .25s,transform .25s}
.lb-x:hover{background:rgba(54,183,240,.25);transform:rotate(90deg)}

@media (max-width:860px){
 .feat{grid-template-columns:1fr;gap:24px}.feat.alt .feat-txt,.feat.alt .feat-media{order:0}
 .gallery,.pair{grid-template-columns:1fr}.vcards{grid-template-columns:1fr 1fr}
 .lb-panel{grid-template-columns:1fr;max-height:94vh;overflow:auto}.chead-tag{margin-left:0}
 .hero-eng>span{min-width:130px}
}
@media (max-width:560px){.gallery,.vcards{grid-template-columns:1fr}}


/* Scroll offset for sticky nav */
html { scroll-padding-top: 78px }
/* Hero override: needs top padding for the sticky nav */
.hero { padding-top: 120px; min-height: calc(100vh - 78px) }
  

/* === Clases que sustituyen a los antiguos style="" en linea ================
   Casi todos eran variables CSS de encuadre y color de acento. Ninguna regla de
   esta hoja las DEFINE (solo las consumen con var()), asi que no hay pelea de
   especificidad: basta una clase plana. Se listan por nombre de producto y no
   por color para que anadir un capitulo no obligue a recordar el hex. */

/* Acento del capitulo y de todo lo que cuelga de el (cabecera, tarjetas,
   punto "live", sombra al pasar por encima…). */
.acc-oncloud{--a:#6EA8FF}
.acc-tesseris{--a:#36B7F0}
.acc-nerya{--a:#3FC9B0}
.acc-auriga{--a:#9A7BF5}
.acc-gold{--a:#F5A24B}

/* Acento del indice lateral. Es una variable aparte (--d) porque el indice esta
   fuera de los capitulos y no puede heredar la suya. */
.dot-oncloud{--d:#6EA8FF}
.dot-tesseris{--d:#36B7F0}
.dot-nerya{--d:#3FC9B0}

/* Encuadre de la captura dentro de la tarjeta: `.cimg img` usa
   object-position:var(--pos,top), asi que sin esta clase se recorta por arriba. */
.pos-center{--pos:center}

/* Boton "volver al inicio" de la barra, mas pequeno que el resto.
   OJO: `.btn` (0,1,0) fija font-size:14.5px; `.btn.btn-sm` es (0,2,0). */
.btn.btn-sm{font-size:13px}

/* Nombres de producto coloreados dentro del subtitulo del hero. */
.c-tesseris{color:var(--tesseris)}
.c-nerya{color:var(--nerya)}
.c-auriga{color:var(--auriga)}