/* ============================================================
   invictusdev.com.br — acréscimos ao CSS original
   ------------------------------------------------------------
   O site foi exportado do Next.js e o CSS veio minificado, sem fonte.
   Em vez de mexer naquele arquivo (que não dá para reconstruir), tudo o
   que é novo mora aqui, carregado depois dele.

   Contém:
     1. Tema claro (o escuro continua sendo o original)
     2. Botão de troca de tema, com sol e lua animados
     3. Botão de login do cliente
     4. Estados do formulário de contato (enviando, enviado, erro)
     5. Lista de opções própria, no lugar da do navegador
     6. Instagram no rodapé
   ============================================================ */

/* ------------------------------------------------------------------
   1. TEMA CLARO

   O tema escuro é o padrão e não mexemos nele. O claro redefine as cores
   sob [data-tema="claro"]. A transição fica no <html> para a troca ser
   suave em tudo de uma vez, em vez de cada elemento por si.
   ------------------------------------------------------------------ */
html { color-scheme: dark; }
html[data-tema="claro"] { color-scheme: light; }

html.tema-trocando,
html.tema-trocando body,
html.tema-trocando .header,
html.tema-trocando .service-card,
html.tema-trocando .contact-form,
html.tema-trocando .field input,
html.tema-trocando .field select,
html.tema-trocando .field textarea,
html.tema-trocando .cta,
html.tema-trocando .deliverables,
html.tema-trocando .brand-board,
html.tema-trocando .different,
html.tema-trocando .principle-strip,
html.tema-trocando .result,
html.tema-trocando .about-brand {
  transition: background-color .38s ease, color .38s ease,
              border-color .38s ease !important;
}

html[data-tema="claro"] {
  --bg: #FBFCFE;
  --surface: #FFFFFF;
  --line: #E3E8F0;
  --text: #121620;
  --muted: #555F70;
  --blue: #1E52D4;
  --accent: #2764f5;
}

/* --- as regras do site original que têm cor escrita à mão --- */
/* O <html> tambem precisa da cor: quando a pagina e mais curta que a tela
   (ou no efeito de rolagem elastica), o que aparece e o fundo dele, nao o do
   body — e ficava uma tarja preta embaixo do rodape. */
