/* css/responsive.css */

/* Puedes mover la sección @media (max-width: 768px) de style.css aquí
   o añadir más reglas específicas para diferentes puntos de quiebre (breakpoints).
*/

/* Ejemplo de más ajustes para tabletas y móviles pequeños */

/* Para tabletas (ej. entre 769px y 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 95%;
    }
    /* Ajustes específicos para tabletas si son necesarios */
}


/* Ajustes adicionales para móviles (complementando style.css) */
@media (max-width: 768px) {
    .page-title {
        font-size: 1.8em;
    }

    #hero h1 {
        font-size: 2em;
    }
    #hero p {
        font-size: 1em;
    }

    .article-post {
        padding: 15px;
    }
    .article-post h2 {
        font-size: 1.4em;
    }

    /* Ajustes para el formulario de contacto en móviles */
    #formulario-contacto, #info-adicional {
        flex-basis: 100%; /* Que ocupen todo el ancho y se apilen */
    }

    /* Columnas en reflexiones.php (categorías y lista) */
    #categorias-reflexiones,
    #lista-reflexiones {
        float: none;
        width: 100%;
        padding-left: 0;
        margin-bottom: 20px;
    }

    /* Imágenes en artículos de detalle */
    .article-full img {
        max-width: 100% !important; /* Asegurar que no desborden */
    }

    /* Flexbox para biografía en sobre_p_lugo.php */
    #biografia > div { /* El div que contiene imagen y texto */
        flex-direction: column; /* Apilar imagen y texto */
    }
    #biografia > div > div { /* Cada uno de los flex items */
        min-width: 100%; /* Ocupar todo el ancho disponible */
    }
     #biografia img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px; /* Espacio entre imagen y texto */
    }
}


@media (max-width: 480px) {
    header .logo {
        text-align: center; /* Centrar logo si es texto o imagen pequeña */
    }
    header .logo img {
        max-height: 40px; /* Reducir un poco el logo en móviles muy pequeños */
    }
    .menu-toggle {
        top: 18px; /* Ajustar posición del menú hamburguesa */
        font-size: 20px;
    }

    .page-title {
        font-size: 1.5em;
    }

    button[type="submit"], .button {
        padding: 8px 15px;
        font-size: 15px;
        width: 100%; /* Botones a ancho completo para fácil tap */
        box-sizing: border-box;
    }
}