.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#54595F;--e-global-color-text:#1D1D1D;--e-global-color-accent:#84CC7A;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-primary-font-size:3rem;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-letter-spacing:-0.025em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:2.25rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:2.5rem;--e-global-typography-secondary-letter-spacing:-0.025em;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-size:14px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;color:#000000;font-family:"Inter", Sans-serif;font-size:14px;font-weight:normal;line-height:20px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#84CC16;font-family:"Inter", Sans-serif;font-weight:600;line-height:24px;color:#000000;border-radius:10px 10px 10px 10px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#B1E457;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#9AE347;font-family:"Inter", Sans-serif;font-size:14px;font-weight:600;}.elementor-kit-6 h1{color:#000000;font-family:"Inter", Sans-serif;font-size:48px;font-weight:800;line-height:48px;letter-spacing:-1.2px;}.elementor-kit-6 h2{color:#000000;font-family:"Inter", Sans-serif;font-size:30px;font-weight:700;line-height:40px;letter-spacing:-0.9px;}.elementor-kit-6 h3{color:#000000;font-family:"Inter", Sans-serif;font-size:18px;font-weight:600;line-height:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================
   0. CARGA DE FUENTES (IMPORTANTE: ESTO DEBE IR ARRIBA DEL TODO)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;700;800&display=swap');

/* =========================================
   1. VARIABLES Y GLOBALES
   ========================================= */
:root {
    --color-black: #000000;
    --color-lime: #A3E635;
    --color-gray-700: #374151;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif; /* Faltaba definir esta variable */
}

/* Forzar la tipografía en todo el cuerpo de la web por si acaso */
body {
    font-family: var(--font-body) !important;
}

/* H1 Principal */
h1 {
    font-family: var(--font-display) !important; /* Forzamos Outfit */
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-black);
    margin-bottom: 24px;
    display: block;
}
/* =========================================
   2. ETIQUETAS Y TÍTULOS DE SECCIÓN (CORREGIDO PARA ELEMENTOR)
   ========================================= */

/* 1. ETIQUETA PEQUEÑA (KICKER) - "MI ENFOQUE" / "EL DESAFÍO" */
/* Estilo para el H4 que vive DENTRO del widget .section-label */
.section-label h4,
.section-label .elementor-heading-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #374151 !important; /* Gris por defecto */
    margin-bottom: 0 !important;
}

/* El punto verde (ahora se lo ponemos al título, no a la caja) */
.section-label h4::before,
.section-label .elementor-heading-title::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #A3E635 !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

/* 2. TÍTULO GRANDE (H2) */
/* Estilo para el H2 que vive DENTRO del widget .section-title */
.section-title h2,
.section-title .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important; /* Menos margen, el CSS de tarjeta ya separa */
    font-size: 40px !important;
    color: #000000 !important;
}

/* 3. MODO OSCURO AUTOMÁTICO */
/* Si la sección padre tiene .modo-oscuro, cambiamos los colores de lo de dentro */

/* Etiqueta se vuelve VERDE LIMA */
.modo-oscuro .section-label h4,
.modo-oscuro .section-label .elementor-heading-title {
    color: #A3E635 !important;
}

/* Título H2 se vuelve BLANCO */
.modo-oscuro .section-title h2,
.modo-oscuro .section-title .elementor-heading-title {
    color: #FFFFFF !important;
    font-size: 44px !important; /* Un poco más grande en oscuro */
}

/* 4. AJUSTES RESPONSIVE */
@media (max-width: 768px) {
    .section-title h2,
    .section-title .elementor-heading-title,
    .modo-oscuro .section-title h2 {
        font-size: 32px !important;
    }
}

@media (max-width: 480px) {
    .section-title h2,
    .section-title .elementor-heading-title,
    .modo-oscuro .section-title h2 {
        font-size: 26px !important;
    }
}

/* =========================================
   3. TEXTOS GENERALES EN MODO OSCURO
   ========================================= */
/* Párrafo de introducción (fuera de las tarjetas) */
.problem-intro,
.modo-oscuro .problem-intro {
    font-size: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 48px !important;
    line-height: 1.7 !important;
    font-family: 'Inter', sans-serif !important;
}

/* =========================================
   4. TARJETAS DE PROBLEMA (VERSIÓN COMPACTA)
   ========================================= */
/* La Caja Blanca */
.modo-oscuro .problem-card {
    background-color: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 32px 24px !important; /* Relleno ajustado */
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    height: 100% !important;
    transition: transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* El Icono Verde (Pequeño y ajustado) */
.modo-oscuro .problem-card .elementor-widget-icon {
    margin-bottom: 16px !important;
    width: auto !important;
}

.modo-oscuro .problem-card .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #A3E635 !important;
    border-radius: 12px !important;
    color: #000000 !important;
    font-size: 20px !important;
    box-shadow: 0 4px 12px rgba(163, 230, 53, 0.4) !important;
}

/* El Título H3 (Pegado al texto) */
.modo-oscuro .problem-card h3,
.modo-oscuro .problem-card .elementor-heading-title {
    color: #000000 !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important; /* Mínimo espacio abajo */
    padding: 0 !important;
}

/* El Texto Párrafo (Compacto) - VERSIÓN SUPER ESPECÍFICA */
/* Añadimos "body" delante para que tenga más peso que ninguna otra regla */
body .modo-oscuro .problem-card .elementor-widget-text-editor,
body .modo-oscuro .problem-card .elementor-widget-text-editor .elementor-text-editor,
body .modo-oscuro .problem-card .elementor-widget-text-editor p {
    color: #374151 !important; /* Gris oscuro */
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* Aseguramos también el Título por si acaso */
body .modo-oscuro .problem-card h3,
body .modo-oscuro .problem-card .elementor-heading-title {
    color: #000000 !important;
}

/* Efecto Hover (Línea verde vertical) */
.modo-oscuro .problem-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 6px !important;
    height: 100% !important;
    background: #A3E635 !important;
    transform: scaleY(0) !important;
    transform-origin: top !important;
    transition: transform 0.3s ease !important;
}

.modo-oscuro .problem-card:hover::before {
    transform: scaleY(1) !important;
}

.modo-oscuro .problem-card:hover {
    transform: translateY(-5px) !important;
}

/* =========================================
   5. ANIMACIONES
   ========================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out !important;
    animation-fill-mode: both !important;
}

.delay-2 { animation-delay: 0.2s !important; }
/* =========================================
   6. SECCIÓN TARGET (REPARACIÓN QUIRÚRGICA)
   ========================================= */

/* --- 1. RESTAURAR MAQUETA (Caja y Flecha) --- */
.target-card {
    border: 2px solid rgba(163, 230, 53, 0.3) !important;
    position: relative !important;
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.15) 0%, rgba(163, 230, 53, 0.05) 100%) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

