/*
Theme Name: D. Child
Theme URI: https://denocheydia.com/
Template: astra
Author: moodoraman
Author URI: https://denocheydia.com/
Description: D. es un tema exclusivo y de alto rendimiento, construido sobre la arquitectura ultra-ligera de Astra para ofrecer una experiencia visual circular, moderna y adaptable. Con un enfoque en la estética geométrica y la flexibilidad total, D. permite un control absoluto sobre sidebars, áreas de widgets y tipografías circulares, integrándose a la perfección con maquetadores como Elementor o Gutenberg.
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 1.1.1775800815
Updated: 2026-04-10 08:00:15

*/

/*==  by D. ==*/

.ekit-heading__description h4
{color:inherit!important;}




/* ==========================================================================
   MENÚ DESPLEGABLE MÓVIL (DISEÑO VISUAL Y JERÁRQUICO)
   ========================================================================== */

/* --- CAJÓN DEL MENÚ (Flotante y elegante) --- */
.elementor-nav-menu--dropdown {
    background-color: #ffffff !important;
    border: 1px solid rgba(140, 90, 133, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0px 15px 35px rgba(44, 29, 41, 0.08) !important;
    padding: 16px 12px !important;
    margin-top: 15px !important;
    overflow: hidden;
    z-index: 9999 !important;
}

/* --- ENLACES PRINCIPALES (NIVEL 1) --- */
.she-header .elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-item {
    color: #2c1d29 !important; /* Ciruela oscuro casi negro */
    background-color: transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    display: block !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-bottom: none !important;
}

/* Hover Nivel 1 */
.she-header .elementor-nav-menu--dropdown a.elementor-item:hover,
.she-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    color: #ffffff !important;
    background-color: #fbf8fa !important;
    transform: translateX(4px); /* Microinteracción de movimiento */
}

/* ==========================================================================
   SUBMENÚS (EL "HILO CONDUCTOR")
   ========================================================================== */

/* --- Contenedor del Submenú (Crea la línea visual) --- */
.elementor-nav-menu--dropdown ul.sub-menu {
    margin: 4px 0 8px 16px !important; /* Margen a la izquierda para escalonar */
    padding: 4px 0 4px 12px !important;
    border-left: 1px solid #f2e6ed !important; /* Hilo conductor vertical */
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- Enlaces del Submenú (Nivel 2) --- */
.she-header .elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-nav-menu--dropdown a.elementor-sub-item {
    color: #6a5e68 !important; /* Tono más suave que el Nivel 1 */
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    margin-bottom: 2px !important;
    transition: all 0.3s ease !important;
}

/* Hover Nivel 2 (Destello visual) */
.she-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.she-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
    color: #8c5a85 !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(140, 90, 133, 0.05) !important; /* Sombra sutil interna */
    padding-left: 18px !important; /* Se separa un poco del hilo vertical */
}

/* ==========================================================================
   DISEÑO DEL BOTÓN HAMBURGUESA (CORTES MÓVIL/TABLET)
   ========================================================================== */

/* Botón Hamburguesa general */
.elementor-menu-toggle {
    background-color: transparent !important;
    padding: 0px  !important;
    transition: all 0.3s ease !important;
}

/* Cuando la cabecera está arriba del todo (Fondo transparente) */
.she-header-transparent-yes .elementor-menu-toggle {
    border: 0px solid rgba(255, 255, 255, 0.3) !important;
}

/* Cuando se hace scroll (Sticky con fondo blanco) */
.she-header:not(.she-header-transparent-yes) .elementor-menu-toggle {

    border: 1px solid rgba(140, 90, 133, 0.2) !important;
    background-color: #fbf8fa !important;
    color: #ffffff !important;
}


/* ==========================================================================
   Convertir en catalogo de productos
   ========================================================================== */
/* Componente: Botón Catálogo */
.btn-catalogo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px; /* Escala 8px */
    margin-top: 16px;
    background-color: #111827; /* Gris muy oscuro, contraste ratio superado */
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 200ms cubic-bezier(0.25, 1, 0.5, 1), transform 75ms linear;
    border: 2px solid transparent;
}

/* Interacción limpia */
.btn-catalogo:hover {
    background-color: #374151;
}

/* Estado de foco estricto para Accesibilidad AA */
.btn-catalogo:focus-visible {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.2);
}

/* Respuesta táctil/clic inmediata */
.btn-catalogo:active {
    transform: scale(0.98);
}



/* ==========================================================================
   FORMULARIO PREMIUM SWEET HAIR (ACCESIBILIDAD AA)
   ========================================================================== */


/* Reset de elementos automáticos de Contact Form 7 (Corregido) */
.sh-form-wrapper br {
    display: none !important;
}

.sh-form-wrapper p {
    display: contents !important; /* Mantiene visibles los campos pero anula el salto de línea del párrafo */
    margin: 0 !important;
    padding: 0 !important;
}

.sh-form-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Sistema de cuadrícula simétrica en 2 columnas */
.sh-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.sh-form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    position: relative;
}

.sh-form-row .sh-form-field {
    margin-bottom: 0;
}

/* Tipografía y Etiquetas Modernas */
.sh-form-field label {
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111827; /* Máximo contraste */
    margin-bottom: 8px;
    display: block;
}

