/* Uber Move, os mesmos quatro pesos que o app carrega (Type.kt). */
@font-face {
  font-family: 'Uber Move';
  src: url('/fontes/uber_move_light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Uber Move';
  src: url('/fontes/uber_move_regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Uber Move';
  src: url('/fontes/uber_move_medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Uber Move';
  src: url('/fontes/uber_move_bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette.kt */
  --preto: #000000;
  --branco: #ffffff;
  --cinza-50: #f6f6f6;
  --cinza-100: #eeeeee;
  --cinza-200: #e2e2e2;
  --cinza-300: #cbcbcb;
  --cinza-400: #afafaf;
  --cinza-500: #757575;
  --cinza-600: #545454;
  --cinza-700: #333333;
  --cinza-800: #1f1f1f;
  --cinza-900: #141414;

  /* DarkUx, de Theme.kt: o app abre no escuro. */
  --fundo: var(--preto);
  --superficie: var(--cinza-900);
  --superficie-suave: var(--cinza-800);
  --superficie-invertida: var(--branco);
  --texto: var(--branco);
  --texto-secundario: var(--cinza-400);
  --texto-terciario: var(--cinza-500);
  --texto-invertido: var(--preto);
  --linha: var(--cinza-700);
  --linha-forte: var(--cinza-600);
  --divisoria: var(--cinza-800);

  /* As tres cores do indicador, de StatusColors.kt. Sao as unicas cores do site. */
  --seguro: #06c167;
  --cuidado: #ffc107;
  --alerta: #ff5a4e;

  /* Semanticas do tema escuro (DarkUx). */
  --positivo: #2fd07f;
  --positivo-fundo: #10301f;
  --aviso: #e9a93b;
  --aviso-fundo: #33260f;
  --negativo: #ff6152;
  --negativo-fundo: #3a1712;
  --info: #5b93ff;
  --info-fundo: #14203a;

  /* Formas, de UxTokens. */
  --raio-cartao: 12px;
  --raio-controle: 8px;
  --raio-pilula: 999px;

  --largura-max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/*
 * Ancora de secao nao pode encostar no topo da tela nem ficar debaixo da barra.
 *
 * Antes eram 20px fixos, e bastava a barra virar fixa para o titulo de cada secao pousar
 * ATRAS dela: quem clicava em "Como funciona" caia no meio do primeiro paragrafo, sem o
 * titulo, e parecia que o link estava errado. A altura da barra vira variavel para o
 * calculo acompanhar quando ela encolhe no telefone.
 */
:root { --altura-topo: 90px; }
[id] { scroll-margin-top: calc(var(--altura-topo) + 16px); }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Uber Move', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* Escala tipografica de Type.kt, incluindo o espacamento negativo dos tamanhos
   grandes - e ele que da a densidade do titulo no app. */
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 44px; line-height: 48px; letter-spacing: -1.1px; }
h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.6px; }
h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.2px; }
p  { margin: 0; }

@media (max-width: 640px) {
  h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.8px; }
  h2 { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  /* Foco na tinta, nao numa cor de destaque: ver a regra 2 no topo do arquivo. */
  outline: 2px solid var(--texto);
  outline-offset: 2px;
}

/*
 * O envelope: largura maxima e o respiro lateral de toda pagina.
 *
 * ATENCAO ao mexer em quem usa esta classe. Quem combina .envolve com outra classe -
 * .topo, .heroi, .secao, .chamada - NAO pode declarar padding no atalho, porque o
 * atalho zera o padding lateral daqui. Esse foi um bug real e caro: um padding de
 * 22px 0 no cabecalho deixou o site inteiro sem margem no telefone, com o texto
 * encostando na borda da tela. No computador ninguem viu, porque o max-width ja deixa
 * folga de sobra. Por isso todos usam padding-block, que so mexe em cima e embaixo.
 */
.envolve {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ cabecalho */

/*
 * A barra presa no topo.
 *
 * Fica neste involucro de largura total, e nao no proprio .topo, porque .topo carrega
 * .envolve - largura maxima e margem automatica. Fixando o .envolve, o fundo cobriria so a
 * faixa central e em tela larga o conteudo da pagina apareceria subindo pelas laterais.
 *
 * Fundo opaco, e nao translucido com desfoque: o site e preto puro, entao o desfoque nao
 * acrescenta nada visivel e cobra composicao de camada em toda rolagem - o tipo de custo
 * que aparece como travada em aparelho modesto, que e justamente o publico do app.
 */
.topo-fixo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fundo);
  border-bottom: 1px solid var(--divisoria);
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
}

.marca { display: flex; align-items: center; gap: 12px; }

.marca-selo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
}

.marca-nome {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.marca-frase {
  font-size: 13px;
  line-height: 18px;
  color: var(--texto-secundario);
}

/*
 * Navegacao do cabecalho: sempre na mesma linha da marca e do botao, em qualquer
 * largura.
 *
 * Ela nunca desaparece. O que muda em tela pequena e o tamanho de cada peca, numa
 * ordem de sacrificio pensada: primeiro sai a frase da marca, que e repeticao;
 * depois encolhem fonte e respiro; e so no fim sai a palavra "Baixar" do botao,
 * porque o triangulo do Play sozinho ja e reconhecido - o nome da marca, nao.
 *
 * A marca pode encolher, o menu e o botao nao: sao eles que tem alvo de toque.
 */
.topo-nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
  line-height: 20px;
  color: var(--texto-secundario);
  white-space: nowrap;
}

/* O icone acompanha a cor do texto por currentColor, entao o hover pinta os dois. */
.topo-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topo-nav a svg { flex: none; }
.topo-nav a:hover { color: var(--texto); }

/* Quem cede espaco e a marca, nunca o menu nem o botao: esses dois tem alvo de toque
   e precisam do tamanho inteiro. */
.topo-nav, .topo .botao { flex: none; }
.topo .marca { min-width: 0; }

/* ---------------------------------------------------------------------- hero */

