/**
 * Theme Name:     Divi Child
 * Author:         Elegant Themes
 * Template:       Divi
 * Text Domain:	   divi-child
 * Description:    Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
 */
footer input.wpcf7-form-control.wpcf7-email.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-email {
    margin-bottom: 10px;
}
input.wpcf7-form-control.wpcf7-quiz{
    max-width: 50px;
	margin-bottom: 20px;
}
.et-pb-active-slide .et_pb_slide_description {
    animation-duration: 0s!important;
    animation-delay: 0s!important;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-name: fadeBottom
}
.et_pb_slide:first-child .et_pb_slide_image img.active {
    opacity: 1;
    animation-duration: 0s!important;
    animation-delay: 0s!important;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-name: fadeLeft;
}
.et-pb-active-slide .et_pb_slide_image, .et-pb-active-slide .et_pb_slide_video {
     animation-duration: 0s!important;
    animation-delay: 0s!important;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-name: fadeLeft;
}

.cf7-full details {
	margin-top:10px;
	color:#dddcd6;
}

/* Tablet y móvil */
@media (max-width:980px){

    .et_mobile_nav_menu .et_mobile_menu{
        position:absolute;
        top:190%;
        left:-25vw !important;
        right:0 !important;
        width:103vw !important;
        max-width:103vw !important;
        margin:0 !important;
        transform:none !important;
        border:none;
        box-sizing:border-box;
    }

}

.mensaje-carrito-vacio{
    background:#111;
    color:#fff;
    border:1px solid #444;
    text-align:center;
    padding:25px;
    margin-bottom:30px;
    border-radius:8px;
    font-size:22px;
}

.mensaje-carrito-vacio strong{
    display:block;
    font-size:30px;
    margin-bottom:10px;
}
.et_pb_menu .et_pb_menu__search-input {
    color: #fff!important;
}
.et_pb_wc_cart_totals table.shop_table th {
    display: table-cell !important;
    width: 45%;
    color: #fff;
    font-weight: 600;
    text-align: left;
}

.et_pb_wc_cart_totals table.shop_table td {
    display: table-cell !important;
    text-align: right;
}
#menu-carrito-busqueda .et-menu-nav, #menu-carrito-busqueda .et_mobile_nav_menu{
	display:none!important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    border-color: #ac091e !important;
    background-color: #ac091e !important;
    color: #ffffff !important;
}
.woocommerce div.product div.images img{
    display: block;
    width: inherit!important;
    height: auto;
    max-height: 500px!important;
    box-shadow: none;
    margin: 0 auto;
}
.woocommerce div.product div.images img:hover{
    display: block;
    width: inherit!important;
    height: auto!important;
    max-height: inherit!important;
    box-shadow: none;
    margin: 0 auto;
}
.woocommerce div.product div.images .flex-control-thumbs li img {
    cursor: pointer;
    opacity: 1!important;
    margin: 0;
	transition: all 300ms ease-in-out;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
   transform: scale(1.05)!important; 
	transition: all 300ms ease-in-out;
}
.related h2{
	text-align:center;
	margin-bottom:50px!important;
}
span.resalte{
	/*color:#ac091e;*/
	color:#F66480;
}

p.slogan{
	color:#fff;
	font-size:40px;
	text-align:center;
	font-weight:600;
	margin-bottom:0px;
}
.countdown-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 30px!important;
    letter-spacing: -0.5px;
}

abanico ul.products li.product.abanico-ready:hover {
	transition: all 300ms ease-in-out;
}

/* ==========================================================================
   REGLA DE SEGURIDAD GLOBAL (BLINDADA PARA DIVI)
   Evita el desbordamiento horizontal en toda la página.
   Se aplica a html, body y al contenedor principal de Divi (#page-container).
   ========================================================================== */
html, body, #page-container {
    overflow-x: hidden !important;   /* Oculta cualquier scroll horizontal */
    width: 100% !important;          /* Fuerza ancho completo */
    max-width: 100vw !important;     /* Limita al ancho del viewport */
    position: relative;              /* Necesario para que overflow-x funcione correctamente */
}

