@font-face {
    font-family: 'Gibson';
    src: url('https://michoacan.gob.mx/cdn/fonts/gibson-regular-webfont.woff');
    font-weight: normal;
    font-style: normal;
}
    /* --- SECCIÓN DE NOTICIAS (FORMATO HORIZONTAL) --- */
   
    .grid-moderno-lista {
        display: flex;
        flex-direction: column; /* Apila las tarjetas de noticias hacia abajo */
        align-items: center;
        gap: 20px;
        padding: 40px 0;
    }
    .noticias-box {
        width: 100%; /* Toma el 100% del espacio disponible */
        max-width: 2000px; /* Pero nunca crece más de 1200px para no verse estirado en pantallas gigantes */
        height: auto; /* Permite que la caja crezca hacia abajo si el texto es muy largo */
        min-height: 250px; /* Mantiene una altura decente base */
        
        background-color: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        
        display: flex;
        flex-direction: row; 
        align-items: center; 
        text-align: left;
        box-sizing: border-box;
    }
    .bloque-link {
        text-decoration: none;
        display: block;
        width: 100%;
        max-width: 2000px;
    }

    .noticias-box:hover {
        border-color: #D4AF37; /* Dorado */
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transform: translateY(-5px);
    }

    .noticia-img {
        width: 200px; 
        height: 200px;
        object-fit: cover;
        margin: 20px; 
        border-radius: 10px; 
        flex-shrink: 0;
    }

    .noticia-contenido {
        font-family: 'Gibson', sans-serif;
        padding: 20px 20px 20px 0; 
        flex: 1; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .noticia-titulo {
        font-family: 'Gibson', sans-serif;
        color: #911A3A; /* Guinda institucional */
        font-size: 2rem;
        font-weight: bold;
        margin: 0 0 5px 0;
        line-height: 1.2;
    }

    .noticia-fecha {
        font-family: 'Gibson', sans-serif;
        color: #496163; /* Verde Azulado */
        font-size: 0.9rem;
        display: block;
        margin-bottom: 10px;
    }

    .noticia-balazo {
        font-family: 'Gibson', sans-serif;
        color: #555555;
        font-size: 1.1rem;
        margin: 0;
        line-height: 1.4;
        font-weight: bold; 
    }

        /* 
    CONTENEDOR PRINCIPAL (Posicionamiento)
     */
    .grid-galeria-estilizada {
        display: grid;
        grid-template-columns: 1.5fr 1fr; /* Columna izquierda más grande */
        grid-template-rows: 1fr 1fr;      /* Dos filas iguales */
        gap: 25px;                        
        max-width: 1000px;
        height: 1000px;
        margin: 40px auto;                /* Centra el bloque en la página */
    }

    /* 
    TARJETAS Y ESTILO VISUAL
     */
    .galeria-item {
        position: relative;
        display: block;
        border-radius: 16px; /* Bordes bien redondeados */
        overflow: hidden;
        text-decoration: none;
        /* Sombras y transición suave para el estado normal */
        box-shadow: 0 4px 15px rgba(145,26,58,0.08);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        width: 600px;
    }

    .galeria-item:hover {
        transform: translateY(-8px); /* Salta un poco hacia arriba */
        box-shadow: 0 15px 35px rgba(145,26,58,0.8); /* Sombra más profunda */
        border-color: #D4AF37;
    }

    /* 
    POSICIÓN DE LA IMAGEN GRANDE
     */
    .principal {
        grid-column: 1 / 2; /* Primera columna */
        grid-row: 1 / 3;    /* Abarca de la fila 1 a la 3 (ocupa todo lo alto) */
    }

    /* 
    MANEJO DE LAS IMÁGENES (Con efecto Zoom)
     */
    .img-contenedor {
        width: 100%;
        height: 100%;
        overflow: hidden; /* Necesario para que el zoom no se salga del borde */
    }

    .img-contenedor img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease; /* Transición para el zoom */
    }

    /* Al hacer hover en la tarjeta, la imagen hace un ligero zoom in */
    .galeria-item:hover img {
        transform: scale(1.08);
    }

    /* 
    ETIQUETA DE FECHA (Estilo de tu boceto)  */
    .fecha-badge {
        font-family: 'Gibson', sans-serif;
        position: absolute;
        top: 0;                
        right: 0;
        background-color: #911A3A; 
        color: #ffffff;
        font-weight: bold;
        font-size: 1.1rem;
        padding: 12px 30px;
        border-bottom-left-radius: 20px; 
        z-index: 2;
        transition: background-color 0.3s ease;
    }

    /* Cambio de color en la fecha al pasar el mouse (opcional) */
    .galeria-item:hover .fecha-badge {
        background-color: #496163; 
    }

        
    .grid-galeria-estilizada {
        display: grid;
        grid-template-columns: 2fr 1fr; 
        grid-template-rows: 1fr 1fr;
        gap: 25px;
        max-width: 1100px; 
        height: 550px;
        margin: 40px auto;
    }

    .capa-oscura {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%; /* Cubre un poco más de la mitad para un difuminado suave */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
        z-index: 1;
        pointer-events: none; /* Evita que bloquee el hover de la tarjeta */
    }

    .info-noticia {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .titulo-noticia {
        font-family: 'Gibson', sans-serif;
        color: #ffffff;
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Corta el texto si es muy largo añadiendo "..." */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hace que el título de la noticia principal (la más grande) destaque un poco más */
    .principal .titulo-noticia {
        font-size: 1.35rem;
    }

    /* 
    RESPONSIVIDAD (Para teléfonos)
     */
    @media (max-width: 768px) {
        .grid-galeria-estilizada {
            grid-template-columns: 1fr; /* Todo en 1 sola columna */
            grid-template-rows: auto;
            height: auto;
        }
        .principal {
            grid-column: 1;
            grid-row: auto;
            height: 350px; /* Le damos una altura fija en celulares */
        }
        .galeria-item {
            height: 250px; /* Altura para las pequeñas en celulares */
        }
    }