/* =====================================================================
   SkyTrading SmartPro — hoja de estilos
   Paleta: negro / violeta / azul
   ===================================================================== */

:root{
  --black:#05040c;
  --black-2:#09071a;
  --panel:#0d0a1f;
  --panel-2:#120d2b;

  --violet:#8b5cf6;
  --violet-2:#a855f7;
  --violet-deep:#5b21b6;
  --blue:#3b82f6;
  --blue-2:#2563eb;
  --cyan:#22d3ee;

  --text:#eae7f5;
  --muted:#9d97bd;
  --line:rgba(139,92,246,.18);
  --line-soft:rgba(255,255,255,.07);

  --grad:linear-gradient(115deg,#a855f7 0%,#7c3aed 35%,#4f46e5 65%,#3b82f6 100%);
  --grad-soft:linear-gradient(135deg,rgba(168,85,247,.16),rgba(59,130,246,.10));

  --radius:20px;
  --radius-lg:28px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--violet-2);background:rgba(139,92,246,.12);padding:.15em .45em;border-radius:6px}
::selection{background:rgba(139,92,246,.4);color:#fff}

/* ---------------------------- FONDO GLOBAL --------------------------- */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb-1{width:60vw;height:60vw;max-width:760px;max-height:760px;top:-18vh;left:-12vw;
  background:radial-gradient(circle at 40% 40%,rgba(124,58,237,.75),transparent 62%)}
.orb-2{width:52vw;height:52vw;max-width:680px;max-height:680px;top:38vh;right:-14vw;
  background:radial-gradient(circle at 60% 40%,rgba(37,99,235,.6),transparent 62%)}
.orb-3{width:46vw;height:46vw;max-width:600px;max-height:600px;bottom:-14vh;left:22vw;
  background:radial-gradient(circle at 50% 50%,rgba(168,85,247,.42),transparent 65%)}
.grid-lines{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(139,92,246,.18) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(59,130,246,.14) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 20%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 20%,#000 20%,transparent 78%);
}
.noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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")}

.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:rgba(255,255,255,.05)}
.scroll-progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 14px rgba(139,92,246,.8)}

/* ------------------------------- NAV --------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s var(--ease)}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav.scrolled{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(5,4,12,.72);border-bottom:1px solid var(--line)}
.nav.scrolled .nav-inner{padding:13px 22px}

.brand{display:flex;align-items:center;font-family:'Sora',sans-serif}
.brand-text{font-weight:400;letter-spacing:.5px;font-size:18px}
.brand-text strong{font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--muted)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--grad);transition:width .3s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}

.nav-cta{display:flex;gap:10px;align-items:center}
.nav-burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ------------------------------ BOTONES ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
  font-family:'Sora',sans-serif;letter-spacing:.2px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-lg{padding:15px 30px;font-size:15.5px}
.btn-xl{padding:19px 42px;font-size:17px}

.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 34px rgba(124,58,237,.42)}
.btn-primary:hover{box-shadow:0 14px 46px rgba(124,58,237,.6)}
.btn-primary::before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transition:left .7s var(--ease)}
.btn-primary:hover::before{left:130%}

.btn-login{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.45);color:#fff;
  box-shadow:inset 0 0 22px rgba(139,92,246,.14)}
.btn-login:hover{background:rgba(139,92,246,.22);border-color:var(--violet)}

.btn-line{border-color:var(--line-soft);color:var(--text);background:rgba(255,255,255,.02)}
.btn-line:hover{border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.08)}

.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:#fff}

.btn-wa{background:linear-gradient(120deg,#25D366,#12b855);color:#04220f;font-weight:700;
  box-shadow:0 10px 40px rgba(37,211,102,.35)}
.btn-wa:hover{box-shadow:0 16px 54px rgba(37,211,102,.5)}
.btn-tg{background:linear-gradient(120deg,#2AABEE,#229ED9);color:#fff;font-weight:700;
  box-shadow:0 10px 40px rgba(42,171,238,.32)}
.btn-tg:hover{box-shadow:0 16px 54px rgba(42,171,238,.46)}
.wa-ico,.tg-ico{width:24px;height:24px;fill:currentColor}
.btn .tg-ico{width:19px;height:19px}
.arrow{transition:transform .3s var(--ease);display:inline-block}
.btn:hover .arrow{transform:translateX(5px)}

/* ------------------------------- HERO -------------------------------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:120px 22px 90px;text-align:center;overflow:hidden}
.hero-glow{position:absolute;width:900px;height:520px;top:14%;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(139,92,246,.28),transparent 68%);filter:blur(50px);pointer-events:none}
.hero-inner{position:relative;max-width:960px;width:100%}

.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 17px;border-radius:999px;
  border:1px solid var(--line);background:rgba(139,92,246,.07);backdrop-filter:blur(10px);
  font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;color:#cdc4f0;margin-bottom:34px}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--violet-2);
  box-shadow:0 0 12px var(--violet-2);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* ---------------------- TÍTULO DEL HERO ------------------------------
   Tipografía real (nada de canvas). El aspecto de cristal sale del
   degradado recortado al texto, un contorno oscuro por detrás y un
   reflejo que lo recorre. El armado "de vidrio roto" al cargar se hace
   con copias del mismo texto recortadas en esquirlas por clip-path.
   -------------------------------------------------------------------- */
.hero-titulo{--tam:clamp(34px,7.4vw,86px);margin:0 0 8px;line-height:1.04}

.titulo-caja{
  position:relative;display:inline-block;isolation:isolate;
  /* aire para que el resplandor no se corte contra el borde */
  padding:calc(var(--tam) * .16) calc(var(--tam) * .1) calc(var(--tam) * .1)
}

/* La tipografía vive en la capa; el contorno y el relleno son dos hijos
   apilados. Van separados a propósito: con background-clip:text el
   degradado se pinta como FONDO del elemento, así que cualquier
   pseudoelemento con z-index negativo le quedaría por encima y taparía
   las letras de negro. Como hermanos, el orden del DOM manda. */
.titulo-capa{
  position:relative;display:block;
  font-family:'Sora',sans-serif;font-weight:800;
  font-size:var(--tam);letter-spacing:-.026em;white-space:nowrap;
  /* mismo suavizado en las dos capas: si difieren, el borde del relleno
     queda semitransparente y deja ver el contorno como un fleco negro */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}

/* 1) contorno oscuro, debajo */
.titulo-contorno{
  position:absolute;inset:0;display:block;
  color:#d3daf9;-webkit-text-stroke:2.2px #0b0820;
  paint-order:stroke fill;pointer-events:none;
  /* el resplandor va acá: nace de la forma de las letras, no de la caja */
  text-shadow:0 0 26px rgba(130,165,240,.38), 0 4px 18px rgba(10,8,26,.5)
}

