/* Oculta el selector de banderas original de GTranslate (sigue activo, solo no se muestra) */ li.menu-item-gtranslate { display: none !important; } /* * El widget clásico de Google Translate a veces inserta su propia barra * arriba de la página y empuja el hacia abajo con un estilo en línea * (top/position), tanto al traducir como al volver al idioma original. Esto * es justo lo que se percibe como "el menú baja unos pixeles". Lo anulamos * con !important para que nuestro switch sea la única fuente de verdad * visual, y ocultamos cualquier banner/iframe que Google intente mostrar. */ html body { top: 0 !important; position: static !important; } .skiptranslate, #google_translate_element2, iframe.goog-te-banner-frame, .goog-te-banner-frame { display: none !important; height: 0 !important; visibility: hidden !important; } /* * El texto en inglés (p.ej. "Inspection And Surveillance") es más largo que * el original en español y, por default, el menú hace flex-wrap a una * segunda línea al traducir, empujando el resto de la página hacia abajo. * Evitamos el salto: no permitimos wrap y recortamos un poco el espacio * entre ítems para que quepan ambos idiomas en una sola línea; si aun así * no cupiera, se desliza horizontalmente en vez de romper el layout. */ @media (min-width: 992px) { .navbar-header-wrap .nav.navbar-nav { flex-wrap: nowrap; /* OJO: nunca poner overflow-x sin overflow-y aquí — recorta los submenús desplegables (dropdowns), que necesitan salirse de este contenedor hacia abajo para poder verse. */ } .navbar-header-wrap .nav.navbar-nav > li { margin-right: 20px; flex-shrink: 0; } } .fonmar-lang-switch-item { display: flex; align-items: center; } .fonmar-lang-switch { position: relative; display: inline-flex; align-items: center; width: 64px; height: 30px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: transparent; cursor: pointer; font-family: inherit; transition: border-color 0.25s ease, background-color 0.25s ease; } .fonmar-lang-switch:hover { border-color: rgba(255, 255, 255, 0.8); } .fonmar-lang-switch-option { position: relative; z-index: 2; flex: 1; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.85); transition: color 0.25s ease; } .fonmar-lang-switch-thumb { position: absolute; top: 2px; left: 2px; width: calc(50% - 2px); height: calc(100% - 4px); border-radius: 999px; background: #fff; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; } .fonmar-lang-switch[data-current="en"] .fonmar-lang-switch-thumb { transform: translateX(100%); } .fonmar-lang-switch[data-current="es"] .fonmar-lang-switch-option[data-lang="es"], .fonmar-lang-switch[data-current="en"] .fonmar-lang-switch-option[data-lang="en"] { color: #10202b; } /* Variante para fondos claros (header no transparente / menú móvil abierto) */ .navbar-header-wrap.header-sticky-on .fonmar-lang-switch, .site-header:not(.transparent-header) .fonmar-lang-switch { border-color: rgba(0, 0, 0, 0.25); } .navbar-header-wrap.header-sticky-on .fonmar-lang-switch-option, .site-header:not(.transparent-header) .fonmar-lang-switch-option { color: rgba(0, 0, 0, 0.65); } @media (max-width: 991px) { .fonmar-lang-switch-item { padding: 10px 20px; } .fonmar-lang-switch-option { color: rgba(0, 0, 0, 0.65); } .fonmar-lang-switch { border-color: rgba(0, 0, 0, 0.25); } }