.target-card::before {
    content: '→' !important;
    position: absolute !important;
    top: 5px !important;
    right: 15px !important;
    font-size: 40px !important;
    color: #A3E635 !important;
    opacity: 0.15 !important;
    font-weight: 800 !important;
    z-index: 1 !important; /* Asegura que se vea */
}

/* --- 2. EL TEXTO (Atacamos solo la clase 'fino-blanco') --- */
/* Esta parte es la que encoge la letra sin romper el resto */
.target-card .fino-blanco, 
.target-card .fino-blanco p,
.target-card .fino-blanco .elementor-text-editor {
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    
    /* Forzamos las variables de Elementor para que no las pise el sistema global */
    --typography-font-size: 15px !important;
    --typography-font-weight: 300 !important;
    --font-size: 15px !important;
    --font-weight: 300 !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 3. NEGRITAS (Verdes y del mismo tamaño) --- */
.target-card .fino-blanco strong, 
.target-card .fino-blanco b {
    color: #A3E635 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    --typography-font-weight: 700 !important;
}

/* Separador de sección para que no se pegue arriba */
.target-section-container {
    margin-top: 80px !important;
    padding-top: 60px !important;
    border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
}
/* =========================================
   7. SECCIÓN MI ENFOQUE (Lista y destacados)
   ========================================= */

/* Ajuste de contenedor para que no se pegue a los bordes */
.approach-content {
    max-width: 800px; /* Limitamos el ancho para que sea más legible */
    margin: 0 auto; /* Centrado si quieres, o quítalo para alinear a la izq */
}

/* 1. La Lista con Flechas */
/* Usa un widget de texto y crea una lista <ul> normal */
.approach-list ul {
    list-style: none !important; /* Quitamos los puntos negros */
    padding: 0 !important;
    margin: 32px 0 !important;
}

.approach-list li {
    position: relative !important;
    padding-left: 24px !important; /* Hueco para la flecha */
    margin-bottom: 12px !important;
    font-size: 16px !important; /* Tamaño legible pero compacto */
    color: #374151 !important; /* Gris oscuro */
    line-height: 1.6 !important;
    font-family: 'Inter', sans-serif !important;
}

/* La flecha verde */
.approach-list li::before {
    content: '→' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0px !important; /* Ajustar según alineación visual */
    color: #A3E635 !important; /* Verde Lima */
    font-weight: 800 !important;
    font-family: sans-serif !important; /* Fuente segura para símbolos */
}

/* 2. El Texto Destacado Final (Fondo suave + Texto Verde) */
.approach-highlight {
    font-size: 18px !important;
    font-weight: 700 !important; /* Un poco más gordita */
    color: #000000 !important;
    margin-top: 40px !important;
    font-family: 'Inter', sans-serif !important;
}

/* La palabra con fondo verde y texto verde */
.approach-highlight .highlight {
    background-color: rgba(163, 230, 53, 0.15) !important; /* Fondo verde muy suave */
    color: #65a30d !important; /* Verde lima oscurecido para que se lea bien sobre blanco */
    padding: 2px 8px !important;
    border-radius: 6px !important;
    box-decoration-break: clone;
}
/* =========================================
   8. SECCIÓN DETALLES DEL SERVICIO (7 Tarjetas)
   ========================================= */

/* Estilo para el Subtítulo grande (H3) */
.service-subtitle,
.service-subtitle .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 48px !important;
    color: #000000 !important;
    text-align: center !important; /* Centrado suele quedar mejor aquí */
}

/* LA TARJETA DEL SERVICIO */
.service-card {
    background-color: #FFFFFF !important;
    border: 2px solid #E9ECEF !important; /* Borde gris base */
    border-radius: 24px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
    height: 100% !important; /* Altura igualada */
    display: flex !important;
    flex-direction: column !important;
}

/* Efecto Hover */
.service-card:hover {
    border-color: #A3E635 !important; /* Borde Verde */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-5px) !important;
}

/* Título de la tarjeta */
.service-card h3,
.service-card .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    color: #000000 !important;
}

/* Texto de la tarjeta */
.service-card p,
.service-card .elementor-widget-text-editor {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    margin-bottom: 0 !important;
    flex-grow: 1 !important;
}
/* =========================================
   9. SECCIÓN METODOLOGÍA (Versión Centrada Verticalmente)
   ========================================= */

/* El contenedor de cada fila/paso */
.step-item {
    display: flex !important;
    align-items: center !important; /* CAMBIO CLAVE: Centrado vertical */
    gap: 24px !important;
    margin-bottom: 32px !important;
    max-width: 900px !important;
}

/* El Círculo Verde con el Número */
.step-number,
.step-number .elementor-heading-title {
    width: 56px !important;
    height: 56px !important;
    background-color: #A3E635 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* El Título del Paso */
.step-item h3,
.step-item .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important; /* Espacio mínimo con el texto */
    margin-top: 0 !important; /* Quitamos el ajuste manual, Flexbox ya lo centra */
    color: #000000 !important;
    line-height: 1.2 !important;
}

/* El Texto del Paso */
.step-item p,
.step-item .elementor-widget-text-editor {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    margin-bottom: 0 !important;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .step-item {
        gap: 16px !important;
        align-items: flex-start !important; /* En móvil suele quedar mejor arriba si el texto dobla */
    }
    .step-item h3 {
         margin-top: 8px !important; /* Pequeño ajuste solo para móvil */
    }
}
/* =========================================
   10. SECCIÓN PRECIOS (CÓDIGO COMPLETO REPARADO)
   ========================================= */

/* 1. Estilo Base de TODAS las Tarjetas */
.pricing-card {
    background-color: #FFFFFF !important; /* Blanco forzoso */
    background: #FFFFFF !important; /* Refuerzo anti-gradientes */
    padding: 40px 32px !important;
    border-radius: 24px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
}

/* Hover suave en todas */
.pricing-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

/* 2. TARJETA DESTACADA (La del medio) - CLASE 'featured' */
/* Asegúrate de que el contenedor tiene la clase: pricing-card featured */
.pricing-card.featured {
    background-color: #FFFFFF !important; /* BLANCO IMPERATIVO */
    border: 3px solid #A3E635 !important; /* Solo el borde es verde */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    z-index: 2 !important;
    margin-top: -10px !important; /* Truco visual: la hace parecer un poco más alta */
    padding-top: 50px !important; /* Espacio extra arriba para la etiqueta */
}

/* La etiqueta "MÁS ELEGIDO" */
.pricing-card.featured::before {
    content: 'MÁS ELEGIDO' !important;
    position: absolute !important;
    top: -16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #A3E635 !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    z-index: 10 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
}

/* 3. Estilos de Contenido (Títulos, Precio, Lista) */
.pricing-card h3,
.pricing-card .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    z-index: 5 !important;
}