.heroi { padding-block: 48px 56px; display: grid; gap: 40px; align-items: center; }

@media (min-width: 900px) {
  .heroi {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    padding-block: 64px 80px;
  }
}

.heroi-texto-bloco { display: grid; gap: 24px; }

/*
 * Bloco simples, e nao grid com place-items: center.
 *
 * Ja foi grid centralizado, e a ilustracao sumiu da pagina. O motivo: item de grid
 * com justify-items: center nao estica, entao a largura da area vem do tamanho do
 * proprio item - e o item pedia width: 100% da area. Dependencia circular, e o
 * navegador resolve com zero. Em fluxo de bloco o 100% resolve contra a largura do
 * pai, que e definida, e o max-width com margem automatica centraliza.
 */
.heroi-arte { display: block; }

.heroi-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  font-size: 13px;
  line-height: 18px;
  color: var(--texto-secundario);
  width: fit-content;
}

/*
 * A manchete em UMA linha, em qualquer aparelho.
 *
 * Isso e uma restricao de contagem de caracteres antes de ser de CSS, e o numero saiu
 * de medir: a versao antiga, com 35 caracteres, dava 551 px de texto corrido a 34 px.
 * Para caber numa linha em 312 px uteis - o que sobra num aparelho de 360 - ela
 * precisaria de 22,2 px de fonte, menor que o paragrafo de 18 px logo abaixo. Deixaria
 * de ser manchete. Nao existe CSS que resolva isso; o texto tinha de encurtar.
 *
 * Com o texto curto, o tamanho e fluido em vez de fixo por faixa, porque a largura
 * disponivel e continua e a fonte tem de acompanhar. Sao duas formulas porque sao dois
 * layouts: em coluna unica a largura e a da tela menos o respiro; em duas colunas e uma
 * fracao dela, e uma formula so quebraria na faixa onde as duas colunas comecam
 * estreitas.
 *
 * Nao ha white-space nowrap de proposito. Se a fonte da marca nao carregar, a
 * substituta pode ser mais larga e o nowrap viraria estouro horizontal - que e pior
 * que quebra de linha. Sem ele, o pior caso e a manchete virar duas linhas
 * equilibradas.
 */
.heroi h1 {
  max-width: none;
  font-size: clamp(24px, calc(8.3vw - 4px), 44px);
  /* Entrelinha e espacamento em relativo, porque a fonte agora e fluida: os 48 px e
     -1,1 px fixos da escala geral esmagariam a manchete no tamanho pequeno. */
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/*
 * Em duas colunas a manchete tem apenas 52,5% da largura, menos o vao. A formula da
 * coluna unica renderia 60 px aqui e estouraria; esta rende 34,6 px em 900 e 42,5 em
 * 1080, sempre com uns 12% de folga sobre o texto.
 */
@media (min-width: 900px) {
  .heroi h1 { font-size: clamp(30px, calc(4.4vw - 5px), 44px); }
}

.heroi-texto {
  max-width: 58ch;
  font-size: 18px;
  line-height: 28px;
  color: var(--texto-secundario);
}

.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Fileira de garantias abaixo do botao. Curta e concreta: e o que responde a
   pergunta "e se for pegadinha" antes de a pessoa ir procurar a resposta. */
.provas { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.provas-centro { justify-content: center; }

.prova {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-secundario);
}
.prova svg { color: var(--texto); flex: none; }

/* -------------------------------------------------------------- ilustracoes */

/*
 * Todo SVG desenhado a mao escala pela largura do lugar onde esta. A altura
 * automatica com o viewBox faz o resto: nenhuma peca tem tamanho fixo, e nenhuma
 * precisa de media query propria.
 */
.ilustra { display: block; width: 100%; height: auto; margin: 0 auto; }
.ilustra-heroi { max-width: 340px; }
.ilustra-cena { max-width: 720px; }
.ilustra-cena-alta { max-width: 400px; }
.ilustra-estado { max-width: 132px; }

/*
 * Qual composicao do diagrama aparece.
 *
 * Nao e a mesma imagem encolhida: sao dois arranjos da mesma cena, um panoramico e um
 * em retrato, porque informacao espalhada na horizontal nao cabe numa tela alta. A
 * escondida sai da arvore de acessibilidade junto com o display none, entao leitor de
 * tela nunca anuncia o diagrama duas vezes.
 */
.so-largo { display: none; }
.so-estreito { display: block; }

@media (min-width: 720px) {
  .so-largo { display: block; }
  .so-estreito { display: none; }
}

/*
 * A tinta das ilustracoes, e o unico lugar onde ela pode morar.
 *
 * Os dois caminhos mais curtos estao fechados nesta pagina, e cada um custou uma
 * versao invisivel do desenho:
 *
 *  - Cor em atributo de apresentacao, no formato fill="var(--cinza-800)", nao vale:
 *    var() nao e aceito ali. O valor e descartado e o desenho cai no preto inicial,
 *    que sobre fundo preto e o mesmo que nao existir.
 *  - Cor em atributo style e barrada pela CSP do servidor, que manda style-src 'self'
 *    sem unsafe-inline. Afrouxar a CSP para pintar um desenho seria trocar protecao
 *    real por conveniencia.
 *
 * Entao a cor vem daqui, por classe. O que e literal - stroke-width, rx, fill="none",
 * fill="url(#...)" - continua em atributo, porque nao precisa do tema e nao e
 * bloqueado.
 */
.il-moldura { fill: var(--cinza-800); stroke: var(--linha-forte); }
.il-tela { fill: var(--cinza-900); }
.il-rim { stroke: var(--cinza-600); opacity: .55; }
.il-botao { fill: var(--cinza-600); }
.il-lente { fill: var(--preto); }
.il-lente-ativa { fill: var(--alerta); }
.il-anel { stroke: var(--cinza-500); }
.il-varredura { stroke: var(--alerta); }
.il-barra { fill: var(--cinza-700); }
.il-barra-clara { fill: var(--cinza-600); }
.il-divisoria { fill: var(--cinza-800); }
.il-contorno { stroke: var(--cinza-700); }
.il-vibra { stroke: var(--cinza-500); }
.il-radar { stroke: var(--cinza-600); }
.il-colchete { stroke: var(--alerta); }

/*
 * Os dois aneis do indicador, iguais aos de IndicatorView.kt.
 *
 * Nao sao enfeite: no aparelho o ponto pousa sobre qualquer fundo possivel - feed
 * branco, video preto, foto colorida - e cor cheia sobre fundo de mesma luminancia
 * desaparece. O anel escuro garante o ponto no claro, o claro garante no escuro.
 */
.il-anel-escuro { stroke: var(--preto); }
.il-anel-claro { stroke: var(--branco); }
.il-ponto-halo { fill: var(--alerta); }

/*
 * As figuras. O tom diz a distancia: quanto mais claro, mais perto da camera.
 *
 * O intruso do heroi e mais claro que a figura ignorada do diagrama, e nao e capricho:
 * no heroi ele e o assunto do desenho, e a #333 sobre fundo preto ele quase nao
 * aparecia. No diagrama, ao contrario, a figura fora do campo PRECISA ser apagada -
 * o desenho esta dizendo que o app nao liga para ela.
 */
.il-figura-tras { fill: var(--cinza-700); }
.il-figura-intruso { fill: var(--cinza-600); }
.il-figura-perto { fill: var(--cinza-300); }
.il-figura-dono { fill: var(--branco); }

/* Paradas de gradiente. stop-color tambem e propriedade CSS, entao entra igual. */
.il-parada-fundo { stop-color: var(--cinza-800); }
.il-parada-alerta { stop-color: var(--alerta); }
.il-parada-cone { stop-color: var(--cinza-600); }
.il-parada-trilho-claro { stop-color: var(--cinza-500); }
.il-parada-trilho-escuro { stop-color: var(--cinza-800); }
.il-parada-brilho { stop-color: var(--branco); }

.il-ponto-seguro { fill: var(--seguro); }
.il-ponto-cuidado { fill: var(--cuidado); }
.il-ponto-alerta { fill: var(--alerta); }

@media (max-width: 899px) { .ilustra-heroi { max-width: 280px; } }

.cena {
  margin: 0;
  padding: 28px 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 24px;
}

/* Legenda em HTML, e nao texto dentro do SVG: escala no telefone, e traduzida
   junto com o resto do site e e lida por leitor de tela. */
.legenda { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center; }

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-secundario);
}

