/* ═══════════════════════════════════════════
   MG Digital: tema oscuro compartido (theme-dark.css)
   Se enlaza al final del <head>, después de los estilos de cada página.
   ═══════════════════════════════════════════ */

:root{
    color-scheme:dark;
    --title:#F1F5F9;
    --text:#A9B2C7;
    --text-light:#8893AA;
    --border:rgba(255,255,255,.1);
    --surface:#0B0D27;
    --white:#12153B;
    --primary-bg:rgba(99,102,241,.16);
    --mint-bg:rgba(52,211,153,.14);
    --peach-bg:rgba(251,146,60,.14);
    --rose-bg:rgba(244,114,182,.14);
    --sky-bg:rgba(56,189,248,.14);
    --lavender-bg:rgba(167,139,250,.16);
}
body{background:#080920;color:#E5E7EF}
select option{background:#12153B;color:#F1F5F9}
.btn-primary,.btn-submit,.step-number,.footer-col h4{color:#fff}
.footer-col ul a:hover,.footer-links a:hover,.footer-legal a:hover{color:#fff}

/* ─── NAV: vidrio oscuro ─── */
nav{background:rgba(9,10,30,.72)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.08)!important;padding:.3rem 2rem}
nav.scrolled{background:rgba(9,10,30,.9)!important}
nav .logo svg rect:first-of-type{fill:#818CF8}
nav .logo svg text:nth-of-type(1){fill:#FFFFFF}
nav .logo svg text:nth-of-type(2){fill:#CBD5E1}
nav .logo svg text:nth-of-type(3){fill:#94A3B8}
.nav-links a{color:#CBD5E1}
.nav-links a:hover{color:#fff}
.nav-links a.active-link{color:#A5B4FC}
.nav-links a.nav-cta.nav-wa{background:#22A559;color:#fff;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.3rem;border-radius:10px;font-weight:700}
.nav-links a.nav-cta.nav-wa:hover{background:#1C8F4C;color:#fff;box-shadow:0 4px 16px rgba(34,165,89,.4)}
.menu-toggle span{background:#fff}
@media (max-width:640px){
    .nav-links.active{background:#0D0F2B;box-shadow:0 12px 30px rgba(0,0,0,.45)}
    .nav-links.active a{color:#E2E8F0}
    .nav-links.active a.nav-cta.nav-wa{justify-content:center}
}

/* ─── Encabezados de página interna ─── */
.page-header{background:radial-gradient(60% 90% at 82% 0%,rgba(99,102,241,.35),transparent 70%),radial-gradient(45% 70% at 8% 100%,rgba(52,211,153,.14),transparent 70%),#090A1E}
.page-header h1{color:#fff}
.page-header p{color:#A9B2C7}

/* ─── Secciones y etiquetas ─── */
.section{background:transparent}
.section-header h2{color:#fff}
.section-header p{color:var(--text)}
.section-tag.tag-purple{color:#A5B4FC}
.section-tag.tag-mint{color:#6EE7B7}
.section-tag.tag-rose{color:#F9A8D4}
.section-tag.tag-sky{color:#7DD3FC}
.section-tag.tag-peach{color:#FDBA74}
.section-tag.tag-lavender{color:#C4B5FD}

/* ─── Tarjetas de vidrio ─── */
.service-card,.niche-card,.process-step,.contact-form,.contact-method,.product-widget{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.service-card:hover,.niche-card:hover{box-shadow:0 14px 44px rgba(99,102,241,.2)}
.niche-section{background:#0A0C24}

/* ─── Franjas, footer, botones flotantes ─── */
.marquee-strip.strip-dark{background:#0F1230;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
footer{background:#05061A;border-top:1px solid rgba(255,255,255,.08)}
.wa-tooltip{background:#0F1230;color:#fff;border:1px solid rgba(255,255,255,.12)}
@media (max-width:640px){
    .bottom-tab-bar{background:rgba(9,10,30,.92);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -4px 24px rgba(0,0,0,.45)}
    .tab-item span{color:#94A3B8}
    .tab-item svg{color:#94A3B8}
    .tab-item.active span{color:#A5B4FC}
    .tab-item.active svg{color:#A5B4FC}
    .tab-cta span{color:#A5B4FC !important}
}

/* ─── CTA final de páginas internas ─── */
.cta-section{background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(52,211,153,.12)),#090A1E;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.article-cta{background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(52,211,153,.12)),#0D0F2B;border:1px solid rgba(255,255,255,.1)}

/* ─── Texto de acento (índigo) con contraste sobre fondo oscuro ─── */
.service-subtitle,.sv-value,.blog-card-link,.category,.price-tag{color:#A5B4FC}
.legal-container a:not([class]),.article-body a:not([class]){color:#A5B4FC}
.sv-item-badge,.blog-category,.project-type{filter:brightness(1.7)}
.btn-quote{color:#C7D2FE}

/* ─── Simulador "Arma tu sitio": el teléfono simula el sitio del cliente, se queda claro ─── */
.phone-screen{
    --title:#1E293B;--text:#475569;--text-light:#64748B;--border:#E2E8F0;--surface:#F8FAFC;--white:#FFFFFF;
    --primary-bg:#EEF2FF;--mint-bg:#ECFDF5;--peach-bg:#FFF7ED;--rose-bg:#FDF2F8;--sky-bg:#F0F9FF;--lavender-bg:#F5F3FF;
    color:#1E293B;
}

/* ─── Encabezado del simulador ─── */
.page-hero{background:radial-gradient(60% 90% at 82% 0%,rgba(99,102,241,.35),transparent 70%),radial-gradient(45% 70% at 8% 100%,rgba(52,211,153,.14),transparent 70%),#090A1E}
.page-hero h1{color:#fff}
.page-hero p{color:#A9B2C7}

/* ─── Tarjeta de cotización del simulador (caja índigo con texto blanco) ─── */
.config-cta,.config-cta h3,.config-cta .cta-count,.config-cta .cta-label{color:#fff}
.btn-quote{background:#fff;color:#4F46E5}

/* acentos índigo: algunas páginas los definen con mayor especificidad */
td.price-tag,.price-tag,.service-subtitle,.sv-value,.blog-card-link,.category{color:#A5B4FC !important}
.article-nav a{color:#A5B4FC}