/*=====================================================
BODY PRINCIPAL (BASE)
====================================================*/
body {
    font-family: Arial, sans-serif;
    /* Cambiamos padding: 0 por 70px arriba para dejar espacio al header */
    padding: 60px 0 0 0; 
    background: rgb(255, 255, 255);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Obliga al cuerpo a medir al menos la pantalla */
    margin: 0;
    background-color: white; /* Asegura que el fondo sea uniforme */
}

/* =====================================================
HEADER: RECTIFICACIÓN DE CENTRADO SEGURO
=====================================================*/
.header {
    background-color: #1c73b5;
    padding: 0 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 3000;
    
    /* Configuración de 3 columnas iguales en los extremos */
    display: grid;
    grid-template-columns: 1fr auto 1fr; 
    align-items: center;
    box-sizing: border-box;
}

.header-social {
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* Empuja iconos al borde izquierdo */
}

.header-logo-container {
    display: flex;
    justify-content: center; /* Centra el logo en su columna */
}
.header-logo {
    height: 40px;
    width: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto elástico sutil */
    will-change: transform;
}
.header-logo:hover {
    transform: scale(1.1); /* Ampliación sutil */
}

.header-logo:active {
    transform: scale(0.95); /* Efecto de pulsación al hacer clic */
}
/* Estilo de los iconos */
.header-social a {
    color: #ffffff !important;
    font-size: 20px;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.header-social a:hover {
    transform: scale(1.15);
    opacity: 0.8;
}

/*=====================================================
USER AVATAR + DROPDOWN (Tooltip Style)
=====================================================*/
.user-menu { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    z-index: 1100;
}

/* El círculo con las iniciales */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eceaea;
    color: #2354a9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
}

/* Efecto hover en el avatar */
.user-avatar:hover {
    background-color: #f6f6f6; 
    color: #3a50ba;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Contenedor del Dropdown (Tooltip) */
.user-dropdown {
    /* Estado inicial oculto para animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; 

    /* Diseño del panel */
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 52px; /* Espacio exacto para que encaje con la flecha */
    right: 0;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 15px;
    z-index: 9999;
    gap: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    min-width: 200px;
}

/* La flechita superior del tooltip */
.user-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    transform: rotate(45deg);
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

/* MOSTRAR AL HACER HOVER */
.user-menu:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Área invisible para que no se cierre al bajar el ratón */
.user-menu::after {
    content: "";
    position: absolute;
    top: 35px; 
    right: 0;
    width: 100%;
    height: 25px;
}

/* Estilos internos del Dropdown */
.user-dropdown .user-email { 
    font-size: 13px; 
    color: #314cd4; 
    font-weight: bold; 
    margin-bottom: 10px;
    text-align: center;
    word-break: break-all;
}

/* Botón del dropdown */
.user-dropdown button {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 25px;
    background: #d7d7d7;
    color: #464545;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s ease, color 0.2s ease;
}
.user-dropdown button:hover {
    background: rgba(103, 124, 160, 0.848);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* =====================================================
BANNER TÍTULOS GALERÍA
===================================================== */
.gallery-banner {
    width: 100%;
    height: 120px;
    background-image: url('/assets/bannerGalleryWeb.jpg'); 
    background-size: cover;
    background-position: center; 
    display: flex;
    justify-content: center;
    align-items: stretch; 
    overflow: hidden;
    
    background-color: #1c73b5;
    position: relative; 
    z-index: 1;
    border: none;

    /* CAMBIOS AQUÍ PARA LA ANIMACIÓN */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0px; /* Empezamos en 0 */
    opacity: 1;
    will-change: transform, margin-top, opacity; 
}

.gallery-collapsed {
    margin-top: -120px !important; /* Succiona la galería hacia arriba del todo */
    opacity: 0 !important;
    pointer-events: none;
}

/* CUADRO AZUL: Texto más arriba */
.banner-overlay-box {
    /* 1. COLOR: Un poco más oscuro en el centro aumentando la opacidad (de 0.5 a 0.7) */
    background: rgba(255, 255, 255, 0.614);
    
    /* 2. FILTROS: Mantenemos el desenfoque para que lo que pase por detrás se vea premium */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);    
    
    width: fit-content;
    /* Ajustamos padding para dar aire al contenido */
    padding: 25px 300px 10px 300px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    
    height: 100%;
    box-sizing: border-box;

    /* MÁSCARA DE DIFUMINADO*/
    -webkit-mask-image: linear-gradient(
        to right, 
        transparent 0%, 
        black 15%, 
        black 70%, 
        transparent 100%
    );   
    mask-image: linear-gradient(
        to right, 
        transparent 0%, 
        black 30%, 
        black 70%, 
        transparent 100%
    );

    /* Fuera borde o clip-path previo para que el difuminado sea real*/
    border: none !important;
    clip-path: none !important;
}

/*Título: "Galería de imágenes"*/
#gallery-title-main {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2; 
    white-space: nowrap; /* Evita que el título se parta en dos líneas */
    display: table; /* Truco: hace que el elemento mida solo lo que mide su texto */
    
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;      /* Espaciado entre letras para toque artístico */
    font-size: 45px; 
    font-weight: 400; 
    color: #2556a5e0 !important;
}

/*línea divisoria entre títulos*/
.banner-divider {
    width: 100%; /* 100% del ancho del texto */
    height: 1.1px; 
    background-color: #2556a5 !important;
    margin: 5px 0 !important; /* Espacio pequeño arriba y abajo */
    border: none;
    display: block;
}

/*Subtítulo*/
#gallery-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px; 
    font-weight: 400;
    color: #2556a5 !important;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 3px;
}

/* =====================================================
BANNER AZUL CLARITO CON BOTONES
=====================================================*/

/*Barra de búsqueda ==================================*/
.search-banner {
    padding: 8px 25px;
    display: flex;             
    align-items: center;       /* Centra verticalmente TODO (incluido el botón de carga) */
    justify-content: space-between; 
    background-color: rgb(247, 248, 249) !important; /* Fondo sólido para tapar lo que sube */
    gap: 20px;
    position: relative;        /* Importante para que los hijos no floten fuera */
    overflow: visible;         /* Para que se vea el tooltip de Excel, pero no el botón fuera */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.145); /* Sombra que ahora sí será visible */

    position: -webkit-sticky;
    position: sticky;
    top: 60px; /* Se queda pegado justo debajo del header fijo */
    z-index: 2500; /* Un punto más que el header si es necesario */
    transition: transform 0.3s ease;
}

/* Botones CARGAR ARCHIVO + DOWNLOAD ALL (Propiedades conjuntas)==================================*/
.download-all, 
.input-container label {
    display: inline-flex;       /* Permite alinear icono/texto internamente */
    align-items: center;        /* Centrado vertical interno */
    justify-content: center;    /* Centrado horizontal interno */
    height: 33px !important;    /* Altura fija blindada */
    padding: 0 20px !important; /* Espaciado interno lateral */
    border-radius: 20px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    white-space: nowrap;        /* Evita que el texto se parta en dos líneas */
    cursor: pointer;
    box-sizing: border-box;     /* Incluye el borde en el cálculo de la altura */
    border: 1px solid #d1d9e0 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    margin: 0 !important;       /* Bloquea desplazamientos accidentales */
    flex: none;                 /* Evita que el botón se estire o encoja */
}

/* Especificaciones para BOTÓN "DESCARGAR TODO" (según estado): */
/* Inactivo (Gris) */
.download-all.disabled {
    background-color: #edebeb !important;
    color: #a0a0a0 !important;
    cursor: default !important;
    pointer-events: none !important; /* Bloquea clics */
}
/* Activo (Azul) */
.download-all.active {
    background-color: #1c73b5;
    color: white !important;
}
.download-all.active:hover {
    background-color: #005a9e;
    transform: translateY(-2px); /* Efecto sutil de levante */
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2) !important;
}

/* Especificaciones para BOTÓN "CARGAR ARCHIVO .XLS / BUSCAR CON EXCEL"*/
.input-container label {
    background-color: #edebeb; 
    color: #184f83c0 !important; 
}
.input-container label:hover {
    background-color: #1c73b5;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.2) !important;
}
#sku-file { display: none; } /* Ocultamos el input original */

/* =====================================================
BLOQUE CENTRAL (Buscador y Lupa) - VERSION PRO
=====================================================*/

.search-container {
    position: relative;
    width: 750px; 
    display: flex;
    align-items: center;
    margin: 0 auto; 
    overflow: visible !important;
    
    /* ⚡ NUEVO: Para que el contenedor entero pueda crecer */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Efecto cuando el usuario hace clic dentro del buscador */
.search-container:focus-within {
    transform: scale(1.02); /* Crece un 2% sutilmente */
}

#sku-search {
    width: 100%;
    height: 38px; /* Lo he subido un poco para que sea más cómodo */
    padding: 0 40px 0 18px; 
    border: 1px solid #d1d9e0;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    background-color: #f0f2fa; /* Un tono base algo más claro */
    box-sizing: border-box;
    
    /* ⚡ NUEVO: Transiciones de color y sombra */
    transition: 
        background-color 0.3s ease, 
        border-color 0.3s ease, 
        box-shadow 0.3s ease;
}