.sh-asterisk {
    color: #dc2626; /* Rojo técnico de advertencia */
    margin-left: 2px;
}

/* Entradas de Datos Corporativos (Inputs, Select, Textarea) */
.sh-form-wrapper input[type="text"],
.sh-form-wrapper input[type="email"],
.sh-form-wrapper input[type="tel"],
.sh-form-wrapper select,
.sh-form-wrapper textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem; /* 16px para evitar zoom forzado en iOS */
    font-family: inherit;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 150ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 150ms cubic-bezier(0.25, 1, 0.5, 1);
}

.sh-form-wrapper textarea {
    min-height: 120px;
    resize: vertical;
}

/* Estados Interactivos Líquidos y Rápidos (<300ms) */
.sh-form-wrapper input:hover,
.sh-form-wrapper select:hover,
.sh-form-wrapper textarea:hover {
    border-color: #9ca3af;
}

.sh-form-wrapper input:focus,
.sh-form-wrapper select:focus,
.sh-form-wrapper textarea:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 1px #000000; /* Foco accesible y marcado */
}

/* ---- Alineación estricta de Casilla Legal en línea ---- */
.sh-legal-field .wpcf7-form-control-wrap {
    display: block;
}

.sh-legal-field .wpcf7-list-item {
    margin: 0;
    display: block;
}

.sh-legal-field label {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    color: #4b5563;
    text-transform: none;
    letter-spacing: normal;
}

.sh-legal-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    accent-color: #000000;
    flex-shrink: 0;
    cursor: pointer;
}

/* ---- Validación visual de Alertas al Enviar (Nativo CF7) ---- */
.sh-form-wrapper .wpcf7-not-valid {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

/* Mensajes de error específicos debajo de cada campo */
.wpcf7-not-valid-tip {
    font-size: 0.75rem;
    color: #dc2626;
    font-weight: 600;
    margin-top: 6px;
    display: block;
}

/* Caja de respuesta final del formulario */
.wpcf7-response-output {
    border-radius: 4px !important;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 16px !important;
    margin: 24px 0 0 0 !important;
    text-align: center;
    box-sizing: border-box;
}

/* Alerta general cuando existen errores */
.wpcf7-response-output.wpcf7-validation-errors {
    border: 1px solid #dc2626 !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Alerta general cuando se envía correctamente */
.wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 1px solid #16a34a !important;
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
}

/* ---- Botón Premium Orientado a Producto Real ---- */
.sh-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background-color: #000000;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1), transform 75ms linear;
}

@media (min-width: 768px) {
    .sh-submit-btn {
        width: auto;
        min-width: 220px;
    }
}

.sh-submit-btn:hover {
    background-color: #374151;
}

/* Respuesta táctil inmediata */
.sh-submit-btn:active {
    transform: scale(0.98);
}

/* ---- Adaptación a pantallas móviles ---- */
@media (max-width: 767px) {
    .sh-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .sh-form-row .sh-form-field {
        margin-bottom: 24px;
    }
}







/* ==========================================================================
   tarjeta servicios
   ========================================================================== */
/* 1. Estructura principal: Estética Editorial */
.servicio-card-v2 {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 16px; /* Marco interno perimetral */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 250ms ease-out, box-shadow 250ms ease-out;
}

