/*
Theme Name: Canal 5 Guernica
Author: FBC Entertainment
Description: Tema personalizado para el portal de noticias.
Version: 1.0
*/

/* Aquí abajo comienza tu código CSS normal... */
* { margin: 0; padding: 0; box-sizing: border-box; } 
/* Reseteo y fuentes */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background-color: #f8f9fa; color: #1a1a1a; line-height: 1.5; }

/* Topbar */
.topbar { background-color: #004aad; color: white; font-size: 0.8rem; padding: 5px 5%; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: 1px; }

/* --- CABECERA Y NAVEGACIÓN (NUEVO DISEÑO LADO A LADO) --- */
.header-principal {
    background-color: #004aad;
    padding: 1.5rem 5%;
    border-bottom: 4px solid #c;
    
    /* El truco Flexbox para ponerlos en la misma línea */
    display: flex; 
    justify-content: space-between; /* Empuja el logo a la izquierda y el menú a la derecha */
    align-items: center; /* Los centra verticalmente para que queden prolijos */
}

/* Tamaño controlado para el logo */
.logo-img {
    max-width: 220px; /* Puedes achicar o agrandar este número según cómo se vea tu logo */
    height: auto;
    display: block;
}

/* Diseño del menú sobre fondo blanco */
.menu-principal {
    background-color: transparent; 
}

.menu-principal ul {
    list-style: none;
    display: flex;
    gap: 25px; /* Separación entre los botones del menú */
    padding: 0;
}

.menu-principal a {
    color: white; /* Texto oscuro */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* Efecto al pasar el mouse por los enlaces */
.menu-principal a:hover {
    color: #87b5f1; /* Se pintan con tu azul corporativo */
}

/* --- LADO DERECHO: MENÚ Y BUSCADOR --- */
.derecha-header {
    display: flex;
    align-items: center;
    gap: 30px; /* Separación entre las palabras del menú y la cajita de búsqueda */
}

.buscador {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #cccccc;
    border-radius: 25px; /* Bordes circulares modernos */
    padding: 6px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto cuando el usuario hace clic para escribir */
.buscador:focus-within {
    border-color: #004aad;
    box-shadow: 0 0 5px rgba(0, 74, 173, 0.2);
}

.buscador input {
    border: none;
    background: transparent;
    outline: none; /* Quita el borde negro por defecto de los navegadores */
    font-size: 0.95rem;
    width: 160px; /* Ancho de la caja de texto */
    color: #333333;
}

.buscador button {
    background: transparent;
    border: none;
    color: #004aad;
    cursor: pointer;
    font-size: 1.1rem;
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.buscador button:hover {
    transform: scale(1.1); /* La lupa crece un poquito al pasar el mouse */
}

/* --- ADAPTACIÓN PARA CELULARES --- */
@media (max-width: 850px) {
    .header-principal {
        flex-direction: column; /* Vuelve a poner el logo arriba y el menú abajo en pantallas chicas */
        gap: 20px;
    }
    
    .menu-principal ul {
        flex-wrap: wrap; 
        justify-content: center;
    }
}

/* --- ADAPTACIÓN PARA CELULARES --- */
@media (max-width: 850px) {
    .header-principal {
        flex-direction: column;
        gap: 20px;
    }
    
    .derecha-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .menu-principal ul {
        flex-wrap: wrap; 
        justify-content: center;
    }
}

/* Layout de dos columnas */
.contenedor-layout { 
    max-width: 1200px; 
    margin: 2rem auto; 
    padding: 0 20px; 
    display: flex; 
    gap: 30px; 
}

.columna-noticias { 
    flex: 6.5; /* Ocupa el 70% del ancho */ 
    min-width: 0; /* Evita que los textos largos rompan la columna */
}

/* Aplicamos el 30% a la caja contenedora para que no se expanda */
#contenedor-sidebar, .sidebar { 
    flex: 3.5; 
    min-width: 0;
}

/* Diseño de Noticias */
.etiqueta-categoria { display: inline-block; background: #004aad; color: white; padding: 3px 10px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; }
.noticia-principal { background: white; padding: 2rem; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.noticia-principal h2 { font-size: 2.2rem; margin-bottom: 1rem; line-height: 1.1; color: #000; }
.btn-leer { display: inline-block; margin-top: 15px; padding: 10px 20px; border: 2px solid #004aad; color: #004aad; text-decoration: none; font-weight: bold; transition: all 0.3s; }
.btn-leer:hover { background: #004aad; color: white; }

.divisor { height: 1px; background: #ddd; margin: 2rem 0; }

.grilla-secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tarjeta-noticia { background: white; padding: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-top: 3px solid #004aad; }
.tarjeta-noticia h3 { font-size: 1.2rem; margin-bottom: 15px; }
.tarjeta-noticia a { color: #004aad; font-weight: bold; text-decoration: none; }

/* Sidebar (Barra lateral) */
.widget { background: white; padding: 1.5rem; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.widget h3 { font-size: 1.1rem; border-bottom: 2px solid #004aad; padding-bottom: 5px; margin-bottom: 15px; text-transform: uppercase; }
/* --- WIDGET DE PUBLICIDAD (ACTUALIZADO) --- */
.enlace-publicidad {
    display: block;
    overflow: hidden; /* Mantiene la imagen dentro de los bordes redondeados */
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Una sombra suave para que resalte */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-publicidad {
    width: 100%; /* Obliga a la imagen a ocupar el ancho exacto del sidebar */
    height: auto;
    display: block;
}

/* Efecto al pasar el cursor (hover) */
.enlace-publicidad:hover {
    transform: scale(1.02); /* El banner se agranda apenas hacia el lector */
    box-shadow: 0 6px 15px rgba(0, 74, 173, 0.2); /* Sombra con el azul de tu marca */
}
.lista-tendencias { list-style: none; }
.lista-tendencias li { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.lista-tendencias a { color: #333; text-decoration: none; font-weight: 500; transition: color 0.2s; }
.lista-tendencias a:hover { color: #004aad; }

/* --- PIE DE PÁGINA (NUEVO) --- */
.footer-sitio {
    background: #004aad;
    color: #ffffff;
    padding: 3rem 5% 1rem;
    margin-top: 4rem;
    font-size: 0.9rem;
}

.footer-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

/* Estilos de Redes Sociales */
.footer-redes h3 {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    color: #a3c2ff; /* Un celeste suave que combina con tu identidad */
    font-weight: 500;
}

.iconos-redes {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* Permite que se acomoden si la pantalla es muy chica */
}

.iconos-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: white;
    color: #004aad;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse (hover) */
.iconos-redes a:hover {
    background-color: #5e9cec; /* El color oficial de tu medio */
    transform: translateY(-5px); /* Hace que el botón "salte" un poquito hacia arriba */
    box-shadow: 0 4px 10px rgba(0, 74, 173, 0.4);
}

/* Estilos de Enlaces Legales */
.footer-legales ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.footer-legales a {
    color: #bbbbbb;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-legales a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Derechos de autor */
.footer-copyright {
    text-align: center;
    border-top: 1px solid #ffffff;
    padding-top: 1.5rem;
    color: white;
    font-size: 0.85rem;
}

/* --- ENLACE DE DESARROLLADOR EN EL FOOTER --- */
.footer-copyright a {
    color: #a3c2ff; /* Un celeste claro que resalta perfecto sobre el gris oscuro */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: #ffffff; /* Se ilumina a blanco al pasar el cursor */
    text-decoration: underline;
}

/* Adaptación para celulares */
@media (max-width: 850px) {
    .contenedor-layout { flex-direction: column; }
    .grilla-secundarias { grid-template-columns: 1fr; }
    .menu-principal ul { flex-wrap: wrap; gap: 15px; }
}

/* --- DISEÑO DEL ARTÍCULO COMPLETO (Página de Nota) --- */
.articulo-completo {
    background: white;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.titulo-nota {
    font-size: 2.5rem;
    color: #111;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.datos-nota {
    display: flex;
    gap: 20px;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.datos-nota i {
    color: #004aad;
}

.imagen-nota-container {
    margin-bottom: 2rem;
}

.imagen-nota {
    width: 100%; /* Hace que la foto ocupe todo el ancho disponible */
    height: auto;
    border-radius: 4px;
}

.epigrafe {
    font-size: 0.85rem;
    color: #777;
    margin-top: 5px;
    font-style: italic;
}

.cuerpo-texto p {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    color: #333;
}

.cuerpo-texto h3 {
    color: #004aad;
    margin: 2rem 0 1rem;
    font-size: 1.4rem;
}
/* --- ESTILOS PARA LAS IMÁGENES DE LA PORTADA --- */

.img-destacada {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Rediseño de las tarjetas secundarias para que la foto vaya de borde a borde */
.tarjeta-noticia {
    padding: 0; /* Quitamos el relleno general */
    overflow: hidden; /* Evita que la foto se salga de los bordes redondeados */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

.img-miniatura {
    width: 100%;
    height: 200px;
    object-fit: cover; /* ESTO ES MAGIA: recorta la foto automáticamente para que encaje perfecto sin deformarse */
    border-bottom: 3px solid #004aad; /* Una línea azul debajo de la foto para diseño */
}

/* Le devolvemos el espacio interior solo a los textos */
.contenido-tarjeta {
    padding: 1.5rem;
}

/* --- SECCIÓN NOTICIAS RELACIONADAS (Dentro de la nota) --- */
.noticias-relacionadas {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #dddddd; /* Una línea sutil para separar la nota principal */
}

.noticias-relacionadas h3 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    border-left: 5px solid #004aad; /* El clásico detalle azul de tu marca al costado */
    padding-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.noticias-relacionadas h4 {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #333333;
}
/* --- WIDGET DE REDES SOCIALES (SIDEBAR) --- */
.sidebar-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.sidebar-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #f0f2f5; /* Un gris muy suave y elegante */
    color: #555555;
    border-radius: 8px; /* Bordes un poco más cuadrados y modernos */
    text-decoration: none;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

/* Colores oficiales al pasar el mouse (hover) */
.sidebar-redes a.hover-insta:hover { background-color: #E1306C; color: white; transform: translateY(-3px); }
.sidebar-redes a.hover-face:hover { background-color: #1877F2; color: white; transform: translateY(-3px); }
.sidebar-redes a.hover-tik:hover { background-color: #000000; color: white; transform: translateY(-3px); }
.sidebar-redes a.hover-yt:hover { background-color: #FF0000; color: white; transform: translateY(-3px); }
.sidebar-redes a.hover-tw:hover { background-color: #000000; color: white; transform: translateY(-3px); }
.sidebar-redes a.hover-wa:hover { background-color: #25D366; color: white; transform: translateY(-3px); }