@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
    /* SwatDJs Brand Colors */
    --color-lime: #ccff00;
    --color-lime-glow: rgba(204, 255, 0, 0.7);
    --color-violet: #8a2be2;
    --color-violet-glow: rgba(138, 43, 226, 0.7);
    --color-pink: #ff00ff;
    --color-pink-glow: rgba(255, 0, 255, 0.7);

    /* Warehouse Dark Base Overrides */
    --metal-dark: #121212;
    --metal-mid: #1c1c1c;
    --metal-light: #2a2a2a;

    /* --- Neon de Sala (2026 refresh) --- */
    --ns-surface: #171528;
    --ns-surface-2: #1d1a33;
    --ns-border: rgba(255, 255, 255, .1);
    --ns-text-dim: #a79fc4;
    --ns-display: 'Unbounded', 'Black Ops One', cursive;
    --ns-sans: 'Work Sans', 'Roboto', sans-serif;
    --ns-mono: 'IBM Plex Mono', 'Roboto', monospace;
}

body {
    background-color: #050505;
    background-image:
        radial-gradient(ellipse 1100px 650px at 10% 0%, rgba(138, 43, 226, .30), transparent 60%),
        radial-gradient(ellipse 900px 600px at 95% 8%, rgba(255, 0, 255, .18), transparent 55%),
        radial-gradient(ellipse 900px 700px at 0% 45%, rgba(138, 43, 226, .22), transparent 55%),
        radial-gradient(ellipse 900px 700px at 100% 55%, rgba(255, 0, 255, .16), transparent 55%),
        radial-gradient(ellipse 1000px 700px at 15% 100%, rgba(204, 255, 0, .08), transparent 60%);
    background-repeat: no-repeat;
    color: #e4e4e4;
    font-family: var(--ns-sans);
}

/* Typography styles */
.military-font,
h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-family: var(--ns-display);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.lime-text {
    color: var(--color-lime);
}

.violet-text {
    color: var(--color-violet);
}

.pink-text {
    color: var(--color-pink);
}

.text-muted {
    color: #888;
    font-size: 0.9rem;
}

.black-text {
    color: #000;
}

.glow-lime {
    text-shadow: 0 0 15px var(--color-lime-glow);
}

.glow-pink {
    text-shadow: 0 0 15px var(--color-pink-glow);
}

.glow-icon:hover {
    text-shadow: 0 0 10px var(--color-lime-glow);
}

/* (Header removed as per user request for redesign) */

/* Animations & Hero Area - REALISTIC VIDEO */
.warehouse-hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 3rem;
    border-bottom: 3px solid var(--metal-light);
}

.fullscreen-hero {
    height: 100vh;
    /* Full screen height */
    width: 100vw;
    /* Full screen width */
    margin-left: calc(-50vw + 50%);
    /* Break out of any container restrictions */
    margin-right: calc(-50vw + 50%);
}

.hero-top-nav {
    position: absolute;
    top: 30px;
    right: 50px;
    z-index: 50;
    /* Above video overlay */
    display: flex;
    gap: 30px;
    font-size: 1.2rem;
}

.nav-btn {
    color: #fff;
    text-decoration: none;
    font-family: 'Black Ops One', cursive;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s, transform 0.3s;
}

.nav-btn:hover {
    color: var(--color-lime);
    transform: scale(1.05);
}

.video-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
}

.bg-video {
    width: 100vw;
    height: 56.25vw;
    /* 16:9 Aspect Ratio */
    min-height: 100vh;
    min-width: 177.77vh;
    /* 16:9 Aspect Ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* Fallback for other media */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Darkens the video to make text readable */
    z-index: 1;
}

.dark-overlay {
    background: rgba(0, 0, 0, 0.65);
    /* Darker to help text visibility */
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
    max-width: 800px;
}

.title-military {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}

.subtitle-neon {
    font-size: 2rem;
    margin-top: 0;
    font-family: 'Teko', sans-serif;
    letter-spacing: 2px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #ddd;
}

/* Buttons */
.btn-swat {
    font-family: 'Black Ops One', cursive;
    padding: 12px 30px;
    font-size: 1.2rem;
    background: var(--color-lime);
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

.btn-swat:hover {
    background: #fff;
    box-shadow: 0 0 20px var(--color-lime-glow);
    transform: scale(1.05);
}

/* Warehouse Container Helpers */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-md-4 {
    width: 33.333%;
    padding: 0 15px;
    box-sizing: border-box;
}

.text-center {
    text-align: center;
}

.mt-3 {
    margin-top: 1rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.w-100 {
    width: 100%;
}

.uppercase {
    text-transform: uppercase;
}

.fw-bold {
    font-weight: bold;
}

.neon-divider {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-lime), transparent);
    width: 100px;
    margin: 10px auto;
}

/* Classic Prestashop Product Cards, modernized */
.warehouse-card {
    background: var(--metal-mid);
    border: 1px solid var(--metal-light);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.warehouse-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
    border-color: #555;
}

.product-header {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.warehouse-card:hover .product-img {
    transform: scale(1.05);
    /* Subtle zoom on hover like real store */
}

/* Badges */
.bpm-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: 'Black Ops One', cursive;
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 3px;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.badge-lime {
    background: var(--color-lime);
    color: #000;
}

.badge-violet {
    background: var(--color-violet);
    color: #fff;
}

.badge-pink {
    background: var(--color-pink);
    color: #fff;
}

.product-description {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-title a {
    color: #fff;
    text-decoration: none;
    font-size: 1.3rem;
    transition: color 0.2s;
}

.product-title a:hover {
    color: var(--color-lime);
}

.price {
    font-size: 2rem;
    font-family: 'Teko', sans-serif;
    letter-spacing: 1px;
}

/* DJ Audio Player UI - Integrated realistically into standard card layout */
.dj-audio-player {
    background: var(--metal-dark);
    border: 1px solid #000;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}

.dj-audio-player.player-lime .btn-play {
    color: var(--color-lime);
}

.dj-audio-player.player-lime .player-progress-bar {
    background: var(--color-lime);
    box-shadow: 0 0 5px var(--color-lime-glow);
}

.dj-audio-player.player-violet .btn-play {
    color: var(--color-violet);
}

.dj-audio-player.player-violet .player-progress-bar {
    background: var(--color-violet);
    box-shadow: 0 0 5px var(--color-violet-glow);
}

.dj-audio-player.player-pink .btn-play {
    color: var(--color-pink);
}

.dj-audio-player.player-pink .player-progress-bar {
    background: var(--color-pink);
    box-shadow: 0 0 5px var(--color-pink-glow);
}


.btn-play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn-play:hover {
    background: currentColor;
    color: #000 !important;
}

.player-progress-wrapper {
    flex-grow: 1;
    height: 4px;
    background: #222;
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
}

.player-progress-bar {
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

.player-time {
    font-family: 'Roboto', monospace;
    font-size: 0.8rem;
    color: #aaa;
    min-width: 70px;
    text-align: right;
}

/* PrestaShop Cart Buttons */
.btn-primary.add-to-cart {
    padding: 10px;
    border: none;
    font-family: 'Black Ops One', cursive;
    letter-spacing: 1px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cart-lime {
    background: var(--color-lime);
    color: #000;
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.4);
}

.btn-cart-lime:hover {
    background: #fff;
    box-shadow: 0 0 15px var(--color-lime-glow);
}

.btn-cart-violet {
    background: var(--color-violet);
    color: #fff;
    box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.btn-cart-violet:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 15px var(--color-violet-glow);
}

.btn-cart-pink {
    background: var(--color-pink);
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
}

.btn-cart-pink:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 15px var(--color-pink-glow);
}

/* =========================================================
   NEON DE SALA — reskin sobre los selectores reales del tema
   (product-miniature, header-nav, add-to-cart, etc. verificados
   en themes/warehouse/templates). Las fotos de producto se
   mantienen: el neon se aplica alrededor y por encima, nunca
   sustituyendo la imagen.
   ========================================================= */

/* --- Cabecera / navegación --- */
.header-nav a {
    font-family: var(--ns-mono);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color .2s;
}

.header-nav a:hover,
.header-nav a.active {
    color: var(--color-lime) !important;
    text-shadow: 0 0 10px var(--color-lime-glow);
}

/* --- Tarjeta de producto (listado) --- */
.product-miniature .thumbnail-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--metal-dark);
}

.product-miniature .thumbnail-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 9, 15, .85), transparent 55%);
    pointer-events: none;
}