/* 2) el relleno degradado, encima */
.titulo-base{
  position:relative;display:block;
  background:linear-gradient(112deg,
      #ffffff 0%, #eef1ff 18%, #dcdfff 38%, #c3cbf9 58%, #a9d9ee 80%, #dff2fb 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* reflejo que recorre las letras cada tanto */
.titulo-base::after{
  content:attr(data-txt);position:absolute;inset:0;display:block;
  background:linear-gradient(105deg,
      transparent 38%, rgba(255,255,255,.7) 48%, transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo 7.5s var(--ease) 1.9s infinite;
  pointer-events:none
}
@keyframes brillo{
  0%   {background-position:-160% 0}
  22%  {background-position:160% 0}
  100% {background-position:160% 0}
}

/* --- armado de esquirlas --- */
.titulo-esquirla{
  position:absolute;left:calc(var(--tam) * .1);top:calc(var(--tam) * .16);
  right:calc(var(--tam) * .1);
  pointer-events:none;will-change:transform,opacity
}
.hero-titulo.armando > .titulo-caja > .titulo-capa{opacity:0}
.hero-titulo.armando .titulo-esquirla{
  animation:esquirla var(--dur,760ms) cubic-bezier(.18,.85,.24,1) var(--ret,0ms) both
}
@keyframes esquirla{
  0%   {opacity:0;filter:blur(5px);
        transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot)) scale(var(--esc))}
  55%  {opacity:1}
  100% {opacity:1;filter:blur(0);transform:none}
}

/* el recorte de la esquirla cortaría también el resplandor y dejaría a la
   vista los bordes rectos del polígono: durante el armado va apagado */
.titulo-esquirla .titulo-contorno{text-shadow:none}
.titulo-esquirla .titulo-base::after{display:none}

/* cierre del armado: el título entra fundido y la luz crece sola, en vez
   de encenderse de golpe cuando desaparecen las esquirlas */
.hero-titulo.armado > .titulo-caja > .titulo-capa{animation:aparecer .5s ease-out both}
.hero-titulo.armado .titulo-contorno{animation:brotar 1.1s ease-out both}
.hero-titulo.armado .titulo-esquirla{transition:opacity .42s linear;opacity:0}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes brotar{
  from{text-shadow:0 0 0 rgba(130,165,240,0),   0 4px 18px rgba(10,8,26,.5)}
  to  {text-shadow:0 0 26px rgba(130,165,240,.38), 0 4px 18px rgba(10,8,26,.5)}
}

/* destellos en las grietas, se apagan solos */
.titulo-grieta{
  position:absolute;left:0;top:0;height:100%;width:2px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(220,235,255,.9),transparent);
  opacity:0;animation:grieta 620ms ease-out var(--ret,0ms) both}
@keyframes grieta{
  0%  {opacity:0;transform:scaleY(.2)}
  35% {opacity:.85;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(1)}
}

/* sin JS o con animaciones apagadas, el título se ve igual pero quieto */
html.reduce-motion .titulo-base::after{animation:none}
html.reduce-motion .hero-titulo.armando > .titulo-caja > .titulo-capa{opacity:1}
html.reduce-motion .titulo-esquirla,
html.reduce-motion .titulo-grieta{display:none}

@media (max-width:640px){
  .titulo-contorno{-webkit-text-stroke-width:1.7px}
}

.hero-sub{font-size:clamp(16px,2.1vw,21px);color:var(--muted);max-width:620px;margin:22px auto 0;font-weight:300}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}

.hero-stats{display:flex;gap:52px;justify-content:center;margin-top:66px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:'Sora',sans-serif;font-size:32px;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}

.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);opacity:.6}
.mouse{display:block;width:24px;height:38px;border:1.5px solid var(--line);border-radius:14px;position:relative}
.mouse i{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;
  background:var(--violet-2);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;top:8px}30%{opacity:1}100%{opacity:0;top:22px}}

/* ----------------------------- SECCIONES ----------------------------- */
.section{position:relative;z-index:1;padding:clamp(80px,11vw,140px) 22px}
.container{max-width:var(--maxw);margin:0 auto}
.kicker{display:block;text-align:center;font-size:12px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--violet-2);margin-bottom:16px;font-weight:600}
.h2{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,50px);line-height:1.14;letter-spacing:-1px}
.h2.center{text-align:center;max-width:900px;margin:0 auto 26px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,1.8vw,19.5px);color:#cbc5e4}
.center{text-align:center}

/* Sección 2 */
.split{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(36px,6vw,72px);align-items:center}
.split-media{max-width:320px;width:100%;justify-self:center}
.split-text p{color:var(--muted);margin-top:16px}
.split-text .h2{margin-bottom:24px}
.split-text .signature{margin-top:30px;font-size:18px;color:var(--text);line-height:1.6}
.split-text .btn{margin-top:34px}

.frame-vertical{position:relative;aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset,0 0 70px rgba(124,58,237,.16);
  transition:transform .5s var(--ease),box-shadow .5s}
.frame-vertical img,.frame-vertical video{width:100%;height:100%;object-fit:cover;display:block}
.frame-sound{
  position:absolute;right:14px;bottom:14px;z-index:4;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,8,24,.62);color:#fff;cursor:pointer;
  font-size:16px;line-height:1;backdrop-filter:blur(8px);transition:background .3s,transform .3s var(--ease)}
.frame-sound:hover{background:rgba(139,92,246,.55);transform:scale(1.08)}
.frame-vertical:hover{box-shadow:0 34px 100px rgba(0,0,0,.7),0 0 90px rgba(124,58,237,.3)}
.frame-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 42%);mix-blend-mode:overlay}

/* Placeholders */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  color:var(--muted);font-size:14px;border:1.5px dashed rgba(139,92,246,.32);border-radius:var(--radius-lg);
  background:var(--grad-soft);padding:30px;height:100%}
.ph-vertical{aspect-ratio:9/16}
.ph-wide{aspect-ratio:16/10}
.ph-testi{aspect-ratio:6/9}
.ph-ico{width:44px;height:44px;border-radius:12px;background:var(--grad);opacity:.6}

/* Sección 3 — comparador */
.compare{margin:46px auto 0;width:80%;max-width:944px}
.compare-box{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);cursor:ew-resize;user-select:none;
  box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 90px rgba(88,60,220,.2)}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp-clip{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
  clip-path:inset(0 50% 0 0);-webkit-clip-path:inset(0 50% 0 0);will-change:clip-path}

.cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
  will-change:left;pointer-events:none}
.cmp-line{position:absolute;inset:0;background:rgba(255,255,255,.9);box-shadow:0 0 22px rgba(255,255,255,.55)}
.cmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:rgba(10,8,24,.72);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.92);
  display:grid;place-items:center;pointer-events:auto;cursor:grab;
  box-shadow:0 8px 34px rgba(0,0,0,.6);transition:transform .25s var(--ease)}
.cmp-knob:active{cursor:grabbing}
.compare-box:hover .cmp-knob{transform:translate(-50%,-50%) scale(1.08)}
.cmp-knob svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.cmp-label{position:absolute;top:22px;padding:9px 22px;border-radius:999px;font-family:'Sora',sans-serif;
  font-size:12.5px;letter-spacing:3px;text-transform:uppercase;background:rgba(8,6,20,.6);
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16)}
.cmp-label-left{left:22px}
.cmp-label-right{right:22px;border-color:rgba(139,92,246,.5);color:#e7dcff}

.cmp-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);padding:12px 28px;border-radius:999px;
  background:rgba(8,6,20,.62);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);
  font-size:15px;letter-spacing:.4px;transition:opacity .4s;pointer-events:none}
