/* Innovative Global Tech · sitio v3 (Opus, 2026-11-06). Un sistema: tokens abajo, una tarjeta, un botón, un radio. */
:root{
  --g-main:#0A0D14; --g-alt:#0E1320; --g-panel:#121A2A;
  --ink:#EEF2F7; --muted:#9AA6BA; --line:rgba(238,242,247,.10); --line-2:rgba(238,242,247,.18);
  --accent:#4C8DFF; --accent-ink:#06101F; --silver:#CBD3DF; --deep:#2F5FB8;
  --nav:72px; --padt:120px; --padb:72px; --gut:80px; --hgap:48px; --hpadb:64px; --bar:0px;
  --r-lg:20px; --r-md:12px; --r-sm:8px; --r-btn:10px; --btn-h:44px;
  --t-h1:clamp(40px,2.6vw + 18px,60px); --t-h2:clamp(28px,1.2vw + 20px,40px); --t-h3:18px;
  --t-lead:clamp(17px,.35vw + 15px,20px); --t-body:16px; --t-small:14px; --t-label:13px;
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --f:'Geist',ui-sans-serif,system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
  color-scheme:dark;
}
@media (max-width:639px){:root{--nav:56px; --padt:96px; --padb:48px; --gut:24px; --hgap:40px; --hpadb:24px}}
@media (min-width:640px) and (max-width:1023px){:root{--gut:48px}}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:0; scroll-behavior:auto; -webkit-text-size-adjust:100%}
body{background:var(--g-main); color:var(--ink); font:400 var(--t-body)/1.6 var(--f); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:600; letter-spacing:-.025em; text-wrap:balance}
h1{font-size:var(--t-h1); line-height:1.05}
h2{font-size:var(--t-h2); line-height:1.12; max-width:24ch}
h2 .muted{display:block; color:var(--muted); font-weight:500}
h3{font-size:var(--t-h3); font-weight:600; line-height:1.3; letter-spacing:-.01em}
.muted{color:var(--muted)}
.wrap{width:min(100% - 2*var(--gut),1280px); margin-inline:auto; position:relative; z-index:1}
#cursor-fx{position:fixed; inset:0; pointer-events:none; z-index:50}

