/* ================================================================
   Custom CSS — SoloAzar
   Rediseño moderno: variables, tipografía, animaciones, componentes
   ================================================================ */

/* -- Google Fonts -----------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;600;700;800&display=swap');

/* -- Variables CSS globales -------------------------------------*/
:root {
    /* Colores principales */
    --sa-primary:        #F16322;
    --sa-primary-hover:  #d9521a;
    --sa-dark:           #1A1A2E;
    --sa-dark-2:         #16213E;
    --sa-dark-3:         #0F3460;

    /* Colores de sección */
    --sa-noticias:       #0984E3;
    --sa-eventos:        #00B894;
    --sa-podcast:        #D63031;
    --sa-entrevistas:    #2D3436;

    /* Grises */
    --sa-gray-50:        #F8F9FA;
    --sa-gray-100:       #F1F3F5;
    --sa-gray-200:       #E9ECEF;
    --sa-gray-500:       #ADB5BD;
    --sa-gray-700:       #495057;
    --sa-gray-800:       #2D3436;
    --sa-gray-900:       #1A1A1A;

    /* Tipografía */
    --sa-font-main:      'Inter', 'Helvetica Neue', Arial, sans-serif;
    --sa-font-heading:   'Outfit', 'Helvetica Neue', Arial, sans-serif;

    /* Sombras */
    --sa-shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
    --sa-shadow-md:      0 4px 20px rgba(0,0,0,0.12);
    --sa-shadow-lg:      0 8px 40px rgba(0,0,0,0.16);
    --sa-shadow-card:    0 2px 12px rgba(0,0,0,0.07);

    /* Bordes */
    --sa-radius-sm:      6px;
    --sa-radius-md:      10px;
    --sa-radius-lg:      14px;
    --sa-radius-xl:      20px;

    /* Transiciones */
    --sa-transition:     0.22s ease;
}

/* -- Base tipográfica -------------------------------------------*/
body {
    font-family: var(--sa-font-main);
    color: var(--sa-gray-800);
    background-color: var(--sa-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.menu-title, .section-title {
    font-family: var(--sa-font-heading);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* \u2500\u2500 NAVBAR DARK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
#header,
.sa-sticky-nav {
    background: var(--sa-dark) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.25);
    transition: background var(--sa-transition), box-shadow var(--sa-transition);
    z-index: 1000 !important;
    /* FIX sticky: el navbar queda fijo en la parte superior al hacer scroll */
    position: sticky !important;
    top: 0 !important;
    /* NO usar display:flex ni flex-direction:column — rompe mega-menu */
}

#header-wrap {
    background: transparent !important;
    border-bottom: none !important;
    /* Quitar padding vertical para que los items puedan llegar al borde */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#header-wrap > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
 * HEADER: CSS Grid 3 columnas simétricas
 *  Col 1 (1fr)  = Logo    — left
 *  Col 2 (auto) = Nav     — center (matemáticamente exacto)
 *  Col 3 (1fr)  = Misc    — right
 */
#header-wrap .header-row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: stretch !important;
    min-height: 62px;
    position: relative !important;
}

/* Logo ? columna 1, alineado a la izquierda */
#header-wrap .header-row #logo {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 15px;
    position: static !important;
    transform: none !important;
    z-index: 5;
}

/* header-misc ? columna 3, alineado a la derecha */
#header-wrap .header-row .header-misc {
    grid-column: 3 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    position: static !important;
    z-index: 5;
}

/* Logo */
#logo img {
    transition: opacity var(--sa-transition);
}
#logo img:hover {
    opacity: 0.85;
}

/* -- Menú principal — full-height hover -----------------------------*/

/* nav.primary-menu ? columna 2, centro perfecto del grid */
#header nav.primary-menu {
    grid-column: 2 !important;
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    z-index: 2;
}

/* ul.menu-container nivel 1 \u2014 solo selectores directos */
#header nav.primary-menu > ul.menu-container {
    display: flex !important;
    align-items: stretch !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* li nivel 1 \u2014 directo */
#header nav.primary-menu > ul.menu-container > li.menu-item {
    display: flex !important;
    align-items: stretch !important;
    position: relative;   /* necesario para mega-menu absolute */
}

/* a nivel 1 \u2014 llena alto completo y centra texto */
#header nav.primary-menu > ul.menu-container > li.menu-item > a.menu-link {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    color: rgba(255,255,255,0.88) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em;
    padding: 0 16px !important;
    transition: background-color 0.18s ease, color 0.18s ease;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

/* div adentro del a */
#header nav.primary-menu > ul.menu-container > li.menu-item > a.menu-link > div {
    display: inline !important;
    pointer-events: none;
}

/* Sin underline ::after */
#header nav.primary-menu > ul.menu-container > li.menu-item > a.menu-link::after {
    display: none !important;
}

