/* =============================================================== Tema oscuro — la página pasa a fondo negro, como aislpc.com. Va cargado DESPUÉS de styles.css y descripcion.css: aquí solo viven los colores, así el layout original se queda intacto y volver al tema claro es quitar este archivo del . =============================================================== */ :root{ --d-bg:#000; --d-surface:#0f0f0f; --d-card:#171717; --d-line:rgba(255,255,255,.10); --d-line-soft:rgba(255,255,255,.06); --d-txt:#fff; --d-muted:rgba(255,255,255,.66); --d-muted-2:rgba(255,255,255,.45); --d-accent:#8a2be2; --d-accent-hi:#9d4dff; --d-green:#4ade80; } body{background:var(--d-bg);color:var(--d-txt)} /* ---------- cabecera ---------- */ .site-header{background:var(--d-bg)!important;border-bottom-color:var(--d-line)} .brand{color:var(--d-txt)} .main-nav a{color:var(--d-txt)} .main-nav a.active{border-bottom-color:var(--d-accent);color:#fff} .icon-btn{color:var(--d-txt)} .cart-badge{background:var(--d-accent);color:#fff} /* ---------- migas ---------- */ .breadcrumb nav{color:var(--d-muted-2)} .breadcrumb .current{color:var(--d-muted)} /* ---------- galería ---------- */ .gallery-main{background:var(--d-surface)} .wish-btn{background:var(--d-card);box-shadow:0 4px 14px rgba(0,0,0,.6)} .wish-btn:hover{background:#222} .wish-btn svg{color:#fff} .thumb{border-color:var(--d-line)} .thumb:hover{border-color:rgba(255,255,255,.35)} .thumb.is-active{border-color:var(--d-accent)} /* ---------- ficha del producto ---------- */ .product-title{color:var(--d-txt)} .price-sale{color:var(--d-txt)!important} .price-base{color:var(--d-muted-2)} .price-badge{background:rgba(74,222,128,.16);color:var(--d-green)} .buy-btn{background:var(--d-accent)!important;color:#fff} .buy-btn:hover{background:var(--d-accent-hi)!important;opacity:1} /* destacados + urgencia */ .ob-destaques li{color:var(--d-muted)} .ob-destaques li strong{color:var(--d-txt)} .ob-destaques li svg{color:#34d399} .ob-urg-pack{color:var(--d-muted)} .ob-urg-pack strong{color:var(--d-txt)} .ob-urg-pack svg{color:var(--d-muted-2)} .ob-urg-stock{border-color:var(--d-line);background:var(--d-surface)} .ob-urg-stock p{color:var(--d-txt)} .ob-urg-stock strong{color:#f87171} .ob-urg-stock-titulo{color:#f87171} .ob-urg-pulso,.ob-urg-pulso::after{background:#f87171} /* ---------- banner ---------- */ .hero-banner__inner{background:#000} /* ---------- descripción ---------- */ .description-box{border-top-color:var(--d-line)} .description-box h3{color:var(--d-txt)} .desc{ --ink:#fff; --muted:rgba(255,255,255,.68); --line:rgba(255,255,255,.10); --panel:#111; --dark:#111; --accent:#a855f7; --accent-soft:rgba(168,85,247,.14); --accent-bright:#c084fc; color:rgba(255,255,255,.68); } .desc .hero{border:1px solid var(--d-line)} .desc .hero .eyebrow{background:var(--d-accent);color:#fff} .desc .hero h1 span{color:#c084fc} .desc .kicker{background:rgba(168,85,247,.14);color:#c084fc} .desc .copy h2{color:#fff} .desc .copy h2 em{color:#c084fc} .desc ul.points li{color:rgba(255,255,255,.9)} .desc ul.points svg{background:rgba(168,85,247,.16);stroke:#c084fc} .desc .tagline{background:rgba(168,85,247,.10);border-left-color:#a855f7;color:rgba(255,255,255,.85)} .desc .media img{box-shadow:0 20px 45px rgba(0,0,0,.6)} .desc .acard{background:var(--d-card);border-color:var(--d-line)} .desc .acard svg{stroke:#c084fc} .desc .acard b{color:#fff} .desc .acard span{color:var(--d-muted)} .desc .specs{background:var(--d-card);border:1px solid var(--d-line)} .desc .closing{background:var(--d-card);border-color:var(--d-line)} .desc .closing h3{color:#fff} /* ---------- vídeos ---------- */ .videos-section{background:var(--d-bg)} .video-arrow{background:var(--d-card);outline-color:rgba(255,255,255,.12);box-shadow:0 10px 20px rgba(0,0,0,.6)} .video-arrow svg{color:#fff} .video-dots button{background:rgba(255,255,255,.28)} .video-dots button:hover{background:rgba(255,255,255,.45)} .video-dots button.is-active{background:#fff} /* ---------- preguntas frecuentes ---------- */ .faq-section h2{color:#fff} .faq-item{border-color:var(--d-line)} .faq-q{background:var(--d-card)} .faq-q:hover{background:#1f1f1f} .faq-q span{color:#fff} .faq-q svg{color:var(--d-muted)} .faq-a{background:var(--d-card)} .faq-a p{color:var(--d-muted)} /* ---------- botón flotante ---------- */ .floating-cta button{background:var(--d-accent)} /* ---------- paquete y barra de servicios ---------- */ .pack-section{background:var(--d-bg)} .service-section{background:var(--d-bg)} /* ---------- pie ---------- */ .site-footer{background:var(--d-surface)!important} .footer-bottom{border-top-color:var(--d-line)} /* ---------- carrito lateral ---------- */ .cart-drawer{background:var(--d-surface);box-shadow:0 25px 50px -12px rgba(0,0,0,.8)} .cart-head{background:var(--d-surface);border-bottom-color:var(--d-line)} .cart-head svg{color:#fff} .cart-head h2{color:#fff} .modal-close:hover{background:rgba(255,255,255,.08)} .modal-close svg{color:var(--d-muted)} .cart-added{background:rgba(34,197,94,.12);border-bottom-color:rgba(34,197,94,.22)} .cart-added p{color:#4ade80} .cart-ship{background:var(--d-card);border-bottom-color:var(--d-line)} .cart-ship svg{color:var(--d-muted)} .cart-ship p{color:var(--d-muted)} .cart-line{border-bottom-color:var(--d-line)} .cart-line img{border-color:var(--d-line)} .cart-line h3{color:#fff} .cart-line .prices .old{color:var(--d-muted-2)} .cart-line .prices .now{color:#fff} .cart-totals .row{color:var(--d-muted)} .cart-totals .free{color:#4ade80} .cart-totals .total{border-top-color:var(--d-line);color:#fff} .cart-totals .total span{color:#fff!important} .cart-foot{background:var(--d-surface);border-top-color:var(--d-line)} .cart-checkout{background:var(--d-accent)!important} .cart-checkout:hover{background:var(--d-accent-hi)!important;opacity:1} .cart-secure{color:var(--d-muted-2)} /* ---------- ventanas de políticas ---------- */ .modal-panel{background:var(--d-surface);box-shadow:0 25px 50px -12px rgba(0,0,0,.8)} .modal-head{border-bottom-color:var(--d-line)} .modal-head h2{color:#fff} .modal-body{color:var(--d-muted)} .modal-body h3,.modal-body h4{color:#fff} .modal-body strong{color:#fff} /* ---------- order bump ---------- */ .bump{background:rgba(245,158,11,.10);border-color:#f59e0b} .bump:hover{background:rgba(245,158,11,.16)} .bump--marcado{background:rgba(5,150,105,.14);border-color:#10b981} .bump__marca{background:transparent;border-color:#f59e0b} .bump--marcado .bump__marca{background:#10b981;border-color:#10b981} .bump__foto{background:#fff;border-color:var(--d-line)} .bump__titulo{color:#fff} .bump__sub{color:var(--d-muted)} .bump__precio{color:#fff}