/* Eagle AI — folha do produto.
   Promove a tela de `demo/eagle-ai/demo.css`, que o operador validou, para o vocabulário do
   CONTRATO DE INTERFACE (docs/PLANO-EAGLE-AI-INTERFACE.md). Mesma linguagem visual — Saira
   Condensed nos títulos, Barlow no texto, #C8102E como único acento, fundo claro, cartão de
   raio grande —, nomes novos.

   Duas regras que explicam quase todo o resto:

   1. TUDO é prefixado `--eai-` / `.eai-`. A Área de Conhecimento traz os seus próprios tokens
      (`--linha`, `--superficie`, `--vermelho`) e as duas folhas podem coexistir numa página; sem
      prefixo, a última a carregar ganhava e o produto mudava de cor sem ninguém lhe tocar.
   2. Os tokens vivem em `.eai`, não em `:root`. Assim a folha não pinta nada fora da casca do
      produto — é ela que decide onde começa o Eagle AI.

   Sem `@import` e sem URL externa: o CSP bloqueia, e as fontes chegam por
   `/assets/eagle-fonts.v1.css`, que a página carrega à parte. */

/* A navegação partilhada é irmã do `.eai`, não filha: o cabeçalho e a barra utilitária são
   injetados FORA deste invólucro. Enquanto a fonte viveu só aqui, eles herdavam do `body` — que
   não tinha nenhuma — e desenhavam em Times New Roman. O design system passou a dar fonte ao
   `body`; esta linha diz a mesma coisa no idioma desta página, para a correção não depender de
   uma folha externa continuar carregada. */
body { font-family: Barlow, 'Barlow Recurso', 'Segoe UI', Arial, sans-serif; }

.eai {
  color-scheme: light;

  --eai-tinta: var(--ep-tinta);            /* era #11161b — o sistema fixa #14171a */
  --eai-tinta-suave: var(--ep-tinta-suave);/* era #59646d — o sistema fixa #4a5157 */
  --eai-mudo: var(--ep-tinta-mudo);        /* era #6d7780 — o sistema fixa #6b7280 */
  --eai-tenue: var(--ep-tinta-tenue);      /* era #8a939b = 3,12:1 sobre branco, REPROVAVA. Agora #6e7881 = 4,51:1 */

  --eai-linha: var(--ep-borda);            /* era #e4e8eb — o sistema fixa #e4e7ea */
  --eai-linha-clara: #f0f2f3;
  --eai-painel: var(--ep-painel);
  --eai-suave: #f5f7f8;
  --eai-suave-2: #f7f9fa;
  --eai-escuro: #111417;

  --eai-acento: var(--ep-acento);
  --eai-acento-escuro: #a80d26;
  --eai-acento-fraco: #fff1f4;
  --eai-acento-borda: #f0b7c1;

  --eai-ambar: var(--ep-aviso);            /* era #6b511f — o sistema fixa #b45309 */
  --eai-ambar-forte: #c7891d;
  --eai-ambar-borda: #f2d6a6;
  --eai-ambar-fundo: #fff9ed;

  --eai-verde: var(--ep-sucesso);          /* era #26a269 = 3,25:1 sobre branco. Agora #1d883b = 4,52:1 */
  --eai-verde-halo: #d9f2e5;

  --eai-raio-cartao: var(--ep-raio-cartao);  /* era 22px — o sistema fixa 18px */
  --eai-raio: var(--ep-raio);              /* era 13px — o sistema fixa 14px */
  --eai-raio-curto: var(--ep-raio-curto);    /* era 10px — o sistema fixa 8px */
  --eai-sombra: var(--ep-sombra);            /* era 0 18px 60px rgba(17,20,23,.09) */
  --eai-sombra-curta: var(--ep-sombra-leve); /* era rgba(17,20,23,.06) — o sistema usa (20,23,26,.06) */

  /* A margem interna do cartão é UM número. A demo repetia `padding-left/right` em seis regras
     dentro do bloco estreito; aqui o bloco estreito muda o token e todas as faixas acompanham. */
  --eai-respiro: 30px;
  --eai-largura-topo: 1120px;
  --eai-largura: 920px;

  /* Alvo mínimo de toque. Aparece em tudo o que se toca, e não só no ecrã estreito: rato impreciso
     e dedo grosso existem em qualquer largura. */
  --eai-toque: var(--ep-toque);

  --eai-titulo: 'Saira Condensed', 'Saira Condensed Recurso', 'Arial Narrow', Arial, sans-serif;
  --eai-texto: Barlow, 'Barlow Recurso', 'Segoe UI', Arial, sans-serif;

  min-height: 100dvh;
  color: var(--eai-tinta);
  font-family: var(--eai-texto);
  font-size: 16px;
  line-height: 1.5;
  background: linear-gradient(180deg, #f9fafb 0, var(--eai-suave) 62%, #eef1f3 100%);
}

/* A casca já pinta o gradiente, mas o `body` fica por baixo dela: sem isto, a margem por omissão do
   navegador desenha uma moldura branca à volta do produto. `:has` é progressivo — onde não existir,
   perde-se a margem zero e nada mais. */
body:has(.eai) { margin: 0; background: var(--eai-suave); }

/* Quando a faixa do cronómetro (topo do contrato de navegação) está presente, o 100dvh da casca
   compensa a altura dela para não criar rolagem à toa. */
body:has(.faixa-inauguracao) .eai { min-height: calc(100dvh - 34px); }

.eai *, .eai *::before, .eai *::after { box-sizing: border-box; }
.eai a { color: inherit; }
/* A regra acima tem MAIS especificidade do que `.eai-pular` (classe+tipo contra classe) e ganhava-
   lhe: a ligação de saltar ficava com a tinta escura sobre o fundo escuro — 1,03:1, ilegível
   exatamente para quem navega só por teclado, que é quem ela serve. O branco tem de vir por uma
   regra que ganhe, não por ordem de escrita. */
.eai a.eai-pular { color: #fff; }
.eai img { max-width: 100%; }
.eai [hidden] { display: none !important; }

/* Foco visível em TUDO o que recebe foco, num só sítio. O anel é sólido e afastado do elemento
   porque sobre fundo branco um `box-shadow` ténue desaparece em ecrãs de brilho baixo. */
.eai :is(a, button, summary, textarea, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--eai-acento);
  outline-offset: 2px;
  border-radius: 6px;
}
/* ── G092 · 04/09/2026 · O ANEL PRECISA DE ONDE CABER ───────────────────────────────────────
   O anel acima ocupa 4px para fora da caixa do elemento (2px de traço + 2px de afastamento), e o
   `outline` NÃO conta para o que o navegador rola: ao levar um elemento focado para dentro da
   janela ele encosta a CAIXA na borda e deixa os 4px do halo de fora. Medido no Chromium a
   1000×600, na página EN: o primeiro chip do construtor perdia 4,45px em baixo — quem navega por
   teclado perde justamente o sinal de onde está.
   `scroll-margin` é a folga que o navegador respeita ao rolar; 6px cobrem os 4px do halo e
   sobra 2px de respiro. Fica aqui, ao lado da regra que desenha o anel, porque é a mesma
   decisão: quem define o halo define o espaço dele. Não move nada na tela parada — só entra
   quando algo é rolado até o foco. */
.eai :is(a, button, summary, textarea, input, select, [tabindex]) { scroll-margin: 6px; }

/* Salto para o conteúdo: fora do ecrã até receber foco. */
.eai-pular {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 12px 16px; border-radius: 8px;
  color: #fff; background: var(--eai-escuro); text-decoration: none;
}
.eai-pular:focus { top: 12px; }

/* ───────────────────────── Topo ───────────────────────── */

.eai-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: var(--eai-largura-topo); margin: 0 auto; padding: 22px 24px;
}
.eai-marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }

