/*
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. ==*/

/* --- OVERLAY DE DESENFOQUE (Cristal) --- */
/* Preparamos la capa invisible por defecto */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.3); /* Capa translúcida blanca */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 998; /* Debe estar por debajo de tu header (999) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    pointer-events: none; 
}

/* Cuando el JS inyecta la clase, activamos el desenfoque */
body.menu-is-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Permite detectar el clic para cerrar */
}

/* Protegemos el Header para que nunca se desenfoque */
.elementor-location-header, 
header, 
.she-header {
    position: relative;
    z-index: 9999 !important;
}


/* ==========================================
   SECCIÓN DE SERVICIOS - ESTÉTICA "AURA"
   ========================================== */

/* --- ESPACIADO MÍNIMO (5px forzado) --- */
.servicios .e-con,
.servicios .e-con-inner {
    gap: 5px !important;
}

/* --- TARJETA PRINCIPAL (Delicada y limpia) --- */
.servicios .elementor-widget-icon-box {
    box-shadow: 0px 10px 40px rgba(160, 120, 145, 0.03); /* Sombra ambiental cálida */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- EFECTO HOVER DE LA TARJETA --- */
.servicios .elementor-widget-icon-box:hover {
    transform: translateY(-3px); /* Levitación apenas perceptible */
    box-shadow: 0px 15px 45px rgba(160, 120, 145, 0.08);
    border-color: rgba(220, 185, 205, 0.3);
}

/* --- CONTENEDOR DEL ICONO --- */
.servicios .elementor-icon-box-icon {
    margin-bottom: 30px;
}

/* Base del icono donde anclamos el aura */
.servicios .elementor-icon-box-icon .elementor-icon {
    background-color: transparent;
    color: #bfa1b5; /* Tono malva muy apagado en reposo */
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.5s ease;
    position: relative; /* FUNDAMENTAL para que el aura no se escape */
    z-index: 2;
}

/* --- EL EFECTO "AURA" (Luz trasera) --- */
.servicios .elementor-icon-box-icon .elementor-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 85px; /* Tamaño del halo */
    height: 85px;
    background: radial-gradient(circle, rgba(248, 230, 240, 1) 0%, rgba(248, 230, 240, 0) 70%);
    border-radius: 50%;
    z-index: -1; /* Obliga a la luz a quedarse detrás */
    opacity: 0.6;
    transition: all 0.6s ease;
}

/* Etiqueta del icono (FontAwesome) para que siempre esté al frente */
.servicios .elementor-icon-box-icon i {
    font-size: 30px;
    position: relative;
    z-index: 10; 
}

/* --- EFECTO HOVER DEL ICONO Y AURA --- */
.servicios .elementor-widget-icon-box:hover .elementor-icon {
    color: #8c5a85; /* Violeta corporativo */
}

.servicios .elementor-widget-icon-box:hover .elementor-icon::before {
    transform: translate(-50%, -50%) scale(1.4); /* El aura crece suavemente */
    opacity: 1; /* La luz se intensifica */
}

/* --- TIPOGRAFÍA --- */
.servicios .elementor-icon-box-title {
    color: #5a4053; /* Ciruela apagado */
    font-weight: 400; /* Grosor fino para aportar elegancia */
    font-size: 21px;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
}

.servicios .elementor-icon-box-description {
    color: #8a7a85; /* Gris cálido/rosado */
    font-size: 15px;
    line-height: 1.75;
    font-weight: 300;
    margin: 0;
}




/* ==========================================================================
   FORMULARIO ÍNTIMO - COMPACTO Y DISCRETO
   ========================================================================== */

/* --- Rejilla Ultra-Compacta --- */
.int-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; /* Reducción extrema para máxima compacidad */
    width: 100%;
}

.int-form-grid .full-width { grid-column: span 2; }
.int-form-grid .half-width { grid-column: span 1; }

.int-form-grid .int-field {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Evita los saltos de línea incontrolados de CF7 */
.int-form-grid .wpcf7-form-control-wrap {
    display: block !important;
    width: 100%;
}

/* --- Campos de Entrada (Elegantes y de líneas finas) --- */
.int-form-grid input[type="text"],
.int-form-grid input[type="email"],
.int-form-grid input[type="tel"],
.int-form-grid select,
.int-form-grid textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    background-color: rgba(253, 250, 252, 0.6) !important; /* Blanco rubor translúcido */
    border: 1px solid #e0d5dd !important; /* Borde gris-rosado muy sutil */
    border-radius: 6px !important; /* Curva seca, moderna y limpia */
    color: #2c1d29 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: all 0.4s ease !important;
    box-sizing: border-box !important;
}

