/*
Theme Name: StudioMix Sitio
Description: Tema personalizado para StudioMix con diseño moderno y responsive
Version: 1.0.17 - VIDEO EN BUCLE NUEVA TEMPORADA
Author: StudioMix
Text Domain: studiomix-sitio
Domain Path: /languages
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, responsive, modern
*/

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Asegurar que el sitio ocupe todo el ancho */
html, body {
    width: 100%;
    max-width: none;
    overflow-x: hidden;
}

#page, .site {
    width: 100%;
    max-width: none;
}

/* Prevenir scroll horizontal */
body {
    overflow-x: hidden;
}

/* Asegurar que el carrusel esté al inicio de la página */
.hero-carousel-new {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body {
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    background-color: var(--white);
    font-weight: 400;
}

/* Tipografías */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: var(--dark-text);
}

.hero-title {
    font-family: 'Ephesis', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--accent-color);
    text-align: center;
    margin: 2rem 0;
}

/* Variables CSS para colores del tema */
:root {
    --primary-gray: #dbdbdb;
    --accent-gray: #6d6d6d;
    --dark-gray: #242424;
    --medium-gray: #494949;
    --light-gray: #929292;
    --lighter-gray: #b6b6b6;
    --lightest-gray: #dbdbdb;
    --white: #ffffff;
    --black: #000000;
    --light-bg: #fefefe;
    --shadow: rgba(36, 36, 36, 0.1);
    --dark-text: #242424;
    --light-text: #6d6d6d;
    --accent-color: #494949;
    --primary-color: #929292;
}

/* Reset global para enlaces */
a {
    text-decoration: none;
    color: var(--dark-text);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

a:visited {
    color: var(--white);
}

a:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ===========================================
   MAIN NAVIGATION - ESTILOS BASE
   =========================================== */

/* Reset general para enlaces de navegación */
.main-navigation a,
.main-navigation a:focus,
.main-navigation a:active,
.main-navigation a:hover {
    outline: none !important;
    border: none !important;
    text-decoration: none !important;
}

/* Contenedor principal */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Header */
.site-header {
    background: transparent;
    position: relative;
    z-index: 1000;
}

/* Header sobre hero - transparente */
.site-header-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 1001;
}

/* Header transparente - logo está en el menú */

.site-branding {
    padding: 1.5rem 0;
    text-align: center;
}

.site-logo {
    max-height: 70px;
    width: auto;
    filter: drop-shadow(0 2px 4px var(--shadow));
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.site-logo:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px var(--shadow));
}

/* El logo está ahora en el lado izquierdo del menú */

/* Contenedor principal de navegación */
.main-navigation {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 1rem 2rem;
    width: 80%;
    margin: 20px auto;
    border-radius: 50px;
    box-shadow: 0 8px 32px var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: sticky;
    top: 20px;
    z-index: 1000;
}

/* Navegación sobre hero - mejorada para contraste */
.main-navigation-hero {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.722);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.837);
    z-index: 1002;
    width: 80%;
    max-width: 1200px;
    border-radius: 50px;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
}

/* Clase para cuando el menú se vuelve sticky (fixed) */
.main-navigation-hero.is-sticky {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    border-radius: 5rem !important;
    transform: translateX(-50%) !important;
    width: 80% !important;
    max-width: 1200px !important;
    z-index: 1002 !important;
    background: rgba(255, 255, 255, 0.708) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* En móvil, quitar el fondo y posicionar elementos */
@media (max-width: 768px) {
    .main-navigation-hero {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        padding: 1rem;
        z-index: 1003;
        border-radius: 50px;
        max-width: none;
    }
    
    .main-navigation-hero.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        max-width: none;
    }
}

/* Logo y branding en navegación */
.main-navigation .site-branding {
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    position: relative;
    z-index: 999;
    min-width: 120px;
}

.main-navigation .site-branding a {
    display: block !important;
    position: relative;
    z-index: 1001;
    text-decoration: none;
}

.main-navigation .site-branding a img,
.main-navigation .site-branding img,
.main-navigation .site-logo {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1000;
    transition: all 0.3s ease;
    cursor: pointer;
}

.main-navigation .site-branding a img:hover,
.main-navigation .site-branding img:hover,
.main-navigation .site-logo:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 4px 8px var(--shadow));
}

.main-navigation .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 5;
}

/* Forzar que el logo sea visible sobre cualquier otro elemento */
.main-navigation .site-branding,
.main-navigation .site-branding *,
.main-navigation .site-branding a,
.main-navigation .site-branding a *,
.main-navigation .site-branding img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1003 !important;
}

.main-navigation .nav-right {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

/* Botón hamburguesa mejorado */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1004;
    position: relative;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.menu-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.menu-toggle-icon {
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 24px;
    justify-content: space-between;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: var(--dark-text);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Animación del botón hamburguesa cuando está activo */
.menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Menú móvil overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: rgba(255, 255, 255, 1);
    padding: 4rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    overflow: visible;
    align-items: stretch;
}

.mobile-menu li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu li:last-child {
    border-bottom: none;
}

.mobile-menu a {
    display: block;
    padding: 1rem 1rem;
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0;
    background: transparent;
}

.mobile-menu li {
    margin: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 1);
    border-radius: 8px;
    padding: 0.5rem 0;
    width: 100%;
    display: block;
    float: none;
    clear: both;
}

.mobile-menu li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mobile-menu li:first-child {
    margin-top: 0;
}

/* Forzar elementos en renglones separados */
.mobile-menu li {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.mobile-menu a:hover,
.mobile-menu a:focus {
    color: var(--accent-color);
    background: rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

/* ===== SUBMENUS MÓVILES - REWRITE COMPLETO ===== */
.mobile-menu-item-has-children {
    position: relative;
    background: rgba(255, 255, 255, 1);
    width: 100%;
    box-sizing: border-box;
}

.mobile-menu-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 1);
    padding: 1rem 1rem;
    /* Borde de debug removido */
}

.mobile-menu-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    color: var(--dark-text);
}

.mobile-menu-item-has-children.active .mobile-menu-arrow {
    transform: rotate(180deg);
}

.mobile-submenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 1) !important;
    border-radius: 8px;
    margin-top: 0.5rem;
    transition: max-height 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Borde de debug removido */
    opacity: 0;
    visibility: hidden;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
}

.mobile-menu-item-has-children.active .mobile-submenu {
    max-height: 500px !important;
    padding: 0.5rem 0 !important;
    background: rgba(255, 255, 255, 1) !important;
    z-index: 10 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-top: 0.5rem !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
}

.mobile-submenu li {
    margin: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: rgba(255, 255, 255, 1) !important;
    /* Borde de debug removido */
}

.mobile-submenu a {
    padding: 0.75rem 2rem !important;
    font-size: 0.95rem !important;
    color: var(--dark-text) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mobile-submenu a:hover,
.mobile-submenu a:focus {
    color: var(--accent-color) !important;
    background: rgba(0, 0, 0, 0.1) !important;
    transform: translateX(10px) !important;
}

/* Mejoras de accesibilidad */
.menu-toggle:focus,
.mobile-menu a:focus,
/* Focus para navegación */
.main-navigation a:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mejoras para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mostrar hamburguesa solo en móvil */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        position: relative;
        z-index: 1005;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        padding: 0.75rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .nav-right {
        display: none !important;
    }
    
    .nav-container {
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    .site-branding {
        flex-shrink: 0;
        position: relative;
        z-index: 1004;
    }
    
    .site-logo {
        max-height: 60px !important;
    }
    
    /* Ocultar completamente el menú de escritorio */
    .main-navigation .menu,
    .main-navigation #primary-menu {
        display: none !important;
    }
}

/* Estructura del menú */
.main-navigation ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
}

/* Enlaces del menú principal - CONSOLIDADO */
.main-navigation .menu > li > a,
.main-navigation #primary-menu > li > a,
.main-navigation > ul > li > a {
    text-decoration: none !important;
    color: var(--black);
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 45px;
    display: block;
    font-size: 1rem;
    letter-spacing: 0.5px;
    position: relative;
    outline: none !important;
    border: none !important;
    overflow: hidden;
}



/* Efectos hover y estados - CONSOLIDADO */
.main-navigation .menu > li > a::before,
.main-navigation #primary-menu > li > a::before,
.main-navigation > ul > li > a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(53, 53, 53, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.main-navigation .menu > li > a:hover,
.main-navigation #primary-menu > li > a:hover,
.main-navigation > ul > li > a:hover {
    color: var(--white) !important;
    background: var(--primary-color) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px var(--shadow) !important;
    text-decoration: none !important;
    outline: none !important;
}

.main-navigation .menu > li > a:hover::before,
.main-navigation #primary-menu > li > a:hover::before,
.main-navigation > ul > li > a:hover::before {
    width: 100px;
    height: 100px;
}

.main-navigation .menu > li > a:focus,
.main-navigation #primary-menu > li > a:focus,
.main-navigation .menu > li > a:active,
.main-navigation #primary-menu > li > a:active,
.main-navigation > ul > li > a:focus,
.main-navigation > ul > li > a:active {
    outline: none !important;
    border: none !important;
    color: var(--accent-color) !important;
    background: var(--primary-color) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 4px 15px var(--shadow) !important;
    text-decoration: none !important;
}

.main-navigation li {
    position: relative;
}

/* Estilo para elemento activo del menú - CONSOLIDADO */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation > ul > li.current-menu-item > a,
.main-navigation > ul > li.current_page_item > a {
    background: var(--black);
    color: var(--white) !important;
    transform: scale(1.05);
}

/* Clases específicas para enlaces activos con texto blanco */
.main-navigation .menu-item-active,
.main-navigation .active-link {
    background: var(--black) !important;
    color: var(--white) !important;
}

.main-navigation .menu-item-active:hover,
.main-navigation .active-link:hover {
    background: var(--black) !important;
    color: var(--white) !important;
}

/* Clase para aplicar manualmente en cualquier enlace del menú */
.main-navigation a.active-white-text {
    background: var(--black) !important;
    color: var(--white) !important;
}

.main-navigation a.active-white-text:hover {
    background: var(--black) !important;
    color: var(--white) !important;
}

.main-navigation .current-menu-item > a:hover,
.main-navigation .current_page_item > a:hover,
.main-navigation > ul > li.current-menu-item > a:hover,
.main-navigation > ul > li.current_page_item > a:hover {
    background: var(--black) !important;
    color: var(--white) !important;
    transform: scale(1.15);
    box-shadow: 0 6px 20px var(--shadow);
}

/* Submenús */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border-radius: 20px;
    box-shadow: 0 10px 40px var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1rem 0;
    flex-direction: column;
    gap: 0;
}

.main-navigation li:hover ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation ul ul li {
    width: 100%;
    margin: 0;
}

/* Enlaces de submenús - CONSOLIDADO */
.main-navigation ul ul a {
    padding: 0.75rem 1.5rem;
    color: var(--dark-text);
    font-size: 0.9rem;
    border-radius: 15px;
    margin: 0.25rem 0.5rem;
    display: block;
    transition: all 0.3s ease;
    outline: none;
    text-decoration: none;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    outline: none;
    background: var(--primary-color);
    color: var(--accent-color);
    transform: translateX(5px);
}

/* Estilo para elementos activos en submenús */
.main-navigation ul ul li.current-menu-item a,
.main-navigation ul ul li.current_page_item a {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--medium-gray) 100%);
    color: var(--white);
    box-shadow: 0 2px 8px var(--shadow);
}

/* Estilo para el icono de Mi Cuenta */
.account-menu-item {
    list-style: none;
}

.account-menu-item a {
    font-size: 1.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--dark-text);
    text-decoration: none;
    outline: none; /* Eliminar outline por defecto */
}

.account-menu-item a:hover {
    background: var(--primary-color);
    color: var(--accent-color);
    transform: scale(1.15);
    box-shadow: 0 4px 15px var(--shadow);
    text-decoration: none;
}

.account-menu-item a:focus {
    outline: none; /* Eliminar outline al hacer clic */
    background: var(--primary-color);
    color: var(--accent-color);
    transform: scale(1.15);
    box-shadow: 0 4px 15px var(--shadow);
}

.account-menu-item i {
    transition: all 0.3s ease;
    font-size: 1.5rem;
}

.account-menu-item a:hover i {
    transform: scale(1.1);
}

/* Asegurar que Font Awesome se cargue correctamente */
.fas, .far, .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
}

