/* ============================================================================ Interactik Agency — control de idioma y región ---------------------------------------------------------------------------- CSS propio a propósito: no usa utilidades de Tailwind, así que agregar o cambiar cosas acá NO obliga a recompilar css/agency-tailwind.css. Lo cargan las cuatro páginas del sitio. ========================================================================== */ /* Mientras se aplica el inglés, la página queda oculta para que no se vea el español un instante. El pone y saca esta clase; i18n.js la saca al terminar y hay un plazo de gracia por si el JS falla. */ html.i18n-pendiente body { visibility: hidden; } /* Bloques que solo corresponden a una región. */ html.region-usa [data-region="latam"], html.region-latam [data-region="usa"] { display: none !important; } /* ── Control ─────────────────────────────────────────────────────────────── */ .ik-locale { position: relative; display: inline-flex; flex-shrink: 0; } .ik-locale__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; font-family: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 0.18s, border-color 0.18s; -webkit-tap-highlight-color: transparent; } .ik-locale__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(0, 230, 118, 0.45); } .ik-locale__globo { font-size: 0.9rem; line-height: 1; } .ik-locale__flecha { opacity: 0.5; font-size: 0.6rem; transition: transform 0.18s; } .ik-locale__btn[aria-expanded="true"] .ik-locale__flecha { transform: rotate(180deg); } /* ── Menú ────────────────────────────────────────────────────────────────── */ .ik-locale__menu { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60; min-width: 12.5rem; padding: 0.55rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.14); background: #0d0d0f; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.72); } .ik-locale__titulo { margin: 0.35rem 0.5rem 0.3rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } .ik-locale__opcion { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-radius: 0.55rem; background: transparent; color: rgba(255, 255, 255, 0.72); font-family: inherit; font-size: 0.82rem; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; } .ik-locale__opcion:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .ik-locale__opcion.is-elegido { color: #00e676; background: rgba(0, 230, 118, 0.1); } /* Tilde de la opción activa, sin depender de una librería de íconos. */ .ik-locale__opcion.is-elegido::after { content: "✓"; font-size: 0.8rem; line-height: 1; } .ik-locale__sep { height: 1px; margin: 0.45rem 0.3rem; background: rgba(255, 255, 255, 0.09); } /* ── Dentro del cajón móvil: ocupa el ancho y abre hacia arriba ──────────── */ .agency-mobile-drawer__inner .ik-locale { display: block; width: 100%; } .agency-mobile-drawer__inner .ik-locale__btn { width: 100%; justify-content: center; padding: 0.85rem 1rem; font-size: 0.85rem; border-radius: 0.75rem; } .agency-mobile-drawer__inner .ik-locale__menu { position: static; width: 100%; min-width: 0; margin-top: 0.45rem; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .ik-locale__btn, .ik-locale__opcion, .ik-locale__flecha { transition: none; } }