/* --- Estilos Generales y Imagen de Fondo --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
    background-image: url('../images/background-hero.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 120px;
    color: #333;
}

html {
    overflow-y: scroll;
    /* Force scrollbar to prevent horizontal shift */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}


/* --- Header Fijo de Dos Filas --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #777777;
    color: #fff;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Fila Superior: Redes Sociales (alineadas a la derecha) */
.top-header {
    display: flex;
    /* CAMBIO: Alinea el contenido (social-icons) a la derecha */
    justify-content: flex-end;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    background-color: #515151;
    height: 40px;
    box-sizing: border-box;
}

/* Estilos de Iconos de Redes Sociales */
.social-icons a {
    color: #fff;
    font-size: 1.2rem;
    margin-left: 15px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #d8650d;
}

/* Fila Inferior: Navegación (izquierda) y Logo (derecha) */
.bottom-header {
    background-color: #d6d6d6;
    padding: 0 2rem;
    height: 80px;
    display: flex;
    align-items: center;
    border-bottom: #323232 2px solid;
    box-sizing: border-box;
    /* CAMBIO: Separa la navegación (izq) y el logo (der) */
    justify-content: space-between;
}

/* CAMBIO: Nuevos estilos genéricos para el Logo */
.logo {
    margin: 0;
}

.logo a {
    text-decoration: none;
    color: #fff;
}

.logo h1 {
    margin: 0;
    font-size: 1.8rem;
    /* Tamaño de fuente principal */
}


/* --- Navegación Principal (Fila Inferior) --- */
/* Usamos el selector de hijo directo (>) para no afectar al dropdown */
.main-nav>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* CAMBIO: Se quitan width: 100% y justify-content: center */
    /* Ahora se alineará a la izquierda por defecto (flex-start) */
}

.main-nav ul li {
    position: relative;
    margin-right: 15px;
    /* Damos espacio a la derecha de cada item */
    margin-left: 0;
}

.main-nav ul li a {
    color: #404040;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 10px;
    display: inline-block;
    transition: background-color 0.5s ease;
}

.main-nav ul li a:hover {
    background: #9e9e9e;
    border-radius: 5px;
}