.product-miniature .product-thumbnail-first {
    transition: transform .4s ease;
}

.product-miniature:hover .product-thumbnail-first {
    transform: scale(1.04);
}

.product-flags .product-flag {
    font-family: var(--ns-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    padding: 3px 9px;
    background: var(--color-pink);
    color: #171528;
    box-shadow: 0 0 12px var(--color-pink-glow);
}

.product-miniature .product-title,
.product-miniature .product-title a {
    font-family: var(--ns-sans);
    font-weight: 700;
    font-size: .95rem;
    text-transform: none;
    letter-spacing: 0;
    color: #f1eef7 !important;
}

.product-miniature .product-category-name {
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-violet);
}

.product-miniature .product-price-and-shipping .product-price {
    font-family: var(--ns-display);
    font-weight: 700;
    color: var(--color-pink);
}

.product-miniature .btn-product-list.add-to-cart {
    font-family: var(--ns-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: var(--color-lime);
    color: #171528;
    border: none;
    border-radius: 8px;
    box-shadow: 0 0 16px var(--color-lime-glow);
}

.product-miniature .btn-product-list.add-to-cart:hover {
    background: #fff;
    color: #171528;
}

/* --- Ficha de producto --- */
.product_p_price_container .current-price,
.product_p_price_container .product-price {
    font-family: var(--ns-display);
    font-weight: 800;
    color: var(--color-pink);
}

#product .btn-product-list.add-to-cart,
#product .add-to-cart {
    font-family: var(--ns-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--color-lime);
    color: #171528;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 20px var(--color-lime-glow);
}

/* Category Grid Images */
.category-img {
    width: 100%;
    border-radius: 4px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(0.9);
}

.category-img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
}

/* --- Botones de categoría (bloque Elementor real de la home) --- */
img.elementor-animation-shrink {
    border-radius: 10px;
    border: 1px solid transparent;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

img.elementor-animation-shrink:hover {
    border-color: var(--color-lime);
    box-shadow: 0 0 18px var(--color-lime-glow);
}

/* --- Carrusel de testimonios (bloque Elementor real de la home) --- */
.elementor-testimonial-wrapper {
    background: var(--metal-mid);
    border: 1px solid var(--metal-light);
    border-radius: 12px;
    padding: 20px;
}

.elementor-testimonial-content {
    font-family: var(--ns-sans);
    color: #c7c2b8;
}

.elementor-testimonial-name {
    font-family: var(--ns-sans);
    font-weight: 700;
    color: #f1eef7;
}

.elementor-testimonial-image img {
    border-radius: 50%;
    border: 2px solid var(--color-lime);
    object-fit: cover;
}

/* =========================================================
   PASE 2 — cerrar la distancia con la demo "Neon de Sala"
   ========================================================= */

/* --- Tarjeta de producto: quitar el marco ambar del tema y
   aplicar degradado + foto + marco propio --- */
.product-miniature {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 14px !important;
    background: var(--ns-surface, #171528) !important;
    overflow: hidden;
}

.product-miniature:hover {
    border-color: var(--color-lime) !important;
    box-shadow: 0 0 22px rgba(204, 255, 0, .25);
}

.product-miniature .thumbnail-container {
    position: relative;
    background:
        radial-gradient(circle at 25% 20%, rgba(138, 43, 226, .55), transparent 60%),
        radial-gradient(circle at 80% 75%, rgba(255, 0, 255, .35), transparent 60%),
        var(--metal-dark);
}

.product-miniature .thumbnail-container img.product-thumbnail-first {
    opacity: .82;
    mix-blend-mode: luminosity;
}

.product-miniature .thumbnail-container::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(204, 255, 0, .55);
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

.product-flags {
    z-index: 3;
}

/* --- Botones de categoria: marco redondeado consistente --- */
.elementor-image img.elementor-animation-shrink {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
}

/* --- Testimonios: quitar el marco cuadrado por defecto del widget --- */
.elementor-testimonial-wrapper {
    box-shadow: none !important;
}

/* =========================================================
   PASE 3 — Carrusel "Ultimas 10 sesiones": foto en blanco y
   negro con marco de esquinas, como en la demo aprobada.
   Solo afecta al carrusel (scoped), no a la rejilla "Nuevo".
   ========================================================= */
.elementor-products-carousel .product-miniature {
    background: #0d0c14 !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

.elementor-products-carousel .thumbnail-container {
    background: #000 !important;
}

.elementor-products-carousel .thumbnail-container img.product-thumbnail-first {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: grayscale(1) contrast(1.15);
}

.elementor-products-carousel .thumbnail-container::before {
    inset: auto;
    top: 10px;
    right: 10px;
    left: auto;
    width: 20px;
    height: 20px;
    border: none;
    border-top: 2px solid var(--color-lime);
    border-right: 2px solid var(--color-lime);
    border-radius: 0;
}

.elementor-products-carousel .thumbnail-container::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--color-lime);
    border-left: 2px solid var(--color-lime);
    background: none;
    z-index: 2;
}

.elementor-products-carousel .thumbnail-container {
    box-shadow: inset 0 -60px 40px -20px rgba(0, 0, 0, .85);
}

.elementor-products-carousel .cdnum,
.elementor-products-carousel .thumbnail-container .product-flags {
    z-index: 3;
}
/* =========================================================
   PASE 4 — HERO "NEON DE SALA" (portada)
   Estructura generada por custom.js leyendo los textos de
   Elementor. Aqui va solo el estilo.
   ========================================================= */

/* Widgets originales que el hero nuevo ya reemplaza */
.ns-replaced { display: none !important; }

/* --- Cabecera oscura --- */
.ns-hero-on #header,
.ns-hero-on .header-top,
.ns-hero-on #iqitmegamenu-wrapper,
.ns-hero-on #cbp-hrmenu1,
.ns-hero-on .cbp-hrmenu > ul {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ns-hero-on #iqitmegamenu-wrapper .cbp-hrmenu > ul > li > a,
.ns-hero-on #cbp-hrmenu1 > li > a {
    font-family: var(--ns-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #b8b3c6 !important;
    background: transparent !important;
    padding: 10px 14px;
}

.ns-hero-on #iqitmegamenu-wrapper .cbp-hrmenu > ul > li > a:hover,
.ns-hero-on #cbp-hrmenu1 > li > a:hover {
    color: var(--color-lime) !important;
    background: transparent !important;
}

.ns-hero-on #search_widget input,
.ns-hero-on .search-widget input[type="text"] {
    background: var(--ns-surface) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 999px !important;
    color: #d7d2e4 !important;
    font-family: var(--ns-sans);
    font-size: .85rem;
    padding-left: 20px;
}

.ns-hero-on #search_widget input::placeholder { color: #7b7398; }

/* --- Rejilla del hero --- */
.ns-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    padding: 46px 0 30px;
    text-align: left;
}

