/* ===================================================================
   NUEVO LIP — Design system (diseño ganador "La Escucha × VicTech")
   Rama: feat/rediseno-nuevo-lip · sobre el stack existente (Flask+Jinja)
   Paleta navy/dorado · Space Grotesk + Cormorant + JetBrains Mono
   Capa final: se carga después de style.css/premium.css/fonts.css.
   =================================================================== */

:root{
  --navy:#0c1f3a; --navy-2:#081325; --navy-3:#12294a; --navy-4:#162f52;
  --gold:#c9a227; --gold-l:#e8c96a; --gold-d:#a07d1e;
  --cream:#f2ead8; --dim:rgba(242,234,216,.62); --dim-2:rgba(242,234,216,.42);
  --line:rgba(233,201,106,.14);
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --surface:#081325; --surface-2:#0c1f3a; --surface-3:#12294a;
  --text-1:#f2ead8; --text-2:rgba(242,234,216,.62); --text-3:rgba(242,234,216,.42);
  --border:rgba(233,201,106,.14);
  --radius-sm:4px; --radius-md:14px; --radius-lg:22px;
}

/* ---------- Base ---------- */
body{background:var(--navy-2);color:var(--cream);font-family:var(--font-sans);letter-spacing:-.005em}
a{color:var(--gold-l)}
::selection{background:var(--gold);color:var(--navy-2)}
h1,h2,h3,.display-xl,.display-lg,.display-md,.display-sm,.heading-lg,.heading-md,.heading-sm{font-family:var(--font-sans);font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.display-xl,.display-lg,.display-md{line-height:.98}

/* ---------- Navbar navy/dorado ---------- */
.navbar-premium{background:rgba(8,19,37,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:1rem 0}
.navbar-premium.scrolled{background:rgba(8,19,37,.96);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.navbar-brand{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500}
.navbar-brand span{color:var(--gold);font-weight:700}
.navbar-premium .nav-link{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:.55rem .9rem;transition:color .2s}
.navbar-premium .nav-link:hover,.navbar-premium .nav-link.active{color:var(--cream)}
.navbar-premium .nav-link::after{left:.9rem;right:.9rem;bottom:.12rem;height:2px;background:var(--gold)}
.btn-nav-cta,.btn-nav-outline{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;border-radius:4px}

/* ---------- Botones ---------- */
.btn{border-radius:4px;font-family:var(--font-sans);font-weight:600;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,background .2s,border-color .2s}
.btn-gold{background:var(--gold);color:var(--navy-2);box-shadow:0 10px 32px rgba(201,162,39,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(201,162,39,.4)}
.btn-gold:active,.btn-outline:active{transform:scale(.97)}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:#fff;background:transparent}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}

/* ---------- Héroes ---------- */
.hero{background:var(--navy-2);background-image:
  radial-gradient(110% 80% at 12% 0%,rgba(201,162,39,.08),transparent 45%),
  radial-gradient(90% 70% at 92% 100%,rgba(18,41,74,.6),transparent 50%)}
.hero h1,.hero .display-xl,.hero .display-lg{color:var(--cream)}
.hero .body-lg,.hero p{color:var(--dim)}
.text-gradient{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-l) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Badges ---------- */
.badge,.badge-primary,.badge-white,.badge-blue,.badge-green{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border-radius:4px}
.hero .badge,.hero .badge-primary,.section-dark .badge-primary{background:rgba(201,162,39,.12);color:var(--gold-l);border:1px solid rgba(201,162,39,.4)}
.badge-gold{background:var(--gold);color:var(--navy-2);font-weight:700}
.badge-white{background:rgba(242,234,216,.12);color:var(--cream);border:1px solid rgba(242,234,216,.2)}

/* ---------- Secciones ---------- */
.section{background:var(--navy-2)}
.section-alt{background:var(--navy)}
.section-dark{background:var(--navy-2)}
.section-header .overline{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.section-header p{color:var(--dim)}

/* ---------- Tarjetas ---------- */
.card-premium,.card-elevated,.card-glass,.step-card,.faq-item{
  background:rgba(12,31,58,.55);border:1px solid var(--line);border-radius:var(--radius-md);
  backdrop-filter:blur(8px);transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.card-premium:hover,.card-elevated:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.4);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.card-premium h3,.card-elevated h3,.card-glass h3{color:var(--cream)}
.card-premium p,.card-elevated p,.card-glass p{color:var(--dim)}
.card-glass{background:rgba(242,234,216,.04);border-color:rgba(242,234,216,.1)}
.step-number{background:rgba(201,162,39,.14);color:var(--gold-l);border:1px solid rgba(201,162,39,.35)}
.step-card h3{color:var(--cream)}

/* ---------- Stats / métricas ---------- */
.stat-card{background:rgba(12,31,58,.55);border:1px solid var(--line);border-radius:var(--radius-md)}
.stat-number{font-family:var(--font-sans);font-weight:700;letter-spacing:-.03em;color:var(--cream);font-variant-numeric:tabular-nums}
.stat-label{color:var(--dim)}
.stat-number.text-blue,.stat-number.text-green,.stat-number.text-purple,.stat-number.text-warning{color:var(--cream)!important}
.stat-number.text-gold{color:var(--gold)!important}

/* ---------- Pasos / wizard ---------- */
.step-indicator{width:34px;height:34px;border-radius:50%;background:var(--navy-3);color:var(--dim);font-family:var(--font-mono);font-size:.78rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);transition:all .3s}
.step-indicator.active{background:var(--gold);color:var(--navy-2);border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.2)}
.step-line{height:2px;background:var(--navy-3);flex:1}
.progress-premium{background:var(--navy-3);height:4px;border-radius:2px}
.progress-premium .bar{background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:2px}
.form-card{background:rgba(12,31,58,.55);border:1px solid var(--line);border-radius:var(--radius-lg)}
.form-card-header{border-bottom:1px solid var(--line)}
.chip{border:1px solid var(--line);background:var(--navy-3);color:var(--dim);border-radius:999px;padding:.55rem 1.1rem;font-family:var(--font-sans);font-size:.82rem;transition:all .2s}
.chip.active,.zona-btn.active{background:var(--gold);color:var(--navy-2);border-color:var(--gold)}

/* ---------- Formularios ---------- */
.form-label{color:var(--dim);font-size:.8rem;letter-spacing:.04em}
.form-control,.form-select{background:var(--navy-3);border:1px solid var(--line);color:var(--cream);border-radius:6px}
.form-control:focus,.form-select:focus{background:var(--navy-3);border-color:var(--gold);color:var(--cream);box-shadow:0 0 0 3px rgba(201,162,39,.16)}
.form-control::placeholder{color:var(--dim-2)}

/* ---------- Tablas ---------- */
.table-premium th{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);border-bottom:1px solid var(--gold)}
.table-premium td{color:var(--cream);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.table-premium tbody tr:hover{background:rgba(18,41,74,.6)}

/* ---------- FAQ ---------- */
.faq-item{background:rgba(12,31,58,.4)}
.faq-question{color:var(--cream);font-weight:600;letter-spacing:-.01em}
.faq-answer{color:var(--dim)}

/* ---------- Texto ---------- */
.text-white-50{color:var(--dim)}
.text-muted-2{color:var(--dim)}
.text-gold{color:var(--gold-l)!important}
.text-navy{color:var(--cream)!important}
.text-blue{color:var(--gold-l)!important}
.caption{font-family:var(--font-mono);font-size:.7rem;color:var(--dim);letter-spacing:.04em}
.body-lg{color:var(--cream)}

/* ---------- Footer ---------- */
.footer{background:var(--navy-2);border-top:1px solid var(--line)}
.footer-brand{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.footer-brand span{color:var(--gold)}
.footer-heading{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l)}
.footer-links a{color:var(--dim);transition:color .2s}
.footer-links a:hover{color:var(--gold-l)}
.footer-contact a{color:var(--dim)}
.footer-bottom p{color:var(--dim)}

/* ---------- Glow follower ---------- */
.glow{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(620px circle at var(--mx) var(--my),rgba(201,162,39,.05),transparent 60%)}

/* ---------- Contenedor / bandas ---------- */
.card-elevated{background:rgba(12,31,58,.5)}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  body{padding-top:64px}
  .navbar-brand{font-size:.72rem}
  .display-xl{font-size:2.2rem}
}

/* ---------- Reveal (nuevo-lip.js) ---------- */
.reveal-hide{opacity:0;transform:translateY(26px)}
.reveal-hide.visible{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.reveal-hide{opacity:1;transform:none;transition:none}}

/* ---------- Flag accent sutil ---------- */
.flag-accent{height:3px;background:linear-gradient(90deg,#fcd116 0 33%,#003893 33% 66%,#ce1126 66% 100%);opacity:.9}

/* ---------- Ajustes de texto ---------- */
.body-sm,.body-md{color:var(--dim)}
.heading-lg,.heading-md,.heading-sm{color:var(--cream)}
.heading-sm{letter-spacing:-.02em}
.display-sm{color:var(--cream)}
.text-success,.text-warning,.text-info,.text-danger{color:var(--gold-l)!important}
.form-card .heading-lg,.form-card .heading-md{color:var(--cream)}

/* ---------- Cards de datos / dashboard ---------- */
.card-elevated .heading-sm{color:var(--cream)}

/* ===================================================================
   P2 · Componentes del híbrido ganador (home/participar)
   =================================================================== */

/* ---------- Hero con video bandera */
.hero-band{position:relative;padding:9rem 0 3.5rem;background:
  radial-gradient(110% 80% at 12% 0%,rgba(201,162,39,.08),transparent 45%),
  linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%)}
.hero-band .kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;color:var(--gold);margin-bottom:1.6rem;display:flex;align-items:center;gap:.6rem}
.hero-band .kicker::before{content:"";width:40px;height:1px;background:var(--gold)}
.hero-band p{max-width:52ch}
.hero-video{position:relative;min-height:92vh;overflow:hidden;display:flex;align-items:center;padding:7rem 0 4rem}
.hero-video>video,.hero-video .hvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.6)}
.hero-video .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,31,58,.78) 0%,rgba(12,31,58,.3) 45%,rgba(8,19,37,.97) 100%)}
.hero-video .glowline{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,39,.8),transparent)}
.hero-video .content{position:relative;z-index:3;width:100%}
.hero-video .kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;color:var(--gold);margin-bottom:2rem;display:flex;align-items:center;gap:.6rem}
.hero-video .kicker::before{content:"";width:40px;height:1px;background:var(--gold)}
.hero-video h1 .accent{color:var(--gold);font-style:italic;font-family:var(--font-serif);font-weight:500}
.hero-video .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-video .word>span{display:inline-block;will-change:transform}
.hero-video .readout{margin-top:2.6rem;display:flex;gap:2.6rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--dim);border-top:1px solid var(--line);padding-top:1.4rem}
.hero-video .readout .r span{display:block;color:#fff;font-size:1.15rem;margin-top:.25rem;font-variant-numeric:tabular-nums}
.hero-video .readout .r span em{font-style:normal;color:var(--gold)}

/* Onda de voz (canvas) */
.waveband{position:relative;padding:4.5rem 0 2.5rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy-2)}
.waveband .w-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:.6rem}
.waveband .wl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.waveband .wl b{color:var(--gold)}
.waveband .w-note{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--dim)}
.waveband canvas{width:100%;height:120px;display:block}

