/* =========================================================
SURF HOSSEGOR
MENÚ ASTRA COMPLETO
ESCRITORIO + TABLETA + MÓVIL
Color principal del logotipo:
#00B8E9
========================================================= */
/* =========================================================
1. VERSIÓN DE ORDENADOR
========================================================= */
@media (min-width: 922px) {
/* —————————————————–
MENÚ PRINCIPAL
—————————————————– */
.ast-desktop .main-header-menu {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 18px !important;
}
.ast-desktop .main-header-menu > .menu-item {
position: relative !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Enlaces principales */
.ast-desktop
.main-header-menu
> .menu-item
> .menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 12px 0 !important;
white-space: nowrap !important;
line-height: 1.3 !important;
z-index: 2 !important;
}
/* —————————————————–
SUBMENÚS
—————————————————– */
.ast-desktop
.main-header-menu
> .menu-item
> .sub-menu {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
width: max-content !important;
min-width: 250px !important;
max-width: calc(100vw – 40px) !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.10),
0 2px 8px rgba(0, 0, 0, 0.05) !important;
box-sizing: border-box !important;
z-index: 99999 !important;
}
/* —————————————————–
ELEMENTOS DE LOS SUBMENÚS
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
> .menu-item {
display: block !important;
position: relative !important;
float: none !important;
clear: both !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
}
/* —————————————————–
ENLACES DE LOS SUBMENÚS
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
float: none !important;
clear: both !important;
width: 100% !important;
height: auto !important;
min-height: 42px !important;
margin: 0 !important;
padding: 10px 14px !important;
box-sizing: border-box !important;
white-space: nowrap !important;
line-height: 1.35 !important;
color: #222222 !important;
background: transparent !important;
text-decoration: none !important;
border: 0 !important;
border-radius: 8px !important;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease !important;
}
/* —————————————————–
EFECTO HOVER DE LOS SUBMENÚS
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:hover,
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:focus {
background: #eaf9fd !important;
color: #007fa3 !important;
transform: translateX(2px) !important;
text-decoration: none !important;
}
/* Pequeña barra turquesa al pasar el cursor */
.ast-desktop
.main-header-menu
.sub-menu
.menu-link::before {
content: « » !important;
display: block !important;
width: 0 !important;
height: 18px !important;
margin-right: 0 !important;
background: #00b8e9 !important;
border-radius: 10px !important;
opacity: 0 !important;
transition:
width 0.18s ease,
margin-right 0.18s ease,
opacity 0.18s ease !important;
}
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:hover::before,
.ast-desktop
.main-header-menu
.sub-menu
.menu-link:focus::before {
width: 3px !important;
margin-right: 8px !important;
opacity: 1 !important;
}
/* —————————————————–
ELIMINACIÓN DE LOS BORDES DE ASTRA
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.menu-item {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* —————————————————–
SUBSUBMENÚS
—————————————————– */
.ast-desktop
.main-header-menu
.sub-menu
.sub-menu {
position: absolute !important;
top: -8px !important;
left: calc(100% + 8px) !important;
width: max-content !important;
min-width: 250px !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: 12px !important;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.10),
0 2px 8px rgba(0, 0, 0, 0.05) !important;
z-index: 100000 !important;
}
/* —————————————————–
MENÚS CERCA DEL BORDE DERECHO
—————————————————– */
.ast-desktop
.main-header-menu
> .menu-item:nth-last-child(-n+2)
> .sub-menu {
left: auto !important;
right: 0 !important;
}
/* —————————————————–
FLECHAS DE LOS MENÚS DE ESCRITORIO
—————————————————– */
.ast-desktop
.main-header-menu
.menu-item-has-children
> .menu-link {
gap: 7px !important;
}
.ast-desktop
.main-header-menu
.menu-item-has-children
> .menu-link
.dropdown-menu-toggle {
margin: 0 !important;
padding: 0 !important;
}
}
/* =========================================================
2. VERSIÓN MÓVIL / TABLETA
========================================================= */
@media (max-width: 921px) {
/* =====================================================
RESTABLECIMIENTO GLOBAL DEL MENÚ MÓVIL
===================================================== */
.ast-mobile-popup-drawer *,
.ast-mobile-popup-drawer *::before,
.ast-mobile-popup-drawer *::after {
box-sizing: border-box !important;
}
/* =====================================================
PANEL MÓVIL
===================================================== */
.ast-mobile-popup-drawer {
overflow: hidden !important;
}
.ast-mobile-popup-drawer
.ast-mobile-popup-inner {
width: min(90vw, 380px) !important;
max-width: 380px !important;
overflow: hidden !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
/* =====================================================
CONTENIDO DEL PANEL
===================================================== */
.ast-mobile-popup-drawer
.ast-mobile-popup-content {
padding: 14px 16px 28px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
background: #ffffff !important;
box-sizing: border-box !important;
scrollbar-width: none !important;
}
.ast-mobile-popup-drawer
.ast-mobile-popup-content::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* =====================================================
BOTÓN X PARA CERRAR EL PANEL
===================================================== */
.ast-mobile-popup-drawer
.menu-toggle-close {
min-height: 62px !important;
margin: 0 !important;
padding: 14px 18px !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #edf2f4 !important;
box-shadow: none !important;
}
.ast-mobile-popup-drawer
.menu-toggle-close
.ast-mobile-svg {
width: 18px !important;
height: 18px !important;
fill: #2b3035 !important;
}
/* =====================================================
ESTRUCTURA DEL MENÚ
===================================================== */
.ast-mobile-popup-drawer
.main-navigation,
.ast-mobile-popup-drawer
.ast-builder-menu-mobile,
.ast-mobile-popup-drawer
.main-header-menu {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
.ast-mobile-popup-drawer
.main-header-menu,
.ast-mobile-popup-drawer
.main-navigation
ul {
list-style: none !important;
}
/* =====================================================
ELEMENTOS DEL MENÚ
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item {
position: relative !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-sizing: border-box !important;
}
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item {
margin-bottom: 10px !important;
}
/* =====================================================
ENLACES PRINCIPALES
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item
> .menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
min-height: 54px !important;
margin: 0 !important;
padding: 13px 16px !important;
color: #20262b !important;
background: #ffffff !important;
font-size: 16.5px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
white-space: normal !important;
text-decoration: none !important;
border: 1px solid #e1e9ed !important;
border-radius: 14px !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.035) !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease !important;
}
/* Deja espacio para el botón redondo */
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item-has-children
> .menu-link {
padding-right: 62px !important;
}
/* =====================================================
ELIMINACIÓN DE LAS FLECHAS NATIVAS DE ASTRA
===================================================== */
.ast-mobile-popup-drawer
.menu-item-has-children
> .menu-link
.dropdown-menu-toggle {
display: none !important;
}
.ast-mobile-popup-drawer
.menu-item-has-children
> .menu-link::after {
display: none !important;
content: none !important;
}
/* =====================================================
BOTÓN ÚNICO DE APERTURA / CIERRE
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 8px !important;
right: 10px !important;
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
font-size: 0 !important;
line-height: 1 !important;
appearance: none !important;
-webkit-appearance: none !important;
background: #eefbfe !important;
color: #008fb5 !important;
border: 1px solid #b8eaf5 !important;
border-radius: 50% !important;
box-shadow: none !important;
outline: none !important;
scrollbar-width: none !important;
cursor: pointer !important;
z-index: 10 !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease !important;
}
/* Elimina cualquier barra de desplazamiento del botón */
.ast-mobile-popup-drawer
.ast-menu-toggle::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* =====================================================
OCULTA COMPLETAMENTE EL ICONO DE ASTRA
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
svg,
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
.ast-mobile-svg,
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
.ast-icon,
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle
span:not(.screen-reader-text) {
display: none !important;
}
/* =====================================================
NUESTRO CHEVRÓN CSS
ESTADO CERRADO = FLECHA HACIA ABAJO
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle::after {
content: « » !important;
display: block !important;
width: 8px !important;
height: 8px !important;
margin-top: -4px !important;
border: solid #00a9d6 !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
transform-origin: center !important;
transition:
transform 0.20s ease,
border-color 0.18s ease !important;
}
/* =====================================================
MENÚ ABIERTO
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle[aria-expanded= »true »] {
background: #00b8e9 !important;
border-color: #00b8e9 !important;
box-shadow:
0 3px 10px rgba(0, 184, 233, 0.20) !important;
}
/* Chevrón hacia arriba */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle[aria-expanded= »true »]::after {
margin-top: 4px !important;
border-color: #ffffff !important;
transform: rotate(-135deg) !important;
}
/* Compatibilidad con Astra que utiliza .focus */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children.focus
> .ast-menu-toggle {
background: #00b8e9 !important;
border-color: #00b8e9 !important;
box-shadow:
0 3px 10px rgba(0, 184, 233, 0.20) !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children.focus
> .ast-menu-toggle::after {
margin-top: 4px !important;
border-color: #ffffff !important;
transform: rotate(-135deg) !important;
}
/* Efecto al hacer clic */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle:active {
transform: scale(0.94) !important;
}
/* Foco de teclado */
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle:focus {
outline: none !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.menu-item-has-children
> .ast-menu-toggle:focus-visible {
outline: 2px solid rgba(0, 184, 233, 0.30) !important;
outline-offset: 2px !important;
}
/* =====================================================
EFECTO HOVER DE LAS ENTRADAS PRINCIPALES
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item
> .menu-link:hover,
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item
> .menu-link:focus {
background: #f5fcfe !important;
border-color: #b9eaf5 !important;
color: #007fa3 !important;
box-shadow:
0 4px 12px rgba(0, 184, 233, 0.07) !important;
}
/* =====================================================
ENTRADA ACTIVA / MENÚ ABIERTO
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
> .current-menu-item
> .menu-link,
.ast-mobile-popup-drawer
.main-header-menu
> .current-menu-ancestor
> .menu-link,
.ast-mobile-popup-drawer
.main-header-menu
> .menu-item.focus
> .menu-link {
background: #eefbfe !important;
border-color: #9ee2f2 !important;
color: #007f9f !important;
box-shadow:
0 4px 14px rgba(0, 184, 233, 0.08) !important;
}
/* =====================================================
SUBMENÚ
IMPORTANTE:
PERMANECE EN EL FLUJO DE LA PÁGINA
POR LO TANTO, SIN SUPERPOSICIÓN
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
margin: 8px 0 2px !important;
padding: 7px !important;
overflow: visible !important;
background: #f5fbfd !important;
border: 1px solid #dceff4 !important;
border-radius: 12px !important;
box-shadow: none !important;
box-sizing: border-box !important;
z-index: auto !important;
}
/* =====================================================
ELEMENTOS DE LOS SUBMENÚS
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-item {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* =====================================================
ENLACES DE LOS SUBMENÚS
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link {
display: flex !important;
align-items: center !important;
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 44px !important;
margin: 0 !important;
padding: 11px 13px 11px 22px !important;
background: transparent !important;
color: #26343b !important;
font-size: 15.5px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
white-space: normal !important;
text-decoration: none !important;
border: 0 !important;
border-radius: 9px !important;
box-shadow: none !important;
box-sizing: border-box !important;
transition:
background-color 0.18s ease,
color 0.18s ease !important;
}
/* Pequeña barra turquesa delante de los subenlaces */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link::before {
content: « » !important;
position: absolute !important;
top: 50% !important;
left: 7px !important;
width: 3px !important;
height: 16px !important;
transform: translateY(-50%) !important;
background: #00b8e9 !important;
border-radius: 99px !important;
opacity: 0.35 !important;
}
/* Hover del submenú */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link:hover,
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.menu-link:focus {
background: #e7f8fc !important;
color: #007f9f !important;
}
/* Página activa en un submenú */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.current-menu-item
> .menu-link {
background: #e7f8fc !important;
color: #007f9f !important;
font-weight: 500 !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.current-menu-item
> .menu-link::before {
opacity: 1 !important;
}
/* =====================================================
SUBSUBMENÚS
===================================================== */
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.sub-menu {
position: static !important;
width: 100% !important;
margin: 5px 0 4px !important;
padding: 5px !important;
background: #ffffff !important;
border: 1px solid #e7f1f4 !important;
border-radius: 10px !important;
box-shadow: none !important;
}
.ast-mobile-popup-drawer
.main-header-menu
.sub-menu
.sub-menu
.menu-link {
padding-left: 27px !important;
font-size: 15px !important;
}
}