.cmp-hint.hide{opacity:0}

.compare-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.feat{padding:24px;border-radius:var(--radius);border:1px solid var(--line-soft);background:rgba(255,255,255,.02);
  transition:border-color .3s,transform .3s var(--ease),background .3s}
.feat:hover{border-color:rgba(139,92,246,.42);transform:translateY(-4px);background:rgba(139,92,246,.06)}
.feat b{display:block;font-family:'Sora',sans-serif;font-size:16px;margin-bottom:6px}
.feat span{font-size:14.5px;color:var(--muted)}

/* Sección 4 — testimonios 6:9 */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px auto 0;width:80%;max-width:944px}
.testi{position:relative}
.testi-media{position:relative;aspect-ratio:6/9;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  box-shadow:0 26px 70px rgba(0,0,0,.55);transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.testi:hover .testi-media{transform:translateY(-8px);border-color:rgba(139,92,246,.5);
  box-shadow:0 36px 90px rgba(0,0,0,.65),0 0 70px rgba(124,58,237,.24)}
.testi-video{width:100%;height:100%;object-fit:cover}
.testi-play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(10,8,24,.5);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;transition:.3s}
.testi-play svg{width:28px;height:28px;fill:#fff;margin-left:3px}
.testi-play:hover{background:rgba(139,92,246,.55);transform:scale(1.08)}
.testi-play.playing{opacity:0}
.testi-media:hover .testi-play.playing{opacity:1}
.testi-sound{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(10,8,24,.6);color:#fff;cursor:pointer;font-size:15px;
  backdrop-filter:blur(8px);transition:.3s}
.testi-sound:hover{background:rgba(139,92,246,.5)}
.testi-note{text-align:center;color:var(--muted);font-size:13px;margin-top:34px}

/* Sección 5 — CTA */
.cta-card{position:relative;padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);border-radius:var(--radius-lg);
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(139,92,246,.12),rgba(59,130,246,.06));
  backdrop-filter:blur(16px);text-align:center;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.55)}
.cta-glow{position:absolute;width:520px;height:320px;top:-140px;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(139,92,246,.4),transparent 68%);filter:blur(50px);pointer-events:none}
.cta-card .lead{max-width:560px;margin:0 auto 38px;color:var(--muted)}
.cta-mini{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-size:13.5px;color:var(--muted)}

