/* ========================================================
   ÁUREA. Sistema de diseño premium (tema oscuro único)

   Un solo tema para todo el sitio. Antes la home alternaba oscuro y claro
   seis veces y se sentía como entrar a webs distintas al scrollear.
   Las superficies suben de tono con la elevación: bg < bg2 < surface < surface2.
======================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0e1c;
  --bg2:#0e1326;
  --bg3:#141a33;
  --surface:#111730;
  --surface2:#171e3c;
  --navy:#0a0e1c;
  --navy2:#0e1326;
  --navy3:#141a33;
  --gold:#ec4899;
  --gold2:#f9a8d4;
  --gold-soft:rgba(249,168,212,.3);
  --violet:#7c6cff;
  --blue:#2f7bff;
  --text:#eef1f8;
  --text2:#a6aec4;
  --muted:#8791a8;
  --border:rgba(255,255,255,.09);
  --border2:rgba(255,255,255,.18);
  --green:#2dd4a0;
  --red:#f0506e;
  /* Escala de radios única (shape lock): controles, tarjetas, paneles.
     Antes convivían 9, 10, 11, 12, 14, 17, 18 y 22px sin criterio. */
  --r-ctl:10px;--r-card:16px;--r-panel:22px;
  --r:16px;--r-lg:22px;
  --shadow:0 6px 30px rgba(0,0,0,.4);
  --shadow-lg:0 26px 70px rgba(0,0,0,.55);
  --gold-grad:linear-gradient(135deg,#f9a8d4,#ec4899 55%,#be185d);
  --maxw:1160px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Foco visible en todo lo navegable por teclado. Antes no había ninguno:
   quien no usa mouse no tenía forma de saber dónde estaba parado. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold2);outline-offset:3px;border-radius:6px;
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.text-center{text-align:center}
.text-center .section-desc{margin-left:auto;margin-right:auto}

