/*
Theme Name:   Plantilla Proyecto IN
Description:  Tema desarrollado por Proyecto IN
Author:       Proyecto IN
Author URL:   https://proyectoin.com 
Template:     hello-elementor
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  Plantilla Proyecto IN
*/

/* Acá empezarías a personalizar tu tema con código CSS */

/* 1. Declaración manual de la fuente Valve */
@font-face {
    font-family: 'Valve';
    src: url('https://politikmnte.com/wp-content/uploads/2026/01/PPValve-PlainExtrabold-BF676a3861f0d44.woff2') format('woff2'),
         url('https://politikmnte.com/wp-content/uploads/2026/01/PPValve-PlainExtrabold-BF676a3861f0d44.woff') format('woff'),
         url('https://politikmnte.com/wp-content/uploads/2026/01/PPValve-PlainExtrabold-BF676a3861f0d44.ttf') format('truetype');
    font-weight: 800; /* Extrabold */
    font-style: normal;
    font-display: swap; /* Ayuda a que el texto aparezca rápido aunque no cargue la fuente */
}

/* 2. Clase auxiliar para forzar la fuente en elementos específicos */
.fuente-valve {
    font-family: 'Valve', sans-serif !important;
}

/* 3. (Opcional) Si quieres forzarla ya en todos los títulos H1, H2, H3 automáticamente: */
h1, h2, h3, .elementor-heading-title {
    font-family: 'Valve', sans-serif;
}

/* --- 1. APLICAR COLOR SOLO A LA CAJA DE LA IMAGEN --- */

/* Loop Rosa: El color va sobre el widget de imagen, no sobre todo el item */
body .estilo-rosa .item-podcast .caja-imagen {
    background-color: #FF0080 !important;
}

/* Loop Verde */
body .estilo-verde .item-podcast .caja-imagen {
    background-color: #00F416 !important;
}

/* Loop Morado */
body .estilo-morado .item-podcast .caja-imagen {
    background-color: #5D1FF9 !important;
}

/* Loop Cian (Agregado) */
body .estilo-cian .item-podcast .caja-imagen {
    background-color: #00BFFF !important;
}

/* Loop Rojo (Agregado) */
body .estilo-rojo .item-podcast .caja-imagen {
    background-color: #FF0012 !important;
}

/* Loop Amarillo (Agregado) */
body .estilo-amarillo .item-podcast .caja-imagen {
    background-color: #E8E800 !important;
}


/* --- 2. TRATAMIENTO DE LA IMAGEN (DUOTONO) --- */

/* Apuntamos a la etiqueta img DENTRO de la caja-imagen */
body .item-podcast .caja-imagen img {
    /* Convierte a B&W y aumenta contraste */
    filter: grayscale(100%) contrast(1.2) !important;
    
    /* Mezcla la foto con el fondo de color de su caja contenedora */
    mix-blend-mode: multiply !important;
    
    /* Ajustes obligatorios */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* =========================================
   ESTILOS PERSONALIZADOS: COLUMNISTAS
   ========================================= */

/* --- 1. Foto del Columnista --- */
/* Controla la imagen generada por el shortcode [dato_columnista] */
img.foto-columnista {
    width: 120px;           /* Ancho fijo */
    height: 120px;          /* Alto fijo (cuadrado) */
    object-fit: cover;      /* Recorta la imagen para que no se estire/deforme */
    border-radius: 50%;     /* Círculo perfecto */
    display: block;         /* Comportamiento de bloque */
    margin: 0 auto 20px;    /* Centrado horizontal y margen abajo */
    border: 3px solid #f0f0f0; /* Borde gris claro opcional */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra suave */
}

/* --- 2. Contenedor de Redes Sociales --- */
/* Si envolviste los shortcodes en un div, esto ayuda a centrarlos */
.redes-columnista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra los iconos horizontalmente */
    gap: 10px;               /* Espacio entre iconos */
    margin-top: 10px;
}

/* --- 3. Botones de Redes Sociales --- */
/* Estilo base para todos los enlaces generados (Facebook, X, WhatsApp, etc) */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;            /* Tamaño del botón */
    height: 40px;           /* Tamaño del botón */
    background-color: #eee; /* Fondo gris por defecto */
    color: #555;            /* Color del icono por defecto */
    border-radius: 50%;     /* Redondo */
    text-decoration: none !important; /* Quita el subrayado forzosamente */
    transition: all 0.3s ease; /* Suaviza la animación al pasar el mouse */
    font-size: 18px;        /* Tamaño del icono interno */
}

