/*
Theme Name: Tramoya ENAR
Theme URI: https://escenariosnacionales.ar
Description: Tramoya ENAR es una infraestructura digital de alto rendimiento...
Author: ENAR
Author URI: https://escenariosnacionales.ar
Template: hello-elementor
Version: 2.5.3
Text Domain: tramoya-enar
*/

/* ==========================================================================
   1. INFRAESTRUCTURA DE FUENTES (Armería Completa - Local)
   ========================================================================== */
/* --- BE VIETNAM PRO --- */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 100; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-100.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 200; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-200.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 900; font-display: swap; src: url('./assets/fonts/be-vietnam-pro/be-vietnam-pro-v11-latin-900.woff2') format('woff2'); }

/* --- OPEN SANS --- */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('./assets/fonts/open-sans/open-sans-v40-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/open-sans/open-sans-v40-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('./assets/fonts/open-sans/open-sans-v40-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('./assets/fonts/open-sans/open-sans-v40-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./assets/fonts/open-sans/open-sans-v40-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('./assets/fonts/open-sans/open-sans-v40-latin-800.woff2') format('woff2'); }

/* ==========================================================================
   2. VARIABLES GLOBALES
   ========================================================================== */
:root {
    --enar-primary:      #22001C;
    --enar-secondary:    #C01828;
    --enar-text:         #262226;
    --enar-accent:       #EE1133;

    --enar-dark:         #262226;
    --enar-red-main:     #C01828;
    --enar-red-alert:    #D93025;

    --enar-white:        #FFFFFF;
    --enar-bg-gray:      #F4F4F8;
    --enar-bg-body:      #FAFAFA;

    --enar-plum-dark:    #22001C;
    --enar-plum-med:     #482C44;
    --enar-pink:         #DC4988;
    --enar-teal:         #3D626F;

    --enar-font-heading: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --enar-font-body:    'Open Sans', Helvetica, Arial, sans-serif;

    --enar-container:    1200px;
    --enar-header-h:     80px;      
    --enar-radius:       4px;        
}

/* ==========================================================================
   3. UTILIDADES
   ========================================================================== */
.bg-enar-red    { background-color: var(--enar-red-main); }
.text-enar-red  { color: var(--enar-red-main); }
.bg-enar-dark   { background-color: var(--enar-dark); color: var(--enar-white); }
.font-heading   { font-family: var(--enar-font-heading); }
.font-body      { font-family: var(--enar-font-body); }
.enar-debug     { outline: 1px solid var(--enar-red-alert); z-index: 9999; }

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

* {
    -webkit-tap-highlight-color: transparent !important;
}

::selection {
    background-color: var(--enar-red-main);
    color: var(--enar-white);
}

::-moz-selection {
    background-color: var(--enar-red-main);
    color: var(--enar-white);
}

/* =========================================
   ESTILOS ESTRUCTURALES EDITOR (BACKEND)
   ========================================= */

/* 1. Fila Flex Simple (Para Funciones) 
   Input ocupa todo el lugar, botón a la derecha */
.enar-editor-row {
    display: flex;
    align-items: center; /* Centrado vertical */
    gap: 8px;            /* Aire entre input y tacho */
    margin-bottom: 8px;
    width: 100%;
}

/* 2. Grilla 1fr 3fr (Para Links Extra) */
.enar-editor-grid-1-3 {
    display: grid;
    grid-template-columns: 1fr 3fr; /* La proporción sagrada */
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
}

/* 3. Contenedor Flex dentro de la grilla (Para la columna 3fr)
   Esto permite que en la columna derecha convivan la URL y el Delete */
.enar-col-right-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%; /* Ocupa todo el ancho de la celda 3fr */
}

/* --- UTILIDADES PARA DOMAR LOS INPUTS DE WP --- */

/* Clase para que el TextControl crezca todo lo que pueda */
.enar-grow {
    flex-grow: 1;
}

/* IMPORTANTE: Matamos el margin-bottom nativo de los componentes de WP
   cuando están dentro de nuestras filas, sino se desalinean los botones */
.enar-editor-row .components-base-control,
.enar-editor-grid-1-3 .components-base-control,
.enar-col-right-flex .components-base-control {
    margin-bottom: 0 !important;
}

/* Ajuste fino para el botón de borrar */
.enar-btn-delete {
    flex-shrink: 0; /* Que no se aplaste nunca */
    color: #d63638;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.enar-btn-delete:hover {
    background: #f0f0f0;
}

/* ==========================================================================
   4. PERSONALIZACIÓN TRAMOYA - SISTEMA ENAR (THEME BUILDER)
   ========================================================================== */

/* ==========================================================================
   4.1. ECOSISTEMA DE CABECERA
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.1.1. LAYOUT & Z-INDEX (Contenedores Base)
   4.1.2. COMPORTAMIENTO STICKY
   4.1.3. IDENTIDAD (Logotipos)
   4.1.4. TRIGGERS & INTERACCIÓN (Hamburguesa -> X)
   4.1.5. BÚSQUEDA (Sistema Expandible)
   4.1.6. MEGA MENÚ (Navegación Principal)
   4.1.7. MOBILE SIDEBAR (Ajustes Específicos)
   ========================================================================== */

/* ==========================================================================
   4.1. ECOSISTEMA DE CABECERA (V3 - Refactorizado y Blindado)
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.1.1. LAYOUT & Z-INDEX BASE
   4.1.2. COMPORTAMIENTO STICKY Y FIXED (Móvil)
   4.1.3. IDENTIDAD (Logotipos)
   4.1.4. TRIGGERS & INTERACCIÓN (Hamburguesa -> X)
   4.1.5. BÚSQUEDA (Sistema Expandible)
   4.1.6. MEGA MENÚ
   4.1.7. MOBILE SIDEBAR
   ========================================================================== */

:root {
    --offset-wp: 0px; 
    --header-mobile-h: 60px; /* Ajustá esto a la altura real de tu header móvil */
}

/* --------------------------------------------------------------------------
   4.1.1. LAYOUT & Z-INDEX BASE
   -------------------------------------------------------------------------- */
.elementor-element.enar-header-global { z-index: 100 !important; background-color: #ffffff; }
#bar-menu-principal { position: relative; z-index: 50; transition: opacity 0.2s ease; background-color: #ffffff; }
.e-con-boxed .elementor-widget-icon-list { display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   4.1.2. COMPORTAMIENTO STICKY Y FIXED
   -------------------------------------------------------------------------- */
:root {
    --offset-wp: 0px; 
    --header-mobile-h: 60px; /* Ajustá a la altura de tu barra móvil */
}

/* --- A. ESCRITORIO Y TABLETA (Desde 768px) --- */
@media (min-width: 768px) {
    #enar-sticky-nav {
        position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important;
        opacity: 0 !important; pointer-events: none !important;
        transform: translateY(-100%) !important;
        transition: transform 0.4s ease, opacity 0.3s ease !important;
        z-index: 200 !important;
    }

    #enar-sticky-nav.elementor-sticky--effects {
        position: fixed !important; top: var(--offset-wp) !important; 
        transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important;
    }
}

/* --- B. MÓVIL (Sticky Nativo, Flujo Orgánico y a prueba de Popups) --- */
@media (max-width: 767px) {
    /* 1. STICKY REAL: Ocupa su espacio físico y empuja el contenido hacia abajo. Cero cálculos a mano. */
    .elementor-location-header, 
    .enar-header-global {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--offset-wp) !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9000 !important; /* Queda justo debajo de la cortina del menú lateral (9999) */
    }
    
    body { padding-top: 0 !important; 
    }

    /* 2. Resucitamos y normalizamos la barra interna */
    #enar-sticky-nav,
    #enar-sticky-nav.elementor-sticky--active,
    #enar-sticky-nav.elementor-sticky--effects {
        position: relative !important;
        display: block !important; /* Obligamos a que exista y se vea */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        background-color: #ffffff !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
}