/* Contenido principal */
.site-main {
    padding: 0;
    min-height: 60vh;
}

/* Espaciado para todas las páginas excepto index.php */
body:not(.home) .site-main {
    margin-top: 120px; /* Espacio para el menú sticky */
}

/* Asegurar que el hero del index.php no tenga margen superior */
body.home .site-main {
    margin-top: 0; /* Hero debe empezar desde arriba para efecto overlay */
}

/* Específicamente para el hero carousel */
body.home .hero-carousel,
body.home .hero-section {
    margin-top: 0;
    padding-top: 0;
}

/* Páginas específicas que necesitan más espacio */
body.single-product .site-main,
body.page .site-main,
body.archive .site-main,
body.shop .site-main {
    margin-top: 120px;
}

/* Ajuste para el hero que debe quedar debajo del menú */
.hero-section {
    margin-top: 0;
}

/* Forzar que el hero carousel empiece desde la parte superior */
body.home .hero-carousel {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* Estilos específicos para WooCommerce */
body.woocommerce .site-main,
body.woocommerce-page .site-main {
    margin-top: 120px;
}

/* Ajustes para páginas de tienda */
body.shop .site-main,
body.archive.woocommerce .site-main {
    margin-top: 120px;
}

/* Ajustes para categorías de productos */
body.product-category .site-main {
    margin-top: 120px;
}

/* Ajustes para páginas de blog */
body.blog .site-main,
body.archive .site-main {
    margin-top: 120px;
}

/* Ajustes para páginas estáticas */
body.page .site-main {
    margin-top: 120px;
}

/* Ajustes para posts individuales */
body.single .site-main {
    margin-top: 120px;
}

/* Página con hero */
.hero-page .site-main {
    padding: 0;
}

.hero-page .container {
    padding-top: 0;
}

/* ===========================================
   NUEVO HERO CAROUSEL STYLES - INDEPENDIENTE
   =========================================== */

/* Contenedor principal del nuevo carrusel */
.hero-carousel-new {
    position: relative;
    width: 100vw;
    overflow: hidden;
    background: #000;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    top: 0;
    left: 0;
    z-index: 1;
    margin-left: calc(-50vw + 50%);
}

.new-hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    max-height: none; /* ← REMOVER LIMITACIÓN DE ALTURA */
    margin-top: 0;
    padding-top: 0;
}

/* Carrusel principal */
.new-hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slides individuales */
.new-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    transform: translateX(100%);
}

.new-hero-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.new-hero-slide.prev {
    transform: translateX(-100%);
}

/* Imagen responsive */
.new-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.new-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Aspect ratios responsivos */
@media (max-width: 768px) {
    .new-hero-container {
        aspect-ratio: 9/16;
        height: auto;
        min-height: 100vh;
        max-height: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .new-hero-container {
        height: 100vh !important; /* ← ALTURA COMPLETA EN TABLET HORIZONTAL */
        aspect-ratio: none !important; /* ← REMOVER ASPECT-RATIO */
    }
}

@media (min-width: 1025px) {
    .new-hero-container {
        height: 100vh !important; /* ← ALTURA COMPLETA EN DESKTOP */
        aspect-ratio: none !important; /* ← REMOVER ASPECT-RATIO */
    }
}

/* Placeholder cuando no hay imagen */
.new-hero-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.placeholder-content {
    text-align: center;
    padding: 2rem;
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.placeholder-content h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-family: 'Ephesis', cursive;
}

.placeholder-content p {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Raleway', sans-serif;
}

.placeholder-content small {
    font-size: 0.9rem;
    opacity: 0.8;
    font-family: 'Raleway', sans-serif;
}

/* Contenido de texto (solo cuando existe) */
.new-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.new-hero-text-container {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 3rem 2rem;
    border-radius: 15px;
    text-align: center;
    max-width: 600px;
    margin: 0 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Título */
.new-hero-title {
    font-family: 'Ephesis', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Descripción */
.new-hero-description {
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.6;
    opacity: 0.95;
}

/* Navegación */
.new-hero-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.new-hero-prev,
.new-hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.new-hero-prev {
    left: 2rem;
}

.new-hero-next {
    right: 2rem;
}

.new-hero-prev:hover,
.new-hero-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.new-hero-prev:active,
.new-hero-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Indicadores */
.new-hero-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.new-hero-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.new-hero-indicator.active,
.new-hero-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}

/* Responsive para contenido de texto */
@media (max-width: 768px) {
    .new-hero-text-container {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
        border-radius: 10px;
    }
    
    .new-hero-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
    }
    
    .new-hero-description {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .new-hero-prev,
    .new-hero-next {
        width: 40px;
        height: 40px;
    }
    
    .new-hero-prev {
        left: 1rem;
    }
    
    .new-hero-next {
        right: 1rem;
    }
    
    .new-hero-indicators {
        bottom: 1.5rem;
    }
    
    .new-hero-indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .new-hero-title {
        font-size: 2rem;
    }
    
    .new-hero-description {
        font-size: 0.9rem;
    }
    
    .new-hero-text-container {
        padding: 1.5rem 1rem;
    }
}

/* Animaciones y transiciones */
.new-hero-slide {
    will-change: transform, opacity;
}

.new-hero-image img {
    will-change: transform;
}

/* Pausa en hover */
.new-hero-container:hover .new-hero-image img {
    transform: scale(1.05);
}

/* ===========================================
   HERO CAROUSEL STYLES (ORIGINAL)
   =========================================== */

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Asegurar que el hero carousel en home empiece desde arriba */
body.home .hero-carousel {
    position: relative;
    top: 0;
    margin-top: 0;
    padding-top: 0;
}

/* Hero por defecto cuando no hay configuración */
.hero-default {
    background: linear-gradient(135deg, var(--lightest-gray) 0%, var(--accent-color) 100%);
}

/* ===========================================
   WELCOME SECTION STYLES
   =========================================== */

.welcome-section {
    padding: 4rem 0;
    background: var(--white);
    text-align: center;
}

.welcome-content h2 {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-content > p {
    font-size: 1.2rem;
    color: var(--light-text);
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.8;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-item {
    padding: 2rem 1rem;
    background: var(--lightest-gray);
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-item i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: block;
}

.feature-item h3 {
    font-size: 1.5rem;
    color: var(--dark-text);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.feature-item p {
    color: var(--light-text);
    line-height: 1.6;
}

/* ===========================================
   PÁGINA DE PRODUCTO PERSONALIZADA
   =========================================== */

/* Layout principal de la página de producto */
.product-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 2rem 0;
    padding: 2rem 0;
}

/* Asegurar que la página de producto tenga el espaciado correcto */
body.single-product .product-page {
    margin-top: 0; /* El margin-top ya está en .site-main */
}

/* Galería de imágenes (lado izquierdo) */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.woocommerce-product-gallery {
    position: relative;
}

.woocommerce-product-gallery__wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.woocommerce-product-gallery__image {
    width: 100%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Ocultar cualquier icono de lupa/zoom que pueda estar presente */
.woocommerce-product-gallery__image::before,
.woocommerce-product-gallery__image::after,
.woocommerce-product-gallery__image .zoom,
.woocommerce-product-gallery__image .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__image .product-image-zoom,
.woocommerce-product-gallery__image .magnify-icon,
.woocommerce-product-gallery__image .zoom-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ocultar icono de emoji (lupa) que WordPress inserta automáticamente */
.woocommerce-product-gallery__image img.emoji,
.woocommerce-product-gallery img.emoji,
.woocommerce div.product div.images img.emoji,
img.emoji {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-gallery__image img,
.wp-post-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease-in-out;
}

.woocommerce-product-gallery__image:hover img {
    transform: scale(1.02);
}

/* Miniaturas */
.woocommerce-product-gallery__image--thumbnail {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0.25rem;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    position: relative;
    flex-shrink: 0;
}

.woocommerce-product-gallery__image--thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.woocommerce-product-gallery__image--thumbnail.active {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.woocommerce-product-gallery__image--thumbnail.active::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.woocommerce-product-gallery__image--thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* Efecto de transición de empuje */
.woocommerce-product-gallery__image img.sliding {
    transition: transform 0.5s ease-in-out;
}

/* Layout de miniaturas */
.woocommerce-product-gallery__wrapper::after {
    content: '';
    display: table;
    clear: both;
}

/* Asegurar que las miniaturas se muestren en fila */
.woocommerce-product-gallery__wrapper {
    display: flex;
    flex-direction: column;
}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
    width: 100%;
    margin-bottom: 1rem;
}

/* Contenedor para las miniaturas */
.woocommerce-product-gallery__thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Estilos específicos para miniaturas en el contenedor */
.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image--thumbnail {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    position: relative;
    flex-shrink: 0;
}

.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image--thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image--thumbnail.active {
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image--thumbnail.active::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.woocommerce-product-gallery__thumbnails .woocommerce-product-gallery__image--thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

/* Responsive para galería */
@media (max-width: 768px) {
    .woocommerce-product-gallery__image--thumbnail {
        margin: 0.1rem;
    }
}

/* Información del producto (lado derecho) */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.product-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--dark-text);
    margin: 0;
    line-height: 1.2;
}

.product-sku {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--lightest-gray);
    border-radius: 30px;
    border-left: 3px solid var(--accent-color);
}

.sku-label {
    font-weight: 600;
    color: var(--light-text);
}

.sku-value {
    font-weight: 500;
    color: var(--dark-text);
    font-family: monospace;
}

.product-short-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--light-text);
    padding: 1rem;
    background: var(--lightest-gray);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.product-cart-form {
    padding: 1.5rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.product-availability {
    margin-top: 1rem;
}

.product-meta {
    padding: 1rem;
    background: var(--lightest-gray);
    border-radius: 30px;
    border: 1px solid #e9ecef;
}

.product-meta .meta-label {
    font-weight: 600;
    color: var(--dark-text);
    margin-right: 0.5rem;
}

.product-categories,
.product-tags {
    margin-bottom: 0.5rem;
}

.product-categories:last-child,
.product-tags:last-child {
    margin-bottom: 0;
}

/* Descripción completa del producto */
.product-description {
    margin-top: 3rem;
    padding: 2rem 0;
    border-top: 1px solid #e9ecef;
}

.description-content {
    max-width: 800px;
    margin: 0 auto;
}

.description-content h2 {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    text-align: center;
}

.description-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--light-text);
    margin-bottom: 1.5rem;
}

/* Responsive para página de producto */
@media (max-width: 768px) {
    .product-page {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 1rem 0;
        padding: 1rem 0;
    }
    
    .product-title {
        font-size: 2rem;
    }
    
    .product-thumbnails {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .product-cart-form {
        padding: 1rem;
    }
    
    .description-content h2 {
        font-size: 1.5rem;
    }
    
    .description-content p {
        font-size: 1rem;
    }
}

/* Popup de imagen ampliada con glassmorphism */
.image-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-popup.show {
    opacity: 1;
}

/* Fondo con efecto glassmorphism */
.popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    cursor: pointer;
}

.popup-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-popup.show .popup-content {
    transform: scale(1);
}

/* Botón X minimalista delgado */
.popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
    padding: 0;
    margin: 0;
}

.popup-close svg {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.9);
    transition: stroke 0.3s ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg) scale(1.1);
}

.popup-close:hover svg {
    stroke: rgba(255, 255, 255, 1);
}

#popupImage {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px;
}

#popupImage:hover {
    transform: scale(1.02);
}

/* Animación de entrada */
@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive para popup */
@media (max-width: 768px) {
    .image-popup {
        padding: 1rem;
    }
    
    .popup-content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .popup-close {
        top: -40px;
        right: -5px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    #popupImage {
        max-width: 95vw;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .image-popup {
        padding: 0.5rem;
    }
    
    .popup-content {
        max-width: 98vw;
        max-height: 98vh;
    }
    
    .popup-close {
        top: -35px;
        right: 0;
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
    
    #popupImage {
        max-width: 98vw;
        max-height: 98vh;
        border-radius: 5px;
    }
}

/* ===========================================
   STOCK MULTI-SUCURSAL STYLES
   =========================================== */

/* Disponibilidad por sucursal en página de producto */
.sucursal-availability-container {
    margin: 1.5rem 0;
    position: relative;
}

.sucursal-button {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--dark-gray);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    margin: 0;
    position: relative;
    z-index: 1;
}

