/* -- MISMAS VARIABLES DE COLOR Y FUENTES -- */
:root {
    --purple-main: #8A2BE2;
    --purple-dark: #4B0082;
    --purple-light: #E6E6FA;
    --accent-color: #F92C85;
    --background-color: #1a1a2e;
    --text-color: #f0f0f0;
    --card-background: #1e1e3f;
    --font-headings: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
}

/* ======================================================= */
/* ============== MEJORAS GLOBALES DE ENLACES ============ */
/* ======================================================= */
a {
    text-decoration: none; /* Elimina el subrayado de TODOS los enlaces */
}

a:hover {
    /* Opcional pero recomendado: añade un efecto sutil al pasar el mouse */
    color: var(--accent-color); /* Cambia el color al del acento que definimos */
}

/* -- ESTILOS GENERALES -- */
body {
    font-family: var(--font-body);
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}
/* ======================================================= */
/* ====== CONTENEDOR UNIVERSAL PARA DISEÑO "EN CAJA" ====== */
/* ======================================================= */
.container {
    max-width: 1400px; /* Ancho máximo del contenido */
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;  /* Márgenes de seguridad a los lados */
    padding-right: 30px;
}
/* --- El contenedor principal AHORA ocupa todo el ancho --- */
main.main-container {
    /* Eliminamos el max-width y el margin: auto */
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 30px; /* Un padding lateral para que no se pegue en móviles */
}

/* -- NUEVO HEADER DE 3 PARTES -- */
.main-header {
    background-color: rgba(30, 30, 63, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--purple-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
}
.logo { font-size: 1.8rem; font-weight: bold; color: #fff; }
.main-nav { display: flex; gap: 40px; }
.main-nav a { font-weight: bold; font-size: 1rem; color: var(--purple-light); transition: color 0.3s; }
.main-nav a:hover { color: #fff; }
.search-icon { font-size: 1.5rem; }


/* -- LA MAGIA: LA CUADRÍCULA ESTILO REVISTA -- */
.section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--purple-main);
    padding-bottom: 10px;
    display: inline-block;
}

.news-magazine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    grid-template-rows: repeat(2, 250px); /* 2 filas de altura fija */
    gap: 25px;
}

/* -- Estilos base para todas las tarjetas -- */
.card {
    background-color: var(--card-background);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--purple-dark);
}
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clave para que la imagen siempre llene el espacio */
    transition: transform 0.4s ease;
}
.card:hover img {
    transform: scale(1.05);
}
.card .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    z-index: 2;
}
.card .card-title {
    margin: 0;
    color: #fff;
    line-height: 1.3;
}
.card .card-title a {
    color: #fff;
    text-decoration: none;
}

/* -- Estilos específicos para la tarjeta HERO -- */
.card-hero {
    grid-column: span 2; /* Ocupa 2 columnas */
    grid-row: span 2; /* Ocupa 2 filas */
}
.card-hero .card-title {
    font-size: 2rem;
}

/* -- Estilos para las tarjetas secundarias -- */
.card-secondary {
    /* Ocupan el espacio que queda */
}
.card-secondary .card-title {
    font-size: 1rem;
}

/* -- Estilos para la página de noticia -- */
.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    background: var(--card-background);
    padding: 10px 20px;
    border-radius: 8px;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '>';
    margin: 0 10px;
    color: var(--purple-light);
}
.breadcrumb a { color: var(--accent-color); }
.breadcrumb .active { color: var(--purple-light); }

.article-tags { margin-top: 30px; }
.article-tags span { font-weight: bold; }
.article-tags a {
    display: inline-block;
    background-color: var(--purple-main);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-left: 10px;
}

/* ============================================= */
/* ========= ESTILOS BANNER DESTACADO ========== */
/* ============================================= */
.featured-banner {
    position: relative;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 50px;
    display: flex;
    align-items: flex-end; /* Alinea el contenido abajo */
}
.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.featured-banner::after { /* Overlay oscuro para legibilidad */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 20%, transparent 80%);
    z-index: 2;
}
.banner-content {
    position: relative;
    z-index: 3;
    padding: 40px;
    color: #fff;
}
.banner-tag {
    display: inline-block;
    background-color: var(--purple-main);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 15px;
}
.banner-title {
    font-size: 2.5rem;
    margin: 0;
    line-height: 1.2;
}
.banner-title a {
    color: #fff;
    text-decoration: none;
}

/* ============================================= */
/* =========== ESTILOS TENDENCIAS ============== */
/* ============================================= */
.trending-section {
    margin-bottom: 50px;
}
.trending-list {
    list-style: none;
    padding-left: 0;
    counter-reset: trending-counter;
}
.trending-list li {
    background-color: var(--card-background);
    border-left: 5px solid var(--purple-main);
    padding: 20px 20px 20px 80px; /* Espacio para el número */
    margin-bottom: 15px;
    position: relative;
    border-radius: 8px;
    transition: background-color 0.3s;
}
.trending-list li:hover {
    background-color: #2a2a4a;
}
.trending-list li::before {
    counter-increment: trending-counter;
    content: "0" counter(trending-counter);
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--purple-main);
    font-family: var(--font-headings);
    font-size: 3rem;
    font-weight: bold;
}
.trending-title {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    font-weight: bold;
}
.trending-title a {
    color: var(--text-color);
}

/* ============================================= */
/* ======== ESTILOS NOTICIAS RECIENTES ========= */
/* ============================================= */
.recent-section {
    margin-bottom: 50px;
}
/* Reutilizamos el .news-magazine-grid, solo cambiamos el tipo de tarjeta */
.news-magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}
/* Quitamos la tarjeta Hero porque ya no está aquí */
.card-secondary {
    /* Mantenemos los estilos de antes */
}