/* --------------------------------------------------------------------------
   4.1.3. IDENTIDAD (LOGOTIPOS)
   -------------------------------------------------------------------------- */
.enar-brand-logo img { width: auto; height: 50px; display: block; }
@media (max-width: 767px) { .enar-brand-logo img { width: 100%; max-width: 240px; } }

/* --------------------------------------------------------------------------
   4.1.4. TRIGGERS & INTERACCIÓN (HAMBURGUESA -> X BLINDADO)
   -------------------------------------------------------------------------- */
.enar-trigger-action-escritorio, .enar-trigger-action-sticky-escritorio,
.enar-trigger-action-telefono, .enar-trigger-action-sticky {
    cursor: pointer; position: relative !important; z-index: 300; 
}

.enar-trigger-action-escritorio .elementor-icon-wrapper,
.enar-trigger-action-sticky-escritorio .elementor-icon-wrapper,
.enar-trigger-action-telefono .elementor-icon-wrapper,
.enar-trigger-action-sticky .elementor-icon-wrapper,
.enar-header-global .enar-brandbar .elementor-icon-wrapper {
    display: flex; align-items: center; justify-content: center;
}

/* Icono Original */
[class*="enar-trigger-action"] svg, [class*="enar-trigger-action"] i {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1; transform: scale(1); fill: #22001C;
}

/* Ocultar SVG Original al Activar (Solo en Triggers) */
[class*="enar-trigger-action"].is-active svg, 
[class*="enar-trigger-action"].is-active i { 
    opacity: 0 !important; transform: scale(0.5) !important; 
}

/* Generación de la "X" (Solo en Triggers) */
[class*="enar-trigger-action"].is-active::before, 
[class*="enar-trigger-action"].is-active::after {
    content: ''; position: absolute; width: 22px; height: 2px;
    background-color: #C01828; top: 50%; left: 50%;
    opacity: 1 !important; z-index: 301; transition: all 0.3s ease;
}

[class*="enar-trigger-action"].is-active::before { transform: translate(-50%, -50%) rotate(45deg); }
[class*="enar-trigger-action"].is-active::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* --------------------------------------------------------------------------
   4.1.5. BÚSQUEDA (SISTEMA EXPANDIBLE)
   -------------------------------------------------------------------------- */
.enar-search-expand-icon, .enar-search-sticky-icon {
    cursor: pointer !important; position: relative !important; z-index: 300 !important;
    pointer-events: auto !important; display: flex; align-items: center; justify-content: center;
}

.enar-search-expand .e-search-form, .enar-search-sticky .e-search-form {
    display: flex; align-items: center; justify-content: flex-end; position: relative;
}

.enar-search-expand .e-search-submit, .enar-search-sticky .e-search-submit { display: none !important; }

/* Animación y Estética */
.enar-search-expand .e-search-input-wrapper, .enar-search-sticky .e-search-input-wrapper {
    width: 0; overflow: hidden; opacity: 0;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

.is-open .e-search-input-wrapper { width: 250px !important; opacity: 1 !important; }

.enar-search-expand .e-search-input, .enar-search-sticky .e-search-input {
    height: 40px !important; background-color: #F4F4F8 !important; border: none !important;
    border-radius: 4px !important; padding: 0 15px !important; width: 250px; color: #22001C;
}

/* --------------------------------------------------------------------------
   4.1.6. MEGA MENÚ
   -------------------------------------------------------------------------- */
#enar-mega-row {
    position: absolute !important; left: 0; width: 100%; z-index: 90; 
    top: var(--enar-menu-offset, 150px) !important; 
    visibility: hidden; opacity: 0; pointer-events: none; 
    background-color: #FFFFFF; border-top: none !important; 
    border-bottom: 1px solid rgba(34, 0, 28, 0.29); box-shadow: 0 15px 30px -5px rgba(0,0,0,0.15); 
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#enar-mega-row.modo-sticky { position: fixed !important; z-index: 190; }
#enar-mega-row.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
#enar-mega-row.is-active ~ #bar-menu-principal { opacity: 0; pointer-events: none; }

@media (min-width: 1025px) {
    #enar-mega-row:not(.modo-sticky) .elementor-element-9834cec { display: none !important; }
}
@media (max-width: 1024px) {
    #enar-mega-row .elementor-element-9834cec { display: flex !important; }
}

/* --------------------------------------------------------------------------
   4.1.7. MOBILE SIDEBAR (AJUSTES ESPECÍFICOS Y SCROLL INTERNO)
   -------------------------------------------------------------------------- */

/* Reset del Wrapper Principal */
#enar-sidebar-main { padding: 0 !important; }

/* 1. AISLAMIENTO TÁCTIL DEL POPUP (LA MAGIA) */
/* Encapsulamos la caja del popup para que tenga scroll propio y no contagie al body */
.enar-popup-menu .dialog-widget-content {
    height: 100vh !important; 
    height: 100dvh !important; /* Medida dinámica para Safari/Chrome móvil (ignora barra de url nativa) */
    overflow-y: auto !important; 
    overscroll-behavior-y: contain !important; /* El cerrojo: corta la cadena de scroll hacia el body */
    -webkit-overflow-scrolling: touch !important; /* Momentum scroll fluido en iOS */
}

/* 2. LIMPIEZA VISUAL DEL SCROLL */
/* Ocultamos la barra de scroll nativa fea para que parezca una app de verdad */
.enar-popup-menu .dialog-widget-content::-webkit-scrollbar {
    display: none;
}
.enar-popup-menu .dialog-widget-content {
    -ms-overflow-style: none;  /* Para IE y Edge */
    scrollbar-width: none;  /* Para Firefox */
}

/* Barra Cabecera dentro del Sidebar */
.enar-header-bar { padding: 0 !important; min-height: 60px; align-items: stretch; }

/* Grupo Izquierda */
.enar-header-group-left { height: 100%; align-items: stretch; }

/* Elementos Full-Height (Centrado) */
#enar-icon-stretch, #dark-mode-btn { 
    height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; 
}

/* Botón Cerrar y Corrección de Flexbox */
#enar-close-btn { display: flex; align-items: center; }
#enar-close-btn .elementor-icon-wrapper, 
#enar-icon-stretch .elementor-icon-wrapper, 
#dark-mode-btn .elementor-icon-wrapper { display: flex; }

/* ==========================================================================
   4.2. ECOSISTEMA DE FOOTER
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.2.1. ESTÉTICA GLOBAL DE COLUMNAS (Tipografía, Listas y Enlaces)
   4.2.2. COMPONENTES DE MARCA (Claim & Redes Sociales)
   4.2.3. COMPORTAMIENTO DE ESCRITORIO (+1025px - Alineación Derecha)
   4.2.4. ENTORNO DE IMPRESIÓN (Optimización para papel)
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.2.1. ESTÉTICA GLOBAL DE COLUMNAS (CONTENIDO EDITORIAL)
   Aplica a los widgets de texto dentro del footer en todas las resoluciones.
   -------------------------------------------------------------------------- */

/* 1. Títulos de Sección (Simulados con <p><strong>) */
#enar-megamenu-container-footer .enar-footer-col p {
    font-size: 15px !important;
    margin-bottom: 20px !important;
    font-weight: 700; /* Peso visual para jerarquía */
    line-height: 1.2em;
}