.ns-eyebrow {
    font-family: var(--ns-mono);
    font-size: .74rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #a79fc4;
    margin-bottom: 16px;
}

.ns-headline {
    font-family: var(--ns-display);
    font-weight: 800;
    font-size: clamp(2rem, 3.6vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.ns-headline span { display: block; }
.ns-headline .ns-l2 { color: var(--color-lime); }

.ns-sub {
    font-family: var(--ns-sans);
    font-size: .97rem;
    line-height: 1.6;
    color: var(--ns-text-dim);
    max-width: 27rem;
    margin: 20px 0 26px;
    text-transform: none;
}

.ns-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ns-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ns-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 14px 24px;
    border-radius: 11px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.ns-btn-primary {
    background: var(--color-lime);
    color: #14121f !important;
    box-shadow: 0 0 26px rgba(204, 255, 0, .28);
}

.ns-btn-primary:hover {
    background: #e2ff5c;
    transform: translateY(-1px);
}

.ns-btn-ghost {
    border: 1px solid #3a3560;
    color: #e9e6f2 !important;
    background: rgba(255, 255, 255, .02);
}

.ns-btn-ghost:hover {
    border-color: var(--color-lime);
    color: var(--color-lime) !important;
}

.ns-btn-ghost b { color: var(--color-lime); font-weight: 600; }

.ns-guarantee {
    font-family: var(--ns-mono);
    font-size: .72rem;
    line-height: 1.6;
    color: #7b7398;
    max-width: 30rem;
}

.ns-guarantee b { color: var(--color-lime); font-weight: 600; }

/* --- Tarjeta del ecualizador (solo el hero: la ficha de producto
       reutiliza .ns-wave para su reproductor) --- */
.ns-hero-right .ns-wave {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 18px;
    padding: 28px 26px 22px;
}

.ns-wave-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 118px;
}

.ns-wave-bars i {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--color-lime), var(--color-pink) 55%, var(--color-violet));
    animation: ns-eq 1.9s ease-in-out infinite alternate;
    transform-origin: bottom;
}

@keyframes ns-eq {
    from { transform: scaleY(.72); }
    to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ns-wave-bars i { animation: none; }
}

.ns-wave-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .04em;
    color: #7b7398;
}

.ns-wave-meta .ns-now { color: #ff7ae0; }

/* --- Chips de categoria --- */
.ns-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 4px 0 34px;
}

.ns-chip {
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #a79fc4 !important;
    border: 1px solid #2f2a4d;
    border-radius: 999px;
    padding: 9px 17px;
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.ns-chip:hover {
    color: var(--color-lime) !important;
    border-color: var(--color-lime);
    box-shadow: 0 0 14px rgba(204, 255, 0, .18);
}

/* --- Titulo "Ultimas 10 sesiones" --- */
.ns-hero-on .elementor-element-a9jftfn .elementor-heading-title {
    font-family: var(--ns-display) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    letter-spacing: .01em !important;
    color: #f4f2fa !important;
    text-align: left !important;
}

.ns-hero-on .elementor-element-a9jftfn { text-align: left !important; }

@media (max-width: 991px) {
    .ns-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 30px;
    }
    .ns-sub { max-width: none; }
}

/* =========================================================
   PASE 5 — Cabecera oscura + ajustes finos del hero
   ========================================================= */

/* --- La barra amarilla del menu pasa a oscura --- */
.ns-hero-on nav.header-nav,
.ns-hero-on #iqitmegamenu-horizontal,
.ns-hero-on .iqitmegamenu,
.ns-hero-on #iqitmegamenu-mobile,
.ns-hero-on .mobile-buttons-bar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ns-hero-on #iqitmegamenu-horizontal .cbp-hrmenu > ul > li > a,
.ns-hero-on #iqitmegamenu-horizontal a.nav-link,
.ns-hero-on #iqitmegamenu-horizontal li > a {
    font-family: var(--ns-mono) !important;
    font-size: .73rem !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #b8b3c6 !important;
    background: transparent !important;
    border: none !important;
    padding: 12px 15px !important;
    transition: color .2s ease;
}

.ns-hero-on #iqitmegamenu-horizontal li > a:hover,
.ns-hero-on #iqitmegamenu-horizontal li.active > a {
    color: var(--color-lime) !important;
    background: transparent !important;
}

/* Icono "home" del menu, sin recuadro gris */
.ns-hero-on #iqitmegamenu-horizontal li.cbp-hropen > a,
.ns-hero-on #iqitmegamenu-horizontal li:first-child > a {
    background: transparent !important;
}

/* --- Carrito y sesion, en pildora oscura --- */
.ns-hero-on #cart-toogle,
.ns-hero-on .header-btn.header-cart-btn {
    background: var(--ns-surface) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 999px !important;
    color: #e9e6f2 !important;
    font-family: var(--ns-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    padding: 10px 18px !important;
}

.ns-hero-on #cart-toogle:hover { border-color: var(--color-lime) !important; }

.ns-hero-on #blockcart-content {
    background: var(--ns-surface) !important;
    border: 1px solid var(--ns-border) !important;
    color: #e9e6f2 !important;
}

/* --- Ecualizador: degradado exacto de la maqueta --- */
.ns-wave-bars i {
    background: linear-gradient(180deg, var(--color-lime), var(--color-violet)) !important;
}

/* --- Separacion del titulo "Ultimas 10 sesiones" --- */
.ns-hero-on .elementor-element-a9jftfn {
    margin: 26px 0 20px !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
}

.ns-hero-on .elementor-element-a9jftfn .elementor-heading-title {
    line-height: 1.25 !important;
    display: block;
    padding-bottom: 4px;
}