/* Pasos editoriales (narrativa A) */
.pasos{padding:7rem 0}
.paso{border-top:1px solid var(--line);padding:2.2rem 0;display:grid;grid-template-columns:150px 1fr 1.1fr;gap:2rem;align-items:start}
.paso .n{font-family:var(--font-serif);font-size:1.5rem;font-style:italic;color:var(--gold)}
.paso h4{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;letter-spacing:-.02em;color:var(--cream)}
.paso p{color:var(--dim);font-size:.92rem;max-width:42ch}

/* Flujo animado (tubo) */
.flowsec{padding:7rem 0;position:relative;background:radial-gradient(90% 60% at 50% 0%,rgba(201,162,39,.05),transparent)}
.flowsec .f-head{max-width:56ch;margin-bottom:3rem}
.flowsec .f-head .label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;margin-bottom:1.2rem}
.flowsec .f-head h3 em{font-style:italic;font-family:var(--font-serif);font-weight:500;color:var(--gold)}
.tubo-wrap{border:1px solid var(--line);border-radius:16px;background:rgba(12,31,58,.35);padding:2rem 2rem 1.4rem;overflow:hidden}
.tubo-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.2rem}
.tubo-top .tt-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.tubo-top .tt-counters{display:flex;gap:1.6rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--dim)}
.tubo-top .tt-counters b{color:#fff;font-variant-numeric:tabular-nums}
.tubo-top .tt-counters b em{font-style:normal;color:var(--gold)}
.tubo-controls{display:flex;gap:.6rem}
.tubo-controls button{border:1px solid var(--line);background:transparent;color:var(--dim);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .9rem;border-radius:4px;cursor:pointer;transition:border-color .2s,color .2s}
.tubo-controls button:hover{border-color:var(--gold);color:var(--gold)}
.tubo-svg{width:100%;height:auto;display:block}
.tubo-consola{margin-top:1.2rem;font-family:var(--font-mono);font-size:.74rem;line-height:1.9;color:var(--dim)}
.tubo-consola-line{opacity:.25;transition:opacity .3s}
.tubo-consola-line.on{opacity:1;color:var(--cream)}
.tubo-consola-line.on b{color:var(--gold)}
.tubo-consola-line .ok{color:#5ee6a0}
svg .stn{fill:rgba(201,162,39,.08);stroke:var(--gold);stroke-width:1}
svg .stn-lbl{fill:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
svg .lane{stroke:rgba(233,201,106,.12);stroke-width:1;stroke-dasharray:3 5}
svg .tubo-dot{fill:var(--gold);filter:drop-shadow(0 0 6px rgba(201,162,39,.5))}
svg .tubo-dot.ok{fill:#5ee6a0}
svg .tubo-arrow{stroke:rgba(201,162,39,.5);stroke-width:1.5;fill:none;stroke-dasharray:6 8}

/* Telemetría con barras */
.tele{padding:7rem 0;background:var(--navy);border-top:1px solid var(--line)}
.tele .t-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-bottom:3rem}
.tele .t-head b{color:var(--gold)}
.tele-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.tele-card .tc-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.tele-card .tc-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.tele-card .tc-val{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--cream)}
.tele-card .tc-val em{font-style:normal;color:var(--gold);font-size:.6em}
.tele-card .bar{height:6px;border-radius:3px;background:rgba(233,201,106,.12);overflow:hidden}
.tele-card .bar .fill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--gold-d),var(--gold));transform-origin:left;will-change:transform}
.tele-card .tc-note{margin-top:.7rem;font-size:.82rem;color:var(--dim)}