.servicio-card-v2:hover {
    border-color: #d4d4d4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

/* 2. Unificamos contenedores de Imagen Normal y de Comparación (Antes/Después) */
.servicio-card-v2 .elementor-widget-image,
.servicio-card-v2 .elementor-widget-elementskit-image-comparison {
    width: 100%;
    margin: 0 0 24px 0 !important;
}

/* --- 2.A. Imagen Normal & Lightbox --- */
.servicio-card-v2 .elementor-widget-image .elementor-widget-container,
.servicio-card-v2 .elementor-widget-image a {
    width: 100% !important;
    display: block; 
    border-radius: 12px;
    overflow: hidden; 
}

.servicio-card-v2 .elementor-widget-image img {
    width: 100% !important;
    height: 460px !important; /* Altura obligatoria e inamovible */
    object-fit: cover;
    display: block;
    border-radius: 12px;
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.servicio-card-v2 .elementor-widget-image a:focus-visible {
    outline: 2px solid #bc9c6c;
    outline-offset: 2px;
}

.servicio-card-v2 .elementor-widget-image a:hover img {
    transform: scale(1.04);
}

/* --- 2.B. Comparador de Imágenes (ElementsKit) --- */
.servicio-card-v2 .twentytwenty-wrapper,
.servicio-card-v2 .twentytwenty-container {
    width: 100% !important;
    height: 460px !important; /* Misma altura obligatoria para no romper el grid */
    border-radius: 12px;
    overflow: hidden;
}

.servicio-card-v2 .twentytwenty-before,
.servicio-card-v2 .twentytwenty-after {
    height: 460px !important;
    object-fit: cover !important;
    border-radius: 12px;
}

/* UI Premium para el tirador deslizante */
.servicio-card-v2 .twentytwenty-handle {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    width: 36px !important;
    height: 36px !important;
    margin-top: -18px !important; 
    margin-left: -18px !important; 
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Línea vertical divisoria */
.servicio-card-v2 .twentytwenty-handle:before, 
.servicio-card-v2 .twentytwenty-handle:after {
    background-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
    width: 3px !important;
}

/* Flechas dentro del tirador (Color corporativo) */
.servicio-card-v2 .twentytwenty-left-arrow {
    border-right: 5px solid #bc9c6c !important;
    margin-left: -3px;
}
.servicio-card-v2 .twentytwenty-right-arrow {
    border-left: 5px solid #bc9c6c !important;
    margin-right: -3px;
}

/* Etiquetas Antes / Después (Limpias y modernas) */
.servicio-card-v2 .twentytwenty-before-label:before, 
.servicio-card-v2 .twentytwenty-after-label:before {
    background: rgba(17, 17, 17, 0.75) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    padding: 6px 10px;
}


/* 3. Titular principal */
.servicio-card-v2 .elementor-widget-heading {
    margin-bottom: 16px;
    padding: 0 8px; 
}

.servicio-card-v2 .elementor-heading-title {
    font-weight: 800;
    color: #111111;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.servicio-card-v2 .elementor-heading-title strong {
    color: #bc9c6c;
}


/* 4. Acordeón rediseñado como Botón Interactivo */
.servicio-card-v2 .elementor-widget-n-accordion {
    margin-bottom: 24px;
    padding: 0 8px;
}

.servicio-card-v2 .e-n-accordion-item {
    border: none !important;
    background: transparent !important;
}

.servicio-card-v2 .e-n-accordion-item-title {
    background-color: #f7f5f0; 
    border-radius: 8px;
    padding: 5px 10px !important;
    justify-content: space-between !important;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms ease, transform 150ms ease;
    outline: none;
}

.servicio-card-v2 .e-n-accordion-item-title-text {
    font-size: 14px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111111;
    transition: color 200ms ease;
}

.servicio-card-v2 .e-n-accordion-item-title-icon {
    color: #111111 !important;
    font-size: 14px;
}

.servicio-card-v2 .e-n-accordion-item-title:hover {
    background-color: #f0ebe1;
}

.servicio-card-v2 .e-n-accordion-item-title:focus-visible {
    border-color: #bc9c6c;
    box-shadow: 0 0 0 3px rgba(188, 156, 108, 0.2);
}

.servicio-card-v2 .e-n-accordion-item-title:active {
    transform: scale(0.97); 
}

.servicio-card-v2 .e-n-accordion-item[open] .e-n-accordion-item-title {
    background-color: #111111;
}

.servicio-card-v2 .e-n-accordion-item[open] .e-n-accordion-item-title-text,
.servicio-card-v2 .e-n-accordion-item[open] .e-n-accordion-item-title-icon i {
    color: #ffffff !important;
}

.servicio-card-v2 .e-n-accordion-item > div {
    padding: 16px 8px 0 8px !important;
}

.servicio-card-v2 .elementor-widget-text-editor p {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 12px;
}

.servicio-card-v2 .elementor-widget-text-editor p:last-child {
    margin-bottom: 0;
}


/* 5. Lista de características (Bloque inferior) */
.servicio-card-v2 .elementor-widget-icon-list {
    flex-grow: 1; /* Hace que la caja gris estire para rellenar el hueco */
    display: flex;
    flex-direction: column;
    background-color: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 0; /* Quitamos el 'auto' que empujaba hacia abajo */
}

/* Forzamos al contenedor interno de Elementor a heredar el crecimiento */
.servicio-card-v2 .elementor-widget-icon-list .elementor-widget-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Mantiene los textos alineados arriba */
}

.servicio-card-v2 .elementor-icon-list-item {
    padding-bottom: 16px;
    align-items: flex-start !important;
}

.servicio-card-v2 .elementor-icon-list-item:last-child {
    padding-bottom: 0;
}

.servicio-card-v2 .elementor-icon-list-icon {
    margin-top: 2px;
    color: #bc9c6c !important;
    font-size: 14px !important;
}

.servicio-card-v2 .elementor-icon-list-text {
    font-size: 13px !important;
    line-height: 1.5;
    color: #4a4a4a;
}



/* ==========================================================================
   TARJETAS DEL BLOG (POSTS) - NUEVO EFECTO DE IMAGEN (SIN DESENCAJES)
   ========================================================================== */

/* 1. Contenedor principal de la tarjeta */
.blog-grid-premium .elementor-post {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 16px; /* Marco perimetral interno */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 250ms ease-out, box-shadow 250ms ease-out;
}

/* Efecto hover de la tarjeta completa */
.blog-grid-premium .elementor-post:hover {
    border-color: #d4d4d4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px); /* Solo se mueve la tarjeta, no la imagen */
}

/* 2. Contenedores de la Imagen Destacada (Estrictamente blindados) */
.blog-grid-premium .elementor-post__thumbnail__link {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden !important;
    background-color: #f7f5f0; /* Fondo suave de carga */
}

.blog-grid-premium .elementor-post__thumbnail {
    padding-bottom: 0 !important; /* Anula el ratio nativo de Elementor que causa el salto */
    height: 440px !important; 
    width: 100% !important;
    margin: 0 !important;
}

/* 3. La Imagen y su NUEVO EFECTO EDITORIAL */
.blog-grid-premium .elementor-post__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    margin: 0 !important;
    border-radius: 12px;
    /* Usamos opacidad y filtro en lugar de transform: scale para evitar roturas */
    transition: opacity 300ms ease-out, filter 300ms ease-out !important;
}

/* Efecto al pasar el ratón: Descenso sutil de opacidad (ganando elegancia) */
.blog-grid-premium .elementor-post:hover .elementor-post__thumbnail img {
    opacity: 0.85 !important;
    filter: contrast(1.05) !important;
}

/* Accesibilidad */
.blog-grid-premium .elementor-post__thumbnail__link:focus-visible {
    outline: 2px solid #bc9c6c;
    outline-offset: 2px;
}

/* 4. Contenedor del texto (Flex-grow para equilibrar alturas) */
.blog-grid-premium .elementor-post__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    padding: 0 8px 8px 8px; /* Alineación óptica con la imagen */
}

