/* Tipografía y estructura base */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    color: #333;

    /* Imagen de fondo con fallbacks */
    background-image: image-set(
        url('fondo1.webp') type('image/webp'),
        url('fondo1.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Encabezado principal */
h1 {
    color: #73553C;
    text-align: center;
    margin-top: 3rem;
}

/* Párrafos */
p {
    color: #B36D30;
    text-align: center;
    max-width: 600px;
    margin: 1rem auto;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    border-radius: 10px;
}

/* Contenedor de botones */
.container {
    text-align: center;
    margin-top: 2rem;
}

/* Botones generales */
.button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 10px;
    color: white;
    transition: background-color 0.3s ease;
    text-decoration: none; /* NUEVA LÍNEA: Elimina el subrayado */
    display: inline-block; /* Asegura que se comporten como un botón en línea */
}

/* Botón izquierdo */
.left-button {
    background-color: #9D6738;
}

/* Botón derecho */
.right-button {
    background-color: #309BB3;
}

/* Efecto hover para todos los botones */
.button:hover {
    background-color: #862e9c;
}

.form-container {
    /* Centra el contenedor horizontalmente */
    margin-left: auto;
    margin-right: auto;
    
    /* O de forma abreviada */
    /* margin: 20px auto; */
    
    /* Opcional: define un ancho máximo para que no ocupe todo el espacio */
    max-width: 800px;
    
    /* Centra el contenido (como el iframe) dentro del contenedor */
    text-align: center;
}