/* ⚡ ESTADO ACTIVO (Al hacer click) */
#sku-search:focus {
    background-color: #f8f7fadb; /* Fondo blanco puro al escribir */
    border-color: #3690d5e0;     /* Borde corporativo */
    /* Sombra suave para dar profundidad (glow) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
}

.placeholder-real {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #757575;
    pointer-events: none;
    z-index: 1;
    font-size: 14px;
    transition: opacity 0.2s ease; /* Desaparición suave */
}

.search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 16px; /* Lupa un pelín más grande */
    transition: all 0.3s ease;
    z-index: 2;
}

/* La lupa también se ilumina cuando el padre tiene el foco */
.search-container:focus-within .search-icon {
    color: #0078D4;
}

/* 1. Ocultar cuando tiene la clase 'tiene-texto' (lo que ya hacía tu JS) */
.search-container.tiene-texto .placeholder-real {
    display: none !important;
    opacity: 0;
}

/* 2. Ocultar TAMBIÉN en cuanto el usuario hace clic (Focus) */
.search-container:focus-within .placeholder-real {
    display: none !important;
    opacity: 0;
}

/* =====================================================
TOOLTIP DE EXCEL (Formatos de ayuda)
===================================================== */

.excel-tooltip {
    position: absolute;
    top: 40px;             /* Aparece justo debajo del botón */
    left: 0;
    width: 180px;          /* Tamaño compacto */
    background: white;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 30000 !important; /* Siempre por encima de todo */
    
/* Animación de entrada lenta */
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 1s ease, transform 1s ease;
    pointer-events: none;
}

.excel-tooltip p {
    margin: 0 0 6px 0;
    color: #444;
    font-weight: bold;
    font-size: 10px;
    text-align: center;
}

.excel-tooltip img {
    display: block;
    width: 90%;
    height: auto;
    margin: 0 auto;
    border-radius: 3px;
}

/* Mostramos el tooltip al pasar el ratón por el label */
#sku-file-label:hover .excel-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =====================================================
GALERÍA DE IMÁGENES
=====================================================*/
.gallery {
    display: flex; /* Asegúrate de que tenga display flex */
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    transition: all 0.4s ease;
    margin-top: 40px; /* Añade este margen para separar del banner azul */
    min-height: 0px !important;  /* Quitamos el 60vh para que no fuerce altura */
    height: auto !important;

    padding-top: 10px !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 60px !important;
    z-index: 1;

} 

.item {
    text-align: center;
    border: 1px solid #ddd;
    padding: 15px; 
    border-radius: 8px;
    width: 220px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center; 
    /* Quitamos height fijo para evitar el espacio vacío */
    height: auto; 
    box-shadow: 0 10px 25px rgba(0, 120, 212, 0.204);
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
}
.item:hover {
    box-shadow: 0 15px 35px rgba(0, 120, 212, 0.427);
}

.item img {
/* Todas ocupen el mismo espacio visual */
    width: 100%;
    height: 180px; 
    object-fit: contain;
    border-radius: 8px;
    transition: 0.3s;
    /* Lupa bonita para la galería principal */
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23184f83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") 12 12, zoom-in;
}

.item img:hover { 
    transform: scale(1.1); 
}

/* Nombre "etiqueta" del SKU */
.item p {
    font-size: 13px;
    font-weight: 500;
    color: #285986;
    margin: 10px 0 5px 0; /* Reducimos el margen inferior para que el EAN esté cerca */
}

/* Estilo para el EAN justo debajo del SKU */
.item small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #285986;
    margin-bottom: 10px; /* Espacio antes del botón de descarga */
    font-family: sans-serif;
}

.download-btn {
    cursor: pointer;
    background-color: #efefef;
    border: 1px solid #d1d9e0;
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #184f83;
    /* Transition suaviza color, movimiento y sombra */
    transition: all 0.3s ease;
    display: inline-block; /* Asegura que el movimiento sea fluido */
}

/* Efecto Hover: Cambio de color + Movimiento + Sombra */
.download-btn:hover {
    background-color: #1c73b5;
    color: white;
    border-color: #1c73b5;
    
    /* El efecto que pediste: sube 2 píxeles y proyecta sombra */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Efecto Click: Se "hunde" un poquito al pulsar */
.download-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*
=====================================================
MODALES Y BLOQUEO (Versión Blindada)
=====================================================
*/
.modal-overlay, #blocked-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(255, 255, 255, 0.579);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* La caja blanca del mensaje */
.modal-content, #blocked-modal > div {
    background: #ffffff !important;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.726);
    position: relative;
    box-sizing: border-box;
    display: block !important;
}

/* Estilo para el TÍTULO (el primer párrafo) */
.modal-content p:first-of-type, 
#blocked-modal div p:first-of-type {
    color: #000000 !important;   /* Negro fuerte */
    font-weight: 600 !important;  /* Muy negrita */
    font-size: 20px !important;   /* Más grande */
    margin-bottom: 10px !important;
}

/* Estilo para el MENSAJE (los párrafos que siguen) */
.modal-content p:not(:first-of-type),
#blocked-modal div p:not(:first-of-type) {
    color: #666666 !important;   /* Gris para el texto secundario */
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
}

/* El botón de Aceptar */
.modal-content button, #blocked-ok {
    margin-top: 20px !important;
    cursor: pointer !important;
    padding: 0 30px !important;         
    height: 33px !important; /* Más alto para que sea fácil de tocar en móvil */
    background-color: #1c73b5 !important; 
    border-radius: 20px !important;     
    font-size: 14px !important;         
    font-weight: bold !important;
    color: #ffffff !important;  
    border: none !important;
    display: inline-flex !important;
    align-items: center !important; 
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

/* Efecto al pasar el ratón por el botón */
.modal-content button:hover, #blocked-ok:hover {
    background-color: #005a9e !important; 
    transform: translateY(-px) !important;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.4) !important;
}

/* =====================================================
MENSAJES DE ERROR (SKU No encontrado) - Estilo Elegante
===================================================== */
.not-found-message {
    color: #8a2a2a;              
    margin: 15px 0px -10px 0; 
    padding: 25px 25px;
    background-color: #fff5f5;
    text-align: center;
    
    /* Efecto "Luxury Banner" */
    border-top: 1px solid #f2dada;
    border-bottom: 1px solid #f2dada;
    
    /* Configuración Full Width */
    width: 100vw; /*borde infinito lateral*/
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    
    /* Animación de entrada suave */
    animation: slideDown 0.4s ease-out;

    position: relative;
    z-index: 2; /* Por encima del gris de main-content */
}

.not-found-message span {
    font-size: 15px;
    letter-spacing: 0.5px;       /* Aire entre letras*/
    font-weight: 300;            /* Fuente más fina */
    display: block;
    margin-bottom: 5px;
}

.not-found-message strong {
    font-weight: 700;            /* Solo el SKU destaca en negrita */
    color: #000;                 /* El SKU en negro para contraste */
}

.not-found-message button {
    margin-top: 15px;
    padding: 6px 25px;
    cursor: pointer;
    border: 1px solid #797979;   /* Borde fino */
    border-radius: 20px;
    background: transparent;      /* Fondo transparente para estilo minimalista */
    color: #444;
    font-size: 11px;
    text-transform: uppercase;   /* Texto en mayúsculas*/
    letter-spacing: 1px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.not-found-message button:hover {
    background: #444;
    color: #fff;
    transform: translateY(-1px);
}

/* =====================================================
OVERLAY DE ERROR CON ASPA EN CARGA ARCHIVO EXCEL
===================================================== */
#spinner-overlay.error { 
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Icono de error tipo aspa */
.icon-error {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.icon-error::before,
.icon-error::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 50px;
    background-color: #e53030;
    border-radius: 2px;
}

.icon-error::before {
    transform: rotate(45deg);
}

.icon-error::after {
    transform: rotate(-45deg);
}

/* Pulso sutil para llamar la atención */
.animate-error {
    animation: errorPulse 0.6s ease-in-out infinite;
}

/* Texto de error elegante */
.spinner-msg-error {
    color: #e53030;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    animation: fadeInError 0.3s forwards;
}

/* Animaciones */
@keyframes fadeInError {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes errorPulse {
    0% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.85; }
}

/* =====================================================
SPINNER DE CARGA
===================================================== */
#spinner-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    gap: 20px; /* <--- Espacio perfecto entre el check/spinner y el texto */
    background: rgba(255, 255, 255, 0.85); /* Fondo blanco traslúcido */
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter: blur(5px); /* Suaviza lo que hay detrás */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    flex-direction: column;
}

/* El círculo que gira: Más fino y con degradado */
.spinner {
    width: 50px; 
    height: 50px;
    border: 3px solid rgba(0, 120, 212, 0.1); /* Círculo base casi invisible */
    border-top: 3px solid #0078D4; /* Línea de color azul Kids */
    border-radius: 50%;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-bottom: 20px;
}

/* Texto de carga más profesional */
#spinner-overlay span {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #555;
    text-transform: uppercase;
}

/* El círculo verde del Check */
.check-container, .spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Espacio respecto al texto inferior */
    width: 100%;
}

.check-icon {
    width: 60px; 
    height: 60px;
    border-radius: 50%;
    background-color: #239f40; /* Verde éxito */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    box-shadow: 0 5px 10px rgba(40, 167, 69, 0.3);
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
}
/* =====================================================
SPINNER DE DESCARGAR TODAS LAS FOTOS (DOWNLOAD ALL)
===================================================== */
.spinner-text-download {
    color: #555 !important; 
    margin-top: 10px !important; 
    font-size: 14px !important; 
    font-weight: 400 !important; 
    letter-spacing: 1px !important; 
    text-transform: uppercase !important;
    text-align: center;
}