/* --- 4. Efectos Hover (Al pasar el mouse) --- */
.social-link:hover {
    color: #fff;            /* Icono blanco al pasar el mouse */
    transform: translateY(-3px); /* Se eleva un poquito */
}


/* =========================================
   ESTILOS DARK: COLUMNISTAS
   ========================================= */

/* Contenedor principal para alinear todo */
.ficha-columnista-container {
    text-align: left; /* O center, según tu diseño */
    color: #ffffff;
}

.nombre-autor{
	font-family:"Valve";
	color:white;
	display:block;
	text-align:center;
}

.bio{
	color:white;
	font-family:"FreeSans"
}

/* --- FOTO --- */
img.foto-columnista {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ffffff; /* Borde blanco fino */
    display: inline-block; /* Para que quede al lado del texto si quieres */
    margin-right: 20px;
    vertical-align: middle;
}

/* --- CONTENEDOR DE REDES --- */
.redes-columnista {
    display: inline-flex; /* En línea para ponerlo junto a la bio */
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre íconos */
    margin-top: 15px;
    vertical-align: middle;
}

/* --- BOTONES DE REDES (Estilo Minimalista Blanco) --- */
.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;           /* Tamaño un poco más discreto */
    height: 36px;
    background-color: transparent; /* Fondo transparente */
    color: #ffffff;        /* Ícono blanco */
    border: 1px solid #ffffff; /* Borde blanco fino */
    border-radius: 50%;    /* Redondo */
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-size: 16px;
}

/* --- EFECTO HOVER (Invertir colores) --- */
.social-link:hover {
    background-color: #ffffff; /* Fondo blanco */
    color: #000000;            /* Ícono negro */
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(255,255,255, 0.3); /* Pequeño brillo */
}

/* Ajuste específico para el email si se ve muy grueso */
.social-link.email i {
    font-weight: normal;
}

/* =========================================
   ESTILOS FORMULARIO DE COMENTARIOS
   ========================================= */

/* 1. Títulos (Deja un comentario, etc) */
#comments h5, 
#reply-title, 
.comment-reply-title {
    color: #ffffff; /* Título en blanco */
    font-family: "Valve", sans-serif; /* Tu fuente personalizada */
    font-size: 24px;
}

/* 2. Etiquetas de los campos (Nombre, Email...) */
.comment-form label {
    color: #cccccc;
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

/* 3. Cajas de texto (Inputs y Textarea) */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    background-color: #333333; /* Fondo gris oscuro */
    color: #ffffff;            /* Texto blanco al escribir */
    border: 1px solid #555;    /* Borde sutil */
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    font-family: "FreeSans", sans-serif;
}

/* Al hacer clic en el campo */
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #ffffff;     /* Borde blanco al seleccionar */
    background-color: #000000; /* Fondo más oscuro */
}

/* 4. El Botón de "Publicar comentario" */
.form-submit input[type="submit"] {
    background-color: #ffffff; /* Botón blanco */
    color: #000000;            /* Texto negro */
    border: none;
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.form-submit input[type="submit"]:hover {
    background-color: #cccccc; /* Gris al pasar el mouse */
    transform: translateY(-2px);
}

/* 5. Lista de comentarios ya publicados (Si hay) */
.comment-body {
    background-color: #1a1a1a; /* Fondo de cada comentario */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #333;
}

.comment-author .fn {
    color: #ffffff; /* Nombre de quien comentó */
    font-style: normal;
    font-weight: bold;
}

.comment-content p {
    color: #dddddd; /* Texto del comentario */
    font-size: 15px;
}

/* Fecha y hora del comentario */
.comment-metadata a {
    color: #888888;
    text-decoration: none;
    font-size: 12px;
}

/* Asegurar que el título se comporte bien aunque sea un span */
#reply-title.comment-reply-title {
    display: block;       /* Importante: Para que ocupe su propia línea */
    font-size: 24px;      /* Tamaño grande de título */
    font-weight: bold;    /* Negrita */
    margin-bottom: 20px;  /* Espacio debajo */
    /*font-family: "Valve", sans-serif; /* Tu tipografía */
    color: #ffffff;
}