/* 2. Contenedor de Listas (Reset de estilos nativos) */
#enar-megamenu-container-footer .enar-footer-col ul {
    padding-left: 0px !important;
    list-style-type: none !important;
    margin: 0 !important;
}

/* 3. Ítems de Lista (Espaciado vertical) */
#enar-megamenu-container-footer .enar-footer-col ul li {
    margin-bottom: 10px !important;
}

/* 4. Enlaces (Estilo base e interacción) */
#enar-megamenu-container-footer .enar-footer-col ul li a {
    text-decoration: none;
    transition: color 0.3s ease;
    /* El color base lo hereda del widget o global de Elementor */
}

/* --------------------------------------------------------------------------
   4.2.2. COMPONENTES DE MARCA (CLAIM & REDES)
   -------------------------------------------------------------------------- */

/* Claim / Bajada (Texto en dos líneas a la izquierda) */
.footer-claim-line {
    display: block !important;
    width: 100%;
    line-height: 1.2;
}

/* Fix Flexbox para Iconos Sociales (Evita roturas de layout) */
.redes-sociales-escenarios-pie .elementor-widget-icon .elementor-icon-wrapper {
    display: flex !important;
}

/* --------------------------------------------------------------------------
   4.2.3. COMPORTAMIENTO DE ESCRITORIO (+1025px)
   Alineación forzada a la derecha para equilibrar el logo a la izquierda.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

    /* 1. Contenedor Principal: Flex-End (Todo a la derecha) */
    #enar-megamenu-container-footer {
        justify-content: flex-end !important;
        gap: 40px !important; /* Aire entre columnas */
        align-items: flex-start !important;
    }

    /* 2. Columnas Individuales: Ancho compacto (Hug content) */
    #enar-megamenu-container-footer .elementor-widget-wrap,
    .enar-footer-col {
        width: max-content !important; 
        flex-grow: 0 !important;
    }

    /* 3. Redes Sociales: Alineación derecha explícita */
    .caja-pie .enar-footer-social .elementor-widget-container,
    .caja-pie .enar-footer-social ul.elementor-icon-list-items {
        justify-content: flex-end !important;
        text-align: right !important;
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   4.2.4. ENTORNO DE IMPRESIÓN (AHORRO DE TINTA)
   Oculta navegación y optimiza para CTRL+P
   -------------------------------------------------------------------------- */
@media print {
    /* Ocultar elementos de navegación y redes */
    #enar-megamenu-container-footer,
    .redes-sociales-escenarios-pie {
        display: none !important;
    }
    
    /* Centrado y bordes simples para papel */
    .caja-pie {
        text-align: center !important;
        border-top: 1px solid #000;
        padding-top: 20px;
    }
    
    /* Escala de grises para logos */
    .caja-pie img {
        filter: grayscale(100%); 
    }
}

/* ==========================================================================
   4.3. SINGLE POST
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.3.1. PUBLICACIÓN GENERAL
   4.3.2. PUBLICACIÓN MIRADAS
   4.3.3. SECCIÓN RELACIONADAS (GRILLA INFERIOR)
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.3.1. PUBLICACIÓN GENERAL
   Estilos específicos para la plantilla de noticias estándar.
   
   A. CABECERA Y METADATOS
   B. RESUMEN IA
   C. CUERPO DE LA NOTA Y BARRA STICKY
   D. ZONA DE FEEDBACK (CORRECCIONES Y COMENTARIOS)
   E. REDES Y APOYO
   F. RELACIONADAS
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------
   A. CABECERA Y METADATOS
   ----------------------------------------------------------- */

/* Alineación de la lista de datos del autor */
.enar-contenedor-autor-fecha .enar-lista-datos-autor {
    align-items: stretch;
}

/* Estructura de la lista (Nombre y Mail) */
.enar-contenedor-autor-fecha .enar-lista-datos-autor ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Cargo ENAR */
.enar-grilla-principal .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text{
	font-weight:400 !important;
	color:rgba(34,0,28,0.72) !important;
	
}


/* Botón Leer Más Tarde - Ajustes para Móvil */
@media (max-width: 767px) {
    /* Ocultar texto */
    #enar-boton-leer-tarde .elementor-button-text {
        display: none;
    }
    
    /* Botón cuadrado solo icono */
    #enar-boton-leer-tarde .elementor-button {
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Contenedor ajustado */
    #enar-boton-leer-tarde {
        width: auto !important;
    }
}

/* -----------------------------------------------------------
   B. RESUMEN IA (ACORDEÓN)
   ----------------------------------------------------------- */

/* 1. Forzar ancho completo en el título para que el Grid funcione */
#enar-acordeon-resumen .e-n-accordion-item-title,
#enar-acordeon-resumen .e-n-accordion-item-title-header,
#enar-acordeon-resumen .e-n-accordion-item-title-text {
    width: 100% !important;
}

/* 2. Ocultar el icono por defecto de Elementor */
#enar-acordeon-resumen .e-n-accordion-item-title-icon {
    display: none !important;
}

/* 3. Estilo del Ítem (Borde y Fondo Gradiente) */
#enar-acordeon-resumen .e-n-accordion-item {
    border-radius: 10px !important;
    overflow: hidden;
    border: none;
    background-image: linear-gradient(200deg, var(--e-global-color-accent) 0%, #DC4988 80%);
}

/* 4. La Grilla de la Cabecera (3 Columnas: IA | Texto | Chevron) */
#enar-acordeon-resumen .cabecera-horizontal {
    display: grid;
    grid-template-columns: 30px 1fr 30px; /* Iconos fijos, texto flexible */
    width: 100%;
    align-items: center;
}

/* 5. Estilos de los elementos internos (Iconos y Texto) */
#enar-acordeon-resumen .ia-icono-acordeon {
    width: 28px;
    filter: brightness(0) invert(92%); /* Blanco casi puro */
}

#enar-acordeon-resumen .texto-resumen-label {
    justify-self: center;
    text-align: center;
    color: #fff;
    font-weight: 500;
}

#enar-acordeon-resumen .chevron-resumen {
    width: 18px;
    height: 18px;
    justify-self: end;
    filter: brightness(0) invert(92%);
    transition: transform 0.3s ease;
}

/* 6. Rotación del Chevron al abrir */
#enar-acordeon-resumen details[open] .chevron-resumen {
    transform: scaleY(-1);
}

/* -----------------------------------------------------------
   C. CUERPO DE LA NOTA Y BARRA STICKY
   ----------------------------------------------------------- */

/* Icono de Comentarios en Barra Lateral: Bordes suaves */
#enar-barra-lateral-compartir .elementor-grid-item .elementor-social-icon-comment-alt {
    border-radius: 5px !important;
}

/* Línea divisoria debajo del icono de comentarios */
#enar-barra-lateral-compartir .elementor-grid-item:nth-child(1) {
    border-bottom: 1px solid rgba(90, 90, 90, 0.15);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* Espaciado para los subtítulos (H2) dentro de la nota */
.enar-contenido-entrada h2 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

/* -----------------------------------------------------------
   D. ZONA DE FEEDBACK (CORRECCIONES Y COMENTARIOS)
   ----------------------------------------------------------- */

/* Caja de Errores: Icono del lápiz con fondo */
.enar-aviso-error .elementor-icon-list-icon svg {
    background-color: #3D626F; /* Verde institucional */
    padding: 6px;
    color: white;       /* Asegura contraste */
    box-sizing: content-box; /* Evita que el padding achique el SVG */
}

