:root { --primary: #12254A; --accent: #4DB7F2; --bg: #f4f6f8; --text: #333; }
body { font-family: 'Inter', sans-serif; margin: 0; background: var(--bg); color: var(--text); padding-bottom: 40px; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; display: block; }

/* HEADER */
.main-header { background: var(--primary); padding: 15px 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo { color: white; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; }
.highlight { color: var(--accent); }
.nav-menu a { color: rgba(255,255,255,0.9); margin-left: 20px; font-weight: 600; font-size: 0.95rem; }
.nav-menu a:hover { color: var(--accent); }

/* MENU MOVIL (HAMBURGUESA) */
.menu-toggle { display: none; }
.menu-icon { display: none; color: white; font-size: 1.8rem; cursor: pointer; }

/* ESPACIOS PUBLICITARIOS (ADS) */
.ad-slot {
    background: #e9ecef; border: 1px dashed #adb5bd; color: #6c757d;
    text-align: center; padding: 20px; margin: 30px auto;
    border-radius: 8px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase;
    overflow: hidden; /* Evita que el anuncio rompa el diseño */
}
.ad-leaderboard { max-width: 728px; height: 90px; line-height: 50px; } /* Banner Largo */
.ad-rectangle { max-width: 300px; height: 250px; line-height: 200px; } /* Cuadrado */

/* GRID & CARDS */
.grid { display: grid; gap: 25px; margin-bottom: 40px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.2s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.card-img { height: 200px; background-size: cover; background-position: center; }
.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.card-body h3 { margin: 10px 0; font-size: 1.2rem; line-height: 1.4; flex-grow: 1; }
.tag { background: var(--accent); color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; align-self: flex-start; }
.meta { font-size: 0.8rem; color: #888; margin-top: 15px; }

/* HERO SECTION */
.hero-section { margin: 30px 0; border-radius: 15px; overflow: hidden; position: relative; height: 450px; }
.hero-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s; }
.hero-section:hover .hero-bg { transform: scale(1.05); }
.hero-content { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 40px; color: white; }
.hero-content h1 { font-size: 2.5rem; margin: 10px 0; line-height: 1.1; }

/* ARTICULO */
.single-article { background: white; padding: 40px; border-radius: 12px; margin-top: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.article-main-img { width: 100%; border-radius: 8px; margin: 20px 0; }
.article-body { font-size: 1.15rem; line-height: 1.8; color: #222; }
.article-body p { margin-bottom: 20px; }

/* =========================================
   VERSION MÓVIL (RESPONSIVE)
   ========================================= */
@media (max-width: 768px) {
    /* Menú Desplegable */
    .menu-icon { display: block; }
    .nav-menu {
        display: none; position: absolute; top: 100%; left: 0; width: 100%;
        background: var(--primary); flex-direction: column; padding: 10px 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .nav-menu a { display: block; padding: 15px 20px; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
    #menu-toggle:checked ~ .nav-menu { display: flex; }

    /* Ajustes Generales */
    .hero-section { height: 350px; }
    .hero-content h1 { font-size: 1.5rem; }
    .grid-3 { grid-template-columns: 1fr; } /* 1 columna en celular */
    .single-article { padding: 20px; }
    .ad-leaderboard { display: none; } /* Ocultar banner gigante en móvil */
}