/* =====================================================
   ÁLVORA — HEADER (VERSIÓN DEFINITIVA)
   HOME ELLIMAN + RESTO SITE
===================================================== */

/* =====================================================
   TOPBAR — solo selector de idioma
===================================================== */

.alv-topbar {
  background: #172534;
  height: 36px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 101;
}

.alv-topbar-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
}

.alv-topbar-search,
.alv-topbar-flag {
  display: inline-flex;
  align-items: center;
  color: #faf9f7;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.alv-topbar-search:hover,
.alv-topbar-flag:hover {
  opacity: 1;
}
.alv-topbar-flag svg {
  display: block;
  border-radius: 2px;
}

/* Icono de bandera: se muestra la bandera del idioma AL QUE SE CAMBIARÁ.
   is-active la pone/quita header.php via JS al traducir. */
#alv-lang-toggle .alv-flag-es,
#alv-lang-toggle-mobile .alv-flag-es {
  display: none;
}
#alv-lang-toggle.is-active .alv-flag-en,
#alv-lang-toggle-mobile.is-active .alv-flag-en {
  display: none;
}
#alv-lang-toggle.is-active .alv-flag-es,
#alv-lang-toggle-mobile.is-active .alv-flag-es {
  display: block;
}
.alv-topbar-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alv-topbar-lang__item {
  font-family: "Jost", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, 0.5);
  text-decoration: none;
  transition: color 0.15s;
}

.alv-topbar-lang__item:hover,
.alv-topbar-lang__item.is-active {
  color: #faf9f7;
}

.alv-topbar-lang__sep {
  font-size: 11px;
  color: rgba(250, 249, 247, 0.25);
  line-height: 1;
}

/* Home modo A — topbar gestionada por JS */
body.alv-home:not(.alv-elliman-b) .alv-topbar {
  /* JS gestiona background y position */
}

/* RESET LOCAL */
.alv-header,
.alv-header * {
  box-sizing: border-box;
  overflow: visible;
}

.alv-header a {
  text-decoration: none;
}

/* HEADER BASE — DEFAULT (LISTADO / FICHA / RESTO) */
.alv-header {
  position: sticky;
  top: 36px; /* altura de la topbar */
  width: 100%;
  z-index: 100;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(23, 37, 52, 0.07);
}
/* =====================================================
   FUERA DE HOME: sin topbar propia -- la lupa y la bandera
   se integran en la fila del header desde el inicio
===================================================== */
body:not(.alv-home) .alv-topbar {
  position: static;
  height: 0;
  min-height: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none;
}
body:not(.alv-home) .alv-topbar-inner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 72px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 105;
  pointer-events: none;
}
/* Tarea 51: .alv-topbar-inner es position:fixed y por eso ignora la
   admin bar de WP (32px desktop / 46px movil), a diferencia de
   .alv-header que es sticky y si la respeta en reposo. Sin esto,
   antes de hacer scroll la lupa/bandera quedan ~32px mas arriba
   que el menu (se corrige solo al hacer scroll). */
body.admin-bar:not(.alv-home) .alv-topbar-inner {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar:not(.alv-home) .alv-topbar-inner {
    top: 46px;
  }
}
body:not(.alv-home) .alv-topbar-inner > * {
  pointer-events: auto;
}
body:not(.alv-home) .alv-topbar-search,
body:not(.alv-home) .alv-topbar-flag {
  color: #1E293B !important;
}
body:not(.alv-home) .alv-header {
  top: 0;
}
body:not(.alv-home) .alv-header-inner {
  padding-right: 96px;
  padding-left: 96px;
}

/* CONTENEDOR INTERNO */
.alv-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

/* =====================================================
   LOGO CENTRADO REAL
===================================================== */

.alv-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.alv-logo img {
  height: 72px;
  width: auto;
  display: block;

  transition: filter 0.9s ease;
}

/* =====================================================
   MENÚS
===================================================== */

.alv-menu-left {
  justify-self: start;
  z-index: 10;
}
.alv-menu-right {
  justify-self: end;
  z-index: 10;
}

.alv-menu-left ul,
.alv-menu-right ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =====================================================
   SUBMENÚS (DESKTOP)
===================================================== */

.alv-menu-left li,
.alv-menu-right li {
  position: relative;
}