.sucursal-button:hover {
    background: linear-gradient(135deg, #4b4b4b 0%, #000000 100%);
    transform: translateY(-2px);}

.sucursal-button.active {
    background: var(--accent-color);
    border-radius: 8px 8px 0 0;
}

.sucursal-button.no-stock {
    background: var(--light-gray);
    cursor: not-allowed;
}

.sucursal-button.no-stock:hover {
    background: var(--light-gray);
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sucursal-button i {
    margin-right: 0.5rem;
}

.sucursal-count {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-left: 0.5rem;
}

.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

.sucursales-dropdown {
    display: none;
    background: white;
    border: 1px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}

.sucursales-header {
    padding: 1rem 1.5rem;
    background: var(--lightest-gray);
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sucursales-header h4 {
    color: var(--accent-color);
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.total-stock {
    font-size: 0.9rem;
    color: var(--light-text);
    font-weight: 500;
    display: none;
}

.sucursales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.sucursal-item {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left: 4px solid #e9ecef;
}

.sucursal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sucursal-item.high {
    border-left-color: #28a745;
}

.sucursal-item.medium {
    border-left-color: #ffc107;
}

.sucursal-item.low {
    border-left-color: #dc3545;
}

.sucursal-name {
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.sucursal-stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stock-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-color);
}

.stock-label {
    color: var(--light-text);
    font-size: 0.9rem;
}

/* Estilos para el admin de stock por sucursal */
.studiomix-stock-sucursales {
    margin: 20px 0;
    padding: 25px;
    border: 1px solid #e9ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.studiomix-stock-sucursales h4 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--accent-color);
    font-size: 1.3rem;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.studiomix-stock-sucursales h4::before {
    content: '📦';
    font-size: 1.2rem;
}

.stock-sucursales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    max-height: 450px;
    overflow-y: auto;
    padding: 15px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

/* Scrollbar personalizado */
.stock-sucursales-grid::-webkit-scrollbar {
    width: 8px;
}

.stock-sucursales-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.stock-sucursales-grid::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

.stock-sucursales-grid::-webkit-scrollbar-thumb:hover {
    background: #b02a5b;
}

.stock-sucursal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stock-sucursal-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    transition: all 0.3s ease;
}

.stock-sucursal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.stock-sucursal-item:hover::before {
    background: var(--accent-color);
    width: 6px;
}

.stock-sucursal-item label {
    font-weight: 600;
    margin-right: 15px;
    color: var(--dark-text);
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    hyphens: auto;
    padding-right: 10px;
}

.stock-input {
    width: 70px;
    height: 40px;
    text-align: center;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-text);
    background: white;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stock-input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
    transform: scale(1.05);
}

.stock-input:hover {
    border-color: var(--primary-color);
}

/* Responsive para stock multi-sucursal */
@media (max-width: 768px) {
    .sucursal-button {
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }
    
    .sucursal-count {
        font-size: 0.8rem;
    }
    
    .sucursales-header {
        padding: 0.8rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .sucursales-header h4 {
        font-size: 0.9rem;
    }
    
    .total-stock {
        font-size: 0.8rem;
    }
    
    .sucursales-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1rem;
    }
    
    .sucursal-item {
        padding: 0.8rem;
    }
    
    .sucursal-name {
        font-size: 0.9rem;
    }
    
    .stock-number {
        font-size: 1.3rem;
    }
    
    .studiomix-stock-sucursales {
        padding: 20px 15px;
        margin: 15px 0;
    }
    
    .studiomix-stock-sucursales h4 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    .stock-sucursales-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-height: 350px;
        padding: 12px;
    }
    
    .stock-sucursal-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 15px;
    }
    
    .stock-sucursal-item label {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 0.9rem;
        line-height: 1.3;
        padding-right: 0;
    }
    
    .stock-input {
        width: 80px;
        height: 35px;
        align-self: flex-end;
        font-size: 0.9rem;
    }
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-background {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: 1;
}

.hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
}

/* Imágenes responsive del hero */
.hero-desktop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    display: block;
}

.hero-mobile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    display: none;
}

/* Aspect ratios específicos para diferentes dispositivos */
@media (max-width: 768px) {
    .hero-carousel {
        height: 100vh;
        aspect-ratio: 9/16;
    }
    
    .hero-desktop-image {
        display: none;
    }
    
    .hero-mobile-image {
        display: block;
    }
    
    .hero-bg-image {
        aspect-ratio: 9/16;
    }
    
    /* Ajustar navegación para móviles */
    .hero-navigation {
        bottom: 2rem;
    }
    
    .hero-arrow {
        width: 40px;
        height: 40px;
    }
    
    .hero-arrow-prev {
        left: 1rem;
    }
    
    .hero-arrow-next {
        right: 1rem;
    }
    
    /* Ajustar texto para móviles */
    .hero-text-container {
        padding: 2rem 1.5rem;
        max-width: 90%;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-carousel {
        height: 70vh;
        aspect-ratio: 16/10;
    }
    
    .hero-bg-image {
        aspect-ratio: 16/10;
    }
    
    /* Ajustar texto para tablets */
    .hero-title {
        font-size: 4rem;
    }
    
    .hero-description {
        font-size: 1.3rem;
    }
}

@media (min-width: 1025px) {
    .hero-carousel {
        height: 100vh;
        aspect-ratio: 16/9;
    }
    
    .hero-bg-image {
        aspect-ratio: 16/9;
    }
    
    /* Estilos completos para desktop */
    .hero-title {
        font-size: 5rem;
    }
    
    .hero-description {
        font-size: 1.4rem;
    }
}

/* Optimizaciones de rendimiento */
.hero-carousel {
    will-change: transform;
    contain: layout style paint;
}

.hero-slide {
    will-change: opacity, visibility;
}

.hero-bg-image {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.hero-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-text-container {
    background: rgba(0, 0, 0, 0.196);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 3rem 4rem;
    text-align: center;
    max-width: 800px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* Estilos para slides sin texto - ocultar blur y contenido */
.hero-slide.no-text .hero-content {
    display: none;
}

.hero-slide.no-text .hero-text-container {
    display: none;
}

/* Asegurar que slides sin texto muestren solo la imagen limpia */
.hero-slide.no-text .hero-background {
    z-index: 10;
}

.hero-slide.no-text .hero-bg-image {
    filter: none;
    opacity: 1;
}

.hero-slide.active .hero-text-container {
    transform: translateY(0);
    opacity: 1;
}

.hero-title {
    font-family: 'Ephesis', cursive;
    font-size: 5rem;
    font-weight: 400;
    color: var(--black);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
    letter-spacing: 2px;
}

.hero-description {
    font-family: 'Raleway', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1.6;
    margin: 0;
    text-shadow: 1px 1px 2px rgb(0, 0, 0);
    letter-spacing: 0.5px;
}

/* Navigation Dots */
.hero-navigation {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 4;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--white);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.hero-dot:hover,
.hero-dot.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    opacity: 1;
    transform: scale(1.2);
}

/* Navigation Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 4;
    opacity: 0.8;
}

.hero-arrow:hover {
    background: var(--accent-color);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.hero-arrow-prev {
    left: 2rem;
}

.hero-arrow-next {
    right: 2rem;
}

.hero-arrow i {
    font-size: 1.2rem;
}

/* Auto-play indicator */
.hero-carousel::after {
    content: '';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    z-index: 4;
}

.hero-carousel::before {
    content: '';
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    height: 3px;
    background: var(--accent-color);
    border-radius: 2px;
    z-index: 5;
    animation: progressBar 8s linear infinite;
}

@keyframes progressBar {
    0% {
        width: 0%;
        left: 50%;
    }
    100% {
        width: 100%;
        left: 50%;
    }
}

/* Footer */
.site-footer {
    background: linear-gradient(135deg, var(--dark-text) 0%, #1a1a1a 100%);
    color: var(--white);
    text-align: center;
    padding: 3rem 0;
    margin-top: 4rem;
    border-top: 3px solid var(--accent-color);
}

.site-footer a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* Estilos para posts y contenido */
.post-item, .single-post, .page-content {
    background: var(--white);
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 8px 32px var(--shadow);
    border: 1px solid rgba(248, 215, 218, 0.3);
    transition: all 0.3s ease;
}

/* Asegurar que las páginas normales tengan el espaciado correcto */
body.page .page-content,
body.single .single-post {
    margin-top: 0; /* El margin-top ya está en .site-main */
}

.post-item:hover, .single-post:hover, .page-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px var(--shadow);
}

.entry-title {
    margin-bottom: 1rem;
    color: var(--dark-text);
}

.entry-title a {
    color: var(--dark-text);
    text-decoration: none;
    transition: all 0.3s ease;
}

.entry-title a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.entry-meta {
    color: var(--light-text);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.entry-meta span {
    margin-right: 1rem;
}

.entry-meta a {
    color: var(--light-text);
    text-decoration: none;
}

.entry-meta a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.post-thumbnail {
    margin-bottom: 1rem;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.read-more {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--medium-gray) 100%);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 25px;
    margin-top: 1rem;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px var(--shadow);
}

.read-more:hover {
    background: linear-gradient(135deg, #b02a5b 0%, var(--accent-color) 100%);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
}

/* Paginación */
.page-numbers {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    margin: 0 0.25rem;
    background: var(--primary-color);
    color: var(--dark-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.page-numbers:hover,
.page-numbers.current {
    background: var(--accent-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow);
}

/* Estilos duplicados del menú móvil eliminados - usando los estilos mejorados de arriba */

/* Skip link para accesibilidad */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999999;
}

.skip-link:focus {
    left: 6px;
    top: 7px;
    background: #007cba;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
}

/* Estilos para 404 y búsqueda */
.error-404, .no-results {
    text-align: center;
    padding: 3rem 0;
}

.error-actions .button {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--medium-gray) 100%);
    color: var(--white);
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 25px;
    margin: 1rem 0;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--shadow);
}

.error-actions .button:hover {
    background: linear-gradient(135deg, #b02a5b 0%, var(--accent-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
}

.search-form {
    display: flex;
    margin: 1rem 0;
    max-width: 400px;
}

.search-field {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.search-submit {
    background: var(--accent-color);
    color: var(--white);
    border: 1px solid var(--accent-color);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-submit:hover {
    background: #b02a5b;
    border-color: #b02a5b;
}

/* Widgets */
.widget {
    margin-bottom: 2rem;
}

.widget-title {
    margin-bottom: 1rem;
    color: var(--dark-text);
}

/* Estilos específicos para páginas */
.hero-section {
    text-align: center;
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, rgba(255,255,255,0.8) 100%);
    border-radius: 20px;
    margin: 2rem 0;
}

/* Página Quienes Somos */
.about-content {
    padding: 2rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.about-text h2 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.about-text h3 {
    color: var(--dark-text);
    margin: 2rem 0 1rem 0;
    font-size: 1.5rem;
}

.about-text p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--dark-text);
}

.values-list {
    list-style: none;
    padding: 0;
}

.values-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--primary-color);
    color: var(--dark-text);
}

.values-list li:last-child {
    border-bottom: none;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 8px 32px var(--shadow);
    border: 1px solid rgba(248, 215, 218, 0.3);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px var(--shadow);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h4 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.team-section {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--shadow);
    text-align: center;
}

.team-section h2 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

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

.member-avatar {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.team-member h4 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

/* Página Tiendas */
.stores-content {
    padding: 2rem 0;
}

.stores-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.stores-intro h2 {
    color: var(--accent-color);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.store-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px var(--shadow);
    border: 1px solid rgba(248, 215, 218, 0.3);
    transition: all 0.3s ease;
}

.store-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px var(--shadow);
}

.store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.store-header h3 {
    color: var(--accent-color);
    margin: 0;
}

.store-badge {
    background: var(--accent-color);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.store-info {
    margin-bottom: 1.5rem;
}

.store-detail {
    margin-bottom: 1rem;
}

.store-detail strong {
    color: var(--accent-color);
    display: block;
    margin-bottom: 0.25rem;
}

.store-detail p {
    color: var(--dark-text);
    margin: 0;
    line-height: 1.6;
}

.store-actions {
    display: flex;
    gap: 1rem;
}

.store-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    text-decoration: none;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    transition: all 0.3s ease;
}

.store-btn.primary {
    background: var(--accent-color);
    color: var(--white);
}

.store-btn.primary:hover {
    background: #b02a5b;
    transform: translateY(-2px);
}

.store-btn.secondary {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.store-btn.secondary:hover {
    background: var(--accent-color);
    color: var(--white);
}

.store-btn.disabled {
    background: var(--light-text);
    color: var(--white);
    cursor: not-allowed;
    opacity: 0.6;
}

.store-services {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--shadow);
    text-align: center;
}

