/* Estilos generales */
body {
    font-family: Verdana;
    background-image: url('fondo.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
    background-repeat: no-repeat; /* Evita la repetición de la imagen */
    background-attachment: fixed; /* Fija la imagen para que no se desplace con el contenido */
}

/* Estilos para monitores grandes */
@media (min-width: 1200px) {
    .contenido {
        max-width: 1200px; /* Ancho máximo para monitores grandes */
    }
}

/* Estilos para tablets y dispositivos medianos */
@media (max-width: 1199px) {
    .contenido {
        max-width: 800px; /* Ancho máximo para tablets y dispositivos medianos */
    }
}

/* Estilos para dispositivos móviles */
@media (max-width: 767px) {

    body {
    background-image: url('fondo3.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir todo el fondo */
    background-repeat: no-repeat; /* Evita la repetición de la imagen */
    background-attachment: fixed; /* Fija la imagen para que no se desplace con el contenido */
    }
    .contenido {
        max-width: 95%; /* Ancho máximo para dispositivos móviles */
        padding: 10px; /* Reducir el espaciado en dispositivos móviles */
    }

    input[type="text"],
    input[type="email"],
    textarea {
        width: 100%; /* Ancho completo para dispositivos móviles */
    }

    .formulario {
        max-width: 95%; /* Ancho máximo para dispositivos móviles */
    }
}

/* Estilos compartidos para todos los tamaños de pantalla */
.contenido {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    float: left;
    height: 100%; /* Establece la altura al 100% */
}

img.logo {
    vertical-align: middle;
}

h1 {
    font-size: 20px;
    letter-spacing: -1.8px;
}

h2 {
    color: #fff; /* Color de texto blanco */
}

label {
    color: #fff; /* Color de texto blanco */
    display: block;
    margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 95%;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
    font-family: Verdana;
}

textarea.sugerencia{
    height: 140px;
}

.formulario {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente de color negro */
    border-radius: 10px; /* Esquinas redondeadas */
    max-width: 400px;
    padding: 20px;
    margin: 0 auto;
}

.formulario-int {
    color: #fff
}

button[type="submit"] {
    background-color: #fff; /* Color de fondo blanco */
    color: #000; /* Color de texto negro */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 102%;
}

/* Estilos adicionales para el widget de reCAPTCHA si es necesario */
.g-recaptcha {
    margin: 0 auto; /* Centra horizontalmente */
    text-align: center; /* Alinea el contenido dentro del widget al centro */
    display: flex;
    justify-content: center; /* Centra verticalmente en pantallas grandes */
    align-items: center; /* Centra verticalmente en pantallas pequeñas */
}