.chip { width: 12px; height: 12px; border-radius: var(--raio-pilula); flex: none; }
.chip-voce { background: var(--branco); }
.chip-olha { background: var(--alerta); }
.chip-fora { background: var(--cinza-700); }

/* -------------------------------------------------------------------- botoes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--raio-controle);
  background: var(--superficie-invertida);
  color: var(--texto-invertido);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.botao:hover { opacity: 0.9; }
.botao:active { transform: scale(0.985); }

.botao-vazado {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--linha-forte);
}

.botao-largo { width: 100%; }

/*
 * Selo oficial do Google Play.
 *
 * Sem fundo, sem borda e sem sombra de proposito: o arquivo do Google ja tem o
 * fundo preto e a borda desenhados dentro dele, e as diretrizes de marca proibem
 * embrulhar o selo em outro botao ou recolorir. Aqui o CSS so posiciona.
 *
 * O line-height zero mata o espaco fantasma que a linha de texto reserva embaixo
 * de uma imagem inline - sem isso o selo fica desalinhado do botao ao lado dele.
 */
.selo-play {
  display: inline-flex;
  line-height: 0;
  border-radius: var(--raio-controle);
  transition: transform 120ms ease, opacity 120ms ease;
}
.selo-play:hover { opacity: 0.88; }
.selo-play:active { transform: scale(0.985); }
.selo-play img { display: block; width: auto; }

/* O selo tem quase 4x a largura da altura; em tela estreita ele encolhe junto. */
@media (max-width: 420px) {
  .selo-play img { height: 48px; }
}

/* ------------------------------------------------------------------- cartoes */

.grade {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cartao {
  padding: 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 10px;
  align-content: start;
}

.cartao-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--superficie-suave);
  color: var(--texto);
  margin-bottom: 6px;
}

.cartao h3 { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0; }

.cartao p { color: var(--texto-secundario); font-size: 15px; line-height: 23px; }

.secao { padding-block: 64px; display: grid; gap: 32px; }

.secao-titulo { display: grid; gap: 10px; max-width: 62ch; }
.secao-titulo p { color: var(--texto-secundario); font-size: 17px; line-height: 27px; }
.secao-titulo-centro { margin: 0 auto; text-align: center; justify-items: center; }

/*
 * Faixa de fundo. E o que da ritmo a pagina: sem alternar a cor do fundo, seis
 * secoes seguidas viram uma coluna longa de texto e a pessoa para de ler na
 * terceira. A faixa sangra a largura toda, e o conteudo dentro dela continua preso
 * a largura maxima de sempre.
 */
.faixa {
  background: var(--superficie);
  border-top: 1px solid var(--divisoria);
  border-bottom: 1px solid var(--divisoria);
}

/* Dentro da faixa o cartao precisa se separar do fundo, que agora e o mesmo tom. */
.faixa .cartao, .faixa .cena, .faixa .lista { background: var(--fundo); }

/* -------------------------------------------------- trio de estados e listas */

