.elementor-43 .elementor-element.elementor-element-1a622c1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-1817e59 */:root {
    --rosa: #E9509E;
    --amarillo: #F0E900;
    --blanco: #FFFFFF;
}

/* BASE: BARRA FIJA (FIXED) PARA TODOS LOS DISPOSITIVOS */
.dedieli-header {
    position: fixed !important; /* Fuerza a pegarse a la pantalla */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(233, 80, 158, 0.15);
    z-index: 99999 !important; /* Asegura que esté por encima de TODO */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
}

/* LOGO ESCRITORIO */
.logo-area a { text-decoration: none; }
.logo-txt { font-family: 'Fredoka One', sans-serif; font-size: 1.8rem; color: var(--rosa); }
.logo-txt span { color: var(--amarillo); text-shadow: 1px 1px 0 #333; }

/* NAVEGACIÓN ESCRITORIO */
.nav-menu ul { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
.nav-menu a { text-decoration: none; color: #333; font-weight: 800; font-size: 0.95rem; transition: 0.3s; font-family: 'Montserrat', sans-serif; }
.nav-menu a:hover { color: var(--rosa); }

/* BOTÓN ESCRITORIO */
.btn-nav-wa { background: var(--rosa); color: var(--blanco) !important; padding: 10px 20px; border-radius: 50px; font-weight: 900; text-decoration: none; transition: 0.3s; font-family: 'Montserrat', sans-serif; }
.btn-nav-wa:hover { background: var(--amarillo); color: var(--rosa) !important; }

/* =========================================
   COMPORTAMIENTO MÓVIL (LA BARRA TÁCTIL)
   ========================================= */
@media (max-width: 767px) {
    /* 1. Ocultamos Logo y Botón lateral */
    .logo-area, .header-cta { display: none !important; }
    
    /* 2. Quitamos el padding para aprovechar todo el ancho */
    .header-container { padding: 0; justify-content: center; }
    
    /* 3. Forzamos el menú a ocupar el 100% */
    .nav-menu { width: 100%; display: block !important; }
    
    .nav-menu ul { 
        display: flex; 
        justify-content: space-between; /* Distribuye el espacio */
        gap: 0; 
        padding: 0; 
    }
    
    .nav-menu li { flex: 1; text-align: center; }
    
    /* 4. Letras pequeñas y área táctil cómoda */
    .nav-menu a {
        display: block;
        font-size: 0.75rem; /* Letra pequeña para que quepa todo */
        padding: 15px 2px; /* Área táctil alta para los dedos */
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: 0px;
        color: #555;
        border-bottom: 3px solid transparent;
    }
    
    /* Efecto al tocar la opción en el celular */
    .nav-menu a:active, .nav-menu a:focus {
        color: var(--rosa);
        border-bottom: 3px solid var(--amarillo);
        background: #fdfdfd;
    }
}/* End custom CSS */