h2 {
    text-align: center;
}

p, ul {
    font-size: x-large;
}

.textos h3 {
    margin-top: 10%;
    margin-left: 5%;
}

article {
    max-width: 850px; /* Limita el ancho para que no vaya de lado a lado */
    margin: 0 auto; 
    padding: 0 15px; /* Un pequeño margen interior para cuando se vea en celulares */
    line-height: 1.6; /* Da un poco más de espacio entre las líneas para que respire mejor */
}

/* Opcional: Si quieres que el texto quede alineado perfectamente como en los periódicos */
article p {
    text-align: justify; 
}

.img-articulo {
    display: block; /* Importante para que funcione el centrado con margen auto */
    margin: 30px auto; /* Centra la imagen horizontalmente y añade espacio arriba/abajo */
    
    /* Reglas clave para la responsividad */
    width: 100%; /* En móviles, ocupará todo el ancho disponible de su contenedor */
    height: auto; /* Mantiene la relación de aspecto original para que no se estire ni aplaste */
    max-width: 100%; /* Asegura que nunca exceda el ancho del contenedor */
    
    /* Regla opcional para PC: Limita el tamaño en pantallas muy anchas para que no se vea excesivamente grande. */
    /* Ajusta este valor (ej. 800px, 600px, etc.) según cómo quieras que se vea en una computadora. */
    max-width: 800px; 
}

.video-youtube {
    display: block; /* Lo convierte en un bloque para poder centrarlo */
    margin: 30px auto; /* 30px de espacio arriba/abajo, 'auto' a los lados lo centra */
    width: 100%; /* En móviles ocupará todo el ancho disponible */
    max-width: 560px; /* En PC evitará que el video se haga gigante, respetando tu ancho original */
    aspect-ratio: 16 / 9; /* Mantiene la proporción exacta de los videos de YouTube */
    height: auto; /* Sobrescribe la altura fija que trae el iframe por defecto */
}

/* Convierte el contenedor en una fila flexible */
.encabezado-noticia {
    display: flex;
    justify-content: space-between; /* Separa el texto a la izquierda y la imagen a la derecha */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    gap: 20px; /* Añade un pequeño margen de seguridad entre el texto y la imagen */
    width: 98%; /* Asegura que ocupe todo el ancho disponible */
}

/* Permite que el bloque de texto ocupe el espacio disponible */
.textos {
    flex: 1;
}

/* Evita que la imagen se encoja en pantallas más pequeñas */
.img-noti {
    flex-shrink: 0;
    width: 50%;
    height: 250px; 
    border-radius: 2em;
}

/*======================
    Margen con el header
========================*/
main {
    margin-top: 4%;
}

@media (900px <= width <= 1100px) {
    main {
        margin-top: 9%;
    }
}

@media (719px <= width <= 900px) {
    main {
        margin-top: 14%;
    }
}

@media (480px <= width <= 719px) {
    main {
        margin-top: 25%;
    }
}

@media (400px <= width <= 480px) {
    main {
        margin-top: 30%;
    }
}

@media (335px <= width <= 400px) {
    main {
        margin-top: 49%;
    }
}

@media screen and (max-width: 335px) {
    main {
        margin-top: 60%;
    }

    .encabezado-noticia {
        display: block; /* Cambia a bloque para apilar el texto y la imagen */
    }

    .img-noti {
        width: 100%;
    }

    .textos h3 {
        margin-top: 0%;
    }
}

@media screen and (max-width: 300px) {
    main {
        margin-top: 65%;
    }
}