/* =====================================================
   NEXUS Trading System — hoja de estilos
   Negro azulado, verde neón que pasa a cian, bordes con degradado
   y brillos de luz al pasar el mouse y al cambiar de sección.
   Todo aparece al instante: no hay animaciones de entrada.
   ===================================================== */

:root{
  --bg:        #04070b;
  --panel:     rgba(9,14,21,.88);
  --panel-2:   rgba(14,21,31,.9);
  --line:      rgba(255,255,255,.07);

  --green:     #2EF5B5;
  --green-lt:  #8DFFDC;
  --green-dk:  #13B884;
  --cyan:      #38D6FF;
  --blue:      #5BA8F0;

  --accent:    linear-gradient(120deg, #4dffc4 0%, #2ef5b5 38%, #38d6ff 100%);
  --edge:      linear-gradient(140deg, rgba(46,245,181,.55), rgba(91,168,240,.22) 35%, rgba(91,168,240,.14) 65%, rgba(56,214,255,.45));
  --edge-hi:   linear-gradient(140deg, rgba(46,245,181,.95), rgba(91,168,240,.45) 40%, rgba(56,214,255,.9));

  --txt:       #EEF4F8;
  --txt-2:     #A3B3C2;
  --txt-3:     #6B7C8C;

  --red:       #FF5C6E;
  --amber:     #FFB648;

  --f-head: 'Inter Tight', 'Inter', system-ui, sans-serif;   /* fina y firme, estilo fintech */
  --f-body: 'Inter', system-ui, sans-serif;

  --r:     16px;
  --r-sm:  12px;
  --nav-h: 66px;
  --t: .15s;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }   /* que "hidden" gane siempre, aunque el elemento tenga display propio */
html{ scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--f-head); font-weight:700; letter-spacing:-.025em; line-height:1.08; margin:0; }
::selection{ background:var(--green); color:#021; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#05080c; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--green-dk),#1b4a63); border-radius:99px; }

.wrap{ width:min(1200px, calc(100% - 32px)); margin-inline:auto; }
.wrap--sm{ width:min(860px, calc(100% - 32px)); }

.grad{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.i{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =====================================================
   TARJETA: borde con degradado verde → azul → cian
   ===================================================== */
.panel{
  position:relative;
  border:1px solid transparent;
  border-radius:var(--r);
  background:
    linear-gradient(180deg,var(--panel-2),var(--panel)) padding-box,
    var(--edge) border-box;
  transition:background var(--t), box-shadow var(--t);
}

/* reflejo de luz que cruza al pasar el mouse (botones y tarjetas) */
.shine{ position:relative; overflow:hidden; isolation:isolate; }
.shine::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg) translateX(0); opacity:0;
}
.shine:hover::after{ animation:sweep .7s ease-out; }
@keyframes sweep{
  0%  { opacity:1; transform:skewX(-18deg) translateX(0); }
  100%{ opacity:1; transform:skewX(-18deg) translateX(460%); }
}

/* =====================================================
   FONDO
   ===================================================== */
.bg-layer{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg); --fade:0; }
.bg-orb{ position:absolute; inset:0; background:url('bg.svg') center top / cover no-repeat; }
.bg-scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.bg-floor{
  position:absolute; left:50%; bottom:0;
  width:170vw; height:32vh;
  transform:translateX(-50%) perspective(240px) rotateX(60deg);
  transform-origin:50% 100%;
  overflow:hidden;
  mask-image:linear-gradient(to top, #000 15%, transparent 78%);
  -webkit-mask-image:linear-gradient(to top, #000 15%, transparent 78%);
  opacity:.4;
}
.bg-floor::before{
  content:''; position:absolute; left:0; right:0; top:-76px; bottom:0;
  background-image:
    linear-gradient(rgba(47,232,168,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,232,168,.22) 1px, transparent 1px);
  background-size:76px 76px;
  will-change:transform;
  animation:floorRun 7s linear infinite;
}
@keyframes floorRun{ to{ transform:translateY(76px); } }

.bg-glow{ position:absolute; border-radius:50%; opacity:.5; }
.bg-glow--1{
  width:1100px; height:760px; top:-320px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(46,245,181,.32), transparent 68%);
}
.bg-glow--2{
  width:900px; height:560px; bottom:-220px; left:50%; margin-left:-450px;
  background:radial-gradient(circle, rgba(56,214,255,.2), transparent 70%);
}
.bg-layer::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 44% at 50% 30%, rgba(4,7,11,.9), rgba(4,7,11,.55) 48%, transparent 76%);
}
.bg-veil{ position:absolute; inset:0; background:var(--bg); opacity:var(--fade); pointer-events:none; }
.bg-noise{
  position:absolute; inset:0; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================
   BARRA SUPERIOR
   ===================================================== */
.topbar{ position:fixed; top:12px; left:0; right:0; z-index:100; display:flex; justify-content:center; padding-inline:12px; }
.navpanel{
  display:flex; align-items:center; gap:14px;
  width:min(1200px,100%); height:var(--nav-h);
  padding:0 12px 0 20px;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(12,18,26,.96),rgba(7,11,16,.96)) padding-box,
    var(--edge) border-box;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.9);
}
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:28px; width:auto; }