/* \u2500\u2500 Colores de hover por secci\u00f3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
/* PRINCIPAL \u2014 amarillo (negro para leer) */
#header li.menu-principal:hover > a.menu-link,
#header li.menu-principal > a.menu-link:focus {
    background-color: #D4A017 !important; color: #000 !important;
}
/* NOTICIAS \u2014 azul */
#header li.menu-noticias:hover > a.menu-link,
#header li.menu-noticias > a.menu-link:focus {
    background-color: var(--sa-noticias) !important; color: #fff !important;
}
/* EVENTOS \u2014 verde claro (negro para leer) */
#header li.menu-eventos:hover > a.menu-link,
#header li.menu-eventos > a.menu-link:focus {
    background-color: #6CC24A !important; color: #000 !important;
}
/* PODCAST \u2014 rojo */
/* PODCAST — rojo */
#header li.menu-podcast:hover > a.menu-link,
#header li.menu-podcast > a.menu-link:focus {
    background-color: var(--sa-podcast) !important; color: #fff !important;
}
/* ENTREVISTAS — negro */
#header li.menu-entrevistas:hover > a.menu-link,
#header li.menu-entrevistas > a.menu-link:focus {
    background-color: #111 !important; color: #fff !important;
}
/* CONTACTO — verde oscuro */
#header li.menu-contacto:hover > a.menu-link,
#header li.menu-contacto > a.menu-link:focus {
    background-color: #2e7d32 !important; color: #fff !important;
}

/* -- MEGA-MENU: fixed full-width ---------------------------------*/
.mega-menu-content,
.sub-menu-noticias,
.sub-menu-eventos {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 2147483647 !important; /* máximo z-index — siempre tapa todo */
    background: var(--sa-dark-2) !important;
    border-top: 3px solid var(--sa-primary) !important;
    border-bottom: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 28px 40px 32px !important;
    overflow: hidden;
}
/* FIX: botones de carrusel (Owl) no deben superar al mega-menú */
.owl-nav,
.owl-prev,
.owl-next,
.owl-buttons,
.owl-controls {
    z-index: 1 !important;
    position: relative !important;
}


/* Pseudoelemento para imagen de fondo configurable */
.mega-menu-content::before,
.sub-menu-noticias::before,
.sub-menu-eventos::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mm-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: var(--mm-bg-opacity, 0.15);
    pointer-events: none;
    z-index: 0;
}

.mega-menu-content > *,
.sub-menu-noticias > *,
.sub-menu-eventos > * {
    position: relative;
    z-index: 1;
}

/* -- BOTONES DE IDIOMA full-height color -- */

#header .header-misc {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cadena 2: LUPA como boton destacado (igual que POR/ENG) */
#header .header-misc > #top-search {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    order: -1;
}
#top-search a#top-search-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    height: 100% !important;
    padding: 0 16px !important;
    background-color: #2c3e50 !important;  /* azul oscuro — igual al header, con borde que destaca */
    color: #fff !important;
    border-right: 1px solid rgba(255,255,255,0.14) !important;
    transition: background 0.2s, color 0.2s;
}
#top-search a#top-search-trigger i {
    font-size: 15px !important;
    color: #fff !important;
}
#top-search a#top-search-trigger:hover {
    background-color: rgba(255,255,255,0.22) !important;
}

/* Cadena 3: .internacional ocupa 100% de alto */
.internacional {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    min-width: 64px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    border-radius: 0 !important;
    transition: filter 0.15s ease;
    cursor: pointer;
    margin: 0 !important;
}

.internacional a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1;
    white-space: nowrap;
}

.internacional:hover {
    filter: brightness(1.15) !important;
}

/* Color azul para los que no tienen style inline */
.internacional:not([style]) {
    background-color: #1A56DB !important;
}



/* Eliminar los bordes de colores superiores heredados */
.borde-top-amarillo,
.borde-top-azul,
.borde-top-verde-claro,
.borde-top-rojo,
.borde-top-negro,
.borde-top-verde-oscuro {
    border-top: none !important;
}

/* -- MEGA-MENU: FULL-WIDTH, categorías grandes, imagen de fondo configurable -- */

/* El mega-menu ocupa todo el ancho de la ventana */
.mega-menu-content,
.sub-menu-noticias,
.sub-menu-eventos {
    z-index: 2147483647 !important; /* max z-index */
    background: var(--sa-dark-2) !important;
    border-top: 3px solid var(--sa-primary) !important;
    border-bottom: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 28px 40px 32px !important;
    overflow: hidden;
    /* Imagen de fondo configurable desde admin (via atributo data-bg en HTML) */
}

/* Pseudoelemento para la imagen de fondo semitransparente */
.mega-menu-content::before,
.sub-menu-noticias::before,
.sub-menu-eventos::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mm-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: var(--mm-bg-opacity, 0.15);
    pointer-events: none;
    z-index: 0;
}

/* Todo el contenido del mega-menu encima del pseudoelemento */
.mega-menu-content > *,
.sub-menu-noticias > *,
.sub-menu-eventos > * {
    position: relative;
    z-index: 1;
}

/* T\u00edtulos de categor\u00edas \u2014 MAS GRANDES que los \u00edtems */
.mega-menu-title > .menu-link,
.mega-menu-title > a {
    color: #ffffff !important;
    font-size: 13px !important;        /* M\u00e1s grande */
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase !important;
    padding-bottom: 8px !important;
    display: block;
}

/* L\u00edneas divisoras de las categor\u00edas */
.linea-titulos-noticias,
.linea-titulos-eventos {
    border-bottom: 2px solid var(--sa-primary) !important;
    margin-bottom: 12px !important;
    padding-bottom: 4px !important;
}

/* \u00cdtems del mega-menu \u2014 m\u00e1s peque\u00f1os que el t\u00edtulo */
.mega-menu-content .menu-link,
.sub-menu-noticias .menu-link,
.sub-menu-eventos .menu-link {
    color: rgba(255,255,255,0.72) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: color 0.15s ease, padding-left 0.15s ease;
    display: block;
    padding: 4px 0 !important;
    line-height: 1.4;
}
.mega-menu-content a:hover,
.sub-menu-noticias a:hover,
.sub-menu-eventos a:hover {
    color: var(--sa-primary) !important;
    padding-left: 6px !important;
}