.store-services h2 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

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

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service-item h4 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.service-item p {
    color: var(--dark-text);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    /* Ajustar espaciado del menú en móviles */
    body:not(.home) .site-main {
        margin-top: 100px; /* Menos espacio en móviles */
    }
    
    /* Asegurar que el hero en home no tenga margen en móviles */
    body.home .site-main {
        margin-top: 0 !important;
    }
    
    body.home .hero-carousel {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    body.single-product .site-main,
    body.page .site-main,
    body.archive .site-main,
    body.shop .site-main,
    body.woocommerce .site-main,
    body.woocommerce-page .site-main {
        margin-top: 100px;
    }
    
    .welcome-section {
        padding: 2rem 0;
    }
    
    .welcome-content h2 {
        font-size: 2rem;
    }
    
    .welcome-content > p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .feature-item {
        padding: 1.5rem 1rem;
    }
    
    .feature-item i {
        font-size: 2.5rem;
    }
    
    /* Estilos antiguos del menú móvil eliminados - ahora usamos overlay */
    
    .post-item, .single-post, .page-content {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .stores-grid {
        grid-template-columns: 1fr;
    }
    
    .store-actions {
        flex-direction: column;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    /* Estilos antiguos del menú móvil eliminados - ahora usamos overlay */
    
    .account-menu-item {
        align-self: center;
        margin-top: 0.5rem;
    }
    
    /* Hero Responsive Styles */
    .hero-text-container {
        padding: 2rem 2.5rem;
        margin: 0 1rem;
    }
    
    .hero-title {
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
    }
    
    .hero-arrow {
        width: 40px;
        height: 40px;
    }
    
    .hero-arrow-prev {
        left: 1rem;
    }
    
    .hero-arrow-next {
        right: 1rem;
    }
    
    .hero-navigation {
        bottom: 2rem;
    }
    
    .hero-dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .hero-text-container {
        padding: 1.5rem 2rem;
        margin: 0 0.5rem;
    }
    
    .hero-title {
        font-size: 2.8rem;
        letter-spacing: 1px;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-arrow {
        width: 35px;
        height: 35px;
    }
    
    .hero-arrow i {
        font-size: 1rem;
    }
}

/* =========================================== CARRUSEL DE CATEGORÍAS - ESTILOS COMPLETOS =========================================== */

/* Contenedor principal del carrusel de categorías */
.categories-carousel-section {
    position: relative;
    padding: 2rem 0;
    background: var(--white);
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Header de la sección de categorías */
.categories-section-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 10;
}

.categories-section-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #3b3b3b;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 10;
}

.categories-carousel-container {
    position: relative;
    width: 100vw;
    margin: 0;
    padding: 0;
    margin-left: calc(-50vw + 50%);
}

.categories-carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
}

/* Track del carrusel - animación continua */
.categories-carousel-track {
    display: flex;
    align-items: center;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    gap: 2rem;
    padding: 0.5rem 0;
    width: 100%;
    min-width: 100vw;
}

/* Elemento individual de categoría */
.category-item {
    flex: 0 0 auto;
    width: 280px;
    position: relative;
    border-radius: 0;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.category-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

/* Enlace de categoría */
.category-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Contenedor de imagen */
.category-image-container {
    width: 280px;
    height: 373px; /* Aspect ratio 3:4 (280 * 4/3 = 373) */
    position: relative;
    overflow: hidden;
}

/* Imagen de categoría */
.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: brightness(0.9) contrast(1.1);
    border-radius: 8px;
}

.category-item:hover .category-image {
    transform: scale(1.1);
    filter: brightness(1) contrast(1.2);
}

/* Placeholder para categorías sin imagen */
.category-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 8px;
}

.placeholder-icon {
    font-size: 3rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.category-item:hover .placeholder-icon {
    transform: scale(1.2);
    opacity: 1;
}

/* Título de categoría fuera de la imagen */
/* CARRUSEL DE CATEGORÍAS - Título */
.categories-carousel .category-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #373737;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    position: relative;
    z-index: 8;
}

/* Controles del carrusel - ELIMINADOS (se usa loop CSS infinito) */

/* Indicador de pausa - OCULTO */
.carousel-pause-indicator {
    display: none !important;
}

.pause-icon {
    font-size: 1rem;
}

.pause-text {
    font-weight: 500;
}

/* Estados de animación - LOOP INFINITO CON CSS PURO */
.categories-carousel-track.auto-scrolling {
    animation: infiniteScroll 20s linear infinite;
}

.categories-carousel-track.paused {
    animation-play-state: paused;
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.33333%);
    }
}

/* Asegurar que la animación se reinicie sin salto */
.categories-carousel-track {
    will-change: transform;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .category-item {
        width: 250px;
    }
    
    .category-image-container {
        width: 250px;
        height: 333px; /* Aspect ratio 3:4 (250 * 4/3 = 333) */
    }
    
    .categories-section-title {
        font-size: 1.3rem;
    }
    
    .categories-carousel .category-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .categories-carousel-section {
        padding: 2rem 0;
    }
    
    .categories-carousel-container {
        padding: 0 1rem;
    }
    
    .categories-carousel-track {
        gap: 1.5rem;
        padding: 1.5rem 0;
    }
    
    .category-item {
        width: 200px;
    }
    
    .category-image-container {
        width: 200px;
        height: 267px; /* Aspect ratio 3:4 (200 * 4/3 = 267) */
    }
    
    .categories-section-title {
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }
    
    .categories-carousel .category-title {
        font-size: 1rem;
    }
    
    .category-overlay {
        padding: 1.5rem 1rem 1rem;
    }
    
    
    .carousel-pause-indicator {
        top: 10px;
        right: 10px;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .category-item {
        width: 160px;
    }
    
    .category-image-container {
        width: 160px;
        height: 213px; /* Aspect ratio 3:4 (160 * 4/3 = 213) */
    }
    
    .categories-section-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    
    .categories-carousel .category-title {
        font-size: 0.9rem;
    }
    
    .category-overlay {
        padding: 1rem 0.8rem 0.8rem;
    }
    
    .placeholder-icon {
        font-size: 2rem;
    }
}

/* Efectos de carga */
.category-item.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Accesibilidad */
.category-item:focus-within {
    outline: 3px solid #007cba;
    outline-offset: 2px;
}


/* Modo de alto contraste */
@media (prefers-contrast: high) {
    .category-overlay {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .categories-carousel .category-title {
        color: white;
        text-shadow: 2px 2px 0 black;
    }
}

/* Modo de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .categories-carousel-track {
        animation: none;
    }
    
    .category-item:hover {
        transform: none;
    }
    
    .category-item:hover .category-image {
        transform: none;
    }
    
    .category-item:hover .placeholder-icon {
        transform: none;
    }
    
    .category-item:hover .category-overlay {
        transform: none;
    }
    
    .categories-carousel .category-item:hover .category-title {
        transform: none;
    }
}

/* ===========================================
   MÓDULO MARCAS BRASILEÑAS - ESTILOS COMPLETOS
   =========================================== */

.marcas-brasileñas-section {
    width: 100%;
    margin: 0;
    padding: 0rem 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.marcas-container {
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    padding: 0 2rem;
}

.marcas-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
    margin: 2rem 0 2rem 0;
    color: #000000;
    line-height: 1.3;
    letter-spacing: 1px;
}

.marcas-container-static {
    position: relative;
    width: 100%;
}

.marcas-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
    padding: 0rem 0;
    flex-wrap: wrap;
}

.marca-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 2rem;
}

.marca-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.marca-link:hover {
    opacity: 0.8;
}

.marca-logo {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    filter: brightness(0);
    transition: filter 0.3s ease;
}

.marca-item:hover .marca-logo {
    filter: brightness(0.7);
}

/* Animación del carrusel eliminada - ahora es estático */

/* Responsive */
@media (max-width: 768px) {
    .marcas-brasileñas-section {
        padding: 0;
    }
    
    .marcas-title {
        font-size: 1.4rem;
        margin: 0 0 1.5rem 0;
    }
    
    .marcas-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 1rem 0;
        justify-items: center;
        align-items: center;
    }
    
    .marca-item {
        width: 100%;
        max-width: 200px;
        height: 120px;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .marcas-title {
        font-size: 1.2rem;
        margin: 0 0 1rem 0;
    }
    
    .marcas-grid {
        gap: 1rem;
        padding: 0.5rem 0;
    }
    
    .marca-item {
        max-width: 150px;
        height: 100px;
        padding: 0.8rem;
    }
}

/* ===========================================
   MÓDULO BANNER PROMOCIONAL Y BANNER DESTACADO - ESTILOS COMPLETOS
   =========================================== */

.banner-promocional-section,
.banner-destacado-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    height: 700px;
}

.banner-promocional-container,
.banner-destacado-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.banner-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 16rem;
}

/* CLASE PRINCIPAL PARA AJUSTAR TAMAÑO DEL PRODUCTO ESTRELLA */
.producto-estrella-container {
    max-width: 400px; /* CAMBIAR ESTE VALOR: Aumentar para hacer más grande, disminuir para hacer más pequeño */
    width: 100%;
}

/* CLASE PARA AJUSTAR ANCHO DE LA TARJETA DEL PRODUCTO */
.producto-estrella-card {
    width: 30rem; /* CAMBIAR ESTE VALOR: Aumentar (ej: 35rem) para hacer más ancha, disminuir (ej: 25rem) para hacer más estrecha */
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem ;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.producto-estrella-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* CLASE PARA AJUSTAR ALTURA DE LA IMAGEN DEL PRODUCTO */
.producto-imagen-container {
    width: 100%;
    height: 300px; /* Altura fija para desktop por defecto */
    min-height: 300px; /* Altura mínima para mantener proporción */
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem; /* CAMBIAR ESTE VALOR: Aumentar (ej: 1.5rem) para más espacio interno, disminuir (ej: 0.5rem) para menos espacio */
}

.producto-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cambiado de 'contain' a 'cover' para que abarque todo el contenedor */
    object-position: center;
    transition: transform 0.3s ease;
}

.producto-estrella-card:hover .producto-imagen {
    transform: scale(1.05);
}

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


.producto-nombre {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #242424;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.producto-sku {
    font-family: 'Raleway', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #323232;
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 2rem;
}