.pricing-card p,
.pricing-card .elementor-widget-text-editor {
    text-align: center !important;
    font-size: 14px !important;
    color: #6B7280 !important;
    margin-bottom: 24px !important;
    line-height: 1.5 !important;
    z-index: 5 !important;
}

/* Caja del Precio (Verde) */
.pricing-box {
    background-color: #A3E635 !important;
    color: #000000 !important;
    text-align: center !important;
    padding: 16px !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    margin-bottom: 32px !important;
    display: block !important;
}

.pricing-box span {
    font-size: 14px !important;
    font-weight: 600 !important;
    opacity: 0.8 !important;
    display: block !important;
}

/* Lista de características */
.pricing-features ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.pricing-features li {
    position: relative !important;
    padding-left: 28px !important;
    margin-bottom: 14px !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
}

.pricing-features li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #65a30d !important;
    font-weight: 800 !important;
    font-size: 18px !important;
}

/* =========================================
   12. SECCIÓN FAQ (SOLUCIÓN FINAL: CAJA RESTAURADA)
   ========================================= */

/* --- 1. RESTAURACIÓN DE LA CAJA EXTERIOR --- */
/* Aplicamos el estilo base al contenedor principal 'details' */
.faq-accordion .e-n-accordion-item {
    background-color: #FFFFFF !important; /* Fondo blanco forzado */
    border: 2px solid #E9ECEF !important; /* Borde gris base por defecto */
    border-radius: 20px !important; /* Esquinas redondeadas */
    margin-bottom: 16px !important; /* Separación entre items */
    overflow: hidden !important;
    transition: all 0.3s ease !important; /* Transición suave para hover y apertura */
}

/* ESTADOS HOVER Y ABIERTO: Cambiamos el borde a VERDE LIMA */
.faq-accordion .e-n-accordion-item:hover,
.faq-accordion .e-n-accordion-item[open] {
    border-color: #A3E635 !important;
}

/* --- 2. LIMPIEZA INTERNA (Sin rayas molestas) --- */
/* Aseguramos que el título y el contenido NO tengan bordes propios */
.faq-accordion .e-n-accordion-item-title,
.faq-accordion .e-n-accordion-item > div[role="region"] {
    border: none !important;
    box-shadow: none !important;
}

/* --- 3. EL TÍTULO (Pregunta) --- */
.faq-accordion .e-n-accordion-item-title {
    padding: 24px 32px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: transparent !important; /* Transparente para que se vea el blanco de la caja */
}

.faq-accordion .e-n-accordion-item-title-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* --- 4. LA RESPUESTA (Con la sangría "graciosa") --- */
.faq-accordion .e-n-accordion-item > div[role="region"] {
    padding-top: 0 !important;
    padding-bottom: 32px !important;
    padding-right: 32px !important;
    /* La sangría mágica de 64px a la izquierda */
    padding-left: 64px !important;
    margin: 0 !important;
}

/* Ajuste del texto interno para que no añada márgenes extra */
.faq-accordion .elementor-widget-text-editor,
.faq-accordion .elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    margin: 0 !important;
}

/* --- 5. EL ICONO (Bola Lima) --- */
.faq-accordion .e-n-accordion-item-title-icon {
    width: 36px !important;
    height: 36px !important;
    background-color: #A3E635 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.faq-accordion .e-n-accordion-item-title-icon svg {
    width: 14px !important;
    fill: #000000 !important;
}

/* ESTADO ABIERTO (Bola negra y signo verde) */
.faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
    background-color: #000000 !important;
}

.faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
    fill: #A3E635 !important;
}
/* =========================================
   13. CTA FINAL (Selector de Alta Prioridad)
   ========================================= */

/* Atacamos con toda la ruta completa para obligar al navegador */
.final-cta-section .elementor-widget-heading h2.elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 40px !important;
    line-height: 1.2 !important;
    color: #000000 !important;
    text-transform: none !important; /* Por si acaso hay una mayúscula forzada */
    margin-bottom: 24px !important;
    letter-spacing: -0.5px !important; /* Un toque estético para títulos grandes */
}

/* Texto del párrafo */
.final-cta-section .elementor-widget-text-editor,
.final-cta-section .elementor-widget-text-editor p {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    color: #000000 !important;
    line-height: 1.6 !important;
}