/* enlaces con una luz que se desliza hasta la sección activa */
.navlinks{ position:relative; display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.navind{
  position:absolute; top:50%; left:0; height:40px; width:0; margin-top:-20px; border-radius:11px; pointer-events:none;
  background:linear-gradient(180deg,rgba(46,245,181,.18),rgba(56,214,255,.08));
  box-shadow:inset 0 0 0 1px rgba(46,245,181,.45), 0 0 24px -6px rgba(46,245,181,.75);
  transition:transform .38s cubic-bezier(.3,.9,.3,1), width .38s cubic-bezier(.3,.9,.3,1);
  overflow:hidden;
}
.navind::before{   /* línea de luz abajo */
  content:''; position:absolute; left:18%; right:18%; bottom:0; height:2px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 10px var(--green), 0 0 18px var(--cyan);
}
.navind::after{    /* destello que cruza cuando cambia de sección */
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg); opacity:0;
}
.navind.flash::after{ animation:sweep .6s ease-out; }

.navlink{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  height:40px; padding:0 13px; border-radius:11px;
  font-family:var(--f-head); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-2);
  transition:color var(--t), background var(--t);
  white-space:nowrap;
}
.navlink .i{ width:16px; height:16px; }
.navlink:hover{ color:#fff; background:rgba(255,255,255,.04); }
.navlink.is-active{ color:var(--green-lt); }
.navlink.is-active .i{ color:var(--green); }

.navpanel__right{ display:flex; align-items:center; gap:8px; flex:none; }

.burger{ display:none; width:44px; height:44px; border-radius:12px; position:relative;
  border:1px solid transparent;
  background:linear-gradient(rgba(10,16,22,.9),rgba(10,16,22,.9)) padding-box, var(--edge) border-box; }
.burger span{ position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:var(--txt); transition:transform var(--t), opacity var(--t), top var(--t); }
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:20px; } .burger span:nth-child(3){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* idioma: en la esquina de abajo, sin ocupar la barra */
/* interruptor ES | EN: la pastilla de luz se desliza al idioma elegido */
.langdock{
  position:fixed; left:16px; bottom:16px; z-index:90;
  display:grid; grid-template-columns:1fr 1fr; padding:3px; width:92px;
  border-radius:12px; border:1px solid transparent;
  background:linear-gradient(rgba(8,13,19,.9),rgba(8,13,19,.9)) padding-box, var(--edge) border-box;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.9);
  backdrop-filter:none;
}
.langdock__thumb{
  position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:9px;
  background:var(--accent); box-shadow:0 0 16px -4px rgba(46,245,181,.9), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.langdock:has(button[data-lang="en"].is-sel) .langdock__thumb{ transform:translateX(100%); }
.langdock button{
  position:relative; z-index:1; height:30px; border:0; background:transparent; border-radius:9px;
  font-family:var(--f-head); font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--txt-3);
  transition:color .2s;
}
.langdock button:hover{ color:#fff; }
.langdock button.is-sel{ color:#03140f; }

/* =====================================================
   BOTONES
   ===================================================== */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 24px; border-radius:var(--r-sm);
  font-family:var(--f-head); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid transparent;
  transition:box-shadow var(--t), filter var(--t), background var(--t), color var(--t), transform var(--t);
  white-space:nowrap;
}
.btn .i{ width:18px; height:18px; stroke-width:2.2; }
.btn--lg{ height:56px; padding:0 30px; font-size:14px; border-radius:14px; }
.btn--block{ display:flex; width:100%; }
.btn:active{ transform:scale(.98); }

/* reflejo que cruza el botón */
.btn::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); opacity:0;
}
.btn:hover::after{ animation:sweep .65s ease-out; }

