/* Estilos de la portada de oncloudstudio.com.

   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. */

: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}}
/* Trampa antispam del formulario. Se esconde fuera de pantalla en lugar de con display:none
   porque muchos bots detectan display:none y saltan el campo, que es justo lo contrario de
   lo que buscamos: queremos que lo rellenen. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* === Clases que sustituyen a los antiguos style="" en linea ================
   Cada una lleva la especificidad justa para ganarle a la regla que ya pintaba
   ese elemento. Ninguna necesita !important; si alguna vez hace falta uno aqui,
   es senal de que la regla de arriba deberia cambiar en su sitio. */

/* Entrada escalonada del hero.
   OJO: `.hero .enter` (0,2,0) usa el ATAJO `animation:`, que resetea
   animation-delay a 0. Una clase suelta (0,1,0) perderia y las cinco piezas
   entrarian a la vez en lugar de una detras de otra. De ahi el `.hero .enter.`
   delante, que sube la especificidad a (0,3,0). */
.hero .enter.delay-05{animation-delay:.05s}
.hero .enter.delay-32{animation-delay:.32s}
.hero .enter.delay-52{animation-delay:.52s}
.hero .enter.delay-68{animation-delay:.68s}
.hero .enter.delay-90{animation-delay:.9s}

/* Acento por vertical de los rotulos del hero. `--a` solo se consume con
   var(): ninguna regla de esta hoja lo define, asi que no hay competencia. */
.vt-vfx{--a:#F5A24B}
.vt-anim{--a:#F06CA8}
.vt-vp{--a:#5BD1E0}

/* Cabecera de seccion centrada y sin tope de ancho.
   OJO: `.shead` (0,1,0) ya fija max-width y margin-bottom, asi que hace falta
   `.shead.shead-center` (0,2,0) para ganarle. */
.shead.shead-center{text-align:center;max-width:none;margin:0 auto 48px}

/* Frase de cierre del bloque "Desbloquea las barreras". */
.gain-closer{max-width:1100px;margin:40px auto 0;text-align:center;
  font-size:clamp(16px,2.1vw,23px);font-weight:800;letter-spacing:-.01em;
  color:#fff;line-height:1.35;text-wrap:balance}

/* Separacion del segundo parrafo de la columna de contacto.
   OJO: vive dentro de `.contact-side`, y `.contact-side .lead{margin:.6em 0}`
   es (0,2,0). Una clase suelta perderia y el parrafo se pegaria al anterior. */
.contact-side .lead.lead-gap{margin-top:14px}

/* Resalte en blanco dentro del cuerpo de los dialogos legales. */
.ink-strong{color:#fff}