.producto-link {
    /*background: #000000;*/
    display: inline-block;
    color: #ffffff;
    padding: 0rem 1rem;
    text-decoration: none;
    border-radius: 25px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.producto-link:hover {
    /*background: #727272;*/
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.producto-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Media query para desktop - ajustar producto estrella */
@media (min-width: 1024px) {
    .producto-estrella-card {
        width: 35rem !important; /* Aumentar ancho para desktop */
        max-width: 35rem !important;
        margin: 0 auto; /* Centrar la tarjeta */
    }
    
    .producto-imagen-container {
        height: 400px !important; /* Aumentar altura para abarcar más espacio vertical */
        min-height: 400px !important;
    }
    
    .producto-imagen {
        object-fit: cover !important; /* Cover para que abarque todo el contenedor */
        object-position: center !important; /* Centrar la imagen */
    }
}

/* Media query para desktop grande - ajustar producto estrella */
@media (min-width: 1440px) {
    .producto-estrella-card {
        width: 40rem !important; /* Aún más ancho para pantallas grandes */
        max-width: 40rem !important;
    }
    
    .producto-imagen-container {
        height: 450px !important; /* Altura aún mayor para pantallas grandes */
        min-height: 450px !important;
    }
    
    .producto-imagen {
        object-fit: cover !important; /* Cover para que abarque todo el contenedor */
        object-position: center !important; /* Centrar la imagen */
    }
}

/* Responsive para Banner Promocional y Banner Destacado */
@media (max-width: 768px) {
    .banner-promocional-section,
    .banner-destacado-section {
        height: 600px;
    }
    
    /* Usar imagen de fondo móvil si está disponible */
    .banner-fondo {
        background-image: var(--fondo-mobile, var(--fondo-desktop)) !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    .banner-content {
        padding: 2rem 1rem !important;
        justify-content: center !important;
    }
    
    /* Producto estrella más pequeño pero proporción 1:1 */
    .producto-estrella-container {
        max-width: 500px !important; /* ← TAMAÑO MÁS PEQUEÑO */
        width: 100% !important;
        margin: 0 auto !important; /* ← CENTRAR EL CONTENEDOR */
    }
    
    .producto-estrella-card {
        width: 100% !important; /* ← VOLVER A 100% PARA CENTRAR */
        padding: 1rem !important;
        text-align: center !important;
    }
    
    .producto-nombre {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .producto-sku {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Imagen del producto más grande manteniendo proporción 1:1 */
    .producto-imagen-container {
        width: 500px !important; /* ← CONTENEDOR MÁS GRANDE (250px * 1.5) */
        height: 500px !important; /* ← CONTENEDOR MÁS GRANDE (250px * 1.5) */
        margin: 0 auto 1rem auto !important; /* ← CENTRADO */
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .producto-imagen {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .producto-link {
        padding: 0.7rem 1.5rem !important;
        font-size: 0.8rem !important;
    }
 
}

@media (max-width: 480px) {
    .banner-promocional-section,
    .banner-destacado-section {
        height: 500px !important;
    }
    
    .banner-content {
        padding: 1rem 0.75rem !important;
    }
    
    /* Producto estrella para pantallas pequeñas */
    .producto-estrella-container {
        max-width: 300px !important; /* ← CONTENEDOR MÁS GRANDE PARA 250px */
        margin: 0 auto !important; /* ← CENTRAR EN PANTALLAS PEQUEÑAS */
    }
    
    .producto-estrella-card {
        padding: 1rem !important;
    }
    
    .producto-nombre {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .producto-sku {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Imagen del producto 250x250px manteniendo proporción 1:1 */
    .producto-imagen-container {
        width: 250px !important; /* ← TAMAÑO ESPECÍFICO 250x250px */
        height: 250px !important; /* ← TAMAÑO ESPECÍFICO 250x250px */
        margin: 0 auto 0.75rem auto !important;
    }
    
    .producto-imagen {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .producto-link {
        padding: 0.6rem 1rem !important;
        font-size: 0.75rem !important;
    }

}

/* ===========================================
   MÓDULO ESTILOS DE CALZADO - ESTILOS COMPLETOS
   =========================================== */

.estilos-section {
    width: 100%;
    margin: 0;
    padding: 1rem 0;
    background: #ffffff;
    position: relative;
}

.estilos-header {
    text-align: center;
    margin-bottom: 3rem;
}

.estilos-titulo {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #000000;
    margin: 0 0 0 0;
    letter-spacing: 1px;
}

.estilos-subtitulo {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #000000;
    margin: 0;
    letter-spacing: 1px;
}

.estilos-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, 200px);
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
    height: 620px;
}

.estilo-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.estilo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.estilo-large {
    grid-row: 1 / 4;
}

.estilo-small {
    grid-column: 2;
}

.estilo-small:nth-child(2) {
    grid-row: 1;
}

.estilo-small:nth-child(3) {
    grid-row: 2;
}

.estilo-small:nth-child(4) {
    grid-row: 3;
}

.estilo-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.estilo-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.estilo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.estilo-item:hover .estilo-image {
    transform: scale(1.05);
}

.estilo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.estilo-item:hover .estilo-overlay {
    opacity: 0;
}

.estilo-label {
    display: block;
    background: #ffffff;
    color: #2c3e50;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-family: 'Raleway', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.estilos-boton-container {
    text-align: center;
    margin-top: 2rem;
}

.estilos-boton {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 1.2rem 3rem;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
}

.estilos-boton:hover {
    background: #717171;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
}

.estilos-boton:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(44, 62, 80, 0.3);
}

.estilos-boton:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Responsive para tablets */
@media (max-width: 768px) {
    .estilos-titulo {
        font-size: 2rem;
    }
    
    .estilos-subtitulo {
        font-size: 2.2rem;
    }
    
    .estilos-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 250px);
        height: auto;
        gap: 1rem;
        max-width: 600px;
    }
    
    .estilo-large {
        grid-row: 1;
    }
    
    .estilo-small {
        grid-column: 1;
    }
    
    .estilo-small:nth-child(2) {
        grid-row: 2;
    }
    
    .estilo-small:nth-child(3) {
        grid-row: 3;
    }
    
    .estilo-small:nth-child(4) {
        grid-row: 4;
    }
    
    .estilos-boton {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }
}

/* Responsive para móviles */
@media (max-width: 480px) {
    .estilos-section {
        padding: 0;
    }
    
    .estilos-header {
        margin-bottom: 2rem;
    }
    
    .estilos-titulo {
        font-size: 1.2rem;
    }
    
    .estilos-subtitulo {
        font-size: 1.8rem;
    }
    
    .estilos-grid {
        grid-template-rows: repeat(4, 200px);
        gap: 0.75rem;
        max-width: 100%;
        margin: 0 auto 2rem auto;
    }
    
    .estilo-overlay {
        padding: 1rem;
        opacity: 1;
    }
    
    .estilo-label {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        display: none;
    }
    
    .estilos-boton {
        padding: 0.8rem 1.5rem;
        font-size: 0.8rem;
        width: 90%;
        max-width: 350px;
    }
}

/* ===========================================
   ESTILOS WOOCOMMERCE
   =========================================== */

/* Estilos básicos para imágenes de WooCommerce */
.woocommerce img,
.woocommerce-page img {
    display: block;
    visibility: visible;
}

/* Imágenes de productos */
.woocommerce-product-gallery__image img,
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    display: block;
    visibility: visible;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

/* ===========================================
   MÓDULO CHATBOT FAKE - ESTILOS COMPLETOS
   =========================================== */

.chatbot-section {
    width: 100%;
    margin: 0;
    padding: 4rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.6s ease;
    max-height: 0;
    overflow: hidden;
}

.chatbot-section--visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 1000px;
}

/* ===========================================
   MÓDULO NUEVA TEMPORADA - ESTILOS COMPLETOS
   =========================================== */

.nueva-temporada-section {
    width: 100%;
    margin: 0;
    padding: 3rem 0 5rem 0;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.nueva-temporada-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 0 7rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.nueva-temporada-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 10rem 0 0;
    gap: 2rem;
}

/* Header del módulo */
.nueva-temporada-header {
    text-align: center;
    margin-bottom: 1rem;
}

.nueva-temporada-title {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #3b3b3b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* Contenido principal */
.nueva-temporada-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 570px;
}

/* Posición de imagen - izquierda (por defecto) */
.nueva-temporada-main.imagen-izquierda {
    flex-direction: row;
}

/* Posición de imagen - derecha */
.nueva-temporada-main.imagen-derecha {
    flex-direction: row-reverse !important;
}

/* CSS específico para módulo Tendencias de Producto */
#tendencias-producto-section .nueva-temporada-main {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: flex-start !important;
}

#tendencias-producto-section .nueva-temporada-image-container {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 380px !important;
    height: 570px !important;
}

#tendencias-producto-section .nueva-temporada-products-container {
    order: 1 !important;
    flex: 1 !important;
}

/* Imagen lateral */
.nueva-temporada-image-container {
    flex: 0 0 auto;
    width: 380px;
    height: 570px;
    position: relative;
}

.nueva-temporada-image-wrapper {
    width: 380px;
    height: 570px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nueva-temporada-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.nueva-temporada-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.nueva-temporada-image-wrapper:hover .nueva-temporada-image {
    transform: scale(1.05);
}

/* Estilos para el video */
.nueva-temporada-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
    transition: transform 0.3s ease;
}

/* Efecto hover para el video */
.nueva-temporada-image-wrapper:hover .nueva-temporada-video {
    transform: scale(1.05);
}

/* Ocultar controles del video */
.nueva-temporada-video::-webkit-media-controls {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-panel {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-play-button {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-timeline {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-current-time-display {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-mute-button {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-volume-slider {
    display: none !important;
}

.nueva-temporada-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Placeholder para imagen */
.nueva-temporada-placeholder {
    width: 380px;
    height: 570px;
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #adb5bd;
    position: relative;
}

.placeholder-content {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.7;
}

.placeholder-content h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #495057;
}

.placeholder-content p {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    color: #6c757d;
}

.placeholder-content small {
    font-size: 0.875rem;
    color: #adb5bd;
}

/* Contenedor de productos */
.nueva-temporada-products-container {
    flex: 1;
    position: relative;
    min-height: 570px;
    display: flex;
    justify-content: start;
    align-items: flex-start;
    padding: 0 0 0 1rem;
    gap: 1rem;
}

/* Estilos simplificados para productos estáticos */

.productos-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
    height: 570px !important; /* Altura ajustada para la nueva imagen lateral */
    max-width: 500px !important; /* Limitar ancho para que no se corten */
    overflow: visible !important;
}

/* Items de producto */
.producto-item {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: visible !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

.producto-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.producto-link {
    display: block !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: var(--white) !important;
    width: 100% !important;
    height: 100% !important;

}

.producto-image-container {
    width: 100% !important;
    height: 200px !important; /* Altura ajustada para laptop */
    padding-bottom: 0 !important; /* Sin padding */
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.producto-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.producto-item:hover .producto-image {
    transform: scale(1.1);
}

.producto-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
   /* height: 100%;*/
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.producto-placeholder .placeholder-icon {
    font-size: 2rem;
    color: #adb5bd;
}

.producto-info {
    padding:  0 1rem !important;
    text-align: center !important;
    background: #fff !important;
    border-radius: 0 0 12px 12px !important;
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    flex: 1 !important;
    /*min-height: 80px !important;*/
}

/* CLASE COMENTADA: Nombre del producto oculto en grid de Nueva Temporada según especificaciones */
.producto-nombre {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.3 !important;
    display: none !important; /* OCULTADO: Solo mostrar SKU en grid de Nueva Temporada */
    text-align: center !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.producto-sku {
    font-family: 'Raleway', sans-serif;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.producto-agotado {
    display: inline-block;
    background: #6c757d;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Controles y indicadores eliminados - productos estáticos */

/* ===========================================
   PÁGINA DE CATEGORÍAS
   =========================================== */

/* Head Banner - MEJORADO */
.categorias-banner {
    position: relative;
    height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.categorias-banner-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.categorias-banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.categorias-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.categorias-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out;
}

.categorias-banner-title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 1.5rem 0;
    letter-spacing: 2px;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.categorias-banner-subtitle {
    font-size: 1.3rem;
    margin: 0;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Animaciones para banner de categorías */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Grid de Categorías - MEJORADO */
.categorias-grid-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

.categorias-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.categoria-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px);
    animation: slideInFromBottom 0.8s ease-out forwards;
}

.categoria-item:nth-child(1) { animation-delay: 0.1s; }
.categoria-item:nth-child(2) { animation-delay: 0.2s; }
.categoria-item:nth-child(3) { animation-delay: 0.3s; }
.categoria-item:nth-child(4) { animation-delay: 0.4s; }
.categoria-item:nth-child(5) { animation-delay: 0.5s; }
.categoria-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInFromBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.categoria-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.categoria-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.categoria-image-container {
    position: relative;
    height: 350px;
    overflow: hidden;
}

.categoria-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: brightness(0.9);
}

.categoria-item:hover .categoria-image {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.categoria-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 3rem 2rem 2rem;
    color: var(--white)!important;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

.categoria-item:hover .categoria-overlay {
    transform: translateY(0);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.categoria-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.8rem 0;
    color: var(--white)!important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.categoria-description {
    font-size: 1rem;
    margin: 0;
    opacity: 0.95;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Estados de carga y efectos de entrada */
.categoria-item.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.categoria-item.loading .categoria-image {
    background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.categoria-item.loading .categoria-overlay {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* Efectos de entrada escalonados */
.categoria-item.fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

.categoria-item.fade-in:nth-child(1) { animation-delay: 0.1s; }
.categoria-item.fade-in:nth-child(2) { animation-delay: 0.2s; }
.categoria-item.fade-in:nth-child(3) { animation-delay: 0.3s; }
.categoria-item.fade-in:nth-child(4) { animation-delay: 0.4s; }
.categoria-item.fade-in:nth-child(5) { animation-delay: 0.5s; }
.categoria-item.fade-in:nth-child(6) { animation-delay: 0.6s; }

/* Mensaje vacío - MEJORADO */
.categorias-empty {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    text-align: center;
}

.categorias-empty-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.categorias-empty-content h2 {
    font-size: 2rem;
    color: #6c757d;
    margin: 0 0 1rem 0;
}

.categorias-empty-content p {
    font-size: 1.1rem;
    color: #6c757d;
    margin: 0;
}

/* Responsive Design - OPTIMIZADO */
@media (max-width: 1024px) {
    .categorias-banner {
        height: 400px;
        background-attachment: scroll;
    }
    
    .categorias-banner-content {
        padding: 2.5rem 1.5rem;
    }
    
    .categorias-banner-title {
        font-size: 3rem;
        letter-spacing: 1.5px;
    }
    
    .categorias-banner-subtitle {
        font-size: 1.2rem;
    }
    
    .categorias-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 2rem;
    }
    
    .categoria-image-container {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .categorias-banner {
        height: 300px;
        background-attachment: scroll;
    }
    
    .categorias-banner-content {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }
    
    .categorias-banner-title {
        font-size: 2.5rem;
        letter-spacing: 1px;
    }
    
    .categorias-banner-subtitle {
        font-size: 1.1rem;
    }
    
    .categorias-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .categoria-image-container {
        height: 250px;
    }
    
    .categorias-grid-container {
        padding: 0 1rem;
    }
    
    .categoria-overlay {
        padding: 2.5rem 1.5rem 1.5rem;
    }
    
    .categoria-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .categorias-banner {
        height: 250px;
        background-attachment: scroll;
    }
    
    .categorias-banner-content {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }
    
    .categorias-banner-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    
    .categorias-banner-subtitle {
        font-size: 1rem;
    }
    
    .categorias-grid-section {
        padding: 3rem 0;
    }
    
    .categoria-image-container {
        height: 200px;
    }
    
    .categoria-overlay {
        padding: 2rem 1rem 1rem;
    }
    
    .categoria-title {
        font-size: 1.4rem;
    }
    
    .categoria-description {
        font-size: 0.9rem;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .nueva-temporada-main {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
    
    /* Mantener orden específico en responsive */
    .nueva-temporada-main.imagen-derecha {
        flex-direction: column-reverse;
    }
    
    .nueva-temporada-image-container {
        flex: none;
        width: 350px;
        height: 525px;
    }
    
    .nueva-temporada-image-wrapper,
    .nueva-temporada-placeholder {
        width: 350px;
        height: 525px;
    }
    
    .nueva-temporada-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }
}

@media (max-width: 768px) {
    .nueva-temporada-section {
        padding: 1rem 0;
    }
    
    .nueva-temporada-container {
        padding: 2rem 1rem 0 1rem;
    }
    
    .nueva-temporada-title {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    
    .nueva-temporada-main {
        gap: 1.5rem;
        align-items: center;
    }
    
    .nueva-temporada-image-container {
        width: 300px;
        height: 450px;
    }
    
    .nueva-temporada-image-wrapper,
    .nueva-temporada-placeholder {
        width: 300px;
        height: 450px;
    }
    
    .productos-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .producto-image-container {
        width: 120px !important;
        height: 120px !important;
        padding-bottom: 0 !important;
    }
    
    /* Controles eliminados - responsive simplificado */
}

/* ===========================================
   MOBILE FIRST - NUEVA TEMPORADA & TENDENCIAS
   =========================================== */

@media (max-width: 768px) {
    /* CORREGIR: Ajustar contenedor principal para mobile */
    .nueva-temporada-container {
        padding: 0 1rem !important;
    }
    
    .nueva-temporada-section {
        padding: 1rem 0 !important;
    }
    
    /* CORREGIR: Eliminar padding derecho problemático */
    .nueva-temporada-content {
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* NUEVA TEMPORADA - Mobile Layout */
    .nueva-temporada-main,
    #tendencias-producto-section .nueva-temporada-main {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* CORREGIR: Video/imagen primero en mobile - MANTENER TAMAÑO DESKTOP */
    .nueva-temporada-image-container,
    #tendencias-producto-section .nueva-temporada-image-container {
        order: 1 !important;
        flex: none !important;
        width: 300px !important;  /* ← TAMAÑO FIJO COMO DESKTOP */
        height: 450px !important; /* ← TAMAÑO FIJO COMO DESKTOP */
        margin: 0 auto !important;
    }
    
    /* Grid de productos debajo del video */
    .nueva-temporada-products-container,
    #tendencias-producto-section .nueva-temporada-products-container {
        order: 2 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* CORREGIR: Ajustar wrapper de imagen/video - MANTENER TAMAÑO DESKTOP */
    .nueva-temporada-image-wrapper,
    .nueva-temporada-placeholder {
        width: 300px !important;  /* ← TAMAÑO FIJO COMO DESKTOP */
        height: 450px !important; /* ← TAMAÑO FIJO COMO DESKTOP */
        border-radius: 8px;
        margin: 0 auto !important;
    }
    
    /* CORREGIR: Grid 2x2 para productos en mobile - REDUCIR GAP VERTICAL */
    .productos-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important; /* ← FILAS AUTOMÁTICAS */
        gap: 0.5rem 0.75rem !important; /* ← GAP VERTICAL MÁS PEQUEÑO */
        width: calc(100vw - 2rem) !important; /* ← ANCHO EXACTO DE PANTALLA */
        max-width: calc(100vw - 2rem) !important; /* ← ANCHO EXACTO DE PANTALLA */
        margin: 0 auto !important;
        padding: 0 !important; /* ← SIN PADDING ADICIONAL */
        box-sizing: border-box !important;
    }
    
    /* CORREGIR: Optimizar productos para que ocupen más espacio del grid */
    .producto-item {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 0.85 !important; /* ← MÁS COMPACTO */
        max-width: none !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 8px !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .producto-imagen-container {
        width: 100% !important;
        flex: 1 !important; /* ← OCUPA LA MAYOR PARTE DEL ESPACIO */
        height: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0.25rem !important; /* ← PADDING MÍNIMO */
    }
    
    .producto-imagen {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* ← COVER PARA LLENAR EL ESPACIO */
        box-sizing: border-box !important;
        border-radius: 6px !important;
    }
    
    /* CORREGIR: SKU más compacto y mejor posicionado */
    .producto-info {
        padding: 0.15rem 0.25rem !important; /* ← PADDING MÍNIMO */
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 0 0 6px 6px !important;
        margin-top: auto !important; /* ← SE PEGA AL FONDO */
    }
    
    .producto-sku {
        font-size: 0.65rem !important; /* ← SKU AÚN MÁS PEQUEÑO */
        color: #555 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important; /* ← EVITAR SALTO DE LÍNEA */
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* ← PUNTOS SI ES MUY LARGO */
    }
    
    /* Ajustar título para mobile */
    .nueva-temporada-title {
        font-size: 1.4rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    /* Ajustes para pantallas muy pequeñas - MANTENER PROPORCIONES */
    .nueva-temporada-image-container,
    #tendencias-producto-section .nueva-temporada-image-container {
        width: 280px !important;  /* ← LIGERAMENTE MÁS PEQUEÑO */
        height: 420px !important; /* ← MANTENER PROPORCIÓN 2:3 */
    }
    
    .nueva-temporada-image-wrapper,
    .nueva-temporada-placeholder {
        width: 280px !important;  /* ← CONSISTENTE */
        height: 420px !important; /* ← CONSISTENTE */
    }
    
    .productos-grid {
        gap: 0.4rem 0.5rem !important; /* ← GAP VERTICAL AÚN MÁS PEQUEÑO */
        width: calc(100vw - 1rem) !important; /* ← ANCHO EXACTO */
        max-width: calc(100vw - 1rem) !important; /* ← ANCHO EXACTO */
        padding: 0 !important; /* ← SIN PADDING ADICIONAL */
        box-sizing: border-box !important;
    }
    
    /* SKU aún más pequeño en pantallas muy pequeñas */
    .producto-sku {
        font-size: 0.6rem !important; /* ← SKU AÚN MÁS PEQUEÑO */
    }
    
    .producto-info {
        padding: 0.1rem 0.2rem !important; /* ← PADDING MÍNIMO */
    }
    
    .producto-imagen-container {
        padding: 0.15rem !important; /* ← PADDING MÍNIMO EN PANTALLAS PEQUEÑAS */
    }
    
    .nueva-temporada-title {
        font-size: 1.2rem !important;
    }
    
    .producto-info {
        padding: 0.75rem;
    }
    
    .producto-nombre {
        display: none !important; /* OCULTADO: Solo mostrar SKU en responsive */
        font-size: 0.8rem;
    }
    
    .producto-sku {
        font-size: 0.7rem;
    }
    
    .placeholder-content {
        padding: 1rem;
    }
    
    .placeholder-icon {
        font-size: 2rem;
    }
    
    .placeholder-content h3 {
        font-size: 1.2rem;
    }
}

/* ===========================================
   FIN MÓDULO NUEVA TEMPORADA - ESTILOS COMPLETOS

/* ===========================================
   PÁGINA QUIENES SOMOS - ESTILOS COMPLETOS
   =========================================== */

/* HEADER SECTION */
.quienes-somos-header {
    text-align: center;
    padding: 3rem 0 2rem 0;
    background: #ffffff;
}

.quienes-somos-title {
    font-family: 'Raleway', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* HEADER BANNER - CLASE INDEPENDIENTE */
.quienes-somos-header-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    overflow: hidden;
}

.header-overlay {
    background: rgba(0, 0, 0, 0.707);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-content {
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    padding: 0 2rem;
    z-index: 2;
}

.header-title {
    color: var(--white);
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.header-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* TIMELINE SECTION */
.quienes-somos-timeline-section {
    padding: 4rem 0;
    background: #f8f9fa;
    position: relative;
}

.timeline-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0 2rem;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #2c3e50, #3498db, #2c3e50);
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.timeline-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.timeline-left {
    justify-content: flex-end;
}

.timeline-right {
    justify-content: flex-start;
}

.timeline-year {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: #2c3e50;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-year {
    background: #3498db;
    transform: translate(-50%, -50%) scale(1.1);
}

.timeline-content {
    width: 45%;
    position: relative;
}

.timeline-left .timeline-content {
    margin-right: 60px;
}

.timeline-right .timeline-content {
    margin-left: 60px;
}

.timeline-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.timeline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2c3e50);
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.timeline-image {
    width: 100%;
    height: 200px;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.timeline-card:hover .timeline-image img {
    transform: scale(1.05);
}

.timeline-text h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.timeline-text p {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

/* MISSION BANNER - CLASE INDEPENDIENTE */
.quienes-somos-mission-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    height: 500px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
    overflow: hidden;
    /* Forzar centrado y evitar desplazamientos */
    right: auto;
    margin-left: 0;
    margin-right: 0;
}

.mission-overlay {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-content {
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    padding: 0 2rem;
    z-index: 2;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.mission-title {
    color: var(--white);
    font-family: 'Raleway', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 2rem 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.mission-description {
    font-family: 'Raleway', sans-serif;
    font-size: 1.3rem;
    line-height: 1.8;
    margin: 0;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* CONTENT BLOCKS */
.quienes-somos-blocks {
    padding: 4rem 0;
    background: #ffffff;
}

.quienes-somos-block {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
    gap: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.quienes-somos-block.animate {
    opacity: 1;
    transform: translateY(0);
}

.quienes-somos-block.image-right {
    flex-direction: row-reverse;
}

.block-image {
    flex: 0 0 600px;
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.block-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.block-image:hover img {
    transform: scale(1.05);
}

.block-content {
    flex: 1;
    padding: 0 2rem;
}

.block-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
}

.block-description {
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
    color: #6c757d;
    line-height: 1.8;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .quienes-somos-title {
        font-size: 2rem;
    }
    
    .quienes-somos-header-banner {
        position: relative;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        height: 400px;
        margin-bottom: 2rem;
    }
    
    .header-content {
        padding: 0 1rem;
    }
    
    .header-title {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }
    
    .header-subtitle {
        font-size: 1.2rem;
    }
    
    .timeline-container {
        padding: 0 1rem;
    }
    
    .timeline-line {
        left: 30px;
        transform: none;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 60px;
        margin-bottom: 3rem;
    }
    
    .timeline-year {
        left: 30px;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        font-size: 1rem;
    }
    
    .timeline-content {
        width: 100%;
        margin: 0;
    }
    
    .timeline-left .timeline-content,
    .timeline-right .timeline-content {
        margin: 0;
    }
    
    .timeline-card {
        padding: 1.5rem;
    }
    
    .timeline-image {
        height: 150px;
    }
    
    .timeline-text h3 {
        font-size: 1.3rem;
    }
    
    .mission-title {
        font-size: 2.5rem;
    }
    
    .mission-description {
        font-size: 1.1rem;
    }
    
    .quienes-somos-block {
        flex-direction: column !important;
        gap: 2rem;
        text-align: center;
    }
    
    .block-image {
        flex: none;
        width: 100%;
        max-width: 600px;
        height: 300px;
    }
    
    .block-content {
        padding: 0;
    }
    
    .block-title {
        font-size: 2rem;
    }
    
    .block-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .quienes-somos-header {
        padding: 2rem 0 1rem 0;
    }
    
    .quienes-somos-title {
        font-size: 1.8rem;
    }
    
    .quienes-somos-header-banner {
        position: relative;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        height: 300px;
        margin-bottom: 1.5rem;
    }
    
    .header-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }
    
    .header-subtitle {
        font-size: 1rem;
    }
    
    .quienes-somos-timeline-section {
        padding: 2rem 0;
    }
    
    .timeline-container {
        padding: 0 0.5rem;
    }
    
    .timeline-line {
        left: 20px;
    }
    
    .timeline-item {
        padding-left: 40px;
        margin-bottom: 2rem;
    }
    
    .timeline-year {
        left: 20px;
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
    }
    
    .timeline-card {
        padding: 1rem;
    }
    
    .timeline-image {
        height: 120px;
        margin-bottom: 1rem;
    }
    
    .timeline-text h3 {
        font-size: 1.2rem;
    }
    
    .timeline-text p {
        font-size: 0.9rem;
    }
    
    .quienes-somos-mission-banner {
        position: relative;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        height: 400px;
        margin: 2rem 0;
    }
    
    .mission-content {
        padding: 0 1rem;
    }
    
    .mission-title {
        font-size: 2rem;
    }
    
    .mission-description {
        font-size: 1rem;
    }
    
    .quienes-somos-blocks {
        padding: 2rem 0;
    }
    
    .quienes-somos-block {
        margin-bottom: 2rem;
        gap: 1.5rem;
    }
    
    .block-image {
        height: 250px;
    }
    
    .block-title {
        font-size: 1.8rem;
    }
    
    .block-description {
        font-size: 1rem;
    }
}

/* CORRECCIÓN ESPECÍFICA PARA BANNER MISIÓN - EVITAR DESPLAZAMIENTOS */
.quienes-somos-mission-banner * {
    position: relative;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
}

.quienes-somos-mission-banner .mission-content {
    position: relative;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 auto;
}

/* ===========================================
   PÁGINA CATEGORÍAS DE PRODUCTOS - ESTILOS COMPLETOS
   =========================================== */

/* BANNER PERSONALIZADO DE CATEGORÍAS */
.category-custom-banner {
    position: relative;
    width: 100%;
    height: 400px; /* Proporción optimizada para 1920x400px */
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: scroll; /* Mejor rendimiento y menos pixelación */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; /* Mantiene proporción exacta sin recortes */
    margin-bottom: 3rem;
    overflow: hidden;
}

.category-custom-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   /* background: rgba(0, 0, 0, 0.4);*/
    z-index: 1;
}

.category-custom-banner .banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out;
}

.category-custom-banner .banner-title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 1.5rem 0;
    letter-spacing: 2px;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.category-custom-banner .banner-subtitle {
    font-size: 1.3rem;
    margin: 0;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Responsive para banner personalizado - Optimizado para 1920x400px */
@media (max-width: 1920px) {
    .category-custom-banner {
        height: calc(100vw * 400 / 1920); /* Mantiene proporción 1920:400 */
        max-height: 400px;
    }
}

@media (max-width: 1200px) {
    .category-custom-banner {
        height: calc(100vw * 400 / 1920);
        max-height: 350px;
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {
    .category-custom-banner {
        height: calc(100vw * 400 / 1920);
        max-height: 300px;
        background-attachment: scroll;
    }
    
    .category-custom-banner .banner-content {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }
    
    .category-custom-banner .banner-title {
        font-size: 1.8rem;
        letter-spacing: 1.5px;
        margin-bottom: 1rem;
    }
    
    .category-custom-banner .banner-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .category-custom-banner {
        height: calc(100vw * 400 / 1920);
        max-height: 200px;
        background-attachment: scroll;
    }
    
    .category-custom-banner .banner-content {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }
    
    .category-custom-banner .banner-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
        margin-bottom: 0.75rem;
    }
    
    .category-custom-banner .banner-subtitle {
        font-size: 0.9rem;
    }
}

/* ===========================================
   PÁGINA SUCURSALES - ESTILOS COMPLETOS
   =========================================== */

/* Espacio superior para que el banner y título (glassmorphism) empiecen debajo del menú sticky */
.sucursales-page {
    padding-top: 120px; /* Altura aproximada del menú fijo (top + barra) */
}
body.admin-bar .sucursales-page {
    padding-top: 152px; /* + barra de administración de WordPress cuando está logueado */
}

/* BANNER DE SUCURSALES - Reutiliza estilos de categorías */
.sucursales-banner {
    position: relative;
    width: 100%;
    height: 400px; /* Proporción optimizada para 1920x400px */
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: scroll; /* Mejor rendimiento y menos pixelación */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%; /* Mantiene proporción exacta sin recortes */
    margin-bottom: 3rem;
    overflow: hidden;
}

.sucursales-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.sucursales-banner .banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out;
}

.sucursales-banner .banner-title {
    font-size: 2rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 1.5rem 0;
    letter-spacing: 2px;
    animation: fadeInUp 1s ease-out 0.2s both;
}

.sucursales-banner .banner-subtitle {
    font-size: 1.3rem;
    margin: 0;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Responsive para banner de sucursales - Optimizado para 1920x400px */
@media (max-width: 1920px) {
    .sucursales-banner {
        height: calc(100vw * 400 / 1920); /* Mantiene proporción 1920:400 */
        max-height: 400px;
    }
}

@media (max-width: 1200px) {
    .sucursales-banner {
        height: calc(100vw * 400 / 1920);
        max-height: 350px;
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {
    .sucursales-banner {
        height: calc(100vw * 400 / 1920);
        max-height: 300px;
        background-attachment: scroll;
    }
    
    .sucursales-banner .banner-content {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }
    
    .sucursales-banner .banner-title {
        font-size: 1.8rem;
        letter-spacing: 1.5px;
        margin-bottom: 1rem;
    }
    
    .sucursales-banner .banner-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .sucursales-banner {
        height: calc(100vw * 400 / 1920);
        max-height: 200px;
        background-attachment: scroll;
    }
    
    .sucursales-banner .banner-content {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }
    
    .sucursales-banner .banner-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
        margin-bottom: 0.75rem;
    }
    
    .sucursales-banner .banner-subtitle {
        font-size: 0.9rem;
    }
}

/* MAPA INTERACTIVO DE MÉXICO */
.sucursales-mapa-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.mapa-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.mapa-mexico {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 20px;
}

/* MÓDULO DE DETALLES DE TIENDA */
.tienda-details-module {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 350px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1000;
    animation: slideInRight 0.3s ease-out;
}

.tienda-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid #eee;
}

.tienda-details-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
    font-weight: 600;
}

.cerrar-details {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.cerrar-details:hover {
    background: #f0f0f0;
    color: #333;
}

.tienda-details-content {
    padding: 1.5rem;
}

.tienda-foto {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
}

.tienda-foto img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.tienda-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.info-item i {
    color: #667eea;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
    font-size: 1.1rem;
}

.info-item strong {
    display: block;
    color: #333;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.info-item p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

.tienda-contacto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.contacto-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.contacto-btn i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.maps-btn {
    background: #4285f4;
    color: white;
}

.maps-btn:hover {
    background: #3367d6;
    color: white;
}

.whatsapp-btn {
    background: #25d366;
    color: white;
}

.whatsapp-btn:hover {
    background: #1ea952;
    color: white;
}

.telefono-btn {
    background: #34a853;
    color: white;
}

.telefono-btn:hover {
    background: #2d8f47;
    color: white;
}

.email-btn {
    background: #ea4335;
    color: white;
}

.email-btn:hover {
    background: #d33b2c;
    color: white;
}

/* CARRUSEL DE PRODUCTOS */
.sucursales-productos-section {
    padding: 4rem 0;
    background: white;
}

.productos-header {
    text-align: center;
    margin-bottom: 3rem;
}

.productos-header h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 1rem;
    font-weight: 700;
}

.productos-header p {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

.productos-carrusel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.carrusel-container {
    overflow: hidden;
    border-radius: 15px;
}

.carrusel-track {
    display: flex;
    transition: transform 0.3s ease;
    gap: 1.5rem;
}

.producto-slide {
    flex: 0 0 280px;
}

.producto-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.producto-imagen {
    height: 500px;
    overflow: hidden;
}

.producto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.producto-card:hover .producto-imagen img {
    transform: scale(1.05);
}

.producto-info {
    padding: 1.5rem;
}

.producto-titulo {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.producto-titulo a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.producto-titulo a:hover {
    color: #667eea;
}

.producto-precio {
    font-size: 1.2rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 1rem;
}

.producto-btn {
    display: inline-block;
    background: #667eea;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

.producto-btn:hover {
    background: #5a6fd8;
    color: white;
    transform: translateY(-2px);
}

/* Controles del carrusel */
.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 1.2rem;
    color: #667eea;
    transition: all 0.2s ease;
    z-index: 10;
}

.carrusel-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.carrusel-prev {
    left: -25px;
}

.carrusel-next {
    right: -25px;
}

/* Animaciones */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive para página de sucursales */
@media (max-width: 768px) {
    .mapa-mexico {
        height: 400px;
    }
    
    .tienda-details-module {
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .tienda-contacto {
        grid-template-columns: 1fr;
    }
    
    .productos-header h2 {
        font-size: 2rem;
    }
    
    .producto-slide {
        flex: 0 0 250px;
    }
    
    .carrusel-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .sucursales-mapa-section,
    .sucursales-productos-section {
        padding: 2rem 0;
    }
    
    .mapa-mexico {
        height: 300px;
    }
    
    .tienda-details-module {
        max-height: 70vh;
    }
    
    .tienda-foto img {
        height: 150px;
    }
    
    .productos-header h2 {
        font-size: 1.8rem;
    }
    
    .producto-slide {
        flex: 0 0 220px;
    }
}

/* ========================================
   SISTEMA DE SUCURSALES MEJORADO
   ======================================== */

/* Contenedor principal de disponibilidad */
.sucursal-availability-container {
    margin: 2rem 0;
    font-family: 'Inter', sans-serif;
}





.sucursal-button.no-stock {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    cursor: not-allowed;
    opacity: 0.7;
}

.sucursal-count {
    font-size: 0.9rem;
    opacity: 0.9;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.sucursal-button.active .toggle-icon {
    transform: rotate(180deg);
}

/* Dropdown de sucursales */
.sucursales-dropdown {
    display: none;
    margin-top: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e1e5e9;
}

.sucursales-dropdown.active {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header del dropdown */
.sucursales-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #e1e5e9;
}

.sucursales-header h4 {
    margin: 0 0 0.5rem 0;
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
}

.sucursales-header h4 i {
    color: #667eea;
    margin-right: 0.5rem;
}

/* Grid de sucursales */
/* Lista de sucursales en filas (reemplaza el grid) */
.sucursales-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
}

/* Fila de sucursal */
.sucursal-row {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.sucursal-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #494949;
}

/* Nombre de sucursal en la fila */
.sucursal-row-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4d4d4d;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
}

/* Contenedor de botones en la fila */
.sucursal-row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Botones de acción en fila (circulares) */
.sucursal-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.sucursal-row-btn i {
    display: block;
    line-height: 1;
}

.sucursal-row-btn.map-btn {
    background: #000000;
    color: white;
}

.sucursal-row-btn.map-btn:hover {
    background: #333333;
    transform: scale(1.1);
    color: white;
}

.sucursal-row-btn.whatsapp-btn {
    background: #25D366;
    color: white;
}

.sucursal-row-btn.whatsapp-btn:hover {
    background: #20BA5A;
    transform: scale(1.1);
    color: white;
}

.sucursal-row-btn.call-btn {
    background: #007bff;
    color: white;
}

.sucursal-row-btn.call-btn:hover {
    background: #0056b3;
    transform: scale(1.1);
    color: white;
}

/* Mantener estilos de stock para compatibilidad (ocultos) */
.sucursal-item {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sucursal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #494949;
}

/* Nombre de sucursal */
.sucursal-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #4d4d4d;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Stock de sucursal */
.sucursal-stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.stock-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: #667eea;
    display: none;
}

.stock-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
    display: none;
}

/* Clases de stock para colores */
.sucursal-item.high .sucursal-stock {
    background: rgba(40, 167, 69, 0.1);
    border-left-color: #ff006f;
    display: none;
}

.sucursal-item.high .stock-number {
    color: #28a745;
    display: none;
}

.sucursal-item.medium .sucursal-stock {
    background: rgba(255, 193, 7, 0.1);
    border-left-color: #ffc107;
    display: none;
}

.sucursal-item.medium .stock-number {
    color: #e0a800;
    display: none;
}

.sucursal-item.low .sucursal-stock {
    background: rgba(220, 53, 69, 0.1);
    border-left-color: #dc3545;
    display: none;
}

.sucursal-item.low .stock-number {
    color: #dc3545;
    display: none;
}

/* Total de stock en el header */
.total-stock {
    font-size: 0.9rem;
    color: #667eea;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Contenedor de botones de acción */
.sucursal-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Botones de acción */
.sucursal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sucursal-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

/* Botón Ver Mapa */
.map-btn {
    background: var(--black);
    color: white;
}

.map-btn:hover {
    background: linear-gradient(135deg, #4b4b4b 0%, #000000 100%);
    color: white;
}

.map-btn i {
    font-size: 1rem;
}

/* Botón WhatsApp */
.whatsapp-btn {
    background: linear-gradient(135deg, #01cf2d 0%, #009804 100%);
    color: white;
    padding: 0.75rem;
    min-width: 44px;
    justify-content: center;
}

.whatsapp-btn:hover {
    background: linear-gradient(135deg, #009804 0%, #01cf2d 100%);
    color: white;
}

.whatsapp-btn i {
    font-size: 1.2rem;
}

/* Botón Llamada */
.call-btn {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 0.75rem;
    min-width: 44px;
    justify-content: center;
}

.call-btn:hover {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    color: white;
}

.call-btn i {
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sucursal-availability-container {
        margin: 1.5rem 0;
    }
    
    .sucursal-button {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .sucursales-grid {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .sucursal-item {
        padding: 1.25rem;
    }
    
    .sucursal-name {
        font-size: 1rem;
        margin-bottom: 0.875rem;
    }
    
    .sucursal-actions {
        gap: 0.5rem;
    }
    
    .sucursal-action-btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
        min-height: 40px;
    }
    
    .whatsapp-btn,
    .call-btn {
        padding: 0.625rem;
        min-width: 40px;
    }
}

@media (max-width: 480px) {
    /* Lista de sucursales en móvil */
    .sucursal-row {
        flex-direction: row;
        align-items: center;
        padding: 0.875rem 1rem;
        gap: 1rem;
    }
    
    .sucursal-row-name {
        flex: 1;
        min-width: 0;
        font-size: 0.85rem;
    }
    
    .sucursal-row-actions {
        flex-shrink: 0;
        gap: 0.5rem;
    }
    
    .sucursal-row-btn {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
        border-radius: 50% !important;
    }
    
    /* Mantener estilos antiguos para compatibilidad */
    .sucursal-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sucursal-action-btn {
        justify-content: center;
        text-align: center;
    }
    
    .whatsapp-btn,
    .call-btn {
        justify-content: center;
    }
}

/* PAGINACIÓN PERSONALIZADA */
.pagination-container {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    margin: 0 2px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #666;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination .page-numbers:hover {
    background: #ffffff;
    border-color: #000000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
}

.pagination .page-numbers.current {
    background: #000000;
    border-color: #00000000;
    color: #fff;
    font-weight: 600;
}

.pagination .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
}

.pagination .page-numbers.dots:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    padding: 0.5rem 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #434343 0%, #000000 100%);
    border: none;
    color: #fff;
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
    background: linear-gradient(135deg, #515151 0%, #000000 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.pagination .page-numbers.prev:disabled,
.pagination .page-numbers.next:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination .page-numbers.prev:disabled:hover,
.pagination .page-numbers.next:disabled:hover {
    transform: none;
    box-shadow: none;
}

.pagination-info {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Responsive para paginación */
@media (max-width: 768px) {
    .pagination {
        gap: 0.25rem;
    }
    
    .pagination .page-numbers {
        min-width: 35px;
        height: 35px;
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.2rem;
    }
    
    .pagination .page-numbers {
        min-width: 32px;
        height: 32px;
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        margin: 0 1px;
    }
    
    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .pagination-info {
        font-size: 0.8rem;
        margin-top: 1rem;
    }
}

/* SOBRESCRIBIR ESTILOS WOOCOMMERCE EN PÁGINAS DE CATEGORÍAS */
body.category-products-page .woocommerce,
body.category-products-page .woocommerce-page,
body.woocommerce-category-page .woocommerce,
body.woocommerce-category-page .woocommerce-page {
    /* Resetear estilos de WooCommerce */
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.category-products-page .woocommerce .woocommerce-products-header,
body.woocommerce-category-page .woocommerce .woocommerce-products-header {
    display: none !important; /* Ocultar header por defecto de WooCommerce */
}

body.category-products-page .woocommerce .woocommerce-result-count,
body.category-products-page .woocommerce .woocommerce-ordering,
body.woocommerce-category-page .woocommerce .woocommerce-result-count,
body.woocommerce-category-page .woocommerce .woocommerce-ordering {
    display: none !important; /* Ocultar controles por defecto */
}

/* Asegurar que nuestro contenedor tenga prioridad */
body.category-products-page .category-products-page,
body.woocommerce-category-page .category-products-page {
    position: relative;
    z-index: 10;
    background: #ffffff;
}

/* Debug temporal para productos */
.no-products {
    background: #fff3cd;
    border: 2px solid #ffc107;
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 8px;
}

.no-products h3 {
    color: #856404;
    margin-bottom: 1rem;
}

.no-products p {
    color: #856404;
    margin-bottom: 0.5rem;
}

.no-products strong {
    color: #721c24;
}

/* Header de la Categoría */
.category-header {
    position: relative;
    width: 100%;
    height: 400px; /* Proporción optimizada para 1920x400px */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: scroll; /* Mejor rendimiento y menos pixelación */
    background-size: 100% 100%; /* Mantiene proporción exacta sin recortes */
    background-position: center;
}

.category-header-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-header-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.category-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.category-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out;
}

.category-header-content .category-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 1.5rem 0;
    letter-spacing: 2px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.2s both;
}

.category-header-content .category-description {
    font-size: 1.3rem;
    margin: 0;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Filtros */
.category-filters {
    padding: 2rem 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.filters-container {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 600;
    color: #495057;
}

.filter-select {
    padding: 0.5rem 1rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    background: white;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Grid de Productos */
.category-products {
    padding: 4rem 0;
    background: #ffffff;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.product-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.product-card:nth-child(1) { animation-delay: 0.1s; }
.product-card:nth-child(2) { animation-delay: 0.2s; }
.product-card:nth-child(3) { animation-delay: 0.3s; }
.product-card:nth-child(4) { animation-delay: 0.4s; }
.product-card:nth-child(5) { animation-delay: 0.5s; }
.product-card:nth-child(6) { animation-delay: 0.6s; }
.product-card:nth-child(7) { animation-delay: 0.7s; }
.product-card:nth-child(8) { animation-delay: 0.8s; }

.product-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.product-image-container {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 3rem;
}

.product-sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
}

.product-info {
    padding: 1.5rem;
}

.product-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.product-title a {
    color: #212529;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-title a:hover {
    color: #667eea;
}

.product-meta {
    margin-bottom: 0.5rem;
}

.product-sku {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
}

.product-price {
    margin-bottom: 1rem;
}

.price-sale {
    font-size: 1.2rem;
    font-weight: 700;
    color: #dc3545;
    margin-right: 0.5rem;
}

.price-regular {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
}

.product-actions {
    margin-top: 1rem;
}

.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #667eea;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}

.add-to-cart-btn:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.out-of-stock {
    display: block;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: #6c757d;
}

.no-products h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #495057;
}

/* Responsive Design para Categorías de Productos - Optimizado para 1920x400px */
@media (max-width: 1920px) {
    .category-header {
        height: calc(100vw * 400 / 1920); /* Mantiene proporción 1920:400 */
        max-height: 400px;
    }
}

@media (max-width: 1024px) {
    .category-header {
        height: calc(100vw * 400 / 1920);
        max-height: 350px;
        background-attachment: scroll;
    }
    
    .category-header-content .category-title {
        font-size: 3rem;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .filters-container {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .category-header {
        height: calc(100vw * 400 / 1920);
        max-height: 300px;
        background-attachment: scroll;
    }
    
    .category-header-content {
        padding: 2rem 1.5rem;
        border-radius: 15px;
    }
    
    .category-header-content .category-title {
        font-size: 2.5rem;
    }
    
    .category-header-content .category-description {
        font-size: 1.1rem;
    }
    
    .filters-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .filter-group {
        justify-content: space-between;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .product-image-container {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .category-header {
        height: calc(100vw * 400 / 1920);
        max-height: 200px;
        background-attachment: scroll;
    }
    
    .category-header-content {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }
    
    .category-header-content .category-title {
        font-size: 2rem;
    }
    
    .category-header-content .category-description {
        font-size: 1rem;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .product-info {
        padding: 1rem;
    }
    
    .product-title {
        font-size: 1.1rem;
    }
}

/* ===========================================
   FIN PÁGINA QUIENES SOMOS - ESTILOS COMPLETOS
   =========================================== */

/* ===========================================
   ESTILOS PARA POPUPS DE GOOGLE MAPS
   =========================================== */

/* Estilos para popups de Google Maps */
.gm-style .gm-style-iw {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 12px !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    border-radius: 12px !important;
}

.info-window-content {
    padding: 15px;
    font-family: 'Raleway', sans-serif;
    color: #333;
}

.info-window-content h4 {
    margin: 0 0 10px 0;
    color: #000;
    font-size: 16px;
    font-weight: 600;
}

.info-window-content p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.info-window-content .click-hint {
    font-style: italic;
    color: #667eea;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
}

/* Botón de cerrar del popup */
.gm-style .gm-style-iw-tc {
    display: none !important;
}

/* Mejorar la experiencia del scroll en el mapa */
.mapa-mexico {
    cursor: grab;
}

.mapa-mexico:active {
    cursor: grabbing;
}

/* Asegurar que el scroll funcione correctamente */
.mapa-container {
    position: relative;
    overflow: hidden;
}

/* Mejorar la responsividad del scroll */
@media (max-width: 768px) {
    .mapa-mexico {
        cursor: default;
    }
}

/* ===========================================
   ESTILOS PARA GRID DE SUCURSALES
   =========================================== */

/* Sección del botón */
.sucursales-grid-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.grid-button-container {
    text-align: center;
}

.ver-sucursales-btn {
    background: #000000;
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ver-sucursales-btn:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.ver-sucursales-btn i {
    font-size: 1.2rem;
}

.toggle-icon {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

/* Contenedor desplegable de sucursales */
.sucursales-desplegables {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.sucursales-header {
    padding: 2rem 2rem 1rem 2rem;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.sucursales-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Grid de sucursales - 5x8 */
.sucursales-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    max-width: 100%;
    padding: 2rem;
}

.sucursal-grid-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sucursal-grid-item:hover {
    border-color: #667eea;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.sucursal-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

.sucursal-info p {
    margin: 0.25rem 0;
    font-size: 0.8rem;
    color: #666;
}

.sucursal-info .ciudad {
    font-weight: 500;
    color: #555;
}

.sucursal-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: center;
}

.sucursal-acciones a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-maps {
    background: #667eea;
    color: white;
}

.btn-maps:hover {
    background: #5a6fd8;
    transform: scale(1.1);
}

.btn-whatsapp {
    background: #25d366;
    color: white;
}

.btn-whatsapp:hover {
    background: #20ba5a;
    transform: scale(1.1);
}

/* Responsive para el grid */
@media (max-width: 1200px) {
    .sucursales-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 992px) {
    .sucursales-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .sucursales-header {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .sucursales-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1rem;
    }
    
    .ver-sucursales-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .sucursales-header {
        padding: 1rem 1rem 0.75rem 1rem;
    }
    
    .sucursales-header h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .sucursales-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        padding: 1rem;
    }
    
    .sucursales-header {
        padding: 1rem 1rem 0.5rem 1rem;
    }
    
    .sucursal-grid-item {
        padding: 0.875rem;
    }
}