/* --- Interacción Discreta (Focus) --- */
.int-form-grid input:focus,
.int-form-grid select:focus,
.int-form-grid textarea:focus {
    background-color: #ffffff !important;
    border-color: #8c5a85 !important; /* Línea violeta corporativa */
    outline: none !important;
    box-shadow: 0 4px 15px rgba(140, 90, 133, 0.05) !important;
}

.int-form-grid ::placeholder {
    color: #a691a0 !important;
    opacity: 0.8;
    font-weight: 300;
}

/* --- Selector Moderno --- */
.int-form-grid select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c5a85' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    color: #a691a0 !important; /* Color inicial como placeholder */
}

.int-form-grid select:focus, 
.int-form-grid select:valid {
    color: #2c1d29 !important; /* Se oscurece al seleccionar */
}

.int-form-grid textarea {
    height: 100px !important; /* Muy compacto */
    resize: none !important; /* Bloqueado para mantener el orden visual */
}

/* --- Casilla de Privacidad --- */
.int-privacy label {
    display: flex;
    align-items: center;
    font-size: 13px !important;
    color: #8a7a85 !important;
    font-weight: 300;
    margin: 4px 0 0 0 !important;
    cursor: pointer;
}

.int-privacy input[type="checkbox"] {
    margin: 0 10px 0 0 !important;
    accent-color: #2c1d29; /* Checkbox en tono muy oscuro */
    width: 15px;
    height: 15px;
}

.int-privacy a {
    color: #8c5a85;
    text-decoration: none;
    margin-left: 3px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.int-privacy a:hover {
    border-color: #8c5a85;
}

/* --- Botón Elegante --- */
.int-form-grid input[type="submit"] {
    background-color: #2c1d29 !important; /* Ciruela casi negro, máxima elegancia */
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    margin-top: 8px;
}

.int-form-grid input[type="submit"]:hover {
    background-color: #5a4053 !important; /* Aclara suavemente */
}

/* ==========================================================================
   NOTIFICACIONES Y ERRORES (MODERNOS Y LIMPIOS)
   ========================================================================== */

/* Error debajo de cada campo (Tipografía técnica compacta) */
.wpcf7-not-valid-tip {
    color: #b03a56 !important; /* Tono vino/rosado oscuro */
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px !important;
    padding-left: 2px;
}

/* Contenedor global de respuesta (Sustituye la caja fea por un Banner Lateral) */
.wpcf7 form .wpcf7-response-output {
    margin: 15px 0 0 0 !important;
    padding: 14px 20px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: none !important;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

/* Formulario Enviado Correctamente (Éxito) */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #f5fcf8 !important; /* Fondo sutil menta/blanco */
    color: #2e5940 !important; /* Verde oscuro elegante */
    border-left: 4px solid #4a8260 !important; /* Línea indicadora izquierda */
}

/* Error o Fallo en el envío */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    background-color: #fdf7f8 !important; /* Fondo sutil rubor */
    color: #8a2a3f !important; /* Tono vino oscuro */
    border-left: 4px solid #b03a56 !important;
}

/* Ocultar el loader de CF7 por defecto para no romper el minimalismo */
.wpcf7-spinner {
    display: none !important;
}