.alv-menu-left li > ul.sub-menu,
.alv-menu-right li > ul.sub-menu {
  position: absolute;
  top: 100%;
  min-width: 200px;
  padding: 8px 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .3s, pointer-events 0s linear .3s;
  z-index: 2000;
  background: #fff;
  border-top: 1px solid #e8e4de;
  border-bottom: 1px solid #e8e4de;
  border-left: 1px solid #e8e4de;
  border-right: 1px solid #e8e4de;
  box-shadow: 0 4px 16px rgba(23, 37, 52, 0.07);
  list-style: none;
  border-radius: 0;
}

/* Menú izquierdo — abre hacia la derecha */
.alv-menu-left li > ul.sub-menu {
  left: 0;
  right: auto;
}

/* Menú derecho — abre hacia la izquierda */
.alv-menu-right li > ul.sub-menu {
  right: 0;
  left: auto;
}

/* Submenús de segundo nivel — mismo criterio */
.alv-menu-left ul.sub-menu li > ul.sub-menu,
nav.alv-menu-left ul.sub-menu li > ul.sub-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .3s, pointer-events 0s linear .3s;
  position: absolute;
  top: 0;
  left: 100%;
  right: auto;
  min-width: 200px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #e8e4de;
  box-shadow: 0 4px 16px rgba(23, 37, 52, 0.07);
  list-style: none;
  z-index: 2001;
  border-radius: 0;
}

.alv-menu-right ul.sub-menu li > ul.sub-menu,
nav.alv-menu-right ul.sub-menu li > ul.sub-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .3s, pointer-events 0s linear .3s;
  position: absolute;
  top: 0 !important;
  right: 100% !important;
  left: auto !important;
  min-width: 200px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #e8e4de;
  box-shadow: 0 4px 16px rgba(23, 37, 52, 0.07);
  list-style: none;
  z-index: 2001;
  border-radius: 0;
}

.alv-menu-left li:hover > ul.sub-menu,
.alv-menu-right li:hover > ul.sub-menu,
.alv-menu-left ul.sub-menu li:hover > ul.sub-menu,
.alv-menu-right ul.sub-menu li:hover > ul.sub-menu,
.alv-menu-left .menu-item-has-children:hover > ul.sub-menu,
.alv-menu-right .menu-item-has-children:hover > ul.sub-menu,
nav.alv-menu-right ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
nav.alv-menu-left ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .15s ease !important;
}

/* Items del submenú */
.alv-menu-left ul.sub-menu li,
.alv-menu-right ul.sub-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.alv-menu-left ul.sub-menu li a,
.alv-menu-right ul.sub-menu li a {
  display: block;
  padding: 9px 20px;
  font-family: "Jost", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #172534 !important;
  text-decoration: none;
  transition:
    color 0.15s,
    background 0.15s;
  white-space: nowrap;
}

.alv-menu-left ul.sub-menu li a:hover,
.alv-menu-right ul.sub-menu li a:hover {
  color: #fff !important;
  background: #172534;
}

/* MOBILE: fuera submenús
   BUG corregido: este breakpoint estaba en 1024px pero la hamburguesa
   solo aparece por debajo de 900px (ver @media max-width:900px más
   abajo). Entre 900px y 1024px (portátiles pequeños, ventanas no
   maximizadas) ni el submenú de escritorio ni el menú móvil eran
   accesibles: "Propiedades" no mostraba las zonas al hacer hover
   porque el submenú ya estaba oculto por esta regla, y la hamburguesa
   todavía no había aparecido. Se iguala el breakpoint a 900px para que
   ambos mecanismos se releven sin hueco. */
@media (max-width: 900px) {
  .alv-menu-left ul.sub-menu,
  .alv-menu-right ul.sub-menu {
    display: none !important;
  }
}

/* HOME · ESTADO INICIAL — todo gestionado por JS */
body.alv-home:not(.alv-elliman-b) .alv-header {
  /* JS gestiona position, background, transform, box-shadow */
}

/* LOGO BLANCO SOLO EN ESTADO INICIAL */
body.alv-home:not(.alv-elliman-b) .alv-logo img {
  filter: brightness(0) invert(1);
}

/* Menú blanco sobre hero */
body.alv-home:not(.alv-elliman-b) .alv-menu-left ul > li > a,
body.alv-home:not(.alv-elliman-b) .alv-menu-right ul > li > a {
  color: #ffffff !important;
}