/* ======================================================= */
/* ========= ESTILOS PROFESIONALES - FASE NUEVA ========== */
/* ======================================================= */

/* --- Ajuste General para dar más aire --- */
.main-container {
    padding: 0 30px; /* Más espacio a los lados */
}
.section-title {
    margin-top: 50px; /* Más espacio entre secciones */
}

/* ============================================= */
/* ========= ESTILOS BANNER DESTACADO ========== */
/* ============================================= */
.featured-banner {
    position: relative; /* Contenedor padre para posicionamiento absoluto */
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 60px;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen siempre llena el contenedor */
    z-index: 1;
    filter: brightness(0.9); /* Ligeramente más oscura */
}
.featured-banner::after { /* Overlay oscuro para legibilidad del texto */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 15, 30, 0.95) 10%, transparent 70%);
    z-index: 2;
}
.banner-content {
    position: relative;
    z-index: 3;
    padding: 40px;
    color: #fff;
}
.banner-tag {
    display: inline-block;
    background-color: var(--purple-main);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.banner-title {
    font-size: 2.8rem;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.banner-title a {
    color: #fff;
    text-decoration: none;
}

/* ============================================= */
/* =========== ESTILOS TENDENCIAS ============== */
/* ============================================= */
.trending-section {
    margin-bottom: 60px;
}
.trending-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}
.trending-list li {
    transition: transform 0.3s ease;
}
.trending-list li:hover {
    transform: translateY(-8px);
}
.trending-list li a {
    display: flex;
    align-items: center;
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 12px;
    text-decoration: none;
    height: 100%;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.trending-list li a:hover {
    border-color: var(--purple-main);
}
.trending-number {
    color: var(--purple-main);
    font-family: var(--font-headings);
    font-size: 2rem;
    font-weight: 700;
    margin-right: 20px;
    line-height: 1;
}
.trending-title {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.4;
}

/* ============================================= */
/* ======== ESTILOS NOTICIAS RECIENTES ========= */
/* ============================================= */
.recent-section {
    margin-bottom: 60px;
}
.news-magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* -- Mejoramos las tarjetas secundarias -- */
.card-secondary {
    background: var(--card-background);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--purple-dark);
}
.card-secondary:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.card-secondary .card-link-wrapper { /* Envolvemos todo en el enlace */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-secondary img {
    height: 180px; /* Altura fija para la imagen */
    object-fit: cover;
}
.card-secondary .card-body {
    padding: 20px;
    flex-grow: 1;
}
.card-secondary .card-title {
    margin: 0;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    line-height: 1.4;
    color: #fff;
}

/* ======================================================= */
/* ====== REDISEÑO DE TENDENCIAS (IMAGEN PROTAGONISTA) ==== */
/* ======================================================= */

/* --- Contenedor principal de la sección --- */
.trending-grid {
    display: grid;
    /* 3 columnas en pantallas grandes para un look de galería */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Más espacio entre tarjetas */
}

/* --- La tarjeta individual --- */
.trending-card a {
    /* El cambio más importante: layout vertical */
    display: flex;
    flex-direction: column; 
    
    background-color: var(--card-background);
    border-radius: 12px;
    overflow: hidden; /* Esconde lo que se salga de los bordes redondeados */
    height: 100%;
    border: 1px solid var(--purple-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Padre para el número posicionado */
}
.trending-card a:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--purple-main);
}

/* --- La IMAGEN, ahora ocupa todo el ancho --- */
.trending-image {
    width: 100%;
    object-fit: cover;
}

/* --- El número, rediseñado para ser un "pin" en la esquina */
.trending-number {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2; /* Para que esté sobre la imagen */
    
    background-color: var(--purple-main);
    color: #fff;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    padding: 8px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- El contenido (título), ahora debajo de la imagen --- */
.trending-content {
    padding: 20px;
}
.trending-title {
    font-family: var(--font-headings);
    font-size: 1.1rem; /* Un poco más pequeño para balancear */
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
}


/* --- Ajustes para pantallas más pequeñas (tablets y móviles) --- */
@media (max-width: 1024px) {
    .trending-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}
@media (max-width: 768px) {
    .trending-grid {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}

/* ======================================================= */
/* ====== DISEÑO HORIZONTAL DESPLAZABLE "RECIÉN SALIDO" ====== */
/* ======================================================= */

/* --- El contenedor principal (la fila que se desplaza) --- */
.recent-section .news-magazine-grid {
    display: flex; /* La clave para una fila horizontal */
    flex-direction: row; /* Aseguramos la dirección */
    overflow-x: auto; /* ¡La magia! Habilita el scroll horizontal */
    overflow-y: hidden; /* Oculta cualquier scroll vertical accidental */
    padding-bottom: 20px; /* Espacio para que el scrollbar no se pegue a las tarjetas */
    padding-top: 20px;
    gap: 25px; /* Espacio entre las tarjetas */
}

/* --- Estilo sutil para la barra de scroll (en navegadores Webkit) --- */
.recent-section .news-magazine-grid::-webkit-scrollbar {
    height: 8px;
}
.recent-section .news-magazine-grid::-webkit-scrollbar-track {
    background: var(--card-background);
    border-radius: 4px;
}
.recent-section .news-magazine-grid::-webkit-scrollbar-thumb {
    background: var(--purple-main);
    border-radius: 4px;
}

/* --- La tarjeta individual --- */
.recent-section .card-secondary {
    /* LA CLAVE PARA UN TAMAÑO FIJO Y CONSISTENTE */
    flex: 1; /* No crece, no se encoge, mide 280px de ancho */

    display: flex;
    flex-direction: column;
    background-color: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--purple-dark);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.recent-section .section-title{
    margin-bottom: 10px;
}
.recent-section .card-secondary:hover {
    transform: translateY(-8px);
}

/* --- El enlace que envuelve todo --- */
.recent-section .card-link-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- Contenedor e imagen --- */
.recent-section .card-image-container {
    width: 100%;
}
.recent-section .card-image-container img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

/* --- Cuerpo y textos --- */
.recent-section .card-secondary .card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.recent-section .card-category {
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
/* --- El título de la tarjeta --- */
.recent-section .card-secondary .card-title {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.5;
    margin: 0;

    /* --- Aquí empieza la magia del elipsis de múltiples líneas --- */

    /* 1. Esconder el texto que se desborde del contenedor */
    overflow: hidden;

    /* 2. Propiedades especiales para Webkit (Chrome, Safari, Edge, Opera) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    /* 3. La regla CLAVE: Limitar el texto a un máximo de 2 líneas */
    -webkit-line-clamp: 2;
}

/* ======================================================= */
/* ====== REDISEÑO PROFESIONAL DE PÁGINA DE NOTICIA ====== */
/* ======================================================= */

/* ======================================================= */
/* ====== NUEVO LAYOUT DE 3 COLUMNAS PARA NOTICIAS ====== */
/* ======================================================= */
.article-layout {
    display: grid;
    grid-template-columns: 200px 1fr 320px;
    gap: 40px;
    max-width: 1600px;
    margin: 0 auto; /* <-- ESTA ES LA LÍNEA MÁS IMPORTANTE */
    position: relative; /* Mantenemos esto por si quieres la barra social */
}

/* --- Estilos para el contenido principal --- */
.full-article h1 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #fff;
}
.article-meta {
    color: var(--purple-light);
    margin-bottom: 30px;
    font-size: 0.9rem;
}
.article-image-container {
    margin-bottom: 30px;
}
.article-main-image {
    border-radius: 12px;
}
.article-content {
    color: #dcdcdc; /* Un gris claro para una lectura cómoda */
    font-size: 1.1rem;
    line-height: 1.8;
}
.article-content p {
    margin-bottom: 1.5em; /* Espacio entre párrafos */
}
.article-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--purple-dark);
}

/* --- Estilos para la barra lateral (sidebar) --- */
.sidebar {
    padding-left: 30px;
    border-left: 1px solid var(--purple-dark);
}
.sidebar-title {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: #fff;
}
.sidebar-news-list .sidebar-card {
    margin-bottom: 25px;
}
.sidebar-card a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: opacity 0.3s;
}
.sidebar-card a:hover {
    opacity: 0.8;
}
.sidebar-card img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.sidebar-card h4 {
    margin: 0;
    font-family: var(--font-headings);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
}