.trio { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Sem justify-items: center aqui - ver a nota em .heroi-arte. A ilustracao dentro
   pede width: 100% e colapsaria do mesmo jeito. */
.trio-item {
  padding: 28px 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 16px;
  text-align: center;
}
.trio-item .status { justify-content: center; }
.trio-item h3 { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.trio-item p { color: var(--texto-secundario); font-size: 15px; line-height: 23px; }

.listas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.lista {
  padding: 28px 24px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 18px;
  align-content: start;
}
.lista h3 { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.lista ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.lista li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 15px;
  line-height: 23px;
  color: var(--texto-secundario);
}
.lista li svg { display: block; margin-top: 3px; }
.lista-nota { font-size: 14px; line-height: 22px; color: var(--texto-terciario); }

.marca-nao { color: var(--negativo); }
.marca-sim { color: var(--positivo); }

/* ------------------------------------------------------- comparativo de plano */

.comparar { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }

.comparar th, .comparar td {
  padding: 15px 12px;
  border-top: 1px solid var(--divisoria);
  text-align: left;
}

.comparar thead th {
  border-top: 0;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-terciario);
  font-weight: 500;
}

.comparar th + th, .comparar td + td { text-align: center; width: 120px; }
.comparar tbody td:first-child { color: var(--texto); }
.comparar td.sim { color: var(--positivo); }
.comparar td.nao { color: var(--texto-terciario); }
.comparar td.sim svg { display: inline-block; vertical-align: middle; }

/* ----------------------------------------------------------------------- faq */

/*
 * Elemento details nativo. Abre e fecha sem uma linha de JavaScript, funciona com
 * teclado e leitor de tela de graca, e sobrevive a pagina carregar sem script.
 */
.faq { border-top: 1px solid var(--divisoria); }
.faq details { border-bottom: 1px solid var(--divisoria); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-size: 17px;
  line-height: 25px;
  font-weight: 500;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--texto-terciario);
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--texto); }

.faq p {
  padding: 0 0 24px;
  max-width: 72ch;
  color: var(--texto-secundario);
  font-size: 15px;
  line-height: 25px;
}
.faq p strong { color: var(--texto); font-weight: 500; }

/* ------------------------------------------------------------- chamada final */

.chamada {
  padding-block: 80px;
  display: grid;
  gap: 24px;
  justify-items: center;
  text-align: center;
}
.chamada h2 { max-width: 24ch; }
.chamada p { max-width: 54ch; color: var(--texto-secundario); font-size: 17px; line-height: 27px; }

.rotulo {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

/* ------------------------------------------------------- trio de status */

.status { display: flex; align-items: center; gap: 12px; }

.ponto {
  width: 14px;
  height: 14px;
  border-radius: var(--raio-pilula);
  flex: none;
}
.ponto-seguro  { background: var(--seguro); }
.ponto-cuidado { background: var(--cuidado); }
.ponto-alerta  { background: var(--alerta); }

/* --------------------------------------------------------------------- rodape */

.rodape { border-top: 1px solid var(--divisoria); }

.rodape-grade {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 48px 0 36px;
}

.rodape-col { display: grid; gap: 12px; align-content: start; font-size: 14px; }
.rodape-col a { color: var(--texto-secundario); }
.rodape-col a:hover { color: var(--texto); }
.rodape-col .marca { margin-bottom: 4px; }
.rodape-col .marca a:hover { color: inherit; }

.rodape-titulo {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-terciario);
  margin-bottom: 2px;
}

.rodape-nota { font-size: 14px; line-height: 22px; color: var(--texto-terciario); max-width: 34ch; }

.rodape-base {
  border-top: 1px solid var(--divisoria);
  padding: 24px 0 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  color: var(--texto-terciario);
  font-size: 13px;
}

/* --------------------------------------------------------------- texto longo */

.prosa { max-width: 68ch; display: grid; gap: 20px; }
.prosa p { color: var(--texto-secundario); font-size: 16px; line-height: 26px; }
.prosa strong { color: var(--texto); font-weight: 500; }

/* -------------------------------------------------------------------- painel */

/* Sem borda propria: quem desenha a linha e o .topo-fixo em volta, senao saem duas. */
.painel-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
}

/*
 * No telefone o cabecalho do painel nao cabe em uma linha, e uma barra fixa que quebra em
 * tres linhas come metade da tela. Entao as abas descem para uma linha propria e rolam na
 * horizontal, em vez de empilhar.
 */
@media (max-width: 899px) {
  .painel-topo { padding-block: 12px; gap: 8px; }
  .painel-topo .marca-frase { display: none; }
  .painel-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .painel-nav::-webkit-scrollbar { display: none; }
  .painel-topo .acoes .botao { min-height: 42px; padding: 0 14px; font-size: 14px; }
}

.numeros {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.numero {
  padding: 18px 20px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 4px;
}

.numero-valor {
  font-size: 36px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.9px;
  font-variant-numeric: tabular-nums;
}

.numero-rotulo { font-size: 13px; line-height: 18px; color: var(--texto-secundario); }
.numero-nota { font-size: 12px; line-height: 16px; color: var(--texto-terciario); }

.numero-positivo .numero-valor { color: var(--positivo); }
.numero-alerta .numero-valor { color: var(--negativo); }

.barra-linha {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--divisoria);
  font-size: 14px;
}
.barra-linha:last-child { border-bottom: 0; }
.barra-trilha {
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-suave);
  overflow: hidden;
}
/* O arredondamento das pontas e da trilha, e nao do rect: com preserveAspectRatio
   none o rx esticaria junto com o desenho e viraria elipse. */
.barra-svg { display: block; width: 100%; height: 8px; }
.barra-svg rect { fill: var(--texto); }
.barra-valor { font-variant-numeric: tabular-nums; color: var(--texto-secundario); }

/*
 * O ponto de alerta da marca.
 *
 * A unica cor fixa da logo. Todo o resto do desenho usa currentColor e acompanha o
 * lugar onde a marca esta; o ponto nao - ele e a cor de alerta do aplicativo e o unico
 * elemento colorido da marca. Sai por classe porque var() em atributo de SVG nao
 * resolve: o valor e descartado em silencio e o desenho cai no preto inicial.
 */
.logo-ponto { fill: var(--alerta); }

/* A serie do grafico pinta por currentColor, entao muda de tom trocando color. */
.grafico { color: var(--texto); }
.grafico-alerta { color: var(--alerta); }
.g-referencia { stroke: var(--divisoria); }
.g-eixo { fill: var(--texto-terciario); }

