/* ============================================================
   VyralCode · brand.css  —  re-skin a la marca VyralCode
   Sobre-escribe la paleta inline de cada pagina. Se enlaza
   DESPUES del <style> inline (y de bot.css) para cascada final.
   Tokens EXACTOS de la marca (webs/vyralcode/03-improved/global-css-updated.css):
     --green #00E5A0  = accion / CTA / conversion  (acento primario)
     --green-d #03B27D= hover del verde
     --crimson #D72638= enfasis / urgencia / logo  (acento secundario)
     --crimson-l #FF6470 = rojo legible como TEXTO sobre navy
     --navy #060D1A / --navy2 #0C1B32 / --navy3 #112244 = base
     --ink #D7DFEA = texto cuerpo
   Tipografias: Syne (titulos) + IBM Plex Sans/Mono (texto).
   ============================================================ */
:root{
  --bg:#060d1a; --bg2:#0c1b32; --panel:#0c1b32; --panel2:#112244; --line:#1b3056;
  --amber:#00e5a0; --amber2:#03b27d; --hot:#d72638;   /* amber*=verde CTA, hot=crimson */
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Syne",var(--sans);
}

/* titulos en Syne */
h1,h2,h3,.brand,.sku h3,.caso h3,.up h2,.bot-n{font-family:var(--display)}

/* titular degradado dentro del verde de marca (no verde->rojo)
   OJO: usar background-IMAGE (no el shorthand `background`): el shorthand con
   !important expande a background-clip:border-box !important y tapa el clip a
   texto -> se veia un cuadro verde solido. background-image no resetea el clip. */
h1 .grad,h1 em{background-image:linear-gradient(100deg,#00e5a0,#03b27d) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important}

/* el verde es brillante -> texto OSCURO sobre el acento (no blanco) */
.btn.primary,.navcta,.sku .tag,
.bot-launch,.bot-av,.m.user,.cta-card a,.bot-input button{color:#060d1a !important}

/* glows y tintes: verde de marca en vez de ambar */
body{background:
  radial-gradient(1200px 700px at 80% -10%,rgba(0,229,160,.10),transparent 60%),
  radial-gradient(900px 600px at -10% 10%,rgba(92,58,222,.08),transparent 55%),
  var(--bg) !important}
.kicker{border-color:rgba(0,229,160,.32) !important;background:rgba(0,229,160,.07) !important}
::selection{background:rgba(0,229,160,.3);color:#060d1a}
.problem{background:linear-gradient(180deg,rgba(0,229,160,.06),var(--panel)) !important;
  border-color:rgba(0,229,160,.20) !important}
.sku.feat{border-color:rgba(0,229,160,.45) !important}
.bot-launch{box-shadow:0 10px 28px rgba(0,229,160,.32)}