/* 5. Titular del artículo */
.blog-grid-premium .elementor-post__title {
    margin-top: 0;
    margin-bottom: 12px;
}

.blog-grid-premium .elementor-post__title a {
    font-size: 20px;
    font-weight: 800;
    color: #111111;
    line-height: 1.3;
    letter-spacing: -0.3px;
    text-decoration: none;
    transition: color 200ms ease;
}

.blog-grid-premium .elementor-post__title a:hover {
    color: #bc9c6c; 
}

/* 6. Extracto (Excerpt) con puntos suspensivos */
.blog-grid-premium .elementor-post__excerpt {
    margin-bottom: 0;
}

.blog-grid-premium .elementor-post__excerpt p {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
    
    /* Efecto Ellipsis para limitar a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Puedes cambiar este número para mostrar más o menos líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}





/* ==========================================================================
   MENÚ DE CATEGORÍAS (TU DISEÑO ORIGINAL Y VALIDADO)
   ========================================================================== */

/* 1. Limpieza de elementos nativos */
body .sh-filtro img,
body .sh-filtro .count,
body .sh-filtro li:has(a[href*="uncategorized"]) {
    display: none !important;
}

/* 2. Contenedor de lista */
body .sh-filtro ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    margin-top: 50px !important;
}

body .sh-filtro ul li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important; 
}

/* 3. Área interactiva (Enlace como bloque sólido) */
body .sh-filtro ul li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 27px 16px !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 150ms ease-out !important;
}

/* 4. Control absoluto de la tipografía (H2) */
body .sh-filtro ul li a h2 {
    font-family: inherit !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 500 !important;
    color: #4b5563 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 20px !important;
    line-height: 1.2 !important;
    transition: color 150ms ease-out !important;
}

/* 5. Estados: Hover y Focus */
body .sh-filtro ul li a:hover,
body .sh-filtro ul li a:focus-visible {
    background-color: #f3f4f6 !important;
    outline: none !important;
}