.btn--primary{
  background:var(--accent);
  color:#03140f;
  box-shadow:0 10px 30px -10px rgba(46,245,181,.75), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--primary:hover{ box-shadow:0 14px 40px -10px rgba(46,245,181,.95), 0 0 0 1px rgba(141,255,220,.6), inset 0 1px 0 rgba(255,255,255,.6); filter:saturate(1.15); }

.btn--ghost{
  color:var(--txt);
  background:linear-gradient(180deg,rgba(16,24,34,.95),rgba(9,14,20,.95)) padding-box, var(--edge) border-box;
}
.btn--ghost:hover{
  color:#fff;
  background:linear-gradient(180deg,rgba(18,40,40,.95),rgba(9,20,22,.95)) padding-box, var(--edge-hi) border-box;
  box-shadow:0 0 26px -8px rgba(46,245,181,.7);
}

.btn--buy{ height:44px; padding:0 18px; font-size:12px; border-radius:12px; }

/* =====================================================
   HERO
   ===================================================== */
.hero{ padding:calc(var(--nav-h) + 72px) 0 40px; }
.hero__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero__title{
  font-size:clamp(2.5rem, 7vw, 5.4rem);
  font-weight:700; letter-spacing:-.035em; line-height:1.04;
  text-shadow:0 0 70px rgba(46,245,181,.2), 0 6px 40px rgba(0,0,0,.9);
}
.hero__sub{ max-width:640px; margin:22px auto 0; color:var(--txt-2); font-size:1.08rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

/* ---------- demo con la ventana real del bot ---------- */
.demo{ width:100%; margin-top:64px; }
.demo__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 auto 14px; max-width:1240px; text-align:left;
}
.demo__tag{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-head); font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--green); }
.demo__tag i{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.demo__hint{ font-size:13.5px; color:var(--txt-2); }
.demo__frame{
  max-width:1240px; margin:0 auto; padding:6px; border-radius:20px;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.95), 0 0 80px -40px rgba(46,245,181,.5);
}
.win{ position:relative; width:100%; aspect-ratio:1448/1086; overflow:hidden; background:#05080c; border-radius:14px; }
.win img{ position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }
.win canvas.globe{ position:absolute; pointer-events:none; visibility:hidden; }
/* destello al cambiar de pantalla en la demo */
.win::after{
  content:''; position:absolute; top:0; bottom:0; left:-50%; width:40%; z-index:3; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(141,255,220,.16), rgba(255,255,255,.22), rgba(56,214,255,.14), transparent);
  transform:skewX(-16deg); opacity:0;
}
.win.flash::after{ animation:sweepWin .6s ease-out; }
@keyframes sweepWin{ 0%{ opacity:1; transform:skewX(-16deg) translateX(0); } 100%{ opacity:1; transform:skewX(-16deg) translateX(400%); } }

.demo__frame:fullscreen{ display:flex; align-items:center; justify-content:center; background:#000; padding:0; border-radius:0; }
.demo__frame:fullscreen .win{ width:min(100vw, calc(100vh * 1448 / 1086)); border-radius:0; }

.hot{ position:absolute; z-index:4; border:0; padding:0; background:transparent; border-radius:8px; cursor:pointer; transition:background var(--t), box-shadow var(--t); }
.hot:hover{ background:rgba(46,245,181,.1); box-shadow:0 0 0 2px rgba(46,245,181,.75), 0 0 22px rgba(46,245,181,.4); }
.hot:focus-visible{ outline:2px solid var(--green); }
.win.hint .hot{ box-shadow:0 0 0 1px rgba(46,245,181,.45); }
.demo__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:1240px; margin:14px auto 0; }
.demo__note{ margin:0; font-size:12.5px; color:var(--txt-3); text-align:left; max-width:820px; }
.demo__full{ height:40px; padding:0 16px; font-size:11.5px; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:calc(100% - 32px); padding:12px 18px; border-radius:12px;
  background:linear-gradient(#0a1219,#0a1219) padding-box, var(--edge-hi) border-box; border:1px solid transparent;
  color:var(--txt); font-size:14px; font-weight:600; text-align:center;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.9), 0 0 30px -10px rgba(46,245,181,.6);
  display:none; z-index:200;
}
.toast.on{ display:block; }

/* =====================================================
   CINTA
   ===================================================== */
