/* Nort: convite de idioma da primeira visita. Uma pílula navy no canto de baixo da tela, sem véu e sem travar a
   página: a pergunta gira entre os três idiomas num "flap" vertical, como um painel de aeroporto. */
.esc {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 96;
  display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; max-width: calc(100vw - 32px);
  background: var(--navy); color: var(--white); border-radius: var(--r-pill, 999px);
  box-shadow: 0 14px 34px rgba(32, 41, 76, 0.28);
  animation: esc-entra 560ms var(--ease) both;
}
.esc-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--electric); flex: none; animation: esc-pulso 2.6s ease-in-out infinite; }
.esc-frase { position: relative; display: block; height: 20px; min-width: 212px; overflow: hidden; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.esc-frase span { position: absolute; inset: 0; white-space: nowrap; animation: esc-flap-in 320ms var(--ease) both; }
.esc-frase span.sai { animation: esc-flap-out 320ms var(--ease) both; }
.esc-opcoes { display: flex; gap: 4px; }
.esc-op, .esc-x {
  height: 34px; min-width: 42px; padding: 0 12px; border: 0; border-radius: var(--r-pill, 999px); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.1); color: var(--white);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.esc-op:hover, .esc-op:focus-visible { background: var(--white); color: var(--navy); }
.esc-op.sugerida { background: var(--white); color: var(--navy); }
.esc-op.sugerida:hover { background: var(--voltage); color: var(--abyss); }
.esc-op:active, .esc-x:active { transform: scale(0.94); }
.esc-x { min-width: 34px; padding: 0; display: grid; place-items: center; background: transparent; }
.esc-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; opacity: 0.72; }
.esc-x:hover svg, .esc-x:focus-visible svg { opacity: 1; }
.esc-op:focus-visible, .esc-x:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
.esc.sai { animation: esc-sai 300ms cubic-bezier(0.7, 0, 0.84, 0) forwards; }
@keyframes esc-entra { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes esc-sai { to { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes esc-flap-in { from { opacity: 0; transform: translateY(100%); } }
@keyframes esc-flap-out { to { opacity: 0; transform: translateY(-100%); } }
@keyframes esc-pulso { 50% { box-shadow: 0 0 0 5px rgba(69, 154, 248, 0.22); } }
@media (max-width: 480px) {
  .esc { left: 12px; right: 12px; max-width: none; gap: 8px; padding-left: 14px; transform: none; animation-name: esc-entra-m; }
  .esc.sai { animation-name: esc-sai-m; }
  .esc-frase { min-width: 0; flex: 1; font-size: 14px; }
}
@keyframes esc-entra-m { from { opacity: 0; transform: translateY(24px); } }
@keyframes esc-sai-m { to { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .esc, .esc.sai, .esc-frase span, .esc-ponto { animation: none; }
}