/* ==========================================================================
   HOVER GENERAL Y TRANSICIONES DE IMAGEN (DIVI / WOOCOMMERCE)
   Deshabilita el overlay (capa oscura con iconos) que Divi muestra
   por defecto al hacer hover sobre imágenes de producto o galería.
   ========================================================================== */
.et_shop_image:hover .et_overlay, 
.et_pb_gallery_image:hover .et_overlay {
	display: none !important; /* Oculta el overlay en hover */
}

/* Oculta globalmente los iconos de overlay de Divi sobre imágenes */
.et_overlay { 
    display: none !important; 
}

/* Transición suave para imágenes de producto en estado normal */
.et_shop_image img {
	-webkit-transition: all 0.5s ease; /* Safari/Chrome antiguos */
	-moz-transition: all 0.5s ease;    /* Firefox antiguo */
	-ms-transition: all 0.5s ease;     /* IE */
	-o-transition: all 0.5s ease;      /* Opera antiguo */
	transition: all 0.5s ease;         /* Estándar moderno */
}

/* Al hacer hover, la imagen se amplía ligeramente con una transición más lenta */
.et_shop_image:hover img {
	            /* Zoom del 5% */
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;            /* Transición más lenta en hover (2s) */
}

/* Espaciado vertical del track del carrusel Slick */
.slick-track {
    padding-bottom: 20px;
    padding-top: 20px;
}

/* Margen inferior entre productos en la grid de WooCommerce */
.woocommerce ul.products[class*=columns-] li.product, 
.woocommerce-page ul.products[class*=columns-] li.product {
	margin-bottom: 100px !important;
}

/* ==========================================================================
   DISEÑO BASE GLOBAL PARA TODOS LOS PRODUCTOS (ANTES ".CARRUSEL")
   Normaliza el contenedor ul.products para evitar bordes,
   sombras y márgenes no deseados heredados del tema o plugins.
   ========================================================================== */
ul.products {
    margin: 0 auto !important;      /* Centrado horizontal */
    max-width: 96% !important;      /* Ancho máximo con pequeño margen lateral */
    display: block !important;      /* Bloque simple, no flex ni grid */
    border: none !important;        /* Sin borde */
    box-shadow: none !important;    /* Sin sombra */
}

/* Elimina bordes superiores e izquierdos en listas de productos (excepto "related") */
ul.products:not(.related) {	
	border-top: 0px solid white;
    border-left: 0px solid white;
}

/* Elimina bordes y sombras de los elementos internos del producto
   para evitar interferencias visuales no deseadas */
ul.products li.product,
ul.products .product.type-product,
ul.products .type-product,
ul.products .clasevic,
ul.products .et_shop_image,
ul.products .woocommerce-loop-product__link {
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   ESTÉTICA PREMIUM CARD (APLICA A CUALQUIER SHORTCODE [PRODUCTS])
   Define el aspecto visual de tarjeta con imagen a sangre, bordes
   redondeados, sombra y efecto de elevación al hacer hover.
   ========================================================================== */
ul.products li.product {
    position: relative !important;                                               /* Necesario para posicionar hijos en absolute */
    height: 380px !important;                                                    /* Altura fija de la tarjeta */
    border-radius: 28px !important;                                              /* Esquinas muy redondeadas */
    overflow: hidden !important;                                                 /* Recorta la imagen al borde redondeado */
    background: #1c1c1c !important;                                              /* Fondo oscuro de fallback */
    box-shadow: 0 12px 30px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.10) !important; /* Sombra doble suave */
    transition: transform .35s ease, box-shadow .35s ease !important;            /* Animación de hover */
    margin-bottom: 20px !important;                                              /* Margen inferior en grid normal */
}

/* Efecto de elevación al pasar el ratón sobre la tarjeta */
ul.products li.product:hover {
    transform: translateY(-10px);                                                /* Se eleva 10px hacia arriba */
    box-shadow: 0 25px 50px rgba(0,0,0,.30), 0 10px 20px rgba(0,0,0,.15) !important; /* Sombra más intensa en hover */
    z-index: 999; /* Se sitúa encima de las demás tarjetas para no quedar tapada */
}

