.hero-contacto{
    background-image: url('../img/fondo-imagen.webp?v=1');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(140vh); /* Ajusta la altura según el padding */
    display: flex; /* Habilita Flexbox */
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    align-items: center; /* Centra verticalmente */
    padding: 120px 0px 60px 0px; /* Padding: superior, derecho, inferior, izquierdo */
    box-sizing: border-box; /* Asegura que el padding se incluya en la altura total */
}

.hero-banner{
    display: none;
}

.container{
    max-width:1240px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.form-container {
    background: rgba(255, 255, 255,1); /* Fondo semitransparente para el formulario */
    padding: 20px;
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para el contenedor */
    /*max-width: 650px;  Ancho máximo del contenedor */
    width: 100%; /* Ocupa el 100% del ancho disponible */
}

input, textarea {
    padding: 10px; /* Espaciado interno */
    margin-top: 5px; /* Espaciado superior de los campos */
    border: 1px solid #ccc; /* Borde de los campos */
    border-radius: 5px; /* Bordes redondeados */
}

.btnContacto {
    margin-top: 10px; /* Espaciado superior del botón */
    padding: 5px 30px 5px 30px;
    background-color: #003b5c; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 30px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

.btnContacto:hover {
    background-color: #00b5e2; /* Color del botón al pasar el mouse */
}

.textoContacto{
    color:#00b5e2;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3em;
}

.labelContacto{
    font-size: 12px;
}

/*responsive*/

/*Pantalla muy ancha*/
@media only screen and (min-width: 1920px) {
    .hero {
        height: calc(200vh); /* Ajusta la altura según el padding */
        padding: 100px 300px 50px 300px; /* Padding: superior, derecho, inferior, izquierdo */
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
    .hero {
        height: calc(100vh); /* Ajusta la altura según el padding */
        padding: 100px 150px 50px 150px; /* Padding: superior, derecho, inferior, izquierdo */
    }
}

@media only screen and (min-width: 1368px) and (max-width: 1500px) {
    .hero {
        height: calc(100vh); /* Ajusta la altura según el padding */
        padding: 100px 50px 50px 50px; /* Padding: superior, derecho, inferior, izquierdo */
    } 
}

/*tableta horizontal*/
@media screen and (min-width: 820px) and (max-width: 1180px) and (orientation: landscape) {
    .hero {
        height: calc(100vh); /* Ajusta la altura según el padding */
        padding: 150px 100px 50px 100px; /* Padding: superior, derecho, inferior, izquierdo */
    }
}

/* TABLET */
@media only screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
    .hero-contacto{
        background-image: url('../img/fondo-imagen.webp?v=1');
        height: calc(70vh); /* Ajusta la altura según el padding */
        padding: 100px 0px 50px 0px; /* Padding: superior, derecho, inferior, izquierdo */
        background-position: 30% 0px;
    }
}

/*Movil*/
@media screen and (max-width: 767px){
    .hero {
        height: calc(120vh); /* Ajusta la altura según el padding */
        padding: 0px 5px 50px 5px; /* Padding: superior, derecho, inferior, izquierdo */
        background-color: #00b5e2;
        background-image: url('');
    }

    .container{    
        padding-left: 0px;
        padding-right: 0px;
    }

    .hero-banner{
        background-image: url('../img/fondo-imagen.webp');
        background-size: cover;
        background-position: 20% 0px;
        min-height: 250px;
        background-repeat: no-repeat;
        display: flex; /* Habilita Flexbox */
        justify-content: center; /* Alinea el contenido a la derecha */
        align-items: center; /* Centra verticalmente */
        box-sizing: border-box; /* Asegura que el padding se incluya en la altura total */
    }
    
    .form-container{
        margin-top: -40px;
    }
}

/*Movil*/
@media screen and (min-width: 320px) and (max-width: 766px) {
    .hero-contacto{
        height: auto;
        padding: 50px 5px 40px 5px !important; /* Padding: superior, derecho, inferior, izquierdo */
        background-color: #00b5e2;
    }

    .hero-banner{
        min-height: 250px;
    }

    .g-recaptcha {
        width: 100%; 
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}