/* Quitar el espacio (margin-bottom: mb-3) que genera el navbar entre \u00e9l y los banners */
.sa-sticky-nav.mb-3,
#header.mb-3 {
    margin-bottom: 0 !important;
}

/* Tambi\u00e9n quitar el gap que genera Bootstrap entre el header y la primera secci\u00f3n */
#header + *,
.sa-sticky-nav + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* -- Topbar (barra superior de redes) ---------------------------*/
#top-bar {
    background: var(--sa-dark-2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 6px 0 !important;
}

#top-bar a,
#top-bar span {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12px !important;
    transition: color var(--sa-transition);
}

#top-bar a:hover {
    color: var(--sa-primary) !important;
}

/* Iconos sociales del topbar */
#top-bar .social-icon a,
#top-bar [class*="icon-"] {
    font-size: 14px !important;
    color: rgba(255,255,255,0.55) !important;
    transition: color var(--sa-transition), transform var(--sa-transition);
}
#top-bar .social-icon a:hover,
#top-bar [class*="icon-"]:hover {
    color: var(--sa-primary) !important;
    transform: translateY(-1px);
}

/* -- CARDS DE NOTICIAS ------------------------------------------*/

/* Card base */
.entry,
.iPost,
.post-item {
    background: #fff;
    border-radius: var(--sa-radius-md) !important;
    overflow: hidden;
    box-shadow: var(--sa-shadow-card);
    transition: transform var(--sa-transition), box-shadow var(--sa-transition);
    border: 1px solid var(--sa-gray-200);
}

.entry:hover,
.iPost:hover,
.post-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sa-shadow-md);
}

/* Imagen de la card */
.entry .entry-image,
.iPost .ipost-image,
.post-item .post-image {
    overflow: hidden;
}
/* FIX: botones de carrusel (Owl) no deben superar al mega-menú */
.owl-nav,
.owl-prev,
.owl-next,
.owl-buttons,
.owl-controls {
    z-index: 1 !important;
    position: relative !important;
}


.entry .entry-image img,
.iPost .ipost-image img,
.post-item .post-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.entry:hover .entry-image img,
.iPost:hover .ipost-image img,
.post-item:hover .post-image img {
    transform: scale(1.04);
}

/* Título de la card */
.entry .entry-title,
.iPost .ipost-title,
.post-item .post-title,
.entry h2,
.entry h3 {
    font-family: var(--sa-font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: var(--sa-gray-900);
    transition: color var(--sa-transition);
}

.entry:hover .entry-title a,
.iPost:hover a,
.post-item:hover .post-title a {
    color: var(--sa-primary) !important;
}

/* Meta (fecha, autor) */
.entry .entry-meta,
.post-meta {
    font-size: 11px;
    color: var(--sa-gray-500);
    font-weight: 500;
}

/* Badge de categoría */
.entry .entry-category,
.badge-categoria,
[class*="categoria-badge"] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--sa-gray-100);
    color: var(--sa-gray-700);
    margin-bottom: 6px;
}

/* -- SECCIÓN TITLES ---------------------------------------------*/
.title-block,
.title-noticias,
.section-heading {
    border-left: 4px solid var(--sa-primary) !important;
    padding-left: 12px !important;
    font-family: var(--sa-font-heading);
    font-weight: 800;
    font-size: 14px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sa-gray-900);
}

/* NOTICIAS badge */
.title-noticias,
.badge-noticias {
    border-left-color: var(--sa-noticias) !important;
    color: var(--sa-noticias) !important;
}

/* EVENTOS badge */
.title-eventos,
.badge-eventos {
    border-left-color: var(--sa-eventos) !important;
    color: var(--sa-eventos) !important;
}

/* -- FOOTER -----------------------------------------------------*/
#footer {
    background: var(--sa-dark) !important;
    color: rgba(255,255,255,0.7) !important;
    padding-top: 0 !important;   /* la sección superior ya tiene padding */
    border-top: 3px solid var(--sa-primary);
}

/* FIX: el bloque superior del footer tiene bg-blanco del tema ? lo oscurecemos */
#footer .bg-blanco,
#footer .w-100.bg-blanco {
    background: var(--sa-dark-2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* FIX: el mini-menú del footer superior — alineación correcta */
#footer .header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 12px;
}

#footer .primary-menu .menu-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

#footer .primary-menu .menu-item {
    list-style: none;
}

#footer .primary-menu .menu-link {
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    transition: color var(--sa-transition) !important;
}


/* -- FOOTER MENÚ: hover por sección igual al navbar ---------------*/
/* Hover genérico */
#footer .primary-menu .menu-link:hover,
#footer .menu-container .menu-item a:hover {
    color: var(--sa-primary) !important;
}