/* --- Ajustes para pantallas más pequeñas (tablets y móviles) --- */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr; /* La sidebar se coloca debajo */
        gap: 0;
    }
    .sidebar {
        padding-left: 0;
        border-left: none;
        margin-top: 60px;
        padding-top: 40px;
        border-top: 1px solid var(--purple-dark);
    }
}

/* ======================================================= */
/* ====== ESTILOS PARA ANUNCIO SIMULADO Y SIDEBARS ====== */
/* ======================================================= */

/* --- Estilos para AMBAS sidebars --- */
.sidebar, .sidebar-ad {
    padding-top: 20px; /* Alineamos verticalmente el contenido */
}

/* --- Estilo específico para el ANUNCIO --- */
.sidebar-ad-left {
    /* Puedes usar position: sticky para que el anuncio "flote" al hacer scroll */
    position: sticky;
    top: 100px; /* Distancia desde el top (ajusta según tu header) */
    align-self: start; /* Asegura que se pegue arriba */
}

.ad-placeholder {
    width: 100%;
    height: 600px; /* Tamaño estándar para un anuncio de torre */
    background-color: var(--card-background);
    border: 1px dashed var(--purple-dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-placeholder span {
    color: var(--purple-dark);
    font-family: var(--font-headings);
    font-weight: bold;
    letter-spacing: 1px;
}

/* --- Ajustamos la sidebar derecha para que sea consistente --- */
.sidebar {
    width: 320px; /* Le damos un ancho fijo */
    padding-left: 0; /* Quitamos el padding que ya no es necesario */
    border-left: none; /* Quitamos el borde que ya no es necesario */
}

/* --- RESPONSIVE: Ocultamos el anuncio en pantallas más pequeñas --- */
@media (max-width: 1200px) {
    .article-layout {
        /* Volvemos a 2 columnas */
        grid-template-columns: 2.5fr 1fr;
    }
    .sidebar-ad-left {
        display: none; /* Ocultamos el anuncio izquierdo */
    }
}

@media (max-width: 1024px) {
    .article-layout {
        /* Volvemos a 1 columna */
        grid-template-columns: 1fr;
    }
    .sidebar {
         /* La sidebar de "Otras noticias" se va abajo */
        width: 100%;
        margin-top: 60px;
        padding-top: 40px;
        border-top: 1px solid var(--purple-dark);
    }
}

/* ======================================================= */
/* == DISEÑO DE NOTICIA: IMAGEN ANCHA, TEXTO CENTRADO == */
/* ======================================================= */

/* --- 1. Contenedor de la imagen: ocupa el 100% y tiene forma fija --- */
.article-image-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* Mantenemos la forma 16:9 */
    margin-top: 30px; /* Espacio entre la cabecera y la imagen */
    margin-bottom: 40px; /* Espacio entre la imagen y el texto */
    border-radius: 12px;
    overflow: hidden;
}
.article-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 2. Hacemos que la cabecera (título) y el pie (tags) también ocupen el 100% --- */
.article-header,
.article-footer {
    width: 100%;
}

/* --- 3. LA CLAVE: Limitamos el ancho SOLO al contenedor del texto --- */
.article-content {
    color: #dcdcdc;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: center !important;
}
.article-content p {
    margin-bottom: 1.5em;
    text-align: left;
}
.article-content iframe {
    text-align: center !important;
}

/* ======================================================= */
/* =========== DISEÑO PROFESIONAL DEL FOOTER ============= */
/* ======================================================= */

/* --- Contenedor principal del footer --- */
.main-footer-container {
    background-color: var(--card-background); /* Un fondo sutilmente diferente */
    color: var(--purple-light);
    padding-top: 60px;
    border-top: 2px solid var(--purple-main);
}

/* --- Contenido principal del footer (las columnas) --- */
.footer-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    /* 4 columnas con la primera más ancha para el branding */
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}