/* gira sin parar como una rueda: dos copias iguales seguidas; al llegar a la mitad vuelve al inicio sin que se note */
.ticker{
  margin-top:56px; overflow:hidden; border-block:1px solid rgba(91,168,240,.22); background:rgba(5,9,13,.8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{ display:flex; width:max-content; padding:15px 0; will-change:transform; animation:slide 28s linear infinite;
  font-family:var(--f-head); font-size:12.5px; font-weight:700; letter-spacing:.16em; color:var(--txt-2); }
.ticker__track span{ display:flex; align-items:center; gap:34px; padding-right:34px; white-space:nowrap; }
.ticker__track span::after{ content:''; width:6px; height:6px; border-radius:2px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 8px var(--green); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =====================================================
   SECCIONES
   ===================================================== */
.sec{ padding:104px 0; position:relative; }
.sec--alt{ background:linear-gradient(180deg,transparent,rgba(5,9,13,.82) 12%,rgba(5,9,13,.82) 88%,transparent); }
.sechead{ text-align:center; max-width:720px; margin:0 auto 56px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; padding:6px 14px; border-radius:999px;
  font-family:var(--f-head); font-size:11.5px; font-weight:800; letter-spacing:.22em; color:var(--green-lt);
  background:linear-gradient(rgba(46,245,181,.08),rgba(46,245,181,.08)) padding-box, var(--edge) border-box;
  border:1px solid transparent;
}
.sechead h2{ font-size:clamp(2rem,4.4vw,3.1rem); }
.sechead p{ margin:16px 0 0; color:var(--txt-2); font-size:1.04rem; }

.ibox{
  display:grid; place-items:center; flex:none;
  width:48px; height:48px; border-radius:14px; color:var(--green);
  background:linear-gradient(145deg,rgba(46,245,181,.16),rgba(56,214,255,.06)) padding-box, var(--edge-hi) border-box;
  border:1px solid transparent;
  box-shadow:0 0 22px -8px rgba(46,245,181,.7);
}
.ibox .i{ width:22px; height:22px; }

/* ---------- funciones ---------- */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat{ padding:26px 24px 24px; }
.feat:hover{ background:linear-gradient(180deg,rgba(16,30,34,.92),rgba(9,16,20,.9)) padding-box, var(--edge-hi) border-box; box-shadow:0 20px 50px -26px rgba(46,245,181,.6); }
.feat h3{ margin:18px 0 8px; font-size:1.08rem; letter-spacing:-.01em; }
.feat p{ margin:0; color:var(--txt-2); font-size:.94rem; }

/* ---------- pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ padding:26px 22px; }
.step:hover{ background:linear-gradient(180deg,rgba(16,30,34,.92),rgba(9,16,20,.9)) padding-box, var(--edge-hi) border-box; }
.step__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.step__n{ font-family:var(--f-head); font-size:2.2rem; font-weight:800; line-height:1; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.35; }
.step h3{ font-size:1.08rem; margin-bottom:8px; }
.step p{ margin:0; color:var(--txt-2); font-size:.93rem; }
.owner{ display:flex; align-items:center; gap:16px; margin:22px auto 0; max-width:820px; padding:18px 22px; }
.owner p{ margin:0; color:var(--txt-2); font-size:.95rem; }
.owner b{ color:var(--txt); }

/* ---------- video de instalación ---------- */
.video{ margin:22px auto 0; max-width:960px; padding:6px; border-radius:20px; }
.video__box{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,rgba(46,245,181,.14),rgba(56,214,255,.04) 45%,rgba(5,9,13,.96) 75%); }
.video__box iframe, .video__box video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.video__soon{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px; }
.video__play{
  display:grid; place-items:center; width:84px; height:84px; margin-bottom:8px; border-radius:50%; color:#03140f;
  background:var(--accent);
  box-shadow:0 0 0 10px rgba(46,245,181,.1), 0 0 50px rgba(46,245,181,.55);
}
.video__play .i{ width:32px; height:32px; fill:currentColor; stroke:none; margin-left:4px; }
.video__soon b{ font-family:var(--f-head); font-size:1.3rem; }
.video__soon small{ color:var(--txt-2); font-size:.92rem; }

/* ---------- comprar ---------- */
.buy{ display:grid; grid-template-columns:minmax(280px,360px) 1fr; border-radius:22px; overflow:hidden; }
.buy__price{ padding:36px 32px; border-right:1px solid rgba(91,168,240,.2); display:flex; flex-direction:column;
  background:radial-gradient(ellipse at 30% 0%,rgba(46,245,181,.12),transparent 60%); }
.buy__logo{ height:34px; width:auto; margin-top:22px; }
.buy__name{ margin:8px 0 0; color:var(--txt-2); font-size:.92rem; letter-spacing:.04em; }
.price__badge{
  align-self:flex-start; display:inline-block; padding:6px 12px; border-radius:999px;
  font-family:var(--f-head); font-size:11px; font-weight:800; letter-spacing:.18em; color:#03140f; background:var(--accent);
}
.price__amt{ display:flex; align-items:baseline; gap:10px; margin-top:18px; }
.price__amt b{ font-family:var(--f-head); font-size:4rem; line-height:1; color:#fff; text-shadow:0 0 40px rgba(46,245,181,.4); }
.price__amt span{ color:var(--txt-2); }
.price__note{ margin:8px 0 26px; font-size:.86rem; color:var(--txt-3); }
.buy__price .terms{ margin-top:auto; }
.terms{ display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; font-size:.84rem; color:var(--txt-2); cursor:pointer; line-height:1.45; }
.terms input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--green); cursor:pointer; }
.terms a{ color:var(--green-lt); text-decoration:underline; text-underline-offset:2px; }
.terms.shake{ animation:shake .4s; color:var(--amber); }
@keyframes shake{ 20%,60%{ transform:translateX(-5px); } 40%,80%{ transform:translateX(5px); } }
.btn.is-off{ filter:grayscale(.6) brightness(.75); box-shadow:none; }
.foot__terms{ color:var(--txt-2); text-decoration:underline; text-underline-offset:2px; }
.foot__terms:hover{ color:var(--green-lt); }
.price__fine{ margin:14px 0 0; text-align:center; font-size:.8rem; color:var(--txt-3); }
.buy__all{ padding:36px 34px; }
.buy__all h3{ font-size:1.25rem; margin-bottom:22px; }
.buy__groups{ display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; }
.buy__group h4{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--f-head); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--green);
}
.buy__group h4 .i{ width:18px; height:18px; }
.buy__group ul{ display:grid; gap:9px; }
.buy__group li{ position:relative; padding-left:24px; font-size:.93rem; color:var(--txt); }
.buy__group li::before{
  content:''; position:absolute; left:0; top:.32em; width:15px; height:15px; border-radius:50%;
  background:rgba(46,245,181,.14);
}
.buy__group li::after{
  content:''; position:absolute; left:4.5px; top:.62em; width:6px; height:3.5px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg);
}