/* Fondo sea blanquecino solo al descargar */
.spinner-light-mode {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/*
=====================================================
SCROLL UP
=====================================================
*/
#scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #1c73b5;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: none; /* Importante: El JS se encarga de mostrarlo */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999; /* Para que siempre esté por encima de la galería */
    transition: all 0.3s ease;
}

#scroll-top-btn:hover {
    background-color: #005a9e;
    transform: translateY(-5px); /* Pequeño salto al pasar el ratón */
}

/*=====================================================
CAROUSEL: TIRA HORIZONTAL - VERSIÓN SINCRONIZADA Y VIVA
=====================================================*/
#welcome-carousel {
    width: 100%;
    height: 330px;
    overflow: hidden; 
    position: relative;
    background: #ffffff;
    display: none; /* Se activa mediante JS con .is-visible */
    align-items: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    opacity: 0;
    z-index: 1005;

    /* OPTIMIZACIÓN DE MOTOR GRÁFICO */
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translate3d(0, 0, 0); 
    will-change: transform, opacity;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#welcome-carousel.is-visible {
    display: flex !important;
    animation: carouselEntrance 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.1s;
}

#carousel-track {
    display: flex !important;
    gap: 45px !important;
    padding-top: 28px;
    width: max-content;
    animation: scrollInfinite 40s linear infinite; /*menos segundos es más rápido*/
    will-change: transform; 
    
    /* Mantenemos el desplazamiento vertical en 3D para máxima fluidez */
    transform: translate3d(0, -20px, 0);

    /* --- EL CERROJO --- */
    opacity: 0 !important;         /* Totalmente invisible */
    visibility: hidden !important;  /* Bloqueado para el navegador */
    transition: opacity 0.5s ease;  /* Para que aparezca suave cuando tenga permiso */
}
.no-animation {
    animation: none !important;
}

/* Solo cuando el padre tiene permiso confirmado, liberamos el track */
#welcome-carousel.is-visible #carousel-track {
    opacity: 1 !important;
    visibility: visible !important;
}
#welcome-carousel:hover #carousel-track {
    animation-play-state: paused; /* Se detiene al pasar el ratón */
}

.carousel-slide {
    /* BLOQUEO DE TAMAÑO: 0 0 135px impide que el navegador las haga pequeñas */
    flex: 0 0 135px !important; 
    width: 135px !important;
    height: 180px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    z-index: 1;
    backface-visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.1s;
}

/* EFECTO ZOOM AL PASAR EL RATÓN */
.carousel-slide:hover {
    z-index: 999; 
    transform: scale(1.4); /* Aquí está tu escala de aumento */
}

.carousel-slide img {
    /* AJUSTE FORZADO DE IMAGEN */
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    
    /* ANIMACIÓN DE FLOTADO Y FLUIDEZ */
    animation: floatAlive 4s ease-in-out infinite alternate;
    transition: filter 0.3s ease, opacity 0.5s ease;
    pointer-events: none;
    backface-visibility: hidden;
    opacity: 0.95; 
}

/* Resalte visual al hacer hover */
.carousel-slide:hover img {
    opacity: 1 !important;
    filter: brightness(1.05);
}

/* --- VARIEDAD EN EL MOVIMIENTO (DELAYS) --- */
/* Esto hace que no todas boten a la par */
.carousel-slide:nth-child(2n) img { animation-delay: -0.5s; animation-duration: 4.5s; }
.carousel-slide:nth-child(3n) img { animation-delay: -1.2s; animation-duration: 5s; }
.carousel-slide:nth-child(4n) img { animation-delay: -2s; animation-duration: 3.8s; }
.carousel-slide:nth-child(5n) img { animation-delay: -3.1s; animation-duration: 4.2s; }

/* SKU QUE APARECE AL HACER HOVER */
.sku-reference {
    position: absolute;
    bottom: 20px; /* Antes 20px, ajustado para que siga cerca de la imagen */
    left: 50%;
    transform: translateX(-50%);
    background: #5a88d0c4 !important;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px; 
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 1000;
}

/* Clase para ocultar el carrusel suavemente */
.hidden-carousel {
    opacity: 0 !important;
    height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.carousel-slide:hover .sku-reference {
    opacity: 1;
    transform: translateX(-50%) translateY(35px); 
}

.vibrating-img {
    animation: shakeAlive 0.3s linear infinite !important;
    filter: brightness(1.05);
}

/*=====================================================
TÍTULO DEL CAROUSEL - VERSIÓN REFORZADA
=====================================================*/
#titulo-carousel {
    background-color: #ffffff !important;
    width: 100%;
    justify-content: center;
    align-items: center;/*flex-end = Alineado abajo como pediste */
    text-align: center;
    margin: 0 !important;
    padding: 20px 0 0px 0 !important;
    font-size: 18px; 
    font-weight: 500;
    min-height: 70px;
    position: relative;
    overflow: hidden;
    opacity:0;
    z-index: 1006;
    display: none; /* Se activa mediante JS con .is-visible */
    transform: translateY(50px);
    will-change: opacity, transform;

    /* FUENTE ARTÍSTICA MODERNA */
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;         /* Tamaño elegante */
    font-weight: 500;         /* Ni muy fina, ni muy negrita */
    letter-spacing: 1px;      /* Espaciado entre letras para toque artístico */
    color: #5f89cec4 !important;
}

#titulo-carousel.is-visible {
    display: flex !important;
    animation-delay: 0.2s;
}

#titulo-carousel.animar-ahora {
    display: flex !important;
    animation: entradaSuaveBrillante 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.2s;
}

/* LA CLAVE: Tu clase de control se queda intacta */
.hidden-title {
    display: none !important; /* Oculta completamente el título */
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: none !important; /* Evita que la animación corra si está oculto */
    visibility: hidden !important;
}

/* El destello de brillo sutil */
#titulo-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.6) 50%, 
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
}

/* ANIMACIONES */
@keyframes entradaSuaveBrillante {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* =====================================================
MODAL AMPLIACIÓN IMAGEN (Estilos)
===================================================== */

.modal-overlay-image {
    display: none; /* Invisible por defecto */
    position: fixed;
    z-index: 99999; /* Prioridad máxima sobre toda la web */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    /* Fondo premium: blanco traslúcido con desenfoque */
    background-color: rgba(255, 255, 255, 0.85); 
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    
    /* Centrado absoluto */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Imagen ampliada */
.modal-content-image {
    max-width: 85%;
    max-height: 80vh; /* No ocupa más del 80% de la altura de la pantalla */
    border-radius: 15px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    animation: zoomAnim 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto elástico suave */
    
    /* Imagen ampliada: Lupa azul personalizada con signo MÁS (+) */
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23184f83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") 10 10, zoom-in;
}

/* Evita que el cursor cambie a flecha al mover el ratón dentro de la imagen */
.modal-content-image:hover {
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23184f83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") 10 10, zoom-in;
}


/* Cruz de cierre fina */
.close-modal {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 50px;
    font-weight: 100; 
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

.close-modal:hover {
    color: #333;
    transform: scale(1.1);
}

/* Texto del SKU debajo de la foto */
#modal-caption {
    margin-top: 20px;
    font-size: 18px;
    color: #444;
    font-family: 'Segoe UI', Arial, sans-serif;
    letter-spacing: 1px;
}
.modal-separator {
    margin: 0 10px;
    color: #444 !important;
    display: inline-block;  /* Para que respete los márgenes laterales */
}
/* Botón de descarga dentro del modal */
#modal-download-btn {
    margin-top: 10px;
    background-color: #1c73b5;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

#modal-download-btn:hover {
    background-color: #005a9e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,120,212,0.4);
}


/* =====================================================
    ESTILOS SECCIÓN: CONTENIDO DIGITAL
   ===================================================== */

/* 1. EL CONTENEDOR PADRE */
.contenido-digital-section {
    background-image: linear-gradient(1deg, #ffffff 2%, #c4e4ecde 60%, #f6f3f6 100%) !important;
    width: 100%;
    padding: 0;     
    padding-bottom: 50px;
    display: none; /* Se activa con .is-visible */
    position: relative;
    margin-top: -2px !important; 
    border: none !important;
    z-index: 1006;
}

/* ACTIVACIÓN POR CLASE */
.contenido-digital-section.is-visible {
    display: block !important;
}

/*=====================================================
    TÍTULO DE CONTENIDO DIGITAL
=====================================================*/
#titulo-contenido-digital {
    background-color: #f6f3f6 !important;
    width: 100%;
    justify-content: center;
    align-items: flex-end; 
    text-align: center;
    margin: 0 !important;
    padding: 30px 0 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #21627cb3 !important;
    position: relative;
    z-index: 1006;
    margin-top: -2px !important; 
    
    display: none; 
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
}

/* Activación y Animación */
#titulo-contenido-digital.is-visible {
    display: flex !important;
}

#titulo-contenido-digital.animar-ahora {
    display: flex !important;
    animation: entradaSuaveBrillante 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0s; 
}

