/* --- Estilos generales del cuerpo de la página --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente más moderna */
    margin: 0;
    padding: 0;
    background-color: #fdf4e8;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* overflow-x: hidden;  <-- Ten cuidado con esto, a veces rompe los 'position: fixed' */
    font-size: 1rem;
    line-height: 1.6; /* Mejora la lectura del contenido */
}

/* Evita que el contenido horizontal cause scroll, pero permite el vertical */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

main {
    flex-grow: 1;
    padding: 0;
    width: 100%;
}

/* --- Estilos para los botones generales (Button) --- */
.button {
    display: inline-flex; /* Mejor alineación si hay iconos */
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
}

/* --- Títulos (h1, h2, h3) --- */
h1, h2, h3 {
    margin-top: 0;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* --- Clases de Utilidad --- */
.texto-centrado {
    text-align: center;
    padding: 1rem 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.separador-arriba {
    margin-top: 2rem; /* Aumentado para que se note la separación real */
}

/* Clase para bloquear scroll cuando el modal está abierto */
body.no-scroll {
    overflow: hidden;
}