table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabela th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-terciario);
  font-weight: 500;
  padding: 0 12px 10px 0;
}
table.tabela td {
  padding: 11px 12px 11px 0;
  border-top: 1px solid var(--divisoria);
  color: var(--texto-secundario);
  vertical-align: top;
}
table.tabela td.destaque { color: var(--texto); }
.rolagem { overflow-x: auto; }

.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-suave);
  color: var(--texto);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.etiqueta-alerta { background: var(--negativo-fundo); color: var(--negativo); }
.etiqueta-positiva { background: var(--positivo-fundo); color: var(--positivo); }
.etiqueta-aviso { background: var(--aviso-fundo); color: var(--aviso); }

.vazio {
  padding: 40px 24px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio-cartao);
  color: var(--texto-secundario);
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}

/* --------------------------------------------------------------------- login */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.entrada-caixa {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 18px;
}

label { font-size: 13px; color: var(--texto-secundario); display: grid; gap: 8px; }

/*
 * Campos de texto.
 *
 * A lista de tipos era so password e text, e o dia em que a tela de login ganhou um
 * campo de e-mail ele saiu branco - tipo de fora da lista cai no estilo padrao do
 * navegador, que num tema escuro grita. Enumerar tipo por tipo e uma armadilha que
 * dispara sempre no futuro, entao a regra passou a valer para qualquer campo de texto
 * e as excecoes saem por :not.
 *
 * color-scheme dark existe para o resto do controle acompanhar: cursor, selecao,
 * preenchimento automatico e o icone de revelar senha vem do navegador, e sem essa
 * declaracao eles continuam desenhados para fundo claro.
 */
input:not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']),
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: var(--raio-controle);
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 16px;
  color-scheme: dark;
}

input::placeholder, textarea::placeholder { color: var(--texto-terciario); }

/*
 * O preenchimento automatico do Chrome pinta o campo de amarelo por dentro, e a cor
 * nao aceita override direto. A sombra interna gigante e o unico jeito de cobrir: ela
 * fica por cima do fundo do navegador sem mexer no fundo do elemento.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--fundo) inset;
  -webkit-text-fill-color: var(--texto);
  caret-color: var(--texto);
}

.erro {
  padding: 12px 14px;
  border-radius: var(--raio-controle);
  background: var(--negativo-fundo);
  color: var(--negativo);
  font-size: 14px;
}

/* O par do .erro, para quando a acao deu certo. */
.feito {
  padding: 12px 14px;
  border-radius: var(--raio-controle);
  background: var(--positivo-fundo);
  color: var(--positivo);
  font-size: 14px;
}

/* ------------------------------------------------------ administracao do app */

/*
 * Abas do painel.
 *
 * Ficam no meio do topo, entre a marca e as acoes, pelo mesmo motivo do menu do
 * site: e o unico arranjo em que o menu continua na mesma linha da logo em qualquer
 * largura, encolhendo em vez de desaparecer.
 */
.painel-nav { display: flex; flex-wrap: wrap; gap: 4px; }

.painel-aba {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--raio-pilula);
  font-size: 14px;
  color: var(--texto-secundario);
  text-decoration: none;
  white-space: nowrap;
}
.painel-aba svg { flex: none; }
.painel-aba:hover { color: var(--texto); background: var(--superficie-suave); }
.painel-aba-atual { color: var(--texto); background: var(--superficie-suave); }

/*
 * Formulario e coluna de apoio.
 *
 * O texto que explica a consequencia de cada campo fica AO LADO do formulario, e nao
 * abaixo: essas telas mudam o comportamento do aplicativo em todos os aparelhos, e
 * um aviso que exige rolar a pagina para ser lido nao e aviso.
 */
.grade-formulario {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

.coluna-apoio { display: grid; gap: 16px; }

.formulario { display: grid; gap: 16px; }
.formulario .par { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

.formulario label.marcar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  line-height: 20px;
}

/*
 * O textarea nao pode herdar o padding do campo de uma linha: com padding zero em
 * cima o texto encosta na borda e a primeira linha fica cortada.
 */
textarea {
  min-height: 116px;
  padding: 14px 16px;
  line-height: 22px;
  resize: vertical;
}

input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--texto);
  color-scheme: dark;
}

/*
 * Escolha entre poucas opcoes, como cartao e nao como lista de radio miudo.
 *
 * A obrigatoriedade da atualizacao era consequencia de um numero ser maior que zero, e
 * quem operava nao tinha onde ler isso. Agora e uma escolha nomeada, com a consequencia
 * escrita embaixo de cada opcao - o alvo de toque e a caixa inteira, nao o circulo de
 * 20 px.
 *
 * O destaque da opcao marcada sai de :has, sem uma linha de JavaScript. Navegador que
 * nao entender :has apenas nao pinta a borda; a escolha continua funcionando.
 */
.opcoes { display: grid; gap: 10px; }

.opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-controle);
  background: var(--fundo);
  font-size: 15px;
  color: var(--texto);
  cursor: pointer;
}
.opcao:hover { border-color: var(--texto-terciario); }
.opcao > span { display: grid; gap: 4px; }
.opcao small { font-size: 12px; line-height: 17px; color: var(--texto-terciario); }
.opcao:has(input:checked) { border-color: var(--texto); background: var(--superficie-suave); }

input[type='radio'] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--texto);
  color-scheme: dark;
}

.lista-simples { display: grid; gap: 0; list-style: none; }
.lista-simples li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--divisoria);
  font-size: 14px;
  color: var(--texto-secundario);
}
.lista-simples li:last-child { border-bottom: 0; }

/*
 * Tira de estado, no alto das telas de administracao.
 *
 * A primeira versao dizia o estado dentro de uma lista de texto na coluna da direita, e
 * o efeito era exatamente o que se espera: ninguem lia. Estas telas mudam o
 * comportamento do aplicativo em todos os aparelhos, e a pergunta "o que esta valendo
 * agora" tem de ser respondida antes de qualquer campo, em tamanho que se le de longe.
 */