/* Alineación vertical del texto con el icono */
.enar-aviso-error .elementor-icon-list-item {
    align-items: center;
}

/* Motor de Comentarios JS: Estado inicial (Oculto) */
#enar-contenedor-comentarios {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Motor de Comentarios JS: Estado visible (Activado por Script) */
#enar-contenedor-comentarios.enar-visible {
    display: block;
    opacity: 1;
}

/* -----------------------------------------------------------
   E. REDES Y APOYO
   ----------------------------------------------------------- */

/* Reset de márgenes en textos de Google News */
.enar-caja-google-news .elementor-widget-text-editor p {
    margin-bottom: 0px;
}

/* Reset de márgenes en textos de Instagram */
.enar-caja-instagram .elementor-widget-text-editor p {
    margin-bottom: 0px;
}

/* -----------------------------------------------------------
   F. RELACIONADAS
   ----------------------------------------------------------- */

/* Wrapper del icono (+) en el título */
.titulo-miradas-entradas-relacionadas .enar-icono-mas .elementor-icon-wrapper {
    display: flex;
}

/* -----------------------------------------------------------
   G. EN VIVO
   ----------------------------------------------------------- */

/* 1. El Contenedor Principal (Inversor Cronológico) */
/* Aplicá esta clase al contenedor de Elementor o a la caja donde metas estos bloques 
   para que la última actualización siempre quede arriba. */
.contenedor-cobertura-vivo {
    display: flex;
    flex-direction: column-reverse;
}

/* 2. La Grilla del Bloque */
.liveblog-entry {
    font-family: 'Assistant', sans-serif;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    padding-block: 12px 20px; /* El espaciado de respiro que definiste */
    display: grid;
    column-gap: 12px;
    grid-template-columns: 5px auto;
    grid-template-areas: 
        "dot time" 
        "line content";
}

/* 3. El Eje Cronológico (Punto y Línea) */
.liveblog-entry__dot {
    grid-area: dot;
    width: 5px;
    height: 5px;
    background-color: #d1d1d1; /* El rojo ENAR */
    border-radius: 50%;
    /* Lo bajamos un toque para que quede centrado respecto a la altura de la tipografía */
    margin-top: 6px; 
}

.liveblog-entry__line {
    grid-area: line;
    width: 1px;
    background-color: #d1d1d1; /* Un gris sutil que no compite con el texto */
    margin: 0 auto; /* Centra la línea de 1px adentro de su columna de 5px */
    margin-top: 5px; /* Despega la línea del punto */
    /* Truco: un margen negativo abajo para que la línea conecte fluidamente con el bloque siguiente */
    margin-bottom: -20px; 
}

/* Matamos la línea en la última actualización de abajo de todo (el primer bloque creado) para que cierre prolijo */
.liveblog-entry:first-child .liveblog-entry__line {
    display: none;
}

/* 4. La Capa de Texto */
.liveblog-entry__date {
    grid-area: time;
    font-size: 0.85rem;
    font-weight: 400;
    color: #737373;
    line-height: 1.2;
    /* Forzamos mayúsculas por si el JS escupe algo distinto */
    text-transform: uppercase; 
}

.liveblog-entry__content {
    grid-area: content;
    padding-top: 12px; /* Separación del título con la hora */
}

/* Títulos (El h2 que armamos en React) */
.liveblog-entry__content .article-body__heading-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* Párrafos (El texto rico de Gutenberg) */
.liveblog-entry__content p, 
.liveblog-entry__content .article-body__paragraph,
.liveblog-entry__content-text p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* Limpieza de caja: le sacamos el margen al último párrafo para que el padding-block del padre trabaje bien */
.liveblog-entry__content p:last-child,
.liveblog-entry__content-text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   ANIMACIÓN DE LATIDO (PULSO DE URGENCIA)
   ========================================================================== */

@keyframes enarLatido {
    0% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.7; }
}

/* 1. Animar el contenedor, no el vector */
.enar-meta-envivo .elementor-icon-list-icon {
    display: inline-block; /* Vital: sin esto, el navegador ignora el scale */
    animation: enarLatido 1.5s infinite ease-in-out;
    transform-origin: center center;
    line-height: 1; /* Evita saltos raros en la alineación vertical */
}

/* 2. Forzar el color y permitir el desborde visual */
.enar-meta-envivo .elementor-icon-list-icon svg {
    overflow: visible; /* Si el SVG crece, que no se ampute contra los bordes */
}

/* --------------------------------------------------------------------------
   4.3.2. PUBLICACIÓN MIRADAS
   Estilos específicos para la plantilla de miradas.
   
   A. VISUALIZACIÓN ESTADO EDITORIAL
   B. SANITIZACIÓN INFO OBRA (Ocultar si no hay meta datos)
   C. SANITIZACIÓN REDES (Ocultar si no hay links)
   D. SANITIZACIÓN ESTRUCTURAL (Colapso de Grilla)
   E. CENTRADO DE ENCABEZADO (Grilla Simétrica)
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------
   A. VISUALIZACIÓN ESTADO EDITORIAL
   ----------------------------------------------------------- */

/* Se esconde el contenedor enar-contenedor-estadoeditorial si la temporada finalizó. */
body.elementor-420157 .elementor-element.elementor-element-c32b4c9 {
    display: none !important;
}

/* -----------------------------------------------------------
   B. SANITIZACIÓN INFO OBRA
   ----------------------------------------------------------- */

/* Ocultar el contenedor de datos (Sala, Horario, etc.) si Elementor
   no renderizó ningún item de lista <li> (meta datos vacíos). */
.enar-contenedor-datos-obra:not(:has(.elementor-icon-list-item)) {
    display: none !important;
}

/* -----------------------------------------------------------
   C. SANITIZACIÓN REDES
   ----------------------------------------------------------- */

/* Ocultar el contenedor de redes sociales si Elementor
   no renderizó ningún enlace <a> (meta redes vacíos). */
.enar-contenedor-redes-obra:not(:has(.enar-social-link)) {
    display: none !important;
}

/* -----------------------------------------------------------
   D. SANITIZACIÓN ESTRUCTURAL (GRILLA)
   ----------------------------------------------------------- */

/* Si la grilla no tiene Info (<li>) Y TAMPOCO tiene Redes (<a>),
   se oculta la estructura completa para evitar espacios en blanco (Layout Shift). */
.enar-grilla-datos-obra:not(:has(.elementor-icon-list-item)):not(:has(.enar-social-link)) {
    display: none !important;
}

/* -----------------------------------------------------------
   E. CENTRADO DE ENCABEZADO Y ADAPTACIÓN MÓVIL
   ----------------------------------------------------------- */



/* Anar meta categoria */
.hentry .elementor-element:nth-child(3) .anar-meta-categoria{
	cursor:default;
	
}

/* --- 2. TABLET Y MÓVIL (<= 1024px) --- 
   Estrategia de Apilado Vertical (Flex Column) */