body .sh-filtro ul li a:hover h2,
body .sh-filtro ul li a:focus-visible h2 {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   CATÁLOGO MODERNO - 2 COLUMNAS Y ORDEN ESTRICTO
   ========================================================================== */

/* 1. Limpieza total de elementos no deseados */
body .sh-catalogo .woocommerce-result-count,
body .sh-catalogo .woocommerce-ordering,
body .sh-catalogo .price,
body .sh-catalogo li:has(a[href*="uncategorized"]) {
    display: none !important;
}

/* 2. Cuadrícula principal (3 columnas en desktop) */
body .sh-catalogo ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 3. Tarjeta de producto unificada y contenida */
body .sh-catalogo ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

/* Contenedor general del resumen de Astra */
body .sh-catalogo ul.products li.product .astra-shop-summary-wrap {
    display: contents !important;
}



/* --------------------------------------------------------------------------
   SECUENCIA VISUAL ESTRICTA (CORREGIDA PARA HTML REAL)
   -------------------------------------------------------------------------- */

/* [POSICIÓN 1] LA IMAGEN */
body .sh-catalogo ul.products li.product .astra-shop-thumbnail-wrap {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    background-color: #f9fafb !important;
}

body .sh-catalogo ul.products li.product img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body .sh-catalogo ul.products li.product:hover img {
    transform: scale(1.03) !important;
}

body .sh-catalogo ul.products li.product .astra-shop-thumbnail-wrap > a:not(.woocommerce-LoopProduct-link),
body .sh-catalogo ul.products li.product .ast-on-card-button {
    display: none !important;
}

/* [POSICIÓN 2] EL TÍTULO DEL PRODUCTO (Aplicado al enlace contenedor) */
body .sh-catalogo ul.products li.product .ast-loop-product__link {
    order: 2 !important;
    display: block !important;
    text-decoration: none !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

body .sh-catalogo ul.products li.product .woocommerce-loop-product__title {
    font-family: inherit !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 650 !important;
    color: #111827 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    transition: color 150ms ease-out !important; 
}

/* [POSICIÓN 3] LA CATEGORÍA DESTACADA */
body .sh-catalogo ul.products li.product .ast-woo-product-category {
    order: 3 !important;
    display: inline-block !important;
    font-size: 0.625rem !important; /* 10px */
    font-weight: 700 !important;
    color: #374151 !important;
    background-color: #f3f4f6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    width: fit-content !important;
    text-align: left !important;
}

/* [POSICIÓN 4] EL FORMULARIO DE CAPACIDADES (Contenedor real del plugin) */
body .sh-catalogo ul.products li.product .cfvsw_variations_form {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important; /* Respiro antes del botón */
}

/* Quitamos márgenes residuales de la tabla del plugin */
body .sh-catalogo ul.products li.product .cfvsw_variations_form table,
body .sh-catalogo ul.products li.product .cfvsw_variations_form tbody,
body .sh-catalogo ul.products li.product .cfvsw_variations_form tr,
body .sh-catalogo ul.products li.product .cfvsw_variations_form td {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* [POSICIÓN 5] EL BOTÓN "VER PRODUCTO" */
body .sh-catalogo ul.products li.product .btn-catalogo {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 10px 12px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 75ms ease-out !important;
}

body .sh-catalogo ul.products li.product .btn-catalogo:hover {
    background-color: #374151 !important;
}

body .sh-catalogo ul.products li.product .btn-catalogo:active {
    transform: scale(0.98) !important;
}







/* ==========================================================================
   ADAPTABILIDAD RESPONSIVE (2 COLUMNAS EN MÓVIL Y TABLET)
   ========================================================================== */

@media (max-width: 1024px) {
    body .sh-catalogo ul.products { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    body .sh-catalogo ul.products { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
    }
    
    body .sh-catalogo ul.products li.product {
        padding: 10px !important;
    }
    
    body .sh-catalogo ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
    }
}


/* ==========================================================================
   FORZAR VISIBILIDAD ABSOLUTA DEL TÍTULO EN PLANTILLA DE PRODUCTO
   ========================================================================== */
body.single-product .elementor-widget-woocommerce-product-title,
body.single-product .elementor-widget-woocommerce-product-title .elementor-widget-container,
body.single-product .product_title,
body.single-product h1.entry-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ==========================================================================
   OCULTAR AVISOS DE STOCK EN MODO CATÁLOGO
   ========================================================================== */
body.single-product .stock,
body.single-product .out-of-stock,
body.single-product .woocommerce-notices-wrapper .woocommerce-info,
body.single-product .woocommerce-out-of-stock {
    display: none !important;
}

/* ==========================================================================
   ESTILOS SWATCHES DE CAPACIDADES - DISEÑO CORPORATIVO UI
   ========================================================================== */

/* 1. Contenedor general de las opciones */
body .cfvsw-swatches-container.cfvsw-product-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 16px 0 !important;
    align-items: center !important;
}

/* 2. Botón / Etiqueta de capacidad individual */
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    min-width: auto !important;
    min-height: auto !important;
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 3. Texto interno de la capacidad */
body .cfvsw-swatches-container .cfvsw-swatch-inner {
    font-family: inherit !important;
    font-size: 0.75rem !important; /* 12px */
    font-weight: 600 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
}

/* 4. Estados interactivos: Hover */
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option:hover {
    border-color: #111827 !important;
    background-color: #f9fafb !important;
}

body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option:hover .cfvsw-swatch-inner {
    color: #111827 !important;
}

/* 5. Estado seleccionado (Active / Selected por el plugin) */
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option.selected,
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option.active,
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option[selected] {
    background-color: #111827 !important;
    border-color: #111827 !important;
}

body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option.selected .cfvsw-swatch-inner,
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option.active .cfvsw-swatch-inner,
body .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-label-option[selected] .cfvsw-swatch-inner {
    color: #ffffff !important;
}

/* ==========================================================================
   MODO CATÁLOGO: OCULTAR AÑADIR AL CARRITO EN FICHA DE PRODUCTO
   ========================================================================== */

/* 1. Ocultar bloque de cantidad y botón de compra */
body.single-product .woocommerce-variation-add-to-cart,
body.single-product .single_add_to_cart_button,
body.single-product .quantity {
    display: none !important;
}

/* 2. Limpiar márgenes residuales del formulario */
body.single-product .variations_form {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
}

/* 3. Ocultar el texto de "Limpiar" opciones que a veces aparece */
body.single-product .reset_variations {
    display: none !important;
}


/* ==========================================================================
   PRODUCTOS RELACIONADOS - 4 COLUMNAS Y DISEÑO CLONADO
   ========================================================================== */

/* 1. Eliminar el título nativo de "Productos relacionados" y limpiar precios */
section.related.products > h2,
.elementor-widget-woocommerce-product-related > h2,
.related.products ul.products .price {
    display: none !important;
}

/* 2. Cuadrícula principal (4 columnas por defecto) */
.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 3. Estructura exacta de la tarjeta */
.related.products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

/* Liberar elementos del contenedor de Astra */
.related.products ul.products li.product .astra-shop-summary-wrap {
    display: contents !important;
}

/* --------------------------------------------------------------------------
   SECUENCIA VISUAL ESTRICTA
   -------------------------------------------------------------------------- */

/* [POSICIÓN 1] LA IMAGEN */
.related.products ul.products li.product .astra-shop-thumbnail-wrap {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    background-color: #f9fafb !important;
}

.related.products ul.products li.product img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.related.products ul.products li.product:hover img {
    transform: scale(1.03) !important;
}

.related.products ul.products li.product .astra-shop-thumbnail-wrap > a:not(.woocommerce-LoopProduct-link),
.related.products ul.products li.product .ast-on-card-button {
    display: none !important;
}

/* [POSICIÓN 2] EL TÍTULO */
.related.products ul.products li.product .ast-loop-product__link {
    order: 2 !important;
    display: block !important;
    text-decoration: none !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

.related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: inherit !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 650 !important;
    color: #111827 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    transition: color 150ms ease-out !important; 
}

/* [POSICIÓN 3] LA CATEGORÍA */
.related.products ul.products li.product .ast-woo-product-category {
    order: 3 !important;
    display: inline-block !important;
    font-size: 0.625rem !important; /* 10px */
    font-weight: 700 !important;
    color: #374151 !important;
    background-color: #f3f4f6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    width: fit-content !important;
    text-align: left !important;
}

/* [POSICIÓN 4] CAPACIDADES / VARIACIONES */
.related.products ul.products li.product .cfvsw_variations_form {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
}

.related.products ul.products li.product .cfvsw_variations_form table,
.related.products ul.products li.product .cfvsw_variations_form tbody,
.related.products ul.products li.product .cfvsw_variations_form tr,
.related.products ul.products li.product .cfvsw_variations_form td {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* [POSICIÓN 5] EL BOTÓN */
.related.products ul.products li.product .btn-catalogo {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 10px 12px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 75ms ease-out !important;
}

.related.products ul.products li.product .btn-catalogo:hover {
    background-color: #374151 !important;
}

.related.products ul.products li.product .btn-catalogo:active {
    transform: scale(0.98) !important;
}


/* ==========================================================================
   ADAPTABILIDAD RESPONSIVE: 4 -> 3 -> 3 -> 2 -> 2
   ========================================================================== */

/* Laptops / Pantallas medias (baja a 3 columnas) */
@media (max-width: 1200px) {
    .related.products ul.products { 
        grid-template-columns: repeat(3, 1fr) !important; 
    }
}

/* Tablets (mantiene 3 columnas, reduce gap) */
@media (max-width: 1024px) {
    .related.products ul.products { 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 16px !important;
    }
}

/* Móviles (baja a 2 columnas estrictas) */
@media (max-width: 767px) {
    .related.products ul.products { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
    }
    
    .related.products ul.products li.product {
        padding: 10px !important;
    }
    
    .related.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
    }
}



.sku_wrapper{display:none!important;}
.posted_in a{font-weight: bold!important;
}



/* ==========================================================================
   GALERÍA DE PRODUCTO - CARRUSEL HORIZONTAL MINIMALISTA
   ========================================================================== */

/* 1. Contenedor de miniaturas (Fila única desplazable) */
body.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    margin: 16px 0 0 0 !important;
    padding: 2px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    
    /* Ocultar la barra de desplazamiento nativa */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

body.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
}

/* 2. Cajas de las miniaturas */
body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 88px !important; /* Ancho fijo para mantener la forma */
    width: 88px !important;
    height: 88px !important;
    margin: 0 !important; 
    overflow: hidden !important;
    border-radius: 8px !important;
    scroll-snap-align: start !important; /* Anclaje perfecto al hacer scroll */
    cursor: pointer !important;
}