/* ---------- preguntas ---------- */
.faq{ display:grid; gap:12px; }
.qa{ border-radius:14px; }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 22px; cursor:pointer; list-style:none;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
  transition:color var(--t);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--green-lt); }
.qa summary .i{ width:18px; height:18px; color:var(--green); transition:transform .2s; }
.qa[open]{ background:linear-gradient(180deg,rgba(16,30,34,.92),rgba(9,16,20,.9)) padding-box, var(--edge-hi) border-box; }
.qa[open] summary .i{ transform:rotate(180deg); }
.qa__a{ padding:0 22px 20px; }
.qa__a p{ margin:0; color:var(--txt-2); font-size:.95rem; }

/* ---------- soporte ---------- */
.support{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:44px; border-radius:22px;
  background:
    radial-gradient(ellipse at 100% 50%,rgba(56,214,255,.1),transparent 55%) padding-box,
    linear-gradient(180deg,var(--panel-2),var(--panel)) padding-box,
    var(--edge) border-box; }
.support__text{ max-width:620px; }
.support__text h2{ font-size:clamp(1.9rem,4vw,2.8rem); }
.support__text p{ margin:14px 0 0; color:var(--txt-2); }
.support__btns{ display:flex; flex-direction:column; gap:12px; flex:none; min-width:220px; }

.owneronly[hidden]{ display:none; }

/* ---------- perfil ---------- */
.avatar{
  width:44px; height:44px; padding:2px; border-radius:50%; border:0; flex:none;
  background:var(--accent);
  box-shadow:0 0 18px -6px rgba(46,245,181,.8);
  transition:box-shadow var(--t), transform var(--t);
}
.avatar:hover{ box-shadow:0 0 26px -4px rgba(46,245,181,1); transform:scale(1.05); }
.avatar > span, .pf__pic{
  display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:#0b131b; color:var(--green);
  font-family:var(--f-head); font-weight:800; font-size:16px;
}
.avatar img, .pf__pic img{ width:100%; height:100%; object-fit:cover; }