@media (max-width: 1024px) {

    .elementor-element-7cc3c97 {
        display: flex !important;
        flex-direction: column !important; /* Uno abajo del otro */
        width: 100%;
        gap: 10px; /* Espacio entre categoría y título */
    }

    /* Categoría: Arriba y a la Izquierda */
    .elementor-element-7cc3c97 > .elementor-element-0379f44 {
        align-self: flex-start !important; /* Se pega a la izquierda */
        width: auto !important;
        margin-bottom: 0px;
    }

    /* Título: Abajo y Centrado */
    .elementor-element-7cc3c97 > .elementor-element-06ea7b6 {
        align-self: center !important; /* Se centra en el contenedor */
        text-align: center !important; /* Centra el texto interno */
        width: 100% !important;
    }

    /* El Fantasma desaparece en móvil para no ocupar espacio al pedo */
    .elementor-element-7cc3c97::after {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   4.3.3. SECCIÓN RELACIONADAS (GRILLA INFERIOR)
   -------------------------------------------------------------------------- */

/* 1. Tarjeta Completa: Redondeo de bordes 
   El overflow hidden es vital para que la imagen y el fondo blanco no se salgan de la curva */
.enar-grilla-relacionadas .enar-loop-h3-vertical-archivo {
    border-radius: 5px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 2. Caja de Texto: Fondo blanco 
   Le inyectamos flex-grow para que si la tarjeta se estira, el blanco cubra hasta abajo */
.enar-grilla-relacionadas .enar-contenedor-texto {
    background-color: #F4F4F8 !important;
    flex-grow: 1 !important; 
}

/* 3. Contenedor de Imagen: Altura blindada en 200px 
   El flex: 0 0 auto le prohíbe terminantemente a Flexbox achicarla o estirarla */
.enar-grilla-relacionadas .enar-contenedor-imagen {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex: 0 0 auto !important; 
}

/* 4. Comportamiento de la Foto: Cobertura perfecta */
.enar-grilla-relacionadas .enar-contenedor-imagen .elementor-widget-image,
.enar-grilla-relacionadas .enar-contenedor-imagen img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ==========================================================================
   4.4. SINGLE PAGE
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.4.1. 
      A. 
      B. 
   4.4.2. 
   ========================================================================== */

/* ==========================================================================
   4.5. ARCHIVE SECCIONES
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.5.1. ARCHIVE GENERAL (NOTICIAS, EDITORIALES, AGENDA, ENTREVISTAS)
      A. HERO ASIMÉTRICO (COMPORTAMIENTO Y TIPOGRAFÍA)
      B. LISTA POSTS NORMALES (COMPORTAMIENTO DE IMÁGENES)
      C. PAGINACIÓN (BOTÓN VER MÁS)
      D. SEPARADORES DE LISTA (GRILLA DE ARCHIVO)
   4.5.2. ARCHIVE MIRADAS (Reservado para futuros ajustes)
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.5.1. ARCHIVE GENERAL (NOTICIAS, EDITORIALES, AGENDA, ENTREVISTAS)
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------
   A. HERO ASIMÉTRICO (COMPORTAMIENTO Y TIPOGRAFÍA)
   ----------------------------------------------------------- */

/* 1. DESTRUCCIÓN DE ESTILOS INLINE DEL H2 (Aplica a todas las resoluciones) */
/* Obligamos al Hero 1 a tomar los estilos globales de tu H2, matando el 20px */
.enar-post-hero-1 .enar-titulo-h2 .elementor-heading-title {
    font-size: var(--e-global-typography-primary-font-size, 30px) !important;
    line-height: var(--e-global-typography-primary-line-height, 1.2em) !important;
    font-weight: var(--e-global-typography-primary-font-weight, 600) !important;
}

/* 2. LA MAGIA: HERO 2 MANDA, HERO 1 OBEDECE (Desktop y Tablet) */
@media (min-width: 768px) {
    
    /* 2.1. Mampostería Principal: Aseguramos que compartan la misma altura base */
    .enar-post-hero {
        align-items: stretch !important;
    }

    /* 2.2. Hero 1 (Padre): Le decimos que es el marco de referencia */
    .enar-post-hero-1 {
        position: relative !important;
        height: 100% !important;
    }

    /* 2.3. Hero 1 (Hijo directo): Lo arrancamos del flujo. 
       Al ser absoluto, pierde el poder de estirar la grilla. 
       Su altura ahora es EXACTAMENTE la que el Hero 2 defina para toda la fila. */
    .enar-post-hero-1 > .elementor-widget-container {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100% !important;
    }

    /* 2.4. Forzamos Flexbox en toda la "sopa de divs" de Elementor */
    .enar-post-hero-1 .elementor-loop-container {
        display: flex !important;
        height: 100% !important;
    }

    .enar-post-hero-1 .e-loop-item {
        flex: 1 !important;
        height: 100% !important;
    }

    /* 2.5. La Tarjeta: Flex vertical para poder repartir el espacio */
    .enar-post-hero-1 .enar-loop-h2-vertical {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* 2.6. La Imagen del Hero 1: Se estira o se encoge para llenar el hueco */
    .enar-post-hero-1 .enar-contenedor-imagen {
        flex: 1 1 0% !important;
        min-height: 0 !important; /* Vital para que la imagen acepte ser aplastada */
    }

    /* 2.7. Hero 2: Imponemos los 200px sagrados a las fotos secundarias */
    .enar-post-hero-2 .enar-contenedor-imagen {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
}

/* 3. COMPORTAMIENTO MÓVIL (Restauración) */
@media (max-width: 767px) {
    /* En móvil, la imagen principal del Hero 1 vuelve a un alto fijo */
    .enar-post-hero-1 .enar-contenedor-imagen {
        height: 260px !important; 
    }
    
    /* Escala tipográfica móvil para el H2 del Hero 1 */
    .enar-post-hero-1 .enar-titulo-h2 .elementor-heading-title {
        font-size: 24px !important; 
    }
}

/* -----------------------------------------------------------
   B. LISTA POSTS NORMALES (COMPORTAMIENTO DE IMÁGENES)
   ----------------------------------------------------------- */

/* 1. DESKTOP & TABLET (Columnas lado a lado) */
@media (min-width: 768px) {
    
    /* 1.1. Aseguramos que la fila permita estirar los elementos */
    .enar-post-cuerpo .enar-loop-h2-horizontal {
        align-items: stretch !important;
    }

    /* 1.2. El contenedor de la foto se vuelve el marco de referencia */
    .enar-post-cuerpo .enar-loop-h2-horizontal .enar-contenedor-imagen {
        position: relative !important;
    }

    /* 1.3. La llave de sumisión: Desenganchamos la imagen del flujo.
       Al ser absoluta, pierde su "fuerza" para empujar la fila hacia abajo.
       Se limitará a rellenar la altura exacta que dicten el texto o los 200px mínimos. */
    .enar-post-cuerpo .enar-loop-h2-horizontal .enar-imagen-loop {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    /* 1.4. Cobertura perfecta de la foto sin deformarse */
    .enar-post-cuerpo .enar-loop-h2-horizontal .enar-imagen-loop img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* 2. MÓVIL (Elementos apilados) */
@media (max-width: 767px) {
    
    /* En móvil Elementor pone la foto al 100% de ancho arriba del texto.
       Le fijamos los 200px de altura para mantenerla como una franja prolija. */
    .enar-post-cuerpo .enar-loop-h2-horizontal .enar-contenedor-imagen {
        
    }
    
    .enar-post-cuerpo .enar-loop-h2-horizontal .enar-imagen-loop,
    .enar-post-cuerpo .enar-loop-h2-horizontal .enar-imagen-loop img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* -----------------------------------------------------------
   C. PAGINACIÓN (BOTÓN VER MÁS)
   ----------------------------------------------------------- */

/* Ver mas */
#ver-mas {
    width: 100%;
}

/* Button content wrapper */
#ver-mas .elementor-button-content-wrapper {
    justify-content: space-between;
}

/* Tab title */
.e-activated .e-n-tabs-heading .e-n-tab-title {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* -----------------------------------------------------------
   D. SEPARADORES DE LISTA (GRILLA DE ARCHIVO)
   ----------------------------------------------------------- */

/* 1. Posicionamiento: Preparamos la tarjeta para que contenga a la línea */
.enar-post-cuerpo .e-loop-item {
    position: relative !important;
}

/* 2. La Línea Fantasma: Se dibuja en todos los posts EXCEPTO en el último */
.enar-post-cuerpo .e-loop-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Ajustado al medio exacto del nuevo gap de 40px */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(90, 90, 90, 0.15); /* Color oficial del Manual ENAR */
    z-index: 1;
}

/* 3. Ajuste para Tablet (Si tenés 2 columnas) */
@media (min-width: 768px) and (max-width: 1024px) {
    .enar-post-cuerpo .elementor-grid-tablet-2 .e-loop-item::after {
        /* Descomentar si no querés líneas cortando las columnas en tablet */
        /* display: none !important; */
    }
}

/* 4. Ajuste para Móvil (Verificar si el gap cambia en esta vista) */
@media (max-width: 767px) {
    .enar-post-cuerpo .e-loop-item:not(:last-child)::after {
        /* Si en móvil achicás el gap a 20px, por ejemplo, cambialo a -10px */
        /* bottom: -10px; */
    }
}

/* --------------------------------------------------------------------------
   4.5.1. ARCHIVE MIRADAS
   -------------------------------------------------------------------------- */

/* ==========================================================================
   4.6. RESULTADOS DE BÚSQUEDA
   --------------------------------------------------------------------------
   (Espacio reservado para el layout de la página de resultados)
   ========================================================================== */



/* ==========================================================================
   4.7. LOOPS Y TARJETAS
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.7.1. IMÁGENES BLOCK
   4.7.2. IMÁGENES OVERLAY
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.7.1. IMÁGENES BLOCK
   Uso: Loops verticales u horizontales donde la foto NO tiene texto encima.
   Clase Elementor: enar-imagen-loop
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   4.7.2. IMÁGENES OVERLAY
   Uso: Loops donde la foto actúa de fondo y el texto va ENCIMA.
   Clase Elementor: enar-imagen-loop-overlay
   -------------------------------------------------------------------------- */

/* 1. El Widget flota detrás de los textos ocupando todo el padre */
.enar-imagen-loop-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* 2. El contenedor interno de Elementor se estira al 100% */
.enar-imagen-loop-overlay .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
}

/* 3. La foto final rellena el espacio y recorta sin deformarse */
.enar-imagen-loop-overlay img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}



/* ==========================================================================
   4.8. ERROR 404
   --------------------------------------------------------------------------
   (Espacio reservado para la página de página no encontrada)
   ========================================================================== */



/* ==========================================================================
   4.9. POPUPS
   --------------------------------------------------------------------------
   INDICE INTERNO:
   4.9.1. POPUP ANUNCIOS (Formulario, Animaciones, Stepper, Autocomplete)
   4.9.2. OTROS POPUPS (Reservado para futuros desarrollos)
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.9.1. POPUP ANUNCIOS (UI, MENSAJES Y STEPPER)
   -------------------------------------------------------------------------- */

/* --- A. UTILIDADES GENERALES Y ESTADOS --- */
/* Clase utilitaria para ocultar botones custom y limpieza de botonera nativa */
.enar-boton-oculto,
#formulario_anuncio .e-form__buttons {
    display: none !important;
}

/* Ocultamos los mensajes y el spinner por defecto hasta que el JS los llame */
#enar-msg-error,
#enar-msg-exito,
#enar-spiner {
    display: none;
}

/* --- B. ANIMACIONES E ICONOS --- */
/* Motor de animación para el loader */
@keyframes enar-giro-eterno {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Aplicación del giro al SVG del spinner */
#enar-spiner .elementor-icon svg {
    animation: enar-giro-eterno 1.4s linear infinite;
    transform-origin: center center; 
}

/* Estilos a medida para el ícono de error */
#enar-msg-error .elementor-icon .e-fas-exclamation {
    border: 9px solid;
    border-radius: 50%;
    padding: 10px;
}

/* --- C. BARRA DE PROGRESO (STEPPER) --- */
/* ESTADO 1: PASO PENDIENTE (Fondo transparente, texto oscuro y círculo) */
.enar-boton-paso .elementor-button {
    width: 35px !important;  
    height: 35px !important; 
    border-radius: 50% !important; 
    padding: 0 !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: transparent !important;
    border: 2px solid #3D626F !important;
    color: #3D626F !important;
    transition: all 0.3s ease; 
}

/* ESTADO 2: PASO ACTIVO (Fondo y borde con transparencia) */
.enar-boton-paso.paso-activo .elementor-button {
    background-color: #3D626F82 !important;
    border: 0px solid #3D626F82 !important;
    color: #ffffff !important; 
}

/* ESTADO 3: PASO HECHO (Fondo y borde sólido) */
.enar-boton-paso.paso-hecho .elementor-button {
    background-color: #3D626F !important;
    border: 2px solid #3D626F !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   4.9.2. OTROS POPUPS (RESERVADO)
   -------------------------------------------------------------------------- */
/* Aquí irán los estilos para futuros popups... */


/* ==========================================================================
   4.X. OTROS / MISCELÁNEA
   --------------------------------------------------------------------------
   (Espacio reservado para utilidades huérfanas o componentes menores)
   ========================================================================== */


/* ==========================================================================
   5. PÁGINAS ESTÁTICAS (NO THEME BUILDER)
   --------------------------------------------------------------------------
   INDICE INTERNO:
   5.1. HOME / INICIO
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1. HOME / INICIO
   --------------------------------------------------------------------------
   INDICE INTERNO:
   A. AGENDA (GRILLAS PRINCIPAL Y SECUNDARIA)
   B. ENTREVISTAS (GRILLA ASIMÉTRICA 1 DESTACADO + 3 SECUNDARIOS)
   C. CARRUSEL PEQUES
   D. GRILLA MIRADAS (DISEÑO DE TARJETAS)
   N. FILTRO DE REGIONES (UI Minimalista & Anti-Flicker)
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------
   A. AGENDA (GRILLAS PRINCIPAL Y SECUNDARIA)
   ----------------------------------------------------------- */

/* --- Grilla 1 aislada: Agenda Principal (#post-agenda-h3) --- */
/* Forzamos la grilla a 3 columnas exactamente iguales */
#post-agenda-h3 .enar-contenedor-general-agenda .elementor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Post 1 (Izquierda): Solo respira a la derecha */
#post-agenda-h3 .elementor-loop-container .e-loop-item:nth-child(1) {
    padding-right: 15px;
}

/* Post 2 (Centro): Los dos bordes verticales y aire a los costados */
#post-agenda-h3 .elementor-loop-container .e-loop-item:nth-child(2) {
    border-left: 1px solid var(--e-global-color-text, #000); 
    border-right: 1px solid var(--e-global-color-text, #000);
    padding-left: 15px;
    padding-right: 15px;
}

/* Post 3 (Derecha): Solo respira a la izquierda */
#post-agenda-h3 .elementor-loop-container .e-loop-item:nth-child(3) {
    padding-left: 15px;
}

/* Imágenes clavadas en 200px sin deformarse */
#post-agenda-h3 .elementor-loop-container .e-loop-item .enar-imagen-loop-h3-vertical img {
    height: 200px !important;
    width: 100%;
    object-fit: cover;
}

