body {
    margin: 0;
    padding: 0;
    font-family: 'Amiri', serif;
    background-color: #f3f4f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Cambiado para manejar alturas variables */
    text-align: center;
    color: #333;
}

img {
    max-width: 100%; /* Asegura que las imágenes no desborden */
    height: auto;
    margin-bottom: 20px;
}

h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

p {
    font-size: 1.2rem;
    margin: 0 15px; /* Espaciado lateral para texto en pantallas pequeñas */
}

p a {
    display: inline-block; /* Convierte el enlace en un bloque en línea */
    text-align: center;
}

p img {
    display: block; /* Hace que la imagen sea un elemento de bloque */
    margin: 0 auto; /* Centra la imagen horizontalmente */
}

.language-switch {
    margin-top: 10px;
}

.language-switch a {
    text-decoration: none;
    color: #fee11a;
    background-color: #c20f08;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s; /* Suaviza el cambio de color */
}

.language-switch a:hover {
    background-color: #9a0d07; /* Color más oscuro al pasar el ratón */
}

/* --- Media Queries para hacer el diseño responsivo --- */

/* Para pantallas pequeñas como teléfonos (máximo 600px) */
@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem; /* Reducir tamaño de título */
    }
    p {
        font-size: 1rem; /* Reducir texto del cuerpo */
    }
    img {
        margin-bottom: 10px; /* Reducir espacio entre elementos */
    }
    .language-switch a {
        font-size: 0.9rem; /* Texto del botón más pequeño */
        padding: 8px 15px; /* Ajustar el tamaño del botón */
    }
}

/* Para pantallas medianas como tabletas (601px a 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    h1 {
        font-size: 1.8rem;
    }
    p {
        font-size: 1.1rem;
    }
    img {
        max-width: 80%; /* Limitar tamaño de las imágenes */
    }
}

/* Para pantallas grandes como escritorios (1025px y más) */
@media (min-width: 1025px) {
    h1 {
        font-size: 2.5rem; /* Títulos más grandes */
    }
    p {
        font-size: 1.3rem; /* Texto del cuerpo más grande */
    }
    img {
        max-width: 70%; /* Ajustar tamaño de imágenes */
    }
    .language-switch a {
        font-size: 1.2rem; /* Botones más grandes */
        padding: 12px 25px; /* Espaciado más generoso */
    }
}