/* El enlace envuelve toda la tarjeta ocupando el 100% de alto y ancho */
ul.products .woocommerce-loop-product__link {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Contenedor de la imagen: ocupa toda la tarjeta como fondo absoluto */
ul.products .et_shop_image {
    position: absolute !important;   /* Sale del flujo y se posiciona respecto a li.product */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; 
    overflow: hidden !important;
    background: #fff !important;     /* Fondo blanco mientras carga la imagen */
    z-index: 1;                      /* Por debajo del gradiente y los textos */
    aspect-ratio: 1/1;               /* Proporción cuadrada */
    align-items: center;
    display: flex !important;
    justify-content: center;
}

/* Imagen del producto: cubre completamente el contenedor (estilo "portada") */
ul.products .et_shop_image img {
    position: absolute !important;
    inset: 0 !important;             /* Equivale a top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;    /* La imagen cubre sin deformarse */
    object-position: center center !important;
    display: block !important;
    transition: transform .8s ease !important; /* Transición de zoom lenta y suave */
}

/* Zoom de la imagen al hacer hover sobre la tarjeta */
ul.products li.product:hover img {
    transform: scale(1.08); /* Amplía la imagen un 8% */
}

/* Gradiente negro en la parte inferior de la tarjeta para que el texto sea legible
   sobre cualquier imagen sin importar sus colores */
ul.products li.product::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;                     /* Cubre el 60% inferior de la tarjeta */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
    z-index: 2;                      /* Por encima de la imagen, por debajo del texto */
    pointer-events: none;            /* No interfiere con clics */
}

/* ==========================================================================
   TIPOGRAFÍAS Y ALINEACIONES (GLOBALES)
   Posiciona el título y el precio sobre la imagen usando absolute,
   aprovechando el gradiente negro inferior como fondo implícito.
   ========================================================================== */

/* Título del producto: posicionado sobre el gradiente, centrado */
ul.products .woocommerce-loop-product__title {
    position: absolute !important;
    left: 15px !important;           /* Margen lateral izquierdo */
    right: 15px !important;          /* Margen lateral derecho */
    width: auto !important;
    bottom: 55px !important;         /* A 55px del fondo de la tarjeta */
    z-index: 5 !important;           /* Por encima del gradiente */
    color: #ffffff !important;
    text-align: center !important; 
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    padding: 0 !important; 
    margin: 0 !important;
    text-shadow: none !important;    /* Sin sombra de texto */
    -webkit-text-stroke: 0px transparent !important; /* Sin contorno de texto */
}

