/* Estilos para móviles */
@media screen and (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
        font-size: 16px;
        background-color: #f9fafb; /* Fondo más limpio */
    }

    header {
        flex-direction: column;
        align-items: center;
        padding: 10px 5px;
        gap: 10px;
    }

    header h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    header .flex {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    header .flex > a {
        font-size: 0.9rem;
        text-align: center;
        padding: 5px 10px;
    }

        h2 {
            font-size: 18px; /* Reducir el tamaño del título */
            text-align: center; /* Centrar el título */
        }
    
        /* Contenedor principal */
        .grid {
            grid-template-columns: 1fr; /* Hacer las columnas flexibles y apilarlas */
            gap: 10px; /* Reducir el espacio entre los elementos */
        }
    
        /* Estilos para cada div dentro de la grid */
        .grid .col-span-2 {
            grid-template-columns: 1fr; /* Asegurar que todos los elementos dentro de col-span-2 sean de una sola columna */
            padding-left: 10px; /* Añadir un poco de espacio a la izquierda */
            padding-right: 10px; /* Añadir espacio a la derecha */
        }
    
        /* Ajuste de los textos */
        .text-sm {
            font-size: 14px; /* Reducir el tamaño del texto en pantallas pequeñas */
        }
    
        /* Ajuste de las imágenes si las hay (en caso de ser necesario) */
        img {
            max-width: 100%; /* Asegura que las imágenes no se desborden */
            height: auto; /* Mantener la proporción de las imágenes */
        }
    }