/* ================================================================
   HUBBDI LANDING PAGES V2.0 - SISTEMA MEJORADO CON ANIMACIONES
   ================================================================
   
   Sistema de estilos mejorado para landing pages con:
   - Container principal más grande
   - Animaciones mejoradas para botones e imágenes
   - Mejores estilos para todos los elementos de landing
   - Variables CSS para consistencia
   - Responsive design optimizado
   
   ================================================================ */

/* ===== VARIABLES CSS GLOBALES ===== */
:root {
    /* Colores principales (heredados del sistema) */
    --lp-primary: var(--main-color, #2563eb);
    --lp-secondary: var(--main-color2, #3b82f6);
    --lp-accent: var(--main-color3, #1d4ed8);
    
    /* Nuevas variables para landing pages */
    --lp-container-width: 1400px; /* Aumentado de 1200px */
    --lp-container-padding: 20px;
    --lp-border-radius: 8px;
    --lp-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --lp-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.15);
    --lp-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --lp-animation-duration: 0.6s;
    
    /* Tipografía */
    --lp-font-family: var(--main-font, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    --lp-line-height: 1.6;
    
    /* Espaciado */
    --lp-section-spacing: 3rem;
    --lp-element-spacing: 1.5rem;
}

/* ===== CONTAINER PRINCIPAL MEJORADO ===== */
.container {
    max-width: var(--lp-container-width) !important;
    padding-left: var(--lp-container-padding) !important;
    padding-right: var(--lp-container-padding) !important;
    margin: 0 auto !important;
}

/* ===== ELEMENTOS DE TEXTO MEJORADOS ===== */
.textelement {
    transition: var(--lp-transition);
    animation: fadeInUp var(--lp-animation-duration) ease-out;
}

.textelement:hover {
    transform: translateY(-2px);
}

/* ===== BOTONES MEJORADOS CON ANIMACIONES ===== */
.btn.button.textelement,
.btn.textelement {
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: var(--lp-border-radius) !important;
    box-shadow: var(--lp-shadow);
    transition: var(--lp-transition);
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    z-index: 1;
}

.btn.button.textelement::before,
.btn.textelement::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    z-index: -1;
}

.btn.button.textelement:hover::before,
.btn.textelement:hover::before {
    left: 100%;
}

.btn.button.textelement:hover,
.btn.textelement:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--lp-shadow-hover);
}

.btn.button.textelement:active,
.btn.textelement:active {
    transform: translateY(-1px) scale(0.98);
}

/* Animación de pulso para botones destacados */
.btn.button.textelement.btn-primary,
.btn.textelement.btn-primary {
    animation: buttonPulse 2s infinite;
}

@keyframes buttonPulse {
    0%, 100% { 
        box-shadow: var(--lp-shadow);
    }
    50% { 
        box-shadow: var(--lp-shadow-hover), 0 0 0 4px rgba(37, 99, 235, 0.2);
    }
}

/* ===== IMÁGENES MEJORADAS ===== */
.textelement img,
img.lazyload {
    border-radius: var(--lp-border-radius);
    transition: var(--lp-transition);
    box-shadow: var(--lp-shadow);
}

.textelement img:hover,
img.lazyload:hover {
    transform: scale(1.05);
    box-shadow: var(--lp-shadow-hover);
}

/* Efecto de zoom para imágenes en hover */
.image-container {
    overflow: hidden;
    border-radius: var(--lp-border-radius);
    box-shadow: var(--lp-shadow);
}

.image-container img {
    transition: transform 0.5s ease;
    /* width: 100%; */
    height: auto;
}

.image-container:hover img {
    transform: scale(1.1);
}

/* ===== FORMULARIOS MEJORADOS ===== */
.landingreglead {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-border-radius);
    padding: 2rem;
    box-shadow: var(--lp-shadow);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flow-root;
}