/*=====================================================
    GRID DE CONTENIDO DIGITAL (MODO BANNERS HORIZONTALES)
=====================================================*/
.contenido-digital-grid {
    display: flex !important;
    flex-direction: row; /* Apilados uno arriba del otro */
    gap: 25px; /* Pequeño espacio de separación */
    justify-content: flex-start; 
    max-width: 1400px; /* Casi toda la pantalla */
    width: 90% !important;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box !important;
}

/* Tarjeta del Banner Individual */
.digital-banner-card {
    position: relative;
    width: 100%;
    height: 400px; /* Altura tipo Banner */
    cursor: default; /* El cursor es normal, solo puntero en botones */
    overflow: hidden; 
    border-radius: 15px;
    background-color: #000; /* Fondo negro para cuando la imagen oscurezca */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    
    /* Tu animación original */
    opacity: 0;
    animation: entradaElegante 0.8s ease-out forwards;
    
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
    will-change: transform, box-shadow;
}

/* Imagen de fondo del Banner */
.banner-img-bg {
    width: 100%;
    height: 100%; 
    
    /* Mantenemos cover para que rellene todo el hueco del banner */
    object-fit: cover; 
    
    /* ⚡ ESTA ES LA CLAVE: Anclamos la imagen arriba a la derecha. */
    object-position: right top; 
    
    display: block;
    transition: filter 0.5s ease, transform 0.5s ease;
}

/* HOVER: Efecto en la tarjeta */
.digital-banner-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.digital-banner-card:hover .banner-img-bg {
    filter: brightness(0.4) blur(2px); /* Oscurece y desenfoca para resaltar botones */
    transform: scale(1.03); /* Zoom suave */
}

/* Contenedor de Botones (Overlay) */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Centrado total de los botones */
    display: flex !important; 
    justify-content: center;
    align-items: center;
    
    background: rgba(255, 127, 240, 0); /* Invisible al inicio */
    transition: background 0.4s ease;
    z-index: 10;
}

/* Oscurecer al hacer hover */
.digital-banner-card:hover .banner-overlay {
    background: rgba(74, 74, 74, 0.133); 
}

/* ------BOTONES DE LA IMAGEN CONTENIDO DIGITAL------------ */
.banner-buttons-container {
    display: flex;
    flex-direction: column; /* Alineación vertical */
    gap: 15px;              /* Espacio entre botones */
    
    opacity: 0;             /* Ocultos */
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Mostrar botones al hacer hover */
.digital-banner-card:hover .banner-buttons-container {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo de los botones */
.banner-action-btn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
}

/* El "resaltado" al pasar el ratón por el botón */
.banner-action-btn:hover {
    background: #fff;
    color: rgb(22, 22, 22); /* Tu azul corporativo */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* -------CONTENEDOR DE REDES SOCIALES CONTENIDO DIGITAL------- */
.banner-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* Espacio entre iconos */
    margin-top: 40px; /* Separación de los botones de arriba */
    margin-bottom: 0px;
    width: 100%;

    /* ESTADO INICIAL: Solo fundido, sin movimiento */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* MOSTRAR REDES AL HACER HOVER */
.digital-banner-card:hover .banner-social-links {
    opacity: 1;
}

/* Estilo de cada link circular */
.social-icon-link {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon-link:hover {
    transform: scale(1.2); /* Efecto de aumento al pasar el ratón */
}

/* Tamaño de los logotipos */
.social-icon-img {
    width: 32px;  /* Tamaño ideal para botones de redes */
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3)); /* Sombra para que resalten sobre el fondo */
}

/* Ajuste del overlay para que todo quepa bien */
.banner-overlay {
    display: flex;
    flex-direction: column; /* Apila botones arriba y redes abajo */
    justify-content: center;
    align-items: center;
}


/* Ajuste para móviles */
@media (max-width: 768px) {
    .digital-banner-card {
        height: 250px; /* Más bajo en móvil */
    }
    
    .banner-buttons-container {
        flex-direction: column; /* Botones uno bajo el otro */
        gap: 10px;
    }
    
    .banner-action-btn {
        padding: 8px 15px;
        font-size: 11px;
    }
    .banner-social-links {
        gap: 20px;
        margin-top: 25px;
    }
    .social-icon-img {
    width: 25px;  /* Tamaño ideal para botones de redes */
    height: 25px;
    }
}

/* =====================================================
ESTILOS CATALOGOS
===================================================== */

/* 1. EL CONTENEDOR PADRE */
.catalog-section {
    /*background-color: #f6f3f6 !important; /* Color base de la sección */
    background-image: linear-gradient(1deg, #ffffff 2%, #eddbed 40%, #f6f3f6 100%) !important;
    width: 100%;
    padding: 0; /* Quitamos padding superior para que el título pegue arriba */
    padding-bottom: 50px;
    display: none; 
    position: relative;
    /* Eliminamos cualquier rayita con el elemento anterior */
    margin-top: -2px !important; 
    border: none !important;
    z-index: 1006;
}
/* ACTIVACIÓN POR CLASE */
.catalog-section.is-visible {
    display: block !important;
}

/* Cuando la sección es visible, el título pasa a flex */
.catalog-section.is-visible #titulo-catalogos {
    display: flex !important;
}

/*=====================================================
TÍTULO DE CATÁLOGOS
=====================================================*/
#titulo-catalogos {
    background-color: #f6f3f6 !important; /* Tu color de fondo */
    width: 100%;
    justify-content: center;
    align-items: flex-end; 
    text-align: center;
    margin: 0 !important;
    padding: 30px 0 !important; /* Tu padding original */
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 500;
    color: #7c7c7c !important; /* Tu color de texto */
    position: relative;
    z-index: 1006;
    margin-top: -2px !important; /* Sellado perfecto */
    
    display: none; /* Se activa mediante JS con .is-visible */
    opacity: 0;
    transform: translateY(50px);
    will-change: opacity, transform;
}

/* LA CLAVE: Activación fluida igual que el carousel */
#titulo-catalogos.is-visible {
    display: flex !important;
    /* No disparamos la animación aquí, dejamos que el Observador lo haga */
}

#titulo-catalogos.animar-ahora {
    display: flex !important;
    animation: entradaSuaveBrillante 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    /* Quitamos el delay de 0.5s para que al hacer scroll responda al instante */
    animation-delay: 0s; 
}

/* Reutilizamos tu clase de control si fuera necesario */
#titulo-catalogos.hidden-title {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/*=====================================================
GRID DE CATÁLOGOS
=====================================================*/

#div-catalogs.catalog-grid, 
.catalog-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 25px; 
    justify-content: center; 
    max-width: 1600px; 
    width: 100% !important;
    margin: 0 auto;
    padding: 40px 20px; /* Más padding para que la sombra de la fila 1 no se corte */
    box-sizing: border-box !important;
}

/* Ítem Individual - El que tiene la sombra */
.catalog-item {
    position: relative;
    flex: 0 20px 240px;/*si dejo 0 0 240px mantiene el mismo tamaño en todas las tarjetas*/ 
    height: 145px; 
    cursor: pointer;
    
    /* IMPORTANTE: Quitamos overflow:hidden de aquí para que la sombra respire */
    overflow: visible !important; 
    
    /* SOMBRA EN REPOSO: Elegante y sutil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #fff;

    opacity: 0;
    animation: entradaElegante 0.8s ease-out forwards;
    
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
    will-change: transform, box-shadow;
    z-index: 1;
}

/* Contenedor interno para que solo la imagen se recorte */
.catalog-item img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    object-position: top; 
    display: block;
    border-radius: 10px; /* Redondeado igual al padre */
    transition: filter 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.21);
}

/* HOVER: LEVITACIÓN + SOMBRA EXPANDIDA */
.catalog-item:hover {
    transform: translateY(-15px) !important; 
    z-index: 99;
    
    /* SOMBRA EN MOVIMIENTO: Más larga, más difusa y con un toque de azul */
    box-shadow: 0 10px 20px rgba(34, 90, 179, 0.41);
}

.catalog-item:hover img {
    filter: brightness(0.55); 
}

.catalog-item:hover .catalog-name-hover {
    opacity: 1;
    /* BRILLO: Combinamos exterior para el aura y un inset (interior) 
       para que el borde blanco resalte sin necesidad de crecer */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 
                0 0 35px rgba(73, 68, 181, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.5);
    
    background: rgba(255, 255, 255, 0.836);
    
    /* ELIMINAMOS EL SCALE: Para que se mantenga exacto al 100% del ancho */
    transform: translate(-50%, -50%); 
}

/* Estructura base: AJUSTE TOTAL A LOS BORDES */
.catalog-name-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: rgba(255, 255, 255, 0.593);
    color: #0b5288;
    padding: 14px 10px; 
    
    /* CAMBIO CLAVE: Ancho al 100% para tocar los bordes laterales */
    width: 100%; 
    box-sizing: border-box;
    
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    
    /* Quitamos el redondeado lateral para que encaje con la tarjeta cuadrada */
    border-radius: 0; 
    
    opacity: 0;
    pointer-events: none;
    
    /* Transiciones fluidas de brillo y color */
    transition: opacity 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    z-index: 5;
    will-change: opacity, box-shadow;
}

@keyframes entradaElegante {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* AJUSTE MÓVIL */
@media (max-width: 768px) {
    .catalog-item {
        flex: 0 0 calc(50% - 15px); 
        max-width: calc(50% - 15px);
        height: 115px;
    }
}

/*=====================================================
MODAL PDF ESTILO REVISTA
=====================================================*/
.pdf-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(252, 239, 251, 0.563); /* Tu color con transparencia */
    z-index: 400000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px); /* Desenfoque de fondo */
}

