h2, h3{
    color: var(--azul-osc);
}

/*==================
    tarjetas
===================*/

div.tarjeta{
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    opacity: 0;
    transition: all 0.5s ease;
    transform: scale(0.9);
    max-width: min(650px, calc(100vw - 20px));
    z-index: 10;
    min-height: 300px;
    /*--- botones de opciones ---*/
    & ul.options{

        & li.nav-item{
            border: 1px solid lightgray; 
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            letter-spacing: 1px;
            font-weight: 500;
            backdrop-filter: blur(5px);
            background-color: #8080801c;
            

            &:hover{
                background-image: var(--grad-azul);
                color:aliceblue;
                transform: translateY(-2px);
            }

            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(224, 244, 252, 0.192), transparent);
                transition: 0.5s;
            }
            &:hover::after {
                left: 100%;
            }
        }
    }
    /*--- botones de opciones de envio de solicitud ---*/
    & ul.btn-contact{

        & li.nav-item{
            border: 1px solid lightgray; 
            color: white;
            cursor: pointer;
            border-radius: 5px;
            line-height: 1.2;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            height: 54px;

            &:hover{
                transform: translateY(-2px);
            }
            
            &:after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, transparent);
                transition: 0.5s ease;
            }
            &:hover::after {
                left: 100%;
                background: linear-gradient(90deg, transparent, rgba(224, 244, 252, 0.192), transparent);
            }

            
        }

        & li.item-mail{

            & span.wp-font-awesome-icon{
                font-size: 24px;
            }

            &:hover{
                background-color: var(--celeste);
                color: var(--azul-osc);
            }
        }

        & li.item-whatsapp{
            
            & span.wp-font-awesome-icon{
                font-size: 28px;
            }

            &:hover{
                background-color: rgba(0,168,132,1);
            }
        }
    }

    & div.wp-block-button{
        & p{
            text-align: right;
            margin: 0;

        }

        & a{
            box-shadow: var(--sombra-suave);
            border: 1px solid lightgray;
            border-radius: 5px;
            background: var(--grad-azul);
            padding: 5px 25px;
            transition: all .5s ease;
            width: auto;
            line-height: 2;
            
        }
        & a:hover {
            color: black;
            background: var(--verde-flu);
        }
    }

}

div.tarjeta.active{
    opacity: 1;
    transform: scale(1);
    z-index: 11;
}

div#form-mail{
    background-color: transparent;
}

/*---- Footer ---*/
div#qr-link{
    & p{
        font-size: 15px;
        color: var(--celeste);
    }
}
/*---- Formulario ----*/
/* Contenedor principal del formulario */
.wpcf7 {
    width: 100%;
    margin: 2rem auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0px 5px rgb(147 144 144 / 46%);
    line-height: 1.1;
    backdrop-filter: blur(5px);
            background-color: #8080801c;

    & p{
        margin: 0;
    }
}

/* Campos del formulario */
.wpcf7-form-control {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 5px;
    border: 1px solid lightgray;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: white;
}

.wpcf7-form-control:focus {
    border-color: #6AD9C4;
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 217, 196, 0.2);
}

/* Placeholders */
.wpcf7-form-control::placeholder {
    color: #023859;
    opacity: 0.6;
}

/* Botón de enviar */
.wpcf7-submit {
    box-shadow: var(--sombra-suave);
    border: 1px solid lightgray;
    border-radius: 5px;
    background: var(--grad-azul);
    padding: 5px 25px;
    transition: all .5s ease;
    width: auto;
    color: #fff;
    line-height: 2;
    font-size: 13px;
    margin-bottom: 0;
}

.wpcf7-submit:hover {
    background: var(--verde-flu)!important;
    color: #011526 !important;
}

/* Validación */
.wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 14px;
    margin: 0;
    padding-left: 15px;
}

.wpcf7-response-output {
    border-radius: 8px !important;
    margin-top: 5px !important;
    padding: 10px !important;
    font-size: 15px;
    color: lightgoldenrodyellow;
}

span.wpcf7-spinner{
    position: absolute;
    margin: 5px 0;
}

textarea{
    height: 280px;
}