html[data-tema="claro"] { background: #FBFCFE; }
html[data-tema="claro"] body { background: var(--bg); color: var(--text); }
html[data-tema="claro"] p { color: var(--muted); }
html[data-tema="claro"] ::selection { background: #2764f5; color: #fff; }
html[data-tema="claro"] :focus-visible { outline: 3px solid #2764f5; }

html[data-tema="claro"] .header { background: #fbfcfef5; border-bottom-color: var(--line); }
/* A .nav só tem fundo e borda quando vira menu sanfona (abaixo de 780px).
   No computador ela é transparente — pintar de branco criava uma caixa
   visível em volta dos links. */
@media (max-width: 780px) {
  html[data-tema="claro"] .nav { background: #fff; border-bottom-color: var(--line); }
}
html[data-tema="claro"] .logo-dev { color: #3B4557; }
html[data-tema="claro"] .nav > a:not(.button) { color: #3F4A5C; }
html[data-tema="claro"] .nav > a:hover,
html[data-tema="claro"] .nav > a[aria-current] { color: #0C1320; }
html[data-tema="claro"] .menu-toggle { color: var(--text); border-color: var(--line); }

html[data-tema="claro"] .eyebrow { color: #4A5568; }
html[data-tema="claro"] .hero-foot { color: #4E586A; }

html[data-tema="claro"] .brand-board {
  background: radial-gradient(at 50% 45%, #DCE7FF 0%, #EFF3FB 48%, #F7F9FD 80%);
  border-color: #C8D6F0;
}
html[data-tema="claro"] .board-top,
html[data-tema="claro"] .board-bottom { color: #46587C; }
html[data-tema="claro"] .board-bottom b { color: #6379a0; }
html[data-tema="claro"] .brand-frame { border-color: #5884d73d; }
html[data-tema="claro"] .hero-mark,
html[data-tema="claro"] .board-caption svg { color: #2D5FD8; }
html[data-tema="claro"] .corner { background: #DDE8FF; border-color: #2D5FD8; }

html[data-tema="claro"] .principle-strip { background: #F1F4FA; }
html[data-tema="claro"] .principle-strip .container { color: #4A5568; }

html[data-tema="claro"] .service-card { background: #fff; border-color: var(--line); }
html[data-tema="claro"] .service-card:hover { background: #F6F9FF; border-color: #7FA6F0; }
html[data-tema="claro"] .card-top span { color: #67717F; }
html[data-tema="claro"] .card-link { color: #2A3444; border-top-color: var(--line); }

html[data-tema="claro"] .different { background: #F1F4FA; }
html[data-tema="claro"] .value-list article { border-bottom-color: var(--line); }
html[data-tema="claro"] .process-mini article { border-top-color: #D3DAE6; }

html[data-tema="claro"] .cta { background: #E7EEFF; border-color: #B9CCF4; }
html[data-tema="claro"] .cta p { color: #3B4A66; }

html[data-tema="claro"] .footer { border-top-color: var(--line); }
html[data-tema="claro"] .footer-grid > div > a:not(:first-child) { color: #4A5568; }
html[data-tema="claro"] .footer-bottom { color: #5A6472; border-top-color: var(--line); }

html[data-tema="claro"] .about-brand { background: #E7EEFF; border-color: #B9CCF4; }
html[data-tema="claro"] .about-brand svg { color: #2D5FD8; }

html[data-tema="claro"] .service-index a { color: #2A3444; border-color: #D3DAE6; }
html[data-tema="claro"] .service-index a:hover { color: #0C1320; border-color: var(--blue); }
html[data-tema="claro"] .service-detail { border-top-color: var(--line); }
html[data-tema="claro"] .service-summary > .text-link { color: #1E52D4; }

html[data-tema="claro"] .deliverables { background: #F4F7FC; border-color: #DCE3EE; }
html[data-tema="claro"] .deliverables li { color: #3B4557; }

html[data-tema="claro"] .timeline article { border-top-color: var(--line); }
html[data-tema="claro"] .result { background: #F1F4FA; }

html[data-tema="claro"] .contact-expect { border-top-color: var(--line); }
html[data-tema="claro"] .contact-form { background: #fff; border-color: var(--line); }
html[data-tema="claro"] .field label { color: #1B2130; }
html[data-tema="claro"] .field label span { color: #67717F; }
html[data-tema="claro"] .field input,
html[data-tema="claro"] .field select,
html[data-tema="claro"] .field textarea {
  background: #FBFCFE; border-color: #CBD3E0; color: #121620;
}
html[data-tema="claro"] .field textarea::placeholder { color: #8A94A4; }
html[data-tema="claro"] .field input:hover,
html[data-tema="claro"] .field select:hover,
html[data-tema="claro"] .field textarea:hover { border-color: #8FA3C4; }
html[data-tema="claro"] .field-hint { color: #67717F; }
html[data-tema="claro"] .privacy-note a { color: #1E52D4; }

html[data-tema="claro"] .legal-pending { background: #EEF3FC; border-color: #C3D2EC; }
html[data-tema="claro"] .legal strong { color: #26324A; }
html[data-tema="claro"] .skip-link { background: #121620; color: #fff; }

/* o autopreenchimento do Chrome pinta tudo de amarelo por conta própria */
html[data-tema="claro"] .field input:-webkit-autofill {
  -webkit-text-fill-color: #121620;
  box-shadow: 0 0 0 100px #FBFCFE inset;
}
html:not([data-tema="claro"]) .field input:-webkit-autofill {
  -webkit-text-fill-color: #f2f5fa;
  box-shadow: 0 0 0 100px #0e121a inset;
}

/* ------------------------------------------------------------------
   2. BOTÃO DE TROCA DE TEMA

   Um botão só, com o sol e a lua empilhados no mesmo lugar. Trocar de
   tema gira e some um enquanto o outro gira e aparece — por isso parece
   que o sol virou lua, em vez de um sumir e outro piscar.
   ------------------------------------------------------------------ */
.tema-btn {
  position: relative; flex: none;
  width: 38px; height: 38px; padding: 0;
  display: inline-grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--text);
  transition: background-color .16s ease, border-color .16s ease;
}
.tema-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.tema-btn svg {
  grid-area: 1 / 1; width: 19px; height: 19px;
  transition: transform .42s cubic-bezier(.34, 1.4, .5, 1), opacity .3s ease;
}
/* no escuro mostramos a lua; no claro, o sol */
.tema-btn .ico-lua    { opacity: 1; transform: rotate(0) scale(1); }
.tema-btn .ico-sol    { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-tema="claro"] .tema-btn .ico-lua { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-tema="claro"] .tema-btn .ico-sol { opacity: 1; transform: rotate(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .tema-btn svg { transition: opacity .2s ease; }
  html.tema-trocando, html.tema-trocando * { transition: none !important; }
}

/* ------------------------------------------------------------------
   3. LOGIN DO CLIENTE
   ------------------------------------------------------------------ */
.login-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 10px;
  border: 1px solid var(--line); background: transparent;
  color: var(--text); text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: border-color .16s ease, background-color .16s ease;
}
.login-btn:hover { border-color: var(--blue); color: var(--blue); }
.login-btn svg { width: 16px; height: 16px; flex: none; }

/* os dois botões novos ficam juntos, no fim da barra */
.nav-extra { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 860px) {
  .login-btn span { display: none; }
  .login-btn { padding: .5rem; width: 38px; height: 38px;
               justify-content: center; }
}

/* ------------------------------------------------------------------
   4. FORMULÁRIO: ENVIANDO / ENVIADO / ERRO
   ------------------------------------------------------------------ */
.form-aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .95rem 1.1rem; border-radius: 12px; margin-bottom: 1.1rem;
  font-size: .95rem; line-height: 1.55;
}
.form-aviso svg { flex: none; width: 20px; height: 20px; margin-top: .1rem; }
.form-aviso b { display: block; margin-bottom: .15rem; }

.form-aviso--ok {
  background: #0F2E20; border: 1px solid #1F6B47; color: #A8E9C6;
}
html[data-tema="claro"] .form-aviso--ok {
  background: #E9F9F0; border-color: #A9DEC3; color: #14603C;
}

.form-aviso--erro {
  background: #33161A; border: 1px solid #7A2C36; color: #F2B8BE;
}
html[data-tema="claro"] .form-aviso--erro {
  background: #FDECEE; border-color: #F0B7BF; color: #8C2733;
}

/* o botão enquanto manda */
.button[data-enviando] { opacity: .65; pointer-events: none; }
.button .girando {
  width: 16px; height: 16px; flex: none;
  animation: gira 900ms linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* erro em um campo específico */
.field .erro-campo {
  display: block; margin-top: .3rem;
  font-size: .82rem; color: #F2B8BE;
}
html[data-tema="claro"] .field .erro-campo { color: #B3303F; }
.field [aria-invalid="true"] { border-color: #C2566B !important; }

/* a caixa antiga de "indisponível" some quando o JS assume o formulário */
.contact-form.js-pronto .availability { display: none; }

/* ------------------------------------------------------------------
   5. LISTA DE OPÇÕES PRÓPRIA

   O <select> do navegador abre uma lista do sistema operacional: branca no
   Windows mesmo com o site escuro, e sem nenhum estilo possível. Aqui o
   <select> de verdade continua existindo (é ele que envia e o que o leitor
   de tela lê), só fica escondido atrás deste.
   ------------------------------------------------------------------ */
.sel { position: relative; }
.sel select.sel__real {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.sel__campo {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; cursor: pointer; text-align: left; font: inherit;
  padding: .75rem .9rem; border-radius: 10px;
  color: #f2f5fa; background: #0e121a; border: 1px solid #3a4558;
  transition: border-color .14s ease;
}
html[data-tema="claro"] .sel__campo {
  color: #121620; background: #FBFCFE; border-color: #CBD3E0;
}
.sel__campo:hover { border-color: #7185a6; }
html[data-tema="claro"] .sel__campo:hover { border-color: #8FA3C4; }
.sel__campo:focus-visible { outline: 3px solid #94baff; outline-offset: 1px; }
.sel__campo[aria-expanded="true"] { border-color: var(--blue); }
.sel__seta { flex: none; width: 16px; height: 16px; transition: transform .18s ease; }
.sel__campo[aria-expanded="true"] .sel__seta { transform: rotate(180deg); }
.sel__vazio { color: #929daf; }
html[data-tema="claro"] .sel__vazio { color: #8A94A4; }

.sel__lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 5px);
  max-height: 260px; overflow-y: auto; padding: .3rem;
  border-radius: 11px; background: #12161e; border: 1px solid #3a4558;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  list-style: none; margin: 0;
}
html[data-tema="claro"] .sel__lista {
  background: #fff; border-color: #CBD3E0;
  box-shadow: 0 18px 40px rgba(20, 30, 50, .14);
}
.sel__lista[hidden] { display: none; }
.sel__op {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .65rem; border-radius: 8px; cursor: pointer;
  font-size: .94rem; color: #cfd6e2;
}
html[data-tema="claro"] .sel__op { color: #2A3444; }
.sel__op:hover, .sel__op.is-marcada { background: rgba(39, 100, 245, .18); color: #fff; }
html[data-tema="claro"] .sel__op:hover,
html[data-tema="claro"] .sel__op.is-marcada { background: #E7EEFF; color: #0C1320; }
.sel__op[aria-selected="true"] { font-weight: 700; }
.sel__op svg { width: 15px; height: 15px; flex: none; opacity: 0; }
.sel__op[aria-selected="true"] svg { opacity: 1; color: var(--blue); }

/* ------------------------------------------------------------------
   6. INSTAGRAM NO RODAPÉ
   ------------------------------------------------------------------ */
.rodape-redes { display: flex; gap: .55rem; margin-top: .9rem; }
.rede-link {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted);
  transition: color .16s ease, border-color .16s ease;
}
.rede-link:hover { color: var(--blue); border-color: var(--blue); }
.rede-link svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------
   7. LUGAR DOS BOTÕES NOVOS NA BARRA DE CIMA

   Eles ficam FORA do <nav>, porque abaixo de 780px a barra vira menu
   sanfona escondido e os botões sumiriam justo no celular, que é onde
   trocar de tema mais importa.
   ------------------------------------------------------------------ */
.nav-wrap { position: relative; }
.nav-extra { margin-left: auto; }

@media (max-width: 780px) {
  /* no celular: logo · botões · sanduíche */
  .nav-wrap { display: flex; align-items: center; gap: .5rem; }
  .nav-extra { margin-left: auto; order: 2; }
  .menu-toggle { order: 3; }
  .nav { order: 4; }
}
@media (min-width: 781px) {
  /* no computador: logo · links · botões */
  .nav-extra { margin-left: 22px; }
}

/* ─── as cidades de Rondônia no rodapé ───────────────────────────────
   Não é decoração: é o que dá ao Google um caminho para as 21 páginas de
   localidade, que antes tinham um link de entrada cada uma. Por isso mora
   no rodapé, que aparece em toda página.

   E é pequeno de propósito. Quem lê o site não veio atrás disso; um bloco
   grande de nomes de cidade no fim de toda página é justamente o que faz
   a coisa parecer página-ponte — para o leitor e para o Google. */
.rodape-cidades {
  /* só o vertical: o horizontal vem do .container, e escrever
     `padding: 1.1rem 0` zerava ele — o bloco saía desalinhado do resto
     do rodapé por 48px. */
  padding-block: 1.1rem 1.6rem;
  font-size: .78rem;
  line-height: 1.9;
  color: #78828F;
  letter-spacing: .005em;
}
.rodape-cidades span { color: #98A2B0; }
.rodape-cidades a { color: inherit; text-decoration: none; }
.rodape-cidades a:hover,
.rodape-cidades a:focus-visible { color: #fff; text-decoration: underline; }

html[data-tema="claro"] .rodape-cidades { color: #6B7480; }
html[data-tema="claro"] .rodape-cidades span { color: #545D6A; }
html[data-tema="claro"] .rodape-cidades a:hover,
html[data-tema="claro"] .rodape-cidades a:focus-visible { color: #121620; }

/* No celular a lista vira um parágrafo comprido de nomes. Mantém legível
   sem virar uma parede. */
@media (max-width: 560px) {
  .rodape-cidades { font-size: .74rem; line-height: 2; }
}

/* ─── o menu acompanha a rolagem ─────────────────────────────────────
   O cabeçalho era `position: relative`: rolou, sumiu, e para voltar ao
   menu a pessoa tinha que subir a página inteira. Em página longa — as de
   cidade têm mil e poucas palavras — isso é o caminho mais curto para a
   pessoa ir embora em vez de clicar em "Solicitar orçamento".

   O fundo já é 96% opaco (#0b0d11f5 / #fbfcfef5), então o texto que passa
   por baixo não atrapalha a leitura do menu. Não uso blur: no opaco ele
   não muda nada e custa composição em celular fraco.

   Cuidado que já custou caro neste projeto: `overflow-x: hidden` em <html>
   ou <body> mata `position: sticky` sem dar erro nenhum. Se um dia o menu
   parar de grudar, é isso — a correção é `overflow-x: clip`. */
.header {
  position: sticky;
  top: 0;
}

/* O painel do menu no celular abre por baixo do cabeçalho (position:
   absolute, top:77px). Com o cabeçalho grudado, ele passa a acompanhar a
   rolagem junto — e em tela baixa (celular deitado) precisa rolar sozinho
   em vez de ser cortado. */
@media (max-width: 780px) {
  .nav.is-open {
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ─── cabeçalho em tela estreita ─────────────────────────────────────
   A 320px o botão do menu passava 7px da borda direita e a página rolava
   de lado. Cabem: a marca, o botão de tema, a área do cliente e o menu —
   e a conta não fechava com 22px de recuo de cada lado. */
@media (max-width: 380px) {
  .header .container { padding-left: 14px; padding-right: 14px; }
  .header .logo { font-size: .88em; }
}

/* Alvo de toque: 44px é o mínimo para o dedo não errar. Os três botões do
   cabeçalho tinham 38 e 42. O ícone dentro continua do mesmo tamanho — o
   que cresce é a área que responde ao toque. */
.menu-toggle, .tema-btn, .login-btn {
  min-width: 44px;
  min-height: 44px;
}

/* ─── /onde-atendemos/: as vinte cidades ─────────────────────────────
   Era um <ul> dentro do bloco de texto: uma coluna estreita de vinte
   nomes, encostada no meio da página, com metade da tela vazia ao lado.
   Vira grade — e cada cidade carrega o que ela é, senão a página é só uma
   pilha de links, que não serve nem para quem lê nem para o Google.

   minmax(240px, 1fr): o mínimo em px NUNCA passa de 280 aqui, senão a
   grade não colapsa no celular e a página rola de lado. */
.onde-cidades { padding-block: 10px 30px; }
.onde-cidades > p { max-width: 62ch; }

.cidades-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 26px 0 22px;
}
.cidade-cartao {
  /* Mesma receita das caixas do painel: preenchimento bem leve por cima
     do fundo, borda de 1px e canto de 10px. Leve mesmo — a caixa é para
     separar uma cidade da outra, não para competir com o título. */
  display: block;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .028);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease,
              transform .18s ease;
}
.cidade-cartao strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.cidade-cartao span {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: #78828F;
}
.cidade-cartao:hover,
.cidade-cartao:focus-visible {
  border-color: var(--blue);
  background: rgba(38, 100, 245, .07);
  transform: translateY(-2px);
}

html[data-tema="claro"] .cidade-cartao {
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 22, 32, .04);
}
html[data-tema="claro"] .cidade-cartao span { color: #67717F; }
html[data-tema="claro"] .cidade-cartao:hover,
html[data-tema="claro"] .cidade-cartao:focus-visible {
  background: #F4F7FC;
  box-shadow: 0 4px 14px rgba(18, 22, 32, .07);
}

/* Quem pediu menos movimento não leva o empurrãozinho. */
@media (prefers-reduced-motion: reduce) {
  .cidade-cartao { transition: none; }
  .cidade-cartao:hover, .cidade-cartao:focus-visible { transform: none; }
}

/* As vizinhas no pé da página de cidade: linha corrida, discreta. */
.cidades-perto { font-size: .9rem; line-height: 1.9; }

/* ------------------------------------------------------------------
   7. BOTÃO FLUTUANTE DO WHATSAPP
   Escuro: pastilha grafite com o ícone verde. Claro: pastilha branca.
   Ao passar o mouse (ou focar), vira verde cheio e mostra o rótulo.
   ------------------------------------------------------------------ */
.whats-flutuante {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0;
  min-width: 56px; height: 56px; padding: 0 16px; border-radius: 28px;
  background: #151A23; color: #25D366;
  border: 1px solid #2E3541;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  text-decoration: none; font: 600 .9rem/1 system-ui, sans-serif;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.whats-flutuante svg { flex: none; width: 26px; height: 26px; }
.whats-flutuante__rotulo {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .25s ease, opacity .2s ease, margin .25s ease;
}
.whats-flutuante:hover, .whats-flutuante:focus-visible {
  background: #25D366; color: #07210F; border-color: #25D366;
  transform: translateY(-2px);
}
.whats-flutuante:hover .whats-flutuante__rotulo,
.whats-flutuante:focus-visible .whats-flutuante__rotulo {
  max-width: 11rem; opacity: 1; margin-left: .6rem;
}
.whats-flutuante:focus-visible { outline: 3px solid var(--blue, #71a3ff); outline-offset: 3px; }

html[data-tema="claro"] .whats-flutuante {
  background: #fff; color: #128C4A; border-color: #D6DEEA;
  box-shadow: 0 8px 22px rgba(18, 22, 32, .16);
}
html[data-tema="claro"] .whats-flutuante:hover,
html[data-tema="claro"] .whats-flutuante:focus-visible {
  background: #128C4A; color: #fff; border-color: #128C4A;
}
html[data-tema="claro"] .whats-flutuante:focus-visible { outline-color: #2764f5; }

@media (hover: none) { .whats-flutuante__rotulo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .whats-flutuante, .whats-flutuante__rotulo { transition: none; }
  .whats-flutuante:hover, .whats-flutuante:focus-visible { transform: none; }
}
@media print { .whats-flutuante { display: none; } }