.landingreglead .form-control {
    border-radius: var(--lp-border-radius);
    border: 2px solid #e5e7eb;
    transition: var(--lp-transition);
    padding: 12px 16px;
    font-size: 16px;
}

.landingreglead .form-control:focus {
    border-color: var(--lp-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.landingreglead .form-control:hover {
    border-color: var(--lp-secondary);
}

/* ===== CONTADORES Y TEMPORIZADORES ===== */
.timer-circle,
.countdown {
    animation: fadeInScale var(--lp-animation-duration) ease-out;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== ACORDEONES FAQ ===== */
.accordion.clean .ac-item {
    border-radius: var(--lp-border-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    transition: var(--lp-transition);
}

.accordion.clean .ac-item:hover {
    box-shadow: var(--lp-shadow-hover);
}

.accordion.clean .ac-title {
    padding: 1.5rem;
    cursor: pointer;
    position: relative;
    transition: var(--lp-transition);
}

.accordion.clean .ac-title::after {
    content: '\f067'; /* FontAwesome plus icon */
    font-family: 'FontAwesome';
    position: absolute;
    right: 1.5rem;
    transition: var(--lp-transition);
}

.accordion.clean .ac-item.active .ac-title::after {
    content: '\f068'; /* FontAwesome minus icon */
    transform: rotate(180deg);
}

.accordion.clean .ac-content {
    padding: 0 1.5rem 1.5rem;
    transition: var(--lp-transition);
}

/* ===== TESTIMONIOS Y PERFILES ===== */
.testimonial,
.speaker-profile {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-border-radius);
    padding: 2rem;
    box-shadow: var(--lp-shadow);
    transition: var(--lp-transition);
    position: relative;
    overflow: hidden;
}

.testimonial::before,
.speaker-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--lp-primary), var(--lp-secondary));
}

.testimonial:hover,
.speaker-profile:hover {
    transform: translateY(-5px);
    box-shadow: var(--lp-shadow-hover);
}