/* Estilo del icono de flecha del menú desplegable */
.has-dropdown>a .fa-caret-down {
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.has-dropdown:hover>a .fa-caret-down {
    transform: rotate(180deg);
}

/* --- Menú Desplegable (Dropdown) --- */
.dropdown {
    /* CAMBIO: (Solución de la vez pasada) */
    flex-direction: column;
    /* Apila los elementos verticalmente */

    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

    position: absolute;
    top: 100%;
    left: 0;
    background: #d6d6d6;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 0;
    list-style: none;
    margin: 0;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    z-index: 999;
}

.has-dropdown:hover .dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.dropdown li {
    margin: 0;
    width: 100%;
}

.dropdown li a {
    padding: 12px 15px;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.dropdown li a:hover {
    background-color: #555;
    border-radius: 0;
}


/* --- Contenido Principal y Pie de Página --- */
main {
    padding: 2rem;
    min-height: 70vh;
    max-width: 1200px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

footer {
    text-align: center;
    padding: 1.5rem;
    background: #333;
    color: #fff;
    margin-top: 20px;
}

/* --- Estilos para Botón de Suscripción --- */
.btn-suscripcion {
    display: inline-block;
    background-color: #0779e4;
    /* Color azul (puedes cambiarlo) */
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.btn-suscripcion:hover {
    background-color: #055aab;
    /* Color más oscuro al pasar el cursor */
}


/* --- Estilos para Formulario de Suscripción --- */
.form-suscripcion {
    max-width: 600px;
    /* Ancho máximo del formulario */
    margin: 30px auto;
    /* Centrado en la página */
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    /* Fondo ligeramente transparente */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
    /* Espacio entre cada campo */
}

.form-group label {
    display: block;
    /* La etiqueta se pone encima del campo */
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    /* Ocupa todo el ancho disponible */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    /* Evita que el padding afecte el ancho */
    font-size: 1rem;
}

.form-suscripcion button {
    width: 100%;
    /* El botón ocupa todo el ancho */
}

.form-group-checkbox {
    display: flex;
    /* Pone los elementos en fila */
    flex-direction: row;
    /* Dirección de fila (horizontal) */
    align-items: center;
    /* Centra verticalmente el check y el texto */
    margin-bottom: 20px;
}

.form-group-checkbox input[type="checkbox"] {
    width: auto;
    /* Anula el width: 100% de otros inputs */
    margin-right: 10px;
    /* Espacio entre el check y el texto */
    /* Opcional: hace el checkbox un poco más grande */
    transform: scale(1.3);
}

.form-group-checkbox label {
    margin-bottom: 0;
    /* Anula el margen de otros labels */
    font-weight: normal;
    /* Texto normal, no negrita */
    font-size: 0.9rem;
    /* Texto un poco más pequeño */
}

.form-group-checkbox label a {
    color: #0779e4;
    /* Color azul para el link */
    text-decoration: underline;
    /* Subrayado para que parezca link */
}

/* --- Estilos del Logo (reemplaza el estilo inline) --- */
.logo img {
    width: 150px;
    height: auto;
    display: block;
    /* Ayuda a evitar espacios extra */
}

/* --- Botón de Hamburguesa (Oculto en PC) --- */
.menu-toggle {
    display: none;
    /* Oculto por defecto en pantallas grandes */
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

/* --- Estilos para el Dropdown (Ajuste para móvil) --- */
.dropdown {
    flex-direction: column;
    /* Apila los elementos verticalmente */

    /* --- CORRECCIÓN: Volvemos a la lógica de visibilidad para PC --- */
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

    /* --- CORRECCIÓN: Volvemos a 'absolute' para PC --- */
    position: absolute;
    top: 100%;
    left: 0;

    /* --- Estilos que ya estaban bien --- */
    background: #e5e5e5;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 0;
    list-style: none;
    margin: 0;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    z-index: 999;
}

.has-dropdown:hover .dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.has-dropdown.open>.dropdown {
    /* Esta clase 'open' la usaremos en JS para abrir el submenú en móvil */
    display: block;
}


/* =====================================================
--- INICIO DE MEDIA QUERIES (ESTILOS PARA CELULAR) ---
=====================================================
*/

/* Usamos 800px como "breakpoint". 
   Puedes ajustarlo (ej. 768px o 900px) si lo necesitas */
@media (max-width: 800px) {

    /* 1. Ocultamos la barra de redes sociales */
    .top-header {
        display: none;
    }

    /* 2. Ajustamos el padding del body (header es más pequeño) */
    body {
        /* Altura del bottom-header (80px) */
        padding-top: 80px;
    }

    /* 3. Ajustamos el header inferior */
    .bottom-header {
        /* Asegura que el logo y el botón de hamburguesa estén en los extremos */
        justify-content: space-between;
        padding: 0 1rem;
        /* Menos padding en móvil */
        height: 80px;
        /* Mantenemos la altura */
    }

    /* 4. Hacemos el logo más pequeño */
    .logo img {
        width: 100px;
        /* Más pequeño en móvil */
    }

    /* 5. Mostramos el botón de hamburguesa */
    .menu-toggle {
        display: block;
    }

    /* 6. Ocultamos el menú de navegación de PC */
    .main-nav>ul {
        display: none;
        /* Oculto por defecto */
    }

    /* 7. ESTILOS DEL MENÚ MÓVIL (CUANDO ESTÁ ABIERTO) */
    /* La clase .nav-open se añadirá con JavaScript */
    .main-nav.nav-open>ul {
        display: flex;
        flex-direction: column;
        /* Menú vertical */

        /* Ocupa toda la pantalla */
        position: fixed;
        top: 80px;
        /* Justo debajo del header */
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        /* 100% de la altura de la pantalla menos el header */

        background: #c9c9c9;
        /* Fondo oscuro */
        overflow-y: auto;
        /* Permite scroll si el menú es muy largo */
        padding: 0;
        margin: 0;
    }

    /* 8. Estilos de los items del menú móvil */
    .main-nav.nav-open li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #444;
        /* Separador */
    }

    .main-nav.nav-open li a {
        padding: 20px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        /* Para que el padding no afecte el ancho */
    }

    /* 9. Desactivamos el :hover de PC y ajustamos dropdowns */
    .has-dropdown:hover .dropdown {
        display: none;
        /* Desactivamos el hover de PC */
    }

    .has-dropdown.open>.dropdown {
        display: block;
        /* Mostramos el submenú solo si tiene la clase .open */
        position: static;
        /* Se muestra en línea */
        width: 100%;
    }

    /* 10. Ajustamos el contenido principal */
    main {
        padding: 1rem;
        margin: 10px;
        width: auto;
        /* Deja que se ajuste al 100% menos los márgenes */
    }

    .main-nav.nav-open .mobile-social-icons {
        display: flex;
        /* Los pone en fila */
        justify-content: center;
        /* Los centra horizontalmente */
        align-items: center;
        padding: 20px 0;
        /* Espacio arriba y abajo */

        /* Una línea para separarlos del resto del menú */
        border-top: 1px solid #555;

        /* Asegura que esté al final, aunque el menú tenga scroll */
        margin-top: auto;
    }

    .main-nav.nav-open .mobile-social-icons a {
        color: #fff;
        /* Color de icono */
        font-size: 1.5rem;
        /* Tamaño de icono */
        margin: 0 15px;
        /* Espacio entre iconos */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .main-nav.nav-open .mobile-social-icons a:hover {
        color: #e48f07;
        /* Color al pasar el cursor */
    }
}

.mobile-social-icons {
    display: none;
}

/* --- Magazine Grid Styles --- */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.magazine-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magazine-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.magazine-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.thumb-container {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    /* Standard magazine ratio */
}

.thumb-container img,
.thumb-container canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.magazine-item:hover .thumb-container img,
.magazine-item:hover .thumb-container canvas {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    gap: 10px;
}

.magazine-item:hover .overlay {
    opacity: 1;
}

.magazine-item h3 {
    margin: 15px 15px 5px;
    font-size: 1.1rem;
    color: #333;
}

.magazine-item p {
    margin: 0 15px 15px;
    font-size: 0.9rem;
    color: #666;
}

.subscription-section {
    text-align: center;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* --- Magazine Header Styles --- */
.magazine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.magazine-header h2 {
    margin-bottom: 5px;
}

.magazine-header p {
    margin-top: 0;
    color: #666;
}

.btn-suscripcion-header {
    background-color: #0779e4;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.btn-suscripcion-header:hover {
    background-color: #055aab;
}

.btn-suscripcion-header {
    align-self: flex-start;
}

/* --- Logout Button Style --- */
.btn-logout {
    background-color: #8b0000 !important;
    /* Dark Red */
    color: white !important;
    border-radius: 5px;
    margin-left: 10px;
}

.btn-logout:hover {
    background-color: #a52a2a !important;
    /* Lighter red on hover */
}

/* --- Search Bar --- */
.search-bar-container {
    display: flex;
    align-items: center;
    margin: 0 15px;
    flex-grow: 1;
    justify-content: center;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 20px 0 0 20px;
    outline: none;
    font-size: 0.9rem;
    width: 100%;
    max-width: 300px;
    transition: border-color 0.3s;
}

.search-input:focus {
    border-color: #555;
}

.search-btn {
    padding: 8px 15px;
    background-color: #555;
    color: white;
    border: 1px solid #555;
    border-radius: 0 20px 20px 0;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.search-btn:hover {
    background-color: #333;
}

/* Mobile check for Search Bar */
@media (max-width: 800px) {
    .search-bar-container {
        display: none;
        /* Hide via JS or CSS if too crowded, or adjust */
        /* For now, maybe hide it on mobile header or put it inside the menu? 
           Let's hide it from the header bar to save space and maybe add it to the menu later. 
           But for now, simplest is hide or small icon. */
        display: none;
    }
}

/* --- Municipality Mosaic Grid --- */
.municipios-grid {
    display: grid;
    /* Responsive columns: at least 200px wide, fill available space */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.municipio-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    /* Uniform height look */
}

.municipio-card:hover {
    transform: translateY(-5px);
    background-color: #e0e0e0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: #0779e4;
    /* Use brand blue */
}

@media (max-width: 600px) {
    .municipios-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on mobile */
    }
}

/* --- Dropdown Scroll Support --- */
.dropdown {
    max-height: 300px;
    /* Adjust height as needed */
    overflow-y: auto;
    /* Enable vertical scroll */
    /* Custom Scrollbar Styles */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    /* Firefox */
}

/* Webkit (Chrome, Edge, Safari) Scrollbar */
.dropdown::-webkit-scrollbar {
    width: 6px;
}

.dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* --- Brand Container (Logo + Search) --- */
.brand-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align logo and search to the left */
    gap: 10px;
    /* Space between logo and search bar */
}

/* Adjust logo margin since it's now inside the container */
.logo {
    margin-right: 0;
}

/* Ensure bottom-header keeps space-between layout */
.bottom-header {
    align-items: center;
    /* Vertically center the nav with the brand block */
}