/* Hover con color de fondo por sección (mirror del navbar) */
#footer .menu-principal .menu-link:hover,
#footer .menu-item:has(a[href*="principal"]) a:hover,
#footer .menu-item:has(a[href*="home"]) a:hover {
    background: var(--sa-yellow) !important;
    color: #000 !important;
    padding-left: 8px !important;
}
#footer .menu-noticias .menu-link:hover,
#footer .menu-item:has(a[href*="noticias"]) a:hover,
#footer .menu-item:has(a[href*="news"]) a:hover {
    background: #1A56DB !important;
    color: #fff !important;
    padding-left: 8px !important;
}
#footer .menu-eventos .menu-link:hover,
#footer .menu-item:has(a[href*="evento"]) a:hover,
#footer .menu-item:has(a[href*="event"]) a:hover {
    background: #1ABC9C !important;
    color: #000 !important;
    padding-left: 8px !important;
}
#footer .menu-podcast .menu-link:hover,
#footer .menu-item:has(a[href*="podcast"]) a:hover {
    background: #E74C3C !important;
    color: #fff !important;
    padding-left: 8px !important;
}
#footer .menu-entrevistas .menu-link:hover,
#footer .menu-item:has(a[href*="entrevista"]) a:hover,
#footer .menu-item:has(a[href*="interview"]) a:hover {
    background: #8E44AD !important;
    color: #fff !important;
    padding-left: 8px !important;
}
#footer .menu-contacto .menu-link:hover,
#footer .menu-item:has(a[href*="contacto"]) a:hover,
#footer .menu-item:has(a[href*="contact"]) a:hover {
    background: #F16322 !important;
    color: #fff !important;
    padding-left: 8px !important;
}

/* Transición suave en todos los links del footer */
#footer .menu-container .menu-item a,
#footer .primary-menu .menu-link {
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
    padding: 4px 8px !important;
    display: inline-block !important;
    border-radius: 3px !important;
}

/* FIX: eliminar los bordes de colores del menú footer */
#footer .borde-bottom-amarillo,
#footer .borde-bottom-azul,
#footer .borde-bottom-verde-claro,
#footer .borde-bottom-rojo,
#footer .borde-bottom-negro,
#footer .borde-bottom-verde-oscuro {
    border-bottom: none !important;
    border-top: none !important;
}

/* FIX: el bloque principal del footer */
#footer .bg-footer,
#footer .w-100.bg-footer {
    background: var(--sa-dark) !important;
}


#footer h3,
#footer h4,
#footer .footer-title {
    font-family: var(--sa-font-heading);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

#footer a {
    color: rgba(255,255,255,0.65) !important;
    text-decoration: none;
    font-size: 13px;
    transition: color var(--sa-transition), padding-left var(--sa-transition);
}

#footer a:hover {
    color: var(--sa-primary) !important;
    padding-left: 4px;
}

#footer .footer-logo img {
    /* Logo footer: sin invert forzado, dejar el original */
    opacity: 0.85;
}

/* FIX: los bordes de color del menu mobile que aparecen en el footer */
#footer [class*="borde-top-"],
.pushy [class*="borde-top-"],
#footer .borde-top-amarillo,
#footer .borde-top-azul,
#footer .borde-top-verde-claro,
#footer .borde-top-rojo,
#footer .borde-top-negro,
#footer .borde-top-verde-oscuro {
    border-top: none !important;
}

/* FIX: overflow del footer - evitar que contenido se desborde */
#footer {
    overflow-x: hidden !important;
}

/* FIX: el menú mobile inferior con separadores de colores */
#nav-colores-mobile,
.menu-colores-mobile,
.linea-colores-footer {
    display: none !important;
}

#footer .copyright {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 16px 0 !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 12px !important;
}

/* Iconos sociales footer */
#footer .social-icon a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    text-align: center;
    display: inline-block;
    transition: background var(--sa-transition), color var(--sa-transition), transform var(--sa-transition);
}
#footer .social-icon a:hover {
    background: var(--sa-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* -- BOTONES ----------------------------------------------------*/
.button,
.btn-primary,
.boton-suscribirse {
    border-radius: var(--sa-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    transition: background var(--sa-transition), transform var(--sa-transition), box-shadow var(--sa-transition);
}

.button:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(241, 99, 34, 0.35);
}

/* -- LINKS generales --------------------------------------------*/
a {
    transition: color var(--sa-transition);
}

/* -- SEARCH icon en navbar --------------------------------------*/
#top-search a {
    color: rgba(255,255,255,0.7) !important;
    transition: color var(--sa-transition);
}
#top-search a:hover {
    color: var(--sa-primary) !important;
}

/* -- Prevenir CLS en banners publicitarios ----------------------*/
.banner-zone,
[class*="banner-zone"],
.banner-wrapper,
.ad-banner {
    min-height: 90px;
    display: block;
}

/* -- Prevenir CLS en imágenes -----------------------------------*/
img {
    max-width: 100%;
    height: auto;
}

.post-image img,
.entry-image img,
.news-thumbnail img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* -- Videos adaptados -------------------------------------------*/
.banner-video {
    pointer-events: none;
}

.video-responsive {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* -- Sticky elements --------------------------------------------*/
.sticky-banner,
.header-ad {
    min-height: 90px;
    background: transparent;
}

/* -- Fixes desktop ----------------------------------------------*/
@media (min-width: 992px) {
    .side-panel,
    #side-panel {
        contain: layout;
    }

    #header,
    .header-wrap {
        contain: layout;
    }
}

/* -- Micro-animación: fade-in en contenido ----------------------*/
.entry,
.iPost {
    animation: sa-fadeUp 0.35s ease both;
}

@keyframes sa-fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -- Page Header Banner -----------------------------------------*/
.page-section-header {
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    min-height: 220px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 24px;
}

.page-section-header .overlay {
    position: absolute;
    inset: 0;
}

.page-section-header .header-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 24px 32px;
    color: #fff;
    font-family: var(--sa-font-heading);
}

/* -- Scrollbar personalizada ------------------------------------*/
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--sa-gray-100);
}
::-webkit-scrollbar-thumb {
    background: var(--sa-gray-500);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sa-primary);
}