/* ===== VIDEOS MEJORADOS ===== */
.video-container {
    position: relative;
    border-radius: var(--lp-border-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    transition: var(--lp-transition);
}

.video-container:hover {
    box-shadow: var(--lp-shadow-hover);
}

.videoytusers,
.videoyttimer {
    padding: 0.75rem 1rem !important;
    color: white !important;
    font-weight: 600;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.videoytusers i,
.videoyttimer i {
    font-size: 1.2em;
}

/* Barra de progreso de video mejorada */
.myProgressBar {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    margin: 1rem 0;
}

.myBar {
    height: 100%;
    background: linear-gradient(90deg, var(--lp-primary), var(--lp-secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}

.myBar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

/* ===== QUIZZES INTERACTIVOS ===== */
.quizzbox {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-border-radius);
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: var(--lp-shadow);
    border: 2px solid transparent;
    transition: var(--lp-transition);
}

.quizzbox:hover {
    border-color: var(--lp-primary);
    box-shadow: var(--lp-shadow-hover);
}

.quizzbox .form-control {
    border-radius: var(--lp-border-radius);
    transition: var(--lp-transition);
}

/* ===== SLIDERS MEJORADOS ===== */
/* Fix para evitar solapamiento de carouseles con contenido siguiente */
.owl-carousel {
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 2rem !important;
    /* Remover altura máxima fija para permitir crecimiento dinámico */
    height: auto !important;
    min-height: 200px !important;
}

.owl-carousel .owl-stage-outer {
    overflow: hidden !important;
    position: relative !important;
    /* Permitir altura automática */
    height: auto !important;
    /* ANTI-DRIFT: Control de overflow horizontal */
    width: 100% !important;
}

.owl-carousel .owl-stage {
    position: relative !important;
    -ms-touch-action: pan-Y !important;
    touch-action: manipulation !important;
    transition: all 0.3s ease !important;
    /* Alinear verticalmente pero permitir altura automática */
    display: flex !important;
    align-items: stretch !important; /* Cambiar de center a stretch */
    height: auto !important;
    /* ANTI-DRIFT: Controles de posicionamiento */
    will-change: transform !important;
    backface-visibility: hidden !important;
}

.owl-carousel .owl-item {
    position: relative !important;
    min-height: 1px !important;
    float: left !important;
    backface-visibility: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: var(--lp-transition);
    /* Permitir que el item crezca con su contenido */
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    height: auto !important;
}

.owl-carousel .owl-item:hover {
    transform: scale(1.02);
}

.owl-carousel .owl-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    /* Remover altura máxima fija para mostrar imagen completa */
    max-height: none !important;
    /* Usar contain para mostrar la imagen completa sin recortar */
    object-fit: contain !important;
    object-position: center !important;
    /* Altura mínima solo como fallback */
    min-height: 150px !important;
}

.owl-carousel .owl-item > div {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Permitir crecimiento automático */
    height: auto !important;
    min-height: 200px !important;
    /* Remover altura máxima */
}

.owl-carousel .owl-item a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}

/* Contenedor del carousel específico para landing pages */
.product-image {
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
    /* Permitir altura automática */
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix para divs que contienen carouseles */
div[id^="detele"] {
    position: relative !important;
    overflow: visible !important;
    z-index: auto !important;
    margin-bottom: 1rem !important;
}

/* Clearfix mejorado para elementos después del carousel */
.row.clearfix {
    clear: both !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}

.row.clearfix::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.owl-carousel .owl-nav button {
    background: var(--lp-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--lp-transition) !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

.owl-carousel .owl-nav .owl-prev {
    left: 10px !important;
}

.owl-carousel .owl-nav .owl-next {
    right: 10px !important;
}

.owl-carousel .owl-nav button:hover {
    background: var(--lp-secondary) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.owl-carousel .owl-dots {
    position: relative !important;
    text-align: center !important;
    margin-top: 1rem !important;
    z-index: 10 !important;
}

.owl-carousel .owl-dots .owl-dot {
    background: rgba(37, 99, 235, 0.3) !important;
    border-radius: 50% !important;
    transition: var(--lp-transition) !important;
    margin: 0 5px !important;
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
}

.owl-carousel .owl-dots .owl-dot.active {
    background: var(--lp-primary) !important;
}

/* ===== BARRAS DE PROGRESO ===== */
.progress-bar-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-border-radius);
    padding: 1.5rem;
    box-shadow: var(--lp-shadow);
    margin: 1rem 0;
}

.progress-bar {
    height: 20px;
    background: #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--lp-primary), var(--lp-secondary));
    border-radius: 10px;
    transition: width 1s ease-in-out;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShine 2s infinite;
}

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

/* ===== WIDGETS Y EMBEDS ===== */
.widget-container {
    border-radius: var(--lp-border-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    transition: var(--lp-transition);
}

.widget-container:hover {
    box-shadow: var(--lp-shadow-hover);
}

/* ===== MAPAS ===== */
.map-container {
    border-radius: var(--lp-border-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    transition: var(--lp-transition);
}

.map-container:hover {
    box-shadow: var(--lp-shadow-hover);
}

/* ===== COMENTARIOS DE FACEBOOK ===== */
.fb-comments {
    border-radius: var(--lp-border-radius);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}

/* ===== ANIMACIONES DE ENTRADA ===== */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Clases de animación que se pueden aplicar */
.animate-fade-in-up { animation: fadeInUp var(--lp-animation-duration) ease-out; }
.animate-fade-in-left { animation: fadeInLeft var(--lp-animation-duration) ease-out; }
.animate-fade-in-right { animation: fadeInRight var(--lp-animation-duration) ease-out; }
.animate-fade-in-down { animation: fadeInDown var(--lp-animation-duration) ease-out; }
.animate-zoom-in { animation: zoomIn var(--lp-animation-duration) ease-out; }

/* Delays para animaciones secuenciales */
.animate-delay-1 { animation-delay: 0.2s; }
.animate-delay-2 { animation-delay: 0.4s; }
.animate-delay-3 { animation-delay: 0.6s; }
.animate-delay-4 { animation-delay: 0.8s; }
.animate-delay-5 { animation-delay: 1s; }

/* ===== RESPONSIVE DESIGN MEJORADO ===== */
@media (max-width: 1400px) {
    .container {
        max-width: 1200px !important;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px !important;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    :root {
        --lp-section-spacing: 2rem;
        --lp-element-spacing: 1rem;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .btn.button.textelement,
    .btn.textelement {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .landingreglead {
        padding: 1.5rem;
    }
    
    :root {
        --lp-section-spacing: 1.5rem;
        --lp-element-spacing: 0.75rem;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .testimonial,
    .speaker-profile,
    .quizzbox {
        padding: 1rem;
    }
    
    :root {
        --lp-section-spacing: 1rem;
        --lp-element-spacing: 0.5rem;
    }
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */
.btn:focus,
.form-control:focus {
    outline: 2px solid var(--lp-primary);
    outline-offset: 2px;
}

/* Reducir animaciones para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== UTILIDADES ===== */
.lp-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lp-gradient-bg {
    background: linear-gradient(135deg, var(--lp-primary), var(--lp-secondary));
}

.lp-text-gradient {
    background: linear-gradient(135deg, var(--lp-primary), var(--lp-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-shadow { box-shadow: var(--lp-shadow); }
.lp-shadow-hover { box-shadow: var(--lp-shadow-hover); }

/* ===== LOADING STATES ===== */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== FIX ADICIONAL PARA CAROUSELES Y SOLAPAMIENTO ===== */
/* Asegurar que elementos dinámicos creados por JS no causen problemas */
.clearfix-after-carousel {
    clear: both !important;
    height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: hidden !important;
}

/* Fix para contenedores de landing que contienen carouseles */
.container .row.clearfix {
    position: relative !important;
    z-index: auto !important;
}

.container .row.clearfix + .row.clearfix {
    margin-top: 2rem !important;
}

/* Prevenir que imágenes en carouseles causen overflow */
.owl-carousel img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    /* Usar contain para mostrar imagen completa sin recortar */
    object-fit: contain !important;
    object-position: center !important;
    /* Altura mínima solo como fallback, no máxima */
    min-height: 150px !important;
}

/* Fix específico para imágenes en carouseles que se ven cortadas */
.owl-carousel .owl-item img {
    /* Forzar que las imágenes muestren su contenido completo */
    min-height: 150px !important;
    width: 100% !important;
    height: auto !important;
    /* IMPORTANTE: usar contain en lugar de cover para no recortar */
    object-fit: contain !important;
    object-position: center !important;
    /* Permitir que la imagen crezca a su tamaño natural */
    max-height: none !important;
    flex-shrink: 0 !important;
    background: #f8f9fa !important; /* Fondo para espacios vacíos */
}

/* IMPORTANTE: Respetar las clases de visibilidad de Bootstrap */
.owl-carousel .owl-item img.hidden-xs,
.owl-carousel .owl-item img.hidden-sm {
    /* En móvil (xs y sm), ocultar estas imágenes */
    display: none !important;
}

.owl-carousel .owl-item img.hidden-lg,
.owl-carousel .owl-item img.hidden-md {
    /* En desktop (lg y md), ocultar estas imágenes */
    display: none !important;
}

/* Responsive: Mostrar imágenes correctas según el dispositivo */
@media (min-width: 992px) {
    /* Desktop: mostrar solo imágenes sin hidden-lg/hidden-md */
    .owl-carousel .owl-item img.hidden-xs,
    .owl-carousel .owl-item img.hidden-sm {
        display: block !important;
    }
    
    .owl-carousel .owl-item img.hidden-lg,
    .owl-carousel .owl-item img.hidden-md {
        display: none !important;
    }
}

@media (max-width: 991px) {
    /* Móvil/Tablet: mostrar solo imágenes sin hidden-xs/hidden-sm */
    .owl-carousel .owl-item img.hidden-xs,
    .owl-carousel .owl-item img.hidden-sm {
        display: none !important;
    }
    
    .owl-carousel .owl-item img.hidden-lg,
    .owl-carousel .owl-item img.hidden-md {
        display: block !important;
    }
}

/* Si la imagen es muy pequeña, aplicar un scaling */
.owl-carousel .owl-item img[width="1"], 
.owl-carousel .owl-item img[height="1"],
.owl-carousel .owl-item img[style*="width: 1px"],
.owl-carousel .owl-item img[style*="height: 1px"] {
    /* Para imágenes extremadamente pequeñas */
    min-height: 300px !important;
    min-width: 300px !important;
    object-fit: contain !important;
    background: #f8f9fa !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Contenedor del carousel con altura garantizada pero flexible */
.owl-carousel .owl-item > div,
.owl-carousel .owl-item > a {
    min-height: 150px !important;
    height: auto !important; /* Permitir crecimiento automático */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    /* Evitar que se apilen las imágenes verticalmente */
    position: relative !important;
}

/* Asegurar que las imágenes no se apilen verticalmente en el mismo slide */
.owl-carousel .owl-item > div > a,
.owl-carousel .owl-item > a {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Solo una imagen debe ser visible a la vez */
.owl-carousel .owl-item img:not([style*="display: none"]):not(.hidden-xs):not(.hidden-sm):not(.hidden-lg):not(.hidden-md) + img {
    display: none !important;
}

/* Fix específico para botones absolutos en carouseles */
.owl-carousel a.btn.button {
    z-index: 5 !important;
    position: absolute !important;
    max-width: calc(100% - 20px) !important;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .owl-carousel {
        /* Remover altura máxima para permitir imágenes completas */
        height: auto !important;
        min-height: 150px !important;
    }
    
    .owl-carousel .owl-stage-outer {
        height: auto !important;
    }
    
    .owl-carousel .owl-item img {
        /* Permitir altura natural de la imagen en móvil también */
        max-height: none !important;
        min-height: 120px !important;
        min-width: 120px !important;
    }
    
    .owl-carousel .owl-item > div,
    .owl-carousel .owl-item > a {
        min-height: 120px !important;
        /* Remover altura máxima */
        height: auto !important;
    }
    
    .product-image {
        height: auto !important;
    }
    
    .owl-carousel .owl-nav button {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    
    .owl-carousel .owl-nav .owl-prev {
        left: 5px !important;
    }
    
    .owl-carousel .owl-nav .owl-next {
        right: 5px !important;
    }
    
    .owl-carousel a.btn.button {
        font-size: 12px !important;
        padding: 8px !important;
        min-width: 80px !important;
    }
}

@media (max-width: 480px) {
    .owl-carousel {
        height: auto !important;
        min-height: 100px !important;
    }
    
    .owl-carousel .owl-stage-outer {
        height: auto !important;
    }
    
    .owl-carousel .owl-item img {
        /* Permitir altura natural en pantallas muy pequeñas */
        max-height: none !important;
        min-height: 100px !important;
        min-width: 100px !important;
    }
    
    .owl-carousel .owl-item > div,
    .owl-carousel .owl-item > a {
        min-height: 100px !important;
        height: auto !important;
    }
    
    .product-image {
        height: auto !important;
    }
    
    /* Para imágenes muy pequeñas en móvil, usar background como fallback */
    .owl-carousel .owl-item img[width="1"], 
    .owl-carousel .owl-item img[height="1"] {
        min-height: 120px !important;
        min-width: 100% !important;
        background: #e9ecef !important;
    }
}