/* El carrusel arranca despues del titulo, sin solaparse */
.ns-hero-on .elementor-element-qd38hmk,
.ns-hero-on .elementor-element-5vfyaez {
    margin-top: 6px !important;
}

/* Espaciador sobrante entre hero y catalogo */
.ns-hero-on .elementor-element-oh854yd { display: none !important; }

/* =========================================================
   PASE 6 — Detalles finales de portada
   ========================================================= */

/* El titulo de seccion no depende de la animacion de entrada:
   se ve siempre, sin quedarse a medio desvanecer */
.ns-hero-on .elementor-element-a9jftfn.elementor-invisible,
.ns-hero-on .elementor-element-a9jftfn.animated {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Cabecera compacta, como en la maqueta */
.ns-hero-on #header .logo {
    max-height: 62px;
    width: auto;
}

.ns-hero-on #header .col-header-left,
.ns-hero-on #header .col-header-center,
.ns-hero-on #header .col-header-right {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ns-hero-on #iqitmegamenu-wrapper .container-iqitmegamenu {
    padding-top: 0;
    padding-bottom: 6px;
}

/* Enlace "Iniciar sesion" en el mismo tono que el resto */
.ns-hero-on #header .header-btn:not(.header-cart-btn) {
    font-family: var(--ns-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: #b8b3c6 !important;
}

.ns-hero-on #header .header-btn:not(.header-cart-btn):hover {
    color: var(--color-lime) !important;
}

/* =========================================================
   PASE 7 — Barra fija con fondo solido
   Al hacerse transparente el menu, el contenido se transparentaba
   por detras de la barra fija al bajar. Fondo opaco y desenfoque.
   ========================================================= */
.ns-hero-on .sticky-desktop-wrapper,
.ns-hero-on #iqitmegamenu-wrapper.iqitmegamenu-sticky,
.ns-hero-on .js-sticky-wrapper.is-sticky > * {
    background: rgba(10, 9, 16, .94) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* La cabecera principal tambien opaca al quedarse fija */
.ns-hero-on .header-sticky,
.ns-hero-on #header.sticky,
.ns-hero-on .fixed-header {
    background: rgba(10, 9, 16, .94) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Boton "volver arriba" a juego */
.ns-hero-on #back-to-top,
.ns-hero-on .back-to-top {
    background: var(--color-lime) !important;
    color: #14121f !important;
    border: none !important;
    border-radius: 10px !important;
}

/* =========================================================
   PASE 8 — Menu en la misma linea que el logo
   La columna .col-header-nav se crea en header-1.tpl.
   ========================================================= */
.ns-hero-on .col-header-nav {
    flex: 1 1 0%;
    min-width: 0;
    padding-left: 20px;
    padding-right: 12px;
}

.ns-hero-on .col-header-nav .container-iqitmegamenu,
.ns-hero-on .col-header-nav #iqitmegamenu-wrapper {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* El tema maqueta el menu con floats y el <ul> reclama el ancho
   completo. Pasandolo a flex, los enlaces envuelven dentro de la
   columna en vez de empujar al buscador a otra linea. */
.ns-hero-on .col-header-nav .cbp-hrmenu > ul {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
    width: auto !important;
    min-width: 0;
}

.ns-hero-on .col-header-nav .cbp-hrmenu > ul > li {
    float: none !important;
    flex: 0 0 auto;
}

.ns-hero-on .col-header-nav li > a {
    padding: 7px 11px !important;
    font-size: .715rem !important;
}

/* El buscador se compacta para dejar sitio al menu */
.ns-hero-on #header .col-header-center {
    width: 235px;
    max-width: 235px;
}

/* La fila vacia a ancho completo no debe robar espacio */
.ns-hero-on #header .row.align-items-center > .col-12:not(:has(*:not(:empty))) {
    height: 0;
    overflow: hidden;
}

/* La cabecera entera pasa a ser la barra fija */
.ns-hero-on #header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 9, 16, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

@media (max-width: 1199px) {
    .ns-hero-on #header .col-header-center { width: 190px; max-width: 190px; }
    .ns-hero-on .col-header-nav li > a { padding: 6px 8px !important; font-size: .68rem !important; }
}

/* El contenedor "sticky" del menu, ya dentro de la cabecera, no debe
   pintar su propio panel ni intentar quedarse fijo por su cuenta:
   la barra fija ahora es #header completo. */
.ns-hero-on .col-header-nav .sticky-desktop-wrapper,
.ns-hero-on .col-header-nav .iqitmegamenu,
.ns-hero-on .col-header-nav #iqitmegamenu-horizontal {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: static !important;
    top: auto !important;
}

/* =========================================================
   CORRECCION — Menu movil opaco
   Al quitar el amarillo se dejo transparente el panel lateral
   y el contenido de la pagina se transparentaba por detras.
   ========================================================= */
.ns-hero-on #iqitmegamenu-mobile,
.ns-hero-on .mobile-menu,
.ns-hero-on .js-mobile-menu {
    background: #0d0b14 !important;
}

.ns-hero-on .mobile-menu__header,
.ns-hero-on .mobile-menu__top,
.ns-hero-on .mobile-menu__back-btn,
.ns-hero-on .mobile-menu__close {
    background: #0d0b14 !important;
    color: #e9e6f2 !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

.ns-hero-on .mobile-menu__link {
    color: #e9e6f2 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-family: var(--ns-sans);
}

.ns-hero-on .mobile-menu__link:hover,
.ns-hero-on .mobile-menu__link:focus {
    color: var(--color-lime) !important;
}

/* La barra de botones del movil, legible sobre fondo oscuro */
.ns-hero-on .mobile-buttons-bar {
    background: #0d0b14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ns-hero-on .mobile-buttons-bar .m-nav-btn,
.ns-hero-on .mobile-buttons-bar a {
    color: #e9e6f2 !important;
}

/* Cabecera del panel movil (la franja del boton de cerrar) */
.ns-hero-on .mm-panel__header,
.ns-hero-on .mobile-menu__header-wrapper {
    background: #0d0b14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    color: #e9e6f2 !important;
}

/* =========================================================
   PASE 9 — Correcciones pedidas
   1. El menu saltaba al hacer scroll
   2. Buscador pequeno y lupa ilegible
   3. Tinte morado sobre las fotos de producto
   4. Ficha de producto en listado, mejor encuadrada
   ========================================================= */

/* --- 1. El tema fija el menu al bajar (Waypoint.Sticky anade .stuck)
   y lo sacaba de la cabecera. Como #header ya es la barra fija,
   anulamos ese comportamiento. --- */
.ns-hero-on .stuck,
.ns-hero-on .stuck-header-element {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}

.ns-hero-on .sticky-desktop-wrapper {
    height: auto !important;
}

/* --- 2. Buscador: mas ancho, con boton redondo visible --- */
.ns-hero-on #header .col-header-center {
    width: 238px;
    max-width: 238px;
}

/* Enlaces del menu algo mas justos para que quepan en dos lineas */
.ns-hero-on .col-header-nav li > a {
    padding: 6px 9px !important;
    font-size: .70rem !important;
}

.ns-hero-on #search_widget,
.ns-hero-on #search_widget form {
    width: 100%;
}

