/* =========================================================
   OPOSIPLUS · BLACK GOLD CLEAN
   Unifica la web pública con la landing: negro elegante + dorado,
   sin verde neón, sin fondo de cuadrícula y sin mostaza de fondo.
   No afecta a /app/ salvo que se cargue este CSS manualmente allí.
   ========================================================= */
:root{
  --opx-black:#040404;
  --opx-black-2:#090909;
  --opx-panel:#121212;
  --opx-panel-2:#181818;
  --opx-panel-3:#0d0d0d;
  --opx-gold:#f5c518;
  --opx-gold-soft:#ffe7a3;
  --opx-gold-deep:#b8860b;
  --opx-cream:#fff7e6;
  --opx-muted:#c8c0ad;
  --opx-muted-2:#8f8877;
  --opx-border:rgba(245,197,24,.22);
  --opx-border-soft:rgba(255,255,255,.08);
  --opx-shadow:0 26px 80px rgba(0,0,0,.48);

  /* Sobrescribe variables antiguas de otros CSS */
  --bg:#040404!important;
  --bg2:#090909!important;
  --surface:#121212!important;
  --surface-l:#181818!important;
  --panel:#121212!important;
  --panel2:#181818!important;
  --gold:#f5c518!important;
  --gold2:#b8860b!important;
  --green:#d8b758!important;
  --green2:#c6a24a!important;
  --teal:#d8b758!important;
  --blue:#d6c8a2!important;
  --pink:#c48a64!important;
  --txt:#fff7e6!important;
  --text:#fff7e6!important;
  --white:#fff7e6!important;
  --soft:#c8c0ad!important;
  --muted:#8f8877!important;
  --border:rgba(245,197,24,.18)!important;
  --line:rgba(245,197,24,.18)!important;
}

html,body{
  background:#040404!important;
  color:var(--opx-cream)!important;
}