/* --- Estilo de las columnas --- */
.footer-column h4 {
    font-family: var(--font-headings);
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column li {
    margin-bottom: 12px;
}
.footer-column a {
    color: var(--purple-light);
    transition: color 0.3s;
}
.footer-column a:hover {
    color: #fff;
}

/* --- Estilo específico del branding y redes --- */
.footer-brand .logo {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
}
.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
    padding-right: 20px; /* Evita que el texto se pegue a la siguiente columna */
}
.social-icons {
    display: flex;
    gap: 15px;
}
.social-icons a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
    border-radius: 50%;
    border: 1px solid var(--purple-dark);
    /* Hacemos que el SVG herede el color del enlace */
    color: var(--purple-light); 
    transition: all 0.3s;
}
.social-icons a:hover {
    background-color: var(--purple-main);
    color: #fff; /* Al cambiar el color del 'a', el SVG también cambiará */
    transform: translateY(-4px);
}
.social-icons a svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* El SVG siempre toma el color de su 'a' padre */
}

/* --- Barra inferior de copyright --- */
.footer-bottom {
    margin-top: 40px;
    padding: 20px 30px;
    border-top: 1px solid var(--purple-dark);
    text-align: center;
}
.footer-bottom p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--purple-light);
}

/* --- RESPONSIVE: Hacemos que se vea bien en móviles --- */
@media (max-width: 1024px) {
    .footer-content {
        /* 2 columnas en tablets */
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    .footer-content {
        /* 1 columna en móviles */
        grid-template-columns: 1fr;
        text-align: center; /* Centramos todo */
    }
    .footer-brand p {
        padding-right: 0;
    }
    .social-icons {
        justify-content: center; /* Centramos los iconos */
    }
}

/* ======================================================= */
/* ====== DISEÑO "PREMIUM" PARA GRUPO DE LA SEMANA ====== */
/* ======================================================= */

/* --- El contenedor principal --- */
.group-focus-section {
    margin-top: 130px; /* Más espacio arriba */
    border: 1px solid var(--purple-dark); /* Borde más sutil */
    border-radius: 16px;
    padding: 40px;
    position: relative;
    /* EL EFECTO DE FONDO: un gradiente radial sutil */
    background: radial-gradient(circle, rgba(42, 42, 74, 0.5) 0%, var(--card-background) 70%);
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.1); /* Un "glow" o brillo morado */
}

/* --- El título ("aespa") que se sienta en el borde --- */
.group-focus-header {
    position: absolute;
    top: -22px;
    left: 40px;
    background-color: var(--background-color);
    padding: 0 20px;
}
/* ======================================================= */
/* ====== DISEÑO "PREMIUM" PARA EL TÍTULO DEL GRUPO ====== */
/* ======================================================= */

.group-focus-header h2 {
    /* 1. La Forma: una píldora elegante */
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center;
    gap: 10px; /* Espacio entre el icono y el texto */
    padding: 10px 25px;
    border-radius: 20px; /* Bordes completamente redondeados */

    /* 2. El Color: un gradiente vibrante */
    background: linear-gradient(45deg, var(--purple-main), #a955ff);
    color: #fff;
    
    /* 3. La Tipografía: más refinada */
    font-size: 1.5rem; /* Un poco más contenida */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;

    /* 4. La Profundidad: borde sutil y sombra de "glow" */
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(138, 43, 226, 0.4);

    /* 5. Transición suave para el hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Un pequeño icono de estrella para denotar que es "destacado" --- */
.group-focus-header h2::before {
    content: '★'; /* Puedes cambiarlo por '♛' (corona) o '♫' (nota musical) */
    font-size: 1.2rem;
    opacity: 0.9;
}

/* --- Efecto al pasar el ratón --- */
.group-focus-header h2:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
}

/* --- Ajustamos la posición del contenedor padre para el nuevo tamaño --- */
.group-focus-header {
    position: absolute;
    top: -28px; /* Ajustamos para la nueva altura del emblema */
    left: 40px;
    background: none; /* Ya no necesitamos el fondo que borraba la línea */
    padding: 0;
}

/* --- La cuadrícula interna --- */
.group-focus-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0; /* Eliminamos el gap para controlar el solapamiento */
    align-items: center; /* Centramos verticalmente para un look más limpio */
}

/* --- La tarjeta principal (imagen grande) --- */
.focus-card-hero {
    z-index: 1; /* La ponemos por debajo de la lista */
}
.focus-card-hero img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.4s ease;
}
.focus-card-hero a:hover img {
    transform: scale(1.03); /* Un zoom sutil al pasar el mouse */
}
.focus-card-hero h3 {
    font-size: 1.8rem;
    line-height: 1.3;
    color: #fff;
    margin: 15px 0 0 0;
}

/* --- LA MAGIA: La lista de noticias secundarias --- */
.focus-card-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2; /* Por encima de la imagen principal */
    /* EL SOLAPAMIENTO: movemos la lista hacia la izquierda */
    margin-left: -60px;
}

