/* ============================================================
   PAGINA PUBLICA - Mobile First
   Las variables CSS vienen EXCLUSIVAMENTE de Theme::cssVars()
   NO hay fallbacks hardcodeados aqui - si los hubiera pisarian
   los valores de la BD.
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--color-texto, #1e293b); background: #fff; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }

/* Aliases internos (apuntan a las vars que genera Theme) */
:root {
  --primary:      var(--color-primario,      #2563eb);
  --primary-dark: var(--color-primario-dark, #1d4ed8);
  --text-muted:   #64748b;
  --bg:           #f8fafc;
  --border:       #e2e8f0;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.1);
  --transition:   .2s ease;
}

/* Pisar Bootstrap: botones */
.btn-primary { background-color: var(--color-primario, #2563eb) !important; border-color: var(--color-primario, #2563eb) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--color-primario-dark, #1d4ed8) !important; border-color: var(--color-primario-dark, #1d4ed8) !important; color: #fff !important; }
.btn-outline-primary { color: var(--color-primario, #2563eb) !important; border-color: var(--color-primario, #2563eb) !important; background-color: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary:active { background-color: var(--color-primario, #2563eb) !important; border-color: var(--color-primario, #2563eb) !important; color: #fff !important; }

/* Pisar Bootstrap: colores utilitarios */
.bg-primary        { background-color: var(--color-primario, #2563eb) !important; }
.badge.bg-primary  { background-color: var(--color-primario, #2563eb) !important; }
.text-primary      { color: var(--color-primario, #2563eb) !important; }
.border-primary    { border-color: var(--color-primario, #2563eb) !important; }
.bg-primary-subtle { background: rgba(var(--primary-rgb, 37 99 235), .1) !important; }

/* Pisar Bootstrap: paginacion */
.page-item.active .page-link { background-color: var(--color-primario, #2563eb) !important; border-color: var(--color-primario, #2563eb) !important; color: #fff !important; }
.page-link       { color: var(--color-primario, #2563eb) !important; }
.page-link:hover { color: var(--color-primario-dark, #1d4ed8) !important; }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb, 37 99 235), .25) !important; }

/* Pisar Bootstrap: form focus */
.form-control:focus, .form-select:focus { border-color: var(--color-primario, #2563eb) !important; box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb, 37 99 235), .2) !important; }
.form-check-input:checked { background-color: var(--color-primario, #2563eb) !important; border-color: var(--color-primario, #2563eb) !important; }

/* Estilos mejorados para filtros del catálogo */
.filter-form .form-control,
.filter-form .form-select,
.filter-form .input-group-text {
    border-color: #e2e8f0;
    font-size: 0.9rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.filter-form .form-control,
.filter-form .form-select {
    padding-left: 0.8rem !important;
}

.filter-form .form-control:focus,
.filter-form .form-select:focus {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37 99 235), .1) !important;
}

.filter-form .input-group:hover .form-control,
.filter-form .input-group:hover .form-select,
.filter-form .input-group:hover .input-group-text {
    border-color: #cbd5e1;
}

.filter-form .form-select {
    font-weight: 500;
    color: #334155;
    cursor: pointer;
}

.filter-form .btn-primary {
    font-weight: 600;
    letter-spacing: 0.3px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Links */
a { color: var(--color-primario, #2563eb); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primario-dark, #1d4ed8); }

/* ============================================================
   MEJORA EXCLUSIVA: NAV HOVER EFECTO (DESKTOP)
   ============================================================ */

/* Ocultar iconos por defecto en móvil */
.nav-icon-desktop {
    display: none;
}

@media (min-width: 992px) {
    #mainNav .navbar-nav .nav-item {
        position: relative;
    }

    #mainNav .navbar-nav .nav-link {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.8rem 1rem !important;
        background: transparent !important;
        transition: color 0.3s ease !important;
        overflow: visible !important;
        height: 100%;
        text-transform: none;
        letter-spacing: normal;
        font-weight: 500 !important;
        font-size: 0.95rem !important;
    }

    /* El icono que aparece arriba */
    .nav-icon-desktop {
        display: block;
        font-size: 1rem;
        color: var(--color-primario);
        position: absolute;
        top: 0;
        opacity: 0;
        transform: translateY(5px);
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .nav-link-text {
        transition: all 0.3s ease;
        display: block;
        margin-top: 0;
    }

    /* Línea roja superior del navbar */
    #mainNav .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        top: -0.98rem; /* Ajuste para eliminar el gap superior y alinear al ras */
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--color-primario);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ajuste para el caret del dropdown en desktop */
    #mainNav .navbar-nav .nav-link.dropdown-toggle::after {
        display: none !important; /* Ocultamos el caret original del link */
    }

    .nav-link-text {
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        margin-top: 0;
        position: relative;
    }

    /* Creamos el caret dentro del span de texto para que esté a la derecha */
    .dropdown-toggle .nav-link-text::after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-left: 0.4rem;
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        transition: transform 0.3s ease;
    }

    /* Efectos Hover */
    #mainNav .navbar-nav .nav-link:hover {
        color: var(--color-primario) !important;
    }

    #mainNav .navbar-nav .nav-link:hover .nav-icon-desktop {
        opacity: 1;
        transform: translateY(-2px); /* Menos desplazamiento, queda más cerca del texto */
    }

    #mainNav .navbar-nav .nav-link:hover .nav-link-text {
        transform: translateY(6px); /* Bajamos un poco menos el texto */
    }

    #mainNav .navbar-nav .nav-link:hover::before {
        transform: scaleX(1);
    }

    /* Estado Activo: Línea sutil siempre presente */
    #mainNav .navbar-nav .nav-link.active::before {
        transform: scaleX(1);
        opacity: 0.5;
    }
}

/* NAVBAR */
.navbar { padding: .75rem 0; transition: box-shadow var(--transition); z-index: 1000; }
.navbar.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.1) !important; }
.navbar-brand img { height: 38px; width: auto; object-fit: contain; }
.navbar-brand .header-logo { height: auto !important; max-height: 56px !important; max-width: 200px !important; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-collapse { padding-top: .5rem; }
@media (min-width: 992px) { .navbar-collapse { padding-top: 0; } }

/* Mobile Header: Reducir tamaño del logo para que quepa todo en una linea */
@media (max-width: 576px) {
    .navbar { padding: .5rem 0; }
    .navbar-brand img { height: 30px; }
    .navbar-brand .header-logo { max-height: 40px !important; max-width: 150px !important; }
}
.nav-link { color: #64748b !important; font-size: .9rem; font-weight: 500; border-radius: 8px; transition: color .2s ease, background .2s ease; padding: .5rem .75rem; }
.nav-link:hover, .nav-link.active { color: var(--color-primario, #2563eb) !important; background: rgba(var(--primary-rgb, 37 99 235), .06); }
/* Dropdown items */
.dropdown-item { color: #475569 !important; transition: color .15s ease, background .15s ease; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--color-primario-dark, #1d4ed8) !important; background: rgba(var(--primary-rgb, 37 99 235), .08) !important; }
.dropdown-item:active { background: rgba(var(--primary-rgb, 37 99 235), .15) !important; }
/* Active dropdown items when selected (active state) - softer version */
.dropdown-item.active, .dropdown-item.active:focus, .dropdown-item.active:hover { color: var(--color-primario-dark, #1d4ed8) !important; background: rgba(var(--primary-rgb, 37 99 235), .12) !important; font-weight: 600 !important; }

/* HERO */
.hero-section { height: 100vh; position: relative; overflow: hidden; display: block; margin-top: 0; }
.hero-section.has-sliders { background: transparent; }
.hero-section.has-sliders::before, .hero-section.has-sliders::after { display: none; }
.hero-section.no-sliders {
    background: linear-gradient(145deg, var(--color-hero-inicio, #0f172a) 0%, var(--color-hero-fin, #2563eb) 100%);
}
.hero-section.no-sliders::before { content: ""; position: absolute; width: 500px; height: 500px; background: rgba(255,255,255,.04); border-radius: 50%; top: -150px; right: -100px; pointer-events: none; z-index: 0; }
.hero-section.no-sliders::after  { content: ""; position: absolute; width: 300px; height: 300px; background: rgba(255,255,255,.03); border-radius: 50%; bottom: -80px; left: -80px; pointer-events: none; z-index: 0; }
.hero-section .container { position: relative; z-index: 10; }
.hero-title    { font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 800; line-height: 1.2; margin-bottom: 1rem; text-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 4px 30px rgba(0,0,0,0.5); }
.hero-subtitle { font-size: clamp(1.1rem, 3vw, 1.4rem); opacity: 1; font-weight: 500; margin-bottom: 2rem; text-shadow: 0 2px 15px rgba(0,0,0,0.8); }

/* HERO CAROUSEL */
.hero-section #heroCarousel { width: 100%; height: 100%; }
.hero-section .carousel-inner { width: 100%; height: 100%; }
.hero-section .carousel-item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-section .carousel-item > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.hero-section .carousel-item > div .container { 
    padding-top: 0; 
    text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.4);
}
.hero-section .carousel-control-prev, .hero-section .carousel-control-next { z-index: 20; }
.hero-section .carousel-indicators { z-index: 20; }

/* Botón Hero Secundario Personalizado */
.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: none !important;
}

.btn-hero-secondary:hover {
    background: #fff !important;
    color: var(--color-primario) !important;
    border-color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* HERO FLASH OVERLAY */
.hero-flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.hero-flash-overlay.active {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* CUSTOM CAROUSEL TRANSITION */
.hero-section .carousel-item {
    opacity: 0;
    transform: none;
    transition: none;
}
.hero-section .carousel-item.active {
    opacity: 1;
}
.hero-section .carousel-item-next, .hero-section .carousel-item-prev {
    display: none;
}

/* HERO SLIDE STRUCTURE */
.hero-section {
    min-height: 500px;
    overflow: hidden;
    position: relative;
}
.hero-section .carousel,
.hero-section .carousel-inner,
.hero-section .carousel-item,
.hero-section .hero-slide-bg {
    min-height: 500px;
}
.hero-slide-bg {
    position: relative;
    overflow: hidden;
}
.hero-slide-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    z-index: 0;
}
.hero-slide-bg.zoom-active::before {
    transform: scale(1.08);
    transition: transform 10s ease-out;
}
.hero-slide-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente optimizado: Oscuridad superior mínima (0.75), centro casi limpio (0.15) y base muy suave (0.35) */
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.75) 0%, 
        rgba(0,0,0,0.3) 120px, 
        rgba(0,0,0,0.15) 50%, 
        rgba(0,0,0,0.35) 100%);
    z-index: 1;
}
.hero-slide-bg .container {
    position: relative;
    z-index: 10;
}

@media (max-width: 991.98px) {
    .site-header.is-home {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: #fff;
    }
    .site-header.is-home + .hero-section .container {
        padding-top: 102px; /* Altura aprox del header mobile */
    }
}

/* SECCIONES */
.section-title { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 1.5rem; }

/* TARJETAS */
.product-card { border-radius: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; background: #fff; border: 1px solid #e2e8f0 !important; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; }
.product-img-wrapper { aspect-ratio: 1 / 1; overflow: hidden; background: #f8fafc; }
.product-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-img { transform: scale(1.05); }
.product-img-placeholder { width: 100%; aspect-ratio: 1 / 1; background: #f8fafc; }
.product-card .card-body { padding: .75rem; }
.product-name  { font-size: .85rem; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; margin-bottom: .25rem; }
.product-cat   { font-size: .75rem; color: #64748b; margin-bottom: .5rem; }
.product-price { font-size: .95rem; font-weight: 700; color: var(--color-primario, #2563eb); }
@media (min-width: 768px) { .product-card .card-body { padding: 1rem; } .product-name { font-size: .9rem; } .product-price { font-size: 1rem; } }

/* FEATURES */
.feature-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(var(--primary-rgb, 37 99 235), .1); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--color-primario, #2563eb); margin-bottom: .75rem; flex-shrink: 0; }

/* DETALLE */
.detail-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; }
@media (min-width: 768px) { .detail-img { max-height: 80vh; } }

/* FILTROS */
.filter-form .form-control, .filter-form .form-select { font-size: .875rem; }

/* FOOTER */
footer { font-size: .875rem; }
footer a:hover { color: #fff !important; }

/* CONTACTO */
.contact-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--primary-rgb, 37 99 235), .1); display: flex; align-items: center; justify-content: center; color: var(--color-primario, #2563eb); flex-shrink: 0; }

/* ============================================================
   HEADER — 2 FRANJAS STICKY
   Enfoque: flujo normal. Topbar arriba, navbar debajo.
   El topbar tiene padding-bottom para crear el solapamiento visual.
   La navbar tiene margin-top negativo para subir sobre el topbar.
   El site-header es sticky y contiene todo.
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    overflow: visible;
    transition: background-color 0.4s ease, transform 0.4s ease;
}

/* ============================================================
   ESTADOS TRANSPARENTES Y SOLAPAMIENTO (INICIO Y PAGINAS CON HERO)
   ============================================================ */
@media (min-width: 992px) {
    .site-header.is-home.header-transparent,
    .site-header.header-overlap.header-transparent {
        background: transparent !important;
    }

    .site-header.is-home.header-transparent .header-topbar,
    .site-header.is-home.header-transparent .header-navbar-wrapper #mainNav,
    .site-header.header-overlap.header-transparent .header-topbar,
    .site-header.header-overlap.header-transparent .header-navbar-wrapper #mainNav {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* En estado transparente, todo blanco */
    .site-header.header-transparent .nav-link,
    .site-header.header-transparent .header-topbar-link,
    .site-header.header-transparent .header-topbar-icon,
    .site-header.header-transparent .navbar-brand,
    .site-header.header-transparent .nav-link-text,
    .site-header.header-transparent .nav-icon-desktop {
        color: #fff !important;
    }

    /* Ocultar franja superior roja en transparente */
    .site-header.header-transparent .nav-link::before {
        opacity: 0 !important;
        transform: scaleX(0);
        transition: all 0.4s ease;
    }

    /* Mostrar franja al ser sólido */
    .site-header:not(.header-transparent) .nav-link::before {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Asegurar que el logo sea visible o blanco si es texto */
    .site-header.header-transparent .header-brand-text {
        color: #fff !important;
    }

    /* Botones y carrito en transparente */
    .site-header.header-transparent .btn-carrito {
        background: rgba(255,255,255,0.15);
        border-color: rgba(255,255,255,0.3);
        color: #fff !important;
    }

    .site-header.header-transparent .btn-cta-header {
        background: #fff;
        color: var(--color-primario) !important;
    }

    /* HERO AJUSTES PARA SOLAPAMIENTO DESKTOP */
    .site-header.is-home,
    .site-header.header-overlap {
        position: fixed; /* Cambiado a fixed para que siempre baje con el scroll */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: transparent !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
    }

    /* Estado transparente al inicio (Inicio) */
    .site-header.is-home.header-transparent {
        transform: translateY(0);
    }

    /* Cuando deja de ser transparente, el header se vuelve sólido y sticky */
    .site-header.is-home:not(.header-transparent),
    .site-header.header-overlap:not(.header-transparent) {
        background: transparent !important;
    }

    /* La barra blanca y el topbar deben tener transiciones suaves de color */
    .header-topbar, 
    .header-navbar-wrapper #mainNav,
    .nav-link,
    .header-topbar-link,
    .header-topbar-icon,
    .btn-carrito,
    .btn-cta-header {
        transition: all 0.4s ease;
    }
}

/* Franja oscura — altura normal del topbar + espacio de solapamiento */
.header-topbar {
    background: var(--color-header-topbar, #0a1020);
    color: #fff;
    font-size: .83rem;
    padding-bottom: 45px; /* Ajuste sutil para dar aire sin exagerar */
    padding-top: 8px;     /* Ligero aumento para equilibrio visual */
}
.header-topbar-inner {
    max-width: calc(100% - 9rem);
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Wrapper de la navbar — margen negativo la sube sobre el topbar */
.header-navbar-wrapper {
    margin-top: -42px; /* Ajuste sutil para el nuevo padding */
    padding: 0 3rem;
    position: relative;
    z-index: 1;
}

/* La navbar */
.header-navbar-wrapper #mainNav {
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    padding: .5rem 2rem;
    background: #fff;
}

.header-logo {
    max-height: 90px;
    max-width: 260px;
    width: auto;
    object-fit: contain;
}

/* Links topbar */
.header-topbar-link {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    opacity: .85;
    transition: opacity .15s;
}
.header-topbar-link:hover { opacity: 1; }
.header-topbar-icon {
    color: #fff;
    font-size: 1.05rem;
    opacity: .85;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: opacity .15s;
}
.header-topbar-icon:hover { opacity: 1; }

/* Boton CTA */
.btn-cta-header {
    background: var(--color-primario, #2563eb);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: .83rem;
    padding: .42rem 1.15rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    transition: opacity .15s;
}
.btn-cta-header:hover { opacity: .85; }

@media (max-width: 991.98px) {
    /* Ocultar franja superior en móvil y tablet (< 992px) */
    .header-topbar { 
        display: none !important; 
    }

    .header-navbar-wrapper { 
        margin-top: 0 !important; 
        padding: 0 !important; 
    }
    .header-navbar-wrapper #mainNav { 
        padding: .5rem .75rem !important; 
    }
    
    /* Contenedor principal: orientación en columna para separar Fila 1 de Fila 2 */
    .header-navbar-wrapper #mainNav .header-nav-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Fila 1: Logo a la izquierda y acciones a la derecha en UNA SOLA LÍNEA */
    .header-nav-main-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Marca o logo: ocupa el espacio disponible sin empujar a los botones */
    .header-brand-link {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 170px) !important;
        margin-right: 0.35rem !important;
        overflow: hidden !important;
        text-decoration: none !important;
    }

    .header-brand-text {
        font-size: 1.05rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        line-height: 1.2 !important;
        color: #1e293b;
    }

    .header-store-icon {
        flex-shrink: 0 !important;
        font-size: 1.35rem !important;
    }

    .header-logo {
        max-height: 38px !important;
        max-width: 140px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Acciones móviles a la derecha: nunca se comprimen ni se quiebran */
    .header-mobile-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .btn-cta-header-mobile {
        padding: 0.35rem 0.65rem !important;
        font-size: 0.78rem !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        gap: 0.25rem !important;
    }

    #btnCarritoMobile {
        background: transparent !important;
        border: 1px solid #e2e8f0 !important;
        color: #1e293b !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }
    #btnCarritoMobile:hover { background: #f1f5f9 !important; }
    #btnCarritoMobile .cart-badge { border-color: #fff !important; }

    .navbar-toggler {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        transition: transform 0.15s ease, opacity 0.15s ease !important;
    }
    .navbar-toggler:active {
        transform: scale(0.92);
        opacity: 0.8;
    }

    /* Fila 2: Menú colapsable desplegado DEBAJO (sin padding/margin para colapso a 0px exacto) */
    #mainNav .navbar-collapse {
        flex-basis: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        /* Mejora: Permitir scroll si el menú es muy largo en móvil */
        max-height: 75vh;
        overflow-y: auto;
        padding-bottom: 2rem !important;
    }

    /* Durante la transición (abrir o cerrar): curva fluida y duración ágil (240ms) */
    #mainNav .navbar-collapse.collapsing {
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        transition: height 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Suavidad en el contenido interno para evitar que aparezca de golpe */
    #mainNav .navbar-collapse.collapsing .navbar-nav,
    #mainNav .navbar-collapse.collapsing .d-lg-none {
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }

    #mainNav .navbar-collapse.show .navbar-nav,
    #mainNav .navbar-collapse.show .d-lg-none {
        opacity: 1;
        transition: opacity 0.22s ease;
    }

    /* El espaciado y separador van en la lista interna para un cierre limpio sin retrasos */
    #mainNav .navbar-nav {
        padding: 0.5rem 0 0.25rem 0 !important;
        margin-top: 0.55rem !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    #mainNav .navbar-nav .nav-link {
        padding: 0.6rem 0.85rem !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #334155 !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    #mainNav .navbar-nav .nav-link:hover,
    #mainNav .navbar-nav .nav-link.active {
        background: #f8fafc !important;
        color: var(--color-primario, #2563eb) !important;
    }

    #mainNav .dropdown-menu {
        border: none !important;
        background: #f8fafc !important;
        padding: 0.25rem 0.5rem 0.25rem 1rem !important;
        margin-top: 0.25rem !important;
        border-radius: 6px !important;
        box-shadow: none !important;
    }

    #mainNav .dropdown-item {
        padding: 0.6rem 1rem !important;
        font-size: 0.95rem !important;
        border-radius: 4px !important;
        color: #475569 !important;
        transition: all 0.2s ease !important;
    }

    #mainNav .dropdown-item:hover,
    #mainNav .dropdown-item.active {
        background: rgba(37, 99, 235, 0.08) !important;
        color: var(--color-primario, #2563eb) !important;
    }
}

/* En Desktop (>= 992px), el contenedor wrapper se desvanece estructuralmente */
@media (min-width: 992px) {
    .header-nav-main-row {
        display: contents !important;
    }
    #mainNav .navbar-nav {
        margin-top: 0 !important;
        border-top: none !important;
        padding: 0 !important;
    }
}

@media (max-width: 991.98px) {
    .hero-section { padding-top: 2rem !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .header-topbar-inner { padding: 0 2rem; }
    .header-navbar-wrapper { padding: 0 1.5rem; }
}

/* ============================================================
   FOOTER NUEVO
   ============================================================ */
.public-footer {
    background:
        radial-gradient(ellipse 80% 100% at center, var(--color-footer-fin, #1e2d3d) 40%, var(--color-footer-inicio, #0d1822) 100%);
}
.public-footer-main {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.public-footer-bar {
    background: var(--color-footer-bar, rgba(0,0,0,.25));
}

.footer-heading {
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--color-primario, #2563eb);
    display: inline-block;
}
.footer-text {
    color: #cbd5e1;
    line-height: 1.7;
}
.footer-link {
    color: #cbd5e1;
    text-decoration: none;
    transition: color .15s;
}
.footer-link:hover { color: #fff; text-decoration: none; }

/* Quitar subrayado de todos los links del footer */
.public-footer a {
    text-decoration: none;
    transition: color .15s, opacity .15s;
}
.public-footer a:hover { text-decoration: none; }

.footer-social-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.footer-social-icon:hover {
    background: var(--color-primario, #2563eb);
    color: #fff;
}

/* Caja de horarios */
.footer-horarios-box {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}
.footer-horario-titulo {
    color: #e2e8f0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    margin: .6rem 0 .3rem;
}

/* Botón video YouTube */
.btn-video {
    background: #ff0000;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .75rem;
    text-decoration: none;
    transition: opacity .15s;
}
.btn-video:hover { opacity: .85; color: #fff !important; }

/* Mapa en footer */
.ratio iframe { border-radius: 8px; }

/* ============================================================
   RESPONSIVE — mobile first ajustes
   ============================================================ */
@media (max-width: 767.98px) {
    /* En móvil la topbar está oculta (d-none d-md-block)
       pero el botón CTA aparece dentro del navbar toggler */
    .navbar-brand img { max-height: 38px; }
    .hero-section { margin-top: -150px; padding-top: 150px; }
}



/* Navbar sticky suave — clase agregada por JS al hacer scroll */
.header-navbar-wrapper #mainNav.nav-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    max-width: 100%;
    margin: 0;
    box-shadow: 0 2px 16px rgba(0,0,0,.13);
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ============================================================
   PÁGINAS LEGALES (Términos, Privacidad)
   ============================================================ */
.pagina-contenido {
    color: var(--color-texto, #1e293b);
    line-height: 1.8;
    font-size: .95rem;
}
.pagina-contenido h2 {
    color: var(--color-primario, #2563eb) !important;
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: .5rem;
}
.pagina-contenido h3 {
    color: var(--color-primario, #2563eb) !important;
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: .4rem;
}
.pagina-contenido p  { margin-bottom: 1rem; }
.pagina-contenido ul, .pagina-contenido ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.pagina-contenido li { margin-bottom: .4rem; }
.pagina-contenido strong { color: #0f172a; }
.pagina-contenido a { color: var(--color-primario, #2563eb); }
.pagina-contenido a:hover { text-decoration: underline; }

/* BADGES DE GARANTÍA */
.warranty-badge {
    max-height: 75px;
    max-width: 150px;
    object-fit: contain;
}

.catalog-warranty-badge {
    height: 65px;
    max-width: 150px;
    object-fit: contain;
}

/* BADGE DE OFERTA */
.product-card .badge.bg-danger {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* Para dispositivos móviles (hasta 767px) */
@media (max-width: 767px) {
    .warranty-badge {
        max-height: 38px;
        max-width: 76px;
    }
    
    .catalog-warranty-badge {
        height: 36px;
        max-width: 72px;
    }
    
    /* Badge de oferta más compacto en móviles */
    .product-card .badge.bg-danger {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Mejor espaciado de los badges en la tarjeta */
    .product-img-wrapper > div[style*="position: absolute"] {
        top: 6px !important;
    }
    
    .product-img-wrapper > div[style*="left: 8px"] {
        left: 6px !important;
    }
    
    .product-img-wrapper > div[style*="right: 8px"] {
        right: 6px !important;
    }
}

/* Estilos para el carrusel de productos destacados */
#destacadosCarousel .carousel-control-prev,
#destacadosCarousel .carousel-control-next {
    width: 50px !important;
    height: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 1 !important;
    background: var(--color-primario, #2563eb) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#destacadosCarousel .carousel-control-prev {
    left: -60px !important;
}

#destacadosCarousel .carousel-control-next {
    right: -60px !important;
}

#destacadosCarousel .carousel-control-prev:hover,
#destacadosCarousel .carousel-control-next:hover {
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}

/* Ocultar iconos predeterminados de Bootstrap */
#destacadosCarousel .carousel-control-prev-icon,
#destacadosCarousel .carousel-control-next-icon {
    display: none !important;
}

/* Nuestros iconos personalizados */
#destacadosCarousel .carousel-control-prev i,
#destacadosCarousel .carousel-control-next i {
    color: white;
    font-size: 20px;
}

@media (max-width: 1199px) {
    #destacadosCarousel .carousel-control-prev,
    #destacadosCarousel .carousel-control-next {
        width: 44px !important;
        height: 44px !important;
    }
    #destacadosCarousel .carousel-control-prev {
        left: -40px !important;
    }
    #destacadosCarousel .carousel-control-next {
        right: -40px !important;
    }
    #destacadosCarousel .carousel-control-prev i,
    #destacadosCarousel .carousel-control-next i {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    #destacadosCarousel .carousel-control-prev,
    #destacadosCarousel .carousel-control-next {
        width: 40px !important;
        height: 40px !important;
    }
    #destacadosCarousel .carousel-control-prev {
        left: -25px !important;
    }
    #destacadosCarousel .carousel-control-next {
        right: -25px !important;
    }
    #destacadosCarousel .carousel-control-prev i,
    #destacadosCarousel .carousel-control-next i {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    #destacadosCarousel .carousel-control-prev,
    #destacadosCarousel .carousel-control-next {
        width: 36px !important;
        height: 36px !important;
    }
    #destacadosCarousel .carousel-control-prev {
        left: -10px !important;
    }
    #destacadosCarousel .carousel-control-next {
        right: -10px !important;
    }
    #destacadosCarousel .carousel-control-prev i,
    #destacadosCarousel .carousel-control-next i {
        font-size: 15px;
    }
}

/* ============================================================
   CARRITO DE COTIZACIÓN
   ============================================================ */

/* Botón carrito topbar */
.btn-carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background .2s;
    font-size: 1rem;
    flex-shrink: 0;
}
.btn-carrito:hover { background: rgba(255,255,255,.22); }

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-primario, #2563eb);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--color-oscuro, #0f172a);
    pointer-events: none;
}

/* Overlay — completamente invisible y sin interacción cuando cerrado */
#cartOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1040;
}

/* Panel lateral — usa transform para no afectar el layout */
#cartPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 100vw);
    height: 100dvh;
    background: #fff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 32px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    visibility: hidden;
}
#cartPanel.open {
    transform: translateX(0);
    visibility: visible;
}

.cart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #fff;
}
.cart-panel-header h6 {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: #1e293b;
}
.cart-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #64748b;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
}
.cart-close-btn:hover { color: #1e293b; background: #f1f5f9; }

#cartList {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #94a3b8;
    text-align: center;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.cart-item:last-child { border-bottom: none; }

.cart-item-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}
.cart-item-img-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.1rem;
}

.cart-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.cart-item-cat {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-item-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.cart-qty-btn {
    background: #f8fafc;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1rem;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.cart-qty-btn:hover { background: #e2e8f0; }
.cart-qty-val {
    min-width: 28px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    padding: 0 4px;
    user-select: none;
}

.cart-remove-btn {
    background: none;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 6px;
    line-height: 1;
    transition: color .15s;
    border-radius: 4px;
}
.cart-remove-btn:hover { color: #ef4444; background: #fef2f2; }

#cartFooter {
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #fff;
}

#btnCotizarWa {
    width: 100%;
    background: #25D366;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s;
    letter-spacing: .2px;
}
#btnCotizarWa:hover { background: #1db954; }

/* Botón "Agregar a cotización" en tarjetas y detalle */
.btn-add-cart {
    background: transparent;
    border: 1.5px solid var(--color-primario, #2563eb);
    color: var(--color-primario, #2563eb);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 9px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    line-height: 1.4;
}
.btn-add-cart:hover {
    background: var(--color-primario, #2563eb);
    color: #fff;
}
.btn-add-cart.btn-in-cart {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #16a34a;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Botón flotante WhatsApp ────────────────────────────────── */
.wa-float-btn {
    position: fixed;
    bottom: 28px;
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1050;
    filter: drop-shadow(0 4px 12px rgba(37,211,102,0.45));
    transition: filter .2s ease;
}
.wa-float-btn:hover {
    filter: drop-shadow(0 6px 18px rgba(37,211,102,0.65));
}

.wa-float-icon {
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: background .2s ease, transform .2s ease;
}
.wa-float-btn:hover .wa-float-icon {
    background: #20ba5a;
    transform: scale(1.08);
}

.wa-float-label {
    background: #fff;
    color: #1a1a1a;
    font-size: .8rem;
    font-weight: 600;
    height: 48px;
    line-height: 48px;
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: max-width .35s ease, opacity .25s ease, padding .35s ease;
    padding: 0;
}

/* Posición DERECHA: label sale hacia la izquierda */
.wa-float-btn:not([style*="left:"]) .wa-float-label,
.wa-float-btn[style*="right:24px"] .wa-float-label {
    right: 44px;
    border-radius: 24px 0 0 24px;
    box-shadow: -2px 0 8px rgba(0,0,0,.10);
}

/* Posición IZQUIERDA: label sale hacia la derecha */
.wa-float-btn[style*="left:24px"] .wa-float-label {
    left: 44px;
    border-radius: 0 24px 24px 0;
    box-shadow: 2px 0 8px rgba(0,0,0,.10);
}

.wa-float-btn:hover .wa-float-label {
    max-width: 200px;
    opacity: 1;
    padding: 0 16px;
}

/* Mobile: sin label */
@media (max-width: 575px) {
    .wa-float-label { display: none; }
}