/* 3. Estilo de las imágenes y micro-interacciones */
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.5 !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: opacity 150ms ease-out, border-color 150ms ease-out !important;
}

/* Estado Hover */
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    opacity: 0.8 !important;
}

/* Estado Activo (La foto que se está viendo) */
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    opacity: 1 !important;
    border-color: #111827 !important; /* Borde oscuro marcando la selección */
}

/* ==========================================================================
   AJUSTE RESPONSIVE: MÓVIL
   ========================================================================== */
@media (max-width: 767px) {
    body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
        flex: 0 0 72px !important; /* Ligeramente más pequeñas en móvil */
        width: 72px !important;
        height: 72px !important;
    }
}






/* ==========================================================================
   PRODUCTOS EN LA HOME (WIDGET AISLADO) - 4 COLUMNAS Y DISEÑO CLONADO
   ========================================================================== */

/* 1. Limpieza de elementos (Precios) */
.sh-grid-home ul.products .price {
    display: none !important;
}

/* 2. Cuadrícula principal (4 columnas por defecto) */
.sh-grid-home ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sh-grid-home ul.products::before,
.sh-grid-home ul.products::after {
    display: none !important;
}

/* 3. Estructura exacta de la tarjeta */
.sh-grid-home ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
    width: 100% !important; 
    max-width: none !important;
}

/* Liberar elementos del contenedor de Astra */
.sh-grid-home ul.products li.product .astra-shop-summary-wrap {
    display: contents !important;
}

/* --------------------------------------------------------------------------
   SECUENCIA VISUAL ESTRICTA
   -------------------------------------------------------------------------- */

/* [POSICIÓN 1] LA IMAGEN */
.sh-grid-home ul.products li.product .astra-shop-thumbnail-wrap {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
    background-color: #f9fafb !important;
}

.sh-grid-home ul.products li.product img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    transition: transform 150ms ease-out !important;
}

.sh-grid-home ul.products li.product:hover img {
    transform: scale(1.03) !important;
}

.sh-grid-home ul.products li.product .astra-shop-thumbnail-wrap > a:not(.woocommerce-LoopProduct-link),
.sh-grid-home ul.products li.product .ast-on-card-button {
    display: none !important;
}

