*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#07111d;color:#f5f7fb;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden}body::selection{background:#00d4e0;color:#031018}:root{--bg:#07111d;--bg2:#0a1625;--panel:#0d1a2a;--panel2:#111f31;--cyan:#00d4e0;--cyan2:#39eff5;--amber:#ff8a00;--text:#f7f9fc;--muted:#9aa9ba;--line:rgba(255,255,255,.09);--line2:rgba(0,212,224,.24);--shadow:0 28px 90px rgba(0,0,0,.38)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}img{max-width:100%;display:block}.shell{width:min(1480px,calc(100% - 64px));margin:0 auto}.section{padding:118px 0}.page-noise{position:fixed;inset:0;pointer-events:none;z-index:-5;opacity:.17;background-image:radial-gradient(rgba(255,255,255,.25) .55px,transparent .55px);background-size:11px 11px;mask-image:linear-gradient(to bottom,black,transparent 78%)}.aurora{position:fixed;pointer-events:none;z-index:-4;border-radius:999px;filter:blur(110px);opacity:.14}.aurora-cyan{width:520px;height:520px;background:var(--cyan);top:-180px;right:2%}.aurora-orange{width:360px;height:360px;background:var(--amber);left:-180px;top:620px;opacity:.07}.stage-ribbon{position:fixed;z-index:100;left:50%;top:10px;transform:translateX(-50%);padding:7px 12px;border:1px solid rgba(255,138,0,.5);border-radius:999px;background:rgba(6,12,20,.92);color:#ffc174;font-size:9px;font-weight:800;letter-spacing:.18em;backdrop-filter:blur(12px)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:.25s}.site-header.scrolled{background:rgba(7,17,29,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.nav-shell{height:88px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:13px;margin-right:auto}.brand img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,212,224,.12))}.brand span{display:grid;line-height:1}.brand b{font-family:Orbitron,Inter,sans-serif;font-size:21px;letter-spacing:.19em}.brand small{font-size:6px;letter-spacing:.22em;color:var(--cyan);margin-top:6px}.nav-links{display:flex;align-items:center;gap:31px}.nav-links a{position:relative;color:#a8b5c4;font-size:13px;font-weight:600}.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--cyan);transition:.25s}.nav-links a:hover{color:#fff}.nav-links a:hover::after{right:0}.nav-cta{display:inline-flex;align-items:center;gap:12px;padding:11px 17px;border:1px solid rgba(0,212,224,.5);border-radius:999px;color:var(--cyan);font-size:12px;font-weight:800}.nav-cta:hover{background:rgba(0,212,224,.08)}.nav-toggle{display:none;border:0;background:transparent;padding:8px}.nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}
.hero{position:relative;padding:150px 0 72px;min-height:790px;background:radial-gradient(circle at 78% 25%,rgba(0,212,224,.09),transparent 28%),linear-gradient(to bottom,rgba(4,11,19,.2),rgba(7,17,29,0))}.hero::before{content:"";position:absolute;left:0;right:0;top:87px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,224,.17),transparent)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(470px,.84fr);gap:76px;align-items:center}.hero-copy{padding-top:14px}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.19em;border:1px solid rgba(0,212,224,.24);padding:8px 12px;border-radius:999px;background:rgba(0,212,224,.045)}.eyebrow>span{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}h1{font-family:Manrope,Inter,sans-serif;margin:26px 0 0;font-size:clamp(72px,6.25vw,108px);line-height:.91;letter-spacing:-.064em;font-weight:800;max-width:980px}.hero-line,.hero-accent{display:block}.hero-accent{margin-top:9px;color:transparent;background:linear-gradient(90deg,#fff 0%,#bafaff 21%,var(--cyan) 62%,#47eef3 100%);background-clip:text;-webkit-background-clip:text;text-shadow:0 0 48px rgba(0,212,224,.13)}.hero-lead{max-width:760px;margin:29px 0 0;color:#aeb9c6;font-size:18px;line-height:1.72}.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:33px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;padding:0 22px;border-radius:13px;font-size:13px;font-weight:800;transition:.22s}.btn-primary{background:var(--cyan);color:#041118;box-shadow:0 14px 35px rgba(0,212,224,.18)}.btn-primary:hover{transform:translateY(-2px);background:#34e6ed;box-shadow:0 18px 45px rgba(0,212,224,.24)}.btn-secondary{border:1px solid var(--line);background:rgba(255,255,255,.025);color:#d2dae3}.btn-secondary:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border-top:1px solid var(--line);max-width:780px}.hero-proof div{padding:17px 22px 0 0}.hero-proof div+div{border-left:1px solid var(--line);padding-left:22px}.hero-proof strong{display:block;color:var(--amber);font-size:9px;letter-spacing:.16em;margin-bottom:7px}.hero-proof span{display:block;color:#7f8fa1;font-size:11px;line-height:1.45}.hero-stage{min-height:520px;display:grid;place-items:center;position:relative}.stage-frame{position:relative;width:min(100%,560px);aspect-ratio:1.03;border:1px solid rgba(255,255,255,.105);border-radius:38px;background:linear-gradient(145deg,rgba(16,31,49,.86),rgba(6,13,23,.68));box-shadow:var(--shadow);overflow:visible}.stage-frame::before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.05);border-radius:28px}.stage-grid{position:absolute;inset:0;border-radius:inherit;opacity:.28;background-image:linear-gradient(rgba(0,212,224,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,224,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,black,transparent 74%)}.stage-axis{position:absolute;background:linear-gradient(90deg,transparent,rgba(0,212,224,.23),transparent)}.axis-x{left:8%;right:8%;top:50%;height:1px}.axis-y{top:8%;bottom:8%;left:50%;width:1px;background:linear-gradient(transparent,rgba(0,212,224,.23),transparent)}.logo-orbit{position:absolute;inset:18%;display:grid;place-items:center}.logo-orbit img{width:66%;position:relative;z-index:4;filter:drop-shadow(0 28px 34px rgba(0,0,0,.48));animation:logoFloat 6s ease-in-out infinite}.orbit{position:absolute;border:1px solid rgba(0,212,224,.24);border-radius:50%}.orbit-one{width:116%;height:48%;transform:rotate(-12deg)}.orbit-two{width:80%;height:112%;transform:rotate(23deg);border-color:rgba(255,138,0,.19)}.orbit-three{width:93%;height:93%;border-style:dashed;opacity:.38;animation:spin 22s linear infinite}.stage-card{position:absolute;z-index:7;width:196px;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:rgba(6,14,24,.90);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.28)}.stage-card small{display:block;color:var(--cyan);font-size:8px;letter-spacing:.17em;font-weight:800;margin-bottom:7px}.stage-card b{display:block;font-size:12px}.stage-card span{display:block;color:#7f8fa2;font-size:9px;margin-top:5px}.card-a{left:-35px;top:62px}.card-b{right:-42px;top:175px}.card-c{left:32px;bottom:-22px}.status-chip{position:absolute;right:23px;bottom:23px;display:flex;align-items:center;gap:8px;font-size:7.5px;font-weight:800;letter-spacing:.13em;color:#9aabba}.status-chip i{width:7px;height:7px;border-radius:50%;background:#4effa7;box-shadow:0 0 14px #4effa7}@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-11px) rotate(1deg)}}@keyframes spin{to{transform:rotate(360deg)}}.capability-bar{margin-top:62px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:22px;color:#687b90;font-size:9px;font-weight:800;letter-spacing:.17em}.capability-bar i{height:1px;flex:1;max-width:78px;background:rgba(255,255,255,.10)}
.section-kicker{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.19em}.section-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:90px;align-items:end;margin-bottom:48px}.section-head h2,.impact h2,.method h2,.difference h2,.contact h2{font-family:Manrope,Inter,sans-serif;font-size:clamp(42px,4.35vw,70px);line-height:1.02;letter-spacing:-.048em;margin:17px 0 0}.section-head h2 em,.impact h2 em,.method h2 em,.difference h2 em,.contact h2 em{font-style:normal;color:var(--cyan)}.section-head>p,.method-title>p,.impact-copy>p,.contact-copy>p{color:#98a8b9;font-size:16px;line-height:1.75;margin:0}.solutions{background:linear-gradient(to bottom,rgba(13,26,42,.52),rgba(7,17,29,0))}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.solution-card{position:relative;min-height:318px;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(16,30,47,.7),rgba(7,15,25,.78));overflow:hidden;transition:.25s}.solution-card::before{content:"";position:absolute;right:-80px;top:-80px;width:170px;height:170px;border-radius:50%;background:var(--cyan);filter:blur(70px);opacity:0;transition:.25s}.solution-card:hover{transform:translateY(-5px);border-color:rgba(0,212,224,.24)}.solution-card:hover::before{opacity:.12}.card-index{position:absolute;right:23px;top:20px;color:#5f7185;font-size:10px;letter-spacing:.15em}.card-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(0,212,224,.2);border-radius:12px;color:var(--cyan);font-family:Orbitron,monospace;font-weight:700}.solution-card h3{font-size:23px;letter-spacing:-.02em;margin:44px 0 13px}.solution-card p{color:#8f9fb0;font-size:14px;max-width:350px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:24px}.tags span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:#7f8fa2;font-size:9px}.solution-card.featured{border-color:rgba(255,138,0,.20);background:linear-gradient(145deg,rgba(255,138,0,.065),rgba(8,16,27,.8))}.solution-card.featured .card-icon{color:var(--amber);border-color:rgba(255,138,0,.24)}.solution-card.featured a{position:absolute;left:28px;bottom:28px;color:#ffc06d;font-size:12px;font-weight:800}.impact{padding-top:60px}.impact-panel{padding:66px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(125deg,rgba(0,212,224,.065),rgba(13,26,42,.7) 45%,rgba(255,138,0,.035));display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;box-shadow:var(--shadow)}.impact-copy>p{margin-top:24px}.impact-grid{display:grid;grid-template-columns:1fr 1fr;gap:29px 34px}.impact-grid>div{padding-top:18px;border-top:1px solid var(--line)}.impact-grid span{display:block;color:var(--amber);font-size:9px;letter-spacing:.15em;margin-bottom:9px}.impact-grid h3{font-size:20px;margin:0}.impact-grid p{color:#8797a9;font-size:13px;margin:8px 0 0}.method{background:radial-gradient(circle at 9% 50%,rgba(255,138,0,.055),transparent 25%)}.method-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:100px;align-items:start}.method-title{position:sticky;top:130px}.method-title>p{margin-top:23px;max-width:560px}.steps{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:31px 0;border-bottom:1px solid var(--line)}.step>span{color:var(--amber);font-size:10px;letter-spacing:.18em}.step h3{font-size:27px;margin:0 0 7px}.step p{color:#8d9cad;font-size:14px;margin:0}.difference{padding-top:55px}.difference-box{padding:66px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(140deg,rgba(13,26,42,.78),rgba(6,14,24,.9));display:grid;grid-template-columns:.95fr 1.05fr;gap:86px}.difference-list{display:grid;grid-template-columns:1fr 1fr;gap:32px}.difference-list>div{padding-top:17px;border-top:1px solid var(--line)}.difference-list b{font-size:13px}.difference-list p{color:#8696a9;font-size:13px;margin:8px 0 0}.contact{background:linear-gradient(to top,rgba(0,212,224,.04),transparent)}.contact-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:84px;align-items:start}.contact-copy>p{margin-top:25px;max-width:580px}.contact-links{margin-top:39px;display:grid}.contact-links a,.contact-location{display:grid;grid-template-columns:100px 1fr auto;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.contact-links small{color:var(--cyan);font-size:9px;letter-spacing:.16em}.contact-links strong{font-size:13px;overflow-wrap:anywhere}.contact-links span{color:var(--amber)}.contact-location{grid-template-columns:100px 1fr}.contact-form{padding:34px;border:1px solid var(--line);border-radius:27px;background:rgba(10,22,36,.78);box-shadow:var(--shadow)}.form-top{display:flex;align-items:center;gap:14px;margin-bottom:25px;color:#93a4b6;font-size:9px;font-weight:800;letter-spacing:.17em}.form-top i{height:1px;flex:1;background:var(--line)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:block;margin-bottom:15px}.contact-form label>span{display:block;color:#9bacbd;font-size:10px;letter-spacing:.10em;margin:0 0 7px 2px}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(255,255,255,.10);background:#091522;color:#fff;border-radius:12px;padding:13px 14px;outline:none;transition:.2s}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(0,212,224,.52);box-shadow:0 0 0 3px rgba(0,212,224,.055)}.contact-form textarea{resize:vertical;min-height:142px}.submit{border:0;width:100%}.form-status{min-height:22px;margin-top:12px;font-size:12px;color:#91a1b2}.form-status.success{color:#42e3d9}.form-status.error{color:#ffb363}.hp{position:absolute!important;left:-9999px!important;opacity:0!important}.footer{padding:54px 0 26px;border-top:1px solid var(--line);background:#06101b}.footer-main{display:grid;grid-template-columns:230px 1fr auto;gap:50px;align-items:center}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:48px;height:48px}.footer-brand span{display:grid;line-height:1}.footer-brand b{font-family:Orbitron,Inter,sans-serif;font-size:20px;letter-spacing:.18em}.footer-brand small{color:var(--cyan);font-size:6px;letter-spacing:.18em;margin-top:6px}.footer-main>p{color:#728398;font-size:13px;max-width:500px}.socials{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}.socials a{color:#91a0b0;font-size:12px}.socials a:hover{color:var(--cyan)}.footer-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#586a7d;font-size:9px;letter-spacing:.12em}.footer-bottom i{color:var(--amber);font-style:normal}.wa-float{position:fixed;right:23px;bottom:23px;z-index:35;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:var(--cyan);color:#041117;font-size:11px;font-weight:900;box-shadow:0 15px 35px rgba(0,212,224,.28)}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.reveal-delay{transition-delay:.1s}
@media(max-width:1240px){.shell{width:min(100% - 48px,1400px)}.hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(410px,.9fr);gap:52px}h1{font-size:clamp(66px,6vw,92px)}.stage-frame{width:min(100%,500px)}.stage-card{width:180px}.section-head{gap:55px}}
@media(max-width:1000px){.nav-links{display:none;position:absolute;left:24px;right:24px;top:78px;flex-direction:column;align-items:flex-start;padding:22px;background:#091522;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.nav-links.open{display:flex}.nav-toggle{display:block}.nav-cta{display:none}.hero{padding-top:128px;min-height:auto}.hero-grid,.section-head,.impact-panel,.method-grid,.difference-box,.contact-grid{grid-template-columns:1fr}.hero-grid{gap:58px}.hero-stage{min-height:520px}.hero-copy{max-width:880px}.solution-grid{grid-template-columns:1fr 1fr}.section-head{gap:24px}.impact-panel,.difference-box{gap:48px}.method-grid{gap:48px}.method-title{position:static}.footer-main{grid-template-columns:1fr}.socials{justify-content:flex-start}.capability-bar{overflow:auto;justify-content:flex-start;padding-bottom:6px}.capability-bar i{min-width:26px}}
@media(max-width:680px){.shell{width:calc(100% - 28px)}.section{padding:82px 0}.nav-shell{height:76px}.brand img{width:42px;height:42px}.brand b{font-size:18px}.brand small{font-size:5.4px}.hero{padding-top:112px;padding-bottom:50px}.eyebrow{font-size:8px;letter-spacing:.13em;padding:7px 9px}h1{font-size:clamp(50px,14vw,68px);line-height:.94;letter-spacing:-.055em}.hero-accent{margin-top:5px}.hero-lead{font-size:16px;line-height:1.65}.hero-actions{display:grid;grid-template-columns:1fr}.btn{width:100%}.hero-proof{grid-template-columns:1fr;margin-top:34px}.hero-proof div{padding:13px 0}.hero-proof div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}.hero-stage{min-height:390px;margin-top:28px}.stage-frame{width:92%;border-radius:28px}.stage-card{width:148px;padding:11px}.stage-card span{display:none}.card-a{left:-12px;top:36px}.card-b{right:-10px;top:138px}.card-c{left:15px;bottom:-16px}.status-chip{display:none}.capability-bar{margin-top:38px}.solution-grid{grid-template-columns:1fr}.solution-card{min-height:280px}.section-head h2,.impact h2,.method h2,.difference h2,.contact h2{font-size:40px}.impact-panel,.difference-box{padding:28px 22px;border-radius:25px}.impact-grid,.difference-list{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.contact-form{padding:23px 18px}.contact-links a,.contact-location{grid-template-columns:78px 1fr auto}.contact-location{grid-template-columns:78px 1fr}.footer-bottom{flex-direction:column;gap:9px}.stage-ribbon{top:auto;bottom:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.logo-orbit img,.orbit-three{animation:none}}

/* =========================================================
   TOPERA V2.1 - AJUSTE QUIRURGICO HERO DESKTOP
   Objetivo: conservar impacto visual, mejorar balance y
   mantener CTA completo en el primer viewport.
   ========================================================= */
@media(min-width:1241px){
  .hero{padding:132px 0 58px;min-height:748px}
  .hero-grid{grid-template-columns:minmax(0,1.24fr) minmax(455px,.76fr);gap:58px;align-items:center}
  .hero-copy{padding-top:4px}
  h1{margin-top:23px;font-size:clamp(74px,5.28vw,90px);line-height:.925;letter-spacing:-.057em;max-width:930px}
  .hero-accent{margin-top:6px}
  .hero-lead{max-width:790px;margin-top:24px;font-size:17px;line-height:1.64}
  .hero-actions{margin-top:27px}
  .hero-proof{margin-top:32px;max-width:820px}
  .hero-proof div{padding-top:14px}
  .hero-stage{min-height:486px}
  .stage-frame{width:min(100%,520px);border-radius:34px}
  .stage-frame::before{inset:16px;border-radius:25px}
  .stage-card{width:184px;padding:13px 14px}
  .card-a{left:-24px;top:58px}
  .card-b{right:-24px;top:166px}
  .card-c{left:28px;bottom:-15px}
  .status-chip{right:20px;bottom:20px}
  .capability-bar{margin-top:38px;padding-top:18px}
}

/* =========================================================
   TOPERA V2.2 - HERO ORBITAL / GLASS CARDS
   Implementación del diseño aprobado desktop + mobile.
   Mantiene el núcleo T libre, abre las cards hacia el borde
   y suma efectos orbitales sutiles, glassmorphism y parallax.
   ========================================================= */
.hero-stage{perspective:1200px}
.stage-frame{
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
  border-color:rgba(72,223,235,.16);
  background:
    radial-gradient(circle at 52% 45%,rgba(0,212,224,.08),transparent 34%),
    linear-gradient(145deg,rgba(12,29,46,.88),rgba(5,13,23,.72));
}
.stage-frame::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(0,212,224,.34),transparent 24%,transparent 72%,rgba(0,212,224,.13));
  opacity:.32;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  padding:1px;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.stage-glow{
  position:absolute;
  left:50%;top:48%;
  width:54%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,224,.18),rgba(0,212,224,.045) 42%,transparent 70%);
  filter:blur(14px);
  opacity:.62;
  pointer-events:none;
  animation:stageGlow 5.8s ease-in-out infinite;
}
.logo-orbit{inset:19.5%;transform-style:preserve-3d}
.logo-orbit img{
  width:64%;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(0,212,224,.10));
  will-change:transform;
}
.orbit{will-change:transform,opacity}
.orbit-one{
  width:124%;height:50%;
  border-color:rgba(0,212,224,.38);
  box-shadow:0 0 22px rgba(0,212,224,.05);
  animation:orbitTiltOne 15s ease-in-out infinite alternate;
}
.orbit-two{
  width:83%;height:122%;
  border-color:rgba(255,138,0,.30);
  box-shadow:0 0 20px rgba(255,138,0,.04);
  animation:orbitTiltTwo 18s ease-in-out infinite alternate;
}
.orbit-three{
  width:98%;height:98%;
  border-color:rgba(0,212,224,.28);
  opacity:.48;
  animation:spin 26s linear infinite;
}
.orbit-node{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  z-index:5;
  pointer-events:none;
}
.node-cyan{background:#27edf3;box-shadow:0 0 9px #27edf3,0 0 22px rgba(39,237,243,.75)}
.node-orange{background:#ff970e;box-shadow:0 0 10px #ff970e,0 0 24px rgba(255,151,14,.72)}
.node-one{left:-4%;top:24%;animation:nodePulse 2.6s ease-in-out infinite}
.node-two{right:-7%;top:39%;animation:nodePulse 2.9s .7s ease-in-out infinite}
.node-three{left:4%;bottom:12%;animation:nodePulse 3.1s 1.2s ease-in-out infinite}
.stage-connector{
  position:absolute;
  z-index:5;
  height:1px;
  pointer-events:none;
  transform-origin:left center;
  opacity:.58;
}
.connector-a{left:17%;top:28%;width:18%;background:linear-gradient(90deg,rgba(0,212,224,.16),rgba(0,212,224,.82));transform:rotate(18deg)}
.connector-b{right:15%;top:38%;width:18%;background:linear-gradient(90deg,rgba(255,138,0,.82),rgba(255,138,0,.12));transform:rotate(-12deg)}
.connector-c{left:18%;bottom:24%;width:19%;background:linear-gradient(90deg,rgba(0,212,224,.20),rgba(0,212,224,.78));transform:rotate(-23deg)}
.stage-card{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:start;
  column-gap:11px;
  width:218px;
  padding:15px 16px;
  border:1px solid rgba(119,236,244,.23);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(10,27,42,.76),rgba(4,13,23,.68));
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:
    0 18px 45px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 30px rgba(0,212,224,.035);
  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
  will-change:transform;
}
.stage-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 35%,transparent 70%,rgba(0,212,224,.035));
}
.stage-card:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(70,236,244,.46);
  background:linear-gradient(145deg,rgba(13,34,52,.84),rgba(5,16,27,.76));
  box-shadow:0 24px 55px rgba(0,0,0,.38),0 0 34px rgba(0,212,224,.08);
}
.stage-card-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  color:var(--cyan2);
  filter:drop-shadow(0 0 10px rgba(0,212,224,.22));
}
.stage-card-icon.amber{color:#ff9d18;filter:drop-shadow(0 0 10px rgba(255,157,24,.22))}
.stage-card-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stage-card-copy{min-width:0}
.stage-card small{font-size:8px;margin:1px 0 6px;letter-spacing:.18em}
.stage-card b{font-size:13px;line-height:1.28;letter-spacing:-.015em}
.stage-card span{font-size:9px;line-height:1.45;margin-top:6px;color:#8b9bad}
.card-b small{color:#ff9d18}
/* Abrimos las cards del centro: el isotipo queda completamente libre. */
.card-a{left:-72px;top:34px;animation:cardDriftA 6.6s ease-in-out infinite}
.card-b{right:-86px;top:145px;animation:cardDriftB 7.3s .5s ease-in-out infinite}
.card-c{left:-28px;bottom:-10px;animation:cardDriftC 7s 1s ease-in-out infinite}
.status-chip{right:22px;bottom:20px}

/* Parallax controlado por JS, aplicado al frame sin afectar las animaciones internas. */
.hero-stage.is-interactive .stage-frame{
  transform:rotateX(var(--stage-rx,0deg)) rotateY(var(--stage-ry,0deg)) translateZ(0);
}
.hero-stage.is-interactive .logo-orbit{transform:translate3d(var(--logo-x,0px),var(--logo-y,0px),18px)}

@keyframes stageGlow{0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes orbitTiltOne{0%{transform:rotate(-14deg) scaleX(.98)}100%{transform:rotate(-7deg) scaleX(1.02)}}
@keyframes orbitTiltTwo{0%{transform:rotate(20deg)}100%{transform:rotate(28deg)}}
@keyframes nodePulse{0%,100%{transform:scale(.82);opacity:.62}50%{transform:scale(1.2);opacity:1}}
@keyframes cardDriftA{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes cardDriftB{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes cardDriftC{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* CTA con brillo corto y no invasivo. */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{
  content:"";position:absolute;top:-140%;left:-35%;width:32%;height:360%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  transform:rotate(18deg);transition:left .52s ease;pointer-events:none;
}
.btn-primary:hover::before{left:112%}
.nav-cta{transition:background .24s ease,box-shadow .24s ease,transform .24s ease}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 28px rgba(0,212,224,.08)}

@media(min-width:1241px){
  .hero-stage{transform:translateY(-6px)}
  .stage-frame{width:min(100%,526px)}
}

@media(min-width:1001px) and (max-width:1240px){
  .stage-card{width:194px;grid-template-columns:34px minmax(0,1fr);padding:13px 14px}
  .stage-card-icon{width:32px;height:32px}.stage-card-icon svg{width:26px;height:26px}
  .card-a{left:-38px;top:34px}
  .card-b{right:-44px;top:142px}
  .card-c{left:-6px;bottom:-10px}
}

/* TABLET: el núcleo sigue libre y las cards abrazan el perímetro. */
@media(max-width:1000px){
  .hero-stage{min-height:565px;margin-top:12px}
  .stage-frame{width:min(88vw,560px)}
  .card-a{left:-34px;top:28px}
  .card-b{right:-34px;top:150px}
  .card-c{left:-10px;bottom:-14px}
}

/* MOBILE: más aire entre cards y T, legibilidad sin ocultar el isotipo. */
@media(max-width:680px){
  .hero-stage{min-height:455px;margin-top:54px;padding:16px 0 18px}
  .stage-frame{width:92%;max-width:360px;border-radius:30px}
  .stage-frame::before{inset:12px;border-radius:22px}
  .stage-grid{background-size:34px 34px;opacity:.24}
  .logo-orbit{inset:25% 22% 22%}
  .logo-orbit img{width:72%}
  .orbit-one{width:126%;height:50%}.orbit-two{width:84%;height:120%}.orbit-three{width:96%;height:96%}
  .stage-card{
    width:154px;
    min-height:74px;
    grid-template-columns:27px minmax(0,1fr);
    gap:8px;
    padding:10px 10px;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(8,25,40,.76),rgba(4,13,23,.64));
    -webkit-backdrop-filter:blur(15px) saturate(120%);
    backdrop-filter:blur(15px) saturate(120%);
  }
  .stage-card-icon{width:27px;height:27px}.stage-card-icon svg{width:23px;height:23px}
  .stage-card small{font-size:6.8px;letter-spacing:.13em;margin-bottom:4px}
  .stage-card b{font-size:10.5px;line-height:1.22}
  .stage-card span{display:block;font-size:7.1px;line-height:1.25;margin-top:4px;white-space:nowrap}
  .card-a{left:-7px;top:-18px}
  .card-b{right:-8px;top:101px}
  .card-c{left:13px;bottom:-22px}
  .connector-a{left:24%;top:20%;width:16%}.connector-b{right:20%;top:39%;width:16%}.connector-c{left:23%;bottom:20%;width:16%}
  .node-one{left:-2%;top:24%}.node-two{right:-3%;top:38%}.node-three{left:5%;bottom:10%}
}

@media(max-width:390px){
  .hero-stage{min-height:438px}
  .stage-card{width:145px}
  .stage-card span{font-size:6.7px}
  .card-a{left:-4px}.card-b{right:-5px}.card-c{left:10px}
}

@media(prefers-reduced-motion:reduce){
  .stage-glow,.orbit-one,.orbit-two,.orbit-node,.stage-card{animation:none!important}
  .hero-stage.is-interactive .stage-frame,.hero-stage.is-interactive .logo-orbit{transform:none!important}
}


/* =========================================================
   TOPERA V2.2.1 - MOBILE ORBITAL BALANCE
   Ajuste derivado de QA real 390x844:
   - compacta la transición entre proof y visual
   - vuelve a mostrar los 3 diferenciales en una sola fila
   - agranda la T y el sistema orbital
   - mantiene las cards fuera del núcleo visual
   ========================================================= */
@media(max-width:680px){
  .hero-grid{gap:30px}

  .hero-proof{
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:30px;
  }
  .hero-proof div{
    min-width:0;
    padding:13px 8px 0 0;
  }
  .hero-proof div+div{
    border-top:0;
    border-left:1px solid var(--line);
    padding-left:9px;
  }
  .hero-proof strong{
    font-size:7px;
    letter-spacing:.12em;
    margin-bottom:5px;
  }
  .hero-proof span{
    font-size:8.2px;
    line-height:1.32;
  }

  .hero-stage{
    min-height:430px;
    margin-top:0;
    padding:0 0 16px;
  }
  .stage-frame{
    width:100%;
    max-width:370px;
    border-radius:30px;
  }
  .stage-frame::before{inset:11px;border-radius:22px}

  /* Núcleo mayor, pero con un perímetro limpio alrededor. */
  .logo-orbit{inset:18% 14% 16%}
  .logo-orbit img{width:66%}
  .orbit-one{width:118%;height:48%}
  .orbit-two{width:78%;height:112%}
  .orbit-three{width:91%;height:91%}

  /* Cards hacia el perímetro: ninguna cruza el centro de la T. */
  .stage-card{
    width:148px;
    min-height:76px;
    grid-template-columns:27px minmax(0,1fr);
    gap:8px;
    padding:10px 10px;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(8,25,40,.66),rgba(4,13,23,.54));
    border-color:rgba(119,236,244,.20);
    box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.028),0 0 26px rgba(0,212,224,.028);
    -webkit-backdrop-filter:blur(16px) saturate(118%);
    backdrop-filter:blur(16px) saturate(118%);
  }
  .stage-card small{font-size:6.9px}
  .stage-card b{font-size:10.7px;line-height:1.2}
  .stage-card span{font-size:6.8px;line-height:1.25;white-space:normal}

  .card-a{left:-5px;top:22px}
  .card-b{right:-5px;top:82px}
  .card-c{left:8px;bottom:-14px}

  .connector-a{left:23%;top:23%;width:17%}
  .connector-b{right:19%;top:30%;width:17%}
  .connector-c{left:23%;bottom:18%;width:17%}
  .node-one{left:1%;top:27%}
  .node-two{right:0;top:30%}
  .node-three{left:7%;bottom:12%}

  /* El cartel de staging no tapa contenido en QA móvil. */
  .stage-ribbon{font-size:6.5px;padding:5px 8px;opacity:.72}
}

@media(max-width:390px){
  .hero-grid{gap:26px}
  .hero-stage{min-height:418px}
  .stage-frame{max-width:362px}
  .stage-card{width:143px}
  .card-a{left:-3px;top:20px}
  .card-b{right:-3px;top:80px}
  .card-c{left:7px;bottom:-13px}
}

/* =========================================================
   TOPERA V2.2.2 - SURGICAL ORBITAL POSITIONING
   Ajuste exclusivamente visual sobre el módulo orbital.
   No modifica estructura, contenido, JS, formularios ni panel.
   Objetivos:
   - Desktop: API · IA queda dentro del viewport y por debajo del núcleo T.
   - Mobile: acercar la composición al mockup aprobado, con T más protagonista.
   - Mantener cards abiertas, translúcidas y sin bloquear el isotipo.
   ========================================================= */

/* Desktop ancho: mover SOLO API·IA hacia abajo y apenas hacia adentro.
   Conservamos exactamente las posiciones ya aprobadas de WEB·APP e IT·CLOUD. */
@media(min-width:1241px){
  .card-b{
    right:-46px;
    top:238px;
  }
  .connector-b{
    right:14%;
    top:50%;
    width:17%;
    transform:rotate(8deg);
  }
  .node-two{
    right:-5%;
    top:51%;
  }
}

/* Desktop medio / notebook: misma corrección con desplazamiento proporcional,
   evitando que la card salga del borde derecho del viewport. */
@media(min-width:1001px) and (max-width:1240px){
  .card-b{
    right:-24px;
    top:208px;
  }
  .connector-b{
    right:16%;
    top:47%;
    width:16%;
    transform:rotate(5deg);
  }
  .node-two{
    right:-2%;
    top:47%;
  }
}

/* Tablet: el card derecho baja un poco, pero permanece en el perímetro. */
@media(min-width:681px) and (max-width:1000px){
  .card-b{
    right:-20px;
    top:198px;
  }
  .connector-b{top:45%}
  .node-two{top:45%;right:-1%}
}

/* Mobile aprobado: mayor protagonismo de la T y cards abrazando el perímetro.
   La posición de API·IA se mantiene ARRIBA-DERECHA en móvil (como el mockup),
   mientras que desktop la lleva abajo para resolver el solapamiento observado. */
@media(max-width:680px){
  .hero-stage{
    min-height:452px;
    padding:2px 0 20px;
  }
  .stage-frame{
    width:100%;
    max-width:370px;
  }

  /* T más grande y legible, sin tocar el asset. */
  .logo-orbit{
    inset:17% 12% 15%;
  }
  .logo-orbit img{
    width:78%;
  }
  .orbit-one{width:121%;height:49%}
  .orbit-two{width:80%;height:116%}
  .orbit-three{width:94%;height:94%}

  /* Glass más liviano, manteniendo contraste de texto. */
  .stage-card{
    width:152px;
    min-height:78px;
    background:linear-gradient(145deg,rgba(8,25,40,.57),rgba(4,13,23,.46));
    border-color:rgba(119,236,244,.24);
    box-shadow:0 15px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035),0 0 28px rgba(0,212,224,.035);
    -webkit-backdrop-filter:blur(17px) saturate(120%);
    backdrop-filter:blur(17px) saturate(120%);
  }
  .stage-card::after{opacity:.72}
  .stage-card b{font-size:10.9px}
  .stage-card span{font-size:7px;line-height:1.25}

  /* Posiciones inspiradas en el mockup aprobado: triángulo abierto alrededor de T. */
  .card-a{left:-7px;top:4px}
  .card-b{right:-8px;top:91px}
  .card-c{left:4px;bottom:-17px}

  .connector-a{left:24%;top:22%;width:17%}
  .connector-b{right:18%;top:34%;width:18%;transform:rotate(-8deg)}
  .connector-c{left:24%;bottom:18%;width:17%}
  .node-one{left:0;top:26%}
  .node-two{right:-1%;top:34%}
  .node-three{left:6%;bottom:11%}
}

@media(max-width:390px){
  .hero-stage{min-height:445px}
  .stage-frame{max-width:362px}
  .stage-card{width:148px}
  .card-a{left:-5px;top:5px}
  .card-b{right:-5px;top:90px}
  .card-c{left:5px;bottom:-16px}
}