.tira-estado {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.estado {
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 10px;
  align-content: start;
}

.estado-topo {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--texto-terciario);
}

.estado-selo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--superficie-suave);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--texto-secundario);
}

.estado-rotulo {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.estado-valor { font-size: 19px; line-height: 25px; font-weight: 500; }
.estado-nota { font-size: 12px; line-height: 17px; color: var(--texto-terciario); }

.estado-ligado .estado-selo { background: var(--negativo-fundo); color: var(--negativo); }
.estado-ligado .estado-valor { color: var(--negativo); }
.estado-atento .estado-selo { background: var(--aviso-fundo); color: var(--aviso); }
.estado-atento .estado-valor { color: var(--aviso); }
.estado-calmo .estado-valor { color: var(--texto-terciario); }

/* ------------------------------------------------- blocos dentro do formulario */

/*
 * Cada bloco responde uma pergunta, com titulo e icone.
 *
 * Campos soltos um embaixo do outro obrigam a pessoa a montar o sentido na cabeca -
 * quem ve o aviso, o que ele diz, para onde manda. Com tres blocos nomeados, a leitura
 * ja vem separada.
 */
.bloco {
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  display: grid;
  gap: 16px;
  padding: 20px;
}

.bloco-topo { display: flex; gap: 12px; align-items: start; }
.bloco-selo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--superficie-suave);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--texto);
}
.bloco-titulo { display: grid; gap: 3px; }
.bloco-titulo strong { font-size: 15px; font-weight: 500; }
.bloco-titulo span { font-size: 13px; line-height: 19px; color: var(--texto-terciario); }

/*
 * Previa do que aparece no aparelho.
 *
 * O painel escreve texto que so vai ser visto dentro de um dialogo ou de uma
 * notificacao do Android, e escrever as cegas produz titulo que nao cabe e mensagem
 * cortada. A previa nao e enfeite: e o unico lugar onde da para julgar o tamanho antes
 * de mandar para todos os aparelhos.
 */
.previa {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-cartao);
  padding: 16px;
  display: grid;
  gap: 12px;
  background: var(--fundo);
}
.previa-rotulo {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.previa-modal {
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  padding: 18px;
  display: grid;
  gap: 10px;
  max-width: 320px;
}
.previa-modal h4 { font-size: 17px; line-height: 23px; font-weight: 500; }
.previa-modal p { font-size: 14px; line-height: 21px; color: var(--texto-secundario); }
.previa-botao {
  margin-top: 4px;
  border-radius: var(--raio-controle);
  background: var(--texto);
  color: var(--fundo);
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
}
.previa-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.previa-botao-vazado {
  margin-top: 4px;
  border-radius: var(--raio-controle);
  border: 1px solid var(--linha-forte);
  color: var(--texto-secundario);
  text-align: center;
  padding: 11px 16px;
  font-size: 14px;
}

/* Notificacao do Android: barra estreita, icone pequeno, duas linhas de texto. */
.previa-notificacao {
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  max-width: 360px;
}
.previa-icone {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--superficie-suave);
  display: grid;
  place-items: center;
  color: var(--positivo);
}
.previa-corpo { display: grid; gap: 3px; min-width: 0; }
.previa-app {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--texto-terciario);
}
.previa-corpo strong { font-size: 14px; line-height: 20px; font-weight: 500; }
.previa-corpo p { font-size: 13px; line-height: 19px; color: var(--texto-secundario); }

/* --------------------------------------------------------------------- acoes */

.linha-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.linha-acoes .botao { flex: 1 1 200px; }

/* Acao destrutiva, discreta e nomeada: apagar e desligar nao podem parecer o Salvar. */
.botao-perigo {
  border: 1px solid var(--negativo);
  background: transparent;
  color: var(--negativo);
}

.botao-mini {
  padding: 7px 12px;
  font-size: 13px;
  min-height: 0;
  border-radius: var(--raio-pilula);
}

/* Botao desligado precisa PARECER desligado, senao o clique sem efeito parece defeito. */
.botao[disabled] { opacity: 0.45; cursor: default; }

/*
 * A confirmacao do bloqueio, em caixa propria.
 *
 * Ela autoriza tirar o aplicativo do ar para quem esta atrasado. Como linha de texto
 * miuda ao lado de um quadradinho, passa batida - e passou: o primeiro desenho tinha a
 * caixa colada no rodape do formulario.
 */
.confirmar {
  border: 1px solid var(--aviso);
  background: var(--aviso-fundo);
  border-radius: var(--raio-cartao);
  padding: 16px 18px;
}
.confirmar label.marcar { color: var(--texto); font-size: 14px; }