/* [POSICIÓN 2] EL TÍTULO */
.sh-grid-home ul.products li.product .ast-loop-product__link {
    order: 2 !important;
    display: block !important;
    text-decoration: none !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

.sh-grid-home ul.products li.product .woocommerce-loop-product__title {
    font-family: inherit !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 650 !important;
    color: #111827 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    transition: color 150ms ease-out !important; 
}

/* [POSICIÓN 3] LA CATEGORÍA */
.sh-grid-home ul.products li.product .ast-woo-product-category {
    order: 3 !important;
    display: inline-block !important;
    font-size: 0.625rem !important; /* 10px */
    font-weight: 700 !important;
    color: #374151 !important;
    background-color: #f3f4f6 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
    width: fit-content !important;
    text-align: left !important;
}

/* [POSICIÓN 4] CAPACIDADES / VARIACIONES */
.sh-grid-home ul.products li.product .cfvsw_variations_form {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
}

.sh-grid-home ul.products li.product .cfvsw_variations_form table,
.sh-grid-home ul.products li.product .cfvsw_variations_form tbody,
.sh-grid-home ul.products li.product .cfvsw_variations_form tr,
.sh-grid-home ul.products li.product .cfvsw_variations_form td {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* [POSICIÓN 5] EL BOTÓN */
.sh-grid-home ul.products li.product .btn-catalogo {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 10px 12px !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    font-size: 0.6875rem !important; /* 11px */
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 150ms ease-out, transform 75ms ease-out !important;
}

.sh-grid-home ul.products li.product .btn-catalogo:hover {
    background-color: #374151 !important;
}

.sh-grid-home ul.products li.product .btn-catalogo:active {
    transform: scale(0.98) !important;
}


/* ==========================================================================
   ADAPTABILIDAD RESPONSIVE: 4 -> 4 -> 3 -> 2
   ========================================================================== */

@media (max-width: 1200px) {
    .sh-grid-home ul.products { 
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 16px !important;
    }
}

@media (max-width: 1024px) {
    .sh-grid-home ul.products { 
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .sh-grid-home ul.products { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important;
    }
    
    .sh-grid-home ul.products li.product {
        padding: 10px !important;
    }
    
    .sh-grid-home ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
    }
}





/* ==========================================================================
   NUMERACIÓN PARA FONDOS OSCUROS (EFECTO GLASSMORPHISM) - AISLADO
   ========================================================================== */

/* 1. Contenedor Flex principal (Limitado solo a los banners de formación) */
.sh-banner-hover .ekit-wid-con .ekit-heading--title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 12px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #ffffff !important; 
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 2. La insignia del número: Cristal esmerilado translúcido */
.sh-banner-hover .ekit-wid-con .ekit-heading--title span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; 
    height: 40px !important;
    background-color: rgba(255, 255, 255, 0.15) !important; 
    backdrop-filter: blur(8px) !important; 
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important; 
    border-radius: 12px !important; 
    color: #ffffff !important;
    font-size: 1.125rem !important; 
    font-weight: 700 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    text-shadow: none !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   HOVER BANNERS FORMACIÓN (VERSIÓN INTENSA) - CLASE: sh-banner-hover
   ========================================================================== */

/* 1. Preparación del contenedor principal */
.sh-banner-hover {
    position: relative !important;
}

/* 2. Capa virtual de contraste (Overlay invisible por defecto) */
.sh-banner-hover::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important; 
    background-color: #000000 !important;
    opacity: 0 !important; 
    z-index: 0 !important; 
    pointer-events: none !important; 
    transition: opacity 300ms ease-out !important;
}

/* 3. Preparación del contenido interno (Caja de textos y botón) */
.sh-banner-hover > .e-con-inner {
    position: relative !important;
    z-index: 1 !important; 
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform !important;
}

/* --------------------------------------------------------------------------
   ESTADOS DE INTERACCIÓN (HOVER FUERTE)
   -------------------------------------------------------------------------- */

/* A. Oscurecimiento drástico del fondo */
.sh-banner-hover:hover::after {
    opacity: 0.75 !important; /* Pasamos del 35% al 75% de oscuridad. El fondo casi desaparecerá para resaltar los textos blancos */
}

/* B. Elevación y Escala (Zoom) evidente del contenido */
.sh-banner-hover:hover > .e-con-inner {
    transform: translateY(-12px) scale(1.03) !important; /* Sube el doble (12px) y crece un 3% hacia el usuario */
}


/* 
 * Denocheydia - CookieYes Master Overrides
 * Grid: 8px | Animaciones: 150ms bezier | SVG Inline | Defensive CSS
 */

/* --- BLINDAJE ESTRUCTURAL --- */
.cky-consent-container *,
.cky-btn-revisit-wrapper *,
.cky-preference-center * {
    box-sizing: border-box !important;
}

/* --- OCULTAR BRANDING ORIGINAL --- */
[data-cky-tag="powered-by"], 
[data-cky-tag="detail-powered-by"] {
    display: none !important;
}

/* --- BANNER PRINCIPAL --- */
.cky-consent-container.cky-box-bottom-left {
    max-width: 480px !important; 
    width: 100% !important;
    bottom: 24px !important;
    left: 24px !important;
    z-index: 999999 !important;
}

.cky-consent-container .cky-consent-bar {
    background-color: #0a0a0a !important;
    border: 1px solid #27272a !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7) !important;
    padding: 24px 24px 40px 24px !important; 
    position: relative !important;
}

/* Firma Denocheydia - Banner */
.cky-consent-container .cky-consent-bar::after {
    content: "Powered by Denocheydia" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #52525b !important;
    pointer-events: none !important;
}

/* Tipografía y Textos con Icono */
.cky-notice .cky-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.cky-notice .cky-title::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.cky-notice .cky-notice-des {
    color: #a1a1aa !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.cky-notice .cky-policy {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    font-weight: 500 !important;
    transition: color 0.15s ease-out !important;
}

.cky-notice .cky-policy:hover {
    color: #d4d4d8 !important;
}

/* --- BOTONERA ESCRITORIO --- */
.cky-notice-btn-wrapper, 
.cky-prefrence-btn-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 24px !important;
    width: 100% !important;
}