/* =========================================
   1. ESTILO SEMÁFORO POLITIKMNTE (3 Colores)
   ========================================= */

/* --- TARJETA 1: AMARILLO NEÓN --- */
.grid-semaforo .elementor-grid-item:nth-child(1) .card-neon {
    background-color: #E8E800 !important; 
}
.grid-semaforo .elementor-grid-item:nth-child(1) .elementor-heading-title,
.grid-semaforo .elementor-grid-item:nth-child(1) p, 
.grid-semaforo .elementor-grid-item:nth-child(1) span {
    color: #000000 !important;
}

/* --- TARJETA 2: MORADO ELÉCTRICO --- */
.grid-semaforo .elementor-grid-item:nth-child(2) .card-neon {
    background-color: #5D1FF9 !important; 
}
.grid-semaforo .elementor-grid-item:nth-child(2) .elementor-heading-title,
.grid-semaforo .elementor-grid-item:nth-child(2) p, 
.grid-semaforo .elementor-grid-item:nth-child(2) span {
    color: #ffffff !important;
}

/* --- TARJETA 3: ROSA MAGENTA --- */
.grid-semaforo .elementor-grid-item:nth-child(3) .card-neon {
    background-color: #FF0080 !important; 
}
.grid-semaforo .elementor-grid-item:nth-child(3) .elementor-heading-title,
.grid-semaforo .elementor-grid-item:nth-child(3) p, 
.grid-semaforo .elementor-grid-item:nth-child(3) span {
    color: #ffffff !important;
}

/* Trunque Títulos Semáforo */
.grid-semaforo .elementor-heading-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;      
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;    
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
    /*font-family: "Valve", sans-serif ;*/ 
}

/* =========================================
   2. SECUENCIA COLORES - CARRUSEL OPINIÓN
   ========================================= */

/* 1. AMARILLO NEÓN */
.grid-opinion-multicolor .swiper-slide:nth-child(4n+1) .card-neon-opinion,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+1) .mi-foto-redonda {
    border-color: #E8E800 !important;
}
.grid-opinion-multicolor .swiper-slide:nth-child(4n+1) .texto-autor-neon,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+1) .texto-autor-neon * { 
    color: #E8E800 !important;
}

/* 2. MORADO ELÉCTRICO */
.grid-opinion-multicolor .swiper-slide:nth-child(4n+2) .card-neon-opinion,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+2) .mi-foto-redonda {
    border-color: #5D1FF9 !important;
}
.grid-opinion-multicolor .swiper-slide:nth-child(4n+2) .texto-autor-neon,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+2) .texto-autor-neon * {
    color: #5D1FF9 !important;
}

/* 3. ROSA MAGENTA */
.grid-opinion-multicolor .swiper-slide:nth-child(4n+3) .card-neon-opinion,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+3) .mi-foto-redonda {
    border-color: #FF0080 !important;
}
.grid-opinion-multicolor .swiper-slide:nth-child(4n+3) .texto-autor-neon,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+3) .texto-autor-neon * {
    color: #FF0080 !important;
}

/* 4. VERDE ALIEN */
.grid-opinion-multicolor .swiper-slide:nth-child(4n+4) .card-neon-opinion,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+4) .mi-foto-redonda {
    border-color: #00F416 !important;
}
.grid-opinion-multicolor .swiper-slide:nth-child(4n+4) .texto-autor-neon,
.grid-opinion-multicolor .swiper-slide:nth-child(4n+4) .texto-autor-neon * {
    color: #00F416 !important;
}

/* =========================================
   3. TARJETAS DE FONDO SÓLIDO (4 Colores)
   ========================================= */

/* --- TARJETA 1: AMARILLO --- */
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+1) > div {
    background-color: #E8E800 !important;
}
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+1) .elementor-heading-title,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+1) .elementor-icon i,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+1) .elementor-icon svg path {
    color: #000000 !important;
    fill: #000000 !important;
}