/* -- ESPACIADO BANNERS: firstBannerZonesHome / navbar / topBannerHome -- */

/* 1. Los 5 banners superiores (firstBannerZonesHome):
   Quitar el margin-top excesivo del .row (mt-md-3 Bootstrap = 1rem)
   y también el margin-bottom para que el navbar quede pegado */
.firstBannerZonesHome-wrap .row,
#firstBannerZonesHome .row,
body > div > .container > .row.mt-md-3:first-of-type {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* 2. El topBannerHome (banners justo debajo del navbar): agregar separación */
.topBannerHome-wrap .row,
#topBannerHome .row,
#topBannerHome .container {
    margin-top: 16px !important;
    padding-top: 8px !important;
}

/* Solución directa: el .container dentro del yield(topBannerHome)
   que es el div.container justo después del #header */
#header + div.container,
.sa-sticky-nav + div.container {
    margin-top: 16px !important;
    padding-top: 8px !important;
}

/* 3. Reducir el padding-top del page wrap si lo tiene */
#wrapper,
.wrapper,
#page {
    padding-top: 0 !important;
}

/* -- AJUSTE FINO: espacio navbar vs banners (request usuario) -- */

/* 1. Agregar margen inferior al navbar para separarlo del banner principal (topBannerHome) */
#header,
.sa-sticky-nav {
    margin-bottom: 14px !important;
}

/* 2. Eliminar margen inferior del último col del firstBannerZonesHome
   para que el navbar quede más cercano a los 5 banners superiores */
#firstBannerZonesHome-wrap .col-md-12.mb-md-3:last-child,
#firstBannerZonesHome .col-md-12.mb-md-3:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* -- ESPACIADO FINAL: top banners + navbar + main banner -- */

/* Elimina el margen inferior del contenedor de banners superiores
   para que el navbar quede bien pegado a ellos */
#sa-top-banners {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Elimina el mb-md-3 del último col dentro del row de zona 2 (5 banners) */
#sa-top-banners .row:last-of-type .col-6.mb-3,
#sa-top-banners .row .col-md.mb-3:last-child {
    margin-bottom: 2px !important;
}

/* Margin inferior al navbar para separarlo del banner principal */
#header,
.sa-sticky-nav {
    margin-bottom: 14px !important;
}

/* -- v12b: reducir espacio entre top-banner-row y navbar -- */
/* El gap se genera por el row de los 5 banners (zona 2) que tiene mb-3 en cada col */
#sa-top-banners .row .col-6.mb-3,
#sa-top-banners .row .col-md.mb-3 {
    margin-bottom: 4px !important;
}
/* Reducir también el mt del row de los 5 banners */
#sa-top-banners .row:nth-child(2) {
    margin-top: 2px !important;
}
/* Forzar que el container #sa-top-banners no genere espacio extra */
#sa-top-banners {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* -- FIX: Banner Habanero / sidebar - eliminar espacio vacío excesivo -- */

/* El sidebar col-lg-3 no debe generar gaps cuando el banner es chico */
.col-12.col-lg-3 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Los banners del sidebar se alinean al inicio (no stretch) */
.col-12.col-lg-3 > .col-12.mb-3,
.col-12.col-lg-3 > .row {
    flex-shrink: 0;
}

/* El espacio extra viene del div que envuelve los banners zona 16 */
/* Reducir margin-bottom en col-12 de los banners del sidebar */
.col-12.col-lg-3 .col-12.mb-3 {
    margin-bottom: 8px !important;
}

/* Al final del sidebar: quitar el auto-margin que bootstrap a veces agrega */
.col-12.col-lg-3 > *:last-child {
    margin-bottom: 0 !important;
}

/* -- FIX HABANERO: zona 20 - reducir gap inferior -- */
/* El banner de zona 20 (Habanero) tiene espacio blanco excesivo
   antes de las secciones ANALYSIS/LEGISLATION */

/* El div.col-12 que contiene la imagen de la zona 20 */
.col-12.d-none.d-lg-block:has(img.img-fluid.mt-2) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* El row que contiene las secciones ANALYSIS/LEGISLATION: reducir su margin-top */
.row:has(.entry-image) {
    margin-top: 8px !important;
}

/* =========================================================================
   NUEVOS AJUSTES FRONTEND: Menú, Lupa, Banners y Noticias (24/Mar/2026)
   ========================================================================= */

/* 1. Centrar el menú de navegación horizontalmente */
#header nav.primary-menu {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
}
#header nav.primary-menu > ul.menu-container {
    margin: 0 auto !important;
}

/* 2. Lupa de búsqueda: mismo tamaño/proporción que botones POR/ENG */
#header .header-misc > #top-search {
    display: flex !important;
    align-items: stretch !important;  
    padding: 0 !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
}
#top-search a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;    
    color: rgba(255,255,255,0.7) !important;
    transition: background 0.2s, color 0.2s;
}
#top-search a:hover {
    color: var(--sa-primary) !important;
    background: rgba(255,255,255,0.03) !important;
}
#top-search a i {
    font-size: 14px !important; 
}

/* 3. Noticias: eliminar la forma diagonal de las imágenes */
.noticia-principal-new > img.img-fluid, 
.noticia-principal-chica-new > img.img-fluid,
.ipost-image img,
.post-image img,
.entry-image img,
.entry-image a > img {
    clip-path: none !important;
    border-radius: var(--sa-radius-md) !important;
}