/* O lado direito do topo agrupa estado, acesso e idiomas num só `nav`. Sem esta regra os três
   ficavam em linha só pelo espaço em branco do HTML — que colapsa e desalinha assim que um deles
   muda de largura. O `space-between` do `.eai-topo` conta com DOIS filhos: a marca e este grupo. */
.eai-topo-nav { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* A folha da Área usa selectores genéricos com `!important`; se as duas folhas coexistirem, esta
   reposição mantém o topo do produto no seu desenho próprio sem obrigar a alterar a folha alheia. */
@media (max-width: 1100px) {
  .eai > .eai-topo > .eai-topo-nav { gap: 10px !important; }
}
@media (max-width: 768px) {
  .eai > .eai-topo > .eai-topo-nav {
    order: initial; width: auto !important; overflow-x: visible;
    flex-wrap: wrap !important; padding-bottom: 0;
  }
  /* Cada tipo conserva o seu respiro: a regra genérica da Área zera todos eles com `!important`. */
  .eai > .eai-topo > .eai-topo-nav a { white-space: normal; }
  .eai > .eai-topo > .eai-topo-nav > [data-loja] { padding: 0 16px !important; }
  .eai > .eai-topo > .eai-topo-nav > .eai-acesso { padding: 0 14px !important; }
  .eai > .eai-topo > .eai-topo-nav .eai-idiomas a { padding: 0 6px !important; }
}
@media (max-width: 430px) {
  .eai > .eai-topo { overflow-x: visible; }
  .eai > .eai-topo > .eai-topo-nav { max-width: none; }
}

/* Os idiomas herdam a pastilha do acesso: são a mesma classe de navegação utilitária, e dar-lhes
   aspecto próprio faria três formas diferentes num canto que deve ler-se como um só grupo. */
.eai-idiomas {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: var(--eai-toque); padding: 0 10px;
  border: 1px solid var(--eai-linha); border-radius: 999px;
  background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 700;
}
.eai-idiomas a { display: inline-flex; align-items: center; min-height: var(--eai-toque); padding: 0 6px; color: var(--eai-tenue); text-decoration: none; }
.eai-idiomas a:hover { color: var(--eai-acento-escuro); }
/* O idioma corrente vem em `<b>` com `aria-current`: marca-se pela cor, não por sublinhado, para
   não parecer ligação por clicar. */
.eai-idiomas b { padding: 0 6px; color: var(--eai-acento); }
.eai-marca img { width: 48px; height: auto; object-fit: contain; }
.eai-marca strong {
  display: block; font-family: var(--eai-titulo); font-size: 25px; line-height: .9; letter-spacing: .02em;
}
.eai-marca strong b { color: var(--eai-acento); }
.eai-marca small {
  display: block; margin-top: 5px; color: var(--eai-tenue);
  font-size: 9px; font-weight: 700; letter-spacing: .26em;
}

/* O acesso de quem já tem conta é navegação utilitária e subordinada — o plano fixa que o portão
   mostra antes de pedir. Fica em texto, não em botão cheio, para não competir com «Enviar». */
.eai-acesso {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--eai-toque); padding: 0 14px;
  border: 1px solid var(--eai-linha); border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: var(--eai-tinta-suave);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.eai-acesso:hover { border-color: var(--eai-acento-borda); color: var(--eai-acento-escuro); }

/* Estado do serviço: ponto verde quando responde, apagado quando não. A cor sozinha não informa —
   o texto ao lado (que o comportamento escreve) é que diz o estado; o ponto só o reforça. */
.eai-estado {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 6px 13px;
  border: 1px solid var(--eai-acento-borda); border-radius: 999px;
  color: var(--eai-acento-escuro); background: #fff7f8;
  font-size: 12px; font-weight: 700;
}
/* G373 (ciclo 23) · o selo nasce `hidden` na marcação e só o comportamento o acende. Sem esta
   linha o `display: inline-flex` acima vence o atributo e o selo apareceria mesmo oculto — era
   assim que «Pronto para responder» convivia com «não funciona sem JavaScript». */
.eai-estado[hidden] { display: none; }
.eai-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--eai-verde); box-shadow: 0 0 0 3px var(--eai-verde-halo); }
.eai-estado.eai-off { border-color: #e1c7cb; color: #76545a; background: #faf5f6; }
.eai-estado.eai-off i { background: #9b6670; box-shadow: 0 0 0 3px #eddfe2; }

/* ───────────────────────── Corpo e hero ───────────────────────── */

.eai-corpo { max-width: 1240px; margin: 0 auto; padding: 36px 24px 56px; }

.eai-hero { max-width: 700px; margin: 0 auto 28px; text-align: center; }
.eai h1, .eai h2, .eai h3 { font-family: var(--eai-titulo); }
/* G40 (fase de design, 02/09) · a última palavra («segurança» / «safety» / «seguridad») ficava
   sozinha na segunda linha; `balance` reparte as linhas sem mexer na escala nem no texto. */
.eai-hero h1 { margin: 0; font-size: clamp(38px, 7vw, 72px); line-height: .95; letter-spacing: -.015em; text-wrap: balance; }
.eai-sobrancelha { margin: 0 0 10px; color: var(--eai-acento); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eai-frase { max-width: 620px; margin: 18px auto 0; color: var(--eai-tinta-suave); font-size: 18px; line-height: 1.55; }

.eai-sinais { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; }
.eai-sinais span {
  padding: 8px 11px; border: 1px solid var(--eai-linha); border-radius: 999px;
  background: rgba(255, 255, 255, .62); color: #68737b; font-size: 12px;
}
.eai-sinais b { color: var(--eai-acento); }

/* ───────────────────────── Cartão da conversa ───────────────────────── */

.eai-cartao {
  overflow: hidden;
  border: 1px solid var(--eai-linha); border-radius: var(--eai-raio-cartao);
  background: var(--eai-painel); box-shadow: var(--eai-sombra);
  /* Altura reservada para o widget montar sem empurrar o rodapé (V-10): o esqueleto do cartão —
     aviso, estado vazio, medidor, formulário — nunca compõe abaixo disto, e a página não salta
     quando o comportamento chega. */
  min-height: 540px;
}
.eai-cartao-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 26px var(--eai-respiro) 20px; border-bottom: 1px solid var(--eai-linha-clara);
}
.eai-cartao-topo h2 { margin: 0; font-size: 38px; line-height: .95; }

/* ───────────────────────── Aviso e estados de serviço ───────────────────────── */

/* UM aviso ao nível do serviço, como manda o contrato. Os modificadores mudam a cor e o ícone, não
   o sítio: quem já sabe onde ler o aviso continua a ler no mesmo sítio quando a coisa corre mal. */
.eai-aviso {
  display: flex; gap: 12px;
  margin: 22px var(--eai-respiro); padding: 15px 17px;
  border: 1px solid var(--eai-ambar-borda); border-radius: var(--eai-raio);
  background: var(--eai-ambar-fundo); color: var(--eai-ambar);
  font-size: 14px; line-height: 1.45;
}
.eai-aviso p { margin: 0; }
.eai-aviso p + p { margin-top: 8px; }
.eai-aviso::before {
  content: "i";
  display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%; color: #fff; background: var(--eai-ambar-forte);
  font-size: 12px; font-weight: 800; font-style: normal;
}

/* Limite de perguntas atingido: é o fim da cota, não uma avaria. Acento da casa, tom de convite —
   é aqui que a ligação para a loja faz sentido, e por isso o aviso ganha um botão. */
.eai-aviso.eai-limite {
  border-color: var(--eai-acento-borda); background: var(--eai-acento-fraco); color: #7c1425;
}
.eai-aviso.eai-limite::before { content: "!"; background: var(--eai-acento); }

/* Falha de rede e 429: neutro, cinzento, sem drama. O tom vermelho fica reservado ao limite e à
   marca; pintar um erro transitório de vermelho ensina a pessoa a temer a cor errada. */
.eai-aviso.eai-erro {
  border-color: #d9dfe3; background: #f4f6f7; color: #4a545c;
}
.eai-aviso.eai-erro::before { content: "!"; background: #8b969e; }

/* Recusa de escopo ao nível do serviço. Informativa: a pergunta não cabe, e isso não é falha de
   ninguém. */
.eai-aviso.eai-recusa {
  border-color: #cfe0f2; background: #f3f8fd; color: #2c4c6b;
}
.eai-aviso.eai-recusa::before { content: "?"; background: #4a7fb0; }

/* ───────────────────────── Estado vazio e perguntas de arranque ───────────────────────── */

.eai-vazio { display: grid; justify-items: center; padding: 30px var(--eai-respiro) 8px; text-align: center; }
.eai-vazio-marca {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 14px; color: #fff; background: var(--eai-acento);
  font-size: 22px; box-shadow: 0 10px 25px rgba(200, 16, 46, .22);
}
.eai-vazio h3 { margin: 13px 0 6px; font-size: 28px; }
.eai-vazio p { max-width: 520px; margin: 0; color: var(--eai-mudo); line-height: 1.5; }

/* Os botões de arranque são a pergunta a ser feita, não um anúncio: fundo branco, contorno fino,
   texto em corpo de leitura e alinhado à esquerda — porque uma frase centrada com maiúsculas e
   fundo vermelho lê-se como publicidade, e ninguém carrega em publicidade. O acento só aparece no
   hover e no aspas de abertura, para dizer «isto é clicável» sem gritar. */
.eai-arranque {
  display: block; width: 100%; min-height: var(--eai-toque);
  padding: 12px 16px 12px 34px; position: relative;
  border: 1px solid var(--eai-linha); border-radius: var(--eai-raio);
  background: #fff; color: var(--eai-tinta-suave);
  font: inherit; font-size: 15px; line-height: 1.4; text-align: left;
  cursor: pointer; transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.eai-arranque::before {
  content: "“";
  position: absolute; left: 13px; top: 6px;
  color: var(--eai-acento-borda); font-family: var(--eai-titulo); font-size: 26px; line-height: 1;
}
.eai-arranque:hover {
  border-color: var(--eai-acento-borda); color: var(--eai-tinta); transform: translateY(-1px);
  box-shadow: var(--eai-sombra-curta);
}
.eai-arranque:hover::before { color: var(--eai-acento); }
.eai-arranque:active { transform: none; }

/* Grelha das perguntas: duas colunas quando cabem duas linhas de texto legíveis, uma quando não.
   `auto-fit` decide sozinho — não há um ponto de quebra a adivinhar. */
.eai-vazio-arranques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px; width: 100%; max-width: 620px; margin: 18px 0 6px;
}
.eai-vazio-arranques > p {
  grid-column: 1 / -1; margin: 0 0 2px;
  color: var(--eai-tenue); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

/* ───────────────────────── Conversa ───────────────────────── */

/* Sem altura máxima e sem `overflow` próprio: a conversa cresce e a página rola. Uma caixa que rola
   dentro de uma página que rola é uma armadilha no telemóvel — o dedo nunca sabe o que vai mover. */
.eai-conversa { padding: 6px 0 0; }

.eai-turno {
  margin: 0 var(--eai-respiro) 12px;
  padding: 14px 16px;
  border: 1px solid var(--eai-linha); border-radius: 14px;
  background: var(--eai-suave-2); line-height: 1.55;
  overflow-wrap: anywhere; word-break: break-word;
}

/* A pergunta é texto cru: `pre-wrap` preserva as quebras que a pessoa escreveu. A resposta NÃO leva
   `pre-wrap` — vem estruturada em parágrafos e listas reais, e `pre-wrap` duplicaria o espaço. */
.eai-eu {
  width: fit-content; max-width: min(100%, 46em); margin-left: auto;
  border-color: var(--eai-acento-borda); background: var(--eai-acento-fraco);
  white-space: pre-wrap;
}
.eai-bot { background: #fff; }

/* Recusa de escopo e sem cobertura: o turno continua a ser um turno, apenas mais sóbrio, com uma
   régua à esquerda a marcar que aqui não houve resposta de conteúdo. */
.eai-turno.eai-recusa,
.eai-turno.eai-sem-cobertura {
  border-left: 3px solid #c3ccd3; background: #fafbfc; color: var(--eai-tinta-suave);
}
.eai-turno.eai-erro { border-left: 3px solid #b9c3ca; background: #f7f8f9; color: #4a545c; }

/* ───────────────────────── Corpo da resposta ───────────────────────── */

/* Medida de leitura: 68 caracteres. O cartão tem 920px e sem este limite a linha passa dos 100
   caracteres, que é onde o olho perde o início da linha seguinte. */
.eai-corpo-resposta { max-width: 68ch; }
.eai-corpo-resposta > * { margin: 0; }
.eai-corpo-resposta > * + * { margin-top: 14px; }
.eai-corpo-resposta p { line-height: 1.62; }

/* A primeira frase é sempre a resposta directa. Ganha peso e corpo ligeiramente maior para que quem
   só lê a primeira linha leve o essencial — o resto é fundamentação. */
.eai-primeira { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--eai-tinta); }

/* Níveis de uma resposta longa: cabeçalho curto, condensado, sem hierarquia de tamanho exagerada. */
.eai-nivel {
  margin-top: 20px !important;
  color: var(--eai-tinta);
  font-family: var(--eai-titulo); font-size: 20px; line-height: 1.1; letter-spacing: .01em;
}
.eai-nivel + * { margin-top: 8px !important; }

/* `list-style` fica LIGADO de propósito. Com `list-style: none` o Safari deixa de anunciar a lista
   como lista, e a alternativa (marcador em `::before`) custaria essa semântica; `::marker` dá a cor
   do acento sem a perder. O texto do item chega já sem o «• » — o marcador aqui é o único. */
.eai-lista { padding-left: 22px; }
.eai-lista li { margin-top: 8px; line-height: 1.55; }
.eai-lista li::marker { color: var(--eai-acento); }
.eai-lista li:first-child { margin-top: 0; }
.eai-lista ul, .eai-lista ol { margin-top: 6px; }

/* Ênfase e valores numéricos dentro da resposta. `strong` é o que o construtor usa para dose,
   janela e via — dar-lhe cor tornaria a resposta um sinal luminoso, por isso só ganha peso. */
.eai-corpo-resposta strong { font-weight: 700; }
.eai-corpo-resposta code {
  padding: 1px 5px; border-radius: 5px; background: var(--eai-suave);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .92em;
}

/* ───────────────────────── Proveniência ───────────────────────── */

/* Removeram-se 1705 «o acervo» e «conteúdo checado» do texto das fichas: a confiança passa a ser
   moldura, não prosa. Por isso este sinal é pequeno, cinzento e recolhido — diz que a resposta
   assenta em fichas curadas e cala-se. Se gritasse, voltava a ser a frase que se apagou. */
.eai-fichas {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--eai-linha-clara);
  color: var(--eai-mudo); font-size: 12px;
}
.eai-fichas > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--eai-toque); margin: -11px 0; /* recupera a altura de toque sem abrir buraco */
  color: #55606a; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; list-style: none;
}
.eai-fichas > summary::-webkit-details-marker { display: none; }
.eai-fichas > summary::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--eai-acento); box-shadow: 0 0 0 3px var(--eai-acento-fraco);
}
.eai-fichas > summary::after {
  content: "+"; margin-left: 2px; color: var(--eai-tenue); font-size: 13px; font-weight: 700;
}
.eai-fichas[open] > summary::after { content: "–"; }
.eai-fichas ul { margin: 10px 0 0; padding-left: 0; list-style: none; }
.eai-fichas li { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; line-height: 1.4; }
/* Título em duas linhas no máximo: um título de estudo pode ter uma frase inteira, e três fontes
   de quatro linhas cada empurravam a conversa. O corte é visual — o title completo continua no
   atributo do link para quem pousar o rato. */
.eai-fichas li a {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-width: 0;
}
/* A seta diz «isto sai do domínio» antes do clique — só nos links externos. */
.eai-fichas li a[target="_blank"]::after { content: " \2197"; font-size: .85em; color: var(--eai-mudo); }
.eai-fichas li::before { content: ""; flex: none; width: 3px; align-self: stretch; border-radius: 2px; background: var(--eai-linha); }
.eai-fichas b { color: var(--eai-tinta-suave); font-weight: 700; }
.eai-fichas .eai-ficha-tipo {
  flex: none; border-radius: 5px; padding: 1px 6px;
  color: #68737b; background: var(--eai-linha-clara);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}

/* ───────────────────────── À espera, e revelação do texto ───────────────────────── */

.eai-pensando {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 22px; padding: 2px 0; color: var(--eai-tenue);
}
.eai-pensando i, .eai-pensando span {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: eai-pulsar 1.1s ease-in-out infinite;
}
.eai-pensando :nth-child(2) { animation-delay: .16s; }
/* O texto da espera longa: aparece aos 12 s com as mesmas palavras que o leitor de ecrã ouve.
   Discreto de propósito — acompanha os pontos, não os substitui. */
.eai-pensando-texto { font-style: normal; font-size: 12px; color: var(--eai-mudo); margin-left: 8px; }
.eai-pensando-texto:empty { display: none; }
.eai-pensando :nth-child(3) { animation-delay: .32s; }
@keyframes eai-pulsar {
  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* Acções por turno: discretas até o rato ou o foco chegarem; sempre visíveis onde não há rato,
   porque «aparece no hover» num telemóvel é «não existe». */
.eai-acoes { margin-top: 6px; opacity: 0; transition: opacity .15s; }
.eai-turno:hover .eai-acoes, .eai-turno:focus-within .eai-acoes { opacity: 1; }
@media (hover: none) { .eai-acoes { opacity: 1; } }
.eai-acoes button, .eai-tentar {
  min-height: 32px; padding: 4px 12px;
  border: 1px solid #d8dfe3; border-radius: 999px;
  color: var(--eai-mudo); background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.eai-acoes button:hover, .eai-tentar:hover { border-color: var(--eai-acento-borda); color: var(--eai-acento-escuro); }
.eai-tentar { margin-top: 8px; color: var(--eai-tinta-suave); }

/* O aviso de resposta fora da vista: flutua acima do formulário, some ao clicar ou quando a
   pessoa chega ao fim por si. Etiqueta cheia — é a única acção pedida naquele momento. */
.eai-nova-abaixo {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 30; min-height: var(--eai-toque); padding: 8px 16px;
  border: 1px solid var(--eai-acento); border-radius: 999px;
  color: #fff; background: var(--eai-acento);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.eai-nova-abaixo:focus-visible { outline: 3px solid var(--eai-acento-escuro); outline-offset: 2px; }

/* Revelação progressiva. NÃO é fluxo do servidor: o validador de dose tem de ver a resposta inteira
   antes de a publicar, portanto o texto já está validado e é só desvendado do lado do cliente. O
   cursor pisca enquanto a classe está posta; o comportamento remove-a no fim. */
.eai-revelando::after {
  content: ""; display: inline-block; vertical-align: -.14em;
  width: .5em; height: 1.05em; margin-left: 3px;
  background: var(--eai-acento); border-radius: 1px;
  animation: eai-cursor 1s steps(1, end) infinite;
}
@keyframes eai-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ───────────────────────── Medidor de cota ───────────────────────── */

/* A cota é barra e não frase: «restam 3 de 50» obriga a ler e a comparar dois números; a barra
   mostra-se de relance. O número fica na mesma, como texto, para quem usa leitor de ecrã. */
.eai-medidor { margin: 4px var(--eai-respiro) 20px; padding: 12px 0 0; color: var(--eai-mudo); font-size: 12px; }
.eai-medidor strong { float: right; color: var(--eai-tinta); }
.eai-medidor-trilho { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e9edef; }
.eai-medidor-trilho > span,
.eai-medidor-trilho [data-medidor] {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: var(--eai-acento); transition: width .2s ease;
}
/* Perto do fim, e no fim, a barra muda de tom antes de o aviso aparecer — o sinal chega antes do
   texto, que é o ponto de haver barra. */
.eai-medidor.eai-quase .eai-medidor-trilho > span { background: linear-gradient(90deg, var(--eai-acento), #e8722f); }
.eai-medidor.eai-esgotado { color: var(--eai-acento-escuro); }
.eai-medidor.eai-esgotado strong { color: var(--eai-acento-escuro); }
.eai-medidor.eai-esgotado .eai-medidor-trilho > span { background: repeating-linear-gradient(45deg, var(--eai-acento) 0 6px, var(--eai-acento-escuro) 6px 12px); }

/* ───────────────────────── Formulário ───────────────────────── */

/* Grelha de uma coluna por omissão, e `row-gap: 0` de propósito: o espaçamento vertical vem das
   margens dos filhos, para que o wizard poder ocupar várias linhas na coluna 2 (ver abaixo) sem
   inventar goteiras vazias entre linhas implícitas. */
.eai-forma { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0 var(--eai-respiro) 18px;
  /* Telemóveis com barra gestual: o rodapé do formulário não fica debaixo dela. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.eai-forma > * { grid-column: 1; min-width: 0; }
.eai-forma label {
  display: block; margin-bottom: 8px;
  color: #68737b; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.eai-linha { display: flex; gap: 10px; align-items: stretch; }
.eai-forma textarea {
  flex: 1; min-height: 64px; resize: vertical;
  border: 1px solid #d8dfe3; border-radius: 12px; padding: 14px;
  color: var(--eai-tinta); background: #fff; font: inherit; line-height: 1.45;
  /* Cresce com o texto até ~4 linhas e depois rola por dentro (V-8). `field-sizing` é o caminho
     nativo; onde não existe, o comportamento recalcula a altura no input — as duas vias respeitam
     o mesmo tecto. */
  field-sizing: content; min-height: 2lh; max-height: 6.2em; resize: none;
}
.eai-forma textarea:focus { border-color: var(--eai-acento); box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); outline: none; }
.eai-forma textarea:focus-visible { outline: 2px solid var(--eai-acento); outline-offset: 1px; }
.eai-forma textarea::placeholder { color: var(--eai-tenue); }

.eai-enviar, .eai-forma button[type="submit"] {
  align-self: stretch; min-width: 108px; min-height: var(--eai-toque);
  border: 0; border-radius: 12px;
  color: #fff; background: linear-gradient(180deg, #e11b32, var(--eai-acento-escuro));
  font: inherit; font-weight: 800; cursor: pointer;
}
.eai-enviar:hover, .eai-forma button[type="submit"]:hover { filter: brightness(1.04); }
.eai-enviar:disabled, .eai-forma button[type="submit"]:disabled { cursor: not-allowed; opacity: .55; filter: none; }

.eai-ajuda, .eai-contador, .eai-situacao { margin: 9px 0 0; color: var(--eai-tenue); font-size: 12px; }
/* A instrução evita envios acidentais; precisa dos 4,5:1 de texto normal sobre o cartão branco. */
.eai-ajuda { color: var(--eai-mudo); }
.eai-contador.eai-no-limite { color: var(--eai-acento); font-weight: 700; }
.eai-forma-rodape { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 4px; }
.eai-forma-rodape .eai-ajuda { flex: 1 1 260px; }

.eai-limpar {
  min-height: var(--eai-toque); padding: 9px 14px;
  border: 1px solid #d8dfe3; border-radius: var(--eai-raio-curto);
  color: #55606a; background: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.eai-limpar:hover { border-color: var(--eai-acento); color: var(--eai-acento); }

.eai-situacao { min-height: 18px; padding: 0 var(--eai-respiro) 24px; margin: 0; }

/* Ligação para a loja: presente, subordinada, e com estado próprio. Nunca ganha o vermelho cheio do
   «Enviar» — dentro do cartão só há um botão primário, e é o que faz a pergunta. */
.eai [data-loja] {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--eai-toque); padding: 0 16px;
  border: 1px solid var(--eai-acento-borda); border-radius: var(--eai-raio-curto);
  color: var(--eai-acento-escuro); background: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.eai [data-loja]:hover { background: var(--eai-acento-fraco); }
.eai [data-loja][aria-disabled="true"] { border-color: var(--eai-linha); color: var(--eai-tenue); pointer-events: none; }
/* CSS não consegue retirar o `href` da ordem de tabulação: enquanto a marcação ainda o conserva,
   esconder apenas o estado «em breve» impede activação por Enter; o estado aberto reaparece. */
.eai [data-loja="em-breve"][aria-disabled="true"] { display: none; }

/* ───────────────────────── Assistente (wizard) ───────────────────────── */

/* Regra do contrato: AO LADO do campo, nunca à frente. Nada aqui é `position: absolute` nem
   sobreposição — se a grelha de duas colunas não pegar (marcação diferente, navegador sem `:has`),
   o pior caso é o wizard cair para baixo do campo, que é exactamente o comportamento estreito.
   Nunca tapa o que a pessoa está a escrever. */
.eai-assistente {
  margin-top: 14px; padding: 14px 15px;
  border: 1px solid var(--eai-linha); border-radius: var(--eai-raio);
  background: var(--eai-suave-2);
}
.eai-assistente h2, .eai-assistente h3 {
  margin: 0 0 4px; font-size: 19px; line-height: 1.1; letter-spacing: .01em;
}
.eai-assistente p { margin: 8px 0 6px; color: var(--eai-mudo); font-size: 12px; line-height: 1.45; }
.eai-assistente p:first-of-type { margin-top: 2px; }

/* As fichas de escolha são etiquetas, não botões primários: comprimem-se em duas ou três por linha
   na coluna estreita e mantêm 44px de altura. */
.eai-assistente-fichas, .eai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Os chips de continuação da conversa vestem a mesma etiqueta do wizard: são a
   mesma coisa — perguntas prontas a enviar — e duas roupas para o mesmo gesto
   ensinariam o olho a tratá-las como coisas diferentes. */
.eai-chips { margin-top: 10px; }
.eai-assistente button, .eai-chips button {
  min-height: var(--eai-toque); padding: 8px 12px;
  border: 1px solid #d8dfe3; border-radius: 999px;
  color: var(--eai-tinta-suave); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.eai-assistente button:hover, .eai-chips button:hover { border-color: var(--eai-acento-borda); color: var(--eai-acento-escuro); }
.eai-assistente button[aria-pressed="true"] {
  border-color: var(--eai-acento); color: #fff; background: var(--eai-acento); font-weight: 700;
}
/* O botão que devolve a pergunta ao campo é o único cheio do wizard, e mesmo esse é contornado —
   a acção primária do cartão continua a ser «Enviar». */
.eai-assistente [data-assistente-usar] {
  width: 100%; margin-top: 10px; border-radius: var(--eai-raio-curto);
  border-color: var(--eai-acento); color: var(--eai-acento-escuro); background: var(--eai-acento-fraco); font-weight: 800;
}
.eai-assistente [data-assistente-outra] { width: 100%; margin-top: 6px; border-radius: var(--eai-raio-curto); }
.eai-assistente-estado, .eai-assistente [data-assistente-estado] { min-height: 16px; color: var(--eai-tinta-suave); font-weight: 600; }

/* Coluna própria só quando há largura para o campo continuar confortável. 900px é o ponto em que o
   textarea ainda fica acima de ~55 caracteres por linha depois de ceder a coluna do wizard. */
/* REFORMA (aproveitar a largura): duas colunas de altura plena — conversa larga à esquerda,
   wizard numa coluna lateral fixa à direita. A rolagem acontece SÓ dentro do fio e do wizard,
   não na página inteira. Abaixo de 980px tudo volta a empilhar (o wizard é filho de .eai-corpo,
   injetado depois do cartão, portanto cai naturalmente por baixo). */
/* G92 (auditoria do ciclo 08, 31/08/2026) — abaixo de 980px o «Monte sua pergunta» caía DEPOIS do
   aviso final, dos links e da assinatura. Não é escolha de desenho: o wizard é injetado por
   JavaScript no fim do `.eai-corpo`, e sem grelha ele fica onde o DOM o pôs. Quem rola até ao
   fecho da página entende que acabou e não vê a ferramenta que ajuda a formular a pergunta.
   Uma coluna flex e uma ordem explícita para o rodapé resolvem sem mexer na ordem de injeção. */
@media (max-width: 979px) {
  .eai-corpo { display: flex; flex-direction: column; }
  .eai-rodape { order: 99; }
}

@media (min-width: 980px) {
  .eai-corpo {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px 24px; align-items: start;
  }
  /* Posições EXPLÍCITAS: o `.eai-corpo` tem hero, cartão e rodapé no HTML, e o wizard é injetado
     por último — sem fixar linha/coluna, o rodapé cairia na célula do wizard e empurrava-o para
     baixo. Fixando cartão e wizard na MESMA linha (2), alinham no topo; o rodapé ocupa as duas. */
  /* Com a linha inteira da grelha à disposição, os 700px herdados deixavam o
     título em 3 linhas e os selos em 2 — largura a sobrar dos dois lados. Solta-se
     o teto: o título compõe em 1–2 linhas, a frase alarga (limitada em ch para a
     leitura não degradar) e os três selos cabem lado a lado. */
  .eai-hero { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px; max-width: none; }
  .eai-hero .eai-frase { max-width: 88ch; }
  .eai-cartao {
    grid-column: 1; grid-row: 2; display: flex; flex-direction: column;
    max-height: calc(100vh - 116px); min-height: 0;
  }
  .eai-conversa { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* O estado vazio é IRMÃO da conversa dentro do cartão. Sem ceder altura, a soma
     topo+aviso+vazio+medidor+forma passa do max-height e o overflow:hidden corta o
     fundo do formulário — a caixa de texto ficava rente à borda do cartão, sem o
     respiro nem a linha de ajuda. Cede e rola por dentro, como a conversa. */
  .eai-vazio { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  /* ── G91 · 01/09/2026 · O PRIMEIRO USO NÃO CABE NUMA FRESTA ────────────────────────────────
     A cedência acima resolve o corte do formulário QUANDO há conversa. No primeiro uso não há
     conversa nenhuma — e então o mesmo mecanismo espremia o onboarding inteiro: medido a
     1352 × 674, `.eai-vazio` ficava com 63 px de altura visível para 386 px de conteúdo, a rolar
     por dentro, sem barra evidente e fora da ordem de foco. Sobrava a estrela.
     O que se perde ali é caro: título, explicação e os arranques — que são justamente o que
     ensina a fazer uma pergunta que a ferramenta saiba responder. Quem não os vê escreve à sorte
     e conclui que a Eagle AI não serve.
     Enquanto o estado vazio está de pé, o cartão não tem razão nenhuma para caber na janela: não
     há histórico para rolar por dentro. Solta-se o teto e a PÁGINA rola, que é o que a pessoa
     espera. Assim que a primeira resposta chega, `[hidden]` entra no vazio e tudo volta ao
     comportamento anterior, sem exceção nova para manter. */
  .eai-cartao:has(.eai-vazio:not([hidden])) { max-height: none; }
  .eai-cartao:has(.eai-vazio:not([hidden])) .eai-vazio { flex: 0 0 auto; overflow-y: visible; }
  .eai-forma { flex: 0 0 auto; }
  /* ── 02/09/2026 · G249 · O PAINEL GRUDAVA DEBAIXO DA PILHA FIXA ────────────────────────────
     `top: 20px` ignorava o que já está grudado no topo: a faixa do cronómetro (34px, sticky) e o
     cabeçalho (`--ep-nav-fixa`, 75px, sticky logo abaixo dela). Ao rolar, o painel entrava por
     baixo dos dois e o primeiro chip — o que recebe o foco por Tab — ficava metade encoberto
     (49% medidos). O offset passa a ser o mesmo que a navegação usa para o `scroll-padding`,
     mais a faixa quando ela existe, pelo mesmo `:has` progressivo do cabeçalho. Consulta ao
     dono feita (D12): é só casca, nada no motor. */
  .eai-assistente {
    grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--ep-nav-fixa, 0px) + 12px);
    margin-top: 0; align-self: start;
    max-height: calc(100vh - var(--ep-nav-fixa, 0px) - 24px); overflow-y: auto;
  }
  body:has(.faixa-inauguracao) .eai-assistente {
    top: calc(var(--ep-nav-fixa, 0px) + 34px + 12px);
    max-height: calc(100vh - var(--ep-nav-fixa, 0px) - 34px - 24px);
  }
  .eai-rodape { grid-column: 1 / -1; grid-row: 3; }
}

/* ───────────────────────── Rodapé ───────────────────────── */

/* ── G192 · 04/09/2026 · O RODAPÉ NÃO SE LIA ────────────────────────────────────────────────
   `#7a858e` a 12px sobre o fim do gradiente da casca dá 3,38:1 — medido no Chromium, com o pixel
   de fundo lido da própria tela (`rgb(240,243,244)` à altura do rodapé). O piso do WCAG para
   texto pequeno é 4,5:1, e o que está aqui é o aviso de que a resposta é informativa e não
   substitui profissional de saúde: o texto de menor contraste da página é justamente o que mais
   protege quem lê. `#5f6972` dá 5,02:1 no mesmo ponto (4,94:1 no extremo mais escuro do
   gradiente, `#eef1f3`), e continua bem mais claro do que `--eai-tinta-suave` (#4a5157, 7,23:1):
   o rodapé segue sendo o texto mais discreto da página, agora legível. */
.eai-rodape { max-width: 700px; margin: 18px auto 0; color: #5f6972; text-align: center; font-size: 12px; line-height: 1.5; }
.eai-rodape a { text-decoration: underline; text-underline-offset: 2px; }
.eai-rodape p { margin: 0 0 8px; }

/* ───────────────────────── Ecrã estreito ─────────────────────────
   O alvo real é 360–390px. Aqui o cartão perde a moldura lateral que não pode pagar, o topo
   empilha, e tudo o que se toca cresce para 44px de altura. */

@media (max-width: 620px) {
  .eai { --eai-respiro: 16px; }
  .eai-topo { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 16px 16px 12px; }
  .eai-corpo { padding: 28px 12px 44px; }
  .eai-hero { margin-bottom: 20px; }
  .eai-frase { font-size: 16px; }
  .eai-cartao { border-radius: 18px; }
  .eai-cartao-topo { align-items: flex-start; flex-direction: column; gap: 10px; padding-top: 20px; }
  .eai-cartao-topo h2 { font-size: 32px; }
  .eai-aviso { margin-top: 16px; margin-bottom: 16px; font-size: 13px; }
  .eai-vazio { padding-top: 22px; }
  .eai-vazio h3 { font-size: 24px; }
  .eai-vazio-arranques { grid-template-columns: 1fr; }
  /* O turno perde a margem lateral do cartão e ganha-a de volta como padding: a bolha fica maior
     sem encostar ao rebordo, que é o que dói num ecrã de 360px. */
  .eai-turno { margin-left: var(--eai-respiro); margin-right: var(--eai-respiro); padding: 12px 13px; }
  .eai-eu { max-width: 100%; }
  .eai-corpo-resposta { max-width: none; }
  .eai-primeira { font-size: 16px; }
  .eai-forma-rodape { align-items: stretch; flex-direction: column; }
  /* G93 (auditoria do ciclo 08, 31/08/2026) — 260px VAZIOS logo abaixo da caixa de perguntas.
     Em linha, `flex: 1 1 260px` diz «esta instrução ocupa 260px de LARGURA e pode crescer». Ao
     virar coluna aqui em cima, o mesmo 260px passa a ser ALTURA, e o `flex-grow: 1` estica-o
     até o fim: duas linhas de texto dentro de uma caixa de 260px. Numa ferramenta de perguntas
     e respostas, um vão desses logo abaixo do campo lê-se como resposta que não chegou.
     Medido a 01/09: 260px a 390px e a 502px; 54px a 1024px, que é a altura certa do texto. */
  .eai-forma-rodape .eai-ajuda { flex: 0 1 auto; }
  .eai-limpar { width: 100%; }
  /* Campo e botão em coluna: lado a lado, o botão roubava ao campo a largura de que ele precisa
     para mostrar a pergunta inteira. */
  .eai-linha { flex-direction: column; }
  .eai-enviar, .eai-forma button[type="submit"] { min-height: 48px; width: 100%; }
  .eai-assistente { margin-top: 12px; }
  .eai-assistente [data-assistente-usar], .eai-assistente [data-assistente-outra] { min-height: 48px; }
}

/* Abaixo de 400px o texto grande é o que estoura primeiro. Reduz-se o título e as etiquetas do
   topo, e a marca deixa de competir com o estado do serviço. */
@media (max-width: 400px) {
  .eai-corpo { padding-left: 10px; padding-right: 10px; }
  .eai-hero h1 { font-size: 34px; }
  .eai-marca img { width: 40px; }
  .eai-marca strong { font-size: 22px; }
  .eai-estado, .eai-acesso { font-size: 11px; padding-left: 10px; padding-right: 10px; }
  .eai-sinais span { font-size: 11px; padding: 7px 9px; }
  .eai-medidor strong { float: none; display: block; margin-top: 2px; }
  .eai-arranque { font-size: 14px; }
}

/* ───────────────────────── Movimento reduzido ─────────────────────────
   Desliga a revelação progressiva, o pulsar da espera e as transições. O cursor desaparece por
   completo: mantê-lo parado ao lado do texto lia-se como erro de composição. */

/* 18/09 — aproximar o espaço de perguntas sem retirar instruções ou avisos. */
.eai-corpo { padding-top:20px; }
.eai-hero { margin-bottom:16px; }
.eai-hero h1 { font-size:clamp(30px,3.5vw,46px); line-height:1.05; }
.eai-frase { margin-top:12px; font-size:16px; }
.eai-sinais { margin-top:12px; gap:6px; }
.eai-cartao-topo { padding-top:16px; padding-bottom:12px; }
.eai-cartao-topo h2 { font-size:30px; }
@media (max-width:768px) {
  .eai-corpo { padding-top:16px; }
  .eai-hero { text-align:left; }
  .eai-sinais { justify-content:flex-start; }
  .eai-sinais span { padding:5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .eai *, .eai *::before, .eai *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .eai-revelando::after { display: none; }
  .eai-acoes { transition: none; opacity: 1; }
  .eai-medidor-trilho > span { transition: none; }
  .eai-pensando i, .eai-pensando span { opacity: .55; }
  .eai-arranque:hover { transform: none; }
}