/* ========================================================================== Aiseguros Menu — Header / Navegación Principal + Mega-Menú Marca A&I Seguros: azul #075685 (primario) · azul claro #4ab3e7 (secundario) · verde #079239 (detalle/CTA). Tipografía Mona Sans. Layout inspirado en Bexon (botón pill con icono giratorio). Tokens scoped al componente. ========================================================================== */ .aiseguros-menu { /* --- Tokens locales (no afectan el resto del sitio) --- */ --aiseg-mona: 'Mona Sans', var(--aiseguros-font-body, sans-serif); --aiseg-accent: var(--aiseguros-color-secondary, #4ab3e7); --aiseg-accent-soft: rgba(74, 179, 231, 0.18); --aiseg-cta: var(--aiseguros-color-accent, #079239); --aiseg-dark: var(--aiseguros-color-dark, #04304a); --aiseg-body: var(--aiseguros-color-body, #364e52); --aiseg-muted: var(--aiseguros-color-muted, #67787a); --aiseg-grey-1: var(--aiseguros-color-surface, #eaf4fb); --aiseg-border: var(--aiseguros-color-border, #cfdde6); /* Barra flotante: separación de los bordes y radio de las esquinas. */ --aiseg-topbar-h: 38px; /* Aire entre la franja de contacto y la barra de vidrio del menú. */ --aiseg-topbar-space: 16px; --aiseg-bar-gap: 10px; --aiseg-bar-inset: clamp(12px, 2vw, 28px); --aiseg-bar-radius: 18px; position: relative; top: 0; width: 100%; z-index: 9999; background-color: transparent; transition: box-shadow 0.35s ease; } /* Capa de vidrio en un ::before, NO en el propio header. Motivo: `backdrop-filter` convierte al elemento en bloque contenedor de sus descendientes `position: fixed`. Si estuviera en `.aiseguros-menu`, el overlay móvil (fixed) quedaría contenido en los ~95px del header, tapando la barra e interceptando los clics. En el ::before, el header NO gana esa propiedad y el overlay vuelve a posicionarse respecto al viewport. */ .aiseguros-menu::before { content: ''; position: absolute; /* Arranca bajo la barra superior. Se anima `top` y no `inset` porque es una propiedad real y transiciona bien aunque su valor venga de un `calc()` con variable. */ top: calc(var(--aiseg-topbar-h, 0px) + var(--aiseg-topbar-space, 0px) + var(--aiseg-bar-gap)); right: var(--aiseg-bar-inset); bottom: var(--aiseg-bar-gap); left: var(--aiseg-bar-inset); z-index: -1; background-color: var(--aiseguros-glass-light, rgba(255, 255, 255, 0.72)); border: 1px solid var(--aiseguros-glass-border, rgba(255, 255, 255, 0.5)); border-radius: var(--aiseg-bar-radius); transition: background-color 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, top 0.35s ease; } /* * ⚠️ El desenfoque NO entra hasta que la página ha terminado de cargar. * * Esta barra es `sticky` y desenfoca lo que pasa por detrás. En cuanto llegan * las fotos grandes —hero o cabecera— el compositor tiene que recalcular ese * desenfoque, y ese trabajo frena el scroll UNA vez por carga, en TODAS las * páginas. Es el único elemento con `backdrop-filter` que aparece en todas. * * El fondo translúcido de arriba ya da el aspecto correcto mientras tanto, así * que al activarse no se ve un salto: sólo gana la nitidez del cristal. * `menu.js` pone la clase en el evento `load`. */ .aiseg-cargado .aiseguros-menu::before { -webkit-backdrop-filter: var(--aiseguros-glass-blur, blur(18px) saturate(160%)); backdrop-filter: var(--aiseguros-glass-blur, blur(18px) saturate(160%)); } .aiseguros-menu[data-sticky="1"] { position: sticky; } /* --- Sticky real --------------------------------------------------------- Un elemento sticky sólo se pega DENTRO de los límites de su contenedor. Aquí el contenedor (.elementor-widget-container) mide exactamente lo mismo que el header (~95px), así que no hay recorrido: el header se va con el scroll y el sticky "no funciona". La solución es pegar el WRAPPER del header (header#masthead que renderiza HFE), que es hijo directo de y por tanto tiene todo el alto de la página como bloque contenedor. Usamos :has() para aplicarlo sólo cuando dentro vive nuestro menú con sticky activado. Nota: HFE aplica `position: relative` al wrapper mediante un selector de ID (#masthead), que gana por especificidad. Por eso forzamos con !important, acotado sólo a los headers que contienen nuestro menú en modo sticky. ------------------------------------------------------------------------ */ body > header:has(.aiseguros-menu[data-sticky="1"]) { position: sticky !important; top: 0; z-index: 9999; /* Transparente para que el efecto glass de la barra difumine el contenido de la página que pasa por detrás, no un fondo del wrapper. */ background: transparent; } /* ========================================================================== Header transparente sobre el hero — SOLO en la home En la home el header se vuelve `fixed` para solapar el hero full-bleed y se muestra transparente con texto blanco mientras no hay scroll. Al hacer scroll (.is-scrolled) recupera el look glass claro con texto oscuro. ========================================================================== */ body.home > header:has(.aiseguros-menu[data-sticky="1"]) { position: fixed !important; /* Sin left/right, un elemento `fixed` se encoge al ancho de su contenido y se alinea a la izquierda (descentrando el header y el mega). Lo forzamos a ancho completo. */ left: 0; right: 0; width: 100%; } /* En el tope de la home: barra glass OSCURA (estilo Bexon) sobre el hero. Al hacer scroll recupera el glass claro (base). */ body.home .aiseguros-menu:not(.is-scrolled)::before { background-color: rgba(4, 48, 74, 0.38); border-color: rgba(255, 255, 255, 0.16); } /* Texto/elementos en blanco sobre el hero oscuro. */ body.home .aiseguros-menu:not(.is-scrolled) .aiseguros-menu__link { color: var(--aiseguros-color-white, #FFFFFF); } body.home .aiseguros-menu:not(.is-scrolled) .aiseguros-menu__link::after { background-color: var(--aiseguros-color-white, #FFFFFF); } body.home .aiseguros-menu:not(.is-scrolled) .aiseguros-menu__caret { border-top-color: var(--aiseguros-color-white, #FFFFFF); } body.home .aiseguros-menu:not(.is-scrolled) .aiseguros-menu__toggle-bar { background-color: var(--aiseguros-color-white, #FFFFFF); } /* Logo en blanco sobre la barra oscura (el logo ya es transparente, así que el filtro lo vuelve una silueta blanca limpia, sin recuadro). Al hacer scroll se quita el filtro y vuelve a color = más contraste sobre el glass claro. */ body.home .aiseguros-menu:not(.is-scrolled) .aiseguros-menu__logo img { filter: brightness(0) invert(1); } /* Al hacer scroll: el vidrio se vuelve más opaco (legibilidad) y la sombra acompaña la forma redondeada de la barra. */ .aiseguros-menu.is-scrolled::before { background-color: var(--aiseguros-glass-light-solid, rgba(255, 255, 255, 0.9)); box-shadow: 0 10px 30px rgba(4, 48, 74, 0.12); } .aiseguros-menu__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--aiseguros-space-lg, 32px); /* * El vertical es mayor que el `--aiseg-bar-gap` de la barra de vidrio para * que el logo respire dentro de ella (con 16px sólo quedaban 6px de aire). * * ⚠️ El HORIZONTAL se DERIVA de `--aiseg-bar-inset`, igual que en el tramo * de tableta. Con un `32px` fijo el aire dependía del ancho de pantalla: * el cristal empieza en `2vw` (hasta 28px), así que entre 1200 y 1400 —donde * el contenedor ya está a su ancho máximo y no queda margen extra— al logo * le quedaban 6px y parecía pegado al borde. Derivándolo son siempre 18. */ padding: 22px calc(var(--aiseg-bar-inset) + 18px); } /* ---------- Logo ---------- */ .aiseguros-menu__logo { display: flex; align-items: center; flex-shrink: 0; } .aiseguros-menu__logo img { display: block; width: 160px; height: auto; transition: width 0.3s ease, filter 0.35s ease; } /* ---------- Navegación (desktop) ---------- */ .aiseguros-menu__nav { flex-grow: 1; display: flex; justify-content: center; } .aiseguros-menu__list { display: flex; align-items: center; gap: var(--aiseguros-space-lg, 32px); list-style: none; margin: 0; padding: 0; } .aiseguros-menu__item { position: static; } .aiseguros-menu__link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--aiseg-mona); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--aiseguros-color-primary, #075685); text-decoration: none; position: relative; padding: var(--aiseguros-space-xs, 4px) 0; transition: color 0.25s ease; } .aiseguros-menu__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: var(--aiseg-accent); transition: width 0.25s ease; } .aiseguros-menu__link:focus-visible, .aiseguros-menu__item.is-current > .aiseguros-menu__link { color: var(--aiseg-accent); } /* ⚠️ El `:hover` sólo con puntero: en táctil iOS lo mantiene tras el toque y el ítem pulsado se queda marcado como si fuera la página actual. `.is-current` y `:focus-visible` van fuera de la guarda, que sí deben verse siempre. */ @media (hover: hover) { .aiseguros-menu__link:hover { color: var(--aiseg-accent); } } .aiseguros-menu__link:focus-visible::after, .aiseguros-menu__item.is-current > .aiseguros-menu__link::after { width: 100%; } @media (hover: hover) { .aiseguros-menu__link:hover::after { width: 100%; } } .aiseguros-menu__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.25s ease; } .aiseguros-menu__item--mega:hover .aiseguros-menu__caret, .aiseguros-menu__item--mega:focus-within .aiseguros-menu__caret, .aiseguros-menu__item--mega.is-mega-open .aiseguros-menu__caret { transform: rotate(180deg); } /* ========================================================================== Botón CTA — firma Bexon (pill + círculo oscuro con flecha giratoria) ========================================================================== */ .aiseguros-menu__actions { display: flex; align-items: center; gap: var(--aiseguros-space-md, 16px); flex-shrink: 0; } .aiseguros-menu__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: var(--aiseg-cta); font-family: var(--aiseg-mona); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: 5px 5px 5px 22px; border-radius: 50px; line-height: 1; overflow: hidden; white-space: nowrap; text-decoration: none; transition: background-color 0.3s ease; } .aiseguros-menu__cta--sm { font-size: 14px; padding: 4px 4px 4px 18px; } .aiseguros-menu__cta-text { color: var(--aiseguros-color-white, #FFFFFF); overflow: hidden; } .aiseguros-menu__cta-text span { display: flex; line-height: 1; text-shadow: 0 28px 0 var(--aiseguros-color-white, #FFFFFF); backface-visibility: hidden; transform: translateY(0); transition: transform 0.4s ease-in-out; } .aiseguros-menu__cta-icon { display: inline-flex; justify-content: center; align-items: center; font-size: 15px; line-height: 1; width: 38px; height: 38px; overflow: hidden; background-color: var(--aiseg-dark); border-radius: 50%; flex-shrink: 0; } .aiseguros-menu__cta--sm .aiseguros-menu__cta-icon { width: 32px; height: 32px; font-size: 13px; } .aiseguros-menu__cta-icon i { color: var(--aiseguros-color-white, #FFFFFF); transform: rotate(-45deg); transition: transform 0.3s ease-in-out; } .aiseguros-menu__cta:hover .aiseguros-menu__cta-text span, .aiseguros-menu__cta:focus-visible .aiseguros-menu__cta-text span { transform: translateY(-28px); } .aiseguros-menu__cta:hover .aiseguros-menu__cta-icon i, .aiseguros-menu__cta:focus-visible .aiseguros-menu__cta-icon i { transform: rotate(0deg); } /* ========================================================================== Mega-Menú (panel de seguros) ========================================================================== */ .aiseguros-menu__mega { position: absolute; top: calc(100% + 10px); left: 50%; /* Panel flotante CONTENIDO (no ancho completo), centrado bajo el header, con esquinas redondeadas — como la referencia Bexon. */ width: min(1120px, calc(100vw - 48px)); background-color: var(--aiseguros-glass-light-solid, rgba(255, 255, 255, 0.9)); -webkit-backdrop-filter: var(--aiseguros-glass-blur, blur(18px) saturate(160%)); backdrop-filter: var(--aiseguros-glass-blur, blur(18px) saturate(160%)); border: 1px solid var(--aiseg-accent-soft); border-radius: var(--aiseguros-border-radius-lg, 28px); box-shadow: var(--aiseguros-shadow-lg, 0 28px 60px rgba(4, 48, 74, 0.14)); opacity: 0; visibility: hidden; /* Cerrado: no debe capturar el puntero. Sin esto, el overlay absoluto (de ancho completo) se dibuja sobre el contenido de abajo y puede robar los clics — sobre todo dentro del editor de Elementor, donde impide soltar widgets en el lienzo. */ pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease; z-index: 9998; } /* Puente invisible que cubre el hueco entre el enlace y el panel, para que el :hover no se pierda al mover el cursor hacia abajo. */ .aiseguros-menu__mega::before { content: ''; position: absolute; left: 0; right: 0; top: -46px; height: 46px; } .aiseguros-menu__item--mega:hover .aiseguros-menu__mega, .aiseguros-menu__item--mega:focus-within .aiseguros-menu__mega, .aiseguros-menu__item--mega.is-mega-open .aiseguros-menu__mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .aiseguros-menu__mega-inner { max-width: 1280px; margin: 0 auto; padding: var(--aiseguros-space-lg, 32px); } .aiseguros-menu__mega-title { font-family: var(--aiseg-mona); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aiseg-muted); margin: 0 0 var(--aiseguros-space-md, 16px) 0; } .aiseguros-menu__mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aiseguros-space-sm, 8px); } .aiseguros-menu__mega-link { display: flex; align-items: flex-start; gap: var(--aiseguros-space-md, 16px); padding: var(--aiseguros-space-md, 16px); border-radius: var(--aiseguros-border-radius-card, 12px); text-decoration: none; transition: background-color 0.2s ease; } .aiseguros-menu__mega-link:focus-visible { background-color: var(--aiseg-grey-1); } /* * ⚠️ El `:hover` sólo donde hay puntero. Este fondo es gris claro —pensado para * el panel BLANCO de escritorio— y en el overlay oscuro dejaba el ítem en * blanco con el texto blanco encima: ilegible. En táctil iOS mantiene el * `:hover` después del toque, así que se quedaba así hasta tocar en otro sitio. */ @media (hover: hover) { .aiseguros-menu__mega-link:hover { background-color: var(--aiseg-grey-1); } } .aiseguros-menu__mega-icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--aiseg-border); color: var(--aiseguros-color-primary, #075685); font-size: 18px; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .aiseguros-menu__mega-icon svg { width: 18px; height: 18px; fill: currentColor; } .aiseguros-menu__mega-link:focus-visible .aiseguros-menu__mega-icon { background-color: var(--aiseg-accent); border-color: var(--aiseg-accent); color: var(--aiseguros-color-white, #FFFFFF); } @media (hover: hover) { .aiseguros-menu__mega-link:hover .aiseguros-menu__mega-icon { background-color: var(--aiseg-accent); border-color: var(--aiseg-accent); color: var(--aiseguros-color-white, #FFFFFF); } } .aiseguros-menu__mega-text { display: flex; flex-direction: column; gap: 3px; } .aiseguros-menu__mega-name { font-family: var(--aiseg-mona); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--aiseg-dark); transition: color 0.2s ease; } .aiseguros-menu__mega-link:focus-visible .aiseguros-menu__mega-name { color: var(--aiseg-accent); } @media (hover: hover) { .aiseguros-menu__mega-link:hover .aiseguros-menu__mega-name { color: var(--aiseg-accent); } } .aiseguros-menu__mega-desc { font-family: var(--aiseg-mona); font-size: 0.86rem; font-weight: 400; color: var(--aiseg-muted); line-height: 1.5; } /* ---------- Barra inferior del mega ---------- */ .aiseguros-menu__mega-footer { margin-top: var(--aiseguros-space-lg, 32px); padding-top: var(--aiseguros-space-md, 16px); border-top: 1px solid var(--aiseg-accent-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--aiseguros-space-md, 16px); flex-wrap: wrap; } .aiseguros-menu__mega-footer-copy { display: flex; align-items: center; gap: var(--aiseguros-space-md, 16px); } .aiseguros-menu__mega-footer-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background-color: var(--aiseg-accent); color: var(--aiseguros-color-white, #FFFFFF); display: flex; align-items: center; justify-content: center; font-size: 15px; } .aiseguros-menu__mega-footer-copy p { margin: 0; font-family: var(--aiseg-mona); font-size: 0.92rem; color: var(--aiseg-muted); } .aiseguros-menu__mega-footer-copy strong { color: var(--aiseg-dark); font-weight: 600; margin-right: 4px; } /* ========================================================================== Toggle (hamburguesa) ========================================================================== */ /* Especificidad elevada (.aiseguros-menu ...) para ganar al reset.css del tema Hello Elementor, que fuerza [type="button"]{display:inline-block}. */ .aiseguros-menu .aiseguros-menu__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; z-index: 1001; } .aiseguros-menu__toggle-bar { display: block; width: 26px; height: 2px; background-color: var(--aiseg-dark); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .aiseguros-menu.is-open .aiseguros-menu__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .aiseguros-menu.is-open .aiseguros-menu__toggle-bar:nth-child(2) { opacity: 0; } .aiseguros-menu.is-open .aiseguros-menu__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== Overlay móvil (pantalla completa) — fondo oscuro Bexon ========================================================================== */ .aiseguros-menu__overlay { position: fixed; inset: 0; /* * ⚠️ Fondo CASI OPACO, no translúcido al 85%. * * El aspecto de cristal no puede depender de que `backdrop-filter` componga: * en iOS no siempre lo hace sobre un `fixed` a pantalla completa, y entonces * se ve la página entera nítida por detrás en vez de un velo. Un menú de * navegación tiene que ser legible siempre, así que el color hace el trabajo * y el desenfoque queda como mejora donde funcione. */ background-color: rgba(4, 48, 74, 0.97); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); display: flex; flex-direction: column; align-items: center; /* OJO: no usar `justify-content: center`. Cuando el contenido es más alto que la pantalla (con el acordeón de seguros desplegado), el centrado deja la parte superior fuera de alcance y no se puede hacer scroll hasta ella. En su lugar se centra con márgenes automáticos, que sí permiten scroll. */ justify-content: flex-start; gap: var(--aiseguros-space-xl, 48px); padding: var(--aiseguros-space-xl, 48px) var(--aiseguros-space-lg, 32px); opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease; z-index: 1000; overflow-y: auto; } /* Los hijos del overlay no deben encogerse: al desplegarse el acordeón el contenido supera la altura de la pantalla y, por defecto (flex-shrink: 1), flexbox aplastaba el botón CTA (de 42px a 10px). */ .aiseguros-menu__overlay > * { flex-shrink: 0; } /* Centrado vertical cuando el contenido cabe; scroll completo cuando no. */ .aiseguros-menu__overlay > *:first-child { margin-top: auto; } .aiseguros-menu__overlay > *:last-child { margin-bottom: auto; } .aiseguros-menu.is-open .aiseguros-menu__overlay { opacity: 1; visibility: visible; transform: translateY(0); } .aiseguros-menu__overlay .aiseguros-menu__list { flex-direction: column; align-items: center; gap: var(--aiseguros-space-lg, 32px); } .aiseguros-menu__overlay .aiseguros-menu__link { font-family: var(--aiseg-mona); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--aiseguros-color-white, #FFFFFF); } .aiseguros-menu__overlay .aiseguros-menu__link::after { background-color: var(--aiseg-accent); } .aiseguros-menu__overlay .aiseguros-menu__link:focus-visible { color: var(--aiseg-accent); } @media (hover: hover) { .aiseguros-menu__overlay .aiseguros-menu__link:hover { color: var(--aiseg-accent); } } /* Mega en línea dentro del overlay. Ojo: visibility/pointer-events se activan SOLO cuando el menú móvil está abierto (.is-open). Si no, el mega del overlay quedaría visible e interactivo aunque el overlay esté cerrado y podría interceptar clics del contenido. */ .aiseguros-menu__overlay .aiseguros-menu__mega { position: static; width: auto; left: auto; opacity: 1; transform: none; box-shadow: none; border: none; border-radius: 0; background: transparent; /* * ⚠️ Cancelar TAMBIÉN el desenfoque, no sólo el fondo. El panel hereda * `backdrop-filter` de la regla base y quedaba un desenfoque ANIDADO dentro * del overlay —que ya está desenfocado—: se dibujaba como un recuadro azul * de otro tono, justo lo que quitaba sensación de acabado. */ -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: var(--aiseguros-space-md, 16px); } /* En el overlay el panel arranca PLEGADO: se despliega al pulsar "Seguros" (acordeón). Antes se mostraba siempre y ocupaba toda la pantalla. */ .aiseguros-menu__overlay .aiseguros-menu__mega { display: none; } .aiseguros-menu.is-open .aiseguros-menu__overlay .aiseguros-menu__item--mega.is-mega-open .aiseguros-menu__mega { display: block; visibility: visible; pointer-events: auto; } /* Las reglas de escritorio centran el panel con translateX(-50%). Dentro del overlay el panel es estático, así que ese transform lo desplazaría media pantalla a la izquierda al pasar el cursor: lo anulamos. */ .aiseguros-menu__overlay .aiseguros-menu__item--mega:hover .aiseguros-menu__mega, .aiseguros-menu__overlay .aiseguros-menu__item--mega:focus-within .aiseguros-menu__mega, .aiseguros-menu__overlay .aiseguros-menu__item--mega.is-mega-open .aiseguros-menu__mega { transform: none; } .aiseguros-menu__overlay .aiseguros-menu__mega::before { display: none; } .aiseguros-menu__overlay .aiseguros-menu__mega-inner { padding: 0; } .aiseguros-menu__overlay .aiseguros-menu__mega-title { color: rgba(255, 255, 255, 0.55); text-align: center; } .aiseguros-menu__overlay .aiseguros-menu__mega-grid { grid-template-columns: 1fr; gap: var(--aiseguros-space-xs, 4px); } .aiseguros-menu__overlay .aiseguros-menu__mega-name, .aiseguros-menu__overlay .aiseguros-menu__mega-icon { color: var(--aiseguros-color-white, #FFFFFF); } .aiseguros-menu__overlay .aiseguros-menu__mega-icon { border-color: rgba(255, 255, 255, 0.25); } .aiseguros-menu__overlay .aiseguros-menu__mega-desc { color: rgba(255, 255, 255, 0.7); } .aiseguros-menu__overlay .aiseguros-menu__mega-link:focus-visible { background-color: rgba(255, 255, 255, 0.06); } /* ⚠️ El `:hover` sólo donde hay puntero. En táctil iOS lo mantiene después del toque y el ítem pulsado se quedaba iluminado como si estuviera activo. */ @media (hover: hover) { .aiseguros-menu__overlay .aiseguros-menu__mega-link:hover { background-color: rgba(255, 255, 255, 0.06); } } .aiseguros-menu__overlay .aiseguros-menu__mega-footer { display: none; } /* CTA del overlay (pill blanco con círculo teal) */ .aiseguros-menu__overlay-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; background-color: var(--aiseguros-color-white, #FFFFFF); font-family: var(--aiseg-mona); font-size: 15px; font-weight: 600; padding: 5px 5px 5px 24px; border-radius: 50px; line-height: 1; overflow: hidden; white-space: nowrap; text-decoration: none; } .aiseguros-menu__overlay-cta .aiseguros-menu__cta-text { color: var(--aiseg-dark); } .aiseguros-menu__overlay-cta .aiseguros-menu__cta-text span { text-shadow: 0 28px 0 var(--aiseg-dark); } .aiseguros-menu__overlay-cta .aiseguros-menu__cta-icon { background-color: var(--aiseg-accent); } .aiseguros-menu__overlay-cta:hover .aiseguros-menu__cta-text span, .aiseguros-menu__overlay-cta:focus-visible .aiseguros-menu__cta-text span { transform: translateY(-28px); } .aiseguros-menu__overlay-cta:hover .aiseguros-menu__cta-icon i, .aiseguros-menu__overlay-cta:focus-visible .aiseguros-menu__cta-icon i { transform: rotate(0deg); } /* ---------- Contacto y redes dentro del menú móvil ---------- */ .aiseguros-menu__overlay-contact { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: var(--aiseguros-space-lg, 32px); margin-top: var(--aiseguros-space-sm, 8px); border-top: 1px solid rgba(255, 255, 255, 0.14); width: 100%; max-width: 320px; } .aiseguros-menu__overlay-phone { font-family: var(--aiseg-mona); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--aiseguros-color-white, #FFFFFF); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; } .aiseguros-menu__overlay-phone i, .aiseguros-menu__overlay-phone svg { width: 0.85em; height: 0.85em; color: var(--aiseg-accent); fill: currentColor; } .aiseguros-menu__overlay-address { margin: 0; font-family: var(--aiseg-mona); font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.66); } .aiseguros-menu__overlay-social { display: flex; align-items: center; gap: 12px; margin-top: var(--aiseguros-space-xs, 4px); } .aiseguros-menu__overlay-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.10); color: var(--aiseguros-color-white, #FFFFFF); font-size: 15px; text-decoration: none; transition: background-color 0.25s ease, transform 0.25s ease; } .aiseguros-menu__overlay-social a:hover, .aiseguros-menu__overlay-social a:focus-visible { background-color: var(--aiseg-accent); transform: translateY(-2px); } .aiseguros-menu__overlay-social i, .aiseguros-menu__overlay-social svg { width: 1em; height: 1em; fill: currentColor; } /* Bloqueo de scroll cuando el overlay está abierto */ body.aiseguros-menu-lock { overflow: hidden; } /* ========================================================================== Responsive Nota sobre el zoom del navegador: al hacer zoom (Ctrl/Cmd +) el navegador reduce el ancho del viewport en píxeles CSS, así que un zoom moderado puede cruzar estos breakpoints igual que una pantalla pequeña. Por eso el colapso a hamburguesa se mantiene lo más bajo posible (800px) y en el tramo intermedio el nav se "compacta" para sobrevivir a más niveles de zoom antes de esconderse. ========================================================================== */ /* Mega-grid a 2 columnas en pantallas medianas. */ @media (max-width: 1200px) { .aiseguros-menu__mega-grid { grid-template-columns: repeat(2, 1fr); } } /* --- Tramo compacto: el nav desktop sigue visible pero reduce su huella (gaps, tipografía y CTA) para caber en anchos menores y así resistir más zoom antes de colapsar a hamburguesa. --- */ @media (max-width: 1099px) { .aiseguros-menu__inner { gap: var(--aiseguros-space-md, 16px); /* * ⚠️ El relleno se DERIVA de `--aiseg-bar-inset`, no es un valor plano. * Con `16px` fijo el logo se salía por la izquierda entre 801 y 1099px: * ahí `--aiseg-bar-inset` vale `2vw` (18px a 900px), así que el cristal * empezaba 2px más adentro que el logo. Vertical 20px sobre un * `--aiseg-bar-gap` de 10px deja los mismos 10px de aire que abajo; * con 16px sólo quedaban 6. * * El sumando es 10px y no 18px como en el tramo de móvil: en la parte * baja de esta franja (801px, justo antes de la hamburguesa) el nav y * el CTA aún tienen que caber, y con +18 el botón se salía 2px. */ padding: 20px calc(var(--aiseg-bar-inset) + 10px); } .aiseguros-menu__list { gap: var(--aiseguros-space-md, 16px); } .aiseguros-menu__link { font-size: 0.9375rem; /* 15px */ } .aiseguros-menu__cta { font-size: 14px; padding: 4px 4px 4px 16px; } .aiseguros-menu__cta-icon { width: 32px; height: 32px; font-size: 13px; } } /* --- Colapso a hamburguesa: sólo en anchos realmente de tablet/móvil. (Antes era 991px, lo que ocultaba el menú desktop con poco zoom.) --- */ /* * ⚠️ También por ALTO. Un móvil en horizontal mide ~844×390: supera los 800px * de ancho, así que se llevaba la cabecera de escritorio —169px con la barra de * contacto— en una pantalla de 390 de alto. Casi la mitad del viewport en menú. * Con `(max-height: 500px)` se colapsa a hamburguesa, que es lo razonable ahí. */ @media (max-width: 800px), (max-height: 500px) { /* La barra de vidrio va con `inset`, así que el contenido necesita más padding que el propio inset para no quedar pegado a sus bordes. */ .aiseguros-menu__inner { padding: 20px calc(var(--aiseg-bar-inset) + 18px); } .aiseguros-menu__nav { display: none; } .aiseguros-menu__actions .aiseguros-menu__cta { display: none; } .aiseguros-menu .aiseguros-menu__toggle { display: flex; } } @media (max-width: 480px) { .aiseguros-menu { --aiseg-bar-gap: 8px; } .aiseguros-menu__inner { padding: 18px calc(var(--aiseg-bar-inset) + 16px); } .aiseguros-menu__logo img { width: 110px; } .aiseguros-menu__overlay .aiseguros-menu__link { font-size: 1.3rem; } } /* ========================================================================== Editor de Elementor Dentro del editor, el header no debe comportarse como sticky ni desplegar su mega-panel: ese overlay absoluto de ancho completo (z-index alto) se dibuja sobre el área de contenido y bloquea soltar widgets en el lienzo. El panel se sigue configurando desde los controles del widget, así que ocultar su render aquí no afecta la edición. ========================================================================== */ .elementor-editor-active .aiseguros-menu { position: static; } /* El sticky del wrapper tampoco debe activarse dentro del editor. */ body.elementor-editor-active > header:has(.aiseguros-menu) { position: relative; } .elementor-editor-active .aiseguros-menu__mega { display: none !important; } /* ========================================================================== Accesibilidad ========================================================================== */ @media (prefers-reduced-motion: reduce) { .aiseguros-menu, .aiseguros-menu__overlay, .aiseguros-menu__mega, .aiseguros-menu__link, .aiseguros-menu__link::after, .aiseguros-menu__caret, .aiseguros-menu__cta, .aiseguros-menu__cta-text span, .aiseguros-menu__cta-icon i, .aiseguros-menu__mega-link, .aiseguros-menu__mega-icon, .aiseguros-menu__mega-name, .aiseguros-menu__toggle-bar, .aiseguros-menu__overlay-cta { transition: none !important; } } /* ========================================================================== Barra superior de contacto Va por ENCIMA de la barra de vidrio, a todo el ancho. Al hacer scroll se pliega (alto 0) para que el header pegajoso ocupe sólo lo imprescindible: los datos de contacto interesan al aterrizar, no mientras se navega. ========================================================================== */ .aiseguros-menu__topbar { /* El contenedor de HFE mete 10px de relleno superior y ahí se veía una franja blanca sobre la barra. Se estira hacia arriba con margen negativo y se recupera con relleno, así queda pegada al borde sin alterar dónde empieza el menú: el alto en el flujo lo sigue marcando `--aiseg-topbar-h`. */ margin-top: calc(var(--aiseg-header-pad, 10px) * -1); padding-top: var(--aiseg-header-pad, 10px); /* A sangre: el contenedor de HFE deja ~53px a cada lado y la franja debe llegar al borde. Se sale de ese encajonado sin depender de cuánto relleno tenga el contenedor. ⚠️ Se usa `--aiseg-vw` (clientWidth, lo escribe menu.js) y NO `100vw`: `100vw` incluye la barra de scroll y en Windows/Linux provocaría scroll horizontal en todo el sitio. El `100vw` queda sólo de respaldo. */ margin-inline: calc(50% - var(--aiseg-vw, 100vw) / 2); overflow: hidden; /* Sólo abajo: arriba toca el borde de la ventana. */ margin-bottom: var(--aiseg-topbar-space); border-radius: 0 0 var(--aiseg-bar-radius) var(--aiseg-bar-radius); background-color: var(--aiseguros-color-dark, #04304a); color: rgba(255, 255, 255, 0.86); font-size: 0.78rem; transition: opacity 0.35s ease, margin-bottom 0.35s ease; } /* Es el interior el que se pliega, no la caja exterior. */ .aiseguros-menu__topbar-inner { height: var(--aiseg-topbar-h); transition: height 0.35s ease; } .aiseguros-menu.is-scrolled .aiseguros-menu__topbar { opacity: 0; } .aiseguros-menu.is-scrolled { --aiseg-topbar-h: 0px; /* El hueco se va con la franja: si no, quedaría un vacío sin nada dentro. */ --aiseg-topbar-space: 0px; } .aiseguros-menu__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin-inline: auto; padding-inline: calc(var(--aiseg-bar-inset) + 12px); } .aiseguros-menu__topbar-left, .aiseguros-menu__topbar-right { display: flex; align-items: center; gap: 20px; min-width: 0; } .aiseguros-menu__topbar-item { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aiseguros-menu__topbar-note { color: var(--aiseguros-color-secondary, #4ab3e7); font-weight: 600; /* ⚠️ Sin esto el relevo se recorta: `__topbar-item` trae `overflow: hidden` para truncar con puntos suspensivos, y el texto sólo mide 20px de alto, así que el desplazamiento de 7px se comería un tercio de la frase. Aquí no hace falta truncar: son frases cortas y es el último elemento. */ overflow: visible; /* Las frases tienen anchos distintos; sin esto la de al lado bailaría al cambiar. `will-change` mantiene el texto en su propia capa durante el relevo, que es cuando se nota el parpadeo. */ will-change: opacity, transform; } /* Relevo en dos tiempos: la frase sale hacia arriba y la siguiente entra desde abajo. Es el patrón de los teletipos y se lee como continuidad, no como un parpadeo. */ @keyframes aiseg-note-out { to { opacity: 0; transform: translateY(-7px); } } @keyframes aiseg-note-in { from { opacity: 0; transform: translateY(7px); } } .aiseguros-menu__topbar-note.is-saliendo { animation: aiseg-note-out 380ms cubic-bezier(0.33, 0, 0.67, 1) forwards; } .aiseguros-menu__topbar-note.is-entrando { animation: aiseg-note-in 380ms cubic-bezier(0.33, 0, 0.67, 1); } .aiseguros-menu__topbar-link { display: inline-flex; align-items: center; gap: 8px; color: var(--aiseguros-color-white, #FFFFFF); font-weight: 650; text-decoration: none; white-space: nowrap; transition: color 0.25s ease; } .aiseguros-menu__topbar-link:hover, .aiseguros-menu__topbar-link:focus-visible { color: var(--aiseguros-color-secondary, #4ab3e7); } /* Las redes van juntas: el `gap: 20px` del grupo derecho separa el teléfono del bloque de iconos, no los iconos entre sí. */ .aiseguros-menu__topbar-socials { display: inline-flex; align-items: center; gap: 12px; } .aiseguros-menu__topbar-social { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); color: var(--aiseguros-color-white, #FFFFFF); transition: background-color 0.25s ease, color 0.25s ease; } .aiseguros-menu__topbar-social:hover, .aiseguros-menu__topbar-social:focus-visible { background-color: var(--aiseguros-color-secondary, #4ab3e7); color: var(--aiseguros-color-dark, #04304a); } /* Elementor pinta los iconos como `

de "Seguros" pasa a ancho completo (lo * estira el panel de dentro) y su rótulo, alineado al inicio, se iba a la * izquierda mientras el resto seguía centrado. Se centra el enlace dentro del *

, no el texto: así el rótulo y su flecha viajan juntos. */ .aiseguros-menu__overlay .aiseguros-menu__item { display: flex; flex-direction: column; align-items: center; width: 100%; } .aiseguros-menu__overlay .aiseguros-menu__item > .aiseguros-menu__link { justify-content: center; } /* El panel sí ocupa todo el ancho disponible. */ .aiseguros-menu__overlay .aiseguros-menu__item--mega .aiseguros-menu__mega { width: 100%; } /* * Justo antes de la hamburguesa el contenido no cabe: a 801px logo + nav + CTA * suman 673px y con dos huecos de 16 piden 705, sobre 689 disponibles. El botón * se salía 6px del cristal. Se recorta el hueco entre bloques, que es lo menos * visible: el aire del logo y el tamaño del botón se conservan. */ @media (max-width: 940px) { .aiseguros-menu__inner { gap: 8px; } .aiseguros-menu__list { gap: 10px; } }