/* --- Responsive Adaptable --- */
@media (max-width: 768px) {
    .int-form-grid {
        grid-template-columns: 1fr;
    }
    .int-form-grid .half-width {
        grid-column: span 1;
    }
    .int-form-grid input[type="submit"] {
        width: 100% !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: #8c5a85 !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;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    transition: all 0.3s ease !important;
}

/* Cuando la cabecera está arriba del todo (Fondo transparente) */
.she-header-transparent-yes .elementor-menu-toggle {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !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: #8c5a85 !important;
}



/* ==========================================================================
   SECCIÓN DE SERVICIOS - TARJETAS PREMIUM SAAS
   ========================================================================== */


/* --- 2. DISEÑO DE LA TARJETA (Widget Icon Box) --- */
.servicios .elementor-widget-icon-box {
    background-color: #ffffff !important;
    border: 1px solid rgba(140, 90, 133, 0.1) !important; /* Borde ultra-fino */
    border-radius: 24px !important; /* Curvatura amplia y elegante */
    padding: 45px 35px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 10px 30px rgba(140, 90, 133, 0.03) !important; /* Sombra base casi invisible */
    height: 100% !important;
}

/* Alineación del contenido (Diseño editorial izquierdo) */
.servicios .elementor-icon-box-wrapper {
    text-align: left !important;
}

/* --- 3. MICROINTERACCIÓN (Hover / Tocar la tarjeta) --- */
.servicios .elementor-widget-icon-box:hover {
    transform: translateY(-8px) !important; /* La tarjeta "levita" */
    box-shadow: 0 20px 40px rgba(140, 90, 133, 0.08) !important; /* Sombra envolvente */
    border-color: rgba(140, 90, 133, 0.25) !important; /* El borde se marca sutilmente */
}

/* --- 4. DISEÑO DEL ICONO (Encapsulado en burbuja) --- */
.servicios .elementor-icon-box-icon {
    margin: 0 0 30px 0 !important; /* Separación con el título */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 75px !important;
    height: 75px !important;
    background-color: #fbf8fa !important; /* Fondo rubor suave */
    border-radius: 20px !important; /* Forma squircle (cuadrado redondeado) */
    transition: all 0.4s ease !important;
    align-self: flex-start !important; /* Evita que se estire */
}

/* Icono interior (Símbolo) */
.servicios .elementor-icon i {
    font-size: 28px !important;
    color: #cc1939 !important; /* Violeta corporativo */
    transition: all 0.4s ease !important;
}

/* Interacción del icono al hacer hover en la tarjeta */
.servicios .elementor-widget-icon-box:hover .elementor-icon-box-icon {
    background-color: #cc1939 !important; /* El fondo se vuelve oscuro */
    border-radius: 50% !important; /* Se transforma en círculo perfecto */
}

.servicios .elementor-widget-icon-box:hover .elementor-icon i {
    color: #ffffff !important; /* El símbolo se vuelve blanco */
    transform: scale(1.1) !important; /* Crece un poquito */
}

/* --- 5. TIPOGRAFÍA CORPORATIVA --- */
/* Título del Servicio */
.servicios .elementor-icon-box-title {
    margin-bottom: 16px !important;
}

.servicios .elementor-icon-box-title span {
    color: #2c1d29 !important; /* Ciruela oscuro / casi negro */
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
}

/* Descripción del Servicio */
.servicios .elementor-icon-box-description {
    color: #6a5e68 !important; /* Tono grisáceo malva para fácil lectura */
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* --- 6. ADAPTACIÓN MÓVIL --- */
@media (max-width: 768px) {
    .servicios .e-con-inner {
        grid-template-columns: 1fr !important; /* Pasa a una sola columna */
        gap: 20px !important;
    }
    .servicios .elementor-widget-icon-box {
        padding: 35px 25px !important; /* Reduce márgenes internos en móvil */
    }
    .servicios .elementor-icon-box-title span {
        font-size: 20px !important;
    }
}


/* ==========================================================================
   PANELES DE INFORMACIÓN (ELEMENTSKIT) - ESTILO CORPORATIVO Y MISMA ALTURA
   ========================================================================== */

/* --- 1. IGUALAR ALTURAS Y ESTRUCTURA BASE --- */
/* Forzamos que el widget ocupe el 100% de la altura de su columna/contenedor */
.elementskit-infobox {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    
    /* Diseño visual del panel */
    background-color: #ffffff !important;
    border: 1px solid rgba(140, 90, 133, 0.12) !important;
    border-radius: 16px !important;
    padding: 35px 30px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 8px 25px rgba(140, 90, 133, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important; /* Limpieza para un look editorial */
}

/* El cuerpo interno también se estira para mantener la consistencia */
.elementskit-infobox .box-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: flex-start !important;
}

/* --- 2. DETALLE PREMIUM: LÍNEA CONDUCTORA LATERAL (Animada) --- */
/* Creamos una línea invisible a la izquierda que crecerá al interactuar */
.elementskit-infobox::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 0% !important;
    background-color: #8c5a85 !important; /* Violeta corporativo */
    transition: height 0.4s ease !important;
    border-radius: 16px 0 0 16px !important;
}

/* --- 3. MICROINTERACCIÓN (Hover) --- */
.elementskit-infobox:hover {
    transform: translateY(-6px) !important; /* Levitación sutil */
    box-shadow: 0 15px 35px rgba(140, 90, 133, 0.08) !important;
    border-color: rgba(140, 90, 133, 0.25) !important;
}

.elementskit-infobox:hover::before {
    height: 100% !important; /* La línea lateral se despliega completamente */
}

/* --- 4. TIPOGRAFÍA CORPORATIVA --- */
/* Título del Panel */
.elementskit-infobox .elementskit-info-box-title {
    color: #2c1d29 !important; /* Ciruela oscuro */
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
}

/* Texto Descriptivo */
.elementskit-infobox p {
    color: #6a5e68 !important; /* Malva grisáceo apagado */
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* --- 5. ADAPTACIÓN MÓVIL --- */
@media (max-width: 768px) {
    .elementskit-infobox {
        padding: 25px 20px !important; /* Reducimos aire interior para pantallas pequeñas */
    }
    .elementskit-infobox .elementskit-info-box-title {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   BLOG - DISEÑO CORPORATIVO Y VISUAL (NUEVA VERSIÓN)
   ========================================================================== */

/* --- 1. ESTRUCTURA DE LA TARJETA PRINCIPAL --- */
.blog-corporativo .elementor-post {
    background: #ffffff !important;
    border: 1px solid rgba(140, 90, 133, 0.15) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(140, 90, 133, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Hover: Levitación fluida de toda la tarjeta */
.blog-corporativo .elementor-post:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(140, 90, 133, 0.1) !important;
    border-color: rgba(140, 90, 133, 0.3) !important;
}

/* --- 2. IMAGEN DESTACADA (100% Nativa y Segura) --- */
/* Dejamos que Elementor controle la imagen, solo añadimos un velo muy sutil al pasar el ratón */
.blog-corporativo .elementor-post__thumbnail__link {
    position: relative !important;
    display: block !important;
}

.blog-corporativo .elementor-post__thumbnail__link::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(140, 90, 133, 0.1) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important; /* Permite hacer clic a través del velo */
}

.blog-corporativo .elementor-post:hover .elementor-post__thumbnail__link::after {
    opacity: 1 !important;
}

/* --- 3. CONTENEDOR DE TEXTO --- */
.blog-corporativo .elementor-post__text {
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* --- 4. METADATOS Y LIMPIEZA VISUAL --- */
.blog-corporativo .elementor-post__meta-data {
    color: #8c5a85 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    border: none !important;
    padding: 0 !important;
}

/* Ocultar elementos innecesarios (Avatar, comentarios y separadores) */
.blog-corporativo .elementor-post__meta-data span:after { 
    content: none !important; 
}
.blog-corporativo .elementor-post-avatar,
.blog-corporativo .elementor-post__meta-data .elementor-post-info__comments { 
    display: none !important; 
}

/* --- 5. TIPOGRAFÍA --- */
.blog-corporativo .elementor-post__title {
    margin-bottom: 16px !important;
}

.blog-corporativo .elementor-post__title a {
    color: #2c1d29 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

.blog-corporativo .elementor-post:hover .elementor-post__title a {
    color: #8c5a85 !important;
}

.blog-corporativo .elementor-post__excerpt p {
    color: #6a5e68 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-bottom: 28px !important;
    /* Límite de 3 líneas para alinear visualmente todas las tarjetas */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* --- 6. BOTÓN CORPORATIVO ALINEADO AL FONDO --- */
.blog-corporativo .elementor-post__read-more {
    margin-top: auto !important; /* Empuja el botón siempre hacia abajo */
    align-self: flex-start !important;
    background-color: #8c5a85 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.blog-corporativo .elementor-post__read-more:hover {
    background-color: #2c1d29 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 15px rgba(44, 29, 41, 0.15) !important;
    color: #ffffff !important;
}



/* =========================================================
   DISEÑO GRID DE TALLERES: BANNER PREMIUM (VERSIÓN GLOBAL)
   ========================================================= */

/* 1. La Tarjeta (Contenedor Base) */
.grid-talleres .elementor-post {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    min-height: 480px !important; /* Altura fija del banner */
    padding: 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    background-color: #1c121a !important; /* Color de fondo seguro */
}

/* Animación limpia: Solo levita la tarjeta al pasar el cursor */
.grid-talleres .elementor-post:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(140, 90, 133, 0.25) !important;
}

/* 2. Capa de la Imagen (Fondo 100% estático) */
.grid-talleres .elementor-post__thumbnail__link {
    position: absolute !important;
    inset: 0 !important; /* Atrapa la imagen a los 4 bordes */
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.grid-talleres .elementor-post__thumbnail {
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important; 
}

.grid-talleres .elementor-post__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* 3. Capa del Texto (Anclada abajo con fondo degradado oscuro) */
.grid-talleres .elementor-post__text {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    padding: 80px 30px 35px 30px !important;
    background: linear-gradient(to top, rgba(28, 18, 26, 0.98) 0%, rgba(28, 18, 26, 0.85) 50%, rgba(28, 18, 26, 0) 100%) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ocultar metadatos por defecto de Elementor */
.grid-talleres .elementor-post__meta-data {
    display: none !important;
}

/* =========================================================
   MAQUETACIÓN DE TIPOGRAFÍAS Y TEXTOS
   ========================================================= */

/* Titular Principal */
.grid-talleres .elementor-post__title {
    margin-bottom: 10px !important;
    order: 2 !important; /* Mueve el título por debajo del subtítulo */
}

.grid-talleres .elementor-post__title a {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
}

/* Contenedor del Extracto */
.grid-talleres .elementor-post__excerpt {
    margin-bottom: 22px !important;
    order: 3 !important;
}

/* Primera línea del extracto (Subtítulo superior) */
.grid-talleres .elementor-post__excerpt p:first-of-type {
    position: absolute !important;
    top: 55px !important; /* Colocado justo encima del titular */
    left: 30px !important;
    color: #d1b3cd !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 !important;
}

/* Cuerpo de la descripción (Texto completo) */
.grid-talleres .elementor-post__excerpt p:not(:first-of-type) {
    color: #e6e6e6 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important; 
    /* Hemos eliminado las reglas que cortaban el texto */
}

/* Botón de acción (Estilo Ghost Button elegante) */
.grid-talleres .elementor-post__read-more {
    order: 4 !important;
    align-self: flex-start !important;
    color: #ffffff !important;
    border: 2px solid #8c5a85 !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

.grid-talleres .elementor-post__read-more:hover {
    background: #8c5a85 !important;
    color: #ffffff !important;
}

/* =========================================================
   ETIQUETA DE CATEGORÍA AUTOMÁTICA (BADGE SUPERIOR)
   ========================================================= */

/* Base visual de la etiqueta flotante */
.grid-talleres .elementor-post::after {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 5 !important;
    background-color: #8c5a85 !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    pointer-events: none !important;
}

/* Nombres dinámicos basados en la categoría de WordPress */
/* Añade o modifica estas líneas según las categorías que vayas creando */
.grid-talleres .elementor-post.category-fitness-intimo::after {
    content: "Fitness Íntimo" !important;
}

.grid-talleres .elementor-post.category-maternidad::after {
    content: "Maternidad" !important;
}

.grid-talleres .elementor-post.category-sexologia::after {
    content: "Sexología" !important;
}
/* =========================================================
   NUEVA ETIQUETA: TIPO DE TALLER (BADGE SUPERIOR IZQUIERDO)
   ========================================================= */

/* 1. Base visual de la segunda etiqueta flotante (usando ::before) */
.grid-talleres .elementor-post::before {
    content: "" !important; /* Vacío por defecto hasta que detecte la clase */
    position: absolute !important;
    top: 20px !important;
    left: 20px !important; /* Esquina superior IZQUIERDA */
    z-index: 5 !important;
    
    /* Diseño visual (Invertimos colores para contraste) */
    background-color: rgba(255, 255, 255, 0.9) !important; /* Fondo blanco semi-transparente */
    color: #8c5a85 !important; /* Tu color ciruela para el texto */
    
    padding: 6px 14px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    pointer-events: none !important; /* Evita que bloquee clics */
    
    /* Oculto por defecto, solo aparece si coincide la etiqueta */
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

/* 2. Asignación del texto dinámico basado en la ETIQUETA (Tag) de WordPress */

/* Si el taller tiene la etiqueta 'Taller presencial' (slug: tag-taller-presencial) */
.grid-talleres .elementor-post.tag-taller-presencial::before {
    content: "Taller presencial" !important;
    opacity: 1 !important; /* Hacemos visible la etiqueta */
}

/* =========================================================
   OPCIONAL: Preparación para "Online" u otros tipos
   ========================================================= */

/* Si en el futuro añades la etiqueta 'Online' (slug: tag-online) */
.grid-talleres .elementor-post.tag-online::before {
    content: "Online" !important;
    opacity: 1 !important;
    /* Puedes cambiar el color para diferenciarlo si quieres */
    background-color: #8c5a85 !important; /* Invertido para Online */
    color: #ffffff !important;
}

/* =========================================================
   DISEÑO DE ETIQUETAS: SINGLE POST (TALLER INDIVIDUAL)
   ========================================================= */

/* 1. Base compartida para ambas etiquetas */
.badge-categoria .elementor-heading-title a,
.badge-modalidad .elementor-heading-title a {
    display: inline-block !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

/* Quitar márgenes por defecto de Elementor en los headings */
.badge-categoria .elementor-widget-container,
.badge-modalidad .elementor-widget-container {
    margin: 0 !important;
}
.badge-categoria .elementor-heading-title,
.badge-modalidad .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Estilo para la Categoría (Estilo Sólido) */
.badge-categoria .elementor-heading-title a {
    background-color: #8c5a85 !important;
    color: #ffffff !important;
    border: 2px solid #8c5a85 !important;
    box-shadow: 0 4px 10px rgba(140, 90, 133, 0.2) !important;
}

.badge-categoria .elementor-heading-title a:hover {
    background-color: transparent !important;
    color: #8c5a85 !important;
    transform: translateY(-2px);
}

/* 3. Estilo para la Modalidad/Etiqueta (Estilo Ghost / Borde) */
.badge-modalidad .elementor-heading-title a {
    background-color: transparent !important;
    color: #8c5a85 !important;
    border: 2px solid #e6c8e1 !important; /* Borde lila claro para no saturar */
}

.badge-modalidad .elementor-heading-title a:hover {
    background-color: #8c5a85 !important;
    border-color: #8c5a85 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}
/* =========================================================
   NUEVA ETIQUETA: TALLER ONLINE
   ========================================================= */
.grid-talleres .elementor-post.tag-taller-online::before {
    content: "Taller online" !important;
    opacity: 1 !important; /* Hace visible la etiqueta */
    
    /* Diseño invertido para diferenciarlo rápidamente del presencial */
    background-color: #ffffff !important; /* Fondo corporativo sólido */
    color: #8c5a85 !important; /* Texto en blanco */
}

/* =========================================================
   FICHA TÉCNICA DEL TALLER (LISTADO DE DATOS)
   ========================================================= */

/* 1. Contenedor principal de la ficha (Estilo Tarjeta) */
.ficha-datos-taller .elementor-widget-container {
    background-color: #fdfbfd !important; /* Fondo casi blanco con toque cálido */
    border: 1px solid #e6c8e1 !important; /* Borde lila corporativo muy suave */
    border-radius: 12px !important;
    padding: 30px !important;
    box-shadow: 0 5px 20px rgba(140, 90, 133, 0.05) !important;
}

/* 2. Estructura de las filas */
.ficha-datos-taller .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important; 
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(230, 200, 225, 0.4) !important; /* Separador de filas */
}

/* Ajustes para el primer y último elemento */
.ficha-datos-taller .elementor-icon-list-item:first-child {
    padding-top: 0 !important;
}

.ficha-datos-taller .elementor-icon-list-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 3. Diseño de los Iconos (Círculo resaltado) */
.ficha-datos-taller .elementor-icon-list-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(140, 90, 133, 0.1) !important; /* Fondo lila corporativo al 10% */
    color: #8c5a85 !important; /* Icono en color principal */
    border-radius: 50% !important;
    margin-right: 18px !important;
    flex-shrink: 0 !important; /* Evita que el círculo se deforme si el texto es largo */
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

/* Pequeña animación al pasar el cursor por la fila */
.ficha-datos-taller .elementor-icon-list-item:hover .elementor-icon-list-icon {
    transform: scale(1.1) !important;
    background-color: #8c5a85 !important;
    color: #ffffff !important;
}

/* 4. Tipografía de los datos */
.ficha-datos-taller .elementor-icon-list-text {
    color: #2c1d29 !important; /* Texto oscuro para máxima legibilidad */
    font-size: 15px !important;
    font-weight: 600 !important; /* Seminegrita para que los datos destaquen */
    line-height: 1.4 !important;
}

/* Reducimos un poco el peso de la aclaración en el precio */
.ficha-datos-taller .elementor-icon-list-item:last-child .elementor-icon-list-text {
    font-weight: 500 !important;
    color: #4a3b47 !important;
}

/* =========================================================
   NUEVO ESTILO VISUAL: PROCESO 3 COLUMNAS PREMIUM (ICONOS XL)
   ========================================================= */

/* 1. Título General de la sección */
.pasos-reserva-tarjetas .elementor-heading-title {
    color: #2c1d29 !important;
}

/* 2. Estructura estricta de 3 columnas y contador para los números */
.pasos-reserva-tarjetas .elementor-icon-list-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas exactas */
    gap: 5px !important;
    counter-reset: paso-reserva !important; /* Iniciamos un contador automático */
}

/* 3. La Tarjeta (Diseño moderno y limpio) */
.pasos-reserva-tarjetas .elementor-icon-list-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background-color: #ffffff !important;
    padding: 50px 10px 20px 10px !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(140, 90, 133, 0.1) !important;
    margin: 0 !important;
    counter-increment: paso-reserva !important; /* Suma 1 a cada tarjeta */
    overflow: hidden !important; /* Contiene la marca de agua */
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.pasos-reserva-tarjetas .elementor-icon-list-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(140, 90, 133, 0.15) !important;
}

/* 4. Marca de agua (Números gigantes 01, 02, 03 de fondo) */
.pasos-reserva-tarjetas .elementor-icon-list-item::before {
    content: "0" counter(paso-reserva) !important;
    position: absolute !important;
    top: -15px !important;
    right: -10px !important;
    font-size: 130px !important;
    font-weight: 900 !important;
    color: rgba(140, 90, 133, 0.04) !important; /* Lila corporativo muy transparente */
    line-height: 1 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 5. El Icono GIGANTE (Protagonista visual) */
.pasos-reserva-tarjetas .elementor-icon-list-icon {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important; /* Tamaño XL */
    height: 60px !important; /* Tamaño XL */
    background: linear-gradient(135deg, #8c5a85, #6a4264) !important; /* Degradado corporativo */
    color: #ffffff !important; /* Icono en blanco */
    border-radius: 24px !important; /* Cuadrado con bordes muy suaves */
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: 0 10px 20px rgba(140, 90, 133, 0.3) !important;
}

/* 6. Textos: Título de cada tarjeta (La etiqueta strong) */
.pasos-reserva-tarjetas strong {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    color: #2c1d29 !important;
    font-size: 20px !important; /* Titular más grande */
    font-weight: 800 !important;
    margin-bottom: 15px !important;
}

/* 7. Textos: Descripción */
.pasos-reserva-tarjetas .elementor-icon-list-text {
    position: relative !important;
    z-index: 1 !important;
    color: #6a5e68 !important;
    display: block !important;
}

/* =========================================================
   ADAPTACIÓN PARA MÓVILES Y TABLETS (Responsive)
   ========================================================= */

/* En tablets (pantallas medianas), lo pasamos a 1 columna o hacemos scroll */
@media (max-width: 1024px) {
    .pasos-reserva-tarjetas .elementor-icon-list-items {
        grid-template-columns: repeat(1, 1fr) !important; /* 1 debajo de otra en tablet/móvil */
        gap: 25px !important;
    }
}

/* =========================================================
   BOTONES DE INSCRIPCIÓN (DOBLE LLAMADA A LA ACCIÓN)
   ========================================================= */

/* 1. Base compartida para ambos botones */
.botones-inscripcion-premium .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 36px !important;
    border-radius: 50px !important; /* Botón tipo "píldora" muy actual */
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.4s ease !important;
    min-width: 240px !important; /* Para que ambos midan parecido */
}

/* Tamaño de los iconos en los botones */
.botones-inscripcion-premium .elementor-button-icon {
    font-size: 20px !important;
    margin-right: 12px !important;
}

/* 2. Botón 1: Formulario Web (Diseño Ghost / Secundario) */
.botones-inscripcion-premium .elementor-widget-button:nth-child(1) .elementor-button {
    background-color: transparent !important;
    color: #8c5a85 !important; /* Tu lila corporativo */
    border: 2px solid #8c5a85 !important;
    box-shadow: none !important;
}

.botones-inscripcion-premium .elementor-widget-button:nth-child(1) .elementor-button:hover {
    background-color: #8c5a85 !important;
    color: #ffffff !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(140, 90, 133, 0.25) !important;
}

/* 3. Botón 2: WhatsApp (Diseño Sólido / Primario) */
.botones-inscripcion-premium .elementor-widget-button:nth-child(2) .elementor-button {
    background-color: #25d366 !important; /* Verde oficial de WhatsApp (aporta confianza) */
    color: #ffffff !important;
    border: 2px solid #25d366 !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2) !important;
}

.botones-inscripcion-premium .elementor-widget-button:nth-child(2) .elementor-button:hover {
    background-color: #1ebe5d !important; /* Verde más oscuro al pasar el cursor */
    border-color: #1ebe5d !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35) !important;
}

/* =========================================================
   ADAPTACIÓN MÓVIL
   ========================================================= */
@media (max-width: 767px) {
    .botones-inscripcion-premium {
        flex-direction: column !important; /* Apilados uno encima del otro en móvil */
        align-items: center !important;
        width: 100% !important;
    }
    
    .botones-inscripcion-premium .elementor-widget-button {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    .botones-inscripcion-premium .elementor-button {
        width: 100% !important; /* Botones de ancho completo en móvil */
    }
}

/* =========================================================
   ACORDEÓN DEL TEMARIO Y LISTA DE SERVICIOS
   ========================================================= */

/* 1. Contenedor y estructura del acordeón */
.acordeon-temario-taller .e-n-accordion {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.acordeon-temario-taller .e-n-accordion-item {
    border: none !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(140, 90, 133, 0.05) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* 2. Cabecera (Summary) - Estado normal y Hover/Abierto */
.acordeon-temario-taller .e-n-accordion-item-title {
    padding: 20px 25px !important;
    background-color: #faf5fa !important;
    color: #2c1d29 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-left: 4px solid transparent !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    outline: none !important;
}

.acordeon-temario-taller .e-n-accordion-item-title:hover,
.acordeon-temario-taller .e-n-accordion-item[open] .e-n-accordion-item-title {
    background-color: #ffffff !important;
    border-left: 4px solid #8c5a85 !important;
    color: #8c5a85 !important;
}

/* 3. Diseño del Icono (+ y -) */
.acordeon-temario-taller .e-n-accordion-item-title-icon {
    color: #8c5a85 !important;
    font-size: 14px !important;
    background: rgba(140, 90, 133, 0.1) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.acordeon-temario-taller .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
    background: #8c5a85 !important;
    color: #ffffff !important;
    transform: rotate(180deg) !important;
}

/* 4. Zona de contenido interior */
.acordeon-temario-taller .e-n-accordion-item > div[role="region"] {
    padding: 0 30px 25px 30px !important;
    background-color: #ffffff !important;
}

/* =========================================================
   DISEÑO PREMIUM: LISTA DE SERVICIOS (INTERIOR DEL ACORDEÓN)
   ========================================================= */

.acordeon-temario-taller .lista-servicios ul {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;
}

.acordeon-temario-taller .lista-servicios li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 18px !important;
    color: #6a5e68 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.acordeon-temario-taller .lista-servicios li:last-child {
    margin-bottom: 0 !important;
}

/* El Punto Corporativo (Viñeta CSS) */
.acordeon-temario-taller .lista-servicios li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #8c5a85 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(140, 90, 133, 0.15) !important;
}

/* Días de la semana destacados (Etiqueta strong) */
.acordeon-temario-taller .lista-servicios strong {
    display: inline-block !important;
    color: #8c5a85 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    background-color: rgba(140, 90, 133, 0.08) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-right: 6px !important;
    margin-bottom: 4px !important;
}

.post-navigation{display:none;}


/* =========================================================
   MÓDULO DE PESTAÑAS (INFORMACIÓN DEL TALLER)
   ========================================================= */

/* 1. Contenedor de los botones (Cabecera de pestañas) */
.pestanas-info-taller .e-n-tabs-heading {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 0px !important;
    border: none !important;
    background: transparent !important;
}

/* 2. Diseño de cada Pestaña (Estilo "Píldora") */
.pestanas-info-taller .e-n-tab-title {
    background-color: transparent !important;
    border: 2px solid #e6c8e1 !important; /* Borde lila suave */
    padding: 12px 28px !important;
    border-radius: 40px !important;
    color: #6a5e68 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    justify-content: center !important;
}

/* Pestaña activa (Seleccionada) o al pasar el cursor */
.pestanas-info-taller .e-n-tab-title:hover,
.pestanas-info-taller .e-n-tab-title[aria-selected="true"] {
    background-color: #8c5a85 !important; /* Lila corporativo fuerte */
    border-color: #8c5a85 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(140, 90, 133, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* 3. Caja de Contenido Activo */
.pestanas-info-taller .e-n-tabs-content {
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(140, 90, 133, 0.05) !important;
    border: 1px solid rgba(140, 90, 133, 0.1) !important;
}

/* =========================================================
   TIPOGRAFÍA Y LISTAS DENTRO DE LAS PESTAÑAS
   ========================================================= */

/* Títulos internos (h3, h4) */
.pestanas-info-taller h3,
.pestanas-info-taller h4 {
    color: #2c1d29 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

/* Párrafos generales */
.pestanas-info-taller p {
    color: #6a5e68 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
}

/* Diseño Premium para las listas (ul, li) */
.pestanas-info-taller ul {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.pestanas-info-taller li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 16px !important;
    color: #6a5e68 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Viñeta corporativa con halo */
.pestanas-info-taller li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #8c5a85 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px rgba(140, 90, 133, 0.15) !important;
}

/* Textos en negrita dentro de las listas */
.pestanas-info-taller li strong {
    color: #2c1d29 !important;
    font-weight: 700 !important;
}

/* =========================================================
   ADAPTACIÓN MÓVIL
   ========================================================= */
/* =========================================================
   ADAPTACIÓN MÓVIL (CORRECCIÓN DEFINITIVA)
   ========================================================= */
@media (max-width: 767px) {
    /* 1. Cambiamos la estructura a columnas (apiladas) */
    .pestanas-info-taller .e-n-tabs-heading {
        flex-direction: column !important; /* Las pone una debajo de otra */
        align-items: stretch !important; /* Las estira para ocupar el ancho */
        gap: 0px !important; /* Espacio entre las pestañas */
        overflow: visible !important; /* Evita que se corten */
        width: 100% !important;
    }
    
    /* 2. Ajuste de cada botón-pestaña para móvil */
    .pestanas-info-taller .e-n-tab-title {
        width: 100% !important;
        white-space: normal !important; /* Permite que el texto se adapte */
        text-align: center !important;
        padding: 14px 20px !important;
    }

    /* 3. Reducimos el padding interior de la caja de contenido */
    .pestanas-info-taller .e-n-tabs-content {
        padding: 30px 20px !important; 
        margin-top: 10px !important; /* Un poco de aire extra respecto a la última pestaña */
    }
}



/*modulo accesibilidad*/
.onetap-container-toggle .onetap-toggle img.design-size1 {
  padding: 8px !important;
  width: 30px !important;
  height: 30px !important;
}
.onetap-desc{display:none!important;}
.onetap-hide-toolbar::before{display:none!important;}

/* ============= responsive ========================================================================= */


@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) {
	

}