.ns-hero-on #search_widget .input-group {
    position: relative;
    display: block;
}

.ns-hero-on #search_widget input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 0 48px 0 18px;
    border-radius: 999px !important;
}

.ns-hero-on #search_widget .input-group button,
.ns-hero-on #search_widget .input-group .btn,
.ns-hero-on #search_widget button[type="submit"] {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none !important;
    border-radius: 50% !important;
    background: var(--color-lime) !important;
    color: #14121f !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    line-height: 1;
}

.ns-hero-on #search_widget .input-group button i,
.ns-hero-on #search_widget .input-group .btn i {
    color: #14121f !important;
    margin: 0;
}

/* Panel de resultados: ancho legible y a juego */
.ns-hero-on .autocomplete-suggestions,
.ns-hero-on .ui-autocomplete {
    min-width: 420px !important;
    background: var(--ns-surface) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 12px !important;
    color: #e9e6f2 !important;
    padding: 6px !important;
}

.ns-hero-on .autocomplete-suggestion {
    color: #e9e6f2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 9px 10px !important;
    border-radius: 8px;
}

.ns-hero-on .autocomplete-suggestion:last-child { border-bottom: none; }

.ns-hero-on .autocomplete-suggestion:hover,
.ns-hero-on .autocomplete-suggestion.selected {
    background: rgba(255, 255, 255, .06) !important;
}

/* --- 3. Fuera el tinte morado: la foto, con su color original --- */
.ns-hero-on .product-miniature .thumbnail-container {
    background: #0f0e15 !important;
}

.ns-hero-on .product-miniature .thumbnail-container img.product-thumbnail-first {
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* El marco lima solo en el carrusel de la portada, no en los listados */
.ns-hero-on .product-miniature .thumbnail-container::before {
    display: none;
}

.ns-hero-on .elementor-products-carousel .thumbnail-container::before {
    display: block;
}

/* --- 4. Encuadre de la ficha en el listado --- */
.ns-hero-on .product-miniature .thumbnail-container {
    height: 330px;
    aspect-ratio: auto;
}

.ns-hero-on .product-miniature .thumbnail-container img.product-thumbnail-first {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ns-hero-on .product-miniature .product-description {
    padding: 12px 14px 14px;
}

.ns-hero-on .product-miniature .product-category-name {
    font-size: .62rem !important;
    margin-bottom: 4px;
}

.ns-hero-on .product-miniature .product-title,
.ns-hero-on .product-miniature .product-title a {
    font-size: .88rem !important;
    line-height: 1.35 !important;
}

.ns-hero-on .product-miniature .product-features-list {
    font-size: .74em !important;
    line-height: 1.45 !important;
}

.ns-hero-on .product-miniature .product-price {
    font-size: 1.05rem !important;
}

/* =========================================================
   PASE 10
   1. Carrusel de portada a color; blanco y negro al pasar el raton
   2. Carrito e "Iniciar sesion" dejan de pisarse
   ========================================================= */

/* --- 1. Portada: color por defecto, B/N al pasar el raton --- */
.ns-hero-on .elementor-products-carousel .thumbnail-container img.product-thumbnail-first {
    filter: none;
    transition: filter .35s ease, transform .4s ease;
}

.ns-hero-on .elementor-products-carousel .product-miniature:hover .thumbnail-container img.product-thumbnail-first {
    filter: grayscale(1) contrast(1.15);
}

@media (prefers-reduced-motion: reduce) {
    .ns-hero-on .elementor-products-carousel .thumbnail-container img.product-thumbnail-first {
        transition: none;
    }
}

/* El fondo negro del carrusel ya no hace falta con la foto a color */
.ns-hero-on .elementor-products-carousel .thumbnail-container {
    background: #0f0e15 !important;
}

/* --- 2. Columna derecha: carrito y acceso, apilados sin solaparse --- */
.ns-hero-on #header .col-header-right {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ns-hero-on #header .col-header-right > * {
    margin: 0 !important;
    float: none !important;
}

.ns-hero-on #header .col-header-right #ps-shoppingcart,
.ns-hero-on #header .col-header-right #sticky-cart-wrapper {
    position: static !important;
    display: block;
}

.ns-hero-on #header .col-header-right .header-btn {
    white-space: nowrap;
}

/* =========================================================
   PASE 11
   1. La cabecera fija debe tapar el contenido al bajar
   2. Tarjetas de resenas, todas a la misma altura
   ========================================================= */

/* --- 1. Fondo solido de la cabecera.
   Una regla anterior la dejaba transparente con !important (para
   quitar la franja amarilla) y al bajar sobre imagenes claras el
   menu se volvia ilegible. Aqui se impone el fondo oscuro. --- */
.ns-hero-on #header {
    background: rgba(10, 9, 16, .96) !important;
}

/* Los bloques interiores siguen sin fondo propio */
.ns-hero-on #header .header-top,
.ns-hero-on #header #desktop-header {
    background: transparent !important;
}

/* Refuerzo de legibilidad del menu sobre cualquier fondo */
.ns-hero-on .col-header-nav li > a {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* --- 2. Carruseles: todas las tarjetas a la misma altura --- */
.ns-hero-on .swiper-wrapper {
    align-items: stretch;
}

.ns-hero-on .swiper-slide {
    height: auto !important;
}

.ns-hero-on .swiper-slide > .swiper-slide-inner {
    height: 100%;
}

.ns-hero-on .elementor-testimonial-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* La cita absorbe el espacio sobrante, asi nombre y cargo
   quedan alineados abajo en todas las tarjetas */
.ns-hero-on .elementor-testimonial-content {
    flex: 1 1 auto;
}

/* =========================================================
   PASE 12 — Etiqueta "Nuevo" bien encuadrada
   Estaba pegada a 0,0 de la esquina, chocando con el redondeo
   del borde y con el borde superior de la foto.
   ========================================================= */
/* El contenedor .product-flags ignora top/left (el tema los fija por
   otra via y ni siquiera un estilo en linea con !important los cambia),
   asi que la etiqueta se separa con margen, que si responde. */
.ns-hero-on .product-miniature .product-flags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.ns-hero-on .product-miniature .product-flags .product-flag {
    display: inline-block;
    margin: 12px 0 0 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 12px var(--color-pink-glow);
}


/* =========================================================
   PASE 13 — Tarjeta de producto mas compacta
   El titulo a tres lineas, el reproductor y el boton hacian
   que el bloque de texto se saliera. Se ajusta y se deja aire.
   ========================================================= */

/* Titulo a dos lineas como maximo: ademas iguala todas las tarjetas */
.ns-hero-on .product-miniature .product-title,
.ns-hero-on .product-miniature .product-title a {
    font-size: .82rem !important;
    line-height: 1.3 !important;
}

.ns-hero-on .product-miniature .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    margin-bottom: 6px !important;
}

