.elementor-1521 .elementor-element.elementor-element-7612252{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1521 .elementor-element.elementor-element-e60137d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1521 .elementor-element.elementor-element-ac5ca5a{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1521 .elementor-element.elementor-element-bf48889 img{width:100%;border-radius:10px 10px 10px 10px;}.elementor-1521 .elementor-element.elementor-element-625a3df{--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;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .menu-item a.hfe-menu-item{padding-left:15px;padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .menu-item a.hfe-sub-menu-item{padding-left:calc( 15px + 20px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 40px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 60px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 80px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .menu-item a.hfe-menu-item, .elementor-1521 .elementor-element.elementor-element-020f3d7 .menu-item a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 ul.sub-menu{width:220px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .sub-menu a.hfe-sub-menu-item,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown li a.hfe-menu-item,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown li a.hfe-sub-menu-item,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown-expandible li a.hfe-menu-item,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .hfe-nav-menu__toggle{margin:0 auto;}.elementor-1521 .elementor-element.elementor-element-020f3d7 a.hfe-menu-item, .elementor-1521 .elementor-element.elementor-element-020f3d7 a.hfe-sub-menu-item{font-family:"Archivo", Sans-serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:2.4px;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .sub-menu,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown-expandible,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown .menu-item a.hfe-menu-item,
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown .menu-item a.hfe-sub-menu-item{background-color:#fff;}.elementor-1521 .elementor-element.elementor-element-020f3d7 .sub-menu li.menu-item:not(:last-child),
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown li.menu-item:not(:last-child),
.elementor-1521 .elementor-element.elementor-element-020f3d7 nav.hfe-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#c4c4c4;border-bottom-width:1px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-nav-menu__toggle,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-nav-menu-icon{margin:0 auto;justify-content:center;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa li.menu-item a{justify-content:space-between;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa li.hfe-button-wrapper{text-align:space-between;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa.hfe-menu-item-flex-end li.hfe-button-wrapper{text-align:right;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-flyout-wrapper .hfe-side{width:300px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-flyout-open.left{left:-300px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-flyout-open.right{right:-300px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-flyout-content{padding:30px;background-color:#FFFFFF;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .menu-item a.hfe-menu-item{padding-left:15px;padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .menu-item a.hfe-sub-menu-item{padding-left:calc( 15px + 20px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-nav-menu__layout-vertical .menu-item ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 40px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-nav-menu__layout-vertical .menu-item ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 60px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-nav-menu__layout-vertical .menu-item ul ul ul ul a.hfe-sub-menu-item{padding-left:calc( 15px + 80px );padding-right:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .menu-item a.hfe-menu-item, .elementor-1521 .elementor-element.elementor-element-2cfd4aa .menu-item a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .sub-menu a.hfe-sub-menu-item,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown li a.hfe-menu-item,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown li a.hfe-sub-menu-item,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown-expandible li a.hfe-menu-item,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown-expandible li a.hfe-sub-menu-item{padding-top:15px;padding-bottom:15px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa a.hfe-menu-item, .elementor-1521 .elementor-element.elementor-element-2cfd4aa a.hfe-sub-menu-item{font-family:"Inter", Sans-serif;font-size:14px;font-weight:500;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .sub-menu,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown-expandible,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown .menu-item a.hfe-menu-item,
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown .menu-item a.hfe-sub-menu-item{background-color:#fff;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .sub-menu li.menu-item:not(:last-child),
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown li.menu-item:not(:last-child),
.elementor-1521 .elementor-element.elementor-element-2cfd4aa nav.hfe-dropdown-expandible li.menu-item:not(:last-child){border-bottom-style:solid;border-bottom-color:#c4c4c4;border-bottom-width:1px;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-flyout-close{color:#7A7A7A;}.elementor-1521 .elementor-element.elementor-element-2cfd4aa .hfe-flyout-close svg{fill:#7A7A7A;}.elementor-1521 .elementor-element.elementor-element-bbf3576{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1521 .elementor-element.elementor-element-77e8d8b{--grid-template-columns:repeat(0, auto);--icon-size:14px;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-1521 .elementor-element.elementor-element-77e8d8b .elementor-widget-container{text-align:center;}@media(max-width:767px){.elementor-1521 .elementor-element.elementor-element-ac5ca5a{--width:20%;}.elementor-1521 .elementor-element.elementor-element-bf48889 img{width:100%;}.elementor-1521 .elementor-element.elementor-element-625a3df{--width:20%;}.elementor-1521 .elementor-element.elementor-element-bbf3576{--width:60%;}}@media(min-width:768px){.elementor-1521 .elementor-element.elementor-element-ac5ca5a{--width:20%;}.elementor-1521 .elementor-element.elementor-element-625a3df{--width:60%;}.elementor-1521 .elementor-element.elementor-element-bbf3576{--width:20%;}}/* Start custom CSS for navigation-menu, class: .elementor-element-2cfd4aa *//* ======================================================
DESTINO VIVO EXPEDITIONS — HEADER v6 (rediseño "glass")
Pegar en: Contenedor raíz (7612252) > Avanzado > CSS
personalizado, o en Elementor > Ajustes del sitio > CSS
personalizado.
Barra full-width pegada al borde superior, 100%
transparente en el tope de la página, y con efecto
"vidrio esmerilado" (blur + tinte navy translúcido +
línea blanca inferior) al hacer scroll. El texto se
mantiene SIEMPRE claro (blanco) en ambos estados.
Paleta: teal #2FC0D0 y navy #081A21, con blancos/
translúcidos como apoyo.
Requiere las fuentes Space Grotesk + Inter (ver nota al
final). Requiere el mismo script de scroll que ya tenías
(widget HTML 51b3427) — no hace falta tocarlo, sigue
apuntando a .elementor-element-7612252 y togglea la
clase "is-scrolled".
====================================================== */
.elementor-element-7612252{
/* Variables de marca, heredan a todos los hijos del header */
--dv-teal: #2FC0D0;
--dv-teal-light: #7FE0EA;
--dv-navy: #081A21;
--dv-text: #FFFFFF;
--dv-text-soft: rgba(255,255,255,.78);
}
/* ------------------------------------------------------------
1) CONTENEDOR RAÍZ — barra full-width, pegada arriba
------------------------------------------------------------ */
.elementor-element-7612252{
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 999;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0;
background: transparent;
border-bottom: 1px solid transparent;
transition: background .35s ease, backdrop-filter .35s ease,
border-color .35s ease, box-shadow .35s ease;
}
/* Estado "glass" al hacer scroll (clase agregada por el JS existente) */
.elementor-element-7612252.is-scrolled{
background: rgba(8,26,33,.55);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid rgba(255,255,255,.4);
box-shadow: 0 1px 0 rgba(255,255,255,.15),
0 12px 30px -18px rgba(0,0,0,.45);
}
.elementor-element-7612252 > .e-con-inner{
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 32px !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
.elementor-element-e60137d{
display: flex !important;
align-items: center;
gap: 40px;
}
/* ------------------------------------------------------------
2) LOGO
------------------------------------------------------------ */
.elementor-element-ac5ca5a{
display: flex;
align-items: center;
}
.elementor-element-bf48889 img{
height: 44px;
width: auto;
max-width: none;
filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
transition: height .3s ease;
}
.elementor-element-7612252.is-scrolled .elementor-element-bf48889 img{
height: 38px;
}
/* ------------------------------------------------------------
3) MENÚ DE ESCRITORIO (widget HFE 020f3d7)
------------------------------------------------------------ */
.elementor-element-020f3d7 ul.hfe-nav-menu{
display: flex !important;
align-items: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.elementor-element-020f3d7 .menu-item{ list-style: none; }
.elementor-element-020f3d7 a.hfe-menu-item{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 100px;
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .01em;
color: var(--dv-text);
text-decoration: none;
text-shadow: 0 1px 6px rgba(0,0,0,.35);
transition: background .2s ease, color .2s ease;
white-space: nowrap;
}
.elementor-element-020f3d7 a.hfe-menu-item:hover{
background: rgba(255,255,255,.12);
color: var(--dv-teal-light);
}
.elementor-element-020f3d7 .current-menu-item a.hfe-menu-item{
background: rgba(47,192,208,.22);
color: var(--dv-teal-light);
}
.elementor-element-020f3d7 .hfe-menu-toggle{
color: var(--dv-text-soft);
font-size: 11px;
}
/* --- Submenú desplegable desktop ("Tradicional" / "Aventura") --- */
.elementor-element-020f3d7 .sub-menu{
background: rgba(8,26,33,.9) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,.1) !important;
box-shadow: 0 24px 44px -18px rgba(0,0,0,.55) !important;
padding: 8px !important;
min-width: 280px !important;
list-style: none !important;
margin: 10px 0 0 0 !important;
}
.elementor-element-020f3d7 .sub-menu .menu-item{
list-style: none !important;
border: none !important;
width: 100% !important;
}
.elementor-element-020f3d7 .sub-menu a.hfe-sub-menu-item{
display: flex !important;
align-items: center;
gap: 12px;
width: 100% !important;
padding: 11px 12px !important;
border-radius: 10px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.4;
color: rgba(255,255,255,.88) !important;
text-decoration: none !important;
text-transform: none !important;
border: none !important;
background: transparent !important;
transition: background .15s ease, color .15s ease;
box-sizing: border-box;
}
.elementor-element-020f3d7 .sub-menu a.hfe-sub-menu-item::before{
content: "" !important;
position: static !important;
width: 6px !important;
height: 6px !important;
min-width: 6px !important;
border-radius: 50% !important;
background: var(--dv-teal) !important;
flex-shrink: 0;
}
.elementor-element-020f3d7 .sub-menu a.hfe-sub-menu-item:hover{
background: rgba(255,255,255,.08) !important;
color: var(--dv-teal-light) !important;
}
/* ------------------------------------------------------------
4) ÍCONOS SOCIALES (WhatsApp / Teléfono / Correo)
------------------------------------------------------------ */
.elementor-element-bbf3576{
display: flex !important;
align-items: center;
gap: 14px;
}
.elementor-element-77e8d8b .elementor-social-icons-wrapper{
display: flex !important;
gap: 8px;
}
.elementor-element-77e8d8b .elementor-icon{
width: 38px !important;
height: 38px !important;
border-radius: 12px !important;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(255,255,255,.28) !important;
background: rgba(255,255,255,.08) !important;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.elementor-element-77e8d8b .elementor-icon:hover{
transform: translateY(-2px);
border-color: var(--dv-teal) !important;
background: rgba(47,192,208,.18) !important;
}
.elementor-element-77e8d8b .elementor-social-icon-whatsapp i{ color: #22C35E !important; }
.elementor-element-77e8d8b .elementor-social-icon-phone-alt i,
.elementor-element-77e8d8b .elementor-social-icon-envelope i{ color: #fff !important; }
/* ------------------------------------------------------------
5) SELECTOR DE IDIOMA (GTranslate, widget 5a77d46)
------------------------------------------------------------ */
.elementor-element-5a77d46 .gtranslate_wrapper{
display: flex;
align-items: center;
gap: 10px;
}
.elementor-element-5a77d46 a.glink{
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 100px;
font-family: 'Space Grotesk', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--dv-text-soft);
text-decoration: none;
border: 1px solid transparent;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.elementor-element-5a77d46 a.glink img{
width: 16px;
height: 16px;
border-radius: 50%;
}
.elementor-element-5a77d46 a.glink.gt-current-lang{
color: var(--dv-text);
background: rgba(47,192,208,.2);
border-color: rgba(47,192,208,.4);
}
.elementor-element-5a77d46 a.glink:hover{
background: rgba(255,255,255,.1);
}
/* ======================================================
6) MENÚ FLYOUT MOBILE (widget HFE 2cfd4aa)
Panel sólido navy (no glass) para que el texto se lea
perfecto sobre cualquier fondo/imagen de la página.
====================================================== */
.elementor-element-2cfd4aa .hfe-nav-menu__toggle{
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
color: #fff;
cursor: pointer;
transition: background .25s ease;
}
.elementor-element-7612252.is-scrolled .elementor-element-2cfd4aa .hfe-nav-menu__toggle{
background: rgba(47,192,208,.18);
border-color: rgba(47,192,208,.4);
}
.elementor-element-2cfd4aa .hfe-flyout-overlay{
background: rgba(8,26,33,.6) !important;
backdrop-filter: blur(3px);
}
.elementor-element-2cfd4aa .hfe-flyout-container .hfe-side,
.elementor-element-2cfd4aa [id^="hfe-flyout-content-id-"],
.elementor-element-2cfd4aa .hfe-flyout-content{
background: var(--dv-navy) !important;
}
.elementor-element-2cfd4aa .hfe-flyout-container .hfe-side{
box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.elementor-element-2cfd4aa .hfe-flyout-content{
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.elementor-element-2cfd4aa .hfe-flyout-close{
display: flex;
align-items: center;
justify-content: center;
align-self: flex-end;
width: 36px;
height: 36px;
margin-bottom: 12px;
border-radius: 10px;
background: rgba(255,255,255,.1);
color: #fff;
cursor: pointer;
transition: background .15s ease;
}
.elementor-element-2cfd4aa .hfe-flyout-close:hover{
background: rgba(255,255,255,.18);
}
.elementor-element-2cfd4aa .hfe-flyout-content nav{
flex: 1;
overflow-y: auto;
}
.elementor-element-2cfd4aa ul.hfe-nav-menu{
display: flex !important;
flex-direction: column;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.elementor-element-2cfd4aa .menu-item{ list-style: none; width: 100%; }
.elementor-element-2cfd4aa nav > ul.hfe-nav-menu > .menu-item{
border-bottom: 1px solid rgba(255,255,255,.08);
}
.elementor-element-2cfd4aa nav > ul.hfe-nav-menu > .menu-item:last-child{
border-bottom: none;
}
.elementor-element-2cfd4aa .sub-menu .menu-item{
border-bottom: 1px solid rgba(255,255,255,.05);
margin: 0 2px;
}
.elementor-element-2cfd4aa .sub-menu .menu-item:last-child{ border-bottom: none; }
.elementor-element-2cfd4aa a.hfe-menu-item{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 8px;
border-radius: 10px;
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
font-weight: 600;
color: #F4FAFC;
text-decoration: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
.elementor-element-2cfd4aa a.hfe-menu-item:hover,
.elementor-element-2cfd4aa a.hfe-menu-item:focus{
background: rgba(255,255,255,.08);
}
.elementor-element-2cfd4aa .current-menu-item > a.hfe-menu-item,
.elementor-element-2cfd4aa .current-menu-item .hfe-has-submenu-container a.hfe-menu-item{
color: var(--dv-teal-light);
background: rgba(47,192,208,.18);
}
.elementor-element-2cfd4aa .hfe-has-submenu-container{
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.elementor-element-2cfd4aa .hfe-has-submenu-container:focus,
.elementor-element-2cfd4aa .hfe-has-submenu-container:active{
outline: none;
background: rgba(255,255,255,.08);
}
.elementor-element-2cfd4aa .hfe-has-submenu-container a.hfe-menu-item{ padding: 14px 8px; }
.elementor-element-2cfd4aa .hfe-menu-toggle{
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
color: rgba(244,250,252,.55);
transition: transform .2s ease, color .2s ease;
}
.elementor-element-2cfd4aa .hfe-has-submenu-container.menu-active .hfe-menu-toggle,
.elementor-element-2cfd4aa .hfe-has-submenu-container[aria-expanded="true"] .hfe-menu-toggle,
.elementor-element-2cfd4aa .hfe-has-submenu-container:has(a[aria-expanded="true"]) .hfe-menu-toggle,
.elementor-element-2cfd4aa .menu-item.hfe-active .hfe-menu-toggle,
.elementor-element-2cfd4aa .menu-item.toggled-on .hfe-menu-toggle{
color: var(--dv-teal-light);
transform: rotate(180deg);
}
.elementor-element-2cfd4aa .sub-menu{
display: none;
flex-direction: column;
list-style: none;
margin: 0 0 0 10px;
padding: 2px 0 6px 18px;
border-left: 2px solid rgba(47,192,208,.35);
background: transparent !important;
}
.elementor-element-2cfd4aa .sub-menu[style*="visibility: visible"],
.elementor-element-2cfd4aa .sub-menu[style*="height: auto"],
.elementor-element-2cfd4aa .hfe-has-submenu-container.menu-active + .sub-menu,
.elementor-element-2cfd4aa .menu-item.hfe-active > .sub-menu,
.elementor-element-2cfd4aa .menu-item.toggled-on > .sub-menu,
.elementor-element-2cfd4aa .hfe-has-submenu-container[aria-expanded="true"] + .sub-menu,
.elementor-element-2cfd4aa .hfe-has-submenu-container:has(a[aria-expanded="true"]) + .sub-menu{
display: flex !important;
max-height: 1000px !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
background: transparent !important;
}
.elementor-element-2cfd4aa .sub-menu a.hfe-sub-menu-item{
display: flex !important;
align-items: flex-start !important;
text-align: left !important;
gap: 12px !important;
padding: 12px 10px !important;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 500;
line-height: 1.45;
color: rgba(244,250,252,.75);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.elementor-element-2cfd4aa .sub-menu a.hfe-sub-menu-item:hover{
background: rgba(255,255,255,.06);
color: var(--dv-teal-light);
}
.elementor-element-2cfd4aa .sub-menu a.hfe-sub-menu-item::before{
content: "" !important;
position: static !important;
width: 5px !important;
height: 5px !important;
min-width: 5px !important;
border-radius: 50% !important;
background: var(--dv-teal) !important;
flex-shrink: 0;
margin: 7px 0 0 0 !important;
}
.elementor-element-2cfd4aa .sub-menu a.hfe-sub-menu-item:hover::before{
background: var(--dv-teal-light) !important;
}
/* ======================================================
7) RESPONSIVE
====================================================== */
@media (max-width: 1024px){
/* backdrop-filter en un ancestro atrapa cualquier hijo
position:fixed (el panel flyout de HFE) dentro del header
en vez de cubrir la pantalla. En mobile/tablet usamos un
tinte navy sólido más opaco en vez de blur. */
.elementor-element-7612252,
.elementor-element-7612252.is-scrolled{
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.elementor-element-7612252{
background: rgba(8,26,33,.35);
}
.elementor-element-7612252.is-scrolled{
background: rgba(8,26,33,.92);
}
.elementor-element-7612252 > .e-con-inner{
padding: 12px 18px !important;
}
.elementor-element-e60137d{ gap: 14px; }
.elementor-element-7612252,
.elementor-element-7612252 > .e-con-inner,
.elementor-element-e60137d,
.elementor-element-ac5ca5a,
.elementor-element-625a3df,
.elementor-element-bbf3576{
flex-direction: row !important;
flex-wrap: nowrap !important;
height: auto !important;
min-height: 0 !important;
}
.elementor-element-bbf3576{ gap: 10px; }
}
@media (max-width: 480px){
.elementor-element-bf48889 img{ height: 36px; }
.elementor-element-5a77d46 a.glink span{ display: none; } /* deja solo la bandera */
}
/* ======================================================
NOTA — Fuentes:
NOTA — el script de scroll que ya tenías (widget HTML
51b3427) sigue funcionando igual, no hace falta cambiarlo:
document.addEventListener('DOMContentLoaded', function () {
var header = document.querySelector('.elementor-element-7612252');
if (!header) return;
window.addEventListener('scroll', function () {
header.classList.toggle('is-scrolled', window.scrollY > 40);
});
});
====================================================== *//* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-5a77d46 *//* ═══════════════ 5) SELECTOR DE IDIOMA (GTranslate, widget 5a77d46) ═══════════════
Concepto: brújula. Un dial circular fijo con las dos banderas
ancladas como puntos cardinales (izquierda/derecha) y una aguja
en el centro que rota para apuntar hacia el idioma activo — como
el instrumento de un explorador, coherente con la marca. */
.elementor-element-5a77d46 .gtranslate_wrapper{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(47,192,208,.1), transparent 70%),
rgba(8,26,33,.75);
border: 1px solid rgba(47,192,208,.35);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Marcas tipo "rosa de los vientos" — 4 rayitas cada 90° */
.elementor-element-5a77d46 .gtranslate_wrapper::before{
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background:
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px) 50% 0 / 1px 5px no-repeat,
linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px) 50% 100% / 1px 5px no-repeat,
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px) 0 50% / 5px 1px no-repeat,
linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px) 100% 50% / 5px 1px no-repeat;
}
/* Cada bandera = un punto cardinal fijo (izquierda / derecha) */
.elementor-element-5a77d46 .glink{
position: absolute;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
text-decoration: none;
z-index: 2;
}
.elementor-element-5a77d46 .glink:first-child{ left: 1px; }
.elementor-element-5a77d46 .glink:last-child{ right: 1px; }
.elementor-element-5a77d46 .glink img{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
filter: grayscale(85%);
opacity: .55;
transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.elementor-element-5a77d46 .glink span{ display: none; }
.elementor-element-5a77d46 .glink:hover img{
filter: grayscale(0%);
opacity: .85;
transform: scale(1.1);
}
/* Bandera activa: siempre nítida a color */
.elementor-element-5a77d46 .glink.gt-current-lang img{
filter: grayscale(0%);
opacity: 1;
}
/* La aguja: pseudo-elemento centrado que rota según qué lado
sea el idioma activo. Usa :has() para leer cuál tiene
la clase gt-current-lang sin tocar el HTML. */
.elementor-element-5a77d46 .gtranslate_wrapper::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 13px;
background: linear-gradient(var(--dv-teal), var(--dv-teal-light));
border-radius: 2px;
transform-origin: 50% 100%;
transform: translate(-50%, -100%) rotate(-90deg);
box-shadow: 0 0 6px rgba(47,192,208,.7);
transition: transform .5s cubic-bezier(.34,1.56,.64,1);
z-index: 1;
}
/* Si el idioma activo es el primero (izquierda) → aguja apunta izq. */
.elementor-element-5a77d46 .gtranslate_wrapper:has(.glink:first-child.gt-current-lang)::after{
transform: translate(-50%, -100%) rotate(-90deg);
}
/* Si el idioma activo es el segundo (derecha) → aguja apunta der. */
.elementor-element-5a77d46 .gtranslate_wrapper:has(.glink:last-child.gt-current-lang)::after{
transform: translate(-50%, -100%) rotate(90deg);
}
/* Punto central de la brújula, sobre la aguja */
.elementor-element-5a77d46 .gtranslate_wrapper{
isolation: isolate;
}
.elementor-element-5a77d46 .gtranslate_wrapper:hover{
border-color: rgba(47,192,208,.6);
}
/* Ocultar visualmente el widget nativo de Google Translate,
accesible para lectores de pantalla */
.elementor-element-5a77d46 #google_translate_element2{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}/* End custom CSS */