/* ============================================================
   Pulsar Gaming — custom.css
   Tema dark / neon (púrpura + cian) para tienda de hardware gamer.
   Apoyado en las variables del sistema:
     --color-primario  = #7C3AED (púrpura neon)
     --color-secundario = #0B0A12 (casi negro)
   ============================================================ */

:root {
    --pulsar-cyan: #22D3EE;
    --pulsar-magenta: #EC4899;
    --pulsar-bg: #0B0A12;
    --pulsar-surface: #15131F;
    --pulsar-surface-2: #1C1930;
    --pulsar-border: #2A2640;
    --pulsar-text: #ECEAFF;
    --pulsar-muted: #9A93B8;
    --pulsar-grad: linear-gradient(100deg, #7C3AED 0%, #22D3EE 100%);
    --pulsar-grad-soft: linear-gradient(100deg, rgba(124,58,237,.18) 0%, rgba(34,211,238,.18) 100%);
}

/* ---------- Tipografía ---------- */
body {
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.navbar-nav .nav-link,
.titulo-seccion, .section-title {
    font-family: "Rajdhani", "Manrope", sans-serif;
    letter-spacing: .01em;
}

h1, h2, .display-1, .display-2, .display-3 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ---------- Barra superior ---------- */
#divBarraSuperior {
    background: #7C3AED !important;
}

#divBarraSuperior .container {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}
#divBarraSuperior .p-seguinos,
#divBarraSuperior .follow-link {
    color: #ffffff;
}
#divBarraSuperior .follow-link:hover {
    color: var(--pulsar-cyan);
}

/* ---------- Navbar ---------- */
.navbar.navbar-bg-color-secundario,
#mobileMenu {
    background: #1d1c25 !important;
}
.navbar-brand img {
    width: 150px;
    margin: 16px 0;
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, .45));
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--pulsar-text);
    position: relative;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.dropdown:hover > .nav-link {
    color: var(--pulsar-cyan) !important;
}

.navbar-dark .navbar-nav .nav-link, .dropdown-item {
    font-size: 17px;
}

.logo-menu-mobile {
    width: 150px;
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, .45));
}

@media (max-width: 991.98px) {
    #mobileMenu .mobile-menu-panel {
        background: #1d1c25;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.swiper-hero-con-barra, .swiper-hero-con-barra .swiper-slide {
    height: calc(100vw / 2.55);
}

/* ---------- Botones ---------- */
.btn-primary,
.btn-buy,
.boton-agregar-carrito,
.btn-comprar {
    background: var(--pulsar-grad) !important;
    border: none !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    box-shadow: 0 6px 22px -8px rgba(124, 58, 237, .7);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-primary:hover,
.btn-buy:hover,
.boton-agregar-carrito:hover,
.btn-comprar:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 30px -6px rgba(34, 211, 238, .55);
    transform: translateY(-1px);
}
.btn-outline-primary {
    border: 1px solid var(--color-primario) !important;
    color: var(--pulsar-text) !important;
}
.btn-outline-primary:hover {
    background: var(--pulsar-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ---------- Links ---------- */
a { color: var(--color-primario); }
a:hover { color: var(--pulsar-cyan); }

/* ---------- Tarjetas de producto ---------- */
.card,
.producto-card,
.card-producto,
.item-producto {
    border-radius: 14px;
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover,
.producto-card:hover,
.card-producto:hover,
.item-producto:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, .8);
    box-shadow: 0 14px 40px -16px rgba(124, 58, 237, .65),
                0 0 0 1px rgba(34, 211, 238, .25);
}
/* fondo claro de las miniaturas para que destaque el producto */
.producto-card img,
.card-producto img {
    background: #fff;
    border-radius: 10px;
}

/* badges de oferta / nuevo */
.badge-oferta, .badge-nuevo, .etiqueta-producto, .producto-etiqueta {
    background: var(--pulsar-grad) !important;
    color: #fff !important;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* precio */
.precio, .producto-precio, .precio-producto {
    color: var(--pulsar-cyan);
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
}
.precio-anterior, .precio-tachado {
    color: var(--pulsar-muted);
}

/* ---------- Footer / pie de página ---------- */
footer,
.pie-pagina,
.footer {
    background: #1d1c25 !important;
    color: var(--pulsar-muted);
}
footer a, .pie-pagina a { color: var(--pulsar-muted); }
footer a:hover, .pie-pagina a:hover { color: var(--pulsar-cyan); }

/* ---------- Botones flotantes ---------- */
.boton-whatsapp, .boton-scroll-top {
    box-shadow: 0 0 18px -2px rgba(124, 58, 237, .8) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pulsar-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7C3AED, #22D3EE);
    border-radius: 8px;
}

/* ---------- Selección de texto ---------- */
::selection { background: rgba(124, 58, 237, .45); color: #fff; }

/* ---------- Utilidad: texto con gradiente neon ---------- */
.text-gradient-pulsar {
    background: var(--pulsar-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#divBloqueNewsletter .card {
    background-image: linear-gradient(90deg, #7C3AED, #22D3EE) !important;
}

.footer-logo {
    width: 200px;
}

/* ============================================================
   Contraste en paneles oscuros (carrito + autocomplete de búsqueda)
   Patrón tomado de 3dproductos (mismos componentes, fondo secundario oscuro).
   ============================================================ */

/* ---- Modal/offcanvas del carrito ---- */
#carritoMenu .text-white,
#carritoMenu p {
    color: #ffffff !important;
}
#carritoMenu h1, #carritoMenu h2, #carritoMenu h3,
#carritoMenu .link-light,
#carritoMenu .variante-light {
    color: #ffffff !important;
}
#carritoMenu i, #favoritosMenu i {
    color: #ffffff;
}
#carritoMenu .amount, #carritoMenu ins {
    color: var(--pulsar-cyan) !important;
}
#carritoMenu del, #carritoMenu del span {
    color: var(--pulsar-muted) !important;
}
.number-picker-cart .input-group input {
    color: #ffffff !important;
}

/* ---- Autocomplete del buscador (div-buscar-header / divSugerenciasBuscar) ---- */
.div-buscar-header .link-dark {
    color: #ffffff !important;
}
.div-buscar-header .text-muted,
#divSugerenciasBuscar .text-muted {
    color: var(--pulsar-muted) !important;
}
/* pickers de variante (texto) — no seleccionadas */
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]) {
    border-color: #ffffff;
    background-color: var(--color-secundario);
    color: #ffffff;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover {
    border-color: var(--color-primario) !important;
    color: var(--color-primario) !important;
}
/* picker de variante seleccionada */
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
    border-color: var(--color-primario) !important;
    background-color: var(--color-primario) !important;
    color: #ffffff !important;
}
.div-buscar-header .picker label[for*=radVariante] > span {
    color: #ffffff;
    padding: .3rem;
}
.div-buscar-header .picker label[for*=radVariante] > input:checked ~ span {
    background-color: var(--color-primario);
    color: #ffffff;
}

#carritoMenu i, #favoritosMenu i {
    color: #ffffff;
}

.img-logo-nosotros, .img-logo-contacto {
    width: 250px;
}