/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/
Description:  Tema hijo para Hello Elementor, optimizado para desarrollo personalizado.
Author:       Tu Nombre
Author URI:   https://royalcomunicacion.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* Añade tu CSS personalizado a partir de aqui */


/* CSS para los gradientes de algunas palabras */
.grad-blue, .grad-blue-1, .grad-blue-2, .grad-blue-3, .grad-blue-4{
    /* Ajuste exacto de los colores del degradado */
    background: linear-gradient(90deg, #e0f7fc 0%, #2bf3ff 100%) !important;
    
    /* El truco de maquetación para recortar el fondo al texto */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    
    /* Hace transparente el texto original para que brille el gradiente */
    -webkit-text-fill-color: transparent !important;
    text-fill-color: transparent !important;
    
    /* Opcional: Evita que bordes extraños corten el degradado en algunas tipografías */
    display: inline-block;
}

/* Tachado de palabra */
.tachado{
    text-decoration: line-through !important;
    /* Control opcional sobre el grosor de la línea de tachado */
    text-decoration-thickness: 3px !important;
}

/* =====================
    FORMULARIO MODAL CF7 
=======================*/
.elementor-popup-modal .dialog-widget-content{
    background-color: transparent !important;
    box-shadow: none !important;
}
.elementor-popup-modal .dialog-close-button{
    top: 40px !important;
    right: 80px !important;
}
.elementor-popup-modal .dialog-close-button svg{
    fill: white !important;
    width: 1.5em !important;
    height: 1.5em !important;
}

/* ==========================
    FORMULARIO CONTACT FORM 7
========================== */

/* Texto del formulario */
.form-text p{
    font-family: "Poppins", "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif !important;
    color: #ffff !important;
    text-align: center;
}

.title{
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.4rem !important;
    letter-spacing: .015 !important; 
}
.text{
    font-size: .875rem !important;
    font-weight: 400 !important;
    line-height: 1.3rem !important;
    letter-spacing: .02 !important;
}
/* 1. Contenedor Principal (Tarjeta Gris Mate) */
.form {
    background-color: #494848 !important;
    border-radius: 28px !important;
    /* padding: 42px 40px !important; */
    padding: 20px 20px !important;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.45) !important;
    max-width: 560px !important;
    margin: 0 !important;
}

/* Reduccion del margen inferior nativo del formulario de CF7 */
.form .wpcf7-form {
    margin: 0 !important;
}

/* 2. Estructuracion y Etiquetas (Labels) */
.form .wpcf7-form label {
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    font-family: "Poppins", "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif !important;
}

/* 3. Campos de Entrada (Inputs de Texto, Email y Textarea) */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
    width: 100% !important;
    background-color: #444444 !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px !important;
    height: 40px !important;
    padding: 10px 16px;
    color: #ffffff !important;
    /* font-size: 15px !important; */
    font-size: 1.125rem !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo especifico para el marcador de posicion (Placeholder) */
.form input::placeholder,
.form textarea::placeholder {
    color: #888888 !important;
    opacity: 1;
}

/* Ajuste del Área de Texto (Mensaje / Informacion relevante) */
.form textarea {
    min-height: 80px !important;
    resize: vertical;
}

/* Efecto Focus (Cuando el usuario selecciona un campo para escribir) */
.form input:focus,
.form textarea:focus {
    border-color: #ff2aab !important;
    box-shadow: 0 0 8px rgba(255, 42, 171, 0.2) !important;
    outline: none !important;
}

/* 4. Adaptacion para el Plugin de Teléfono Internacional (Banderas) */
.form .phone{
    width: 100% !important;
}
.form .phone .intl-tel-input{
    width: 100% !important;
}
.form .iti {
    width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
}
.wpcf7-intl_tel{
    padding-left: 50px !important;
}
.intl-tel-input{
    margin-top: 10px !important;
}

/* Forzar que el input interno del plugin de banderas herede el diseño */
.form .iti input[type="tel"] {
    margin-top: 0 !important;
    padding-left: 52px !important;
}

/* Ajuste cromático para el desplegable de paises en modo oscuro */
.form .country-list {
    background-color: #333333 !important;
    border: 1px solid #666666 !important;
    color: #ffffff !important;
}
.form .country:hover, 
.form .highlight {
    background-color: #ff2aab !important;
    color: #ffffff !important;
}
.form .search-input {
    background-color: #444444 !important;
    color: #ffffff !important;
    border: 1px solid #666666 !important;
}

/* 5. Casilla de Verificacion (Aceptacion y Enlaces Legales) */
/* Wrapper para aislar el checkbox del estilo global de las etiquetas */

.form .wpcf7-list-item{
    margin: 0 !important;
}
.form .style-aceptacion label{
    display: flex !important;
    flex-direction: row !important;
}
.form .style-aceptacion input{
    display: inline-block !important;
}
.form .wpcf7-list-item .aceptacion{

}
.form .cf7-acceptance-wrapper,
.form .wpcf7-acceptance {
    margin-bottom: 25px !important;
}

.form .wpcf7-acceptance label {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    cursor: pointer;
}

.form .wpcf7-acceptance label input[type="checkbox"] {
    accent-color: #ff2aab !important;
    margin-right: 10px !important;
    transform: scale(1.7);
    vertical-align: middle;
    margin-left: 5px;
}

/* Enlaces del Aviso Legal y Privacidad */
.form .wpcf7-acceptance label a {
    color: #ffffff !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
}

.form .wpcf7-acceptance label a:hover {
    color: #ff2aab !important;
}

/* 6. Boton de Envio Submit de CF7 */
.form input[type="submit"] {
    width: 100% !important;
    background-color: #ff2aab !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    height: 56px !important;
    border: none !important;
    cursor: pointer;
    margin-top: 10px !important;
    box-shadow: 0px 8px 20px rgba(255, 42, 171, 0.35) !important; /* Brillo inferior de la captura */
    transition: transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Comportamientos del Boton */
.form input[type="submit"]:hover {
    background-color: #e01f92 !important;
    box-shadow: 0px 10px 24px rgba(255, 42, 171, 0.5) !important;
    transform: translateY(-2px);
}

.form input[type="submit"]:active {
    transform: translateY(0);
}


/* 7. Verificación de campos */
.wpcf7-not-valid-tip{
    margin-top: 10px !important;
}


.wpcf7-form p:nth-child(9){
    height: 52px !important;
}

@media screen and (max-width: 768px){   
    /* =====================
    FORMULARIO MODAL CF7 
    =======================*/
    .elementor-popup-modal .dialog-close-button{
        top: 34px !important;
        right: 34px !important;
    }
    .elementor-popup-modal .dialog-close-button svg{
        width: 1em !important;
        height: 1em !important;
    }
    
    /* 1. Contenedor Principal (Tarjeta Gris Mate) */
    .form {
        /* max-width: 560px !important; */
        width: 100%;
    }
    .form .wpcf7-form label{
        font-size: .875rem !important;
    }
    .form input[type="submit"]{
        font-size: 14px !important;
    }
}