body,
.opdl-page,
main,
.hero,
.opx-hero,
.heroSection,
.section,
.opx-section,
.cover,
.cta-band,
.band,
.opx-band{
  background-image:
    radial-gradient(circle at 78% 6%, rgba(245,197,24,.09), transparent 28%),
    radial-gradient(circle at 0% 18%, rgba(255,231,163,.035), transparent 32%),
    linear-gradient(180deg,#040404 0%,#090909 48%,#030303 100%)!important;
  background-size:auto!important;
  background-color:#040404!important;
}

/* Quita cuadrícula visual de todas las páginas públicas */
body::before,body::after,
.opdl-page::before,.opdl-page::after,
.hero::before,.hero::after,
.opx-hero::before,.opx-hero::after,
.cover::before,.cover::after{
  background-image:none!important;
}

/* Cabecera negra, limpia y premium */
.site-header,
.opx-header,
header:not(.cover),
.opdl-top,
.topbar,
.navbar{
  background:rgba(3,3,3,.92)!important;
  border-bottom:1px solid rgba(245,197,24,.14)!important;
  backdrop-filter:blur(16px);
}

/* Textos */
h1,h2,h3,h4,
.title,
.opdl-copy h1,
.article-main h1{
  color:var(--opx-cream)!important;
  text-shadow:none!important;
}

h1 .y,
.gold,
.em,
.opdl-copy h1 strong,
.sec-num,
.logo em,
.brand em,
.opx-logo em,
.opdl-brand span,
.eyebrow,
.opx-eyebrow,
.tag,
.pill,
.opx-pill{
  color:var(--opx-gold)!important;
}

p,li,.lead,.opx-lead,.opdl-lead,.sourceNote,.legalNote,.tiny,
.card p,.service span,.articleCard p,.opx-card p{
  color:var(--opx-muted)!important;
}

/* Chips/badges sin mostaza de fondo */
.eyebrow,.opx-eyebrow,.tag,.pill,.opx-pill,.trust-row span{
  background:rgba(245,197,24,.055)!important;
  border:1px solid rgba(245,197,24,.22)!important;
  color:var(--opx-gold)!important;
}

/* Paneles y tarjetas */
.card,
.service,
.articleCard,
.opx-card,
.opx-panel,
.heroCard,
.hero-panel,
.panel,
.score-card,
.loginMock,
.opdl-device,
.opdl-card,
.opdl-proof article,
.opx-lead-form,
.opdl-method span,
.opx-topic,
.faq details,
.toc,
.article-callout,
.ctaBox,
.start-card,
.option-card,
.choice-card{
  background:linear-gradient(180deg,rgba(24,24,24,.96),rgba(9,9,9,.98))!important;
  border:1px solid rgba(245,197,24,.16)!important;
  box-shadow:var(--opx-shadow)!important;
  color:var(--opx-cream)!important;
}

/* Botones: dorado limpio, no mostaza apagado */
.btn.primary,
.opx-btn.primary,
.btn-gold,
.opdl-play,
.opdl-play-bottom,
.opx-lead-row button,
button[type="submit"],
.hero-actions a:first-child,
.cta-actions a:first-child,
a[href*="test-gratis"].btn,
a[href*="descargar"].btn,
.sticky-cta a:first-child{
  background:linear-gradient(135deg,#fff3bd 0%,#f8d24c 35%,#f5c518 62%,#b8860b 100%)!important;
  color:#050505!important;
  border:1px solid rgba(255,247,230,.24)!important;
  box-shadow:0 18px 50px rgba(245,197,24,.22)!important;
}

.btn.ghost,
.opx-btn.ghost,
.opdl-secondary,
.btn.secondary,
.btn-demo.btn-ghost,
a.ghost,
.header-actions a:not(.primary),
.opx-web,
.opdl-web{
  background:rgba(18,18,18,.88)!important;
  color:var(--opx-cream)!important;
  border:1px solid rgba(245,197,24,.22)!important;
  box-shadow:none!important;
}

.btn:hover,.opx-btn:hover,.opdl-play:hover,.opdl-secondary:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

/* Elimina verde/neón en barras, métricas y tarjetas */
.opdl-bars span::after,
.progress span,
.progress-bar,
.reading-progress{
  background:linear-gradient(90deg,#fff3bd,#f5c518,#b8860b)!important;
}

.opdl-card small,
.score-card span,
.post-card span,
.win,
.opx-kpi span{
  color:var(--opx-gold-soft)!important;
}

/* Fondos de sección: nada de amarillo/marrón masivo */
.cta-band,.band,.opx-band{
  background:linear-gradient(180deg,rgba(15,15,15,.98),rgba(4,4,4,.98))!important;
  border-top:1px solid rgba(245,197,24,.12)!important;
  border-bottom:1px solid rgba(245,197,24,.12)!important;
}

/* Botonera flotante descargar */
.opx-download-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:0 20px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff3bd,#f5c518,#b8860b)!important;
  color:#050505!important;
  border:1px solid rgba(255,247,230,.28)!important;
  box-shadow:0 18px 52px rgba(245,197,24,.28)!important;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-decoration:none!important;
}

/* Añade botón de descarga en header si existe */
.opx-header-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff3bd,#f5c518,#b8860b)!important;
  color:#050505!important;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid rgba(255,247,230,.22)!important;
}

/* Centrar el bloque “Elige cómo empezar” y tarjetas similares */
.opx-start-grid,
.opdl-start-grid,
.start-grid,
.choice-grid,
.options-grid,
.opdl-options,
.opx-options,
.grid3:has(a[href*="test"]),
.grid3:has(a[href*="register"]),
.grid3:has(a[href*="login"]),
.grid3:has(a[href*="app"]){
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,260px))!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:18px!important;
  max-width:920px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

section:has(h2) > h2,
section:has(h2) > p{
  text-align:center;
}

.opx-lead-form{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Formulario: negro/dorado */
.opx-lead-row input,
input,textarea,select{
  background:#090909!important;
  color:var(--opx-cream)!important;
  border:1px solid rgba(245,197,24,.20)!important;
}
.opx-lead-row input:focus,
input:focus,textarea:focus,select:focus{
  border-color:var(--opx-gold)!important;
  box-shadow:0 0 0 3px rgba(245,197,24,.12)!important;
}

/* Móvil */
@media(max-width:920px){
  body,
  .opdl-page,
  main,
  .hero,
  .opx-hero,
  .section,
  .cover{
    background-image:
      radial-gradient(circle at 70% 0%, rgba(245,197,24,.075), transparent 30%),
      linear-gradient(180deg,#040404 0%,#090909 54%,#030303 100%)!important;
  }
  .opx-download-fab{
    left:14px;
    right:14px;
    bottom:12px;
    width:auto;
  }
  .opx-start-grid,
  .opdl-start-grid,
  .start-grid,
  .choice-grid,
  .options-grid,
  .opdl-options,
  .opx-options{
    grid-template-columns:1fr!important;
    max-width:420px!important;
  }
}