.cky-btn {
    flex: 1 1 0% !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    padding: 10px 4px !important; 
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.25, 1, 0.5, 1) !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.cky-btn:active {
    transform: scale(0.97) !important;
}

.cky-btn:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

.cky-btn-accept,
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
    background-color: #18181b !important;
    color: #ffffff !important;
    border: 1px solid #3f3f46 !important;
}

.cky-btn-accept:hover,
.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
    background-color: #27272a !important;
    border-color: #ffffff !important;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 576px) {
    .cky-consent-container.cky-box-bottom-left {
        max-width: calc(100% - 32px) !important; 
        bottom: 16px !important;
        left: 16px !important;
    }
    
    .cky-notice-btn-wrapper, 
    .cky-prefrence-btn-wrapper {
        flex-direction: column !important;
    }

    .cky-btn {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* --- MODAL (CENTRO DE PREFERENCIAS) --- */
.cky-preference-center {
    background-color: #0a0a0a !important;
    border: 1px solid #27272a !important;
    border-radius: 4px !important;
}

.cky-preference-header {
    border-bottom: 1px solid #27272a !important;
    padding: 24px !important;
}

.cky-preference-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}

.cky-preference-body-wrapper {
    padding: 24px !important;
}

.cky-preference-content-wrapper {
    color: #a1a1aa !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
}

.cky-show-desc-btn {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

.cky-accordion-header {
    background-color: transparent !important;
}

.cky-accordion-btn {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.cky-accordion-header-des {
    color: #a1a1aa !important;
    font-size: 13px !important;
}

.cky-always-active {
    color: #34d399 !important; 
}

.cky-audit-table {
    background-color: #121212 !important;
    border: 1px solid #27272a !important;
    color: #d4d4d8 !important;
    border-radius: 4px !important;
}

.cky-cookie-des-table {
    border-bottom: 1px solid #27272a !important;
}

.cky-cookie-des-table:last-child {
    border-bottom: none !important;
}

.cky-footer-shadow {
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, #0a0a0a 100%) !important;
}

.cky-footer-wrapper {
    background-color: #0a0a0a !important;
    border-top: 1px solid #27272a !important;
    padding: 24px 24px 40px 24px !important;
    position: relative !important;
}

/* Firma Denocheydia - Footer Modal */
.cky-footer-wrapper::after {
    content: "Powered by Denocheydia" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #52525b !important;
    pointer-events: none !important;
}

.cky-banner-btn-close img, .cky-btn-close img {
    filter: invert(1) opacity(0.6) !important;
    transition: filter 0.15s ease-out !important;
}

.cky-banner-btn-close:hover img, .cky-btn-close:hover img {
    filter: invert(1) opacity(1) !important;
}

/* --- BOTÓN FLOTANTE (REVISITAR CONSENTIMIENTO) --- */
.cky-btn-revisit-wrapper {
    background-color: #0a0a0a !important;
    border: 1px solid #27272a !important;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important; 
    width: 44px !important; 
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.15s ease-out !important;
    z-index: 999999 !important;
}

.cky-btn-revisit-wrapper:hover {
    background-color: #18181b !important;
    transform: scale(1.05) !important;
}

.cky-btn-revisit-wrapper:active {
    transform: scale(0.95) !important;
}

.cky-btn-revisit-wrapper img {
    display: none !important;
}

.cky-btn-revisit {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 50% !important;
}

.cky-btn-revisit:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}

.cky-btn-revisit::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* --- INTERRUPTORES (TOGGLES) --- */
.cky-switch input[type="checkbox"]:checked + .cky-slider {
    background-color: #ffffff !important;
}

.cky-switch input[type="checkbox"]:checked + .cky-slider:before {
    background-color: #0a0a0a !important;
}

.cky-switch .cky-slider {
    background-color: #18181b !important;
    border: 1px solid #3f3f46 !important;
}

.cky-switch .cky-slider:before {
    background-color: #a1a1aa !important;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.15s ease-out !important;
}

.cky-switch input[type="checkbox"]:focus-visible + .cky-slider {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
}


@media screen and (max-width:1620px) {
	

	
}


@media screen and (max-width:1200px) {
	
   
}


@media screen and (max-width:770px) {
   
    
}


@media screen and (max-width:768px) {
	
	
}


@media screen and (max-width:500px) {
	

}