.ns-hero-on .product-miniature .product-features-list {
    font-size: .72em !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

/* El reproductor, a todo el ancho y con aire arriba y abajo */
.ns-hero-on .product-miniature audio {
    display: block;
    width: 100%;
    height: 30px;
    margin: 6px 0 10px;
}

.ns-hero-on .product-miniature .product-add-cart {
    padding-top: 0 !important;
    margin: 0 !important;
}

.ns-hero-on .product-miniature .add-to-cart {
    padding: 8px 14px !important;
}

.ns-hero-on .product-miniature .product-description {
    padding: 12px 14px 16px;
}

/* Un poco menos de alto en la foto, la tarjeta respira mejor */
.ns-hero-on .product-miniature .thumbnail-container {
    height: 300px;
}

/* =========================================================
   PASE 14 — Ficha de producto, opcion "Directa"
   Orden de lectura: que es -> como suena -> a que velocidad
   -> cuanto cuesta -> descripcion. El formulario de compra no
   se toca: solo se reordena visualmente.
   ========================================================= */

/* --- Columnas: la foto se ajusta y el contenido gana sitio --- */
.ns-ficha-on .product-info-row .col-product-image {
    flex: 0 0 340px;
    max-width: 340px;
}

.ns-ficha-on .product-info-row .col-product-info {
    flex: 1 1 auto;
    max-width: none;
}

.ns-ficha-on .col-product-image .images-container {
    border: 1px solid var(--ns-border);
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.ns-ficha-on .col-product-image .images-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Orden de bloques en la columna derecha --- */
.ns-ficha-on .product-information {
    display: flex;
    flex-direction: column;
}

.ns-ficha-on .product-information .ns-ficha { order: 1; }
.ns-ficha-on .product-information .product-actions { order: 2; }
.ns-ficha-on .product-information [id^="product-description-short"] { order: 3; }
.ns-ficha-on .product-information .ns-garantia { order: 4; }

/* --- Titulo --- */
.ns-ficha-on .product_header_container .page-title {
    font-family: var(--ns-display);
    font-size: 1.6rem;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ns-ficha-on .ns-cat {
    font-family: var(--ns-mono);
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-violet);
    margin-bottom: 10px;
}

/* --- Chips de datos --- */
.ns-chips-ficha { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.ns-chip-ficha {
    font-family: var(--ns-mono);
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #2f2a4d;
    color: var(--ns-text-dim);
}

/* --- Reproductor unico --- */
.ns-player-label,
.ns-speeds-label {
    font-family: var(--ns-mono);
    font-size: .62rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7b7398;
    margin-bottom: 8px;
}

.ns-player {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    padding: 14px 16px;
}

.ns-play {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-lime);
    color: #14121f;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; cursor: pointer; flex-shrink: 0;
    box-shadow: 0 0 18px rgba(204, 255, 0, .3);
}

.ns-play:hover { background: #e2ff5c; }

/* Ojo: el ecualizador del hero usa tambien .ns-wave. Estas reglas
   se acotan al reproductor para no aplastarlo. */
.ns-player .ns-wave {
    display: flex; align-items: center; gap: 2px;
    height: 38px; flex: 1; min-width: 0; cursor: pointer;
}

.ns-player .ns-wave i {
    flex: 1;
    border-radius: 2px;
    background: #3a3560;
    transition: background .15s ease;
}

.ns-player .ns-wave i.on { background: linear-gradient(180deg, var(--color-lime), var(--color-violet)); }

.ns-time {
    font-family: var(--ns-mono);
    font-size: .68rem;
    color: #7b7398;
    flex-shrink: 0;
    min-width: 76px;
    text-align: right;
}

.ns-player-error { border-color: rgba(255, 0, 255, .4); }

/* --- Velocidad en botones (el <select> real queda oculto) --- */
.ns-ficha-on .product-variants { display: none !important; }

.ns-speeds-box { margin-top: 20px; }
.ns-speeds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.ns-speed {
    font-family: var(--ns-mono);
    font-size: .7rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid #2f2a4d;
    background: transparent;
    color: var(--ns-text-dim);
    cursor: pointer;
    line-height: 1.25;
    text-align: center;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.ns-speed:hover { border-color: #4a4270; color: #e9e6f2; }

.ns-speed.sel {
    border-color: var(--color-lime);
    color: var(--color-lime);
    background: rgba(204, 255, 0, .09);
    box-shadow: 0 0 14px rgba(204, 255, 0, .16);
}

.ns-speed small {
    display: block;
    font-size: .56rem;
    letter-spacing: .05em;
    color: #7b7398;
    margin-top: 3px;
}

.ns-speed.sel small { color: var(--color-lime); }

.ns-speeds-help {
    font-family: var(--ns-mono);
    font-size: .62rem;
    color: #7b7398;
}

/* --- Bloque de compra --- */
.ns-ficha-on .product-actions {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ns-border);
}

.ns-ficha-on .ns-garantia {
    font-family: var(--ns-mono);
    font-size: .68rem;
    line-height: 1.6;
    color: #7b7398;
    margin-top: 16px;
}

.ns-ficha-on .ns-garantia b { color: var(--color-lime); }

/* --- Etiqueta "Nuevo": variante A, pildora lima con pulso --- */
.ns-ficha-on .product-flags .product-flag,
.ns-hero-on .product-miniature .product-flags .product-flag.new,
.ns-ficha-on .product-flags .product-flag.new {
    background: var(--color-lime) !important;
    color: #14121f !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    padding: 7px 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 3px rgba(204, 255, 0, .18), 0 0 24px rgba(204, 255, 0, .55), 0 4px 14px rgba(0, 0, 0, .5) !important;
    animation: nsFlagPulse 2.4s ease-in-out infinite;
}

@keyframes nsFlagPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(204, 255, 0, .18), 0 0 22px rgba(204, 255, 0, .45), 0 4px 14px rgba(0, 0, 0, .5); }
    50%      { box-shadow: 0 0 0 6px rgba(204, 255, 0, .10), 0 0 34px rgba(204, 255, 0, .75), 0 4px 14px rgba(0, 0, 0, .5); }
}

@media (prefers-reduced-motion: reduce) {
    .ns-ficha-on .product-flags .product-flag,
    .ns-hero-on .product-miniature .product-flags .product-flag.new { animation: none; }
}

@media (max-width: 991px) {
    .ns-ficha-on .product-info-row .col-product-image {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/* Enlace de reserva si el audio no llega a cargar */
.ns-player-link {
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-lime) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =========================================================
   PASE 15 — Sin bloque de pestanas y orden correcto
   ========================================================= */

/* Las pestanas se ocultan (no se borran: de ahi sale la URL de la demo) */
.ns-sin-tabs .tabs.product-tabs,
.ns-sin-tabs #product-infos-accordion-mobile {
    display: none !important;
}

/* Los elementos sueltos (compartir, etiquetas, enlace de resena) iban
   antes de la descripcion por no tener orden asignado */
/* Orden de lectura: que es y como suena -> que velocidad -> de que va
   la sesion -> cuanto cuesta y comprar. La descripcion queda en el hueco
   entre el selector de velocidad y el precio. */
.ns-ficha-on .product-information > * { order: 4; }
.ns-ficha-on .product-information .ns-ficha { order: 1; }
.ns-ficha-on .product-information [id^="product-description-short"] { order: 2; }
.ns-ficha-on .product-information .product-actions { order: 3; }
.ns-ficha-on .product-information .ns-garantia { order: 5; }

/* La descripcion, con aire entre las dos lineas */
.ns-ficha-on .product-information [id^="product-description-short"] {
    margin: 4px 0 2px;
    color: var(--ns-text-dim);
    font-size: .95rem;
    line-height: 1.65;
}

/* Etiquetas del producto, en la linea del resto */
.ns-ficha-on .product-tags a,
.ns-ficha-on .product-information .tags-list a {
    font-family: var(--ns-mono);
    font-size: .66rem;
    letter-spacing: .04em;
}

/* =========================================================
   PASE 16 — Bloque de resenas: fuera el recuadro blanco
   ========================================================= */

#product-comments-list .product-comment-list-item,
#empty-product-comment {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 24px !important;
}

/* Que el boton se vea, y en el idioma del tema */
#empty-product-comment .btn-comment,
#product-comments-list .post-product-comment {
    background: transparent !important;
    color: var(--color-lime) !important;
    border: 1px solid var(--color-lime) !important;
    border-radius: 999px !important;
    font-family: var(--ns-mono) !important;
    font-size: .78rem !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    padding: 12px 26px !important;
    transition: background .18s ease, color .18s ease;
}

#empty-product-comment .btn-comment:hover,
#product-comments-list .post-product-comment:hover {
    background: var(--color-lime) !important;
    color: #0d0b14 !important;
}

