/* ============================================================
   Egoki — Tema oscuro compartido (Fase B)
   Convierte las páginas públicas (que se construyeron en claro)
   a la misma tonalidad navy+oro de la portada, sobre el fondo
   animado (egoki-bg). Estrategia: reasignar los TOKENS de color
   (texto → claro, líneas → claras, fondos → vidrio) + secciones
   transparentes + tarjetas glass. Se incluye junto a egoki-bg.css.
   Cargar SIEMPRE después del <style> propio de la página.
   ============================================================ */

/* 1) Reasignación de tokens (afecta a casi todo el texto y las líneas) */
:root{
  --body:rgba(255,255,255,.82) !important;
  --muted:rgba(255,255,255,.60) !important;
  --ink:#ffffff !important;
  --line:rgba(255,255,255,.12) !important;
  --line-cool:rgba(255,255,255,.12) !important;
  --paper:rgba(255,255,255,.045) !important;
  --cream:rgba(255,255,255,.06) !important;
  --bg:rgba(255,255,255,.045) !important;
  --surface:rgba(255,255,255,.05) !important;
}

/* 2) Base */
body{ background:transparent !important; color:rgba(255,255,255,.82); }
h1,h2,h3,h4,h5,h6{ color:#fff; }
.eyebrow{ color:var(--gold-soft) !important; background:transparent !important; }
.section-head h2{ color:#fff; }
.section-head p{ color:rgba(255,255,255,.8); }
.lead{ color:rgba(255,255,255,.82) !important; }

/* 3) Secciones transparentes → el fondo animado es continuo (sin cortes) */
section{ background:transparent !important; }
section[class]::before, section[class]::after{ opacity:.25 !important; }

/* 4) Tarjetas / cajas de contenido → vidrio esmerilado */
.step,.fcard,.bcard,.metric,.pstep,.wcard,.qa,.box,.compare,.lead-card,
.viz-card,.area-media,.ptile,.note,.wide,.a11y .item,.privacy .box,
.faq details,.card,.plan,.tier,.rcard,.form-card,.info-card,.data,.legal-card,table{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 26px 64px -36px rgba(0,0,0,.7) !important;
  color:rgba(255,255,255,.82);
}
.step h1,.step h2,.step h3,.step h4,.fcard h3,.fcard h4,.bcard h3,.bcard h4,
.metric h3,.pstep h3,.pstep h4,.wcard h3,.qa h3,.box h3,.box h4,
.compare h3,.a11y .item h4,.viz-card h3,.area-media h3{ color:#fff; }

/* 5) Iconos / insignias claras → acento dorado translúcido */
.shield,.ibadge,.ic,.bicon{ background:rgba(223,169,2,.16) !important; }
.ic svg,.bicon svg,.shield svg,.ibadge svg{ stroke:var(--gold-soft) !important; }

/* 6) Etiquetas tipo "pill" claras */
.tag,.pill,.badge-soft,.metric .num{ }
.tag{ background:rgba(255,255,255,.08) !important; color:var(--gold-soft) !important; border-color:rgba(255,255,255,.16) !important; }

/* 7) Botones sobre oscuro */
.btn-ghost{ color:#fff !important; border-color:rgba(255,255,255,.3) !important; background:transparent !important; }
.btn-ghost:hover{ color:#fff !important; border-color:#fff !important; background:rgba(255,255,255,.07) !important; }
.btn-navy{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.28) !important; color:#fff !important; }

/* 8) Footer sin fondo → el fondo dinámico se ve a través */
footer.site{ background:transparent !important; }

/* 9) Enlaces destacados / acentos que quedaban en navy sobre claro */
strong{ color:inherit; }

/* 10) Resaltado de titular tipo "subrayado" (.hl): en oscuro → texto dorado, sin barra */
.hl{ color:var(--gold-soft) !important; }
.hl::after,.hl::before{ display:none !important; }

/* 11) Filas / mini-tarjetas internas de los mockups */
.req,.metric,.compat,.lead-card .row{ background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.12) !important; }

/* 12) Listas de etiquetas (chips) claras → vidrio con texto claro */
.chips span,.tags span,.taglist span,.taglist li,.pathtags li{
  background:rgba(255,255,255,.08) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* 13) Iconos "glyph"/insignia claros → vidrio (el icono conserva su color) */
.glyph,.ric{ background:rgba(255,255,255,.07) !important; }
.ric svg{ stroke:var(--gold-soft) !important; }

/* 14) Formularios: campos oscuros con texto claro */
input:not([type=checkbox]):not([type=radio]),textarea,select{
  background:rgba(255,255,255,.06) !important; color:#fff !important;
  border-color:rgba(255,255,255,.20) !important;
}
input::placeholder,textarea::placeholder{ color:rgba(255,255,255,.45) !important; }
input:focus,textarea:focus,select:focus{ border-color:var(--gold) !important; box-shadow:0 0 0 4px rgba(223,169,2,.15) !important; }
/* Etiquetas flotantes: sin recuadro blanco */
.field label{ background:transparent !important; color:rgba(255,255,255,.6) !important; }