/* 4. Noticias: estandarizar borde redondeado y efecto blur/sombra */
.noticia-principal-new,
.noticia-principal-chica-new,
.iPost,
.post-item,
.entry {
    border-radius: var(--sa-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--sa-shadow-card) !important;
}

/* Eliminar diagonal del badge de categorías */
.noticia-principal-new .categoria, 
.noticia-principal-chica-new .categoria {
    clip-path: none !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    margin-top: 15px !important;
    margin-left: 15px !important;
}

/* Efecto Blur para noticias secundarias .entry ("noticias grandes, chicas, laterales") */
.entry .entry-title, .entry .entry-meta,
.ipost-title, .post-title {
    position: relative !important;
    z-index: 2;
}

/* 5. Alinear banners verticalmente con las noticias (eliminar márgenes flotando) */
.col-12.col-lg-7 > .row:first-of-type,
.col-12.col-lg-2 > div:has(.noticia) {
    display: flex;
    flex-direction: column;
}
/* Forzar que los banners en las columnas al lado o arriba de las noticias no dejen gaps largos */
.col-12.d-none.d-lg-block > video,
.col-12.d-none.d-lg-block > img,
.col-12.d-block.d-lg-none > video,
.col-12.d-block.d-lg-none > img {
    margin-bottom: 24px !important;
}

/* -- v18 FIX: Lupa boton mas visible con color solido ----------- */
#header #top-search,
#header .header-misc-icon#top-search {
    display: inline-flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
#header #top-search a,
#header #top-search a#top-search-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 54px !important;
    width: 54px !important;
    height: 100% !important;
    padding: 0 !important;
    background-color: #546e7a !important;
    color: #fff !important;
    border-left: 1px solid rgba(255,255,255,0.12) !important;
    font-size: 16px !important;
}
#header #top-search a:hover,
#header #top-search a#top-search-trigger:hover {
    background-color: #78909c !important;
    color: #fff !important;
}
#header #top-search a i {
    font-size: 16px !important;
    color: inherit !important;
    display: block !important;
}

/* -- FIX DEFINITIVO FLECHAS DE CARRUSEL SOBRE MEGA-MENÚ ------------------
   El problema: los botones owl-nav tienen position:absolute dentro de un
   contenedor con stacking context propio que supera al mega-menu.
   Solución: bajar el isolation del wrapper de contenido y forzar z-index
   explícito en todos los contenedores de carrusel.
--------------------------------------------------------------------------- */
#wrapper,
#content,
.section,
section#content {
    position: relative !important;
    z-index: 0 !important;
    isolation: auto !important;
}

/* Todos los contenedores de Owl Carousel quedan en z-index bajo */
.owl-carousel,
.owl-stage-outer,
.owl-item,
.owl-nav,
.owl-dots,
.owl-prev,
.owl-next {
    z-index: auto !important;
}

/* Las flechas en sí: z-index explícito bajo */
.owl-prev.disabled,
.owl-next.disabled,
.owl-prev,
.owl-next {
    z-index: 1 !important;
}

/* === Back to top button - circular === */
#gotoTop {
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
}


/* =========================================================================
   AI TRANSLATOR SELECTOR - PREMIUM STYLE
   ========================================================================= */

.ai-translator-container {
    position: relative;
    display: inline-block;
    font-family: 'Poppins', 'Lato', sans-serif;
    text-align: left;
}

.ai-translator-trigger {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.05);
}

.ai-translator-trigger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
    transform: translateY(-1px);
}

.ai-translator-trigger i {
    margin-right: 6px;
    font-size: 12px;
    transition: transform 0.8s ease;
}

.ai-translator-trigger:hover i {
    transform: rotate(360deg);
}

.ai-translator-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 8px !important;
    font-weight: 700;
    padding: 1px 4px !important;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
    box-shadow: 0 0 4px rgba(245,158,11,0.5);
    animation: aiPulseGlow 2s infinite alternate;
}

@keyframes aiPulseGlow {
    0% { box-shadow: 0 0 2px rgba(245,158,11,0.4); }
    100% { box-shadow: 0 0 8px rgba(245,158,11,0.8); }
}

.ai-translator-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 99999;
    width: 320px;
    background: #1a2744 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    padding: 12px !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ai-translator-container:hover .ai-translator-menu,
.ai-translator-container.active .ai-translator-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ai-translator-menu-title {
    font-size: 10px !important;
    color: rgba(255,255,255,0.5) !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    letter-spacing: 0.5px;
}

.ai-translator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.ai-translator-item {
    display: flex;
    align-items: center;
    padding: 6px 8px !important;
    border-radius: 6px;
    color: rgba(255,255,255,0.85) !important;
    font-size: 11px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.ai-translator-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f59e0b !important;
    transform: translateX(2px);
}

.ai-translator-item.active {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    font-weight: 600 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.ai-translator-flag {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    object-fit: cover !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* Mobile styles */
.mobile-ai-translator {
    padding: 12px 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin: 15px 0 10px 0;
}

.mobile-ai-translator-title {
    font-size: 11px !important;
    color: rgba(255,255,255,0.4) !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-ai-translator-title .mobile-ai-badge {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 8px !important;
    font-weight: 700;
    padding: 1px 4px !important;
    border-radius: 3px;
    text-transform: uppercase;
}

.mobile-ai-translator-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mobile-ai-translator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.8) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.mobile-ai-translator-item:hover, .mobile-ai-translator-item:active {
    background: rgba(255,255,255,0.12) !important;
    color: #f59e0b !important;
}

.mobile-ai-translator-item .ai-translator-flag {
    margin-right: 0 !important;
    margin-bottom: 6px !important;
    width: 20px !important;
    height: 20px !important;
}


/* Dynamic Theme overrides using var(--theme-lang-color) and color-mix() */

.ai-translator-trigger:hover {
    border-color: var(--theme-lang-color) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--theme-lang-color) 40%, transparent) !important;
}