.pdf-modal-container {
    width: 95%;
    height: 95%;
    background: white;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    position: relative; /* Para posicionar la cruz */
}

.pdf-modal-header {
    padding: 15px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #eee;
    height: 70px;
    box-sizing: border-box;
}

/* Título con la fuente de tus catálogos */
#pdf-modal-title {
    font-family: 'Montserrat', sans-serif; /* O la que uses en tus títulos */
    font-size: 1.2rem;
    font-weight: 600;
    color: #225ab3ce !important;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Contenedor de acciones (Botón + Cruz) */
.pdf-header-actions {
    display: flex;
    align-items: center;
    gap: 40px; /* Espacio entre botón y cruz */
}

/* Botón de descarga azul elegante */
#btn-download-pdf {
    background-color: #1c73b5;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px; /* Estilo píldora */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 120, 212, 0.2);
    transition: all 0.3s ease;
}

#btn-download-pdf:hover {
    background-color: #005a9e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 120, 212, 0.4);
}

/* Cruz de cierre fina y minimalista */
.close-modal-pdf {
    font-size: 50px;
    font-weight: 100; /* Super fina */
    color: #999;
    cursor: pointer;
    line-height: 0.8;
    transition: all 0.3s ease;
    -webkit-user-select: none; /* Evita selección en Chrome/Safari */
    user-select: none;
    display: inline-block;
}

.close-modal-pdf:hover {
    color: #333;
    transform: scale(1.1);
}

.pdf-viewer-content {
    flex-grow: 1;
    background: #808589; /* Fondo gris oscuro para resaltar el papel */
    display: flex; /* Ayuda a que el embed se comporte mejor */
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.pdf-viewer-content embed {
    flex: 1;
    display: block;
}
.pdf-viewer-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/*=====================================================
FOOTER - LIMPIO Y DINÁMICO
=====================================================*/

#main-content {
    display: flex;
    flex: 1 0 auto; /* Empuja el footer hacia abajo si hay poco contenido */
    flex-direction: column;
    margin-top: 20px !important;
}
#not-found-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.simple-footer {
    width: 100%;
    margin-top: -5px; /* "Succiona" el footer hacia arriba para que no haya grietas */
    line-height: 0;
    font-size: 0;
    position: relative;
    flex-shrink: 0; /* Evita que el footer se comprima */
    background: white; /* Evita transparencias raras */
    
    /* Estado inicial para la transición */
    opacity: 1;
    transform: translateY(0) !important;
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
}

/* Clase que aplicaremos con JS cuando sea visible */
.simple-footer.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.footer-full-img {
    width: 100%;
    height: auto;
    display: block;      /* CLAVE: Quita el margen inferior nativo de las imágenes */
    margin: 0;
    padding: 0;
}

/*=====================================================
ZOOM EN MODAL IMAGEN AMPLIADA:
=====================================================*/
.image-zoom-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El círculo de la lupa (el cristal de aumento) */
#zoom-lens {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-repeat: no-repeat;
    /* 1. Cambiamos el negro por blanco para que si hay algún milímetro de borde, sea discreto */
    background-color: #ffffff4d; 
    /* 2. Asegura que el fondo se pinte desde el borde mismo */
    background-origin: border-box; 
    display: none; 
    pointer-events: none; 
    box-shadow: 0 0 15px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* Asegurar que la imagen del modal no se salga */
.modal-content-image {
    max-width: 85vw;
    max-height: 75vh;
    border-radius: 4px;
    display: block;
    transition: transform 0.2s ease;
}

/*ESTADO ACTIVO: Cuando el zoom está funcionando*/
.modal-content-image.zoom-active {
    /* Lupa azul con el palito (mango) Y el signo menos (-) dentro */
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23184f83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") 10 10, zoom-out;
}

/* Estilo base de las flechas */
.nav-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: transparent;

    color: #1073b5; /* Azul profesional */
    border: 2px solid #1073b5;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 3000; /* Por encima de todo */
    backdrop-filter: blur(4px);
    outline: none;
}

/* Efecto Hover */
.nav-arrow:hover {
    background: #1073b5;
    color: white;
    box-shadow: 0 0 20px rgba(0, 120, 212, 0.6);
    transform: translateY(-50%) scale(1.1);
}

/* Posicionamiento */
.left-arrow { left: 40px; }
.right-arrow { right: 40px; }

/* Ajuste para móviles */
@media (max-width: 768px) {
    .nav-arrow {
        top:240px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        background: rgba(255, 255, 255, 0.8); /* Más opaco en móvil */
    }
    .left-arrow { left: 10px; }
    .right-arrow { right: 10px; }
}

/*=====================================================
MENSAJE DE COOKIES - VERSIÓN CON OVERLAY (RECOMENDADA)
=====================================================*/

/* Overlay que bloquea toda la pantalla */
#cookie-overlay {
    position: fixed;
    inset: 0; /* top:0 left:0 right:0 bottom:0 */
    background: rgba(0, 0, 0, 0.427);
    display: none; /* se activa con JS */
    z-index: 999998;
}

/* Banner */
#cookie-banner {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* oculto por defecto */
    flex-direction: column;
    z-index: 999999; /* encima del overlay */
    background: rgba(0, 0, 0, 0.679);
    color: #ffffff;
    padding: 16px 28px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    border-radius: 12px;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* Botones centrados */
.cookie-buttons {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

#cookie-banner button {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: all 0.3s ease;
}

/* Botón ACEPTAR */
#cookie-accept {
    background-color: #0078D4;
    color: #fff;
}

#cookie-accept:hover {
    background-color: #005a9e;
    transform: translateY(-2px);
}

/* Botón RECHAZAR */
#cookie-reject {
    background-color: #d7d7d7;
    color: #464545;
}

#cookie-reject:hover {
    background-color: #b0b0b0;
    color: #222;
    transform: translateY(-2px);
}



/*=====================================================
MODAL LIFESTYLE - CONFIGURACIÓN FINAL LIMPIA
=====================================================*/

/* 1. Bloqueo total del fondo */
body.modal-open {
    overflow: hidden !important;
}

/* 2. El fondo del modal y animaciones de entrada */
#lifestyle-modal.modal {
    display: flex;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    /*background-image: linear-gradient(1deg, #ffffff 2%, #eddbed 40%, #f6f3f6 100%) !important;*/
    /*background: rgba(75, 75, 85, 0.679);*/
    /*background-image: linear-gradient(1deg, #ffffff 10%, #9799f0f0 40%, #db97c7e8 100%) !important;*/
    background-image: linear-gradient(1deg, #ffffff 10%, #db97c7f4 40%, #9799f0f0 100%) !important;
    backdrop-filter: blur(8px); 
    z-index: 9999; 
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#lifestyle-modal.modal.show {
    opacity: 1;
    visibility: visible;
}

#lifestyle-modal .modal-content {
    background: transparent !important;
    width: 100%;
    max-width: 1600px;
    height: 95vh; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    position: relative;
    box-shadow: none;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

#lifestyle-modal.modal.show .modal-content {
    transform: translateY(0);
}

/* 3. Cabecera Compacta - REPARTO TRIPLE */
.lifestyle-header {
    padding: 0 25px;
    background-color: #000000a9;
    height: 80px;
    display: flex;
    justify-content: space-between; /* Izquierda | Centro | Derecha */
    align-items: center;
    border-radius: 20px; 
    margin: -20px 0px 0px 0px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.lifestyle-header h2 {
    margin: 0;
    font: 400 24px 'Montserrat', sans-serif; 
    color: white;
    
    /* SEPARACIÓN ELEGANTE */
    letter-spacing: 3px;
    text-transform: uppercase;

    /* BRILLO SUTIL (Solo un toque de profundidad) */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.225); 
    color: rgba(255, 255, 255, 0.95);
}

/* 4. Buscador (Centro) */
#sku-filter {
    height: 36px;
    width: 200px;
    padding: 0 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde más fino */
    background: rgba(255, 255, 255, 0.1);    /* Fondo inicial más transparente */
    color: white;
    font-size: 14px;
    outline: none;
    text-align: center;
    margin: 0 !important;
    
    /* TRANSICIÓN: Añadimos transform para el escalado suave */
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform; /* Optimiza la animación */
}

#sku-filter:focus {
    /* EFECTO AGRANDAR: 1.05 es un 5% más grande, lo justo para que se note sin pixelar */
    transform: scale(1.05);
    
    /* CAMBIO DE COLOR DISIMULADO: 
       Subimos la opacidad muy poco (de 0.1 a 0.18) para que el ojo no note el "corte" */
    background: rgba(255, 255, 255, 0.18); 
    border-color: rgba(255, 255, 255, 0.5);
    
    /* Brillo exterior sutil */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

/* 5. Acciones de la Derecha (Botones + X) */
.right-actions {
    display: flex;
    align-items: center;
    gap: 30px; /* Espacio entre los botones y la X de cierre */
    min-width: 200px;
    justify-content: flex-end;
}

.controls {
    display: flex;
    align-items: center;
    gap: 30px; /* SEPARACIÓN ENTRE SONIDO Y DESCARGA TODO */
}