/* --- Cada tarjeta secundaria (Efecto Cristal) --- */
.focus-card-secondary a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(138, 43, 226, 0.3);
    
    /* EFECTO "GLASSMORPHISM" */
    background-color: rgba(30, 30, 63, 0.6); /* Fondo semi-transparente */
    backdrop-filter: blur(12px); /* El desenfoque del fondo */

    transition: all 0.3s ease;
}
.focus-card-secondary a:hover {
    background-color: var(--card-background); /* Se vuelve sólido */
    border-color: var(--purple-main);
    transform: translateX(10px); /* Se mueve a la derecha para indicar selección */
}
.focus-card-secondary img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.focus-card-secondary h4 {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}


/* --- RESPONSIVE: Desactivamos los efectos complejos en móviles --- */
@media (max-width: 1024px) {
    .group-focus-grid {
        grid-template-columns: 1fr; /* 1 columna */
        gap: 30px;
    }
    .focus-card-list {
        margin-left: 0; /* Eliminamos el solapamiento */
    }
    .focus-card-secondary a {
        /* Eliminamos el efecto cristal para mejor rendimiento */
        background-color: var(--card-background);
        backdrop-filter: none;
    }
}

/* ======================================================= */
/* ======== CORRECCIÓN DE ESPACIO SUPERIOR FANTASMA ======== */
/* ======================================================= */
.article-content > *:first-child {
    margin-top: 0;
}

/* ======================================================= */
/* =========== DISEÑO PARA SECCIÓN "MÁS NOTICIAS" ========== */
/* ======================================================= */

.more-news-section {
    margin-top: 80px;
    margin-bottom: 80px;
}

/* --- La lista en 2 columnas --- */
.more-news-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 25px;
}

.more-news-item{
    margin-bottom: 30px;
}

/* --- Cada elemento de la lista --- */
.more-news-item a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background-color: var(--card-background);
    border: 1px solid var(--purple-dark);
    border-radius: 10px;
    height: 100%;
    transition: background-color 0.3s, border-color 0.3s;
}
.more-news-item a:hover {
    background-color: #2a2a4a;
    border-color: var(--purple-main);
}

/* --- La imagen pequeña --- */
.more-news-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* --- El contenido de texto --- */
.more-news-content {
    display: flex;
    flex-direction: column;
}
.more-news-title {
    font-family: var(--font-headings);
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    margin: 0 0 8px 0; /* Espacio entre título y fecha */
}
.more-news-date {
    font-size: 0.8rem;
    color: var(--purple-light);
    opacity: 0.8;
}

/* --- RESPONSIVE: Hacemos que se vea bien en móviles --- */
@media (max-width: 900px) {
    .more-news-list {
        /* 1 columna en tablets y móviles */
        grid-template-columns: 1fr;
    }
}

/* ======================================================= */
/* ====== NUEVO LAYOUT DE 2 COLUMNAS PARA INDEX.PHP ====== */
/* ======================================================= */

/* --- El contenedor principal del layout --- */
.home-layout-2col {
    display: grid;
    /* CONTENIDO (flexible) | SIDEBAR (fija) */
    grid-template-columns: 1fr 320px;
    gap: 50px;
    align-items: flex-start; /* Alinea los items al principio */
}

/* --- Estilos para la sidebar derecha y sus widgets --- */
.sidebar-right {
    position: sticky; /* Se queda fija al hacer scroll */
    top: 100px;
}
.sidebar-widget {
    background-color: var(--card-background);
    border: 1px solid var(--purple-dark);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}
.sidebar-widget h3 {
    font-family: var(--font-headings);
    color: #fff;
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--purple-dark);
}

/* --- Lista de Conciertos (reutilizamos el estilo) --- */
.concert-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.concert-list li {
    margin-bottom: 15px;
}
.concert-list li strong {
    display: block;
    color: var(--purple-light);
    font-size: 1rem;
}
.concert-list li span {
    font-size: 0.85rem;
    color: var(--purple-light);
    opacity: 0.7;
}

/* --- Anuncio simulado (reutilizamos el estilo) --- */
.sidebar-ad .ad-placeholder {
    width: 100%;
    /* height: 300px; /* Un tamaño más adecuado para esta posición */
    background-color: var(--card-background);
    border: 1px dashed var(--purple-dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-ad .ad-placeholder span {
    color: var(--purple-dark);
    font-family: var(--font-headings);
    font-weight: bold;
}


/* --- RESPONSIVE: Hacemos que la sidebar se vaya abajo en móviles --- */
@media (max-width: 900px) {
    .home-layout-2col {
        /* 1 columna en móviles */
        grid-template-columns: 1fr;
    }
    .sidebar-right {
        position: static; /* Quitamos el efecto "sticky" */
        margin-top: 40px;
    }
}


/* ======================================================= */
/* ====== CONCIERTOS ====== */
/* ======================================================= */
.concert-list li .ticket-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-color);
    background: rgba(249, 44, 133, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.concert-list li .ticket-link:hover {
    background: rgba(249, 44, 133, 0.3);
}

/* ======================================================= */
/* =========== ESTILOS PARA EL LOGO EN IMAGEN ============ */
/* ======================================================= */

/* Apuntamos a la imagen que está DENTRO del enlace con la clase .logo */
.logo img {
    /* LA CLAVE: Definimos la altura. El ancho se ajustará automáticamente */
    height: 45px; 

    /* Asegura que la imagen se alinee verticalmente con el menú */
    display: block; 
}

/* ======================================================= */
/* =========== ESTILOS PARA EL OVERLAY DE BÚSQUEDA ========== */
/* ======================================================= */

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 46, 0.95); /* Fondo oscuro semi-transparente */
    backdrop-filter: blur(10px);
    z-index: 2000; /* Por encima de todo */

    /* Centramos el contenido */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Oculto por defecto, con una transición suave */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.close-search-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
}

