/* Mireloworld: versión de bajo contraste. Un solo tono de azul marino con variaciones suaves; el cian solo como acento. */
:root {
  --ink: #0b1440;
  --navy: #0f1a4c;
  --ink-2: #12205a;
  --ink-3: #182a70;
  --line-dark: rgba(255, 255, 255, .1);
  --paper: #0e1948;
  --paper-2: #13215c;
  --white: #12205a;
  --text-dark: #eaf0fd;
  --text-soft: #a7b6da;
  --text-on-ink: #eaf0fd;
  --text-on-ink-soft: #a7b6da;
  --signal-ink: #5fdfe9;
  --signal-bright: #5fdfe9;
  --focus: #5fdfe9;
  --hair: rgba(255, 255, 255, .11);
}
body { background: var(--paper); color: var(--text-dark); }
.band + .band, .ticker + .band, .band + .ticker, .hero + .ticker { border-top: 1px solid rgba(255, 255, 255, .06); }
.band { background: var(--paper); }
.band--navy { background: var(--navy); }
.band--white { background: var(--navy); }
.band--ink { background: var(--ink); }
.band--ink.band--navy { background: var(--navy); }
#diagnostico { background: var(--paper) !important; }
#sectores { background: var(--ink); }

/* Cabecera, portada y pie */
.site-header, .site-header.is-stuck { background: rgba(11, 20, 64, .86); border-bottom-color: var(--hair); }
.hero { background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); }
.aurora i:nth-child(1) { opacity: .26; } .aurora i:nth-child(2) { opacity: .24; } .aurora i:nth-child(3) { opacity: .18; }
.hero::after { opacity: .3; }
.nav a:hover { color: #fff; }
.msg a { color: #fff !important; }
.final::before { opacity: .45; }
.site-footer { background: var(--ink); }

/* Líneas finas en lugar de trazos negros */
.rows li, .rows li:last-child, .faq details, .faq details:last-child, .extras { border-color: var(--hair); }
.steps li { border-top-color: var(--hair); }
.matrix-wrap { border-color: var(--hair); }
.matrix th, .matrix td { border-bottom-color: var(--hair); }
.band--ink .rows li { border-color: var(--hair); }

/* Tarjetas tonales */
.steps li.spot { background: var(--ink-2); border: 1px solid var(--hair); border-top: 2px solid rgba(12, 188, 204, .55); }
.steps li.spot:hover { box-shadow: 0 22px 40px -28px rgba(12, 188, 204, .35); }
.honest > div.spot, .sample { background: var(--ink-2); border-color: var(--hair); }
.price-note { background: var(--ink-2); }
.case { border-color: var(--hair); }
.feat article { background: var(--ink-2); border-color: var(--hair); }
.feat article:hover { box-shadow: 0 24px 44px -30px rgba(12, 188, 204, .35); }
.feat article.feat__a { background: var(--ink-3) !important; border-color: var(--hair) !important; }
.feat__a::before { opacity: .45; }
.feat__a p, .feat__a h3 { color: var(--text-dark); }
.feat article.feat__b { background: rgba(12, 188, 204, .13); border-color: rgba(12, 188, 204, .35); }
.feat__b h3 { color: #eafcff; } .feat__b p { color: var(--text-soft); }
.feat article.feat__d { background: var(--ink-2); }

/* Tabla */
.matrix-wrap { background: var(--ink-2); }
.matrix thead th, .matrix thead th:first-child { background: var(--ink); }
.matrix .col-highlight { background: rgba(12, 188, 204, .08); }
.matrix thead .col-highlight { background: rgba(12, 188, 204, .2); color: #eafcff; }
.matrix thead .col-highlight small { background: none; color: #bfeef3; }
.matrix tbody tr:hover td, .matrix tbody tr:hover th { background-color: rgba(255, 255, 255, .03); }
.matrix tbody tr:hover td.col-highlight { background-color: rgba(12, 188, 204, .12); }
.matrix th.col-highlight { box-shadow: none; }
.matrix th[scope="row"] { background: var(--ink-2); }
@media (max-width: 640px) { .matrix th[scope="row"] { background: var(--ink-2); box-shadow: 1px 0 0 var(--hair); } }

/* Botones y pestañas: el cian solo donde hay que actuar */
.btn--sun, .btn--primary { box-shadow: none; }
.btn--sun:hover, .btn--primary:hover { box-shadow: 0 10px 26px -14px rgba(12, 188, 204, .8); }
.btn--ghost { border-color: rgba(255, 255, 255, .35); color: var(--text-dark); }
.tab { border-color: var(--hair); color: var(--text-dark); }
.tab[aria-selected="true"] { background: rgba(12, 188, 204, .18); border-color: rgba(12, 188, 204, .6); color: #eafcff; }

/* Formulario sobre fondo oscuro */
.form { background: var(--ink-2); border: 1px solid var(--hair); }
.field input, .field select, .field textarea { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); color: var(--text-dark); }
.field input::placeholder, .field textarea::placeholder { color: #7f90bb; }
.field select option { background: #12205a; color: #eaf0fd; }
.form__status, .form__status a { color: var(--text-dark); }

/* Páginas legales */
.legal p, .legal li, .legal td, .legal th { color: var(--text-soft); }
.legal h1, .legal h2, .legal th { color: var(--text-dark); }
.legal table, .legal th, .legal td { border-color: var(--hair); }
.draft-note, .todo { background: rgba(12, 188, 204, .12); color: var(--text-dark); outline: 1px dashed rgba(12, 188, 204, .5); }