/* Quote serif */
.quote{display:grid;place-items:center;text-align:center;padding:9rem 0;border-top:1px solid var(--line)}
.quote blockquote{font-family:var(--font-serif);font-size:clamp(1.9rem,4.5vw,3.6rem);font-weight:500;line-height:1.1;max-width:22ch;text-wrap:balance;color:var(--cream)}
.quote blockquote em{font-style:italic;color:var(--gold)}
.quote .who{margin-top:2rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}

@media(max-width:820px){
  .paso{grid-template-columns:1fr;gap:1rem}
  .tele-grid{grid-template-columns:1fr;gap:2rem}
  .tubo-top{flex-direction:column;align-items:flex-start}
  .hero-video{min-height:auto;padding-top:6rem}
}

/* ---------- Wizard de participación ---------- */
.selection-card{background:var(--navy-3);border:1px solid var(--line);border-radius:10px;padding:1rem;color:var(--cream);text-align:left;transition:border-color .2s,background .2s;display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.selection-card .icon{width:30px;height:30px;border-radius:50%;background:rgba(201,162,39,.12);color:var(--gold-l);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.selection-card.active{border-color:var(--gold);background:rgba(201,162,39,.1)}
.selection-card.active .icon{background:var(--gold);color:var(--navy-2)}
.form-card-footer{border-top:1px solid var(--line);padding:1.2rem 1.5rem;display:flex;justify-content:space-between}
.bg-surface-2,.rounded-xl{border-radius:var(--radius-md)}

/* ---------- Charts: contenedor de altura fija (evita crecimiento infinito) ---------- */
.chart-wrap{position:relative;height:260px}
.chart-wrap canvas{position:absolute;inset:0;width:100% !important;height:100% !important}

/* ---------- HARDENING: ningun contenedor blanco con texto claro ---------- */
.card-elevated,.card-premium,.card-glass,.stat-card,.form-card,.table-responsive{
  background-color:rgba(12,31,58,.6) !important;
}
.stat-card{background-color:rgba(12,31,58,.75) !important}
/* text-white/bootstrap no debe anular el tema oscuro */
.stat-number.text-white,.stat-number.text-white-50,.stat-number.text-blue,.stat-number.text-green{
  color:var(--cream) !important;
}
.stat-number.text-gold,.display-sm.text-gold,.heading-sm.text-gold{color:var(--gold-l) !important}
.table-premium,.table-premium td{color:var(--cream) !important}
.table-premium th{color:var(--gold-l) !important}
/* Bootstrap .table trae --bs-table-bg blanco -> forzar transparente (se ve la card oscura) */
.table{--bs-table-bg:transparent !important;--bs-table-color:var(--cream) !important;background-color:transparent !important;color:var(--cream) !important}
.table th,.table td{border-color:var(--line) !important;background-color:transparent !important}
.form-control,.form-select{color:var(--cream) !important;background-color:var(--navy-3) !important;border-color:var(--line) !important}
.form-label{color:var(--dim) !important}
.btn-outline{color:#fff !important}
.hero-video p,.hero-band p{color:var(--dim) !important}
.section .heading-sm,.section .heading-md{color:var(--cream) !important}
.section .text-muted-2{color:var(--dim) !important}

/* ---------- Narrativa: valor + audiencias ---------- */
.value-strip{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.5rem 1.9rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--gold-l)}
.value-strip span{display:flex;align-items:center;gap:.5rem}
.value-strip span::before{content:"\25CF";color:var(--gold);font-size:.6rem}
.aud-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.aud-label::before{content:"";width:22px;height:1px;background:var(--gold)}
.aud-card .aud-link{margin-top:1.2rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l)}
.aud-card .aud-link:hover{color:#fff}
.motor-core{font-family:var(--font-mono);font-size:.78rem;line-height:1.9;color:var(--dim)}
.motor-core b{color:var(--gold-l)}

/* ---------- Admin legible en tema oscuro (re-estilo ligero) ---------- */
.text-dark{color:var(--cream) !important}
.heading-xl,.heading-md,.heading-sm{color:var(--cream) !important}
.btn-primary{background:var(--gold);border-color:var(--gold);color:var(--navy-2) !important}
.btn-primary:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--navy-2) !important}
.btn-secondary{background:var(--navy-3);border-color:var(--line);color:var(--cream) !important}
/* badges sobre fondo claro mantienen texto oscuro para contraste */
.badge.text-dark{color:#1a1714 !important}
.text-primary{color:var(--gold-l) !important}

/* ---------- Diferenciación ---------- */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;margin-top:3rem}
.diff-cell{padding:2.2rem;background:var(--navy-2)}
.diff-cell .d-problem{color:var(--dim);font-size:.9rem;display:flex;gap:.6rem;align-items:baseline}
.diff-cell .d-problem::before{content:"\2715";color:rgba(229,107,94,.85)}
.diff-cell .d-sol{margin-top:1rem;color:var(--cream);font-size:1.05rem;font-weight:600;display:flex;gap:.6rem;align-items:baseline}
.diff-cell .d-sol::before{content:"\2713";color:var(--gold)}

