/* ═══════════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA ES / EN
   Configuración extraída del proyecto mitoti.com (probada en
   producción) y adaptada a la paleta de Ori Memories.

   Dos responsabilidades:
     1) dar estilo a las banderas;
     2) ocultar POR COMPLETO la interfaz del motor de traducción
        (barra superior, globos, tooltips, resaltados).
   ═══════════════════════════════════════════════════════════════ */

/* Sin contenedor: las banderas se apoyan directamente en el
   encabezado, sin píldora gris ni anillo de color. Las dos van
   siempre a todo color (nada de escala de grises, que es lo que
   las volvía invisibles); la activa se distingue por opacidad
   plena y una barra dorada debajo. El filete oscuro del SVG
   recorta la bandera de EE. UU. sobre el encabezado claro. */
.idioma{
  display:flex;align-items:center;gap:.6rem;flex:none;
  padding:0;background:none;border:none;
}

.idioma__btn{
  position:relative;display:block;
  width:32px;height:22px;padding:0;border:0;background:none;cursor:pointer;
  opacity:.5;
  transition:opacity .25s var(--ease,ease),transform .25s var(--ease,ease);
}
.idioma__btn svg{
  display:block;width:100%;height:100%;border-radius:3px;
  box-shadow:0 1px 4px rgba(11,25,44,.3),inset 0 0 0 1px rgba(11,25,44,.22);
}
.idioma__btn:hover{opacity:1;transform:translateY(-1px)}
.idioma__btn.activo{opacity:1}

/* Barra dorada de la bandera activa: crece desde el centro */
.idioma__btn::after{
  content:"";position:absolute;left:50%;bottom:-6px;
  width:0;height:2px;border-radius:2px;background:var(--gold,#C9A227);
  transform:translateX(-50%);
  transition:width .25s var(--ease,ease);
}
.idioma__btn.activo::after{width:100%}

.idioma__btn:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:4px;border-radius:3px}

/* Bloquea clics mientras el motor arranca */
.idioma.ocupado .idioma__btn{pointer-events:none;opacity:.3}

@media (max-width:900px){
  .idioma{margin-left:auto}
}

/* ═══════════════════════════════════════════════════════════════
   OCULTAR LA INTERFAZ DEL PROVEEDOR
   El contenedor del motor se oculta con style="display:none" EN EL
   HTML. No se toca desde aquí: una regla con !important sobre
   #google_translate_element puede impedir que el widget se
   construya, y si no se construye, las banderas no hacen nada.
   ═══════════════════════════════════════════════════════════════ */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-ftab,
.goog-te-ftab-float,
.goog-te-balloon-frame,
.goog-te-menu-frame,
.goog-te-menu-value,
.goog-te-spinner-pos,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
#goog-gt-,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-xl07Ob-OEVmcd,
.VIpgJd-ZVi9od-vH1Gmf-ibnC6b,
iframe.skiptranslate{
  display:none!important;visibility:hidden!important;opacity:0!important;
  height:0!important;pointer-events:none!important;
}

/* Evita el empuje de 40px que la barra aplica al body */
body,body.translated-ltr,body.translated-rtl{top:0!important;position:static!important}

/* Quita el resaltado amarillo sobre el texto traducido */
.goog-text-highlight{background:none!important;box-shadow:none!important;border:none!important;box-sizing:content-box!important}

/* El nombre de marca, los precios y el logo no se traducen */
.notranslate{unicode-bidi:normal}