/* -- TYPOGRAPHY -- */
h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.1;font-weight:800}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:'';width:24px;height:1.5px;background:var(--gold);display:inline-block}
.eyebrow.center{justify-content:center}
.band-dark .eyebrow{color:var(--gold2)}
.gold{color:var(--gold)}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* -- BANDS + AURORA (fondos animados) -- */
.band{position:relative;overflow:hidden}
.band-dark{background:var(--navy);color:#fff}
.band-soft{background:var(--bg2)}
.band-line{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.aurora::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 0);background-size:40px 40px}
.blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;will-change:transform}
.b1{width:440px;height:440px;background:radial-gradient(circle,#e9b64a,transparent 68%);top:-150px;left:-70px;animation:fl1 24s ease-in-out infinite}
.b2{width:400px;height:400px;background:radial-gradient(circle,#7c6cff,transparent 68%);top:-70px;right:-90px;animation:fl2 30s ease-in-out infinite}
.b3{width:520px;height:520px;background:radial-gradient(circle,#2f7bff,transparent 70%);bottom:-240px;left:34%;animation:fl3 36s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.15)}}
@keyframes fl2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,60px) scale(1.12)}}
@keyframes fl3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-60px) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.blob{animation:none}}

/* -- NAV -- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;transition:.3s;
  background:rgba(10,14,28,.72);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px}
.logo-mark{width:42px;height:42px;padding:7px;box-sizing:border-box;display:block;flex-shrink:0;border-radius:12px;background:radial-gradient(120% 120% at 30% 20%,#16234d,#0f1a3a 60%,#0a1228);border:1.5px solid rgba(236,72,153,.4);box-shadow:0 0 18px rgba(236,72,153,.22),inset 0 1px 0 rgba(249,168,212,.18)}
.logo-word{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff}
.logo-word .ac{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-size:14.5px;color:rgba(255,255,255,.7);font-weight:500;padding:8px 15px;border-radius:var(--r-ctl);transition:.2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a.active{color:#fff;font-weight:600}
.nav-links a.active::after{content:'';display:block;height:2px;border-radius:2px;background:var(--gold-grad);margin-top:5px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.nav-access{background:var(--gold-grad)!important;color:#10142a!important;font-weight:700!important;border-radius:var(--r-ctl);margin-left:6px;box-shadow:0 6px 16px rgba(236,72,153,.35);white-space:nowrap;text-align:center}
.nav-access:hover{background:var(--gold-grad)!important;color:#10142a!important;transform:translateY(-1px)}
.nav-access::after{display:none!important}

/* -- BUTTONS -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;
  border-radius:var(--r-ctl);padding:14px 28px;cursor:pointer;transition:.25s;border:none;font-family:inherit}
.btn-primary{background:var(--gold-grad);color:#10142a;box-shadow:0 10px 30px rgba(236,72,153,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(236,72,153,.5)}
.btn-dark{background:var(--surface2);color:var(--text);border:1.5px solid var(--border2)}
.btn-dark:hover{background:var(--bg3);border-color:var(--gold);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border2)}
.btn-outline:hover{border-color:var(--gold);background:rgba(249,168,212,.1);color:var(--gold2)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-lg{padding:16px 34px;font-size:16px}

/* -- SECTIONS -- */
section{padding:104px 0}
.section-title{font-size:clamp(29px,3.8vw,46px);margin-bottom:18px}
.section-desc{font-size:18px;color:var(--text2);max-width:620px;line-height:1.6}
.band-dark .section-desc{color:rgba(255,255,255,.65)}
.section-head{margin-bottom:58px}

/* -- HERO -- */
.hero{padding:118px 0 88px}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:40px;padding:8px 16px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.82);margin-bottom:26px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(34px,3.9vw,48px);margin-bottom:20px;color:#fff}
.hero-desc{font-size:19px;color:rgba(255,255,255,.72);max-width:510px;margin-bottom:36px;line-height:1.6}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px}
.hero-proof{display:flex;gap:42px;flex-wrap:wrap}
.proof-val{font-size:30px;font-weight:800;color:#fff}
.proof-val .g{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-label{font-size:12.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.trustbar{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ht{display:flex;align-items:center;gap:12px;min-width:0}
.ht .htic{width:42px;height:42px;border-radius:var(--r-ctl);background:rgba(249,168,212,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(249,168,212,.25)}
.ht .htic svg{width:22px;height:22px}
.ht b{display:block;font-size:14px;color:#fff;font-weight:600}
.ht span{font-size:12.5px;color:rgba(255,255,255,.55)}

/* -- APP WINDOW (mockup de plataforma) -- */
.appwin{background:#0c1024;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-panel);overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.55);position:relative}
.appwin::before{content:'';position:absolute;inset:0;border-radius:var(--r-panel);padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(249,168,212,.5),transparent 40%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.aw-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.aw-dot{width:10px;height:10px;border-radius:50%}
.aw-title{font-size:12px;color:rgba(255,255,255,.5);margin-left:10px;font-weight:500}
.aw-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.aw-live.is-demo{color:var(--muted);background:rgba(255,255,255,.06);font-weight:600;letter-spacing:.04em}
/* Captura real del portal dentro del marco de ventana. Reemplaza a los mockups
   dibujados con divs: el `display:block` evita la franja fantasma que deja la
   línea base del inline, y el fondo coincide con el de la captura para que no
   se vea un flash claro mientras carga. */
.aw-shot{display:block;width:100%;height:auto;background:#0d101a}
/* La captura del hero está recortada a media pantalla del portal. Sin esto el
   corte parece un error de render; con el degradado se lee como que la ventana
   sigue más abajo. */
.appwin.is-cut{position:relative}
.appwin.is-cut::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#0c1024)}
.aw-caption{margin-top:12px;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.aw-layout{display:grid;grid-template-columns:60px 1fr}
.aw-side{border-right:1px solid rgba(255,255,255,.07);padding:16px 0;display:flex;flex-direction:column;gap:8px;align-items:center}
.aw-side i{width:34px;height:34px;border-radius:var(--r-ctl);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35)}
.aw-side i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.aw-side i.on{background:rgba(249,168,212,.14);color:var(--gold2)}
.aw-main{padding:22px}
.aw-eyebrow{font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.aw-balance{font-size:34px;font-weight:800;color:var(--gold2);margin:8px 0 2px}
.aw-sub{font-size:12px;color:rgba(255,255,255,.58);margin-bottom:18px}
.aw-chart{display:flex;gap:5px;align-items:flex-end;height:74px;margin-bottom:18px}
.aw-b{flex:1;border-radius:4px 4px 0 0;transition:height .5s ease}
.aw-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.aw-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-ctl);padding:12px 14px}
.aw-stat .v{font-size:18px;font-weight:800}
.aw-stat .v.green{color:#34d399}.aw-stat .v.gold{color:var(--gold2)}
.aw-stat .l{font-size:10.5px;color:rgba(255,255,255,.58);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.aw-rows{display:flex;flex-direction:column}
.aw-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:rgba(255,255,255,.85)}
.aw-sym{display:flex;align-items:center;gap:9px;font-weight:600}
.aw-coin{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#0c1024}
.aw-pl{font-weight:700}
.aw-pl.up{color:#34d399}.aw-pl.down{color:#f87171}

/* -- MONEDAS FLOTANTES (hero) -- */
.hero-visual{position:relative}
.coin{position:absolute;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:21px;color:#fff;z-index:4;
  box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 2px 7px rgba(255,255,255,.4),inset 0 -3px 8px rgba(0,0,0,.25);
  animation:coinfloat 6s ease-in-out infinite}
.coin::after{content:'';position:absolute;top:7px;left:12px;width:16px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);filter:blur(2px)}
.coin.sm{width:44px;height:44px;font-size:17px}
.coin.c-btc{background:radial-gradient(circle at 32% 26%,#ffc27a,#f7931a)}
.coin.c-eth{background:radial-gradient(circle at 32% 26%,#9aa9ff,#627eea)}
.coin.c-gold{background:radial-gradient(circle at 32% 26%,#fbcfe8,#ec4899)}
.coin.c-usd{background:radial-gradient(circle at 32% 26%,#6fe0b0,#12b886)}
.coin.c-pct{background:radial-gradient(circle at 32% 26%,#ffa78a,#f0506e)}
@keyframes coinfloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.coin{animation:none}}

/* -- TICKER -- */
.ticker{background:var(--navy2);padding:15px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.ticker-track{display:flex;gap:46px;animation:tick 34s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:8px;font-size:13.5px;white-space:nowrap;color:rgba(255,255,255,.55)}
.ticker-sym{font-weight:700;color:#fff}
.ticker-up{color:#34d399}.ticker-down{color:#f87171}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -- FEATURE CARDS -- */
/* Bento con ritmo, no seis tarjetas iguales en fila.
   Seis celdas exactas: 4+2 / 2+4 / 3+3. Las dos anchas van tintadas para que
   la grilla no sea un bloque plano de superficies idénticas. */
.feature-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.feature-card{grid-column:span 2;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-panel);padding:32px;transition:.3s;position:relative;overflow:hidden}
.feature-card:nth-child(1){grid-column:span 4}
.feature-card:nth-child(4){grid-column:span 4}
.feature-card:nth-child(5),.feature-card:nth-child(6){grid-column:span 3}
.feature-card:nth-child(1)::before,.feature-card:nth-child(4)::before{
  content:'';position:absolute;top:-40%;right:-10%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.16),transparent 68%);pointer-events:none}
.feature-card:nth-child(4)::before{background:radial-gradient(circle,rgba(124,108,255,.16),transparent 68%)}
.feature-card:nth-child(1)>*,.feature-card:nth-child(4)>*{position:relative}
/* Las anchas se leen mejor con el ícono al costado que apilado. */
@media(min-width:961px){
  .feature-card:nth-child(1),.feature-card:nth-child(4){display:grid;grid-template-columns:62px 1fr;gap:24px;align-items:start}
  .feature-card:nth-child(1) .feature-icon,.feature-card:nth-child(4) .feature-icon{margin-bottom:0;grid-row:span 2}
}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--gold-soft)}
.feature-icon{width:62px;height:62px;border-radius:var(--r-card);background:rgba(249,168,212,.13);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(236,72,153,.25);animation:au-float 4.6s ease-in-out infinite}
.feature-icon::after{content:'';position:absolute;inset:-6px;border-radius:22px;z-index:-1;
  background:radial-gradient(circle,rgba(236,72,153,.35),transparent 70%);opacity:0;transition:.3s;filter:blur(8px)}
.feature-card:hover .feature-icon::after{opacity:1}
.feature-card:nth-child(3n+2) .feature-icon{animation-delay:.7s}
.feature-card:nth-child(3n) .feature-icon{animation-delay:1.4s}
.feature-svg{width:32px;height:32px}
.feature-svg.spin{animation:au-spin 18s linear infinite;transform-origin:16px 16px}
.feature-card h3{font-size:20px;margin-bottom:10px}
.feature-card p{font-size:15px;color:var(--text2);line-height:1.6}
@keyframes au-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes au-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.feature-icon,.feature-svg.spin{animation:none}}

/* -- MODALIDADES CARDS -- */
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.mod-card{border:1.5px solid var(--border);border-radius:var(--r-panel);padding:40px;position:relative;overflow:hidden;transition:.3s;background:var(--surface)}
.mod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.mod-card.featured{background:var(--surface2);border-color:var(--gold-soft)}
.mod-card.featured,.mod-card.featured *{color:#fff}
.mod-card.featured::before{content:'';position:absolute;top:-30%;right:-15%;width:280px;height:280px;
  background:radial-gradient(circle,rgba(236,72,153,.28),transparent 70%);filter:blur(20px)}
.mod-badge{position:absolute;top:26px;right:26px;background:var(--gold-grad);color:#10142a;font-size:11px;font-weight:800;
  padding:5px 13px;border-radius:20px;letter-spacing:.04em;z-index:1}
.mod-tile{width:56px;height:56px;border-radius:var(--r-card);background:rgba(249,168,212,.13);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;box-shadow:inset 0 0 0 1px rgba(236,72,153,.25)}
.mod-card.featured .mod-tile{background:rgba(249,168,212,.14);box-shadow:inset 0 0 0 1px rgba(249,168,212,.3)}
.mod-tile svg{width:30px;height:30px}
.mod-card h3{font-size:24px;margin-bottom:12px;position:relative}
.mod-card>p{font-size:15.5px;color:var(--text2);line-height:1.65;margin-bottom:26px;position:relative}
.mod-card.featured>p{color:rgba(255,255,255,.75)}
.mod-features{display:flex;flex-direction:column;gap:12px;position:relative}
.mod-feat{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--text2)}
.mod-feat::before{content:'✓';color:var(--green);font-weight:800;flex-shrink:0;background:rgba(18,184,134,.12);
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}
.mod-card.featured .mod-feat{color:rgba(255,255,255,.82)}
.mod-card.featured .mod-feat::before{background:rgba(52,211,153,.18);color:#34d399}
.mod-cta{margin-top:30px;position:relative}

/* -- NUMBERS (dark band) -- */
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.num-col{padding:18px 24px;border-right:1px solid rgba(255,255,255,.1)}
.num-col:last-child{border-right:none}
.num-val{font-size:48px;font-weight:800;letter-spacing:-.03em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.num-val .s{font-size:28px}
.num-label{font-size:13px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;font-weight:600}

/* -- STEPS -- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:'';position:absolute;top:32px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--border2),transparent)}
.step{text-align:center;position:relative;z-index:1}
.step-num{width:66px;height:66px;border-radius:50%;background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:23px;background-clip:padding-box;color:var(--gold);margin:0 auto 20px;transition:.3s}
.step:hover .step-num{border-color:var(--gold);transform:scale(1.07);box-shadow:0 10px 28px rgba(236,72,153,.28)}
.step h4{font-size:17px;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--text2);line-height:1.55}

/* -- FLOW (detalle) -- */
.flow{display:flex;flex-direction:column}
.flow-row{display:grid;grid-template-columns:72px 1fr;gap:28px;padding:36px 0;border-bottom:1px solid var(--border)}
.flow-row:last-child{border-bottom:none}
.flow-num{font-size:20px;font-weight:800;color:#10142a;width:60px;height:60px;border-radius:16px;
  background:var(--gold-grad);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(236,72,153,.35)}
.flow-body h3{font-size:23px;margin-bottom:10px}
.flow-body p{font-size:16px;color:var(--text2);line-height:1.65;max-width:640px}

/* -- PLATFORM SPLIT -- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-body h2{font-size:clamp(27px,3.4vw,40px);margin-bottom:18px}
.split-body p{font-size:16.5px;color:var(--text2);line-height:1.65;margin-bottom:16px}
.band-dark .split-body p{color:rgba(255,255,255,.7)}
.split-list{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.split-list-item{display:flex;gap:14px;align-items:flex-start}
.split-list-item .ic{width:42px;height:42px;border-radius:var(--r-ctl);background:rgba(249,168,212,.13);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(236,72,153,.25)}
.band-dark .split-list-item .ic{background:rgba(249,168,212,.14);box-shadow:inset 0 0 0 1px rgba(249,168,212,.28)}
.split-list-item .ic svg{width:22px;height:22px}
.split-list-item .tx b{display:block;font-size:15.5px;margin-bottom:2px}
.split-list-item .tx span{font-size:14px;color:var(--text2)}
.band-dark .split-list-item .tx span{color:rgba(255,255,255,.6)}

/* -- COMPARE -- */
.compare-wrap{overflow-x:auto}
.compare{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.compare th,.compare td{padding:18px 22px;text-align:left;font-size:15px;border-bottom:1px solid var(--border)}
.compare thead th{background:var(--navy);color:#fff;font-weight:700}
.compare thead th:first-child{background:var(--navy2)}
.compare tbody tr:last-child td{border-bottom:none}
.compare td:first-child{font-weight:600;color:var(--text);background:rgba(255,255,255,.03)}
.compare .yes{color:var(--green);font-weight:700}
.compare .no{color:var(--muted)}
.compare tbody tr:hover td,.compare tbody tr:hover td:first-child{background:rgba(255,255,255,.05)}

/* -- TESTIMONIALS -- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-panel);padding:32px;transition:.3s}
.tst-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.tst-stars{color:var(--gold);font-size:15px;margin-bottom:14px;letter-spacing:2px}
.tst-text{font-size:15.5px;color:var(--text);line-height:1.65;margin-bottom:22px}
.tst-author{display:flex;align-items:center;gap:12px}
.tst-avatar{width:46px;height:46px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;font-weight:800;color:#10142a;font-size:16px}
.tst-name{font-size:14.5px;font-weight:700}
.tst-role{font-size:12.5px;color:var(--muted)}

/* -- VALUES -- */
/* Seis valores en seis celdas exactas, con ritmo 3+3 partido en 2+4 / 4+2. */
.value-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.value-card{grid-column:span 2}
.value-card:nth-child(1){grid-column:span 4}
.value-card:nth-child(6){grid-column:span 4}
.value-card:nth-child(1),.value-card:nth-child(6){background:var(--surface2)}
.value-card{padding:32px;border-radius:var(--r-panel);background:var(--surface);border:1px solid var(--border);transition:.3s}
.value-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--gold-soft)}
.value-tile{width:52px;height:52px;border-radius:var(--r-card);background:rgba(249,168,212,.13);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(236,72,153,.25)}
.value-tile svg{width:28px;height:28px}
.value-card h3{font-size:19px;margin-bottom:10px}
.value-card p{font-size:14.5px;color:var(--text2);line-height:1.6}

/* -- FAQ -- */
.faq{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--r-card);margin-bottom:14px;overflow:hidden;background:var(--surface);transition:.2s}
.faq-item[open]{border-color:var(--gold-soft);box-shadow:var(--shadow)}
.faq-item summary{padding:21px 24px;font-size:16.5px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:26px;color:var(--gold);font-weight:400;transition:.2s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 24px 22px;font-size:15px;color:var(--text2);line-height:1.65}

/* -- CTA BAND -- */
.cta-band{padding:96px 0;text-align:center}
.cta-band h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:16px;color:#fff}
.cta-band p{font-size:18px;color:rgba(255,255,255,.7);max-width:540px;margin:0 auto 34px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* -- ACCESO A LA PLATAFORMA -- */
.access{display:flex;justify-content:space-between;align-items:center;gap:36px;flex-wrap:wrap}
.access-txt{max-width:580px}
.access-txt .eyebrow{margin-bottom:14px}
.access-txt h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:12px}
.access-txt p{font-size:16.5px;color:var(--text2);line-height:1.6}
.access-actions{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0}
@media(max-width:760px){.access{flex-direction:column;align-items:flex-start;gap:26px}.access-actions{width:100%}.access-actions .btn{flex:1;justify-content:center}}
/* A 390px dos botones lado a lado dejan 175px cada uno y el texto se parte en dos lineas. */
@media(max-width:560px){.access-actions{flex-direction:column}.access-actions .btn{width:100%}}

/* -- PAGE HERO (subpáginas) -- */
.page-hero{padding:118px 0 84px}
.page-hero h1{font-size:clamp(36px,5.2vw,60px);margin-bottom:20px;color:#fff}
.page-hero p{font-size:19px;color:rgba(255,255,255,.72);max-width:640px;line-height:1.6}
.breadcrumb{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:22px;font-weight:500}
.breadcrumb a:hover{color:var(--gold2)}
.breadcrumb span{margin:0 8px;opacity:.5}

/* -- CHANNELS -- */
/* El canal principal ocupa el ancho completo como banda horizontal y los otros
   dos van debajo. Tres tarjetas idénticas en fila es el patrón que hay que evitar. */
.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.channel-card:first-child{grid-column:span 2;display:grid;grid-template-columns:66px 1fr auto;
  align-items:center;text-align:left;gap:24px;background:var(--surface2);border-color:var(--gold-soft)}
.channel-card:first-child .channel-tile{margin:0}
.channel-card:first-child h3{grid-column:2;margin-bottom:4px}
.channel-card:first-child p{grid-column:2;grid-row:2;margin-bottom:0;max-width:52ch}
.channel-card:first-child .channel-link{grid-column:3;grid-row:1/3;justify-self:end}
.channel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-panel);padding:36px;text-align:center;transition:.3s}
.channel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--gold-soft)}
.channel-tile{width:66px;height:66px;border-radius:18px;background:rgba(249,168,212,.13);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(236,72,153,.25)}
.channel-tile svg{width:32px;height:32px}
.channel-card h3{font-size:20px;margin-bottom:8px}
.channel-card p{font-size:14.5px;color:var(--text2);margin-bottom:20px;line-height:1.55}
.channel-link{font-size:15px;font-weight:700;color:var(--gold);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.channel-card:hover .channel-link{gap:10px}

/* -- FOOTER -- */
.footer{padding:70px 0 34px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .logo{margin-bottom:16px}
.footer-brand p{font-size:14px;line-height:1.65;max-width:300px;color:rgba(255,255,255,.55)}
.footer-col h4{color:#fff;font-size:14px;margin-bottom:16px;font-weight:700}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,.55);margin-bottom:11px;transition:.2s}
.footer-col a:hover{color:var(--gold2)}
.footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-copy{font-size:13px;color:rgba(255,255,255,.55)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:38px;height:38px;border-radius:var(--r-ctl);background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:15px;transition:.2s;color:rgba(255,255,255,.65)}
.footer-social a:hover{background:var(--gold);color:#10142a}
.disclaimer{font-size:11.5px;color:rgba(255,255,255,.58);line-height:1.6;max-width:780px;margin:26px auto 0;text-align:center}

/* -- ASSETS -- */
.assets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.asset{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;transition:.25s}
.asset:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold-soft)}
.asset-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0;box-shadow:inset 0 2px 5px rgba(255,255,255,.3),inset 0 -2px 5px rgba(0,0,0,.22)}
.asset .an{font-size:14.5px;font-weight:600;color:var(--text)}
.asset .at{font-size:12px;color:var(--muted);margin-left:auto;font-weight:700}

/* -- SIMULADOR -- */
.sim{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.sim-controls{display:flex;flex-direction:column;gap:28px}
.sim-field label{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.72);font-weight:500;margin-bottom:14px}
.sim-field label b{color:var(--gold2);font-size:17px;font-weight:800}
.sim input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:rgba(255,255,255,.16);outline:none}
.sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#f9a8d4,#ec4899);cursor:pointer;box-shadow:0 4px 12px rgba(236,72,153,.55)}
.sim input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:linear-gradient(135deg,#f9a8d4,#ec4899);cursor:pointer;box-shadow:0 4px 12px rgba(236,72,153,.55)}
.sim-result{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-panel);padding:34px;text-align:center}
.sim-result .lbl{font-size:12px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.sim-big{font-size:clamp(36px,5vw,48px);font-weight:800;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 4px;letter-spacing:-.02em}
.sim-meta{display:flex;justify-content:center;gap:26px;margin:14px 0 20px;flex-wrap:wrap}
.sim-meta div{font-size:13px;color:rgba(255,255,255,.55)}
.sim-meta b{display:block;font-size:19px;color:#fff;font-weight:800;margin-top:3px}
.sim-bars{display:flex;gap:4px;align-items:flex-end;height:62px;margin-bottom:16px}
.sim-bars span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#34d399,#10b981);min-height:6px;transition:height .3s}
.sim-note{font-size:11.5px;color:rgba(255,255,255,.58);line-height:1.5}

/* -- PHONE -- */
.phone-wrap{position:relative;display:flex;justify-content:center}
.phone{width:264px;position:relative;background:#0c1024;border:9px solid #1a2138;border-radius:38px;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.phone::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:110px;height:20px;background:#1a2138;border-radius:0 0 13px 13px;z-index:3}
.phone-screen{padding:36px 15px 20px;color:#fff}

@media(max-width:960px){.sim{grid-template-columns:1fr;gap:30px}.assets-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .assets-grid{grid-template-columns:1fr 1fr;gap:10px}
  .asset{padding:12px 13px;gap:9px}
  .asset .an{font-size:13.5px}
  .asset .at{display:none}
}

/* -- LEGAL (texto largo) -- */
.legal{max-width:820px;margin:0 auto}
.legal .updated{font-size:13px;color:var(--muted);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.legal h2{font-size:22px;margin:38px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17px;margin:22px 0 10px}
.legal p{font-size:15.5px;color:var(--text2);line-height:1.75;margin-bottom:14px}
.legal ul{margin:0 0 16px 22px}
.legal li{font-size:15.5px;color:var(--text2);line-height:1.7;margin-bottom:8px}
.legal strong{color:var(--text);font-weight:700}
.legal a{color:var(--gold);font-weight:600}
.legal-note{background:rgba(249,168,212,.07);border:1px solid var(--gold-soft);border-radius:var(--r-card);padding:18px 22px;margin:24px 0;font-size:14.5px;color:var(--text2);line-height:1.65}
.legal-note strong{color:var(--gold2)}

/* -- REVEAL -- */
html.js-anim .reveal{opacity:0;transform:translateY(26px);transition:.75s cubic-bezier(.2,.7,.2,1)}
html.js-anim .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js-anim .reveal{opacity:1;transform:none;transition:none}}

/* -- RESPONSIVE -- */
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .trust-row{grid-template-columns:1fr 1fr;gap:18px}
  .appwin{max-width:520px;margin:0 auto}
  .coin{display:none}
  .feature-grid{grid-template-columns:1fr 1fr}
  .feature-card,.feature-card:nth-child(1),.feature-card:nth-child(4),.feature-card:nth-child(5),.feature-card:nth-child(6){grid-column:span 1}
  .tst-grid{grid-template-columns:1fr 1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .value-card,.value-card:nth-child(n){grid-column:span 1}
  .mod-grid,.split{grid-template-columns:1fr;gap:34px}
  .numbers-grid{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .num-col:nth-child(2){border-right:none}
  .num-col{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:26px}
  .num-col:nth-last-child(-n+2){border-bottom:none}
  .steps{grid-template-columns:1fr 1fr;gap:36px}
  .steps::before{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:72px;left:0;right:0;background:rgba(10,14,28,.97);backdrop-filter:blur(16px);
    flex-direction:column;align-items:stretch;gap:2px;padding:16px 20px 24px;border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 20px 50px rgba(0,0,0,.5);transform:translateY(-140%);transition:.35s;visibility:hidden}
  .nav-links.open{transform:none;visibility:visible}
  .nav-links a{padding:13px 14px;font-size:16px}
  .nav-links a.active::after{display:none}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:600px){
  body{font-size:15px}
  .nav-inner,.container{padding-left:18px;padding-right:18px}
  section{padding:60px 0}
  .hero,.page-hero{padding-top:104px}
  .hero{padding-bottom:62px}
  .page-hero{padding-bottom:60px}
  .hero h1{font-size:33px}
  .page-hero h1{font-size:32px}
  .section-title{font-size:27px}
  .hero-desc{font-size:16.5px}
  .section-desc{font-size:16px}
  .hero-btns,.cta-band .btns{flex-direction:column}
  .hero-btns .btn,.cta-band .btn{width:100%}
  .hero-proof{gap:24px}
  .proof-val{font-size:26px}
  .trust-row{grid-template-columns:1fr;gap:14px}
  .ht .htic{width:38px;height:38px}
  .feature-grid,.tst-grid,.value-grid,.channel-grid{grid-template-columns:1fr}
  .channel-card:first-child{grid-column:span 1;grid-template-columns:1fr;text-align:center}
  .channel-card:first-child h3,.channel-card:first-child p,.channel-card:first-child .channel-link{grid-column:1;grid-row:auto;justify-self:center}
  .feature-card,.feature-card:nth-child(n){grid-column:span 1}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .num-val{font-size:38px}
  .steps{grid-template-columns:1fr;gap:26px}
  .flow-row{grid-template-columns:1fr;gap:14px}
  .flow-num{width:52px;height:52px;font-size:18px}
  .mod-card,.feature-card,.channel-card,.value-card{padding:26px}
  .section-head{margin-bottom:40px}
  .sim-result{padding:26px}
  .sim-big{font-size:38px}
  .aw-layout{grid-template-columns:1fr}
  .aw-side{display:none}
  .aw-main{padding:18px}
  .aw-balance{font-size:30px}
}

/* ========================================================
   MOVIMIENTO + RITMO — 2026-07-24
   Rompe la monotonía "eyebrow centrado → título → bajada → grilla" que se
   repetía en 6 secciones. Ahora la home alterna encabezados centrados y
   asimétricos a la izquierda, y el reveal entra en cascada (ver main.js).
======================================================== */

/* Encabezado asimétrico: título a la izquierda, bajada como segunda columna.
   Le da tensión horizontal y corta el patrón de "todo al centro". */
.section-head.lead{
  display:grid;grid-template-columns:1.15fr .85fr;column-gap:52px;row-gap:16px;
  align-items:end;text-align:left;margin-bottom:52px;
}
.section-head.lead .eyebrow{grid-column:1/-1;margin-bottom:2px}
.section-head.lead .section-title{grid-column:1;margin-bottom:0;align-self:end;position:relative;padding-bottom:16px}
/* Trazo dorado bajo el título: eco del arco del logo, se dibuja al aparecer. */
.section-head.lead .section-title::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:56px;border-radius:3px;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .7s .25s cubic-bezier(.2,.7,.2,1);
}
.section-head.lead.in .section-title::after{transform:scaleX(1)}
.section-head.lead .section-desc{grid-column:2;max-width:none;align-self:end;padding-bottom:6px}
@media(prefers-reduced-motion:reduce){.section-head.lead .section-title::after{transform:scaleX(1);transition:none}}
@media(max-width:760px){
  .section-head.lead{grid-template-columns:1fr;row-gap:14px;margin-bottom:40px}
  .section-head.lead .section-title{grid-column:1;padding-bottom:14px}
  .section-head.lead .section-desc{grid-column:1}
}

/* El reveal escalonado del feature-grid/mod-grid ya funciona porque cada
   tarjeta tiene .reveal; el delay lo pone main.js. Este bloque solo suma un
   arranque un poco más marcado (leve escala) sin exagerar. */
html.js-anim .feature-card.reveal,
html.js-anim .mod-card.reveal{transform:translateY(30px) scale(.985)}
html.js-anim .feature-card.reveal.in,
html.js-anim .mod-card.reveal.in{transform:none}
@media(prefers-reduced-motion:reduce){
  html.js-anim .feature-card.reveal,
  html.js-anim .mod-card.reveal{transform:none}
}

/* -- ASSETS MARQUEE (full-bleed) -- */
.asset-marquee{position:relative;overflow:hidden;width:100%;margin-top:8px;padding:6px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.asset-marquee-track{display:flex;gap:14px;width:max-content;animation:assetscroll 52s linear infinite}
.asset-marquee:hover .asset-marquee-track{animation-play-state:paused}
.asset-marquee .asset{min-width:210px;flex-shrink:0}
@keyframes assetscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  /* Sin movimiento: vuelve a ser una grilla centrada y estática. */
  .asset-marquee{-webkit-mask:none;mask:none;overflow:visible}
  .asset-marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .asset-marquee .asset:nth-child(n+13){display:none} /* oculta los duplicados */
}

/* -- NUMBERS EDITORIAL (asimétrico: intro + cifras 2x2) -- */
.numbers-editorial{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px 60px;align-items:center}
.numbers-intro h2{font-size:clamp(26px,3vw,38px);line-height:1.14;color:#fff}
.numbers-editorial .numbers-grid{grid-template-columns:1fr 1fr;gap:32px 44px;text-align:left}
.numbers-editorial .num-col{border-right:none;padding:2px 0 2px 22px;border-left:2px solid rgba(249,168,212,.35)}
.numbers-editorial .num-label{text-align:left;margin-top:6px}
@media(max-width:760px){
  .numbers-editorial{grid-template-columns:1fr;gap:30px}
  .numbers-editorial .numbers-grid{gap:24px 32px}
}

/* ========================================================
   FONDO AMBIENTAL — 2026-07-24
   La base deja de ser un plano liso #0a0e1c. Tres cosas, todas abstractas
   (nada de velas, monedas ni grids neón, que leen como plantilla cripto):
   1. Degradé ambiental fijo con los mismos oro/violeta/azul de la marca, que
      se ve a través de las secciones sin fondo propio mientras scrolleás.
   2. Grano fino global que le da textura premium y mata el aspecto plano.
   3. Las secciones "band-soft" se vuelven semitransparentes para que el
      ambiente se lea parejo en todo el sitio, no a parches.
======================================================== */
body{
  background:
    radial-gradient(1150px 780px at 82% -8%, rgba(124,108,255,.11), transparent 60%),
    radial-gradient(1000px 760px at 8% 6%,  rgba(236,72,153,.075), transparent 58%),
    radial-gradient(1300px 950px at 50% 112%, rgba(47,123,255,.10), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
/* Grano fino sobre todo el sitio (fijo, no bloquea clics, se funde en soft-light
   para no aclarar el fondo ni ensuciar el texto). */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.42;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Que el ambiente se vea a través de las bandas suaves en vez de taparlo. */
.band-soft{background:rgba(14,19,38,.55)}
.trustbar{background:rgba(14,19,38,.6)}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}

/* -- FIRMA: ecos concéntricos del arco del logo --
   No es un grid ni contornos genéricos: son anillos partidos (como el logomark
   de Criptan) explotados a gran tamaño, muy tenues, girando lentísimo. Solo en
   los momentos fuertes (hero y CTA) para que sea firma, no ruido. */
.aurora.rings::before{
  content:'';position:absolute;top:50%;right:-140px;width:740px;height:740px;
  transform:translateY(-50%);z-index:0;pointer-events:none;opacity:.6;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='680' viewBox='0 0 680 680' fill='none'%3E%3Cg stroke='%23e6b23e' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='340' cy='340' r='120' stroke-opacity='.55' stroke-dasharray='560,120' transform='rotate(-52,340,340)'/%3E%3Ccircle cx='340' cy='340' r='200' stroke-opacity='.4' stroke-dasharray='900,220' transform='rotate(-18,340,340)'/%3E%3Ccircle cx='340' cy='340' r='280' stroke-opacity='.26' stroke-dasharray='1300,320' transform='rotate(-82,340,340)'/%3E%3Ccircle cx='340' cy='340' r='332' stroke-opacity='.15' stroke-dasharray='1650,420' transform='rotate(12,340,340)'/%3E%3C/g%3E%3C/svg%3E");
  animation:ringspin 120s linear infinite;
}
@keyframes ringspin{
  from{transform:translateY(-50%) rotate(0deg)}
  to{transform:translateY(-50%) rotate(360deg)}
}
@media(max-width:760px){.aurora.rings::before{right:-280px;width:520px;height:520px;opacity:.42}}
@media(prefers-reduced-motion:reduce){.aurora.rings::before{animation:none}}

/* -- LOGO ENSO (imagen) + FONDO DEL HERO (bg-2) — 2026-07-24 --
   El logomark pasa de SVG a la imagen del enso pincelado. El hero usa la imagen
   de líneas doradas de fondo, con un degradé oscuro encima para que el texto de
   la izquierda mantenga contraste. En el hero se atenúan los blobs y se apaga la
   firma de anillos para no competir con las líneas. */
.logo-mark{width:42px;height:42px;padding:7px;box-sizing:border-box}
.hero{
  background-image:
    linear-gradient(100deg, var(--bg) 0%, rgba(10,14,28,.72) 42%, rgba(10,14,28,.18) 100%),
    url("img/hero-bg.png");
  background-size:cover;background-position:right center;background-repeat:no-repeat;
}
.hero .blob{opacity:.2}
.hero .aurora.rings::before{display:none}
@media(max-width:960px){
  .hero{background-image:linear-gradient(180deg, var(--bg) 0%, rgba(10,14,28,.8) 55%, rgba(10,14,28,.52) 100%), url("img/hero-bg.png");background-position:center}
}