/* --- TARJETA 2: MORADO --- */
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+2) > div {
    background-color: #5D1FF9 !important;
}
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+2) .elementor-heading-title,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+2) .elementor-icon i,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+2) .elementor-icon svg path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* --- TARJETA 3: CIAN --- */
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+3) > div {
    background-color: #00BFFF !important;
}
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+3) .elementor-heading-title,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+3) .elementor-icon i,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+3) .elementor-icon svg path {
    color: #000000 !important;
    fill: #000000 !important;
}

/* --- TARJETA 4: ROSA --- */
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+4) > div {
    background-color: #FF0080 !important;
}
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+4) .elementor-heading-title,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+4) .elementor-icon i,
.grid-tarjetas-multicolor .e-loop-item:nth-child(4n+4) .elementor-icon svg path {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Límite Títulos Multicolores */
.grid-tarjetas-multicolor .e-loop-item .elementor-heading-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* =========================================
   4. TÍTULOS DE SECCIÓN CON LÍNEA NEÓN (CORREGIDO)
   ========================================= */

/* Estructura base (Siempre presente) */
.titulo-linea .elementor-heading-title {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
.titulo-linea .elementor-heading-title::after {
    content: "";
    display: block;
    height: 3px; 
    flex-grow: 1; 
    margin-left: 20px; 
    border-radius: 2px;
}

/* MODIFICADORES MANUALES (Para usar en el Home) 
   En Elementor pones: titulo-linea linea-verde */

.linea-cian .elementor-heading-title { color: #00BFFF !important; }
.linea-cian .elementor-heading-title::after { background-color: #00BFFF !important; box-shadow: 0 0 10px rgba(0, 191, 255, 0.6) !important; }

.linea-roja .elementor-heading-title { color: #FF0012 !important; }
.linea-roja .elementor-heading-title::after { background-color: #FF0012 !important; box-shadow: 0 0 10px rgba(255, 0, 18, 0.6) !important; }

.linea-verde .elementor-heading-title { color: #00F416 !important; }
.linea-verde .elementor-heading-title::after { background-color: #00F416 !important; box-shadow: 0 0 10px rgba(0, 244, 22, 0.6) !important; }

.linea-rosa .elementor-heading-title { color: #FF0080 !important; }
.linea-rosa .elementor-heading-title::after { background-color: #FF0080 !important; box-shadow: 0 0 10px rgba(255, 0, 128, 0.6) !important; }

.linea-amarilla .elementor-heading-title { color: #E8E800 !important; }
.linea-amarilla .elementor-heading-title::after { background-color: #E8E800 !important; box-shadow: 0 0 10px rgba(232, 232, 0, 0.6) !important; }

.linea-morada .elementor-heading-title { color: #5D1FF9 !important; }
.linea-morada .elementor-heading-title::after { background-color: #5D1FF9 !important; box-shadow: 0 0 10px rgba(93, 31, 249, 0.6) !important; }

/* COMPATIBILIDAD CON ARCHIVOS (Automático por Body) */
body.linea-cian .titulo-linea .elementor-heading-title, 
body.linea-roja .titulo-linea .elementor-heading-title,
body.linea-verde .titulo-linea .elementor-heading-title,
body.linea-rosa .titulo-linea .elementor-heading-title,
body.linea-amarilla .titulo-linea .elementor-heading-title,
body.linea-morada .titulo-linea .elementor-heading-title {
    color: inherit; /* Hereda el color del body si existe */
}

/* =========================================
   AJUSTE RESPONSIVO PARA TÍTULOS CON LÍNEA
   ========================================= */

@media (max-width: 767px) {
    .titulo-linea .elementor-heading-title {
        display: flex !important;
        flex-direction: row !important; /* Mantiene la línea a la derecha */
        align-items: center !important;
        white-space: normal !important; /* Permite que el texto salte de línea si es muy largo */
        overflow: visible !important;
    }

    .titulo-linea .elementor-heading-title::after {
        min-width: 30px; /* Asegura un mínimo de línea aunque el texto sea largo */
        margin-left: 10px; /* Reduce un poco el espacio en móviles */
    }
}

/* =========================================
   5. SISTEMA DE PASTILLAS (PILLS)
   ========================================= */

.estilo-pill .elementor-icon-list-text { font-size: 0 !important; }

.estilo-pill .elementor-post-info__terms-list-item {
    font-size: 11px !important; 
    padding: 4px 10px !important; 
    border-radius: 4px !important; 
    display: inline-block !important;
    font-weight: 800 !important;
    text-transform: uppercase !important; 
    margin-right: 8px !important; 
    margin-bottom: 8px !important; 
    letter-spacing: 0.5px !important; 
    transition: all 0.3s ease; 
}

/* Modificadores de color */
.pill-cian .elementor-post-info__terms-list-item { background-color: #00BFFF !important; color: #000000 !important; }
.pill-rojo .elementor-post-info__terms-list-item { background-color: #FF0012 !important; color: #FFFFFF !important; }
.pill-verde .elementor-post-info__terms-list-item { background-color: #00F416 !important; color: #000000 !important; }
.pill-rosa .elementor-post-info__terms-list-item { background-color: #FF0080 !important; color: #FFFFFF !important; }
.pill-amarillo .elementor-post-info__terms-list-item { background-color: #E8E800 !important; color: #000000 !important; }
.pill-morado .elementor-post-info__terms-list-item { background-color: #5D1FF9 !important; color: #FFFFFF !important; }

/* Modificadores de color para los pills de acuerdo a las categorias que ya se asignaron por categoria*/

/* =========================================
   PILLS AUTOMÁTICOS POR CATEGORÍA (Archive)
   ========================================= */

/* CIAN */
body.linea-cian .estilo-pill .elementor-post-info__terms-list-item { background-color: #00BFFF !important; color: #000000 !important; }
/* ROJO */
body.linea-roja .estilo-pill .elementor-post-info__terms-list-item { background-color: #FF0012 !important; color: #FFFFFF !important; }
/* VERDE */
body.linea-verde .estilo-pill .elementor-post-info__terms-list-item { background-color: #00F416 !important; color: #000000 !important; }
/* ROSA */
body.linea-rosa .estilo-pill .elementor-post-info__terms-list-item { background-color: #FF0080 !important; color: #FFFFFF !important; }
/* AMARILLO */
body.linea-amarilla .estilo-pill .elementor-post-info__terms-list-item { background-color: #E8E800 !important; color: #000000 !important; }
/* MORADO */
body.linea-morada .estilo-pill .elementor-post-info__terms-list-item { background-color: #5D1FF9 !important; color: #FFFFFF !important; }

/* =========================================
   6. TARJETAS DE TEXTO CON BORDE NEÓN
   ========================================= */

.tarjeta-texto-borde {
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 6px !important;
    padding: 12px !important; 
    transition: all 0.3s ease;
    background-color: transparent; 
}

.tarjeta-texto-borde .elementor-heading-title,
.tarjeta-texto-borde .elementor-heading-title a {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 18px !important; 
    line-height: 1.1 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Modificadores de color (Borde y Hover) */
.tema-rojo .tarjeta-texto-borde { border-color: #FF0012 !important; }
.tema-rojo .tarjeta-texto-borde:hover { box-shadow: 0 0 15px rgba(255, 0, 18, 0.3); }
.tema-rojo .tarjeta-texto-borde .elementor-heading-title a:hover { color: #FF0012 !important; }

.tema-cian .tarjeta-texto-borde { border-color: #00BFFF !important; }
.tema-cian .tarjeta-texto-borde:hover { box-shadow: 0 0 15px rgba(0, 191, 255, 0.3); }
.tema-cian .tarjeta-texto-borde .elementor-heading-title a:hover { color: #00BFFF !important; }

.tema-verde .tarjeta-texto-borde { border-color: #00F416 !important; }
.tema-verde .tarjeta-texto-borde:hover { box-shadow: 0 0 15px rgba(0, 244, 22, 0.3); }
.tema-verde .tarjeta-texto-borde .elementor-heading-title a:hover { color: #00F416 !important; }

.tema-rosa .tarjeta-texto-borde { border-color: #FF0080 !important; }
.tema-rosa .tarjeta-texto-borde:hover { box-shadow: 0 0 15px rgba(255, 0, 128, 0.3); }
.tema-rosa .tarjeta-texto-borde .elementor-heading-title a:hover { color: #FF0080 !important; }

.tema-amarillo .tarjeta-texto-borde { border-color: #E8E800 !important; }
.tema-amarillo .tarjeta-texto-borde:hover { box-shadow: 0 0 15px rgba(232, 232, 0, 0.3); }
.tema-amarillo .tarjeta-texto-borde .elementor-heading-title a:hover { color: #E8E800 !important; }

.tema-morado .tarjeta-texto-borde { border-color: #5D1FF9 !important; }
.tema-morado .tarjeta-texto-borde:hover { box-shadow: 0 0 15px rgba(93, 31, 249, 0.3); }
.tema-morado .tarjeta-texto-borde .elementor-heading-title a:hover { color: #5D1FF9 !important; }

/* =========================================
   BORDES DE TARJETAS AUTOMÁTICOS POR CATEGORÍA
   ========================================= */

/* CIAN */
body.linea-cian .tarjeta-borde-categoria { border: 2px solid #00BFFF !important; }

/* ROJO */
body.linea-roja .tarjeta-borde-categoria { border: 2px solid #FF0012 !important; }

/* VERDE */
body.linea-verde .tarjeta-borde-categoria { border: 2px solid #00F416 !important; }

/* ROSA */
body.linea-rosa .tarjeta-borde-categoria { border: 2px solid #FF0080 !important; }

/* AMARILLO */
body.linea-amarilla .tarjeta-borde-categoria { border: 2px solid #E8E800 !important; }

/* MORADO */
body.linea-morada .tarjeta-borde-categoria { border: 2px solid #5D1FF9 !important; }


/* =========================================
   PERFIL DE COLUMNISTA: TÍTULO Y RAYA AUTOMÁTICA
   ========================================= */

/* Estructura base (Nombre a la izquierda, raya estirada a la derecha) */
.nombre-columnista {
    display: flex !important;
    align-items: center;
    width: 100%;
}

.nombre-columnista::after {
    content: "";
    flex-grow: 1; /* Esto hace que la raya ocupe todo el espacio sobrante */
    height: 3px; /* El grosor de tu raya */
    margin-left: 20px; /* El espacio entre el nombre y donde empieza la raya */
}

/* -----------------------------------------
   COLORES DINÁMICOS
   ----------------------------------------- */

/* CIAN */
body.linea-cian .nombre-columnista { color: #00BFFF !important; }
body.linea-cian .nombre-columnista::after { background-color: #00BFFF !important; }

/* ROJO */
body.linea-roja .nombre-columnista { color: #FF0012 !important; }
body.linea-roja .nombre-columnista::after { background-color: #FF0012 !important; }

/* VERDE */
body.linea-verde .nombre-columnista { color: #00F416 !important; }
body.linea-verde .nombre-columnista::after { background-color: #00F416 !important; }

/* ROSA */
body.linea-rosa .nombre-columnista { color: #FF0080 !important; }
body.linea-rosa .nombre-columnista::after { background-color: #FF0080 !important; }

/* AMARILLO */
body.linea-amarilla .nombre-columnista { color: #E8E800 !important; }
body.linea-amarilla .nombre-columnista::after { background-color: #E8E800 !important; }

/* MORADO */
body.linea-morada .nombre-columnista { color: #5D1FF9 !important; }
body.linea-morada .nombre-columnista::after { background-color: #5D1FF9 !important; }

/* =========================================
   ICONOS SOCIALES: FONDO NEÓN / ICONO NEGRO
   ========================================= */

/* Estilo base para que todos se vean uniformes */
.redes-columnista .elementor-social-icon {
    transition: all 0.3s ease;
}

/* CIAN */
body.linea-cian .redes-columnista .elementor-social-icon { background-color: #00BFFF !important; }
body.linea-cian .redes-columnista .elementor-social-icon i,
body.linea-cian .redes-columnista .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* ROJO */
body.linea-roja .redes-columnista .elementor-social-icon { background-color: #FF0012 !important; }
body.linea-roja .redes-columnista .elementor-social-icon i,
body.linea-roja .redes-columnista .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* VERDE */
body.linea-verde .redes-columnista .elementor-social-icon { background-color: #00F416 !important; }
body.linea-verde .redes-columnista .elementor-social-icon i,
body.linea-verde .redes-columnista .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* ROSA */
body.linea-rosa .redes-columnista .elementor-social-icon { background-color: #FF0080 !important; }
body.linea-rosa .redes-columnista .elementor-social-icon i,
body.linea-rosa .redes-columnista .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* AMARILLO */
body.linea-amarilla .redes-columnista .elementor-social-icon { background-color: #E8E800 !important; }
body.linea-amarilla .redes-columnista .elementor-social-icon i,
body.linea-amarilla .redes-columnista .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* MORADO */
body.linea-morada .redes-columnista .elementor-social-icon { background-color: #5D1FF9 !important; }
body.linea-morada .redes-columnista .elementor-social-icon i,
body.linea-morada .redes-columnista .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }


/* ============================================================
   ESTILOS DINÁMICOS PARA EL LOOP ITEM DE COLUMNISTAS (DIRECTORIO)
   ============================================================ */

/* 1. VERDE NEÓN */
.linea-verde .nombre-autor, 
.linea-verde .nombre-columnista { color: #00F416 !important; }
.linea-verde .social-link { border-color: #00F416 !important; color: #00F416 !important; }
.linea-verde img.foto-columnista { border-color: #00F416 !important; }
.linea-verde .elementor-social-icon { background-color: #00F416 !important; }
.linea-verde .elementor-social-icon i, .linea-verde .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* 2. CIAN */
.linea-cian .nombre-autor, 
.linea-cian .nombre-columnista { color: #00BFFF !important; }
.linea-cian .social-link { border-color: #00BFFF !important; color: #00BFFF !important; }
.linea-cian img.foto-columnista { border-color: #00BFFF !important; }
.linea-cian .elementor-social-icon { background-color: #00BFFF !important; }
.linea-cian .elementor-social-icon i, .linea-cian .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* 3. ROJO */
.linea-roja .nombre-autor, 
.linea-roja .nombre-columnista { color: #FF0012 !important; }
.linea-roja .social-link { border-color: #FF0012 !important; color: #FF0012 !important; }
.linea-roja img.foto-columnista { border-color: #FF0012 !important; }
.linea-roja .elementor-social-icon { background-color: #FF0012 !important; }
.linea-roja .elementor-social-icon i, .linea-roja .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* 4. ROSA MAGENTA */
.linea-rosa .nombre-autor, 
.linea-rosa .nombre-columnista { color: #FF0080 !important; }
.linea-rosa .social-link { border-color: #FF0080 !important; color: #FF0080 !important; }
.linea-rosa img.foto-columnista { border-color: #FF0080 !important; }
.linea-rosa .elementor-social-icon { background-color: #FF0080 !important; }
.linea-rosa .elementor-social-icon i, .linea-rosa .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* 5. AMARILLO NEÓN */
.linea-amarilla .nombre-autor, 
.linea-amarilla .nombre-columnista { color: #E8E800 !important; }
.linea-amarilla .social-link { border-color: #E8E800 !important; color: #E8E800 !important; }
.linea-amarilla img.foto-columnista { border-color: #E8E800 !important; }
.linea-amarilla .elementor-social-icon { background-color: #E8E800 !important; }
.linea-amarilla .elementor-social-icon i, .linea-amarilla .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* 6. MORADO ELÉCTRICO */
.linea-morada .nombre-autor, 
.linea-morada .nombre-columnista { color: #5D1FF9 !important; }
.linea-morada .social-link { border-color: #5D1FF9 !important; color: #5D1FF9 !important; }
.linea-morada img.foto-columnista { border-color: #5D1FF9 !important; }
.linea-morada .elementor-social-icon { background-color: #5D1FF9 !important; }
.linea-morada .elementor-social-icon i, .linea-morada .elementor-social-icon svg { color: #000000 !important; fill: #000000 !important; }

/* Asegurar que los links del Loop no tengan subrayado y hereden el color */
.card-columnista-directorio a {
    text-decoration: none !important;
    display: block;
}

.nombre-autor {
    pointer-events: none; /* Esto evita que el span interfiera con el click del link superior */
}

/* ==========================================================================
   OCULTAR TABLA DE CONTENIDOS (TOC) SI NO HAY H2/H3
   ========================================================================== */

/* 1. Oculta el widget si no encuentra elementos de lista (li) dentro */
.elementor-widget-table-of-contents:not(:has(.elementor-toc__list-item)) {
    display: none !important;
}

/* 2. Fallback por si el contenedor queda vacío pero el widget sigue ahí */
.elementor-widget-table-of-contents .elementor-toc__list-wrapper:empty {
    display: none !important;
}