/* =========================================================
   HOME · ESTADO FINAL
   Header vuelve a su sitio, limpio
========================================================= */

body.alv-home.alv-elliman-b .alv-header {
  /* JS gestiona el modo B */
}

/* LOGO NORMAL (modo B) */
body.alv-home.alv-elliman-b .alv-logo img {
  filter: none;
}
/* Logo en modo A: el JS lo gestiona, aquí solo el color blanco */
body.alv-home:not(.alv-elliman-b) .alv-logo img {
  filter: brightness(0) invert(1);
}

/* =====================================================
   HAMBURGUESA + MENÚ MÓVIL
===================================================== */

/* Ocultar hamburguesa en desktop */
.alv-hamburger {
  display: none !important;
}

/* Ocultar menú móvil en desktop */
.alv-mobile-menu {
  display: none !important;
}

/* Ocultar lupa duplicada por defecto (BUG corregido: esta regla vivía
   solo dentro del @media max-width:900px de abajo, así que en escritorio
   no había ninguna regla ocultándola — heredaba display:inline-flex del
   selector compartido .alv-topbar-search y se veía siempre, en cualquier
   página y tamaño, duplicada junto a la lupa del topbar). */
.alv-header-search {
  display: none !important;
}

@media (max-width: 900px) {
  /* Ocultar menús desktop */
  .alv-menu-left,
  .alv-menu-right {
    display: none !important;
  }

  /* Mostrar hamburguesa */
  .alv-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
  }

  /* Lupa duplicada a la altura de la hamburguesa (mismo top:50%,
     espejada a la izquierda) — solo Home, la original del topbar
     se oculta ahí para no duplicar el icono visualmente. El
     display:none por defecto vive fuera de este media query, ver
     arriba junto a .alv-hamburger. */
  body.alv-home .alv-header-search {
    display: inline-flex !important;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
  }
  body.alv-home .alv-topbar-inner .alv-topbar-search {
    display: none !important;
  }

  /* Mostrar menú móvil */
  .alv-mobile-menu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
  }
  .alv-hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #0e0e0e;
    transition:
      transform 0.25s ease,
      opacity 0.2s ease;
    transform-origin: center;
  }

  /* Estado abierto — X */
  .alv-hamburger.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .alv-hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .alv-hamburger.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* En ficha, hamburguesa oculta hasta que se hace scroll (igual que el nav) */
  body.page-ficha:not(.is-ficha-scrolled) .alv-hamburger {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.page-ficha.is-ficha-scrolled .alv-hamburger {
    opacity: 1;
    pointer-events: auto;
  }

  /* En ficha, hamburguesa blanca cuando el hero está visible */
  body.page-ficha:not(.is-ficha-scrolled) .alv-hamburger span {
    background: #fff;
  }

  /* Cuando el menú está abierto en la ficha, el header pasa a blanco */
  body.page-ficha:not(.is-ficha-scrolled) .alv-header:has(.alv-mobile-menu.is-open),
  body.page-ficha:not(.is-ficha-scrolled) .alv-header.menu-is-open {
    background: #fff !important;
  }
  body.page-ficha:not(.is-ficha-scrolled) .alv-header:has(.alv-mobile-menu.is-open) .alv-hamburger span,
  body.page-ficha:not(.is-ficha-scrolled) .alv-header.menu-is-open .alv-hamburger span {
    background: #0e0e0e;
  }
  body.page-ficha:not(.is-ficha-scrolled) .alv-header:has(.alv-mobile-menu.is-open) .alv-logo img,
  body.page-ficha:not(.is-ficha-scrolled) .alv-header.menu-is-open .alv-logo img {
    filter: none;
  }

  /* Menú móvil — panel completo
     BUG corregido: el border-top vivía en el estado base (siempre
     presente, incluso con max-height:0), así que se veía como una
     línea clara fija bajo la hamburguesa/lupa en Home móvil aunque el
     menú estuviera cerrado (overflow:hidden recorta el contenido pero
     no el borde de la caja). Se mueve el borde a .is-open, que es
     cuando el panel realmente está desplegado. */
  .alv-mobile-menu {
    background: #fff;
    transition: max-height 0.35s ease;
    z-index: 1100;
  }
  .alv-mobile-menu.is-open {
    max-height: 600px;
    border-top: 0.5px solid #e8e4de;
  }

  /* Acto 1 (Home, antes de hacer scroll / dockear): BUG corregido —
     la hamburguesa vive más abajo dentro del hero (no en el borde
     superior de la pantalla como en el resto de páginas), así que el
     panel desplegándose hacia abajo se salía por debajo de la ventana
     y no se veía completo. Aquí, y SOLO en este estado (Home sin la
     clase .alv-elliman-b que añade el JS al dockear), el panel se
     desancla del flujo normal y se fija al borde inferior de la
     ventana, así que crece hacia ARRIBA en vez de hacia abajo. En el
     resto de páginas / tras dockear (modo B) no se toca nada: sigue
     desplegando hacia abajo como hasta ahora, que es como Gonzalo lo
     confirmó correcto. */
  body.alv-home:not(.alv-elliman-b) .alv-mobile-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    max-height: 0;
    overflow-y: auto;
  }
  body.alv-home:not(.alv-elliman-b) .alv-mobile-menu.is-open {
    max-height: 80vh;
    border-top: 0.5px solid #e8e4de;
  }
  .alv-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
  }
  .alv-mobile-menu__list--right {
    border-top: 0.5px solid #e8e4de;
  }
  .alv-mobile-menu__list li a {
    display: block;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0e0e0e;
    text-decoration: none;
    border-bottom: none;
    transition: background 0.15s;
  }
  .alv-mobile-menu__list li a:hover {
    background: #f5f3f0;
    opacity: 1;
  }

  /* Logo centrado en móvil */
  .alv-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .alv-logo img {
    height: 52px;
  }

  /* Header inner altura en móvil */
  .alv-header-inner {
    min-height: 60px;
    position: relative;
  }
  .alv-header {
    padding: 0 9px;
  }

  /* Topbar compacta en móvil — una sola línea, altura fija */
  .alv-topbar-inner {
    padding: 0 16px;
    height: 36px;
    gap: 8px;
  }
  .alv-topbar-left {
    gap: 6px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .alv-topbar-right {
    gap: 8px;
    font-size: 11px;
    flex-shrink: 0;
  }

  /* Ocultar email en móvil — solo teléfono */
  .alv-topbar-right a:first-child {
    display: none;
  }

  /* Ocultar "Venda con nosotros" en móvil muy pequeño */
  @media (max-width: 480px) {
    .alv-topbar-left a {
      display: none;
    }
    .alv-topbar-left .alv-sep {
      display: none;
    }
  }

  /* =====================================================
     BANDERA → DENTRO DEL MENÚ (todas las páginas, Home incluido)
     En Home, tras dockear (.alv-elliman-b), .alv-topbar-inner pasa
     a ocupar los mismos 72px que .alv-header y con z-index más alto
     (130 vs 110) — la bandera queda pintada literalmente encima de
     la hamburguesa y le roba el clic. En vez de perseguir el layout
     en cada estado del efecto Elliman, se aplica el mismo criterio
     que ya funciona en el resto del sitio: la bandera desaparece del
     topbar en móvil y vive siempre dentro de .alv-mobile-menu.
  ===================================================== */
  .alv-topbar-flag {
    display: none !important;
  }

  .alv-mobile-menu__lang {
    display: block;
    border-top: 0.5px solid #e8e4de;
    padding: 4px 0 8px;
  }
  .alv-mobile-menu__lang a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0e0e0e;
    text-decoration: none;
    transition: background 0.15s;
  }
  .alv-mobile-menu__lang a:hover {
    background: #f5f3f0;
  }
  .alv-mobile-menu__lang svg {
    display: block;
    border-radius: 2px;
    flex-shrink: 0;
  }
}