/* --- Grilla 2 aislada: Agenda Secundaria (#post-agenda-h4) --- */
/* Forzamos la grilla a 4 columnas estrictamente iguales */
#post-agenda-h4 .elementor-loop-container.elementor-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Post 1 (Extremo izquierdo): Arranca limpio, respira a la derecha */
#post-agenda-h4 .elementor-loop-container .e-loop-item:nth-of-type(1) {
    padding-right: 15px;
}

/* Post 2 y 3 (Centrales): Borde izquierdo y aire de ambos lados */
#post-agenda-h4 .elementor-loop-container .e-loop-item:nth-of-type(2),
#post-agenda-h4 .elementor-loop-container .e-loop-item:nth-of-type(3) {
    border-left: 1px solid var(--e-global-color-text, #000);
    padding-left: 15px;
    padding-right: 15px;
}

/* Post 4 (Extremo derecho): Borde izquierdo y respira solo a la izquierda */
#post-agenda-h4 .elementor-loop-container .e-loop-item:nth-of-type(4) {
    border-left: 1px solid var(--e-global-color-text, #000);
    padding-left: 15px;
}

/* Imágenes fijas en 200px sin deformarse */
#post-agenda-h4 .elementor-loop-container .e-loop-item .enar-imagen-loop img {
    height: 200px !important;
    width: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------
   A.1 AGENDA TELÉFONO/TABLET (SEPARADORES HORIZONTALES)
   ----------------------------------------------------------- */