/* ---------- Tabla interactiva (visor) ---------- */
.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.sortable:hover{color:#fff !important}
.sortable.sorted .sort-ico{color:var(--gold);opacity:1}
.sortable.sorted.asc .sort-ico{transform:rotate(180deg)}
.sort-ico{opacity:.4;font-size:.72em;transition:transform .2s}

/* ---------- Print: contenido legible, sin nav/glow ---------- */
@media print {
  .nav, .glow, .navbar-premium, .footer, .skip-link, #deck, .waveband canvas,
  .hero-video video, .glowline, .fade-hint { display:none !important; }
  body { background:#fff; color:#111; }
  .hero, .hero-band, .hero-video, .section, .section-alt, .section-dark,
  .card-elevated, .card-premium, .table, .table-premium, .quote, .final {
    background:#fff !important; color:#111 !important; border-color:#ccc !important;
    backdrop-filter:none !important;
  }
  .hero h1, .hero h2, .hero .display-lg, h1, h2, h3, .heading-md, .heading-sm { color:#111 !important; }
  .text-muted-2, .body-sm, .dim, .text-white-50 { color:#333 !important; }
  a { color:#0c1f3a !important; text-decoration:underline; }
}

/* ---------- Reduced transparency: glass -> solid ---------- */
@media (prefers-reduced-transparency: reduce) {
  .card-elevated, .card-premium, .card-glass, .stat-card, .form-card, .navbar-premium, .hero-card-data {
    backdrop-filter:none !important;
    background-color: var(--navy-3) !important;
  }
}

/* ---------- Mapa Colombia (tema oscuro) ---------- */
.dept-path { fill: var(--navy-3); stroke: var(--gold-l); }
.dept-path:hover, .dept-path.active { fill: var(--gold); stroke: #fff; }
.colombia-map-legend { color: var(--dim); }