/* 6. Estilo de Botones e Iconos */
#lifestyle-modal button.btn-header-icon, 
#lifestyle-modal button.btn-download-sku,
#toggle-global-mute, 
#download-all-lifestyle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Iconos Header */
.btn-header-icon i {
    color: rgba(252, 252, 252, 0.8) !important;
    font-size: 24px !important;
    transition: all 0.3s ease;
}

.btn-header-icon:hover i { 
    color: #ffffff !important; 
    transform: scale(1.15); 
}

.global-volume-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor relativo para posicionar el tooltip respecto al botón */
.global-volume-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* El Tooltip: Posicionado a la IZQUIERDA del botón */
.volume-tooltip {
    position: absolute;
    right: 125%; /* Lo separa del botón hacia la izquierda */
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Animación de entrada desde la derecha */
    background: #1a1a1a;
    padding: 10px 12px;
    border-radius: 20px; /* Estilo cápsula más moderno */
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    display: flex;
    align-items: center;
}

/* Flechita del tooltip apuntando hacia el BOTÓN (a la derecha) */
.volume-tooltip::after {
    content: "";
    position: absolute;
    left: 100%; /* Sale por el borde derecho del tooltip */
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #1a1a1a;
}

/* Mostrar al hacer hover sobre el wrapper */
.global-volume-wrapper:hover .volume-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Estilo del slider (Barra de volumen) */
#volume-slider {
    cursor: pointer;
    width: 100px; /* Un poco más largo para mayor precisión */
    height: 4px;
    accent-color: #822afe; /* Color azul Lifestyle */
    display: block;
    outline: none;
}

/* Estilo opcional para que el 'thumb' (bolita) combine mejor */
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #00d4ff;
    border-radius: 50%;
    cursor: pointer;
}

/* Iconos Descarga SKU (Circular) */
.btn-download-sku i {
    color: #353535c3 !important;
    font-size: 30px !important;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.btn-download-sku:hover i { 
    color: #020202 !important; 
    transform: translateY(3px); 
}

/* Botón de Cerrar X */
.close-modal-lifestyle {
    cursor: pointer;
    font-size: 35px;
    font-weight: bold;
    line-height: 1;
    color: #e8e8e8d7;
    transition: transform 0.2s ease-out, color 0.2s ease;
    display: flex;
    align-items: center;
}

.close-modal-lifestyle:hover {
    color: #ffffff;
    transform: scale(1.2);
}

/* 7. El contenedor principal (Grid de Packs) */
#lifestyle-container {
    flex: 1; 
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 20px;
    overflow-y: auto !important; 
    max-height: calc(95vh - 80px); 
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    -ms-overflow-style: none; /* IE/Edge */
    will-change: transform; /* Optimiza el scroll */
    backface-visibility: hidden;
    contain: layout;
    content-visibility: auto; /* El navegador no renderiza lo que está fuera de scroll */
}

#lifestyle-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 8. Bloques de packs de SKU (Cards) */
.sku-group-section {
    flex: 0 1 auto !important;
    background-image: linear-gradient(2deg, #ffffffc3 2%, #e7cddd 40%, #f6f3f5af 100%) !important;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    content-visibility: auto; /* El navegador no renderiza lo que está fuera de scroll */
    contain-intrinsic-size: 1px 500px; 
    margin-bottom: 20px;
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* Aplicar el cursor de lupa gris oscuro a las imágenes del Lifestyle */
.digital-item img, 
.sku-group-section img {
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c2c2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") 12 12, zoom-in !important;
}
/* Cursor específico para VÍDEOS en el Lifestyle */
.digital-item video,
.sku-group-section video {
    cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c2c2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='%232c2c2c'%3E%3C/polygon%3E%3C/svg%3E") 12 12, pointer !important;
}

.digital-item video, .digital-item img {
    transform: translateZ(0); /* Forzar aceleración hardware */
}

.sku-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    height: 50px;
    overflow: visible !important; /* VITAL: Permite que el tooltip salga hacia la derecha */
}

.sku-header h3 {
    margin: 0;
    font: 450 1.1rem 'Montserrat', sans-serif;
    color: #302c2ed2;
    margin-bottom: 10px;   
}

/* 9. Galería de imágenes interna */
.media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 
    justify-content: center; 
    padding: 10px 0;
}

.digital-item {
    flex: 0 0 220px;
    height: 290px; 
    background: #f9dbe787; 
    border: 1px solid #feeafbac; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1; /* Esto es clave */
    /* Esto evita que el navegador recalcule el layout en cada scroll */
    contain: size layout style;/
}

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

.digital-item img, 
.digital-item video {
    width: 100%;
    height: 100%;
    max-width: 95%; 
    max-height: 95%; 
    object-fit: contain;
}

/* Espaciado final para el scroll */
#lifestyle-container::after {
    content: "";
    display: block;
    height: 60px;
    width: 100%;
}

#loading-text {
    font-family: 'Montserrat', sans-serif;
    color: #353535 !important; 
    margin-top: 10px !important; 
    font-size: 14px !important; 
    font-weight: 500 !important; 
    letter-spacing: 1px !important; 
    text-transform: uppercase !important;
    text-align: center;
    animation: pulse-loading 1.5s infinite ease-in-out;
}

/* Contenedor del botón (debe tener position relative) */
.download-btn-container {
    position: relative;
    display: inline-block;
}

/* Estilo del Tooltip - Orientación Izquierda */
.sku-tooltip {
    position: absolute;
    right: 120%;     /* Lo situamos a la izquierda del botón */
    top: 75%;
    /* Empieza un poco desplazado a la derecha (translateX positivo) */
    transform: translateY(-50%) translateX(15px); 
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    
    /* Tu tipografía Montserrat */
    font-family: 'Montserrat', sans-serif;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    
    /* Animación fluida */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Estado Hover: Se desliza hacia la izquierda hasta su posición final */
.download-btn-container:hover .sku-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@keyframes pulse-loading {
    0%, 100% { opacity: 0.5; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1); }
}

/* AJUSTE PARA MÓVILES (Pantallas menores de 768px) */
@media (max-width: 768px) {
    /* Hacemos que la cabecera no apriete tanto los elementos */
    .sku-header {
        gap: 10px;
        padding: 0 10px;
    }

    .sku-header h3 {
        font-size: 0.9rem; /* Un poco más pequeño para dejar sitio al botón */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Si el SKU es muy largo, pone puntos suspensivos */
    }

    /* Reposicionamos el tooltip para que no se salga por la izquierda */
    .sku-tooltip {
        right: 0;           /* Lo alineamos al borde derecho del botón */
        left: auto;
        top: -30px;         /* Lo subimos encima del botón en lugar de al lado */
        transform: translateY(10px) translateX(0); /* Animación de abajo a arriba */
        font-size: 10px;    /* Letra más pequeña para el móvil */
        background: rgba(255, 255, 255, 0.9); /* Un fondo ligero para que se lea sobre el degradado */
        padding: 4px 8px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .download-btn-container:hover .sku-tooltip {
        transform: translateY(0) translateX(0); /* Posición final */
    }

    /* Ajustamos el tamaño de las tarjetas en móvil para que quepan 2 por fila o se vean mejor */
    .digital-item {
        flex: 0 0 45%;      /* Ocupa casi la mitad de la pantalla */
        height: 180px;      /* Altura reducida para móvil */
    }
}

/*=====================================================
CONTENEDOR DE ESTRELLAS - FLOTANTES Y PARPADEANTES
=====================================================*/
#stars-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none; /* Importante: para poder clicar botones debajo */
    z-index: 9998; /* Justo debajo del modal o por encima del fondo */
    overflow: hidden;
}

/* La estrella individual */

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    /* Resplandor multicapa: núcleo blanco + halo azulado */
    box-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px rgba(0, 120, 212, 0.4);
    
    /* Combinamos dos animaciones: una para subir y otra para parpadear */
    animation: 
        float-up 6s ease-in-out infinite,
        twinkle 1s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Animación 1: Movimiento y aparición */
@keyframes float-up {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(-20px) scale(1.2);
    }
    85% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-120px) scale(0);
        opacity: 0;
    }
}

/* Animación 2: Parpadeo de brillo (Diamond Effect) */
@keyframes twinkle {
    from { 
        filter: brightness(1);
        box-shadow: 0 0 10px #fff;
    }
    to { 
        filter: brightness(1.8);
        box-shadow: 0 0 20px #fff, 0 0 30px rgba(0, 120, 212, 0.6);
    }
}

/*=====================================================
MODAL VIDEO - ESTILO CINEMATICO Y FUNCIONAL
=====================================================*/

/* Contenedor principal del modal */
.video-modal-overlay {
    display: none; /* Se cambia a flex desde JS */
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.173); /* Fondo oscuro semitransparente */
    -webkit-backdrop-filter: blur(5px); /* Soporte para Safari */
    backdrop-filter: blur(10px); /* DESENFOQUE de lo que hay detrás */
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* Caja que contiene el video y la info */
.video-container-box {
    width: 90%;
    max-width: 1100px; /* Tamaño máximo elegante */
    max-height: 90vh;
    position: relative;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* El video dentro del contenedor */
#player-lifestyle {
    width: 100%;
    height: auto;
    max-height: 80vh; /* Deja espacio para el texto de abajo */
    display: block;
    outline: none;
}