/* Corrige el offset sticky de la barra de filtros del listado (Tarea 37):
   antes asumia topbar(36px)+header(72px)=108px; ahora el header en paginas
   no-Home no tiene topbar y mide ~72px desde top:0, asi que los filtros
   deben pegarse justo debajo, sin hueco. Se sobreescribe con !important
   porque la regla de 108px vive en CSS Adicional del Personalizador,
   que se carga despues en el <head>. */
body:not(.alv-home) .alv-filters-shell {
  top: 72px !important;
}

/* En móvil el header mide ~62px (no 72px) — .alv-header-inner pasa a
   min-height:60px y el logo a 52px. Con el top:72px de arriba, los
   filtros se pegaban 10px más abajo de donde termina el header de
   verdad, dejando un hueco por el que se veía la imagen de la card
   pasando por detrás al hacer scroll (detectado en QA móvil). */
@media (max-width: 900px) {
  body:not(.alv-home) .alv-filters-shell {
    /* header real: 61.5px. Se redondea hacia abajo (61px, no 62px)
       para pisar medio píxel en vez de dejarlo — un hueco de 0.5px
       se nota como línea en pantallas retina, un solape de 0.5px no. */
    top: 61px !important;
  }
}


/* ___________________________________________________________
   SUBMENÚS MÓVIL (acordeón) — antes MADRID / Barrio de Salamanca
   etc. no se podían desplegar en tactil, porque los desplegables
   de escritorio usan :hover, que no existe en touch. Se oculta el
   <ul class="sub-menu"> anidado por defecto y se muestra con la
   flechita (.alv-mobile-submenu-toggle, ver functions.php) que
   añade .is-open al <li> padre.
___________________________________________________________ */
@media (max-width: 900px) {
  .alv-mobile-menu .menu-item-has-children {
    position: relative;
  }
  .alv-mobile-menu .menu-item-has-children > a {
    padding-right: 40px !important;
    display: inline-block;
  }
  .alv-mobile-menu ul.sub-menu {
    display: none;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    list-style: none !important;
    padding-left: 16px !important;
    margin: 8px 0 0 !important;
    min-width: 0 !important;
    z-index: auto !important;
  }
  /* El punto de cada submenú se dibuja a mano (en vez del bullet nativo
     del navegador, que quedaba desalineado y muy separado del texto).
     padding-left se reduce a 20px (antes 24px heredado de
     .alv-mobile-menu__list li a) para que el hueco punto→texto sea
     normal; el desplazamiento de 16px por nivel (arriba) ya deja el
     punto justo debajo de la primera letra del nivel padre. */
  .alv-mobile-menu ul.sub-menu > li > a {
    position: relative;
    padding-left: 20px !important;
  }
  .alv-mobile-menu ul.sub-menu > li > a::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
    transform: translateY(-50%);
  }
  .alv-mobile-menu li.menu-item-has-children.is-open > ul.sub-menu {
    display: block;
  }
  .alv-mobile-submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .alv-mobile-submenu-toggle span {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
  }
  .alv-mobile-submenu-toggle span::before,
  .alv-mobile-submenu-toggle span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  /* Barra horizontal — siempre visible (forma la "−") */
  .alv-mobile-submenu-toggle span::before {
    width: 9px;
    height: 1.25px;
  }
  /* Barra vertical — visible en reposo (junto a la horizontal forma el "+"),
     se desvanece y rota al abrir para dejar solo la "−" */
  .alv-mobile-submenu-toggle span::after {
    width: 1.25px;
    height: 9px;
  }
  .alv-mobile-submenu-toggle.is-open span::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }
}

/* GOOGLE TRANSLATE - ocultar toda su interfaz nativa (widget, barra
   superior, iframe de highlight) - solo se usa el <select> interno,
   nunca se ve nada propio de Google.
   AVISO 21/08/2026: Google renombra sus clases internas de vez en
   cuando (antes .goog-te-banner-frame, ahora tambien aparece como
   iframe.skiptranslate con clases hasheadas tipo VIpgJd-ZVi9od-*).
   Verificado en vivo que la barra "Translation in progress" / 
   "Translated to: English" se quedaba visible tapando el menu -
   causa raiz del bug reportado en iPad/iPhone ("un menu de Google
   que no te deja ver ni utilizar nuestro menu"). Por eso ahora se
   ocultan TODOS los iframes con class skiptranslate (selector
   estable que Google no ha cambiado), ademas de los nombres legacy
   por si vuelven a aparecer. Ver tarjeta Trello 128. */
iframe.skiptranslate,
iframe[class*="skiptranslate"],
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-te-spinner-frame,
.goog-te-gadget-icon,
#goog-gt-tt,
#google_translate_element {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}
body {
  top: 0 !important; /* Google suele empujar el body 40px al activarse */
  position: static !important;
}
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}