/* =========================================================
   PASE 17 — Pie de pagina "Neon de Sala"
   ========================================================= */

.ns-foot-on #footer {
    position: relative;
    background: #08070d !important;
    border-top: 0 !important;
    overflow: hidden;
}

/* Filo de neon y resplandor de sala */
.ns-foot-on #footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        var(--color-lime) 0%,
        var(--color-violet) 48%,
        var(--color-pink) 100%);
}

.ns-foot-on #footer::after {
    content: "";
    position: absolute;
    top: -180px;
    left: 50%;
    width: 900px;
    height: 360px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(138, 43, 226, .28) 0%,
        rgba(138, 43, 226, 0) 70%);
    pointer-events: none;
}

/* El contenedor original queda vacio: sus bloques se han movido */
.ns-foot-on #footer-container-main { display: none !important; }

.ns-foot {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 62px 15px 46px;
}

.ns-foot-grid {
    display: grid;
    grid-template-columns: 1.5fr .95fr .75fr 1.05fr;
    gap: 44px;
    align-items: start;
}

.ns-foot-title {
    margin: 0 0 18px;
    font-family: var(--ns-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-lime);
}

.ns-foot-title::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    margin-top: 9px;
    background: var(--color-lime);
    opacity: .55;
}

/* --- Marca --- */
.ns-foot-logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 18px;
}

.ns-foot-claim {
    max-width: 34ch;
    margin: 0 0 22px;
    color: var(--ns-text-dim);
    font-size: .88rem;
    line-height: 1.7;
}

/* --- Listas de enlaces (propias y las del modulo) --- */
.ns-foot ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ns-foot-links--dos {
    columns: 2;
    column-gap: 26px;
}

.ns-foot li { margin: 0 0 9px; break-inside: avoid; }

.ns-foot a,
.ns-foot .block-content a {
    display: inline-block;
    color: var(--ns-text-dim) !important;
    font-size: .88rem;
    text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}

.ns-foot a:hover,
.ns-foot .block-content a:hover {
    color: var(--color-lime) !important;
    transform: translateX(3px);
}