/* nav */
.nav{position:fixed; inset:0 0 auto; height:var(--nav); background:var(--g-main); border-bottom:1px solid var(--line); z-index:10}
.nav__row{height:100%; display:flex; align-items:center; gap:32px}
.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.skip:focus{width:auto; height:auto; clip-path:none; background:var(--accent); color:var(--accent-ink); padding:8px 12px; border-radius:var(--r-sm); z-index:20}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:17px; letter-spacing:-.01em; white-space:nowrap}
.logo__mark{width:28px; height:28px; color:var(--silver)}
.nav__links{display:flex; gap:28px; margin-left:auto}
.nav__links a{font-size:15px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__menu{display:none}
.hoja{position:fixed; inset:var(--nav) 0 0; background:var(--g-main); padding:8px var(--gut); display:flex; flex-direction:column}
.hoja[hidden]{display:none}
.hoja a{height:56px; display:flex; align-items:center; border-bottom:1px solid var(--line); text-decoration:none; font-size:18px; font-weight:500}
@media (max-width:1023px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
  .nav__menu{display:grid; place-content:center; gap:6px; width:44px; height:44px; border:1px solid var(--line-2); border-radius:var(--r-btn); background:transparent; cursor:pointer}
  .nav__menu span{display:block; width:18px; height:1.6px; background:var(--ink); transition:transform .2s var(--ease)}
  .nav__menu[aria-expanded="true"] span:first-child{transform:translateY(3.8px) rotate(45deg)}
  .nav__menu[aria-expanded="true"] span:last-child{transform:translateY(-3.8px) rotate(-45deg)}
}
@media (max-width:639px){.nav .nav__cta{display:none} .nav__menu{margin-left:auto} .logo span{font-size:16px}}

/* botones (uno solo, dos variantes) */
.btn{height:var(--btn-h); padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:var(--r-btn); font:500 16px/1 var(--f); text-decoration:none; white-space:nowrap; cursor:pointer; border:1px solid transparent; transition:transform .16s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease)}
.btn--primary{background:var(--accent); color:var(--accent-ink)}
.btn--secondary{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.card:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.m-arrow{width:16px; height:16px; transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{background:#6AA1FF; transform:translateY(-1px)}
  .btn--secondary:hover{border-color:var(--silver); transform:translateY(-1px)}
  .btn:hover .m-arrow{transform:translateX(3px)}
  .btn:active{transform:scale(.97)}
}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}
.link{text-decoration:none; color:var(--muted); background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .25s var(--ease), color .2s var(--ease)}
@media (hover:hover){.link:hover{color:var(--ink); background-size:100% 1px}}

/* secciones: una o dos pantallas */
main > section, footer.closing{height:calc(var(--h,1) * 100svh); padding:var(--padt) 0 calc(var(--padb) + var(--bar)); position:relative; overflow:clip}
.section--alt{background:var(--g-alt)}
.section h2{margin-bottom:48px}
@media (max-width:639px){main > section:not(.hero):not(.soluciones){height:calc(var(--hm,var(--h,1)) * 100lvh)} .section h2{margin-bottom:32px}}

/* hero */
.hero{padding-top:calc(var(--nav) + var(--hgap)) !important; padding-bottom:calc(var(--hpadb) + var(--bar)) !important; background:
  radial-gradient(60% 70% at 78% 45%, rgba(76,141,255,.14), transparent 70%), var(--g-main)}
.hero__grid{height:100%; display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:stretch}
.hero__text{grid-column:1 / span 6; display:flex; flex-direction:column; align-self:start; gap:24px; padding-top:8px}
.hero__text h1{max-width:13ch}
.hero__lead{font-size:var(--t-lead); line-height:1.55; color:var(--ink); opacity:.86; max-width:44ch}
.hero__stage{grid-column:7 / span 6; position:relative; min-height:0}
.hechos{list-style:none; margin:24px 0 0; padding:24px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:32px; color:var(--muted); font-size:var(--t-small)}
.hechos strong{display:block; color:var(--ink); font-size:22px; font-weight:600; letter-spacing:-.02em; margin-bottom:2px}
.caja__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.caja__poster{position:absolute; inset:0; background:center/contain no-repeat url("/assets/caja-poster.svg"); transition:opacity .5s var(--ease)}
[data-caja].vivo .caja__poster{opacity:0}
@media (max-width:1023px){
  .hero__grid{grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:16px}
  .hero__text,.hero__stage{grid-column:1}
  .hero__text{gap:20px}
  .hero__text h1{max-width:16ch}
}
@media (max-width:639px){
  .hero__text h1{font-size:clamp(34px,9vw,40px)}
  .hero .btn-row .btn{flex:1 1 100%}
  .hechos{grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px; padding-top:16px}
  .hechos strong{font-size:18px}
  .hechos li{font-size:13px; line-height:1.35}
}

/* soluciones: escena propia, sticky solo dentro de su sección */
.soluciones{padding:0 !important; background:var(--g-main)}
.soluciones__fijo{position:sticky; top:0; height:100svh; padding:var(--padt) 0 var(--padb)}
.soluciones__wrap{height:100%; display:flex; flex-direction:column; gap:24px}
.soluciones__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.leyenda{list-style:none; margin:0; padding:0; display:flex; gap:20px; font-size:var(--t-label); font-weight:500; color:var(--muted)}
.leyenda li{display:flex; align-items:center; gap:8px}
.leyenda li::before,.tile__estado::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--c)}
[data-estado="hoy"]{--c:var(--accent)} [data-estado="construyendo"]{--c:var(--silver)} [data-estado="estudio"]{--c:var(--deep)}
.soluciones__stage{position:relative; flex:1; min-height:0}
.tiles{list-style:none; margin:0; padding:0; position:absolute; inset:0; pointer-events:none}
.tile{position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:var(--r-md); background:rgba(14,19,32,.78); border:1px solid var(--line); opacity:0; transition:opacity .3s var(--ease); overflow:hidden; will-change:transform}
.tile.en{opacity:1}
.tile h3{font-size:16px}
.tile p{font-size:14px; line-height:1.45; color:var(--muted)}
.tile__estado{display:flex; align-items:center; gap:6px; font:500 12px/1 var(--mono); color:var(--muted)}
.ic-inline{display:inline-block; vertical-align:-2px; margin:0 3px 0 1px}
/* sin WebGL o con movimiento reducido: la grilla quieta */
.soluciones.quieta .tiles{position:static; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; height:100%; align-content:start}
.soluciones.quieta .tile{position:relative; opacity:1; transform:none; width:auto !important; height:auto !important}
.soluciones.quieta .caja__canvas{display:none}
@media (max-width:1023px){.soluciones.quieta .tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.tile p{display:none} .tile{padding:10px 12px} .tile h3{font-size:14px} .soluciones.quieta .tiles{gap:10px}}

