/* =========================================================
   Vida Tesla · Tema "vidrio a medianoche" (v5)
   Una sola capa visual para todas las páginas.
   Se carga DESPUÉS del <style> de cada página y redefine
   sus colores y componentes sin tocar la lógica.
   Para volver al diseño anterior basta con quitar el <link>.
   ========================================================= */

/* ---------- Tokens ---------- */
/* :not(#vt) sube la especificidad para ganarle a los tokens de cada página */
:root:not(#vt){
  /* Paleta base */
  --vt-canvas:#05060f;
  --vt-surface:#0b0d18;
  --vt-frost:#d1e4fa;
  --vt-mist:#c7d3ea;
  --vt-fog:#9da7ba;
  --vt-white:#ffffff;
  --vt-violet:#663af3;
  --vt-violet-hover:#7550f5;
  --vt-sky:linear-gradient(180deg,#d8ecf8 0%,#98c0ef 100%);
  --vt-edge:rgba(186,215,247,.12);
  --vt-edge-strong:rgba(186,215,247,.24);
  --vt-wash:rgba(186,214,247,.06);
  --vt-wash-hover:rgba(186,214,247,.12);
  --vt-field:rgba(199,211,234,.06);
  --vt-tint:rgba(199,211,234,.12);
  --vt-shadow-card:inset 0 1px 1px rgba(199,211,234,.12),inset 0 24px 48px rgba(199,211,234,.05),0 24px 32px rgba(6,6,14,.7);
  --vt-shadow-modal:inset 0 1px 1px rgba(216,236,248,.2),inset 0 24px 48px rgba(168,216,245,.06),0 16px 32px rgba(0,0,0,.3);
  --vt-sans:"Untitled Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --vt-display:aeonikPro,"Space Grotesk",Inter,system-ui,sans-serif;
  --vt-mono:dotDigital,"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Tokens que ya usan las páginas, reasignados al nuevo sistema */
  --paper:#05060f; --sky:#05060f; --surface:#0b0d18;
  --ink:#d1e4fa; --muted:#9da7ba; --line:rgba(186,215,247,.12);
  --accent:#98c0ef; --charge:#98c0ef; --volt:#d1e4fa;
  --sea:#d1e4fa; --sea-deep:#0b0d18;
  --sun:#98c0ef; --sun-ink:#05060f;
  --gas:#6f7a8f; --gas-soft:rgba(157,167,186,.1);
  --hero-ink:#ffffff; --hero-muted:#c7d3ea;
  color-scheme:dark;
}

/* ---------- Base y atmósfera ---------- */
html{background:var(--vt-canvas) !important}
body{background:transparent !important;color:var(--vt-frost) !important;letter-spacing:-.01em}
body,body *:not(svg):not(svg *){font-family:var(--vt-sans) !important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(186,215,247,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(186,215,247,.05) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000 25%,transparent 75%)}
body::after{content:"";position:fixed;left:50%;top:-340px;width:1100px;height:760px;max-width:200vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,145,182,.45),rgba(124,145,182,.1) 55%,transparent 100%);filter:blur(24px);opacity:.7}
::selection{background:rgba(152,192,239,.3);color:#fff}
:is(a,button,input,select,summary,textarea):focus-visible{outline:2px solid #98c0ef !important;outline-offset:3px !important}

/* ---------- Tipografía ---------- */
body h1,body h2,body h3{font-family:var(--vt-display) !important;font-weight:500 !important;letter-spacing:-.02em !important;font-stretch:100% !important;color:var(--vt-white)}
body h1,
.head h2,.about h2,.benefits h2,.guide h2,h2.sec,.vids-head h2{
  background:var(--vt-sky);-webkit-background-clip:text;background-clip:text;color:transparent !important}
body h1{filter:drop-shadow(0 0 6px rgba(186,207,247,.28)) drop-shadow(0 0 14px rgba(238,186,247,.16));line-height:1.02 !important}
p{color:inherit}
.hero p,.hero-side p,.lead,.sub,.about p,.dhero p,.trip-hero .lead{color:var(--vt-mist) !important}
.code b,.code small,.pct small{letter-spacing:.06em}
.code b{font-family:var(--vt-mono) !important;font-weight:400 !important;letter-spacing:.1em !important;color:#fff}
.pct,.promo-pct,.facts dt,.big,.fact b,.out b{font-family:var(--vt-display) !important;font-weight:500 !important;font-stretch:100% !important;letter-spacing:-.02em}
.pct,.promo-pct{color:var(--vt-white) !important}

/* ---------- Navegación ---------- */
.nav{border-bottom:0 !important;box-shadow:inset 0 -1px 0 var(--vt-edge)}
.nav .brand{color:var(--vt-frost) !important;font-weight:500 !important}
.nav .brand img{border:1px solid var(--vt-edge-strong) !important}
.nav-links a{color:var(--vt-mist) !important;border-radius:999px !important;font-weight:500 !important}
.nav-links a:hover{background:var(--vt-wash) !important;color:#fff !important}
.nav-links a[aria-current]{background:var(--vt-wash) !important;box-shadow:inset 0 0 0 1px var(--vt-edge) !important;color:#fff !important;border-radius:999px !important}
.nav-links a.nav-cta{background:transparent !important;color:var(--vt-frost) !important;box-shadow:inset 0 0 0 1px var(--vt-edge-strong) !important}
.nav-links a.nav-cta:hover{background:var(--vt-wash) !important;opacity:1 !important}
.menu-btn{background:var(--vt-wash) !important;color:#fff !important;border:0 !important;box-shadow:inset 0 0 0 1px var(--vt-edge) !important;border-radius:999px !important}
@media (max-width:760px){
  .nav-links{background:rgba(5,6,15,.97) !important;border:0 !important;border-radius:16px !important;box-shadow:var(--vt-shadow-modal) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}

.hero .vt-nav{margin-bottom:3rem}

/* ---------- Botones ---------- */
.btn{border:0 !important;border-radius:999px !important;font-weight:500 !important;letter-spacing:-.01em;
  background:var(--vt-wash) !important;color:#fff !important;box-shadow:inset 0 0 0 1px var(--vt-edge);transition:background .2s,box-shadow .2s}
.btn:hover{background:var(--vt-wash-hover) !important}
.btn-sun{background:rgba(216,236,248,.1) !important;box-shadow:inset 0 1px 1px rgba(216,236,248,.18),inset 0 0 0 1px var(--vt-edge-strong)}
.btn-sun:hover{background:rgba(216,236,248,.16) !important}
.btn-line,.btn-ink,.btn-ws,.cta .btn-line{background:transparent !important;color:var(--vt-frost) !important;box-shadow:inset 0 0 0 1px var(--vt-edge) !important}
.btn-line:hover,.btn-ink:hover,.btn-ws:hover{background:var(--vt-wash) !important}
/* El violeta se reserva para la acción que convierte: pedir asesoría y unirse a la comunidad */
#wa.btn,#comCta.btn{background:var(--vt-violet) !important;box-shadow:none !important;border-radius:8px !important}
#wa.btn:hover,#comCta.btn:hover{background:var(--vt-violet-hover) !important}
.vbtn{border:0 !important;background:var(--vt-wash) !important;color:#fff !important;box-shadow:inset 0 0 0 1px var(--vt-edge)}
.vbtn:hover:not(:disabled){background:var(--vt-wash-hover) !important}
.linkbtn,.vall,.path .go,.promo-go,.gaps button,.gaps a{color:var(--vt-frost) !important;text-decoration-color:rgba(152,192,239,.55) !important}

/* ---------- Superficies de vidrio ---------- */
.path,.card,.deal,.route,.acc,.fact,.step,.errs,.res a,.voices blockquote,.promo,.how li,.cell,.check:not(.step .check){
  background:var(--vt-surface) !important;border:0 !important;border-radius:16px !important;box-shadow:var(--vt-shadow-card) !important}
.path{padding:1.8rem !important;transition:box-shadow .2s}
.path:hover,.promo:hover,.res a:hover{box-shadow:var(--vt-shadow-card),inset 0 0 0 1px var(--vt-edge-strong) !important}
.promo{padding:1.1rem 1.4rem !important}
.deal:target{box-shadow:var(--vt-shadow-card),0 0 0 1px var(--vt-edge-strong),0 0 32px rgba(152,192,239,.18) !important}
.soon-deal{background:transparent !important;box-shadow:inset 0 0 0 1px var(--vt-edge) !important}
.cta{background:rgba(5,6,15,.97) !important;color:var(--vt-frost) !important;border:0 !important;border-radius:16px !important;box-shadow:var(--vt-shadow-modal) !important}
.cta p{color:var(--vt-fog) !important}
.learn article,.facts div{border-top:1px solid var(--vt-edge-strong) !important}
.blist li,.acc details,.check label,.errs li,.faq details{border-color:var(--vt-edge) !important}
.feature,.vcard .player,.deal-img{border-radius:16px !important;box-shadow:inset 0 0 0 1px var(--vt-edge),0 24px 32px rgba(6,6,14,.7) !important}
.player{background:#0b0d18 !important}
.player .play span{background:rgba(5,6,15,.62) !important;box-shadow:inset 0 0 0 1px var(--vt-edge-strong),inset 0 1px 1px rgba(216,236,248,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.player:hover .play span{background:rgba(186,214,247,.16) !important}
.player:hover .play svg{color:#fff !important}

/* Insignias y celdas pequeñas */
.tag,.nums li{background:var(--vt-tint) !important;border:0 !important;border-radius:6px !important;color:var(--vt-frost) !important;box-shadow:inset 0 1px 0 rgba(216,236,248,.1)}
.verdict,.step .note,.deal .note{background:var(--vt-wash) !important;box-shadow:inset 0 0 0 1px var(--vt-edge)}
.tip,.dhero .disclosure,.acc .body .tip{border-left-color:#98c0ef !important}
.tip b{color:#98c0ef !important}

/* Estados activos: vidrio iluminado en vez de bloques invertidos */
.chip,.filters button{border-radius:999px !important}
.mode button{border-radius:12px !important}
.chip,.filters button{border:0 !important;background:transparent !important;color:var(--vt-mist) !important;box-shadow:inset 0 0 0 1px var(--vt-edge) !important}
.chip:hover,.filters button:hover{background:var(--vt-wash) !important;color:#fff !important}
.chip[aria-pressed="true"],.filters button[aria-pressed="true"],.mode button[aria-checked="true"]{
  background:var(--vt-wash-hover) !important;color:#fff !important;box-shadow:inset 0 0 0 1px var(--vt-edge-strong),inset 0 1px 1px rgba(216,236,248,.2) !important}
.mode{background:var(--vt-field) !important;border-radius:16px !important;box-shadow:inset 0 0 0 1px var(--vt-edge)}
.step::before,.how li::before{background:var(--vt-wash) !important;color:#fff !important;border-radius:999px !important;
  box-shadow:inset 0 0 0 1px var(--vt-edge-strong),inset 0 1px 1px rgba(216,236,248,.2);font-family:var(--vt-display) !important;font-weight:500 !important}
.out{background:var(--vt-edge) !important;border:0 !important;border-radius:16px !important;box-shadow:var(--vt-shadow-card)}
.out .main{background:rgba(152,192,239,.08) !important;color:#fff !important}
.out .main b{background:var(--vt-sky);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.out .main span{color:var(--vt-mist) !important}
.mini{background:rgba(5,6,15,.94) !important;color:var(--vt-frost) !important;box-shadow:var(--vt-shadow-modal) !important;border-radius:16px !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mini em{background:var(--vt-wash-hover) !important;color:#fff !important;border-radius:999px !important}

/* ---------- Formularios ---------- */
input[type="number"],input[type="text"],input[type="email"],input[type="tel"],input:not([type]),select,textarea,.money input{
  background:var(--vt-field) !important;color:#fff !important;border:0 !important;border-radius:6px !important;box-shadow:inset 0 0 0 1px var(--vt-edge)}
input[type="number"]:focus,input[type="text"]:focus,select:focus,textarea:focus,.money input:focus{box-shadow:inset 0 0 0 1px var(--vt-edge-strong),0 0 0 3px rgba(102,58,243,.25) !important}
select option{background:#0b0d18;color:#fff}
.check input{background:var(--vt-field) !important;border:1px solid var(--vt-edge-strong) !important;border-radius:6px !important}
.check input:checked{background:#98c0ef !important;border-color:#98c0ef !important}
.check input:checked::after{border-color:#05060f !important}
input[type="range"]{accent-color:#98c0ef}

/* ---------- Datos y gráficas ---------- */
.road .fill,.meter i{box-shadow:0 0 12px rgba(152,192,239,.45)}
.stop-btn{background:var(--vt-canvas) !important;font-family:var(--vt-display) !important;font-weight:500 !important}
.stop-btn[aria-pressed="true"]{background:#d8ecf8 !important;color:#05060f !important;border-color:#d8ecf8 !important;box-shadow:0 0 0 6px rgba(186,215,247,.12),0 0 16px rgba(186,207,247,.5)}
.bar.ev i,.bar.e i{background:var(--vt-sky) !important;box-shadow:0 0 10px rgba(152,192,239,.35)}
.meta .soon{color:var(--vt-frost) !important}
.gaps li::before{background:var(--vt-fog) !important}

/* ---------- Mapa (Leaflet) ---------- */
#map{border:0 !important;border-radius:16px !important;box-shadow:inset 0 0 0 1px var(--vt-edge),0 24px 32px rgba(6,6,14,.7);background:#05060f !important}
.leaflet-container{background:#05060f !important}
.leaflet-tooltip{background:#0b0d18 !important;color:var(--vt-frost) !important;border:0 !important;box-shadow:var(--vt-shadow-modal) !important;font-weight:500 !important}
.leaflet-tooltip-top::before{border-top-color:#0b0d18 !important}
.leaflet-bar a{background:#0b0d18 !important;color:var(--vt-frost) !important;border-bottom-color:var(--vt-edge) !important}
.leaflet-bar{border:0 !important;box-shadow:inset 0 0 0 1px var(--vt-edge),0 8px 16px rgba(0,0,0,.4) !important;border-radius:8px !important;overflow:hidden}
.leaflet-control-attribution{background:rgba(5,6,15,.75) !important;color:var(--vt-fog) !important}
.leaflet-control-attribution a{color:var(--vt-mist) !important}
.mk{background:#05060f !important;box-shadow:0 0 0 4px rgba(5,6,15,.6),0 4px 10px rgba(0,0,0,.5) !important;font-family:var(--vt-display) !important;font-weight:500 !important}
.mk.inicio,.mk.fin{background:#d1e4fa !important;color:#05060f !important;border-color:#d1e4fa !important}
.mk.on{background:#d8ecf8 !important;border-color:#d8ecf8 !important;color:#05060f !important;box-shadow:0 0 0 6px rgba(186,215,247,.15),0 0 18px rgba(186,207,247,.6) !important}

/* ---------- Flotantes ---------- */
.wa-float{background:rgba(11,13,24,.94) !important;color:#fff !important;box-shadow:var(--vt-shadow-modal),0 0 0 1px var(--vt-edge) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.wa-float svg{fill:#25D366 !important}

/* ---------- Pie ---------- */
.site-foot{box-shadow:inset 0 1px 0 var(--vt-edge);padding-top:2rem !important;margin-top:4rem}
.site-foot a{color:var(--vt-fog) !important}
.site-foot a:hover{color:#fff !important}
footer{color:var(--vt-fog) !important}

@media (prefers-reduced-motion:reduce){.btn,.path{transition:none !important}}