/* Los bloques movidos pierden la caja del tema */
.ns-foot .block,
.ns-foot .block-content {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.ns-foot .block-title { display: none !important; }

/* --- Contacto --- */
.ns-foot .contact-rich { color: var(--ns-text-dim); font-size: .88rem; }
.ns-foot .contact-rich strong {
    display: block;
    margin-bottom: 12px;
    color: #fff;
    font-family: var(--ns-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ns-foot .contact-rich .part {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.ns-foot .contact-rich .icon { color: var(--color-lime); width: 16px; text-align: center; }
.ns-foot .contact-rich .icon i { font-size: .95rem; }

.ns-foot-wa {
    display: inline-block;
    margin-top: 16px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--color-lime);
    color: #0d0b14 !important;
    font-family: var(--ns-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: box-shadow .18s ease, transform .18s ease;
}

.ns-foot-wa:hover {
    color: #0d0b14 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(204, 255, 0, .28);
}

/* --- Redes --- */
.ns-foot .social-links {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.ns-foot .social-links li { margin: 0; }

.ns-foot .social-links a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ns-border);
    border-radius: 50%;
    color: var(--ns-text-dim) !important;
    background: rgba(255, 255, 255, .02);
    transition: all .18s ease;
}

.ns-foot .social-links a:hover {
    transform: translateY(-2px);
    border-color: var(--color-lime);
    color: var(--color-lime) !important;
    box-shadow: 0 6px 18px rgba(204, 255, 0, .18);
}

.ns-foot .social-links a::before { content: none !important; }
.ns-foot .social-links i { font-size: .95rem; }

/* --- Barra inferior --- */
.ns-foot-on #footer-copyrights {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border-top: 1px solid var(--ns-border);
}

.ns-foot-on #footer-copyrights .container { max-width: 1200px; }

.ns-foot-on #footer-copyrights .copyright-txt,
.ns-foot-on #footer-copyrights .copyright-txt p,
.ns-foot-on #footer-copyrights span {
    margin: 0;
    color: #6e6a80 !important;
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .06em;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .ns-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .ns-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .ns-foot { padding: 44px 15px 32px; }
    .ns-foot-grid { grid-template-columns: 1fr; gap: 30px; }
    .ns-foot-claim { max-width: none; }
}

/* Retoques del pie: una sola forma de lista y CTA en una linea */
.ns-foot .block-content a::before,
.ns-foot .block-content li::before {
    content: none !important;
    display: none !important;
}

.ns-foot .contact-rich .part {
    border: 0 !important;
    padding: 0 !important;
}

.ns-foot-wa { white-space: nowrap; }

.ns-foot .contact-rich hr { display: none !important; }
.ns-foot .block-content a { padding-left: 0 !important; }

/* =========================================================
   PASE 18 — Ajuste fino en movil
   ========================================================= */

/* Una sola linea separadora antes del precio (habia dos, con
   una franja vacia en medio) */
.ns-ficha-on .product_p_price_container {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* Caja de cantidad: fuera el amarillo del tema */
.ns-ficha-on .product-quantity .bootstrap-touchspin,
.ns-ficha-on .product-quantity .input-group.form-control,
.ns-ficha-on .product-quantity input.form-control {
    border-color: var(--ns-border) !important;
    border-width: 1px !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.ns-ficha-on .product-quantity .btn-touchspin {
    border-color: var(--ns-border) !important;
    background: transparent !important;
    color: var(--ns-text-dim) !important;
}

.ns-ficha-on .product-quantity .btn-touchspin:hover {
    color: var(--color-lime) !important;
}

/* Titulo del bloque de resenas, en el idioma del tema */
.ns-ficha-on .comments-nb.section-title,
.ns-sin-tabs .comments-nb.section-title {
    font-family: var(--ns-mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-lime);
}

@media (max-width: 767px) {
    /* La descripcion no lleva sangria en pantalla estrecha */
    .ns-ficha-on .product-information [id^="product-description-short"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Fila de compra: cantidad y boton en la misma linea, sin
       desbordar por los margenes negativos de la rejilla */
    .ns-ficha-on .product-add-to-cart .product-quantity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ns-ficha-on .product-quantity > [class*="col-add-"] {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none;
    }

    .ns-ficha-on .col-add-qty { flex: 0 0 96px; }
    /* Ojo: el propio <input> lleva la clase input-group, por eso
       se acota solo el envoltorio del touchspin */
    .ns-ficha-on .col-add-qty .qty,
    .ns-ficha-on .col-add-qty .input-group.bootstrap-touchspin { width: 96px !important; }

    /* El boton ocupa el resto de la primera linea, asi los
       iconos de deseos y comparar bajan juntos a la segunda */
    .ns-ficha-on .col-add-btn {
        flex: 1 1 auto;
        width: auto !important;
        min-width: calc(100% - 152px);
    }
    .ns-ficha-on .col-add-btn .add,
    .ns-ficha-on .col-add-btn .add-to-cart { width: 100% !important; }

    /* Deseos y comparar: iconos compactos, no dos bloques enormes */
    .ns-ficha-on .col-add-wishlist,
    .ns-ficha-on .col-add-compare {
        flex: 0 0 auto;
        width: auto !important;
    }

    .ns-ficha-on .col-add-wishlist .btn,
    .ns-ficha-on .col-add-compare .btn {
        width: 46px;
        height: 46px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Pie: la lista de sesiones en rejilla, para que las dos
   columnas empiecen a la misma altura */
.ns-foot-links--dos {
    columns: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
}

/* =========================================================
   PASE 19 — Caja de cantidad y botones secundarios
   ========================================================= */

/* Cantidad: numero a la izquierda y flechas dentro, a la derecha */
.ns-ficha-on .col-add-qty .input-group.bootstrap-touchspin {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
}

.ns-ficha-on .col-add-qty #quantity_wanted {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 44px !important;
    padding: 0 6px;
    text-align: center;
    border-right: 0 !important;
    border-radius: 0 !important;
}

.ns-ficha-on .col-add-qty .input-group-btn-vertical {
    flex: 0 0 26px;
    display: flex;
    flex-direction: column;
    width: 26px;
}

.ns-ficha-on .col-add-qty .btn-touchspin {
    flex: 1 1 50%;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Deseos y comparar: contorno, no dos bloques de color solido */
.ns-ficha-on .col-add-wishlist .btn,
.ns-ficha-on .col-add-compare .btn {
    background: transparent !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 8px !important;
    color: var(--ns-text-dim) !important;
    box-shadow: none !important;
    transition: border-color .18s ease, color .18s ease;
}

.ns-ficha-on .col-add-wishlist .btn:hover,
.ns-ficha-on .col-add-compare .btn:hover {
    border-color: var(--color-violet) !important;
    color: #fff !important;
}

/* Bloque de resenas vacio: sin tanto aire muerto */
.ns-sin-tabs #product-comments-list .no-comments,
.ns-sin-tabs #product-comments-list p {
    margin: 0 0 14px;
    color: var(--ns-text-dim);
    font-size: .9rem;
}

@media (max-width: 767px) {
    .ns-ficha-on .col-add-btn .add-to-cart { min-height: 44px; }
}

/* Cabecera de resenas: alineada con el resto y sin tanto aire */
.ns-sin-tabs #product-comments-list-header {
    padding: 0 0 10px !important;
}

.ns-sin-tabs #product-comments-list-header + *,
.ns-sin-tabs .block.block-section {
    margin-bottom: 16px !important;
}

/* Paginacion de resenas vacia: que no deje un hueco de 42px */
.ns-sin-tabs #product-comments-list-footer:has(#product-comments-list-pagination:empty) {
    display: none;
}

.ns-sin-tabs #empty-product-comment {
    text-align: center;
    color: var(--ns-text-dim);
}

/* =========================================================
   PASE 20 — Demo real de la ultima sesion en el hero
   ========================================================= */

.ns-demo {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 18px;
    padding: 24px 26px 22px;
}

.ns-demo-label {
    font-family: var(--ns-mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-lime);
    margin-bottom: 10px;
}

.ns-demo-title {
    display: block;
    font-family: var(--ns-display);
    font-size: 1.32rem;
    line-height: 1.25;
    color: #fff !important;
    text-decoration: none;
    margin-bottom: 12px;
}

.ns-demo-title:hover { color: var(--color-lime) !important; }

.ns-demo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.ns-demo-chip {
    font-family: var(--ns-mono);
    font-size: .62rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9a94b8;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    padding: 5px 11px;
}

/* El reproductor ya vive dentro de la tarjeta: sin caja propia */
.ns-demo .ns-player {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 12px;
}

.ns-demo-ver {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ns-text-dim) !important;
    text-decoration: none;
    transition: color .16s ease;
}

.ns-demo-ver:hover { color: var(--color-lime) !important; }

@media (max-width: 767px) {
    .ns-demo { padding: 20px 18px 18px; }
    .ns-demo-title { font-size: 1.1rem; }
}

/* =========================================================
   PASE 21 — Tracklist plegable dentro de la descripcion
   ========================================================= */

.ns-tracklist {
    margin-top: 16px;
    border-top: 1px solid var(--ns-border);
    padding-top: 14px;
}

.ns-tracklist > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ns-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-lime);
    transition: opacity .16s ease;
}

.ns-tracklist > summary::-webkit-details-marker { display: none; }

.ns-tracklist > summary::after {
    content: "+";
    font-size: .95rem;
    line-height: 1;
    color: var(--ns-text-dim);
}

.ns-tracklist[open] > summary::after { content: "\2212"; }
.ns-tracklist > summary:hover { opacity: .8; }
.ns-tracklist > summary b { color: var(--ns-text-dim); font-weight: 400; }

/* El h2 "Tracklist:" original ya lo dice el desplegable */
.ns-tracklist h1, .ns-tracklist h2, .ns-tracklist h3 { display: none; }

.ns-tracklist p {
    margin: 12px 0 0;
    font-family: var(--ns-mono);
    font-size: .74rem;
    line-height: 2;
    color: var(--ns-text-dim);
}