@media (max-width: 899px) {
  .grade-formulario { grid-template-columns: 1fr; }
  .formulario .par { grid-template-columns: 1fr; }
  .previa-botoes { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ animacao do heroi */

/*
 * A linha de tempo do herói, em dez segundos: tranquilo, alguem chega, o colchete
 * cai sobre o rosto, o ponto vira vermelho na hora, duas vibracoes curtas, a pessoa
 * sai, volta ao verde.
 *
 * As cinco animacoes tem a MESMA duracao de proposito. E o que as mantem em fase sem
 * uma linha de JavaScript: qualquer duracao diferente entre elas e a vibracao começa
 * a acontecer com o ponto ainda verde depois de alguns ciclos.
 *
 * O estilo base de cada elemento e o estado de ALERTA - ponto vermelho, intruso e
 * colchete visiveis. Assim a regra de prefers-reduced-motion, que desliga animacao
 * com !important logo abaixo, deixa a ilustracao parada no quadro que interessa em
 * vez de num telefone onde nada acontece.
 *
 * A cor do ponto salta em 0,1% em vez de transitar: no aplicativo o indicador vira
 * vermelho na hora, sem desbotar de verde para vermelho, e a ilustracao nao deveria
 * prometer uma suavidade que o produto nao tem.
 */
/* Chega deslizando pela direita, com uma reduzida de escala que faz parecer que vem
   de mais longe. */
@keyframes bisbi-intruso {
  0%, 20%   { opacity: 0; transform: translate(30px, -8px) scale(.94); }
  30%, 68%  { opacity: 1; transform: translate(0, 0) scale(1); }
  78%, 100% { opacity: 0; transform: translate(30px, -8px) scale(.94); }
}

/* A varredura sai da lente uma unica vez, no instante em que a deteccao acontece.
   Ela e o unico elemento que diz "foi a camera que viu isso", e nao o telefone
   adivinhando. */
@keyframes bisbi-varredura {
  0%, 30% { opacity: 0; transform: scale(.35); }
  33%     { opacity: .9; transform: scale(.85); }
  39%     { opacity: 0; transform: scale(2.5); }
  100%    { opacity: 0; transform: scale(.35); }
}

/* Travamento: entra maior, passa um pouco do ponto e assenta. E o gesto de mira que
   qualquer pessoa reconhece de camera de foto. */
@keyframes bisbi-colchete {
  0%, 33%   { opacity: 0; transform: scale(1.4); }
  38%       { opacity: 1; transform: scale(.97); }
  41%       { opacity: 1; transform: scale(1.03); }
  44%, 68%  { opacity: 1; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes bisbi-ponto {
  0%, 35.9% { fill: var(--seguro); }
  36%, 72%  { fill: var(--alerta); }
  72.1%, 100% { fill: var(--seguro); }
}

/*
 * Tres batidas e depois solido, que e exatamente o que IndicatorView.kt faz.
 *
 * No aparelho o halo cresce ate 1,85 do raio e apaga, uma batida por segundo, seis
 * batidas, e depois o animador e cancelado e o ponto fica solido - porque um alerta
 * pode durar meia hora, e meia hora de animacao e meia hora acordando a thread
 * principal. Aqui a janela de alerta dura 3,6 s, entao cabem tres batidas de 0,89 s.
 * O ritmo e o mesmo, e a ilustracao acaba contando a decisao de bateria tambem.
 */
@keyframes bisbi-halo {
  0%, 36%     { opacity: 0; transform: scale(1); }
  36.1%       { opacity: .47; transform: scale(1); }
  45%         { opacity: 0; transform: scale(1.85); }
  45.1%       { opacity: .47; transform: scale(1); }
  54%         { opacity: 0; transform: scale(1.85); }
  54.1%       { opacity: .47; transform: scale(1); }
  63%         { opacity: 0; transform: scale(1.85); }
  63.1%, 100% { opacity: 0; transform: scale(1); }
}

/* Dois estouros curtos, iguais as duas vibracoes que o aplicativo da de verdade. O
   arco tambem afasta um pouco a cada estouro, em vez de so piscar. */
@keyframes bisbi-vibra {
  0%, 36%   { opacity: 0; transform: scale(.9); }
  37%       { opacity: 1; transform: scale(1); }
  42%       { opacity: 0; transform: scale(1.12); }
  47%       { opacity: 0; transform: scale(.9); }
  48%       { opacity: 1; transform: scale(1); }
  53%       { opacity: 0; transform: scale(1.12); }
  54%, 100% { opacity: 0; transform: scale(.9); }
}

/* O aparelho estremece nos dois estouros, e so neles. 1,6 unidade de deslocamento em
   420 de largura: da para sentir e nao da para achar que a pagina bugou. */
@keyframes bisbi-tremor {
  0%, 36%     { transform: translate(0, 0); }
  37%         { transform: translate(1.6px, 0); }
  38.2%       { transform: translate(-1.6px, 0); }
  39.4%       { transform: translate(1.2px, 0); }
  40.6%       { transform: translate(-1.2px, 0); }
  42%, 47.9%  { transform: translate(0, 0); }
  48.5%       { transform: translate(1.6px, 0); }
  49.7%       { transform: translate(-1.6px, 0); }
  50.9%       { transform: translate(1.2px, 0); }
  52.1%       { transform: translate(-1.2px, 0); }
  53.5%, 100% { transform: translate(0, 0); }
}

/* Flutuacao lenta, so para o desenho nao parecer uma captura de tela parada. Esta e
   as duas de baixo NAO precisam estar em fase com a historia - sao decorativas, e por
   isso podem ter duracao propria. */
@keyframes bisbi-flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes bisbi-camera {
  0%, 100% { opacity: .3; }
  50%      { opacity: .85; }
}

/* Os tres pontos de "digitando", em sequencia. Ritmo proprio, curto, porque conversa
   nao espera a historia do alerta. */
@keyframes bisbi-digitando {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

@keyframes bisbi-radar {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

.an-intruso   { animation: bisbi-intruso 10s ease-in-out infinite; }
.an-varredura { opacity: 0; animation: bisbi-varredura 10s ease-out infinite; }
.an-colchete  { animation: bisbi-colchete 10s ease-out infinite; }
.an-halo      { opacity: 0; animation: bisbi-halo 10s linear infinite; }
.an-vibra     { animation: bisbi-vibra 10s ease-out infinite; }
.an-tremor    { animation: bisbi-tremor 10s linear infinite; }
.an-ponto     { fill: var(--alerta); animation: bisbi-ponto 10s linear infinite; }
.an-flutua    { animation: bisbi-flutua 7s ease-in-out infinite; }
.an-camera    { animation: bisbi-camera 4s ease-in-out infinite; }
.an-radar     { animation: bisbi-radar 4s ease-in-out infinite; }
.an-radar-tarde { animation-delay: .7s; }
.an-digita    { animation: bisbi-digitando 1.4s ease-in-out infinite; }
.an-digita-2  { animation-delay: .18s; }
.an-digita-3  { animation-delay: .36s; }

/* transform em SVG gira em volta da origem do viewBox, e nao do proprio desenho:
   sem fill-box o colchete escalaria para fora da tela em vez de crescer no lugar.
   As duas animacoes que so deslocam - tremor e flutuacao - nao precisam disso. */
.an-colchete, .an-halo, .an-intruso, .an-vibra, .an-varredura {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------------------------------------------------------------------- mobile */

/*
 * O telefone nao e a tela do computador estreita, e as tres correcoes abaixo vem de
 * medir, nao de achismo. Largura util e a largura do aparelho menos 48 px de respiro
 * lateral: 342 px num aparelho de 390, 312 px num de 360.
 */

/*
 * O heroi reordenado: primeiro a manchete, depois o DESENHO, e so entao o texto.
 *
 * Em coluna unica a ilustracao caia depois de tudo, e a pessoa encarava uns 600 px de
 * texto antes de ver o produto - numa pagina cujo argumento e justamente mostrar em
 * vez de afirmar. Com display: contents os filhos do bloco de texto passam a ser itens
 * do proprio grid do heroi, e ai da para intercalar o desenho entre eles com order.
 * No computador nada disso vale e o bloco volta a ser um bloco, em duas colunas.
 */
@media (max-width: 899px) {
  .heroi { gap: 22px; padding-block: 32px 44px; }
  .heroi-texto-bloco { display: contents; }
  .heroi-selo { order: 1; }
  .heroi h1 { order: 2; max-width: none; }
  .heroi-arte { order: 3; }
  .heroi-texto { order: 4; }
  .heroi .acoes { order: 5; }
  .heroi .provas { order: 6; }

  /* 250 px de largura dao 393 px de altura. Maior que isso e a manchete sai da
     primeira tela num aparelho de 844 px de altura. */
  .ilustra-heroi { max-width: 250px; }
}

/* Tablet em pe: ainda coluna unica, mas com 720 px de largura um desenho de 250 px
   fica perdido no meio do vazio. */
@media (min-width: 700px) and (max-width: 899px) {
  .ilustra-heroi { max-width: 320px; }
}

@media (max-width: 700px) {
  .secao { padding-block: 44px; gap: 26px; }
  .chamada { padding-block: 56px; }
  .secao-titulo p { font-size: 16px; line-height: 25px; }

  /* Menos moldura, mais desenho: cada pixel de padding aqui sai da ilustracao. */
  .cena { padding: 20px 14px; gap: 18px; }
  .trio-item, .lista { padding: 24px 20px; }
  .cartao { padding: 22px 20px; }

  /* Legenda de item inteiro por linha. Centralizar texto de duas linhas ao lado de um
     ponto colorido embaralha a leitura. */
  .legenda { justify-content: flex-start; gap: 12px; }
  .legenda-item { width: 100%; }

  .provas { gap: 8px 16px; }
  .prova { font-size: 13px; }

  .faq summary { font-size: 16px; padding: 18px 0; }
  .rodape-grade { gap: 28px; padding: 40px 0 28px; }
  .rodape-col { gap: 14px; }
}

/* A tabela cabe em vez de rolar de lado. Rolagem horizontal escondida dentro de uma
   pagina que rola na vertical e um dos jeitos mais certos de a pessoa nao ver metade
   do conteudo - e aqui a metade escondida seria a coluna do Premium. */
@media (max-width: 560px) {
  .comparar { min-width: 0; font-size: 14px; }
  .comparar th, .comparar td { padding: 12px 6px; }
  .comparar th + th, .comparar td + td { width: 58px; }
}

/*
 * O cabecalho de uma linha tem orcamento fixo de largura, e agora ele carrega tres
 * coisas em vez de duas. Em 360 px sobram 312 px uteis para marca, menu e botao.
 *
 * A frase da marca sai primeiro: e repeticao do que o site inteiro explica, e libera
 * 70 px de uma vez. Ela continua no rodape, onde ha espaco, e no painel, onde carrega
 * informacao - por isso a regra e escopada em .topo.
 */
@media (max-width: 680px) {
  /* A barra encolhe, e o desvio das ancoras encolhe junto. */
  :root { --altura-topo: 72px; }
  .topo { padding-block: 16px; gap: 12px; }
  .topo .marca { gap: 10px; }
  .topo .marca-frase { display: none; }
  .topo .marca-selo { width: 38px; height: 38px; border-radius: 12px; }
  .topo-nav { gap: 15px; font-size: 14px; }
  .topo-nav a { gap: 6px; }
  .topo .botao { min-height: 42px; padding: 0 14px; font-size: 14px; gap: 8px; }
}

/*
 * Ultimo corte, e o mais barato de todos: o botao vira so o triangulo do Play.
 *
 * O icone do Play sozinho e reconhecido em qualquer lugar do mundo; a palavra "Baixar"
 * nao acrescenta nada que ele nao diga. O rotulo continua no aria-label, entao leitor
 * de tela nao perde nada, e o selo oficial completo aparece logo abaixo no heroi.
 */
@media (max-width: 470px) {
  .topo-nav { gap: 13px; font-size: 13px; }
  .topo .marca-nome { font-size: 18px; }
  .topo .botao-rotulo { display: none; }
  .topo .botao { width: 42px; padding: 0; gap: 0; }
}

/*
 * O aparelho de 360 px, que ainda e comum. Com o degrau anterior a soma dava exatos
 * 312 px em 312 disponiveis: cabia, e nao sobrava um pixel. Zero de folga e frageil -
 * basta a fonte da marca nao carregar e a substituta ser um tico mais larga. Aqui a
 * folga vai para uns 20 px, tirando um pouco de cada peca em vez de sacrificar uma.
 */
@media (max-width: 400px) {
  .topo { gap: 10px; }
  .topo-nav { gap: 12px; font-size: 12.5px; }
  .topo .marca-selo { width: 34px; height: 34px; border-radius: 11px; }
  .topo .marca-nome { font-size: 17px; }
  .topo .botao { width: 40px; }
}

/* Respeita quem pediu menos animacao no sistema. Inclui a rolagem suave: para quem
   tem sensibilidade a movimento, a pagina deslizando sozinha e justamente o problema. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}