.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px; background:rgba(2,4,7,.72); }
.modal[hidden]{ display:none; }
.modal__box{ width:min(440px,100%); padding:30px 28px 26px; border-radius:22px; box-shadow:0 40px 100px -30px #000, 0 0 60px -30px rgba(46,245,181,.7); }
.modal__x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:0; background:rgba(255,255,255,.05); color:var(--txt-2); }
.modal__x:hover{ color:#fff; background:rgba(255,255,255,.1); }
.modal__box h3{ font-size:1.35rem; margin-bottom:20px; }
.pf__photo{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.pf__pic{ width:84px; height:84px; flex:none; padding:0; font-size:30px; box-shadow:0 0 0 2px rgba(46,245,181,.7), 0 0 26px -6px rgba(46,245,181,.8); }
.pf__pic .i{ width:34px; height:34px; }
.pf__picbtns{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pf__upload{ height:40px; padding:0 16px; font-size:11.5px; cursor:pointer; }
.pf__rm{ border:0; background:none; padding:2px 0; color:var(--txt-3); font-size:.85rem; }
.pf__rm:hover{ color:var(--red); }
.pf__field{ display:block; margin-bottom:14px; }
.pf__field span{ display:block; margin-bottom:6px; font-size:.82rem; font-weight:600; color:var(--txt-2); }
.pf__field input{
  width:100%; height:46px; padding:0 14px; border-radius:12px; font:inherit; color:var(--txt);
  border:1px solid rgba(91,168,240,.3); background:rgba(4,8,12,.8); outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.pf__field input:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(46,245,181,.15); }
.pf__note{ margin:2px 0 18px; font-size:.8rem; color:var(--txt-3); }
.pf__field input[readonly]{ color:var(--txt-3); background:rgba(255,255,255,.03); }
.pf__gbtn{ min-height:44px; display:flex; justify-content:center; }

/* ventana de entrar / crear cuenta */
.auth{ display:flex; flex-direction:column; }
.auth__logo{ height:30px; width:auto; margin:4px auto 20px; }
.auth__tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid rgba(91,168,240,.22); }
.auth__tab{
  height:42px; border:0; border-radius:10px; background:transparent; color:var(--txt-2);
  font-family:var(--f-head); font-weight:700; font-size:.92rem; transition:background var(--t), color var(--t);
}
.auth__tab:hover{ color:#fff; }
.auth__tab.is-on{ background:var(--accent); color:#03140f; box-shadow:0 6px 20px -8px rgba(46,245,181,.8); }
.auth__lead{ margin:16px 0 14px; text-align:center; color:var(--txt-2); font-size:.92rem; }
.auth__form{ display:block; }
.auth__err{ margin:-4px 0 12px; padding:10px 12px; border-radius:10px; font-size:.86rem; color:#ffd0d6; background:rgba(255,92,110,.12); border:1px solid rgba(255,92,110,.35); }
.auth__or{ display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--txt-3); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }
.auth__or::before, .auth__or::after{ content:''; flex:1; height:1px; background:rgba(91,168,240,.22); }
.auth__fine{ margin:16px 0 0; text-align:center; font-size:.76rem; color:var(--txt-3); }
.auth__fine a{ color:var(--txt-2); }
.pw{ position:relative; display:block; }
.pw input{ padding-right:46px; }
.pw__eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:8px; background:transparent; color:var(--txt-3); display:grid; place-items:center; }
.pw__eye:hover{ color:var(--green); }
.pw__eye .i{ width:18px; height:18px; }
/* todas las ventanas: si no caben en la pantalla, se desplazan por dentro */
.modal__box{ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.modal__box::-webkit-scrollbar{ width:8px; }

/* carrito */
.cartbtn{ position:relative; }
.cartbtn__n{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center; font-size:.72rem; font-weight:800; color:#fff; background:#ff4d6d;
  box-shadow:0 0 0 2px var(--bg), 0 4px 12px -2px rgba(255,77,109,.8);
}
.cartbox h3{ display:flex; align-items:center; gap:10px; font-size:1.3rem; margin:0 0 18px; }
.cartbox h3 .i{ color:var(--green); width:22px; height:22px; }
.cart__item{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px;
  background:linear-gradient(rgba(14,24,32,.9),rgba(14,24,32,.9)) padding-box, var(--edge) border-box; border:1px solid transparent; }
.cart__img{ flex:none; display:grid; place-items:center; width:54px; height:54px; border-radius:12px; background:#05090d; border:1px solid rgba(91,168,240,.25); }
.cart__img img{ width:38px; height:auto; }
.cart__info{ flex:1; min-width:0; }
.cart__info b{ display:block; font-family:var(--f-head); }
.cart__info small{ display:block; color:var(--txt-2); font-size:.82rem; }
.cart__rm{ border:0; background:none; padding:4px 0 0; color:var(--txt-3); font-size:.8rem; text-decoration:underline; }
.cart__rm:hover{ color:var(--red); }
.cart__price{ font-family:var(--f-head); font-size:1.2rem; }
.cart__inc{ margin:16px 0; display:grid; gap:8px; }
.cart__inc li{ position:relative; padding-left:24px; font-size:.88rem; color:var(--txt-2); }
.cart__inc li::before{ content:''; position:absolute; left:4px; top:.5em; width:8px; height:4px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); }
.cart__total{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; margin-bottom:12px; border-top:1px solid rgba(91,168,240,.2); }
.cart__total span{ color:var(--txt-2); }
.cart__total b{ font-family:var(--f-head); font-size:1.4rem; }
.cart__empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:10px 0 4px; }
.cart__emptyico{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:rgba(46,245,181,.08); border:1px solid rgba(46,245,181,.3); color:var(--green); }
.cart__emptyico .i{ width:28px; height:28px; }
.cart__empty p{ margin:0 0 6px; color:var(--txt-2); font-size:.9rem; }
.buy__btns{ display:grid; gap:10px; margin-top:auto; }
#pay .terms{ margin:0 0 14px; }

/* ventana de pago */
.pay h3{ text-align:center; font-size:1.35rem; margin:0 0 14px; }
.pay__amt{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:14px; margin-bottom:18px;
  background:linear-gradient(rgba(46,245,181,.08),rgba(46,245,181,.08)) padding-box, var(--edge) border-box; border:1px solid transparent; }
.pay__amt span{ color:var(--txt-2); font-size:.9rem; }
.pay__amt b{ font-family:var(--f-head); font-size:1.5rem; color:#fff; }
.pay__steps{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:14px; }
.pay__steps li{ display:flex; gap:12px; align-items:flex-start; }
.pay__steps b{ display:block; font-size:.98rem; }
.pay__steps p{ margin:3px 0 0; color:var(--txt-2); font-size:.88rem; }
.pay__n{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#03140f; font-weight:800; font-size:.85rem; }
.pay__to{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.35); border:1px solid rgba(91,168,240,.3);
  font-family:var(--f-head); font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
.pay__copy{ border:0; border-radius:8px; padding:6px 10px; background:rgba(46,245,181,.14); color:var(--green-lt); font-size:.8rem; font-weight:700; }
.pay__copy:hover{ background:rgba(46,245,181,.24); }
.pay__name{ margin:6px 0 0 !important; }

/* opciones de pago */
.pay__how{ margin:0 0 10px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); }
.paytabs{ display:grid; gap:10px; margin-bottom:18px; }
.paytab{
  position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border-radius:16px; text-align:left;
  font:inherit; color:var(--txt-2); cursor:pointer;
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(16,24,34,.95),rgba(9,14,20,.95)) padding-box,
             linear-gradient(140deg,rgba(91,168,240,.35),rgba(91,168,240,.15)) border-box;
  transition:background var(--t), box-shadow var(--t), transform var(--t);
}
.paytab:hover{ transform:translateY(-1px); background:linear-gradient(180deg,rgba(18,30,40,.95),rgba(10,17,24,.95)) padding-box, var(--edge) border-box; }
.paytab.is-on{
  background:linear-gradient(180deg,rgba(14,40,38,.95),rgba(8,22,22,.95)) padding-box, var(--edge-hi) border-box;
  box-shadow:0 0 0 1px rgba(46,245,181,.25), 0 14px 34px -18px rgba(46,245,181,.9);
}
.paytab__logo{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:13px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.paytab__logo svg{ width:26px; height:26px; }
.paytab__logo--pp{ background:linear-gradient(145deg,#0070e0,#003087); }
.paytab__logo--z{ background:linear-gradient(145deg,#8b3dff,#6d1ed4); }
.paytab__logo--z b{ font-family:var(--f-head); font-size:1.5rem; font-weight:800; color:#fff; line-height:1; }
.paytab__txt{ flex:1; min-width:0; }
.paytab__txt b{ display:block; font-family:var(--f-head); font-size:1.08rem; color:var(--txt); }
.paytab__txt small{ display:block; margin-top:2px; font-size:.8rem; color:var(--txt-2); }
.paytab.is-on .paytab__txt small{ color:var(--green-lt); }
.paytab__badge{ flex:none; padding:4px 8px; border-radius:999px; font-size:.62rem; font-weight:800; letter-spacing:.12em; color:#03140f; background:var(--accent); }
.paytab__dot{ flex:none; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.25); position:relative; }
.paytab.is-on .paytab__dot{ border-color:var(--green); }
.paytab.is-on .paytab__dot::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
@media (max-width:420px){ .paytab__badge{ display:none; } }
.pay__lead{ margin:0 0 14px; color:var(--txt-2); font-size:.9rem; text-align:center; }
.pp__btns{ min-height:48px; }
.ppqr{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.ppqr img{ width:220px; height:220px; border-radius:16px; background:#fff; padding:8px; box-shadow:0 0 0 1px rgba(91,168,240,.3), 0 14px 40px -16px rgba(0,0,0,.9); }
.ppqr p{ margin:0; color:var(--txt-2); font-size:.88rem; }
.ppqr p b{ color:var(--txt); }
.pay__note{ margin:10px 0 0; padding:10px 12px; border-radius:10px; font-size:.86rem; color:var(--amber); background:rgba(255,182,72,.08); text-align:center; }

/* descarga en el perfil */
.pf__dl{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 16px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(rgba(46,245,181,.07),rgba(46,245,181,.07)) padding-box, var(--edge-hi) border-box; border:1px solid transparent; }
.pf__dl b{ display:block; font-size:.95rem; }
.pf__dl small{ display:block; color:var(--txt-3); font-size:.78rem; margin-top:2px; }
.pf__dl .btn{ height:40px; padding:0 14px; font-size:11.5px; flex:none; }
.th__state{ text-align:center; margin:-4px 0 18px; padding:10px 12px; border-radius:10px; font-size:.9rem; color:var(--txt-2); background:rgba(255,255,255,.04); }
.th__state.is-ok{ color:var(--green-lt); background:rgba(46,245,181,.1); }
.th__state.is-wait{ color:var(--amber); background:rgba(255,182,72,.08); }

/* botón "Iniciar sesión" de la barra */
.signin{ padding:0 16px; }
@media (max-width:520px){ .signin span{ display:none; } .signin{ width:44px; padding:0; } }
.pf__sub{ margin:-4px 0 16px; padding:10px 12px; border-radius:10px; font-size:.86rem; color:var(--txt-2); background:rgba(255,255,255,.03); border:1px solid rgba(91,168,240,.22); }
.pf__sub.is-on{ color:var(--green-lt); background:rgba(46,245,181,.08); border-color:rgba(46,245,181,.4); }
.pf__sub a{ color:var(--green-lt); font-weight:600; }
.pf__out{ display:block; margin:14px auto 0; border:0; background:none; color:var(--txt-3); font-size:.88rem; }
.pf__out:hover{ color:var(--red); }

/* ---------- llamada final ---------- */
.cta{ padding:40px 0 110px; }
.cta__inner{ padding:60px 32px; text-align:center; border-radius:24px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(46,245,181,.14),transparent 60%) padding-box,
    linear-gradient(180deg,var(--panel-2),var(--panel)) padding-box,
    var(--edge) border-box; }
.cta__inner h2{ font-size:clamp(2rem,4.6vw,3.1rem); }
.cta__inner p{ margin:16px auto 30px; max-width:540px; color:var(--txt-2); }

/* ---------- pie ---------- */
.foot{ border-top:1px solid rgba(91,168,240,.2); padding:46px 0 80px; background:rgba(0,0,0,.55); }
.foot__inner{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; }
.foot__brand img{ height:30px; width:auto; }
.foot__brand small{ display:block; margin-top:8px; color:var(--txt-3); font-size:.82rem; }
.foot__links{ display:flex; flex-wrap:wrap; gap:6px; }
.foot__links a{ padding:8px 12px; font-size:.86rem; color:var(--txt-2); border-radius:10px; transition:color var(--t), background var(--t); }
.foot__links a:hover{ color:var(--green-lt); background:rgba(46,245,181,.06); }
.foot__legal{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.foot__legal p{ margin:0 0 12px; font-size:.78rem; line-height:1.7; color:var(--txt-3); }
.foot__legal b{ color:var(--txt-2); }
.foot__legal > span{ font-size:.78rem; color:var(--txt-3); }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1100px){
  .navind{ display:none; }
  .navlinks{ display:none; }
  .burger{ display:block; }
  .navpanel{ position:relative; justify-content:space-between; }
  .navlinks.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    position:absolute; top:calc(100% + 8px); left:0; right:0; padding:10px; border-radius:16px;
    background:linear-gradient(rgba(8,13,19,.98),rgba(8,13,19,.98)) padding-box, var(--edge) border-box; border:1px solid transparent;
  }
  .navlinks.is-open .navlink{ height:48px; }
  .navlinks.is-open .navlink.is-active{ background:rgba(46,245,181,.1); }
  .feats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .buy{ grid-template-columns:1fr; }
  .buy__price{ border-right:0; border-bottom:1px solid rgba(91,168,240,.2); }
  .support{ flex-direction:column; align-items:flex-start; }
  .support__btns{ flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:700px){
  .sec{ padding:76px 0; }
  .hero{ padding-top:calc(var(--nav-h) + 52px); }
  .feats, .steps{ grid-template-columns:1fr; }
  .cta__inner{ padding:44px 20px; }
  .foot__inner{ flex-direction:column; align-items:flex-start; }
  .demo{ margin-top:44px; }
  .demo__frame{ padding:4px; border-radius:14px; }
  .win{ border-radius:10px; }
  .owner{ flex-direction:column; align-items:flex-start; }
  .buy__groups{ grid-template-columns:1fr; }
  .buy__price, .buy__all{ padding:28px 22px; }
  .price__amt b{ font-size:3.2rem; }
  .support{ padding:32px 22px; }
  .support__btns{ width:100%; flex-direction:column; }
  .video__play{ width:64px; height:64px; }
}
@media (max-width:520px){
  .navpanel{ padding:0 8px 0 14px; gap:8px; }
  .brand img{ height:22px; }
  .btn--buy span{ display:none; }
  .btn--buy{ width:44px; padding:0; }
  .hero__cta .btn{ width:100%; }
  .langdock{ left:10px; bottom:10px; }
}
/* Nota: Windows con "Efectos de animación" apagado avisa a las páginas que quiere menos movimiento.
   Aquí todo el movimiento es suave (cinta, reflejos, fondo), así que se deja funcionando igual para todos. */