/* Estilos generales */
body {
    font-family: sans-serif; /* O la fuente que prefieras */
    line-height: 1.6;
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 20px; /* Añade un padding general para que el contenido no toque los bordes */
    color: #333; /* Color de texto oscuro */
    display: flex; /* Centrar el contenido verticalmente si es necesario */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Altura mínima del 100% del viewport para centrar */
    box-sizing: border-box; /* Incluir padding en el cálculo del tamaño */
}

.container {
    max-width: 800px; /* Ancho máximo del contenido en pantallas grandes */
    width: 100%; /* Asegura que ocupe el 100% del ancho disponible hasta el max-width */
    margin: auto; /* Centra el contenedor */
    padding: 20px;
    background-color: #fff; /* Fondo blanco para el contenedor */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 8px; /* Bordes redondeados */
    text-align: center; /* Centra el texto dentro del contenedor */
}

header h1 {
    color: #0056b3; /* Un color azul, puedes cambiarlo por el de tu marca */
    margin-bottom: 20px;
    font-size: 2.5em; /* Tamaño de fuente grande para el título */
}

/* Estilos para el logo (si lo añades) */
.logo {
    max-width: 400px; /* Tamaño máximo del logo */
    height: auto;
    margin-bottom: 20px;
}

main p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

footer {
    margin-top: 30px;
    font-size: 1em;
    color: #555;
}

footer p {
     margin: 5px 0; /* Espacio entre las líneas del footer */
}


/* --- Adaptabilidad (Responsive) --- */

/* Media Query para pantallas más pequeñas (ej. móviles y tablets pequeñas) */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Reduce el padding general en pantallas pequeñas */
    }

    .container {
        padding: 15px; /* Reduce el padding del contenedor */
    }

    header h1 {
        font-size: 1.8em; /* Reduce el tamaño del título en pantallas pequeñas */
        margin-bottom: 15px;
    }

    main p {
        font-size: 1em; /* Reduce ligeramente el tamaño del texto del párrafo */
        margin-bottom: 10px;
    }

    footer {
        margin-top: 20px;
        font-size: 0.9em;
    }
}

/* Media Query para pantallas aún más pequeñas si fuera necesario (ej. teléfonos muy antiguos o modos apaisados de móviles) */
@media (max-width: 400px) {
     header h1 {
        font-size: 1.6em;
     }

     main p {
        font-size: 0.95em;
     }
}