.ai-translator-badge {
    background: linear-gradient(135deg, var(--theme-lang-color), color-mix(in srgb, var(--theme-lang-color) 70%, #000)) !important;
    box-shadow: 0 0 4px color-mix(in srgb, var(--theme-lang-color) 50%, transparent) !important;
}

.ai-translator-item.active {
    background: color-mix(in srgb, var(--theme-lang-color) 15%, transparent) !important;
    color: var(--theme-lang-color) !important;
    border-color: color-mix(in srgb, var(--theme-lang-color) 30%, transparent) !important;
}

.ai-translator-item:hover {
    color: var(--theme-lang-color) !important;
}

#gotoTop {
    background-color: var(--theme-lang-color) !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

#gotoTop:hover {
    background-color: color-mix(in srgb, var(--theme-lang-color) 80%, #000) !important;
    transform: scale(1.1);
}

/* Active language line on Sticky Header */
#header.is-sticky {
    border-bottom: 3px solid var(--theme-lang-color) !important;
    transition: border-color 0.3s ease !important;
}

/* Mobile Menu Theming */
.mobile-ai-translator-title .mobile-ai-badge {
    background: var(--theme-lang-color) !important;
}

.mobile-ai-translator-item:hover, .mobile-ai-translator-item:active {
    color: var(--theme-lang-color) !important;
}

/* Dynamic Language Colors Integration - Cards, Badges, Borders, Buttons */

/* 1. Main Navbar Menu Item Top Borders */
.borde-top-amarillo, 
.borde-top-azul, 
.borde-top-verde-claro, 
.borde-top-rojo, 
.borde-top-negro, 
.borde-top-verde-oscuro {
    border-top: 4px solid var(--theme-lang-color) !important;
}

/* 2. News Cards Accents & Category Badges */
.card-opt-a {
    border-left: 6px solid var(--theme-lang-color) !important;
}

.card-opt-a div[style*="background-color: #e68a00"],
.card-opt-a .text-white.text-uppercase {
    background-color: var(--theme-lang-color) !important;
}

.card-opt-a .news-meta .icon-time {
    color: var(--theme-lang-color) !important;
}

/* Secondary Cards top borders and category labels */
.noticia-principal-chica-new {
    border-top: 4px solid var(--theme-lang-color) !important;
}

.noticia-principal-chica-new .categoria {
    background-color: var(--theme-lang-color) !important;
    background: var(--theme-lang-color) !important;
}

.noticia-principal-chica-new h2 a:hover {
    color: var(--theme-lang-color) !important;
}

/* Premium Card top accent border */
.d-flex.flex-column.mb-4[style*="border-top: 5px solid #e68a00"] {
    border-top: 5px solid var(--theme-lang-color) !important;
}

/* 3. Section and Widget Titles (orange texts) */
.texto-naranja, 
.texto-naranja-oscuro, 
#content .texto-naranja,
#content .texto-naranja-oscuro {
    color: var(--theme-lang-color) !important;
}

/* 4. Footer Accent Borders and Buttons */
footer#footer .w-100.bg-footer.dark {
    border-top: 4px solid var(--theme-lang-color) !important;
}

footer#footer .menu-contacto a.menu-link,
footer#footer .menu-contacto a.menu-link[style*="background-color"] {
    background-color: var(--theme-lang-color) !important;
}

/* 5. Contact Buttons and tag hover backgrounds */
.menu-contacto:hover, 
.sub-menu-contacto,
.menu-link-contacto:hover {
    background-color: var(--theme-lang-color) !important;
}

.boton-tag:hover {
    background-color: var(--theme-lang-color) !important;
    border-color: var(--theme-lang-color) !important;
    color: #ffffff !important;
}

/* 6. Article Detail Page Accents & Document Attachments */
.article-premium-header span.text-uppercase[style*="color: #e68a00"],
.article-premium-header span.text-uppercase {
    color: var(--theme-lang-color) !important;
    border-bottom-color: var(--theme-lang-color) !important;
}

.article-premium-header .icon-time {
    color: var(--theme-lang-color) !important;
}

/* AI Summary Pill button dynamics */
#btn-ai-summary {
    border-color: color-mix(in srgb, var(--theme-lang-color) 30%, #ffffff) !important;
    background: color-mix(in srgb, var(--theme-lang-color) 8%, #ffffff) !important;
}
#btn-ai-summary svg {
    stroke: var(--theme-lang-color) !important;
}
#btn-ai-summary span {
    color: var(--theme-lang-color) !important;
}

/* Download attachments box */
.card-body h5[style*="border-bottom: 2px solid #e68a00"] {
    border-bottom: 2px solid var(--theme-lang-color) !important;
}
.card-body h5 .icon-folder-download {
    color: var(--theme-lang-color) !important;
}
.list-group-item span.badge[style*="background-color"]:hover,
.list-group-item span.badge:hover {
    background-color: var(--theme-lang-color) !important;
}

/* Article detail tags */
.mt-3.mb-4.px-0.px-md-3 span.badge[style*="border-left: 3px solid #e68a00"] {
    border-left: 3px solid var(--theme-lang-color) !important;
}
.mt-3.mb-4.px-0.px-md-3 span.badge:hover {
    background-color: var(--theme-lang-color) !important;
    color: #ffffff !important;
}