.search-form {
    width: 100%;
    max-width: 700px;
    display: flex;
    gap: 15px;
}
.search-form input[type="search"] {
    flex-grow: 1;
    background: none;
    border: none;
    border-bottom: 2px solid var(--purple-main);
    color: #fff;
    font-size: 2rem;
    padding: 10px;
    outline: none;
}
.search-form button {
    background-color: var(--purple-main);
    border: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 8px;
    cursor: pointer;
}

/* ======================================================= */
/* =========== ESTILOS PARA ICONO DE BÚSQUEDA MODERNO (SVG) =========== */
/* ======================================================= */

/* --- Contenedor del icono --- */
.search-icon {
    display: flex; /* Para centrar el SVG si tuviera padding */
    align-items: center;
    justify-content: center;
}

/* --- El icono SVG en sí --- */
.search-icon svg {
    /* 1. Tamaño */
    width: 28px;
    height: 28px;
    
    /* 2. Color (usamos stroke para iconos de línea) */
    stroke: var(--purple-light); /* Hereda el color del texto del menú */
    
    /* 3. Transición suave para el efecto hover */
    transition: stroke 0.3s ease, transform 0.3s ease;
}

/* --- Efecto al pasar el ratón --- */
.search-icon:hover svg {
    stroke: #fff; /* Cambia a blanco, igual que el resto del menú */
    transform: scale(1.1); /* Se agranda un poco */
}

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.group-card {
    background-color: var(--card-background);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    font-family: var(--font-headings);
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    border: 1px solid var(--purple-dark);
    transition: all 0.3s;
}
.group-card:hover {
    background-color: var(--purple-main);
    transform: translateY(-5px);
}

.static-content {
    max-width: 100%;
    margin: 0 auto;
    color: #dcdcdc;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left;
}
.static-content.text-justify {
    text-align: justify !important;
}
.static-content p {
    margin-bottom: 1.5em;
}

/* ======================================================= */
/* ====== ESTILOS PARA BANNER DE COOKIES PERSONALIZADO ====== */
/* ======================================================= */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3000; /* Por encima de todo */

    background-color: rgba(30, 30, 63, 0.9); /* Fondo semi-transparente con efecto cristal */
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 25px 30px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    border-top: 1px solid var(--purple-dark);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);

    /* Oculto por defecto debajo de la pantalla */
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Transición suave */
}

/* Clase que lo hace visible */
.cookie-banner.is-visible {
    transform: translateY(0);
}

.cookie-banner p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}
.cookie-banner a {
    color: var(--accent-color);
    font-weight: bold;
    text-decoration: underline;
}
.cookie-banner .cookie-banner-button {
    background-color: var(--purple-main);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    flex-shrink: 0; /* Evita que el botón se encoja */
    transition: background-color 0.3s, transform 0.3s;
}
.cookie-banner .cookie-banner-button:hover {
    background-color: #a955ff;
    transform: scale(1.05);
}

/* Hacemos que se apile en móviles */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ======================================================= */
/* ====== ESTILOS PARA EL CONTENEDOR DE COMENTARIOS ====== */
/* ======================================================= */

.comments-container {
    margin-top: 60px; /* Espacio entre el artículo y la sección de comentarios */
    padding: 30px 40px; /* Espacio interno para que Disqus "respire" */
    
    background-color: var(--card-background); /* Reutilizamos el color de las tarjetas */
    border: 1px solid var(--purple-dark); /* Un borde sutil para definirlo */
    border-radius: 16px; /* Bordes redondeados consistentes con tu diseño */
    
    /* Un "glow" sutil para que destaque */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); 
}

/* ======================================================= */
/* ====== ESTILOS PARA EL ENCABEZADO DE COMENTARIOS ====== */
/* ======================================================= */

.comments-header {
    text-align: center; /* Centramos el texto para un look de "invitación" */
    margin-bottom: 30px; /* Espacio entre la invitación y los comentarios de Disqus */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--purple-dark); /* Una línea sutil de separación */
}

.comments-header h3 {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    color: #fff;
    margin: 0 0 10px 0;
}

.comments-header p {
    font-size: 1rem;
    color: var(--purple-light);
    margin: 0;
}

/* ======================================================= */
/* ====== DISEÑO DE GALERÍA PARA PÁGINAS DE ARCHIVO ====== */
/* ======================================================= */