/* Precio del producto: justo debajo del título, pegado al fondo */
ul.products .price {
    position: absolute !important;
    left: 15px !important;
    right: 15px !important;
    width: auto !important;
    bottom: 18px !important;         /* A 18px del fondo */
    z-index: 5 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Precio tachado (precio original antes del descuento): semitransparente */
ul.products .price del {
    color: rgba(255,255,255,0.6) !important;
    margin-right: 5px;
}

/* Badge "En oferta": pastilla roja en la esquina superior izquierda */
ul.products span.onsale {
    z-index: 10 !important;          /* Por encima de todo */
    left: 10px !important;
    top: 10px !important;
    background: #ac091e !important;  /* Rojo coral */
    border-radius: 50px !important;  /* Forma de pastilla */
    padding: 4px 12px !important;
    font-size: 12px !important;
    min-height: auto !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CONTROLES EXCLUSIVOS CUANDO ES UN SLIDER (SLICK CAROUSEL)
   Ajustes específicos para cuando ul.products funciona como carrusel
   con el plugin Slick Slider.
   ========================================================================== */

/* Margen entre slides dentro del carrusel */
ul.products.slick-slider li.product {
    margin: 0 10px 20px 10px !important;
    width: auto !important;          /* El ancho lo controla Slick */
}

/* Track (contenedor de todos los slides): flex para alinearlos en altura */
ul.products .slick-track {
    display: flex !important;
    flex-wrap: wrap !important;      /* Permite salto de línea si es necesario */
    align-items: stretch !important; /* Todas las tarjetas a la misma altura */
    padding-top: 20px !important;   
    padding-bottom: 30px !important; 
}

/* Cada slide individual: padding lateral para separación entre cards */
ul.products .slick-slide {
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* Contenedor del área visible del slider: evita scroll horizontal */
ul.products .slick-list {
    overflow: hidden !important;     /* CORRECCIÓN: previene scroll horizontal */
    padding-top: 10px !important;
    padding-bottom: 30px !important;
}

/* Flechas de navegación del carrusel: base común */
ul.products.slick-slider button.slick-arrow {
    width: 15px;
    height: 26px;
    position: absolute;
    z-index: 9;
    text-indent: -99999px;          /* Oculta el texto accesible del botón */
    border: 0px !important;
    padding: 20px 15px !important;  /* Área de clic más grande que el icono */
    text-align: center;
    margin: 0px !important;
    border-radius: 0px !important;
    cursor: pointer;
    top: 38%;                       /* Centrado verticalmente aproximado */
}

/* Flecha "siguiente": posicionada a la derecha con icono de flecha derecha */
ul.products.slick-slider button.slick-next {
    right: 5px;
    background: rgba(0,0,0,0.5) url('https://iluhome.es/wp-content/uploads/2025/11/arrow-right-w.png') center center no-repeat !important;
    background-size: 15px 26px !important;
    outline: none !important;
}

/* Flecha "anterior": posicionada a la izquierda con icono de flecha izquierda */
ul.products.slick-slider button.slick-prev {
    left: 5px;
    background: rgba(0,0,0,0.5) url('https://iluhome.es/wp-content/uploads/2025/11/arrow-left-w.png') center center no-repeat !important;
    background-size: 15px 26px !important;
    outline: none !important;
}

/* Fondo más oscuro al hacer hover/focus sobre las flechas */
ul.products.slick-slider button.slick-arrow:hover, 
ul.products.slick-slider button.slick-arrow:focus {
    background-color: rgba(0,0,0,0.8) !important;
}

/* Contenedor de los puntos de paginación del carrusel */
ul.products.slick-slider .slick-dots {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
    width: 100%;
}

/* Cada punto de paginación: tamaño fijo, en línea */
ul.products.slick-slider .slick-dots li {
    list-style: none !important;
    display: inline-block !important;
    margin: 0 2px !important;
    padding: 0px !important;
    width: 10px !important;
    height: 10px !important;
    line-height: 0;
}

/* Botón dentro del punto de paginación: círculo blanco con borde */
ul.products.slick-slider .slick-dots li button {
    text-indent: -99999px;           /* Oculta el texto accesible */
    background: #fff !important;
    padding: 0px !important;
    border: 1px solid #000;
    border-radius: 50% !important;   /* Forma circular */
    width: 10px !important;
    height: 10px !important;
}

/* Elimina el outline de foco del botón de paginación */
ul.products.slick-slider .slick-dots li button:focus {
    outline: none !important;
}

/* Punto activo (slide actual): fondo gris oscuro */
ul.products.slick-slider .slick-dots li.slick-active button {
    background: #444 !important;
}

/* ==========================================================================
   COMPORTAMIENTOS ESPECÍFICOS DE WOOCOMMERCE
   Ajustes de color, tamaño y disposición para secciones concretas
   de WooCommerce: precios, productos relacionados, vistos recientemente, etc.
   ========================================================================== */

/* Asegura que los precios sean blancos en páginas de WooCommerce */
.woocommerce-page ul.products li.product .price, 
.woocommerce-page ul.products li.product .price del, 
.woocommerce ul.products li.product .price, 
.woocommerce ul.products li.product .price del {
    color: #FFF !important;
}

/* Ancho y margen de los productos en las secciones:
   - vistos recientemente (rvpw)
   - relacionados (related)
   - sección de interés (.interes)
   - archivo de categoría (tax-product_cat) */
.rvpw-recently-view li.product, 
.related li.product, 
.interes li.product, 
.tax-product_cat li.product {
	width: 15.65% !important;        /* Aprox. 6 productos por fila */
    margin: 0 9px 18px 9px !important;
}

/* Títulos de sección en mayúsculas con margen inferior */
.rvpw-recently-view h2:not(.woocommerce-loop-product__title), 
.related h2:not(.woocommerce-loop-product__title), 
.interes h2:not(.woocommerce-loop-product__title) {
	text-transform: uppercase;
	margin-bottom: 20px;
}

/* Elimina los bordes superior e inferior de la sección "visto recientemente" */
.rvpw-recently-view {
	border-top: 0px solid black;
	border-bottom: 0px solid black;
}

/* La sección de vistos recientemente ocupa el 100% del ancho disponible */
section.rvpw-recently-view.products {
    max-width: 100%!important;
}

/* Margen superior de la lista de productos dentro de "visto recientemente" */
.rvpw-recently-view ul.products {
	margin-top: 20px;
}

/* Alinea el texto a la izquierda en productos de "visto recientemente" y "relacionados" */
.rvpw-recently-view ul.products li.product,
.related ul.products li.product {
    text-align: left!important;
}

/* Elimina el borde inferior de la imagen en productos relacionados */
.related.products .et_shop_image {
    border-bottom: 0px solid black;	
}

/* Título del carrusel dentro de .seccion-carrusel: grande, negrita y rojo */
.seccion-carrusel .titulo-carrusel h2 {
	padding-top: 10px;
	padding-bottom: 30px;
	font-weight: 700;
	font-size: 24px;
	color: #ac091e;                  /* Rojo corporativo */
}

/* Bordes laterales visibles en la lista de productos dentro de .seccion-carrusel */
.seccion-carrusel ul.products {	
    border-left: 1px solid white;
	border-right: 1px solid white;
}

/* ==========================================================================
   CONFIGURACIÓN AVANZADA PARA .BLACK-CARRUSEL (SOBRESCRIBE LOS ESTILOS GLOBALES)
   Variante de carrusel con flechas externas centradas debajo del slider,
   texto alineado a la izquierda y espaciado ajustado.
   ========================================================================== */

/* Elimina bordes y sombras en el contenedor ul.products del black-carrusel */
.black-carrusel ul.products,
.black-carrusel ul.products:not(.related),
.seccion-carrusel.black-carrusel ul.products {
    border: none !important;
    box-shadow: none !important;
}

/* Permite que las flechas sobresalgan fuera del contenedor visible */
.black-carrusel,
.black-carrusel .wcpscwc-product-slider,
.black-carrusel ul.products.slick-slider {
    overflow: visible !important;   /* Necesario para mostrar botones externos */
}

/* Posición y dimensiones del slider en black-carrusel */
.black-carrusel ul.products.slick-slider {
    position: relative !important;
    margin: 0 auto 80px auto !important; /* 80px de margen inferior para las flechas */
    padding-bottom: 20px !important;
    width: 100% !important;
    max-width: 95% !important;
    box-sizing: border-box !important;
}

/* Track del slider: flex con espaciado vertical */
.black-carrusel ul.products .slick-track {
    display: flex !important;
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Separación horizontal entre slides */
.black-carrusel ul.products .slick-slide {
    margin-left: 9px !important;
    margin-right: 9px !important;
}

/* Cada producto del slider ocupa el 100% del ancho de su slide */
.black-carrusel ul.products.slick-slider li.product {
    margin: 0 9px 0 9px !important;
    width: 100% !important; 
}

/* Título del producto alineado a la izquierda en black-carrusel (sobreescribe el centrado global) */
.black-carrusel ul.products .woocommerce-loop-product__title {
    left: 20px !important;           /* Más sangría que el global */
    right: 20px !important;
    bottom: 45px !important;         /* Un poco más arriba que el global */
    text-align: left !important; 
    font-size: 18px !important;      /* Más grande que el global */
}

/* Precio alineado a la izquierda en black-carrusel */
.black-carrusel ul.products .price {
    left: 20px !important;
    bottom: 18px !important;
    text-align: left !important;
}

/* Flechas del carrusel: circulares, rojas, posicionadas DEBAJO del slider */
.black-carrusel ul.products .slick-arrow {
    position: absolute !important;
    top: auto !important;            /* Anula el posicionamiento vertical por defecto */
    bottom: -60px !important;        /* Se colocan 60px por debajo del slider */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;   /* Círculo perfecto */
    border: none !important;
    cursor: pointer !important;
    text-indent: -9999px !important; /* Oculta el texto accesible */
    padding: 0 !important;
    background-color: #ac091e !important; /* Rojo corporativo */
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

/* Flecha izquierda: centrada y desplazada a la izquierda del centro */
.black-carrusel ul.products .slick-prev {
    left: calc(50% - 55px) !important; /* 55px a la izquierda del centro */
    right: auto !important;
    background: #ac091e url('https://iluhome.es/wp-content/uploads/2025/11/arrow-left-w.png') center center no-repeat !important;
    background-size: 14px !important;
}

/* Flecha derecha: centrada y desplazada a la derecha del centro */
.black-carrusel ul.products .slick-next {
    left: calc(50% + 15px) !important; /* 15px a la derecha del centro */
    right: auto !important;
    background: #ac091e url('https://iluhome.es/wp-content/uploads/2025/11/arrow-right-w.png') center center no-repeat !important;
    background-size: 14px !important;
}

/* Efecto hover en las flechas: más oscuro y ligeramente ampliado */
.black-carrusel ul.products .slick-arrow:hover {
    background-color: #ac091e !important;
    transform: scale(1.1);
}

/* En móvil, las flechas se mantienen visibles */
@media (max-width: 767px) {
    .black-carrusel ul.products .slick-arrow {
        display: block !important;
    }
}

/* ==========================================================================
   ANIMACIONES EXTRA DE COLUMNAS / SECCIONES
   Clase .seccion-animada: aplica un efecto de zoom al fondo (::before)
   y una capa de color rojo semitransparente (::after) al hacer hover.
   ========================================================================== */
.seccion-animada {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* Pseudo-elemento que replica el fondo y aplica el zoom en hover */
.seccion-animada::before {
    content: "";
    position: absolute;
    inset: 0;                        /* Cubre toda la sección */
    background: inherit;             /* Hereda el fondo del padre */
    background-size: cover;
    background-position: center;
    transform: scale(1);             /* Sin zoom en estado normal */
    transform-origin: center;
    will-change: transform;          /* Optimización de rendimiento */
    transition: transform 0.5s ease;
    z-index: 0;
    clip-path: inset(0);             /* Evita que el zoom desborde */
}

/* Pseudo-elemento de overlay: capa transparente que se colorea en hover */
.seccion-animada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);       /* Transparente en estado normal */
    transition: background 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

/* El contenido de la sección queda por encima de los pseudo-elementos */
.seccion-animada > * {
    position: relative;
    z-index: 2;
}

/* En hover: el fondo hace zoom al 110% */
.seccion-animada:hover::before {
    transform: scale(1.1);
}

/* En hover: aparece una capa roja semitransparente sobre el fondo */
.seccion-animada:hover::after {
    background: rgba(220,0,0,0.3);
}

/* Imágenes dentro del carrusel móvil: responsivas y en bloque */
.carrusel-movil .slick-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ==========================================================================
   FILTROS DE PRODUCTOS FRONT-END (PARA CUALQUIER SHORTCODE [PRODUCTS])
   Botones de filtrado por categoría que aparecen encima de la lista
   de productos. Al hacer clic, filtran los productos visibles.
   ========================================================================== */
.custom-product-filters {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;                 /* Los botones saltan de línea si no caben */
    justify-content: center;
    gap: 12px;                       /* Separación entre botones */
    width: 100%;
    position: relative;
    z-index: 10;
}

/* Estilo base de los botones de filtro: borde rojo, fondo transparente */
.custom-product-filters button {
    background: transparent !important;
    border: 2px solid #ac091e !important;
    color: #ac091e !important;
    padding: 8px 24px !important;
    border-radius: 30px !important;  /* Forma de pastilla */
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Botón activo o en hover: fondo rojo sólido, texto blanco y ligera elevación */
.custom-product-filters button:hover,
.custom-product-filters button.active {
    background: #ac091e !important;
    color: #ffffff !important;
    transform: translateY(-2px);     /* Sutil efecto de elevación */
    box-shadow: 0 4px 10px rgba(92, 77, 53, 0.3) !important;
}

/* En móviles: botones más compactos */
@media (max-width: 767px) {
    .custom-product-filters {
        gap: 8px;
        margin-bottom: 20px;
    }
    .custom-product-filters button {
        padding: 6px 16px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   CLASE .RANKING — TABLA DE PRODUCTOS SIN FILTROS
   Transforma la lista de productos en una tabla tipo "ranking" con
   columnas para número, nombre, categorías, stock y precio.
   Diseño oscuro, sin tarjetas, con hover sutil.
   ========================================================================== */

/* Reset completo del estilo de tarjeta heredado:
   convierte cada li.product en una fila de tabla con grid de 5 columnas */
.ranking ul.products li.product {
    position: relative !important;
    height: 80px !important;                                                     /* Altura fija de fila */
    min-height: unset !important;
    border-radius: 0 !important;                                                 /* Sin esquinas redondeadas */
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;                                                  /* Sin efecto hover de elevación */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: 6% 38% 20% 18% 18% !important;                       /* 5 columnas: núm / nombre / cats / stock / precio */
    align-items: center !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;                  /* Separador entre filas */
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Oculta el pseudo-elemento ::before (gradiente) en el ranking */
.ranking ul.products li.product::before {
    display: none !important;
}

/* En hover: fondo levemente visible, sin elevación ni sombra */
.ranking ul.products li.product:hover {
    height: 80px !important;
    min-height: unset !important;
    background: rgba(255,255,255,0.06) !important;                               /* Fondo sutil */
    transform: none !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: 6% 38% 20% 18% 18% !important;                       /* Mantiene la grid en hover */
}

/* ul.products en ranking: bloque simple sin estilos de tabla */
.ranking ul.products {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border-collapse: unset !important;
    border-spacing: unset !important;
    table-layout: unset !important;
}

/* El enlace que envuelve la fila usa display:contents para no romper el grid:
   sus hijos directos participan en la grid del li.product padre */
.ranking-row-layout {
    display: contents !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Estilos base comunes a todas las celdas del ranking:
   flexbox centrado verticalmente, altura fija, padding y desbordamiento controlado */
.ranking-col-number,
.ranking-col-name,
.ranking-col-cats,
.ranking-col-stock,
.ranking-col-price {
    display: flex !important;
    align-items: center !important;
    height: 80px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* Columna de número de posición: grande, negrita y muy semitransparente */
.ranking-col-number {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,0.25) !important; /* Número discreto */
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Columna de nombre del producto: blanco, semibold */
.ranking-col-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;  /*OJO*/
}

/* Columna de categorías: tamaño pequeño, gris claro */
.ranking-col-cats {
    font-size: 13px !important;
    color: rgba(255,255,255,0.45) !important;
    line-height: 1.4 !important;
}

/* Columna de stock: centrada, contenido en pastilla de color */
.ranking-col-stock {
    justify-content: center !important;
}

/* Pastilla de estado de stock: estilo base */
.ranking-col-stock span {
    display: inline-block !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;  /* Forma de pastilla */
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}

/* Pastilla verde para productos en stock */
.ranking-col-stock.in-stock span {
    background: rgba(46, 213, 115, 0.15) !important;
    color: #2ed573 !important;
    border: 1px solid rgba(46, 213, 115, 0.3) !important;
}

/* Pastilla roja para productos agotados */
.ranking-col-stock.out-of-stock span {
    background: rgba(255, 71, 87, 0.15) !important;
    color: #ac091e !important;
    border: 1px solid rgba(255, 71, 87, 0.3) !important;
}

/* Columna de precio: alineada a la derecha, blanca y negrita */
.ranking-col-price {
    justify-content: flex-end !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

/* Importe del precio en la columna de precio */
.ranking-col-price .amount {
    color: #ffffff !important;
    font-size: 15px !important;
}

/* Precio tachado dentro de la columna de precio */
.ranking-col-price del {
    display: inline !important;
    margin-right: 4px !important;
}

/* Importe del precio tachado: más pequeño y semitransparente */
.ranking-col-price del .amount {
    color: rgba(255,255,255,0.4) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Oculta los elementos de tarjeta heredados que no aplican en el ranking */
.ranking ul.products .et_shop_image,                      /* Imagen de producto */
.ranking ul.products .woocommerce-loop-product__title,    /* Título posicionado en absolute */
.ranking ul.products .woocommerce-loop-product__link,     /* Enlace envolvente */
.ranking ul.products .button,                             /* Botón "Añadir al carrito" */
.ranking ul.products span.onsale {                        /* Badge de oferta */
    display: none !important;
}

/* Oculta los botones de filtro cuando el ranking precede a .custom-product-filters
   ya que el ranking no usa filtrado front-end */
.ranking + .custom-product-filters,
.ranking ~ .custom-product-filters {
    display: none !important;
}

/* Imagen flotante que sigue al cursor al hacer hover sobre una fila del ranking:
   muestra una preview de la imagen del producto */
.ranking-hover-img {
    position: fixed !important;      /* Se posiciona respecto al viewport, no al contenedor */
    pointer-events: none !important; /* No captura eventos de ratón */
    z-index: 99999 !important;       /* Por encima de todo */
    width: 180px !important;
    height: 180px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
    opacity: 0;                      /* Invisible por defecto */
    transform: scale(0.85);          /* Ligeramente reducida por defecto */
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    display: none;
}

/* Estado visible: la imagen aparece a tamaño completo */
.ranking-hover-img.visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    display: block !important;
}

/* La imagen dentro del preview ocupa todo el contenedor */
.ranking-hover-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Responsive para el ranking en móviles (≤767px):
   - Se oculta la columna de categorías
   - Las columnas se redistribuyen
   - Los tamaños de fuente se reducen */
@media (max-width: 767px) {
    .ranking ul.products li.product,
    .ranking ul.products li.product:hover {
        grid-template-columns: 8% 48% 0% 20% 24% !important; /* La columna de cats tiene 0% de ancho */
        height: 70px !important;                               /* Fila más estrecha en móvil */
    }
    .ranking-col-number,
    .ranking-col-name,
    .ranking-col-cats,
    .ranking-col-stock,
    .ranking-col-price {
        height: 70px !important;
    }
    .ranking-col-cats {
        display: none !important;   /* Columna de categorías oculta en móvil */
    }
    .ranking-col-number {
        font-size: 14px !important;
        padding: 0 8px !important;
    }
    .ranking-col-name {
        font-size: 13px !important;
        padding: 0 8px !important;
    }
    .ranking-col-stock,
    .ranking-col-price {
        font-size: 13px !important;
        padding: 0 8px !important;
    }
}

/* --- ESTILIZAR ALERTAS Y MENSAJES DE WOOCOMMERCE --- */

/* 1. Contenedor general de los mensajes (Mensajes informativos y de éxito) */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error,
.woocommerce-notice {
    background-color: #000000 !important;
	border: 2px solid rgba(255, 255, 255, 100);
	margin:2% 2% 2% 2%;
    color: #ffffff !important;
    border-top: 3px solid #ac091e !important; /* Añadimos un toque del rojo de tu marca en la parte superior */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05) !important; /* Sombra sutil para dar volumen sobre el fondo negro */
}

/* 2. Asegurar que el texto normal y los iconos sean blancos */
.woocommerce-message::before, 
.woocommerce-info::before, 
.woocommerce-error::before {
    color: #ffffff !important; /* Cambia el color del icono de WooCommerce a blanco */
}

/* 3. Estilo para los enlaces dentro del mensaje (por ejemplo: el botón "¿Deshacer?" o "Ver carrito") */
.woocommerce-message a.button, 
.woocommerce-info a.button,
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button) {
    color: #ffffff !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* 4. Efecto Hover para los enlaces de los mensajes (se vuelven rojos al pasar el ratón) */
.woocommerce-message a.button:hover, 
.woocommerce-info a.button:hover,
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover {
    color: #ac091e !important;
    text-decoration: none !important;
}