/* 1. Línea divisoria abajo y aire para todos los posts del bloque */
.enar-grilla-agenda-telofono .elementor-loop-container .e-loop-item {
    border-bottom: 1px solid var(--e-global-color-text, #000);
    padding-bottom: 20px;
}

/* 2. Lógica de cierre limpio (sin línea final) SOLO para la Agenda 2 (H4) */

/* --- MÓVIL (Agenda 2 es de 1 columna) --- */
@media (max-width: 767px) {
    .enar-grilla-agenda-telofono .post-agenda-h4-telefono .elementor-loop-container .e-loop-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* --- TABLET (Agenda 2 es de 2 columnas) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Le sacamos la línea a los últimos DOS para que cierre la fila entera limpia */
    .enar-grilla-agenda-telofono .post-agenda-h4-telefono .elementor-loop-container .e-loop-item:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* 3. Imágenes clavadas en 200px sin deformarse */
.enar-grilla-agenda-telofono .elementor-loop-container .e-loop-item img {
    height: 200px !important;
    width: 100%;
    object-fit: cover;
}

/* -----------------------------------------------------------
   B. ENTREVISTAS (GRILLA ASIMÉTRICA 1 DESTACADO + 3 SECUNDARIOS)
   ----------------------------------------------------------- */

/* --- 1. POST IZQUIERDO: Igualar altura total y expandir imagen (Solo PC y Tablet) --- */
@media (min-width: 768px) {
    .enar-post-entrevista-1,
    .enar-post-entrevista-1 .elementor-widget-container,
    .enar-post-entrevista-1 .elementor-loop-container {
        height: 100% !important;
    }

    .enar-post-entrevista-1 .e-loop-item,
    .enar-post-entrevista-1 .enar-loop-h3-vertical {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .enar-post-entrevista-1 .enar-contenedor-imagen {
        flex-grow: 1 !important; 
        height: 100% !important;
        min-height: 0 !important; 
    }

    .enar-post-entrevista-1 .enar-imagen-loop-h3-vertical,
    .enar-post-entrevista-1 .enar-imagen-loop-h3-vertical img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .enar-post-entrevista-1 .enar-contenedor-texto {
        flex-grow: 0 !important;
    }
}

/* --- 2. POSTS DERECHA: Cortar extracto a 3 renglones con "..." --- */
.enar-post-entrevista-2 .enar-extracto,
.enar-post-entrevista-2 .enar-extracto p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important; 
    margin-bottom: 0 !important; 
}

/* --- 3. POSTS DERECHA: Expandir la imagen a la altura del contenido --- */
.enar-post-entrevista-2 .enar-loop-h4-horizontal {
    align-items: stretch !important; 
}

.enar-post-entrevista-2 .enar-contenedor-imagen {
    height: auto !important;
    display: flex !important;
}

.enar-post-entrevista-2 .enar-imagen-loop {
    position: relative !important; 
    height: 100% !important;
    width: 100% !important;
}

.enar-post-entrevista-2 .enar-imagen-loop img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* --- 4. SEPARADORES DE LA GRILLA ASIMÉTRICA --- */
@media (min-width: 768px) {
    /* LÍNEA VERTICAL: Separa el bloque izquierdo del derecho en PC y Tablet */
    .enar-post-entrevista-1 {
        border-right: 1px solid #e5e5e5;
        padding-right: 20px !important; 
    }
}

/* LÍNEAS HORIZONTALES: Separan los 3 posts de la derecha */
.enar-post-entrevista-2 .e-loop-item {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px !important; 
    margin-bottom: 20px !important;  
}

.enar-post-entrevista-2 .e-loop-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* -----------------------------------------------------------
   C. CARRUSEL PEQUES
   ----------------------------------------------------------- */

/* Separador y diseño de la tarjeta del carrusel */
.swiper-wrapper .e-loop-item > .elementor-element {
    border-radius: 15px;
    background-color: #f7eded;
}

.swiper-wrapper .e-loop-item article.elementor-element {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* Pre-carga del carrusel para evitar saltos (Fórmula 3.33 slides + 16px gap) */
@media (min-width: 1025px) {
    .enar-post-peques .swiper:not(.swiper-initialized) .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    
    .enar-post-peques .swiper:not(.swiper-initialized) .swiper-slide {
        width: calc((100% - (16px * 2.33)) / 3.33) !important; 
        flex-shrink: 0;
    }
}


/* -----------------------------------------------------------
   D. GRILLA MIRADAS (DISEÑO DE TARJETAS)
   ----------------------------------------------------------- */

/* 1. Tarjeta Completa: Redondeo y overflow (cuchillo) */
.enar-grilla-miradas .enar-loop-h3-vertical {
    background-color: var(--enar-bg-gray, #F4F4F8) !important; 
    border-radius: 5px !important;
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Contenedor de Texto: Expansión hacia abajo */
.enar-grilla-miradas .enar-contenedor-texto {
    flex-grow: 1 !important; 
}

/* 3. Contenedor de Imagen: Altura blindada en 250px */
.enar-grilla-miradas .enar-contenedor-imagen {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    flex: 0 0 auto !important; 
}

/* 4. Comportamiento de la Foto: Cobertura perfecta */
.enar-grilla-miradas .enar-contenedor-imagen .elementor-widget-image,
.enar-grilla-miradas .enar-contenedor-imagen img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ==========================================================================
   N. FILTRO DE REGIONES (DESPLEGABLE CUSTOM ENAR - ANTI SALTOS)
   ========================================================================== */

/* N.1 MATAMOS LAS ALTURAS INTRUSAS Y FIJAMOS EL CONTENEDOR */
.enar-boton-regiones .elementor-widget-container,
.enar-boton-regiones .elementor-shortcode,
.enar-filtro-contenedor,
.enar-filtro-contenedor .elementor-field-group,
.enar-filtro-contenedor .elementor-select-wrapper,
.enar-wrapper-federal {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* El wrapper manda: 200px innegociables */
.enar-wrapper-federal {
    position: relative !important;
    display: block !important;
    width: 200px !important;
    max-width: 200px !important; 
    min-width: 200px !important;
}

/* N.2 LOS GEMELOS IDÉNTICOS (Select Nativo inicial y el Input JS final) */
.enar-boton-regiones .enar-wrapper-federal select#enar-select-territorios,
.enar-boton-regiones .enar-wrapper-federal input[type="text"].elementor-field {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; 

    display: block !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
    
    /* BLOQUEO NUCLEAR DE ANCHO: 200px clavados */
    width: 200px !important; 
    max-width: 200px !important;
    min-width: 200px !important;
    box-sizing: border-box !important; 
    
    /* Tipografía y Color Exacto */
    font-weight: 500 !important;
    color: #482C44 !important;
    -webkit-text-fill-color: #482C44 !important; 
    font-family: inherit !important;
    font-size: 15px !important;
    
    /* Altura dictada puramente por el texto */
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.5em !important;
    
    /* Relleno estricto (0 a la izq para no sumar ancho, 25 a la der para el chevron) */
    padding: 0 25px 0 0 !important; 
    margin: 0 !important;
    background-color: transparent !important;
    background-image: none !important; 
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    
    /* Evitamos que el texto desborde si es muy largo */
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* N.3 EL RELEVO PERFECTO (Chau salto visual) */
.enar-boton-regiones .enar-wrapper-federal:has(input[type="text"]) select#enar-select-territorios {
    opacity: 0 !important; 
    position: absolute !important; 
    pointer-events: none !important; 
    height: 0 !important; 
    width: 0 !important;
    min-width: 0 !important;
    z-index: -1 !important; 
    visibility: hidden !important; 
    padding: 0 !important;
}

/* N.4 LIMPIEZA DE ÍCONOS NATIVOS DE ELEMENTOR */
.enar-boton-regiones .elementor-select-wrapper::before,
.elementor-field-type-select .select-caret-down-wrapper {
    display: none !important;
    content: none !important;
}

/* N.5 CHEVRON ÚNICO Y ANIMADO */
.enar-boton-regiones .enar-wrapper-federal::after {
    content: "" !important;
    display: block !important; 
    position: absolute !important;
    right: 5px !important; 
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important; 
    
    /* Chevron SVG con color %23482C44 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23482C44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    pointer-events: none !important; 
    transition: transform 0.3s ease !important; 
    z-index: 10 !important;
}

/* N.6 ROTACIÓN DEL CHEVRON AL ABRIR EL MENÚ */
.enar-boton-regiones .enar-wrapper-federal:has(.enar-select-dropdown[style*="display: block"])::after,
.enar-boton-regiones .enar-wrapper-federal:has(.enar-select-dropdown.activo)::after,
.enar-boton-regiones .enar-wrapper-federal:has(.enar-select-dropdown.open)::after {
    transform: rotate(180deg) !important;
}

/* N.7 EL DESPLEGABLE */
.enar-boton-regiones .enar-wrapper-federal .enar-select-dropdown { 
    position: absolute !important; 
    top: calc(100% + 5px) !important; /* El aire vertical que dejaste */
    left: -5px !important; /* Lo empujamos 5px a la izquierda para alinear el borde derecho con el chevron */
    right: auto !important; 
    
    /* Recuperamos la soberanía del ancho: 200px idénticos al input */
    width: 200px !important; 
    
    background: #ffffff !important; 
    border-radius: 8px !important; 
    
    /* Altura libre para mostrar todas las provincias sin scroll */
    height: auto !important;
    max-height: none !important; 
    
    overflow: hidden !important; 
    z-index: 45 !important; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; 
    margin: 0 !important; 
    padding: 5px 0 !important; 
    border: 1px solid #e5e7eb !important;
    box-sizing: border-box !important;
}

.enar-select-dropdown.activo {
    display: block !important;
}

/* N.8 LA LISTA Y LOS ITEMS */
ul.enar-select-options { 
    list-style: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

ul.enar-select-options li { 
    padding: 10px 15px !important; 
    cursor: pointer !important; 
    color: #333333 !important; 
    font-size: 14px !important; 
    text-align: left !important;
    background-color: transparent !important;
    line-height: 1.4em !important;
}

/* N.9 EL HOVER VERDE INSTITUCIONAL */
ul.enar-select-options li:hover,
ul.enar-select-options li.selected,
ul.enar-select-options li[class*="active"] { 
    background-color: #3D626F !important; 
    color: #ffffff !important; 
}


/* N.11 LIMPIEZA DE ESPACIOS EXTRA */
.enar-grilla-loop .elementor-form .elementor-field-group {
    padding-bottom: 0px !important;
}

/* ==========================================================================
   CAMPO DE PRECIO (ESTILO PÍLDORA) - APORTE VOLUNTARIO esto hay que ordenarlo
   ========================================================================== */

/* 1. Contenedor principal con bordes 100% redondos */
.enar-aporte-voluntario .price-input {
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid #818a91 !important; 
    border-radius: 999px !important; /* Magia del borde redondo */
    padding: 0 20px !important; 
    height: 40px !important; 
    font-weight: 400 !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease;
}

/* Efecto al hacer clic */
.enar-aporte-voluntario .price-input:focus-within {
    border-color: #3D626F !important; 
}

/* 2. MATAMOS LAS ALTURAS Y BORDES DE LOS CONTENEDORES */
.enar-boton-regiones,
.enar-boton-regiones .elementor-select-wrapper {
    /* Reseteamos tu variable global para que no inyecte los 40px */
    --enar-altura-input: auto !important; 
    
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 3. DEJAMOS VIVA LA "CABECERA" (El input falso con altura al ras) */
.enar-boton-regiones .elementor-select-wrapper input[type="text"].elementor-field {
    display: block !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
    
    /* El secreto de la altura: dictada puramente por el texto */
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.5em !important;
    
    /* Matamos cualquier relleno y borde */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* 4. Ocultar las flechitas nativas del navegador */
.enar-aporte-voluntario .price-input input[type="number"]::-webkit-inner-spin-button,
.enar-aporte-voluntario .price-input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.enar-aporte-voluntario .price-input input[type="number"] {
    -moz-appearance: textfield; 
}

/* ==========================================================================
   CAMPO DE PRECIO (SIN BORDES) - APORTE ÚNICO VOLUNTARIO
   ========================================================================== */

/* 1. Contenedor principal totalmente sin bordes */
.enar-aporte-voluntario-unico .price-input {
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important; /* Transparente para que se funda con tu grilla */
    border: none !important; /* Eliminamos la línea del borde */
    border-radius: 0 !important; /* Eliminamos las curvas */
    padding: 0 10px !important; 
    height: 100% !important; /* Para que iguale a sus vecinos en la grilla */
    min-height: 40px !important;
    font-weight: 400 !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Quitamos cualquier resplandor al hacer clic */
.enar-aporte-voluntario-unico .price-input:focus-within {
    outline: none !important;
    border: none !important; 
}

/* 3. El símbolo del $ */
.enar-aporte-voluntario-unico .price-input span {
    color: #555555 !important;
    font-size: 15px !important;
    margin-right: 5px !important;
    user-select: none !important; 
}

/* 4. El campo de texto numérico limpio */
.enar-aporte-voluntario-unico .price-input input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 15px !important;
    color: #333333 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 5. Ocultar las flechitas nativas del navegador */
.enar-aporte-voluntario-unico .price-input input[type="number"]::-webkit-inner-spin-button,
.enar-aporte-voluntario-unico .price-input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.enar-aporte-voluntario-unico .price-input input[type="number"] {
    -moz-appearance: textfield; 
}


/* esto ni idea que es*/

/* El estado activo del botón, respetando el rojo ENAR */
.enar-btn-ajax.activo .elementor-button {
    background-color: var(--enar-accent, #EE1133) !important;
    color: #ffffff !important;
}

/* Paragraph */
.enar-grilla-cuerpo .elementor-element p{
	margin-bottom:0px;
	
}