/* formación */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.card{display:flex; flex-direction:column; gap:12px; padding:24px; min-height:300px; border-radius:var(--r-lg); background:var(--g-panel); border:1px solid var(--line); text-decoration:none; transition:transform .2s var(--ease), border-color .2s var(--ease)}
.card p{color:var(--muted)}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-2px); border-color:var(--line-2)}}
.diag{width:100%; height:auto; margin-bottom:auto; padding:12px 0 24px}
.diag .n{fill:var(--g-alt); stroke:var(--line-2); stroke-width:1.5}
.diag .n--on{stroke:var(--accent); fill:rgba(76,141,255,.15)}
.diag .l{fill:none; stroke:var(--line-2); stroke-width:1.5}
.diag .p{fill:var(--accent)}
.formacion__accion{margin-top:32px}
@media (max-width:1023px){.cards3{grid-template-columns:1fr; gap:12px} .card{min-height:0; padding:20px} .diag{display:none}}
@media (min-width:640px) and (max-width:1023px){.cards3{grid-template-columns:repeat(3,1fr)} .card{min-height:220px}}

/* método */
.pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.pasos li{display:flex; flex-direction:column; gap:12px; padding-top:24px; border-top:1px solid var(--line-2); min-height:170px}
.pasos__n{font:500 13px/1 var(--mono); color:var(--accent)}
.pasos p{color:var(--muted)}
@media (max-width:1023px){.pasos{grid-template-columns:repeat(2,1fr)} .pasos li{min-height:0; padding-bottom:16px}}
@media (max-width:639px){.pasos{grid-template-columns:1fr; gap:4px} .pasos li{flex-direction:row; flex-wrap:wrap; gap:4px 12px; padding:16px 0 12px} .pasos p{flex-basis:100%}}

.stack__t{margin:48px 0 16px; font-size:var(--t-label); font-weight:500; color:var(--muted)}
.caja__pausa{position:absolute; right:0; bottom:0; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-btn); border:1px solid var(--line-2); background:rgba(10,13,20,.6); color:var(--ink); cursor:pointer; transition:transform .16s var(--ease), border-color .2s var(--ease)}
.caja__pausa svg{width:16px; height:16px}
.caja__pausa:active{transform:scale(.97)}
@media (hover:hover){.caja__pausa:hover{border-color:var(--silver)}}
/* herramientas */
.stack{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8,1fr); gap:12px}
.stack li{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; height:128px; padding:18px; border-radius:var(--r-lg); background:var(--g-panel); border:1px solid var(--line); font-weight:500}
.stack img{width:auto; height:36px; max-width:64px; object-fit:contain}
.stack span{font-size:15px}
.stack .ic-ink{filter:invert(1)}
@media (max-width:1023px){.stack{grid-template-columns:repeat(4,1fr)} .stack li{height:104px; padding:14px} .pasos li{min-height:0}}
@media (max-width:639px){.stack{grid-template-columns:repeat(4,1fr); gap:8px} .stack li{height:76px; padding:10px; justify-content:center; align-items:center} .stack span{display:none} .stack img{height:28px} .stack__t{margin-top:24px} #metodo{--hm:1.25}}

/* cierre y pie */
.closing{background:var(--g-alt)}
.closing__wrap{height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:48px}
.closing__cierre{display:flex; flex-direction:column; gap:24px}
.closing__cierre h2{font-size:clamp(32px,2.2vw + 16px,52px); max-width:20ch}
.closing__lead{font-size:var(--t-lead); color:var(--muted); max-width:46ch}
.closing__dir{display:flex; flex-direction:column; gap:32px; padding-top:32px; border-top:1px solid var(--line)}
.closing__cols{display:grid; grid-template-columns:repeat(3,minmax(0,200px)); gap:24px}
.closing__cols div{display:flex; flex-direction:column; gap:10px; font-size:15px}
.closing__t{font-size:var(--t-label); font-weight:500; color:var(--ink)}
.legal{font-size:13px; line-height:1.6; color:var(--muted); max-width:110ch}
@media (max-width:639px){.closing{height:auto !important; min-height:100lvh} .closing__cols{grid-template-columns:repeat(2,1fr)} .closing .btn{width:100%}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important} .diag .p{display:none}}