/* General hover effects for article social circles */
.redes-circle a:hover,
.social-circles a:hover,
.social-icons a:hover,
.social-icons button:hover {
    background-color: var(--theme-lang-color) !important;
    color: #ffffff !important;
    border-color: var(--theme-lang-color) !important;
}

/* ================================================================
   ENTREVISTAS - Premium Glassmorphism Redesign
   ================================================================ */
.sa-entrevistas {
    position: relative;
    background: #151b2e; /* Solid dark navy background matching the attachment */
    border-radius: var(--sa-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    border: 1.5px solid #e68a00; /* Warm orange border all around the container */
}
.sa-entrevistas__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 10px;
    background: transparent; /* Seamless background */
    border-bottom: none; /* No separator border */
}
.sa-entrevistas__title {
    margin: 0;
    font-family: var(--sa-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fca702; /* Solid orange/yellow text color */
}
.sa-entrevistas__nav { display: flex; gap: 8px; }
.sa-entrevistas__nav .owl-prev,
.sa-entrevistas__nav .owl-next {
    width: 30px !important; height: 30px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important; font-size: 14px !important;
    margin: 0 !important; padding: 0 !important;
    transition: all 0.25s ease !important;
    background-image: none !important;
    cursor: pointer; line-height: 1 !important;
}
.sa-entrevistas__nav .owl-prev:hover,
.sa-entrevistas__nav .owl-next:hover {
    background: rgba(230, 138, 0, 0.2) !important;
    border-color: #fca702 !important;
    transform: scale(1.05);
}
.sa-entrevistas__nav .owl-prev span,
.sa-entrevistas__nav .owl-next span {
    display: inline-block !important;
    font-size: 16px; line-height: 1; color: #fff !important;
}
.sa-entrevistas__slide { display: flex; flex-direction: column; }
.sa-entrevistas__img-wrapper {
    display: block; overflow: hidden;
    margin: 10px 24px 0; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    position: relative;
}
.sa-entrevistas__img-wrapper::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
    pointer-events: none;
    border-radius: 0 0 12px 12px;
    transition: opacity 0.3s ease;
}
.sa-entrevistas__img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sa-entrevistas__img-wrapper:hover .sa-entrevistas__img { transform: scale(1.04); }
.sa-entrevistas__img-wrapper:hover::after { opacity: 0.6; }
.sa-entrevistas__content { padding: 20px 24px 0; }
.sa-entrevistas__headline {
    font-family: var(--sa-font-heading);
    font-size: 1.25rem; font-weight: 800;
    line-height: 1.35; text-transform: uppercase;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
}
.sa-entrevistas__headline a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.25s ease;
}
.sa-entrevistas__headline a:hover { color: #fca702 !important; }
.sa-entrevistas__excerpt {
    color: rgba(255, 255, 255, 0.65);
    font-style: italic; font-size: 0.92rem; line-height: 1.55;
    margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 4;
    -webkit-box-orient: vertical; overflow: hidden;
}
.sa-entrevistas__social {
    display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 4px;
}
.sa-entrevistas__social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none; transition: all 0.25s ease;
}
.sa-entrevistas__social-btn i,
.sa-entrevistas__social-btn svg { font-size: 14px; margin: 0; }
.sa-entrevistas__social-btn:hover {
    background: rgba(230, 138, 0, 0.3);
    border-color: rgba(252, 167, 2, 0.5);
    color: #fca702;
    box-shadow: 0 0 14px rgba(230, 138, 0, 0.25);
    transform: translateY(-2px);
}
.sa-entrevistas__footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px 18px; margin: 14px 24px 6px;
    border-top: 1.5px solid #e68a00;
    font-size: 0.85rem; font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.sa-entrevistas__author i,
.sa-entrevistas__date i { margin-right: 6px; color: #fca702; font-size: 0.9rem; }
@media (max-width: 767px) {
    .sa-entrevistas__img-wrapper { margin: 12px 12px 0; border-radius: 8px; }
    .sa-entrevistas__content { padding: 16px 16px 0; }
    .sa-entrevistas__headline { font-size: 1.05rem; }
    .sa-entrevistas__excerpt { font-size: 0.85rem; -webkit-line-clamp: 3; }
    .sa-entrevistas__footer {
        flex-direction: column; gap: 6px; align-items: flex-start;
        margin: 10px 12px 6px; padding: 12px 16px 14px; font-size: 0.8rem;
    }
    .sa-entrevistas__header { padding: 14px 16px 10px; }
    .sa-entrevistas__title { font-size: 1.1rem; }
}


/* Interviews Inner Page Card Redesign */
.sa-entrevistas-card {
    background: #151b2e !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    border: 1.5px solid #e68a00 !important;
    font-family: 'Inter', sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sa-entrevistas-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.55);
}
.sa-entrevistas-card .social-btn-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none;
    transition: all 0.25s ease;
}
.sa-entrevistas-card .social-btn-dark i {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 14px !important;
    margin: 0 !important;
}
.sa-entrevistas-card .social-btn-dark:hover {
    background: rgba(230, 138, 0, 0.3) !important;
    border-color: rgba(252, 167, 2, 0.5) !important;
    color: #fca702 !important;
    box-shadow: 0 0 14px rgba(230, 138, 0, 0.25);
    transform: translateY(-2px);
}
.sa-entrevistas-card .social-btn-dark:hover i {
    color: #fca702 !important;
}