/* ------------------------------ FOOTER ------------------------------- */
.footer{position:relative;z-index:1;border-top:1px solid var(--line-soft);padding:52px 22px 26px;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.fine{font-size:12.5px;color:var(--muted);max-width:460px;margin-top:12px}
.footer-links{display:flex;gap:24px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.footer-links a:hover{color:#fff}
.copy{text-align:center;color:#5c567c;font-size:12.5px;margin-top:36px}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(120deg,#2AABEE,#229ED9);display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(42,171,238,.42);transition:transform .3s var(--ease)}
.wa-float svg{width:28px;height:28px;fill:#fff}
.wa-float:hover{transform:scale(1.1)}

/* --------------------------- ANIMACIONES ----------------------------- */
.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal{transform:translateY(34px)}
.reveal-left{transform:translateX(-46px) scale(.97)}
.reveal-right{transform:translateX(46px) scale(.97)}
.reveal.in,.reveal-left.in,.reveal-right.in{opacity:1;transform:none}
/* Con "reducir movimiento" se conserva el fundido pero se saca el desplazamiento.
   El detalle está en fx.css. */
html.reduce-motion .reveal,
html.reduce-motion .reveal-left,
html.reduce-motion .reveal-right{transform:none;transition:opacity .8s ease}
html.reduce-motion{scroll-behavior:auto}

/* ---------------------------- RESPONSIVE ----------------------------- */
@media (max-width:960px){
  .split{grid-template-columns:1fr;gap:44px}
  .split-media{max-width:290px;margin:0 auto;width:100%}
  .compare-feats{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:repeat(2,1fr);width:100%}
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav-inner{padding:16px}
  .nav-cta .btn-ghost{display:none}
  .hero{padding:110px 18px 80px}
  .hero-stats{gap:30px;margin-top:48px}
  .stat b{font-size:26px}
  .testi-grid{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .compare{width:100%}
  .compare-box{aspect-ratio:4/3}
  .cmp-label{font-size:10.5px;padding:7px 14px;letter-spacing:2px;top:14px}
  .cmp-label-left{left:14px}.cmp-label-right{right:14px}
  .cmp-knob{width:52px;height:52px}
  .cmp-hint{font-size:13px;padding:10px 20px;bottom:16px}
  .footer-inner{flex-direction:column}
}

/* =====================================================================
   AUTH · PANEL · ADMIN
   ===================================================================== */
.auth-page{min-height:100svh;display:grid;place-items:center;padding:100px 20px 60px;position:relative;z-index:1}
.auth-card{width:100%;max-width:420px;padding:40px 34px;border-radius:var(--radius-lg);
  border:1px solid var(--line);background:rgba(13,10,31,.72);backdrop-filter:blur(18px);
  box-shadow:0 40px 110px rgba(0,0,0,.6)}
.auth-card h1{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;margin-bottom:6px}
.auth-card .sub{color:var(--muted);font-size:14.5px;margin-bottom:28px}
.auth-back{display:inline-block;margin-top:22px;color:var(--muted);font-size:13.5px}
.auth-back:hover{color:#fff}

.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.input,select.input,textarea.input{
  width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03);color:var(--text);font-family:inherit;font-size:15px;
  transition:border-color .25s,box-shadow .25s,background .25s}
.input:focus{outline:none;border-color:rgba(139,92,246,.65);background:rgba(139,92,246,.07);
  box-shadow:0 0 0 4px rgba(139,92,246,.13)}
textarea.input{resize:vertical;min-height:78px}
select.input option{background:#12102a;color:var(--text)}
.btn-block{width:100%}

.alert{padding:13px 16px;border-radius:12px;font-size:14px;margin-bottom:18px;border:1px solid}
.alert-err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#fca5a5}
.alert-ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#86efac}
.alert-info{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.4);color:#93c5fd}

.app{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:104px 22px 70px}
.app-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-bottom:34px}
.app-head h1{font-family:'Sora',sans-serif;font-size:clamp(24px,3.6vw,36px);font-weight:700;letter-spacing:-.5px}
.app-head p{color:var(--muted);font-size:14.5px;margin-top:6px}

.card{border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(13,10,31,.6);
  backdrop-filter:blur(14px);padding:26px}
.card + .card{margin-top:22px}
.card h2{font-family:'Sora',sans-serif;font-size:19px;font-weight:600;margin-bottom:18px}
.card h2 .grad{font-weight:700}

.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{padding:22px;border-radius:var(--radius);border:1px solid var(--line-soft);
  background:linear-gradient(150deg,rgba(139,92,246,.11),rgba(59,130,246,.05))}
.stat-card b{display:block;font-family:'Sora',sans-serif;font-size:30px;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card span{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}

.table-wrap{overflow-x:auto;margin:0 -6px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px}
th{text-align:left;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  padding:12px 12px;border-bottom:1px solid var(--line)}
td{padding:14px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:hover td{background:rgba(139,92,246,.05)}
.tag{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;letter-spacing:.6px;
  border:1px solid;text-transform:uppercase;font-weight:600}
.tag-admin{color:#d8b4fe;border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.12)}
.tag-user{color:#93c5fd;border-color:rgba(59,130,246,.45);background:rgba(59,130,246,.1)}
.tag-on{color:#86efac;border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.1)}
.tag-off{color:#fca5a5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.1)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.mini{padding:7px 13px;font-size:12.5px;border-radius:999px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}

.cred-box{border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.07);border-radius:var(--radius);
  padding:22px;margin-bottom:22px}
.cred-box h3{font-family:'Sora',sans-serif;font-size:16px;margin-bottom:12px;color:#86efac}
.cred-line{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08);font-size:14.5px}
.cred-line span:first-child{color:var(--muted)}
.cred-line b{font-family:ui-monospace,Menlo,monospace}
.cred-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* =====================================================================
   ENTORNO DE USUARIOS
   ===================================================================== */

/* La barra del entorno usa el mismo ancho que el contenido (.app), así el
   borde derecho de los botones queda alineado con el de la página. */
.nav-app .nav-inner{max-width:1220px}

/* navegación entre secciones */
.app-links{font-size:11.6px;gap:18px;letter-spacing:.3px}
@media (max-width:1320px){ .app-links{gap:14px;font-size:11px} }
.app-links a.on{color:#fff}
.app-links a.on::after{width:100%}
.volver{display:inline-block;color:var(--muted);font-size:13.5px;margin-bottom:10px;transition:color .25s}
.volver:hover{color:#fff}
.ayuda{color:var(--muted);font-size:13px;margin-top:14px;line-height:1.6}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.verde{color:#5eead4}
.rojo{color:#f0a0d8}

/* ------------------------- PERFIL EN LA BARRA ------------------------ */
.nav-derecha{display:flex;align-items:center;gap:18px}
.perfil-wrap{position:relative}

/* accesos a los grupos privados */
/* Del celeste de Telegram al violeta de la marca. */
.btn-vip{
  padding:5px 12px;font-size:9.6px;gap:5px;font-weight:700;
  border-color:transparent;color:#fff;
  background:linear-gradient(115deg,#2b8fd4,#6d3ad4);
  box-shadow:0 5px 18px rgba(90,110,220,.24)
}
.btn-vip:hover{
  background:linear-gradient(115deg,#2AABEE,#7c3aed);
  box-shadow:0 8px 26px rgba(90,110,220,.46)
}
.btn-vip .tg-ico{width:13px;height:13px}

/* en pantallas chicas quedan sólo dentro del menú del perfil */
@media (max-width:1120px){
  .btn-vip{display:none}
}
.perfil-btn{
  display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;
  border:1px solid var(--line);background:rgba(139,92,246,.08);color:var(--text);
  font-family:'Sora',sans-serif;font-size:14px;cursor:pointer;
  transition:background .25s,border-color .25s,transform .25s var(--ease)
}
.perfil-btn:hover,.perfil-btn.abierto,.perfil-btn.on{
  background:rgba(139,92,246,.2);border-color:rgba(139,92,246,.55)
}
.perfil-ava{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.5px;box-shadow:0 0 18px rgba(139,92,246,.5)
}
.perfil-ava.grande{width:64px;height:64px;font-size:22px}
.perfil-nom{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perfil-flecha{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.perfil-btn.abierto .perfil-flecha{transform:rotate(180deg)}

.perfil-menu{
  position:absolute;right:0;top:calc(100% + 12px);width:290px;z-index:130;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:rgba(13,10,31,.94);backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s
}
.perfil-menu.on{opacity:1;visibility:visible;transform:none}
.perfil-cabecera{
  display:flex;align-items:center;gap:12px;padding:18px 18px 14px;
  border-bottom:1px solid var(--line-soft)
}
.perfil-cabecera b{display:block;font-family:'Sora',sans-serif;font-size:15px;font-weight:600}
.perfil-cabecera span{display:block;font-size:12.5px;color:var(--muted);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perfil-datos{padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.perfil-datos div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}
.perfil-datos span{color:var(--muted)}
.perfil-datos b{font-weight:500}
.perfil-menu > a{
  display:block;padding:12px 18px;font-size:14px;color:var(--text);
  border-bottom:1px solid var(--line-soft);transition:background .2s,padding-left .2s
}
.perfil-menu > a:last-child{border-bottom:0}
.perfil-menu > a:hover{background:rgba(139,92,246,.14);padding-left:23px}
.perfil-menu > a.salir{color:#fca5a5}

/* cabecera de la página de perfil */
.app-angosta{max-width:880px}
.perfil-cab{display:flex;align-items:center;gap:20px}
.perfil-cab b{display:block;font-family:'Sora',sans-serif;font-size:21px;font-weight:600}
.perfil-cab > div > span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.perfil-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

@media (max-width:640px){
  .perfil-nom{display:none}
  .perfil-btn{padding:5px}
  .perfil-menu{width:260px}
}

/* ---------------------- LAS TRES TARJETAS ---------------------------- */
.acceso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-bottom:28px}
.acceso{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:30px 28px 26px;border-radius:var(--radius-lg);
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(139,92,246,.10),rgba(59,130,246,.04));
  overflow:hidden;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s
}
.acceso::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at 50% -10%,rgba(139,92,246,.22),transparent 70%);
  opacity:0;transition:opacity .4s
}
.acceso:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.55);
  box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 60px rgba(124,58,237,.2)}
.acceso:hover::after{opacity:1}
.acceso-ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:8px;
  background:rgba(139,92,246,.14);border:1px solid var(--line)
}
.acceso-ico svg{width:26px;height:26px;fill:none;stroke:var(--violet-2);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.acceso-ico svg .fill{fill:var(--violet-2);stroke:none}
.acceso b{font-family:'Sora',sans-serif;font-size:19px;font-weight:600}
.acceso-txt{color:var(--muted);font-size:14.5px;line-height:1.6}
.acceso-dato{
  margin-top:10px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--violet-2);font-weight:600
}

/* ---------------------------- TUTORIALES ----------------------------- */
.tut-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.tut-player{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(124,58,237,.14)
}
.tut-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.tut-lista{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(13,10,31,.6);backdrop-filter:blur(14px);padding:16px;
  max-height:70vh;overflow-y:auto
}
.tut-lista-tit{
  font-family:'Sora',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin:6px 6px 14px
}
.tut-item{
  display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;
  border:1px solid transparent;transition:background .25s,border-color .25s
}
.tut-item:hover{background:rgba(139,92,246,.08)}
.tut-item.on{background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.4)}
.tut-thumb{
  position:relative;width:82px;height:48px;border-radius:9px;flex:none;
  background:rgba(139,92,246,.16) center/cover no-repeat;border:1px solid var(--line-soft)
}
.tut-num{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:9px;
  background:rgba(5,4,12,.55);font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:#fff
}
.tut-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.tut-info b{font-size:14.5px;font-weight:500;line-height:1.35}
.tut-info span{font-size:12px;color:var(--muted)}

/* ---------------------------- DESCARGAS ------------------------------ */
.des-grid{display:grid;gap:16px}
.des-item{display:flex;align-items:center;gap:20px}
.des-ext{
  width:56px;height:56px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(139,92,246,.2),rgba(59,130,246,.1));
  border:1px solid var(--line);font-family:'Sora',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.5px;color:#d9d2f5
}
.des-cuerpo{flex:1;min-width:0}
.des-cuerpo b{display:block;font-family:'Sora',sans-serif;font-size:16px;font-weight:600}
.des-cuerpo p{color:var(--muted);font-size:14px;margin-top:4px}
.des-meta{display:block;margin-top:8px;font-size:12.5px;color:#6f6892}

/* ---------------------- CALENDARIO ECONÓMICO ------------------------- */
.cal-card{padding:18px}
.cal-marco{
  position:relative;width:100%;height:min(72vh,700px);min-height:460px;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.02)
}
.cal-marco.cal-claro{background:#fff}
.cal-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cal-marco .tradingview-widget-container{position:absolute;inset:0}
.cal-marco .tradingview-widget-copyright{display:none}
.cal-credito{
  margin-top:12px;text-align:center;font-size:12px;color:var(--muted)
}
.cal-credito a{color:var(--violet-2);text-decoration:underline}

.cal-guia{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.cal-guia > div{
  padding:18px 20px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(255,255,255,.02)
}
.cal-guia b{display:block;font-family:'Sora',sans-serif;font-size:15.5px;font-weight:600;margin:10px 0 5px}
.cal-guia p{color:var(--muted);font-size:14px;line-height:1.6}
.cal-toro{font-size:14px;letter-spacing:1px}
.cal-etq{
  display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;
  color:#c4b5fd;border:1px solid rgba(139,92,246,.42);background:rgba(139,92,246,.12)
}
.cal-aviso{line-height:1.65}

@media (max-width:640px){
  .cal-marco{height:76vh;min-height:520px}
  .cal-card{padding:12px}
}

/* --------------------------- CALCULADORA ----------------------------- */
.calc-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;margin-bottom:22px}
.calc-avanzado{margin-top:6px;border-top:1px solid var(--line-soft);padding-top:14px}
.calc-avanzado summary{
  cursor:pointer;font-size:14px;color:var(--muted);list-style:none;
  padding:6px 0;transition:color .25s
}
.calc-avanzado summary::-webkit-details-marker{display:none}
.calc-avanzado summary::before{content:'▸ ';color:var(--violet-2)}
.calc-avanzado[open] summary::before{content:'▾ '}
.calc-avanzado summary:hover{color:#fff}
.calc-avanzado .grid-3{margin-top:14px}

.calc-panel{
  position:sticky;top:96px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(139,92,246,.12),rgba(13,10,31,.72));
  backdrop-filter:blur(16px);padding:24px
}
.calc-destacado{text-align:center;padding-bottom:20px;border-bottom:1px solid var(--line-soft)}
.calc-destacado > span{
  display:block;font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted)
}
.calc-destacado > b{
  display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(40px,6vw,58px);line-height:1.1;letter-spacing:-2px;margin:6px 0 4px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.calc-destacado > i{display:block;font-style:normal;font-size:12.5px;color:var(--muted)}

.calc-filas{padding:16px 0}
.calc-filas > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;font-size:14px;border-bottom:1px dashed rgba(255,255,255,.06)
}
.calc-filas > div:last-child{border-bottom:0}
.calc-filas span{color:var(--muted)}
.calc-filas b{font-family:'Sora',sans-serif;font-weight:600;font-size:15px;text-align:right}

.calc-aviso{
  padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;
  border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.09);color:#fcd34d
}
.calc-aviso.malo{border-color:rgba(239,68,68,.42);background:rgba(239,68,68,.1);color:#fca5a5}

.calc-formula{
  margin:14px 0;padding:16px 20px;border-radius:12px;
  border:1px solid var(--line);background:rgba(139,92,246,.08);
  font-family:'Sora',sans-serif;font-size:15.5px;text-align:center;letter-spacing:.2px
}
.calc-formula b{color:#5eead4}

@media (max-width:1024px){
  .calc-layout{grid-template-columns:1fr}
  .calc-panel{position:static}
}

/* ----------------------------- AFILIADOS ----------------------------- */
.afi-banner{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(30px,5vw,48px) clamp(20px,4vw,42px);
  border-radius:var(--radius-lg);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(59,130,246,.06));
  margin-bottom:34px
}
.afi-banner::before{
  content:'';position:absolute;width:560px;height:300px;top:-150px;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(139,92,246,.34),transparent 68%);filter:blur(48px);pointer-events:none
}
.afi-kicker{
  position:relative;display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(24px,4vw,40px);letter-spacing:-.5px;text-transform:uppercase;
  margin-bottom:30px
}

.afi-flujo{
  position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.5vw,28px);align-items:center
}
.afi-bloque{
  padding:22px 24px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(5,4,12,.5)
}
.afi-bloque-gana{border-color:rgba(94,234,212,.35);background:rgba(94,234,212,.06)}
.afi-rotulo{
  display:block;font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px
}
.afi-monto{
  display:block;font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(30px,4.6vw,52px);letter-spacing:-1.5px;line-height:1.05;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.afi-monto i{font-style:normal;font-size:.44em;letter-spacing:0}
.afi-monto-gana{background:linear-gradient(120deg,#5eead4,#7dd3fc 60%,#a5b4fc);
  -webkit-background-clip:text;background-clip:text}

.afi-flecha{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:clamp(96px,13vw,150px);padding:20px 14px;
  border-radius:var(--radius);border:1px solid rgba(139,92,246,.4);
  background:linear-gradient(150deg,rgba(139,92,246,.26),rgba(59,130,246,.12))
}
.afi-flecha::after{
  content:'';position:absolute;right:-13px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:24px;height:24px;border-top:1px solid rgba(139,92,246,.4);border-right:1px solid rgba(139,92,246,.4);
  background:linear-gradient(135deg,rgba(139,92,246,.26),rgba(59,130,246,.12));
  border-radius:0 6px 0 0
}
.afi-pct{
  font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(28px,4vw,46px);
  line-height:1;letter-spacing:-1px;color:#fff
}
.afi-pct i{font-style:normal;font-size:.5em}
.afi-pct-txt{
  font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:#e0d8ff;margin-top:6px
}
.afi-nota{
  position:relative;margin-top:26px;color:var(--muted);font-size:14.5px
}
.afi-nota b{color:#5eead4;font-weight:600}

.afi-titulo{
  font-family:'Sora',sans-serif;font-size:20px;font-weight:600;margin:0 0 16px
}
.afi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:22px}
.afi-lic{
  position:relative;padding:28px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(13,10,31,.6);backdrop-filter:blur(14px);
  transition:border-color .3s,transform .35s var(--ease)
}
.afi-lic:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.45)}
.afi-lic.destaca{border-color:rgba(139,92,246,.5);background:linear-gradient(160deg,rgba(139,92,246,.12),rgba(13,10,31,.6))}
.afi-badge{
  position:absolute;top:-11px;left:28px;padding:4px 13px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase
}
.afi-lic-nombre{display:block;font-family:'Sora',sans-serif;font-size:17px;font-weight:600}
.afi-lic-precio{
  font-family:'Sora',sans-serif;font-weight:800;font-size:34px;letter-spacing:-1px;margin:6px 0 12px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.afi-lic-precio i{font-style:normal;font-size:.42em;letter-spacing:0}
.afi-lic-txt{color:var(--muted);font-size:14.5px;line-height:1.65;min-height:48px}
.afi-lic-pie{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:14px
}
.afi-lic-pie span{color:var(--muted)}
.afi-lic-pie b{font-family:'Sora',sans-serif;font-size:18px;color:#5eead4}

.afi-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.afi-cta b{display:block;font-family:'Sora',sans-serif;font-size:19px;font-weight:600}
.afi-cta p{color:var(--muted);font-size:14.5px;margin-top:4px;max-width:520px}

@media (max-width:760px){
  .afi-flujo{grid-template-columns:1fr}
  .afi-flecha::after{
    right:50%;top:auto;bottom:-13px;transform:translateX(50%) rotate(135deg);
    border-radius:0 6px 0 0
  }
  .afi-cta{flex-direction:column;align-items:stretch}
}

/* ------------------------------ FILTROS ------------------------------ */
.filtros{
  border:1px solid var(--line-soft);border-radius:var(--radius);
  background:rgba(13,10,31,.6);backdrop-filter:blur(14px);
  padding:20px 22px;margin-bottom:22px
}
.filtro-rapido{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-family:'Sora',sans-serif;
  border:1px solid var(--line-soft);color:var(--muted);background:rgba(255,255,255,.02);
  transition:all .25s var(--ease)
}
.chip:hover{color:#fff;border-color:rgba(139,92,246,.5)}
.chip.on{
  color:#fff;border-color:rgba(139,92,246,.65);background:rgba(139,92,246,.2);
  box-shadow:0 0 20px rgba(139,92,246,.25)
}
.filtro-campos{
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:14px;align-items:end
}
.filtro-campos .field{margin-bottom:0}
.filtro-btns{display:flex;gap:8px;align-items:center}
.filtro-pie{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  color:var(--muted);font-size:13.5px
}
.filtro-pie b{color:var(--text);font-weight:500}

@media (max-width:900px){
  .filtro-campos{grid-template-columns:1fr 1fr}
  .filtro-btns{grid-column:1 / -1}
}
@media (max-width:560px){
  .filtro-campos{grid-template-columns:1fr}
}

/* ------------------------------ JOURNAL ------------------------------ */
.curva-caja{
  position:relative;height:190px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.015);padding:0
}
.curva{width:100%;height:100%;display:block}
.curva-pie{color:var(--muted);font-size:13px;margin-top:14px}
.dir{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.4px;border:1px solid
}
.dir-compra{color:#5eead4;border-color:rgba(94,234,212,.4);background:rgba(94,234,212,.1)}
.dir-venta {color:#f0a0d8;border-color:rgba(240,160,216,.4);background:rgba(240,160,216,.1)}

@media (max-width:1024px){
  .acceso-grid{grid-template-columns:1fr}
  .tut-layout{grid-template-columns:1fr}
  .tut-lista{max-height:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid-4{grid-template-columns:1fr}
  .des-item{flex-direction:column;align-items:flex-start}
}

.file-list{display:grid;gap:10px}
.file-item{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;border-radius:12px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.02);font-size:14px}
.file-item span:last-child{color:var(--muted);font-size:13px;white-space:nowrap}
.empty{color:var(--muted);font-size:14px;padding:22px;text-align:center;border:1.5px dashed var(--line);border-radius:14px}

/* ------------------------- SESIONES HORARIAS ------------------------- */
.ses-card{padding:26px 28px 22px}

.ses-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;
  flex-wrap:wrap;margin-bottom:26px}
.ses-reloj b{display:block;font-family:'Sora',sans-serif;font-size:34px;font-weight:700;
  letter-spacing:-.5px;line-height:1.15;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ses-reloj span{display:block;font-size:12.5px;color:var(--muted);text-transform:capitalize}
.ses-zona{min-width:260px}
.ses-zona label{display:block;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.ses-zona .input{padding:9px 13px;font-size:14px}

/* --- la barra --- */
.ses-bar{position:relative;padding-top:42px}
.ses-fila{display:grid;grid-template-columns:212px 1fr;align-items:center;gap:0;height:38px}
.ses-nom{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  padding:0 20px 0 4px;white-space:nowrap}
.ses-fila.abierta .ses-nom{color:var(--text)}
.ses-horas{font-style:normal;font-size:11.5px;color:rgba(157,151,189,.62);margin-left:auto;
  padding-left:12px;font-variant-numeric:tabular-nums}
.ses-dot{width:7px;height:7px;border-radius:50%;background:rgba(157,151,189,.32);flex:0 0 auto}
.ses-fila.abierta .ses-dot{background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}

.ses-pista{position:relative;height:100%;border-radius:8px}
.ses-fila:not(.ses-regla) .ses-pista{background:rgba(255,255,255,.028);
  border:1px solid var(--line-soft);height:24px}

.ses-bloque{position:absolute;top:-1px;bottom:-1px;border-radius:7px;
  background:var(--c);border:1px solid var(--c);opacity:.62;   /* respaldo si no hay color-mix */
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 62%,transparent),
                                    color-mix(in srgb,var(--c) 34%,transparent));
  border:1px solid color-mix(in srgb,var(--c) 70%,transparent);
  box-shadow:0 3px 14px color-mix(in srgb,var(--c) 22%,transparent)}
@supports (color:color-mix(in srgb,red 50%,transparent)){ .ses-bloque{opacity:1} }

.ses-solape-fila{margin-top:4px}
.ses-solape-fila .ses-nom{font-size:12.5px;letter-spacing:.4px}
.ses-solape{position:absolute;top:-1px;bottom:-1px;border-radius:7px;
  background:repeating-linear-gradient(115deg,rgba(251,191,36,.42) 0 7px,rgba(251,191,36,.16) 7px 14px);
  border:1px solid rgba(251,191,36,.5);box-shadow:0 3px 16px rgba(251,191,36,.16)}

/* --- regla de horas --- */
.ses-regla{height:30px}
.ses-tick{position:absolute;bottom:0;width:1px;height:6px;background:rgba(255,255,255,.10)}
.ses-tick.g{height:9px;background:rgba(255,255,255,.2)}
.ses-tick b{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-family:'Sora',sans-serif;font-size:10.5px;font-weight:500;color:var(--muted);
  letter-spacing:.4px}

/* --- línea de la hora actual --- */
.ses-ahora-capa{position:absolute;left:212px;right:0;top:72px;bottom:0;pointer-events:none}
.ses-ahora{position:absolute;top:-54px;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.28));
  box-shadow:0 0 12px rgba(255,255,255,.35)}
.ses-ahora span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-family:'Sora',sans-serif;font-size:10.5px;font-weight:600;color:#fff;line-height:1.35;
  background:rgba(20,16,44,.92);border:1px solid rgba(255,255,255,.16);
  padding:1px 7px;border-radius:999px;white-space:nowrap}

/* --- leyenda --- */
.ses-leyenda{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.ses-leyenda span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.ses-leyenda i{width:14px;height:9px;border-radius:3px;flex:0 0 auto;opacity:.8}
.ses-leyenda .ses-i-solape{
  background:repeating-linear-gradient(115deg,rgba(251,191,36,.6) 0 5px,rgba(251,191,36,.2) 5px 10px);
  opacity:1}

@media (max-width:760px){
  .ses-card{padding:20px 16px 18px}
  .ses-fila{grid-template-columns:96px 1fr;height:36px}
  .ses-nom{font-size:12.5px;padding-right:10px}
  .ses-horas{display:none}
  .ses-ahora-capa{left:96px;top:72px}
  .ses-reloj b{font-size:28px}
  .ses-zona{min-width:100%}
}

/* --- franja de volatilidad y marcador arrastrable --- */
.ses-vol-fila{height:74px;margin-top:10px;align-items:stretch}
.ses-vol-fila .ses-nom{align-self:center}
.ses-fila.ses-vol-fila .ses-pista{height:auto;margin:6px 0 10px;
  background:rgba(255,255,255,.02);border:1px solid var(--line-soft);overflow:visible}
.ses-curva{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ses-punto{position:absolute;width:9px;height:9px;border-radius:50%;
  margin:-4.5px 0 0 -4.5px;background:#fff;
  box-shadow:0 0 0 2.5px rgba(12,9,32,.92),0 0 12px rgba(255,255,255,.35);
  transition:background .2s var(--ease)}

.ses-ahora-capa{pointer-events:auto;cursor:ew-resize;touch-action:none}
.ses-ahora{cursor:grab;outline:none}
.ses-ahora:active{cursor:grabbing}
.ses-ahora::before{content:'';position:absolute;top:0;bottom:0;left:-11px;right:-11px}
.ses-tirador{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(20,16,44,.92),0 2px 12px rgba(0,0,0,.55),0 0 16px rgba(255,255,255,.35);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.ses-bar:hover .ses-tirador,.ses-ahora:focus-visible .ses-tirador{
  transform:translateX(-50%) scale(1.18);
  box-shadow:0 0 0 3px rgba(20,16,44,.92),0 2px 14px rgba(0,0,0,.6),0 0 22px rgba(255,255,255,.55)}
.ses-ahora:active .ses-tirador{transform:translateX(-50%) scale(1.06)}
.ses-ahora:focus-visible span{box-shadow:0 0 0 2px rgba(168,85,247,.9)}
.ses-ahora.movido{background:linear-gradient(180deg,rgba(251,191,36,.95),rgba(251,191,36,.4));
  box-shadow:0 0 14px rgba(251,191,36,.45)}
.ses-ahora.movido span{border-color:rgba(251,191,36,.55);color:#fde68a}
.ses-ahora.movido .ses-tirador{background:#fde68a;
  box-shadow:0 0 0 3px rgba(20,16,44,.92),0 2px 12px rgba(0,0,0,.55),0 0 18px rgba(251,191,36,.6)}

/* --- lectura del marcador --- */
.ses-lectura{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:26px;padding:18px 20px;border-radius:16px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.022)}
.ses-lec-hora{min-width:112px}
.ses-lec-hora span{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
.ses-lec-hora b{font-family:'Sora',sans-serif;font-size:27px;font-weight:700;letter-spacing:-.5px}

.ses-lec-vol{flex:1;min-width:240px}
.ses-lec-alto{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.ses-lec-alto b{font-family:'Sora',sans-serif;font-size:16px;font-weight:600}
.ses-lec-alto u{text-decoration:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.niv-n0{color:var(--muted)}
.niv-n1{color:#fb7185}.niv-n2{color:#fb923c}.niv-n3{color:#facc15}
.niv-n4{color:#a3e635}.niv-n5{color:#4ade80}
.ses-medidor{height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.ses-medidor i{display:block;height:100%;border-radius:999px;transition:width .25s var(--ease),background .25s var(--ease)}
.ses-lec-vol > span{display:block;font-size:12.5px;color:var(--muted);margin-top:8px}
.ses-volver{padding:8px 16px;font-size:12.5px}

@media (max-width:760px){
  .ses-lectura{gap:16px;padding:15px 16px}
  .ses-lec-hora b{font-size:23px}
  .ses-tirador{width:14px;height:14px;top:5px}
}

/* ===================== DESPLEGABLE PROPIO =========================
   El <select> nativo pinta los <optgroup> con fondo claro y no deja
   tocar la barra de scroll del panel. Se reemplaza por una lista
   propia; el <select> real sigue en el DOM, oculto, para que el resto
   del código lo siga leyendo igual.
   ================================================================== */
.dd{position:relative}
.dd-nativo{display:none}

.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;cursor:pointer;font-family:inherit}
.dd-btn svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--muted);stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.dd.abierto{z-index:60}
.dd.abierto .dd-btn{border-color:rgba(139,92,246,.65);background:rgba(139,92,246,.07)}
.dd.abierto .dd-btn svg{transform:rotate(180deg)}

.dd-panel{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:60;
  max-height:308px;overflow-y:auto;overscroll-behavior:contain;
  padding:7px;border-radius:14px;border:1px solid rgba(139,92,246,.32);
  background:#0c0920;box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.dd.abierto .dd-panel{opacity:1;visibility:visible;transform:none}

.dd-grupo{padding:12px 12px 6px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(157,151,189,.72);font-weight:600}
.dd-grupo + .dd-op{margin-top:0}

.dd-op{padding:8px 12px;border-radius:9px;font-size:14px;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:1.4}
.dd-op:hover,.dd-op.marcada{background:rgba(139,92,246,.16)}
.dd-op.on{background:linear-gradient(115deg,rgba(168,85,247,.26),rgba(59,130,246,.18));
  color:#fff;font-weight:500}
.dd-op.on::after{content:'';width:13px;height:7px;flex:0 0 auto;margin-right:2px;
  border-left:2px solid #c4b5fd;border-bottom:2px solid #c4b5fd;
  transform:rotate(-45deg) translateY(-2px)}

/* barra de scroll violeta */
.dd-panel{scrollbar-width:thin;scrollbar-color:#8b5cf6 rgba(255,255,255,.05)}
.dd-panel::-webkit-scrollbar{width:10px}
.dd-panel::-webkit-scrollbar-track{background:rgba(255,255,255,.045);border-radius:999px;margin:6px 0}
.dd-panel::-webkit-scrollbar-thumb{border-radius:999px;border:2px solid #0c0920;
  background:linear-gradient(180deg,#a855f7,#6d3ad4)}
.dd-panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c084fc,#7c3aed)}

/* ------------------- ENLACES / DÓNDE ENCONTRARNOS -------------------- */
/* 3 tarjetas en una sola línea */
.enlace-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:940px;margin:52px auto 0
}

.enlace{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;padding:30px 22px 26px;border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(13,10,31,.55);
  transition:opacity .8s var(--ease),transform .4s var(--ease),
             border-color .3s,background .3s,box-shadow .3s
}
.enlace:hover{
  transform:translateY(-5px);border-color:rgba(139,92,246,.42);
  background:rgba(20,15,44,.72);box-shadow:0 18px 44px rgba(90,60,190,.22)
}

.enlace-ico{
  width:56px;height:56px;display:grid;place-items:center;border-radius:16px;
  background:var(--grad-soft);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s
}
.enlace:hover .enlace-ico{transform:scale(1.07);box-shadow:0 0 26px rgba(139,92,246,.32)}
.enlace-ico svg{width:26px;height:26px;fill:#c9c2f2;stroke:none}
.enlace-ico svg.trazo{fill:none;stroke:#c9c2f2;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.enlace-ico svg.trazo .lleno{fill:#c9c2f2;stroke:none}
.enlace-ico svg .hueco{fill:#0d0a1f}
.enlace:hover .enlace-ico svg{fill:#fff}
.enlace:hover .enlace-ico svg.trazo{fill:none;stroke:#fff}
.enlace:hover .enlace-ico svg.trazo .lleno{fill:#fff}
.enlace:hover .enlace-ico svg .hueco{fill:#0d0a1f}

.enlace b{font-family:'Sora',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.2px}
.enlace > span:last-child{font-size:13.5px;color:var(--muted);line-height:1.5}

@media (max-width:560px){
  .enlace-grid{grid-template-columns:1fr;max-width:360px;gap:14px}
  .enlace{flex-direction:row;text-align:left;padding:18px 20px;gap:16px;align-items:center}
  .enlace-ico{width:46px;height:46px;flex:0 0 auto;border-radius:13px}
  .enlace-ico svg{width:22px;height:22px}
}

/* --------------------- PREGUNTAS FRECUENTES -------------------------- */
.faq-lista{max-width:880px;margin:50px auto 0;display:grid;gap:12px}

.faq-item{
  border:1px solid var(--line-soft);border-radius:16px;
  background:rgba(13,10,31,.5);overflow:hidden;
  transition:opacity .8s var(--ease),transform .55s var(--ease),
             border-color .28s var(--ease),background .28s var(--ease)
}
.faq-item:hover{border-color:rgba(139,92,246,.3)}
.faq-item[open]{border-color:rgba(139,92,246,.42);background:rgba(20,15,44,.62)}

.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px 22px;cursor:pointer;list-style:none;
  font-family:'Sora',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.2px;
  color:var(--text);transition:color .25s
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:''}
.faq-item summary:hover{color:#fff}
.faq-item summary:focus-visible{outline:2px solid rgba(168,85,247,.7);outline-offset:-2px;border-radius:16px}

/* el signo + que gira hasta ser un − */
.faq-mas{position:relative;width:19px;height:19px;flex:0 0 auto}
.faq-mas::before,.faq-mas::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--violet-2);
  border-radius:2px;transform:translate(-50%,-50%);
  transition:transform .32s var(--ease),background .25s
}
.faq-mas::before{width:15px;height:2px}
.faq-mas::after {width:2px;height:15px}
.faq-item[open] .faq-mas::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.faq-item[open] .faq-mas::before{transform:translate(-50%,-50%) rotate(180deg)}

/* El recuadro se abre al instante, así que si el texto entrara con un
   desplazamiento largo se leería como demora. Sólo un fundido muy corto,
   apenas para que no aparezca de golpe. */
.faq-cuerpo{padding:0 22px 20px;animation:faqAbrir .13s linear both}
.faq-cuerpo p{color:var(--muted);font-size:15px;line-height:1.75;max-width:74ch}
@keyframes faqAbrir{from{opacity:0}to{opacity:1}}
html.reduce-motion .faq-cuerpo{animation:none}

.faq-pie{text-align:center;margin-top:34px;color:var(--muted);font-size:14.5px}
.faq-pie a{color:var(--violet-2);border-bottom:1px solid rgba(168,85,247,.4)}
.faq-pie a:hover{color:#c4b5fd;border-bottom-color:#c4b5fd}

@media (max-width:640px){
  .faq-item summary{padding:16px 17px;font-size:14.8px;gap:14px}
  .faq-cuerpo{padding:0 17px 17px}
  .faq-cuerpo p{font-size:14.3px}
}

/* ------------- DESCARGO LEGAL (dentro de la sección Adquirir) --------- */
.descargo{
  /* ancho explícito + márgenes laterales por separado: así queda centrado
     aunque algún otro estilo toque el atajo "margin" */
  width:min(860px,100%);margin-left:auto;margin-right:auto;
  margin-top:56px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.05);
  font-size:11.8px;line-height:1.72;color:rgba(157,151,189,.62);
  text-align:left
}
.descargo b{
  display:block;margin-bottom:12px;font-weight:600;text-align:center;
  font-size:11.2px;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(157,151,189,.78)
}
.descargo p + p{margin-top:11px}

/* el descargo ya es el cierre de la página: se recorta el relleno inferior
   de la sección y el margen del pie para que no quede un hueco enorme */
.adquirir{padding-bottom:clamp(38px,4vw,56px)}
.adquirir + .footer{margin-top:0}

@media (max-width:640px){
  .descargo{margin-top:40px;font-size:11.2px}
}

/* ------------------------- MENÚ MÓVIL -------------------------------- */
/* El panel reutiliza los enlaces del escritorio: no hay una segunda lista
   que pueda quedar desactualizada al agregar secciones. */
@media (max-width:1024px){
  .nav.menu-abierto{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    background:rgba(5,4,12,.9);border-bottom:1px solid var(--line)}

  .nav.menu-abierto .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    padding:6px 0 10px;
    background:rgba(8,6,20,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);
    box-shadow:0 26px 60px rgba(0,0,0,.6);
    animation:menuBaja .22s var(--ease) both
  }
  .nav.menu-abierto .nav-links a{
    padding:15px 24px;font-size:15.5px;color:var(--text);
    border-bottom:1px solid rgba(255,255,255,.04)
  }
  .nav.menu-abierto .nav-links a:last-child{border-bottom:0}
  .nav.menu-abierto .nav-links a:active{background:rgba(139,92,246,.14)}
  .nav.menu-abierto .nav-links a::after{display:none}

  @keyframes menuBaja{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  html.reduce-motion .nav.menu-abierto .nav-links{animation:none}

  /* el botón se convierte en una X */
  .nav-burger span{transform-origin:center}
  .nav.menu-abierto .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.menu-abierto .nav-burger span:nth-child(2){opacity:0}
  .nav.menu-abierto .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* --------- COMPARADOR EN PANTALLA TÁCTIL ---------
   Sin esto el navegador se queda con el gesto apenas movés el dedo y el
   comparador se congela. "pan-y" deja que el scroll vertical siga
   funcionando: sólo el arrastre horizontal pasa a ser nuestro. */
.compare-box{touch-action:pan-y}
.cmp-handle,.cmp-knob{touch-action:none}