/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/* Estilos generales para los elementos del menú de navegación */
selector .elementor-nav-menu--main > .elementor-nav-menu > li > a {
    /* Estilos del borde (blanco transparente) */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde blanco con 40% de opacidad */
    border-radius: 9999px; /* Borde muy redondeado (forma de píldora) */
    padding: 10px 25px; /* Ajusta el padding interno para dar espacio al texto */
    color: #FFFFFF; /* Color del texto por defecto (blanco) */
    background-color: transparent; /* Fondo transparente por defecto */
    transition: all 0.3s ease; /* Transición suave para el hover */
    /* Otros estilos de texto que Elementor puede manejar, como font-family, font-size, etc. */
}

/* Estilos para el elemento activo (página actual) o un elemento con estilo específico (como "Contacto") */
/* Por ejemplo, si el último elemento es el de "Contacto" y tiene un fondo rosa sólido */
selector .elementor-nav-menu--main > .elementor-nav-menu > li:last-child > a {
    background-color: #FE84E7; /* Color de fondo rosa sólido */
    border-color: #FE84E7; /* Borde del mismo color */
    color: #000000; /* Texto oscuro para contraste */
}

/* Estilo al pasar el ratón (hover) */
selector .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover {
    background-color: #FE84E7; /* Fondo rosa sólido al hacer hover */
    border-color: #FE84E7; /* Borde del mismo color al hacer hover */
    color: #000000; /* Texto oscuro para contraste al hacer hover */
}

/* Para elementos activos que no sean el último (si tienes un estilo diferente para ellos) */
/* selector .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-item > a {
    background-color: #FE84E7; 
    border-color: #FE84E7; 
    color: #000000;
} */


/* Ajuste para el ícono de flecha en "Servicios" si es parte del enlace */
/* Si el ícono es un elemento HTML independiente dentro del <a>, esto funcionaría */
selector .elementor-nav-menu--main > .elementor-nav-menu > li > a .sub-arrow { /* Reemplaza .sub-arrow con la clase real de tu flecha */
    color: #FFFFFF; /* Color de la flecha blanca por defecto */
    transition: color 0.3s ease;
}

selector .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover .sub-arrow {
    color: #000000; /* Color de la flecha oscura al hacer hover */
}

/* Si la flecha es un pseudo-elemento, podrías necesitar ajustar su color con 'content' */
/* Ejemplo: selector .elementor-nav-menu--main > .elementor-nav-menu > li > a:hover::after { color: #000000; } */


/* MEDIA QUERIES para responsividad (ajusta según necesites el padding y tamaño en móvil/tablet) */
@media (max-width: 1024px) {
    selector .elementor-nav-menu--main > .elementor-nav-menu > li > a {
        padding: 8px 20px; /* Un poco menos de padding en tablet */
        font-size: 15px; /* Ajusta el tamaño de fuente si Elementor no lo hace automáticamente */
    }
    selector .elementor-nav-menu--main > .elementor-nav-menu > li:last-child > a {
        padding: 8px 20px;
    }
}

@media (max-width: 767px) {
    /* Estilos para el menú móvil/off-canvas si es necesario */
    /* Por lo general, Elementor maneja el menú móvil de forma diferente */
    /* Si quieres que los botones se mantengan en el menú móvil, ajusta el display */
    /* selector .elementor-nav-menu--dropdown > li > a { 
        border-radius: 9999px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding: 8px 20px;
        margin: 5px 0;
        display: block;
        text-align: center;
    }
    selector .elementor-nav-menu--dropdown > li:last-child > a {
        background-color: #FE84E7;
        border-color: #FE84E7;
        color: #000000;
    }
    selector .elementor-nav-menu--dropdown > li > a:hover {
        background-color: #FE84E7;
        border-color: #FE84E7;
        color: #000000;
    } */
}







/*
    Add your custom styles here
*/


/***ajuste texto cookies***/
.cmplz-document.cookie-statement.cmplz-document-eu {
  max-width: none !important;
}

/* Color placeholder edad */

select[name="form_fields[edad]"] {
  color: #ffffff9e !important;
}

select[name="form_fields[edad]"]:valid {
  color: #ffffff !important;
}