/* --- La cuadrícula principal --- */
.archive-grid {
    display: grid;
    /* Usamos el grid adaptativo que ya nos funcionó tan bien */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* --- Estilos de la tarjeta (reutilizamos y adaptamos .card-secondary) --- */
.archive-grid .card-secondary {
    background-color: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--purple-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.archive-grid .card-secondary:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.archive-grid .card-secondary .card-link-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.archive-grid .card-image-container {
    height: 180px;
    width: 100%;
}
.archive-grid .card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.archive-grid .card-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.archive-grid .card-category {
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.archive-grid .card-title {
    font-family: var(--font-headings);
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 15px 0; /* Espacio debajo del título */
}

/* --- NUEVO: Estilo para el extracto de la noticia --- */
.archive-excerpt {
    font-size: 0.9rem;
    color: var(--purple-light);
    line-height: 1.6;
    opacity: 0.8;
    margin: 0;
    /* Elipsis de 3 líneas para el extracto */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ad-card {
    /* Opcional: un borde diferente para distinguirlo sutilmente */
    border: 1px dashed var(--purple-dark);
}
.ad-card .ad-placeholder {
    width: 100%;
    height: 100%; /* Ocupa toda la altura de la tarjeta */
    min-height: 350px; /* Asegura que tenga una altura mínima visible */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.2); /* Un fondo ligeramente diferente */
}
.ad-card .ad-placeholder span {
    color: var(--purple-dark);
    font-family: var(--font-headings);
    font-weight: bold;
    letter-spacing: 1px;
}

/* ======================================================= */
/* ====== DISEÑO RESPONSIVO FINAL Y A PRUEBA DE FALLOS ====== */
/* ======================================================= */
@media (max-width: 1200px) {
    /* --- Layouts de Página en Tablets --- */
    .home-layout-2col {
        grid-template-columns: 1fr 280px; /* Mantenemos 2 columnas si caben */
    }
    .article-layout {
        grid-template-columns: 1fr 320px; /* Pasamos a 2 columnas */
    }
    .sidebar-ad-left {
        display: none; /* Ocultamos el anuncio izquierdo */
    }
}

@media (max-width: 900px) {
    /* --- Layouts de Página en Tablets Pequeñas y Móviles --- */
    .home-layout-2col,
    .article-layout {
        grid-template-columns: 1fr; /* Forzamos a 1 SOLA COLUMNA */
    }

    /* --- Sidebars --- */
    .sidebar, .sidebar-right, .sidebar-left {
        display: block;
        position: static;
        margin-top: 50px;
        padding-top: 30px;
        border-top: 1px solid var(--purple-dark);
        border-left: none;
        padding-left: 0;
    }

    /* --- Grids de Noticias --- */
    .trending-grid,
    .recent-section .news-magazine-grid,
    .archive-grid,
    .group-focus-grid,
    .more-news-list {
        grid-template-columns: 1fr; /* Todas las galerías a 1 SOLA COLUMNA */
    }
    .focus-card-list {
        margin-left: 0;
    }

    /* --- Footer --- */
    .footer-content {
        grid-template-columns: 1fr; /* Footer a 1 COLUMNA */
        text-align: center;
    }

    .recent-section .news-magazine-grid{
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    /* --- Header en Móviles --- */
    .main-nav {
        display: none; /* Ocultamos el menú principal */
    }
}

@media (max-width: 480px) {
    /* --- Ajustes de espaciado y fuentes para teléfonos pequeños --- */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .banner-content,
    .group-focus-section,
    .comments-container {
        padding: 20px;
    }
    .banner-title {
        font-size: 1.8rem;
    }
    .full-article h1 {
        font-size: 1.9rem;
    }
}

/* ======================================================= */
/* ====== CORRECCIÓN DE OVERFLOW EN CONTENIDO PRINCIPAL ====== */
/* ======================================================= */

/* Esta regla se aplica al contenedor que se desborda */
.main-home-content {
    /* LA SOLUCIÓN MÁGICA: Permite que el contenedor se encoja correctamente */
    min-width: 0;
}

.main-content {
    /* LA SOLUCIÓN MÁGICA: Permite que el contenedor se encoja correctamente */
    min-width: 0;
}

/* ======================================================= */
/* ====== ESTILOS PARA CONTENEDORES OEMBED (TIKTOK/X) ====== */
/* ======================================================= */
.oembed-container {
    display: flex;
    justify-content: center; /* Centra el embed horizontalmente */
    margin: 30px 0; /* Añade espacio vertical */
}

/* El CSS que Twitter/TikTok inyecta a veces necesita ayuda para centrarse */
.oembed-container .twitter-tweet,
.oembed-container .tiktok-embed {
    margin-left: auto !important;
    margin-right: auto !important;
}

.embed-container {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
/* Forzamos el centrado de los embeds que se cargan dinámicamente */
.embed-container .twitter-tweet,
.embed-container .tiktok-embed {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ======================================================= */
/* ====== TRUCO "DARK MODE" AVANZADO PARA TIKTOK (INVERT) ====== */
/* ======================================================= */

/* Apuntamos al contenedor que envuelve el iframe de TikTok */
.tiktok-embed {
    /* 1. Invertimos TODO el contenido. El blanco se vuelve negro. */
    filter: invert(1);
    
    /* 2. Le damos un fondo de nuestro color para llenar los bordes */
    background-color: var(--background-color);
    
    border: 1px solid var(--purple-dark);
    border-radius: 8px !important;
}

/* Apuntamos al iframe que está DENTRO del blockquote */
.tiktok-embed iframe {
    /* 3. ¡VOLVEMOS A INVERTIR solo el iframe! */
    /* Esto hace que el video, los avatares y las imágenes se vean normales de nuevo,
       pero el fondo (que era negro) ahora se vuelve blanco y es afectado
       por el 'invert(1)' de su padre, volviéndose negro otra vez. */
    filter: invert(1);
}

/* ======================================================= */
/* ====== ESTILOS PARA INFO DE AUTOR Y FECHA ====== */
/* ======================================================= */

.article-author-info {
    display: flex; /* Alinea el avatar y el texto horizontalmente */
    align-items: center;
    gap: 15px; /* Espacio entre el avatar y el texto */
    margin-bottom: 30px; /* Espacio antes del contenido del artículo */
}

.author-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Hace la imagen perfectamente redonda */
    border: 2px solid var(--purple-dark);
}

.author-details {
    display: flex;
    flex-direction: column; /* Apila el nombre y la fecha verticalmente */
}

.author-name {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

.post-time {
    font-size: 0.9rem;
    color: var(--purple-light);
    opacity: 0.8;
}

/* 2. El iframe (video) dentro del contenedor */
.embed-container iframe {
    width: 100%;
    height: 100%;
    text-align: center !important;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}

.embed-container-instagram{
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

/* ======================================================= */
/* ====== MEJORA DE DISEÑO PARA ANUNCIOS "IN-FEED" ====== */
/* ======================================================= */

/* Apuntamos a la tarjeta que contiene el anuncio */
.ad-card {
    /* Eliminamos cualquier padding que pueda heredar de .card-secondary */
    padding: 0;
    /* Hacemos que sea un contenedor flexible para centrar el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Asegura que el contenido respete los bordes redondeados */
}

/* Apuntamos al enlace <a> que nos da Awin */
.ad-card a {
    display: block;
    width: 100%;
    height: 100%; /* Forzamos al enlace a ocupar toda la altura de la tarjeta */
}

/* Apuntamos a la imagen <img> dentro del enlace */
.ad-card img {
    width: 100%;
    height: 100%; /* Forzamos a la imagen a ocupar toda la altura del enlace */
    
    /* LA MAGIA: Asegura que la imagen se muestre completa sin deformarse */
    /* 'contain' mostrará la imagen entera, añadiendo barras si es necesario */
    object-fit: contain; 
}

/* ======================================================= */
/* ====== ESTILOS PARA BANNER PUBLICITARIO HORIZONTAL ====== */
/* ======================================================= */

.horizontal-ad-banner {
    width: 100%;
    margin-bottom: 40px; /* Espacio entre el banner y el contenido de abajo */
    text-align: center; /* Centra el anuncio dentro del contenedor */
    position: relative;
}

/* Este es el texto "PUBLICIDAD" que se muestra encima del banner */
.horizontal-ad-banner::before {
    content: 'PUBLICIDAD';
    display: block;
    font-size: 0.7rem;
    color: var(--purple-light);
    opacity: 0.5;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* El placeholder para cuando no hay un anuncio real */
.ad-placeholder-horizontal {
    width: 100%;
    max-width: 728px; /* Tamaño estándar de un banner "leaderboard" */
    height: 90px;
    margin: 0 auto; /* Centra el placeholder */
    background-color: var(--card-background);
    border: 1px dashed var(--purple-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ad-placeholder-horizontal span {
    color: var(--purple-dark);
    font-family: var(--font-headings);
    font-weight: bold;
}

/* Cuando pongas el anuncio real, la imagen se adaptará */
.horizontal-ad-banner img {
    max-width: 100%; /* Asegura que el banner sea responsivo */
    height: auto;
}

/* ======================================================= */
/* ====== ESTILOS PARA ANUNCIO PEGAJOSO MINIMALISTA ====== */
/* ======================================================= */

.sticky-ad-banner-minimal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2500;

    /* LA CLAVE: SIN FONDO Y SIN BORDES */
    background: none;
    border: none;
    box-shadow: none;

    /* Centramos el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0; /* Un poco de espacio vertical */

    /* Ocultamos cualquier cosa que se desborde del contenedor del anuncio */
    overflow: hidden;

    /* Transición para la aparición */
    transform: translateY(150%); /* Empezamos más abajo */
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Clase para hacerlo visible */
.sticky-ad-banner-minimal.is-visible {
    transform: translateY(0);
}

.sticky-ad-banner-minimal .sticky-ad-content {
    max-width: 728px;
    width: 100%;
}

/* La imagen del anuncio debe ser un bloque para evitar espacios extra */
.sticky-ad-banner-minimal img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto; /* Centra la imagen si es más pequeña que el contenedor */
}

/* Ocultamos el anuncio en pantallas de móvil para no tapar el contenido */
@media (max-width: 768px) {
    .sticky-ad-banner-minimal {
        display: none;
    }
}

/* --- Estilos de Paginación Personalizados para MottoNews --- */

/* Contenedor principal de la paginación */
.pagination {
    display: flex;
    justify-content: center; /* Centra la lista de botones */
    margin-top: 50px; /* Más espacio arriba */
    margin-bottom: 30px;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

/* La lista <ul> que contiene los botones */
.pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    /* Empuja los botones "Anterior" y "Siguiente" a los extremos opuestos */
    justify-content: space-between;
}


/* --- Estilo Base de los Botones --- */
.pagination li a {
    display: block;
    display: flex;         /* Activa Flexbox */
    align-items: center;   /* Centra verticalmente el icono y el texto */
    gap: 8px; 
    text-decoration: none;
    /* Un color de texto que no sea blanco puro para no competir con los títulos */
    color: #c7c1d9; /* Un púrpura pálido y desaturado */
    /* Fondo que coincide con el de tus tarjetas de noticias */
    background-color: #2a214a; 
    /* Borde sutil que combina con el fondo */
    border: 1px solid #4a3f70;
    padding: 12px 24px;
    border-radius: 8px; /* Bordes redondeados como tus tarjetas */
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: all 0.3s ease; /* Transición suave */
}

/* --- REGLA NUEVA PARA EL TAMAÑO DEL ICONO --- */
.pagination-arrow {
    /* Usamos 'em' para que el icono escale con el tamaño del texto */
    width: 1.2em; 
    height: 1.2em;
}

/* --- Efecto Hover (al pasar el ratón) --- */
.pagination li a:hover {
    color: #ffffff; /* El texto se vuelve blanco brillante */
    /* El borde se ilumina con tu color de acento principal */
    border-color: #c039a3; 
    /* Añadimos un sutil brillo para el efecto "glow" */
    box-shadow: 0 0 10px rgba(192, 57, 163, 0.4);
}


/* --- Estilo para la Página Actual (si decides volver a poner los números) --- */
/* Lo dejamos por si lo necesitas en el futuro */
.pagination li.active a {
    background-color: #c039a3; /* Tu color de acento principal */
    color: #ffffff;
    border-color: #c039a3;
    box-shadow: 0 0 15px rgba(192, 57, 163, 0.6);
    pointer-events: none; 
}