/* Botón cerrar (X) */
.close-video {
    position: absolute;
    top: 20px;
    right: 30px;
    color: rgb(237, 237, 237);
    font-size: 50px;
    font-weight: 300; /* Más fino para que sea elegante */
    cursor: pointer;
    z-index: 1000001;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
}

.close-video:hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* Pie de video (SKU/Ref) */
.video-footer-info {
    color: white;
    padding: 15px;
    text-align: center;
    background: rgba(20, 20, 20, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
}



/*=====================================================
MENSAJE CONFIRMACIÓN DESCARGA TODO EL CONTENIDO LIFESTYLE
=====================================================*/
/* Overlay con fondo desenfocado */
.lifestyle-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.274); /* Fondo oscuro */
    backdrop-filter: blur(8px); /* Efecto Blur */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

/* Caja del mensaje */
.lifestyle-confirm-box {
    background: #111111e0; /* Negro puro o casi negro */
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #333;
    text-align: center;
    color: white;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.lifestyle-confirm-box p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Contenedor de botones */
.lifestyle-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Botones y Hovers */
.btn-lifestyle-confirm, .btn-lifestyle-cancel {
    padding: 10px 25px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

.btn-lifestyle-confirm {
    background-color: #ffffff;
    color: #000000;
}

.btn-lifestyle-confirm:hover {
    background-color: #cccccc;
    transform: translateY(-2px);
}

.btn-lifestyle-cancel {
    background-color: #222;
    color: #ffffff;
    border: 1px solid #444;
}

.btn-lifestyle-cancel:hover {
    background-color: #333;
    border-color: #666;
    transform: translateY(-2px);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/*=====================================================
    MODAL LOGOS & BANNERS (BRAND ASSETS) - ESTILOS FINALES
=====================================================*/

/* Contenedor oscuro de fondo */
.modal-standalone {
    position: fixed; 
    z-index: 9999; 
    left: 0; top: 0; 
    width: 100%; height: 100%;
    background-color: transparent; /* Mantenemos tu transparencia */
    display: flex; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(5px); /* Tu efecto de desenfoque */
}

/* Caja blanca del modal */
.modal-content-logos {
    background: #f4f4f4; 
    width: 95%; 
    max-width: 1200px; 
    height: 90vh;
    border-radius: 20px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* Cabecera del modal */
.modal-header-logos {
    padding: 15px 25px; 
    background: #fff; 
    border-bottom: 1px solid #ddd;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.modal-header-logos h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: #005a9ebd;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

/* Contenedor de acciones en el header (Nuevo) */
.header-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Área de scroll con las imágenes */
.logos-grid {
    flex: 1; 
    padding: 20px; 
    overflow-y: auto;
    display: flex; 
    flex-direction: column; 
    gap: 25px; 
}

/* Cada tarjeta de imagen */
.logo-item {
    background: #fff; 
    border-radius: 12px; 
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
}

/* Contenedor gris suave para que el logo resalte */
.logo-image-wrapper {
    width: 100%;
    background: #fdfdfd; 
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-item img {
    max-width: 100%; 
    max-height: 400px; 
    height: auto; 
    display: block;
    object-fit: contain;
}

/* Barra inferior de la tarjeta */
.logo-info {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}

.asset-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #5d5d5db4;
}

/* BOTÓN DESCARGAR TODO */
.btn-download-all {
    background-color: #1c73b5e8;
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 25px; /* Redondeado como tus otros botones */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(28, 115, 181, 0.2);
}

.btn-download-all:hover {
    background-color: rgb(18, 80, 119)e8;
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(20, 90, 134, 0.3);
}

/* BOTÓN DESCARGAR INDIVIDUAL (Tu azul original) */ 
.btn-download-single {
    background: #1c73b5;
    color: #fff; 
    border: none; 
    padding: 8px 18px;
    border-radius: 25px; 
    cursor: pointer; 
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-download-single:hover { 
    background: #005a9e; 
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 120, 212, 0.4);
}

/* Botón cerrar modal */
.close-logos {
    font-size: 32px; /* Un poco más grande para mejor click */
    font-weight: bold;
    cursor: pointer;
    color: #999;
    transition: 0.2s;
    line-height: 1;
}
/* Contenedor relativo para el botón de logos */
.logo-download-container {
    position: relative;
    display: inline-block;
}

/* Estilo del Tooltip de Logos */
.logo-tooltip {
    position: absolute;
    right: 130%; /* Aparece a la izquierda del botón */
    top: 60%;
    transform: translateY(-50%) translateX(15px); /* Empieza un poco desplazado a la derecha */
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    
    /* Tu tipografía y estilo */
    font-family: 'Montserrat', sans-serif;
    color: #005a9e;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 4px;
    
    /* Animación fluida */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
}

/* Estado Hover: Se desliza hacia su posición final */
.logo-download-container:hover .logo-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Ajuste para que el botón no tenga texto si solo quieres el icono */
.btn-download-single {
    width: 40px;      /* Hacemos el botón circular o cuadrado para el icono */
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-logos:hover { color: #333; }

/* AJUSTE MÓVIL */
@media (max-width: 768px) {
    /* 1. Forzamos que el header sea una fila para que el título y la X compartan línea */
    .modal-header-logos {
        flex-direction: row !important; 
        justify-content: space-between; /* Empuja el título a la izquierda y la X a la derecha */
        align-items: center;
        padding: 15px 20px;
    }

    /* 2. El título se ajusta para no pisar la X */
    .modal-header-logos h2 {
        font-size: 1rem;
        text-align: left;
        max-width: 85%; /* Deja espacio para la cruz */
    }

    /* 3. Ocultamos el botón de descargar todo */
    .btn-download-all {
        display: none !important;
    }

    /* 4. El contenedor de la X se mantiene a la derecha */
    .header-actions-wrapper {
        width: auto; 
        justify-content: flex-end;
    }

    /* 5. Tooltip y ajustes de imagen que ya tenías */
    .logo-tooltip {
        right: 0;
        top: -35px;
        transform: translateY(10px);
        background: rgba(255, 255, 255, 1); /* Más opaco en móvil para leer mejor */
        border: 1px solid #ddd;
    }
    
    .logo-download-container:hover .logo-tooltip {
        transform: translateY(0);
    }

    .logo-item img {
        max-height: 300px; /* Un poco más pequeño para ahorrar scroll en móvil */
    }
}


/*=====================================================
ANIMACIONES
=====================================================*/

@keyframes carouselEntrance {
    from {
        opacity: 0;
        transform: translateY(15px); /* Pequeño desplazamiento hacia arriba */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes zoomAnim {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes scaleIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
@keyframes errorPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollInfinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes floatAlive {
    0% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(1deg); }
    66% { transform: translateY(4px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
@keyframes shakeAlive {
    0% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-0.5px, 0.5px) rotate(-0.2deg); }
    40% { transform: translate(-0.5px, -0.5px) rotate(0.2deg); }
    60% { transform: translate(0.5px, 0.5px) rotate(0deg); }
    80% { transform: translate(0.5px, -0.5px) rotate(-0.2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Empieza 30px más abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*=====================================================
RESPONSIVE: CORRECCIÓN TOTAL 100%
=====================================================
*/
@media (max-width: 768px) {
    /* Ajuste del cuerpo: Sincronizado con Header de 60px */
    body { 
        padding-top: 60px !important; 
    }
    
    /* Header Móvil: Evita solapamientos */
    .header {
        height: 60px !important;
        padding: 0 10px !important;
        grid-template-columns: 1fr 2fr 1fr !important; /* Más espacio al logo central */
    }

    .header-social {
        gap: 10px !important;
    }

    .header-social a {
        font-size: 16px !important;
    }

    .header-logo {
        height: 30px !important; /* Logo un poco más pequeño para respirar */
    }

    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    
    /* Banner Gallery: Sellado total 100% */
    .gallery-banner { 
        height: 110px !important; /* Aumentamos un pelín para que el texto respire */
        margin-top: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover !important;
        background-position: center !important;
        width: 100% !important;
        overflow: hidden; /* Evita que cualquier borde de la imagen asome */
    }

    .banner-overlay-box {
        width: 100% !important; 
        height: 100% !important; /* Obligatorio para cubrir de arriba a abajo */
        margin: 0 !important;   /* Eliminamos cualquier margen que deje ver la imagen */
        padding: 0 !important;  /* Quitamos el padding para que el fondo blanco toque los bordes */
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* Fondo blanco con opacidad 0.9 */
        background-color: rgba(255, 255, 255, 0.804) !important;
        
        /* Limpieza de efectos anteriores */
        -webkit-mask-image: none !important;
        mask-image: none !important;
        clip-path: none !important;
        border: none !important;
    }

    #gallery-title-main { 
        font-size: 30px !important; 
        color: #2556a5 !important; 
        /*font-weight: bold;*/
        text-align: center;
        margin: 0 !important;
        line-height: 1.2;

        font-family: 'Montserrat', sans-serif;
        letter-spacing: 2px;      /* Espaciado entre letras para toque artístico */
        font-weight: 400; 
    }

    .banner-divider {
        width: 150px !important; 
        height: 0.8px;
        background-color: #2556a5 !important;
        margin: 8px auto !important;
    }

    #gallery-subtitle { 
        font-size: 14px !important; 
        color: #2556a5 !important; 
        text-align: center;
        margin: 0 !important;
        padding-bottom: 5px; /* Pequeño margen interno inferior */

        font-family: 'Montserrat', sans-serif;
        letter-spacing: 1px;      /* Espaciado entre letras para toque artístico */
        font-weight: 400; 
    }
    /* Buscador y Botones: Optimización táctil */
    .search-banner {
        flex-direction: column !important; 
        padding: 15px !important;
        gap: 10px !important;
        background-color: #e4f0ff;
        border-bottom: 1px solid #d1d9e0;
    }

    .search-container {
        width: 100% !important;
        margin: 0 !important;
        order: 1;
    }
    #sku-search {
        width: 100% !important;
        height: 45px !important; 
        font-size: 14px !important; 
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    .input-container, .download-all {
        width: 100% !important;
        order: 2;
    }

    .download-all, .input-container label { 
        width: 100% !important; 
        height: 40px !important;
        font-size: 14px !important;
    }
    /* Tooltip de Excel: Centrado para que no desborde */
    .excel-tooltip {
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        width: 200px;
        z-index: 30000;
    }
    /* Galería: Rejilla de 2 productos por fila */
    .gallery {
        background-color: #ffffff !important;
        margin-left: calc(-50vw + 50%) !important;
        /* Cambiamos min-height a 0 para que no empuje en el menú */
        min-height: 0 !important; 
        display: flex !important;
        flex-wrap: wrap !important;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; 
        gap: 15px !important;
        padding: 0px 15px !important; /* Empezamos en 0 */
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        z-index: 2;
        /* Solo crece si hay items dentro */
        flex-grow: 0 !important; 
        box-shadow: 0 1000px 0 1000px #ffffff !important;
        clip-path: inset(0 -100% -1000px -100%);
        padding-top: 50px;
    }

    /* Si la galería tiene contenido, entonces sí le damos padding */
    .gallery:not(:empty) {
        padding: 10px 15px 40px 15px !important;
        min-height: 50vh !important; /* Un mínimo razonable solo cuando hay productos */
    }

    .item {
        /* Reset total de anchos previos */
        width: 100% !important;
        max-width: 200px !important; /* Evita que crezcan demasiado en horizontal */
        min-width: 140px !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;        
        /* Evitar solapamiento de contenido interno */
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 120, 212, 0.204);
        flex: 0 1 160px !important; /* No crece, puede encoger, base de 160px */
    }
    
    #titulo-carousel {
        font-size: 22px !important; 
        padding: 20px 20px 15px 20px !important; 
        min-height: 60px;
        letter-spacing: 0.5px;
        box-sizing: border-box; 
    }
    #titulo-catalogos {
        font-size: 22px !important; 
        padding: 30px 0 30px 0 !important;
        min-height: 60px;
        letter-spacing: 0.5px;
        box-sizing: border-box; 
    }
    #titulo-contenido-digital {
        font-size: 22px !important; 
        padding: 30px 0 30px 0 !important;
        min-height: 60px;
        letter-spacing: 0.5px;
        box-sizing: border-box; 
    }
    #main-content {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important; 
        position: relative !important;
        z-index: 2 !important;
        padding: 0 !important;
        background-color: #ffffff !important;
        overflow: visible !important; /* Permite que el contenido fluya sin restricciones */
}

    /* 2. LA SECCIÓN DE CATÁLOGOS (EL COLOR DEL DIV SUPERIOR) */
    .catalog-section {
        background-color: #f6f3f6 !important;
        display: none; /* Se activa con JS */
        /* Aquí creamos el margen visual que querías, pero con color */
        padding-top: 10px !important; 
        padding-bottom: 0px !important;
        /* Eliminamos márgenes externos que causan el hueco blanco */
        margin-bottom: 0 !important; 
        border: none !important;
    }

    /* 3. EL GRID DE CATÁLOGOS */
    #div-catalogs.catalog-grid {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .footer-full-img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #image-modal {
        padding: 10px !important;
    }

    #modal-caption {
        display: flex !important;
        flex-direction: column !important; /* Apila SKU sobre EAN */
        align-items: center !important;    /* Centra ambos horizontalmente */
        justify-content: center !important;
        gap: 8px !important;               /* Espacio vertical entre ellos */
        padding: 20px 10px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        width: 100% !important;
        color: #444 !important;
    }
    .modal-separator {
        display: none !important;
    }

    /* Ocultamos la barra vertical "|" que pusimos en el JS */
    .modal-separator {
        display: none !important;
    }

    /* Estilos individuales para que se vean jerarquizados */
    .modal-sku {
        font-weight: 600 !important;
        color: #444 !important;
        display: block !important;
    }

    .modal-ean {
        font-weight: 400 !important;
        color: #444 !important;
        font-size: 0.9em !important;
        display: block !important;
    }
    .not-found-message {
        background-color: #fef1f1d7 !important;
        color: #8a2a2a !important;
        
        /* AJUSTE DE NIVEL: Sincronizado con el inicio de la galería */
        padding: 30px 20px !important; 
        margin-top: 0px !important;
        
        text-align: center;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
        z-index: 5 !important;
        
        border-bottom: 1px solid #ffcdcdee !important;
        animation: slideDown 0.4s ease-out;
    }
    .not-found-message button {
        margin-top: 15px;
        padding: 6px 25px;
        cursor: pointer;
        border: 1px solid #797979;   /* Borde fino */
        border-radius: 20px;
        background: #444 !important;      /* Fondo oscuro para estilo minimalista */
        color: #fff !important;
        font-size: 11px;
        text-transform: uppercase;   /* Texto en mayúsculas*/
        letter-spacing: 1px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    /* footer es .footer-full-img o .simple-footer, aplícalo aquí */
    .simple-footer, .footer-full-img {
        position: relative !important;
        z-index: 20 !important; /* Por encima de la sombra de 2000px */
        background-color: #ffffff !important;
        margin-top: -1px !important; /* Sellado perfecto */
    }

/*=====================================================
MODAL MEDIA LIFESTYLE
=====================================================*/

/* Ocultamos el botón de descarga y el control de volumen */
    .right-actions {
        display: none !important;
    }

.lifestyle-header {
        display: flex;
        flex-wrap: wrap; /* Permite que el buscador baje a la siguiente línea */
        align-items: center;
        justify-content: space-between;
        padding: 12px 15px;
        gap: 10px 0; /* Espacio vertical entre filas, no horizontal */
        height: auto; 
    }

    /* 2. Título: Ocupa el espacio de la izquierda arriba */
    .lifestyle-header .modal-title {
        font-size: 1.1rem;
        margin: 0;
        flex: 1; /* Coge el espacio disponible a la izquierda */
        order: 1;
    }

    /* 3. Acciones (Botones + X): Se quedan arriba a la derecha */
    .right-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        order: 2; /* Se mantiene arriba junto al título */
    }

    /* 4. EL BUSCADOR: Debajo del título, ancho completo */
    #sku-filter {
        order: 3; /* Obligamos a que sea el tercer elemento (abajo) */
        width: 100%; /* Ahora sí puede ser ancho sin romper nada */
        flex-basis: 100%; /* Refuerza que ocupe toda la fila inferior */
        margin-top: 5px;
        height: 38px;
        box-sizing: border-box; /* Evita que el padding lo ensanche de más */
        font-size: 16px; /* Evita zoom molesto en iPhone */
    }

    .btn-header-icon {
        font-size: 1.1rem;
        padding: 5px;
    }

    /* La X de cerrar la hacemos parte del flujo para que no flote */
    .close-modal-lifestyle {
        font-size: 22px;
        margin-left: 5px;
        line-height: 1;
    }

    /* Ajuste del Tooltip para que no se salga de la pantalla en horizontal */
    .volume-tooltip {
        right: 0; 
        bottom: 110%;
        transform: translateY(5px);
    }

        .global-volume-wrapper:active .volume-tooltip,
        .global-volume-wrapper:hover .volume-tooltip {
            transform: translateY(0);
        }
        
        /* La X de cerrar siempre arriba a la derecha */
        .close-modal-lifestyle {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 28px;
        }
    
    @media screen and (max-height: 500px) and (orientation: landscape) {
        #carousel-container {
            /* Evita que el carrusel use "position: sticky" o "fixed" si lo tenías */
            position: relative !important; 
            top: 0 !important;
            
            /* Ajusta la altura para que no ocupe toda la pantalla y permita scroll */
            max-height: none !important; 
            overflow: visible !important;
        }

        /* Si el título se vuelve gigante en horizontal, lo ajustamos */
        #titulo-carousel {
            min-height: 40px !important;
            font-size: 16px !important;
            padding: 20px 0 !important;
        }
        .gallery {
        /* En horizontal, permitimos más columnas pero más pequeñas */
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px 15px 40px 15px !important;
        justify-content: center !important;
        background-color: #ffffff !important; /* Fuerza el fondo blanco tras los productos */
        min-height: 100vh; /* Se asegura de cubrir toda la pantalla aunque haya pocos productos */
        position: relative;
        z-index: 2; /* Se pone por encima del gris del main-content */
        }
        .item {
        max-width: 160px !important; /* Ajuste más apretado para el modo apaisado */
        box-shadow: 0 10px 25px rgba(0, 120, 212, 0.204)
        }
        .item img {
            max-height: 100px !important; /* Imágenes más bajas para que quepan filas */
            object-fit: contain !important;
        }
    }
}