/* Botón */
.final-cta-section .elementor-button {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
/* =========================================
   14. CORRECCIÓN MÓVIL FINAL (LISTA Y ICONOS)
   ========================================= */

@media (max-width: 768px) {
    /* 1. Desactivamos Flexbox en la tarjeta destacada para evitar el desplazamiento */
    .pricing-card.featured {
        display: block !important; 
        margin-top: 30px !important; 
        padding-top: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        height: auto !important;
    }

    /* 2. El widget de texto ocupa todo el ancho */
    .pricing-card.featured .elementor-widget-text-editor {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* 3. La lista se comporta como bloque */
    .pricing-card.featured .pricing-features {
        display: block !important;
        width: 100% !important;
    }

    /* 4. Reseteo de sangrías */
    .pricing-card.featured .pricing-features ul {
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* 5. EL ÍTEM (FLEX): Alineamos icono y texto horizontalmente */
    .pricing-card.featured .pricing-features li {
        display: flex !important; /* Flex para poner uno al lado del otro */
        align-items: flex-start !important; /* Alineados arriba */
        width: 100% !important;
        padding-left: 0 !important; /* Quitamos el hueco antiguo */
        margin-bottom: 10px !important;
    }

    /* 6. CORRECCIÓN DEL ICONO (El fallo actual) */
    .pricing-card.featured .pricing-features li::before {
        position: static !important; /* IMPORTANTE: Ya no flota, ocupa espacio real */
        display: inline-block !important;
        margin-right: 12px !important; /* Empuja el texto a la derecha */
        flex-shrink: 0 !important; /* Evita que se aplaste */
        width: auto !important; /* Tamaño natural */
        height: auto !important;
        transform: translateY(2px) !important; /* Pequeño ajuste óptico para centrar con la letra */
    }
}
/* =========================================
   RESETEO ABSOLUTO PARA SPAN INTERNO (CON MARGEN)
   ========================================= */

.texto-fino-fuerza {
    /* Hacemos que se comporte como bloque para aceptar margen superior */
    display: inline-block !important;
    margin-top: 12px !important; /* Espacio por arriba */
    
    /* Propiedades de texto */
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important; /* Un pelín más de interlineado para que respire */
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;

    /* Reset de variables de Elementor */
    --typography-font-size: 15px !important;
    --font-size: 15px !important;
    --typography-font-weight: 300 !important;
    --font-weight: 300 !important;
    
    text-transform: none !important;
}

/* Estilo de las negritas */
.texto-fino-fuerza strong, 
.texto-fino-fuerza b {
    color: #A3E635 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    --font-weight: 700 !important;
}

/* =========================================
   HOME SERVICIOS: PILARES DEL SISTEMA (01, 02...)
   ========================================= */
.pillar-card {
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important;
    border-radius: 24px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.pillar-card:hover {
    border-color: #A3E635 !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.pillar-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #A3E635 0%, #7CB518 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #000000;
}

/* =========================================
   HOME SERVICIOS: TARJETAS DE SERVICIO PRINCIPALES
   ========================================= */
.home-service-card {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 32px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.home-service-card:hover {
    border-color: #A3E635 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* El precio y títulos */
.service-price {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #A3E635;
    margin-bottom: 16px;
}

/* Los cuadros de "Es para ti / No es para ti" */
.service-check-box {
    background: #F8F9FA !important;
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
}

.service-check-box-title {
    font-weight: 600;
    font-size: 13px;
    color: #000000;
    margin-bottom: 5px;
    display: block;
}

.service-check-box p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* =========================================
   HOME SERVICIOS: PASOS DEL PROCESO
   ========================================= */
.process-step-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #A3E635 0%, #7CB518 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    margin: 0 auto 24px;
    box-shadow: 0 12px 24px rgba(163, 230, 53, 0.3);
}
/* =========================================
   HOME SERVICIOS: SECCIÓN SISTEMA (PILARES 01-04)
   ========================================= */

/* El contenedor principal de la sección */
.system-section-bg {
    background-color: #E9ECEF !important; /* Gris claro de fondo */
    padding: 80px 0 !important;
}

/* La Tarjeta Blanca */
.pillar-card {
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important;
    border-radius: 24px !important;
    padding: 32px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Efecto Hover: Borde lima y levante */
.pillar-card:hover {
    border-color: #A3E635 !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

/* El círculo del número */
.pillar-number {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #A3E635 0%, #7CB518 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    color: #000000 !important;
    box-shadow: 0 8px 16px rgba(163, 230, 53, 0.3);
}

/* Tipografía interna de la tarjeta */
.pillar-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    color: #000000 !important;
}

.pillar-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}
/* =========================================
   HOME SERVICIOS: GRID DE SERVICIOS (TARJETAS CON PRECIO)
   ========================================= */

/* 1. LA TARJETA PRINCIPAL */
.home-service-card {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 40px !important;
    border: 2px solid #E9ECEF !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Barra superior que aparece al hacer hover */
.home-service-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #A3E635 0%, #7CB518 100%) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s ease !important;
}

.home-service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: #A3E635 !important;
}

.home-service-card:hover::before {
    transform: scaleX(1) !important;
}

/* 2. PRECIO Y TÍTULOS */
.service-price {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #A3E635 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

.home-service-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    color: #000000 !important;
}

/* 3. CAJAS INTERNAS (Es para ti / No es para ti) */
.service-status-box {
    background-color: #F8F9FA !important;
    padding: 20px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
}

.service-status-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Forzamos texto pequeño en las cajas internas */
.service-status-box p, 
.service-status-box span {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    margin: 0 !important;
}

/* 4. LISTA DE PUNTOS CLAVE */
.service-features-list {
    list-style: none !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.service-features-list li {
    font-size: 15px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.service-features-list li::before {
    content: '✓' !important;
    color: #A3E635 !important;
    font-weight: 900 !important;
}
/* =========================================
   HOME SERVICIOS: CABECERA SECCIÓN SERVICIOS
   ========================================= */

.services-section {
    background-color: #FFFFFF !important;
    padding: 80px 24px !important;
}

/* Título principal de la sección */
.services-section .section-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 44px !important; /* Un poco más grande que los otros para destacar */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #000000 !important;
    margin-bottom: 56px !important;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para que la etiqueta de sección respire */
.services-section .section-label {
    margin-bottom: 24px !important;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .services-section .section-title {
        font-size: 32px !important;
        margin-bottom: 40px !important;
    }
}
/* =========================================
   ESTILOS FINALES PARA HOME-SERVICE-CARD
   ========================================= */

/* Forzar el estilo de la lista de iconos */
.service-features-list .elementor-icon-list-item {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    align-items: flex-start !important;
}

.service-features-list .elementor-icon-list-icon i {
    color: #A3E635 !important;
    font-size: 16px !important;
}

/* Estilo para las cajas de estado (Para ti / No para ti) */
.service-status-box {
    background-color: #F8F9FA !important;
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid #E9ECEF !important;
}

.service-status-title {
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    color: #000000 !important;
    display: block !important;
    margin-bottom: 4px !important;
}

/* El texto dentro de las cajas grises */
.service-status-box p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #4B5563 !important;
    margin: 0 !important;
}

/* Ajuste de margen para el botón final */
.home-service-card .elementor-button-wrapper {
    margin-top: auto !important; /* Empuja el botón al fondo si las tarjetas tienen distinto alto */
    padding-top: 20px !important;
}
/* Empujar el botón siempre al final de la tarjeta */
.home-service-card {
    display: flex !important;
    flex-direction: column !important;
}

.home-service-card .elementor-button-wrapper {
    margin-top: auto !important; /* El truco mágico: empuja el botón al fondo */
    padding-top: 24px !important;
}

/* Opcional: Si quieres que el botón ocupe todo el ancho */
.home-service-card .elementor-button {
    width: 100% !important;
    text-align: center !important;
}

/* =========================================
   HOME SERVICIOS: SECCIÓN PROCESO (PASOS 1, 2, 3)
   ========================================= */

.process-section-bg {
    background-color: #E9ECEF !important;
    padding: 80px 24px !important;
}

.process-step-card {
    text-align: center !important;
    padding: 20px !important;
}

/* EL CÍRCULO GRANDE CON NÚMERO */
.process-step-number {
    width: 90px !important;
    height: 90px !important;
    background: linear-gradient(135deg, #A3E635 0%, #7CB518 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    margin: 0 auto 30px auto !important;
    /* Sombra premium para dar profundidad */
    box-shadow: 0 12px 30px rgba(163, 230, 53, 0.4) !important;
    position: relative !important;
    z-index: 1 !important;
}

.process-step-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
}

.process-step-card p {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #4B5563 !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}

/* =========================================
   HOMESERVICIOS: SECCIÓN FAQ (FONDO BLANCO)
   ========================================= */

.home-faq-section {
    background-color: #FFFFFF !important; /* Forzamos el fondo blanco */
    padding: 80px 24px !important;
}

/* Opcional: Si quieres que los acordeones tengan un borde más suave sobre el blanco */
.home-faq-section .faq-item {
    border: 2px solid #F3F4F6 !important; /* Un gris aún más suave que el anterior */
    background: #FFFFFF !important;
}

.home-faq-section .faq-item:hover {
    border-color: #A3E635 !important;
}

/* =========================================
   HOME: BLOQUE CTA FINAL (VERDE LIMA - CORREGIDO)
   ========================================= */

.cta-section-lime {
    background-color: #A3E635 !important;
    padding: 100px 24px !important;
    /* Forzamos alineación a la izquierda en todo el contenedor */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* 1. ETIQUETA HABLEMOS (Punto negro y texto negro) */
.cta-section-lime .section-label {
    color: #000000 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Forzamos que el punto sea NEGRO */
.cta-section-lime .section-label::before {
    content: '' !important;
    background-color: #000000 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

/* 2. TITULAR H2 (Negro y a la izquierda) */
.cta-main-title-dark {
    font-family: 'Outfit', sans-serif !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #000000 !important;
    margin: 0 0 20px 0 !important; /* Quitamos márgenes automáticos */
    text-align: center !important;
}

/* 3. SUBTÍTULO P */
.cta-section-lime p {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    color: rgba(0, 0, 0, 0.8) !important;
    margin: 0 0 40px 0 !important;
    text-align: left !important;
    max-width: 700px !important;
}



/* Ajuste móvil */
@media (max-width: 768px) {
    .cta-main-title-dark { font-size: 32px !important; }
    .cta-section-lime { padding: 60px 24px !important; }
}
/* =========================================
   HOME servicios
  : BLOQUE CTA FINAL (BOTÓN CON HOVER INVERTIDO)
   ========================================= */

/* 4. BOTÓN (Normal: Negro con texto Lima | Hover: Lima con texto Negro) */

/* Eliminamos cualquier fondo que Elementor ponga al wrapper del botón */
.cta-section-lime .elementor-button-wrapper,
.cta-section-lime .elementor-widget-button {
    background: transparent !important;
    width: auto !important;
    padding: 0 !important;
}

.btn-cta-inverted {
    background-color: #000000 !important; /* Fondo Negro */
    color: #A3E635 !important;            /* Texto Lima */
    padding: 18px 40px !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.4s ease !important;
    border: 2px solid #000000 !important; /* Borde negro para mantener el tamaño al invertir */
    text-align: center !important;
}

/* EFECTO HOVER INVERTIDO */
.btn-cta-inverted:hover {
    background-color: #A3E635 !important; /* Fondo Lima */
    color: #000000 !important;            /* Texto Negro */
    border-color: #000000 !important;     /* Mantenemos el borde negro para que se vea el límite */
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Forzamos que el color del texto del botón no cambie por enlaces globales */
.btn-cta-inverted .elementor-button-text {
    color: inherit !important;
}
/* =========================================
   GLOSARIO: SELECTOR DE LETRAS (CÍRCULOS)
   ========================================= */

/* Estilo para cada elemento (letra) */
.letter-buttons-container a {
    width: 48px !important;
    height: 48px !important;
    background-color: #FFFFFF !important;
    border: 2px solid #E9ECEF !important; /* Gris claro */
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
    margin: 6px !important; /* Espaciado entre letras */
}

/* Efecto Hover: Se vuelve verde lima y crece un poco */
.letter-buttons-container a:hover {
    background-color: #A3E635 !important;
    border-color: #A3E635 !important;
    transform: scale(1.1) !important;
    color: #000000 !important;
}

/* Letra Activa (la que el usuario está viendo ahora) */
.letter-buttons-container .current-term, 
.letter-buttons-container a.active {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #FFFFFF !important;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .letter-buttons-container a {
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
    }
}
/* =========================================
   GLOSARIO: GRID DE TÉRMINOS (TARJETAS)
   ========================================= */

/* Estilo de la Tarjeta Individual */
.term-card {
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important; /* --color-gray-100 */
    border-radius: 24px !important;       /* --radius-lg */
    padding: 32px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}

/* El borde Lima lateral oculto (Efecto Cyberpunk Light) */
.term-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 6px !important;
    height: 100% !important;
    background-color: #A3E635 !important; /* --color-lime */
    transform: scaleY(0) !important;
    transform-origin: top !important;
    transition: transform 0.3s ease !important;
}

/* Efectos al hacer Hover */
.term-card:hover {
    border-color: #A3E635 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important; /* --shadow-lg */
}

.term-card:hover::before {
    transform: scaleY(1) !important;
}

/* Título del Término (H3) */
.term-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Icono de Flecha (→) */
.term-card h3::after {
    content: '→' !important;
    font-size: 18px !important;
    color: #CED4DA !important; /* --color-gray-300 */
    transition: all 0.3s ease !important;
}

.term-card:hover h3::after {
    color: #A3E635 !important;
    transform: translateX(5px) !important;
}
/* =========================================
   GLOSARIO: AJUSTE DE ESPACIADO Y FUENTE
   ========================================= */

/* 1. La tarjeta: más compacta */
.term-card {
    padding: 20px 24px !important; /* Reducimos de 32px a 20px */
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important;
    border-radius: 16px !important; /* Un poco menos redondeado para que sea más fino */
    min-height: auto !important;    /* Forzamos que no tenga altura mínima */
}

/* 2. El título: Forzamos Outfit y quitamos huecos */
.term-card h3, 
.term-card .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important; /* Tamaño más equilibrado */
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;      /* Eliminamos cualquier margen que infle la caja */
    padding: 0 !important;     /* Eliminamos rellenos del widget */
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* 3. La flecha: la mantenemos a la derecha pero fina */
.term-card h3::after {
    content: '→' !important;
    font-family: 'Inter', sans-serif !important; /* La flecha queda mejor en Inter */
    font-size: 18px !important;
    color: #CED4DA !important;
    margin-left: 10px !important;
    transition: all 0.3s ease !important;
}

.term-card:hover h3::after {
    color: #A3E635 !important;
    transform: translateX(4px) !important;
}
/* =========================================
   GLOSARIO: FORZAR OUTFIT Y DISEÑO COMPACTO
   ========================================= */

/* 1. Forzamos la fuente en la tarjeta y cualquier enlace interno */
.term-card h3, 
.term-card h3 *,
.term-card .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important; /* Por si acaso hay mayúsculas forzadas */
    letter-spacing: -0.02em !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 2. Ajuste de la tarjeta para quitar el aire sobrante */
.term-card {
    padding: 18px 24px !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important; /* Centra el texto verticalmente */
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important;
    border-radius: 12px !important; /* Un poco más afilada para estilo moderno */
}

/* 3. La flecha también en Outfit (para que no desentone) */
.term-card h3::after {
    content: '→' !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #CED4DA !important;
    margin-left: auto !important;
    padding-left: 15px !important;
    transition: all 0.3s ease !important;
}

.term-card:hover h3::after {
    color: #A3E635 !important;
    transform: translateX(5px) !important;
}
/* =========================================
   GLOSARIO: CAJA DE DEFINICIÓN DESTACADA
   ========================================= */
.definition-box {
    background-color: #F8F9FA !important; /* Gris muy suave */
    border-left: 6px solid #A3E635 !important; /* Tu verde lima */
    border-radius: 16px !important;
    padding: 32px !important;
    margin: 32px 0 !important;
    
    /* Tipografía para lectura rápida */
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    font-weight: 500 !important;
    color: #374151 !important; /* Gris oscuro para contraste suave */
}

/* Ajuste para dispositivos móviles */
@media (max-width: 768px) {
    .definition-box {
        padding: 24px !important;
        font-size: 16px !important;
    }
}
/* =========================================
   GLOSARIO: DEFINITION BOX (REFINADO)
   ========================================= */
.definition-box {
    background-color: #F3F4F6 !important; /* Gris más intenso que el anterior */
    border-left: 6px solid #A3E635 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin: 32px 0 !important;
    
    /* Tipografía en negrita y legible */
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    font-weight: 700 !important; /* Forzamos Negrita */
    color: #000000 !important; /* Negro puro para máximo contraste */
}
/* =========================================
   GLOSARIO: CUERPO DE LA EXPLICACIÓN (ACF)
   ========================================= */
.term-explanation p {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important; /* Tamaño equilibrado según captura */
    line-height: 1.8 !important; /* Espaciado generoso para lectura fluida */
    color: #374151 !important; /* Gris oscuro suave (Gray-700) */
    margin-bottom: 24px !important; /* Separación entre párrafos */
}

/* Por si metes negritas dentro del texto de ACF */
.term-explanation strong, 
.term-explanation b {
    color: #000000 !important;
    font-weight: 700 !important;
}
/* =========================================
   GLOSARIO: TARJETAS DE EJEMPLO
   ========================================= */

/* 1. Contenedor de la tarjeta */
.example-item {
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important; /* Gris suave */
    border-left: 4px solid #CED4DA !important; /* Borde lateral gris inicial */
    border-radius: 16px !important;           /* --radius-md */
    padding: 24px !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}

/* 2. Efecto Hover (Iluminación verde) */
.example-item:hover {
    border-left-color: #A3E635 !important;    /* El borde cambia a Verde Lima */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Sombra muy sutil */
    transform: translateX(4px) !important;    /* Desplazamiento lateral suave */
}

/* 3. Etiqueta "Ejemplo:" */
.example-label {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
}

/* 4. Texto del ejemplo */
.example-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #374151 !important; /* Gris oscuro */
}

/* Limpieza de listas (si el widget lo mete en una ul) */
.elementor-kit-6 ul, .elementor-kit-6 li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================
   GLOSARIO: FAQ DE DEFINICIÓN (ESTILO WEB)
   ========================================= */

/* 1. La Caja del Acordeón */
.faq-term-item {
    background-color: #FFFFFF !important;
    border: 2px solid #E9ECEF !important; /* Gris suave (Gray-100) */
    border-radius: 20px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el ratón o estar abierto */
.faq-term-item:hover,
.faq-term-item[open] {
    border-color: #A3E635 !important; /* Verde Lima */
}

/* 2. La Cabecera (Pregunta) */
.faq-term-item summary {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 24px 32px !important;
    cursor: pointer !important;
    list-style: none !important;
    outline: none !important;
}

.faq-term-item summary::-webkit-details-marker {
    display: none !important;
}

.faq-question-text {
    font-family: 'Outfit', sans-serif !important; /* Tipografía de títulos */
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    padding-right: 20px !important;
}

/* 3. El Icono Dinámico (+) */
.faq-plus-icon {
    width: 36px !important;
    height: 36px !important;
    background-color: #A3E635 !important; /* Fondo Lima */
    border-radius: 50% !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.faq-plus-icon::before,
.faq-plus-icon::after {
    content: '' !important;
    position: absolute !important;
    background-color: #000000 !important; /* Símbolo negro */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s ease !important;
}

/* Línea horizontal del + */
.faq-plus-icon::before { width: 14px !important; height: 2px !important; }
/* Línea vertical del + */
.faq-plus-icon::after { width: 2px !important; height: 14px !important; }

/* Cambios al Abrir (Se vuelve X y cambia colores) */
.faq-term-item[open] .faq-plus-icon {
    background-color: #000000 !important;
    transform: rotate(45deg) !important;
}

.faq-term-item[open] .faq-plus-icon::before,
.faq-term-item[open] .faq-plus-icon::after {
    background-color: #A3E635 !important;
}

/* 4. La Respuesta (Con la sangría de 64px) */
.faq-answer-content {
    padding: 0 32px 32px 64px !important; /* Sangría a la izquierda igual que en el resto de la web */
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #374151 !important; /* Gris oscuro */
}

/* Ajuste móvil para la sangría */
@media (max-width: 768px) {
    .faq-term-item summary { padding: 20px 24px !important; }
    .faq-answer-content { padding-left: 24px !important; padding-right: 24px !important; }
    .faq-question-text { font-size: 16px !important; }
}
/* =========================================
   GLOSARIO: BLOQUES FINALES (SINÓNIMOS Y REVISIÓN)
   ========================================= */

/* Contenedor gris base */
.info-block-gray {
    background-color: #F3F4F6 !important; /* Gris suave (Gray-50) */
    border-radius: 16px !important;       /* --radius-md */
    padding: 24px !important;
    margin-top: 48px !important;
}

/* Títulos de sección con borde lateral verde */
.info-block-gray h2, 
.info-block-gray h3,
.info-block-gray .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 24px !important;
    padding-left: 16px !important;
    border-left: 4px solid #A3E635 !important; /* Borde Lima */
    line-height: 1.2 !important;
}

/* Etiquetas internas (También conocido como / Actualizado el) */
.info-block-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #000000 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Texto del contenido (Sinónimos o Fecha) */
.info-block-content {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #374151 !important; /* Gris oscuro (Gray-700) */
    line-height: 1.6 !important;
}
/* =========================================
   GLOSARIO: UNIFICACIÓN DE BLOQUES FINALES
   (Ejemplos, FAQ, Sinónimos, Revisión)
   ========================================= */

/* 1. Contenedor de Sección (Fondo más gris) */
.glossary-content-section {
    background-color: #F3F4F6 !important; /* Gris más visible para destacar sobre el blanco */
    border-radius: 24px !important;
    padding: 40px !important;
    margin-top: 48px !important;
}

/* 2. Titulares de Sección (Con barra verde lateral) */
.glossary-content-section h2,
.glossary-content-section h3,
.glossary-content-section .elementor-heading-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 32px !important;
    padding-left: 16px !important;
    border-left: 4px solid #A3E635 !important; /* Barra Verde Lima */
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

/* 3. Mantenemos las tarjetas internas en BLANCO para que contrasten */
.example-item, 
.faq-term-item {
    background-color: #FFFFFF !important; /* Tarjetas blancas sobre fondo gris */
    border: 1px solid #E9ECEF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}
/* =========================================
   BLOG: FILTROS DE CATEGORÍA (STICKY)
   ========================================= */
.category-filters {
    background: #E9ECEF !important; /* Gris suave de fondo */
    padding: 24px 0 !important;
    position: sticky !important;
    top: 72px;
    z-index: 90;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.filter-btn {
    padding: 10px 20px !important;
    background: #FFFFFF !important;
    border: 2px solid #DEE2E6 !important;
    border-radius: 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    margin: 6px !important;
}

.filter-btn:hover, .filter-btn.active {
    background: #A3E635 !important; /* Verde Lima */
    border-color: #A3E635 !important;
}
/* Forzar que las categorías salten de línea en la web real */
.category-filters .e-filter-items {
    flex-wrap: wrap !important; /* Permite varias filas */
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    overflow: visible !important; /* Evita que se corten al saltar de línea */
}

/* Asegurar que cada botón tenga su espacio */
.category-filters .e-filter-item {
    flex: 0 1 auto !important; /* No obliga a que todos midan lo mismo */
}
/* =========================================
   BLOG: TARJETAS DE ARTÍCULO
   ========================================= */
.blog-card {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    border: 2px solid #E9ECEF !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
}

.blog-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    border-color: #A3E635 !important;
}

/* Categoría (Badge Lima) */
.blog-card-category {
    display: inline-block !important;
    background: #A3E635 !important; /* Verde Lima */
    color: #000000 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

/* Título del Post */
.blog-card h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

/* Enlace "Leer más" */
.blog-card-link {
    font-weight: 600 !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: gap 0.3s !important;
}

.blog-card:hover .blog-card-link {
    color: #A3E635 !important;
    gap: 12px !important;
}
/* =========================================
   BLOG: HERO IMPACTANTE (H1 + SUBTÍTULO)
   ========================================= */

/* H1 Centrado */
.term-title {
    text-align: center !important;
    max-width: 900px !important; /* Limitamos ancho para que no sea una línea infinita */
    margin: 0 auto 20px auto !important;
    font-family: 'Outfit', sans-serif !important; /* Fuente display */
    font-size: 48px !important;
    font-weight: 800 !important;
}

/* Subtítulo del Blog */
.blog-hero-subtitle {
    font-family: 'Inter', sans-serif !important; /* Fuente body */
    font-size: 18px !important;
    color: #374151 !important; /* --color-gray-700 */
    max-width: 700px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .term-title { font-size: 32px !important; }
    .blog-hero-subtitle { font-size: 16px !important; }
}

/* =========================================
   BLOG: AJUSTE DE LA CUADRÍCULA (LOOP GRID)
   ========================================= */

/* Forzar 3 columnas en escritorio */
.blog-grid .elementor-loop-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    margin-top: 40px !important;
}

/* Ajuste para tablets */
@media (max-width: 1024px) {
    .blog-grid .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .blog-grid .elementor-loop-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}
/* =========================================
   BLOG: PAGINACIÓN TIPO CÍRCULOS
   ========================================= */

/* Contenedor de la paginación */
.blog-grid .elementor-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 60px !important;
}

/* Estilo para los números y flechas */
.blog-grid .elementor-pagination a,
.blog-grid .elementor-pagination span {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #FFFFFF !important;
    border: 2px solid #E9ECEF !important; /* Gris suave */
    border-radius: 50% !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Número activo y Hover */
.blog-grid .elementor-pagination a:hover,
.blog-grid .elementor-pagination .current {
    background-color: #A3E635 !important; /* Verde Lima */
    border-color: #A3E635 !important;
    color: #000000 !important;
    transform: scale(1.1);
}

/* Botones de Siguiente/Anterior (Más anchos si quieres) */
.blog-grid .elementor-pagination .prev,
.blog-grid .elementor-pagination .next {
    width: auto !important;
    padding: 0 20px !important;
    border-radius: 12px !important; /* Menos redondo para diferenciar */
}
/* =========================================
   BLOG: TARJETA COMPACTA (MERGED & FIXED)
   ========================================= */

/* 1. Estructura base y Radio de esquina */
.blog-card {
    padding: 0 !important; 
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 2px solid #E9ECEF !important;
    border-radius: 24px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* 2. La Imagen (Tus reglas originales para que quede perfecta) */
.blog-card .elementor-widget-image {
    margin: 0 !important;
    line-height: 0 !important; 
}

.blog-card img {
    width: 100% !important;
    height: 220px !important; 
    object-fit: cover !important;
    border-radius: 0 !important; 
}

/* 3. Categoría: Más ancha y pegada a la imagen */
.blog-card-category {
    margin-top: 1px !important;    /* Espacio reducido tras la imagen */
    margin-bottom: 1px !important; 
    margin-left: 2px !important;   /* Alineado con el texto */
    padding: 4px 20px !important;   /* Más ancha */
    background-color: #A3E635 !important;
    color: #000000 !important;
    border-radius: 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    display: inline-flex !important; /* Para que respete el padding horizontal */
}

/* 4. Título: Forzamos negro y menos espacio */
.blog-card h3 {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: #000000 !important; /* Evitamos el verde heredado */
}

/* 5. Extracto: Forzamos gris y controlamos el padding */
.blog-card .elementor-widget-text-editor {
    padding: 0 10px !important;
    margin-bottom: 12px !important;
}

.blog-card .elementor-widget-text-editor p {
    color: #374151 !important; /* Forzamos gris Gray-700 */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    
}

/* 6. Leer más: Flecha centrada y espacio compacto */
.blog-card-link {
    margin-top: auto !important;
    padding: 0 24px 20px 24px !important; /* Espacio inferior ajustado */
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important; /* Centrado vertical de la flecha */
}

.blog-card-link::after {
    content: '→' !important;
    margin-left: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
}

.blog-card:hover .blog-card-link::after {
    transform: translateX(5px) !important;
    color: #A3E635 !important;
}

.blog-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    border-color: #A3E635 !important;
}
.blog-card-excerpt {
    padding: 0 10px !important;      /* Alineación con el resto */
    margin-bottom: 1px !important;  /* Espacio inferior reducido */
}
.blog-card-excerpt p,
.blog-card-excerpt {
    color: #374151 !important;       /* Color gris Gray-700 */
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
/* =========================================
   BLOG: FILTRO DE CATEGORÍAS (VERSIÓN DEFINITIVA)
   ========================================= */

/* 1. Contenedor de ancho completo (Fondo Gris) */
.category-section-gray {
    background-color: #E9ECEF !important; /* Gris suave de tu ejemplo */
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 40px 0 !important;
    display: block !important;
}

/* 2. Forzar que el filtro NO haga scroll y se vea en varias líneas */
.category-filters .e-filter {
    justify-content: center !important;
    overflow: visible !important;
}

/* Matamos el contenedor de scroll horizontal de Elementor */
.category-filters .e-filter-items-wrapper {
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
}

.category-filters .e-filter-items {
    display: flex !important;
    flex-wrap: wrap !important; /* Permite las 3 líneas */
    justify-content: center !important;
    gap: 12px 16px !important; /* Espacio horizontal y vertical entre botones */
    width: 100% !important;
}

/* 3. Estilo de los Botones (Píldoras Blancas) */
.category-filters .e-filter-item {
    background-color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 50px !important; /* Totalmente circular */
    padding: 12px 28px !important; /* Relleno amplio para forma de pill */
    color: #000000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important; /* Negrita como en la captura */
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    flex: 0 1 auto !important; /* Impide que se estiren */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
}

/* 4. Estado ACTIVO y HOVER (Verde Lima) */
.category-filters .e-filter-item:hover,
.category-filters .e-filter-item.e-active {
    background-color: #A3E635 !important; /* Verde Lima */
    border-color: #A3E635 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
}

/* 5. Ajuste móvil: Mantenemos el scroll solo si es muy pequeño */
@media (max-width: 480px) {
    .category-filters .e-filter-items {
        justify-content: center !important;
        gap: 8px !important;
    }
    .category-filters .e-filter-item {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}
/* Refuerzo para que el botón seleccionado se vea verde */
.category-filters .e-filter-item.e-active,
.category-filters .e-filter-item:active,
.category-filters .e-filter-item[aria-pressed="true"] {
    background-color: #A3E635 !important;
    border-color: #A3E635 !important;
    color: #000000 !important;
}
/* =========================================
   MIGAS DE PAN: ESTILO CYBERPUNK LIGHT
   ========================================= */

.custom-breadcrumb-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Enlaces (Inicio, Blog) */
.custom-breadcrumb-wrapper .breadcrumb-link {
    color: #6B7280 !important; /* Gris suave */
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.custom-breadcrumb-wrapper .breadcrumb-link:hover {
    color: #000000 !important;
}

/* Categoría Activa (Verde Lima) */
.custom-breadcrumb-wrapper .breadcrumb-cat {
    color: #A3E635 !important; /* Verde Lima corporativo */
    font-weight: 700 !important;
}

/* Separador (/) */
.custom-breadcrumb-wrapper .breadcrumb-sep {
    color: #CED4DA !important;
    font-weight: 400;
}

/* Título del Post Actual (Gris Oscuro) */
.custom-breadcrumb-wrapper .breadcrumb-current {
    color: #111827 !important; /* Casi negro */
    font-weight: 400 !important;
    opacity: 0.8;
    /* Si el título es muy largo, podemos truncarlo */
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .custom-breadcrumb-wrapper .breadcrumb-current {
        display: none; /* En móvil solemos ocultar el título para no saturar */
    }
}
/* =========================================
   MIGAS DE PAN: UNIFICACIÓN TOTAL Y ESTÁTICA
   ========================================= */

.is-blog-breadcrumb.custom-breadcrumb-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: **16px** !important;
    margin-bottom: **30px** !important;
}

/* El punto verde inicial (único elemento de color) */
.is-blog-breadcrumb .breadcrumb-dot {
    width: **8px** !important;
    height: **8px** !important;
    background-color: #A3E635 !important; /* Verde Lima */
    border-radius: **50%** !important;
    display: inline-block !important;
    flex-shrink: **0** !important;
}

/* Todos los enlaces (Inicio, Blog y Categoría) */
.is-blog-breadcrumb .breadcrumb-link,
.is-blog-breadcrumb .breadcrumb-cat {
    color: #374151 !important; /* Gris oscuro Gray-700 */
    text-decoration: none !important;
    font-weight: **500** !important;
    transition: none !important; /* Eliminamos transiciones innecesarias */
}

/* FORZAMOS QUE NO PASE NADA AL HACER HOVER */
.is-blog-breadcrumb .breadcrumb-link:hover,
.is-blog-breadcrumb .breadcrumb-cat:hover {
    color: #374151 !important; /* Se mantiene el mismo color */
    font-weight: **500** !important; /* Se mantiene el mismo peso */
    cursor: pointer;
}

/* Separadores (Flechas ») */
.is-blog-breadcrumb .breadcrumb-sep {
    color: #E5E7EB !important; /* Gris muy claro */
    font-size: **14px** !important;
}

/* Título actual (final de la ruta) */
.is-blog-breadcrumb .breadcrumb-current-title {
    color: #374151 !important;
    font-weight: **400** !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: **400px** !important;
    opacity: **0.7**; /* Ligeramente más suave para diferenciar el texto no clicable */
}
/* Estilo para las primeras palabras del título */
.highlight-title {
    color: #A3E635 !important; /* Tu Verde Lima corporativo */
    display: inline;
}

/* Ajustes base para el H1 del Post */
.post-header h1, 
.elementor-widget-post-title h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    font-size: 48px !important; /* Ajuste según tu base */
}
/* Color para las 3 primeras palabras */
.titulo-post-dinamico h1 .highlight-title {
    color: #A3E635 !important; /* Tu Verde Lima */
    display: inline;
}

/* Estilo base del H1 para que sea idéntico a tu diseño */
.titulo-post-dinamico h1 {
    font-family: 'Outfit', sans-serif !important; /* Fuente display */
    font-size: 48px !important; /* Según tu base */
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #000000 !important; /* El resto del título en negro */
}
/* =========================================
   CUERPO DEL POST: SUBTÍTULOS H2
   ========================================= */

.post-content h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 32px !important; /* Tamaño según tu base */
    font-weight: 700 !important;
    margin: 48px 0 24px 0 !important; /* Mucho aire arriba, menos abajo */
    padding-left: 16px !important; /* Espacio para la barra verde */
    border-left: 6px solid #A3E635 !important; /* La barra lateral característica */
    line-height: 1.2 !important;
    color: #000000 !important;
}

/* Opcional: Estilo para los H3 (un poco más pequeños y sin barra) */
.post-content h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 32px 0 16px 0 !important;
    color: #000000 !important;
}
/* =========================================
   CUERPO DEL POST: TEXTO Y PÁRRAFOS
   ========================================= */

.post-content p {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important; /* Legibilidad máxima */
    line-height: 1.8 !important; /* Espaciado entre líneas premium */
    color: #374151 !important; /* Gris Gray-700 para no cansar la vista */
    margin-bottom: 24px !important;
}

/* Estilo para las negritas dentro del texto */
.post-content strong {
    font-weight: 700 !important;
    color: #000000 !important;
}/* End custom CSS */