/* =====================================================================
   proposta.css — fundação visual dos hubs do Ritto ("Bento vivo")
   Rodada 1. Folha ÚNICA, compartilhada pelas variantes A e B e pelas
   seis telas. Leia FUNDACAO.md antes de adicionar classe nova aqui.

   Regras que esta folha impõe por construção:
   - Todo hex literal vem da paleta validada do BRIEFING.md. Tint, sombra
     e fundo de chip nascem de color-mix() sobre um token — nunca de um
     hex novo. Se você precisa de uma cor que não existe, precisa de um
     color-mix, não de um hex.
   - O lima (#DDDC00) só aparece em três seletores: .valor-heroi[data-lider],
     :focus-visible e .ponto-notificacao. Nenhum outro.
   - Toda cor de dado tem par claro/escuro no bloco [data-theme="dark"].
     A rampa ordinal INVERTE a âncora lá — não é um flip automático.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS — modo claro (padrão)
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Superfícies */
  --pagina:   #F2F7F8;
  --card:     #FFFFFF;
  --hairline: #DCE6E9;
  --grade:    #EDF2F3;   /* trilhos de barra, linhas de grid, poço de ícone */

  /* Texto */
  --texto-1: #0B1F26;
  --texto-2: #4A6670;
  --texto-3: #7C959E;

  /* Marca */
  --petroleo: #0C4651;   /* institucional: superfície do tile-vitrine */
  --lima:     #DDDC00;   /* acento: underline do líder, foco, notificação */
  --branco:   #FFFFFF;   /* texto sobre petróleo e poço de logo */
  --sobre-petroleo-2: #A8BFC7; /* texto secundário sobre petróleo (é o
                                  "secundário escuro" da paleta — mesmo hex) */

  /* Categórica — ordem FIXA, 8 slots. Cor segue a entidade, nunca o rank.
     Nesta tela: slot 1 = Asaas, slot 2 = Banco Inter (fixo em A e B). */
  --serie-1: #0086a1;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;

  /* Ordinal (StageBars) — uma matiz, claro→escuro no modo claro */
  --ordinal-1: #6dbfd2;
  --ordinal-2: #35a4bd;
  --ordinal-3: #0086a1;
  --ordinal-4: #0d5062;
  --neutro:    #6E6E6E;  /* "fora da ordem", croma zero; nunca 5º passo */

  /* Status — reservados. Sempre com ícone + rótulo. */
  --bom:     #1baf7a;
  --alerta:  #eda100;
  --serio:   #eb6834;
  --critico: #e34948;

  /* Derivados (sem hex novo): tints e sombra por color-mix sobre tokens. */
  --tint-forca: 12%;
  --sombra-cor: color-mix(in oklab, var(--texto-1) 10%, transparent);
  --sombra-1: 0 1px 2px var(--sombra-cor);
  --sombra-2: 0 6px 20px -8px var(--sombra-cor), 0 1px 2px var(--sombra-cor);

  /* Tipografia — stack de sistema, zero webfont */
  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica (nome = classe .tx-<nome>) */
  --tx-display: 600 40px/44px var(--fonte);   /* número herói grande (líder) */
  --tx-heroi:   600 28px/32px var(--fonte);   /* número herói padrão */
  --tx-titulo:  600 18px/24px var(--fonte);   /* h1 da tela, título de território */
  --tx-tile:    600 15px/20px var(--fonte);   /* título de tile */
  --tx-corpo-m: 500 14px/20px var(--fonte);   /* título de link de navegação */
  --tx-corpo:   400 14px/20px var(--fonte);   /* texto corrido, hint */
  --tx-legenda: 400 12px/16px var(--fonte);   /* rótulos de chart, hints curtos */
  --tx-micro:   600 11px/14px var(--fonte);   /* eyebrow, caixa alta, tracking .06em */

  /* Espaçamento */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* Raios */
  --r-tile: 20px;   /* tile */
  --r-int:  12px;   /* elemento interno: poço de ícone, chip grande, input */
  --r-mini: 8px;    /* chip pequeno */
  --r-pill: 999px;  /* barras, badges */

  /* Grade bento */
  --gutter: 16px;
  --largura-max: 1360px;
  --linha-base: 132px; /* altura mínima de uma "linha" de tile */
}

/* ---------------------------------------------------------------------
   1b. TOKENS — modo escuro. Só o que muda.
   A rampa ordinal inverte a âncora: o passo 1 fica CLARO sobre o card
   escuro (a leitura é "distância da superfície", não "quantidade de tinta").
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --pagina:   #0B1418;
  --card:     #152328;
  --hairline: #24383F;
  --grade:    #1C2C32;

  --texto-1: #F2F7F8;
  --texto-2: #A8BFC7;
  --texto-3: #7C959E;

  --serie-1: #00a3c2;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --serie-5: #d55181;
  --serie-6: #008300;
  --serie-7: #9085e9;
  --serie-8: #e66767;

  --ordinal-1: #9fdde9;
  --ordinal-2: #6bc4d8;
  --ordinal-3: #38a9c2;
  --ordinal-4: #0f7f96;
  --neutro:    #8C8C8C;

  --bom:     #199e70;
  --alerta:  #c98500;
  --serio:   #d95926;
  --critico: #e66767;

  /* No escuro a sombra some (não há onde cair); a hairline faz o trabalho. */
  --sombra-cor: transparent;
  --tint-forca: 18%; /* tints precisam de mais força sobre card escuro */
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--pagina); }

body {
  margin: 0;
  font: var(--tx-corpo);
  color: var(--texto-1);
  background: var(--pagina);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
svg { display: block; }

/* Tudo que é clicável tem cursor pointer (CLAUDE.md). */
a, button, label, [role="button"], .clicavel { cursor: pointer; }
[disabled], [aria-disabled="true"] { cursor: not-allowed; }

/* Foco: anel lima. Uso 2 de 3 do lima. */
:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
  border-radius: var(--r-mini);
}
.tile:focus-visible { border-radius: var(--r-tile); }

/* Números: sempre tabulares (regra do projeto). */
.num, .valor-heroi, .stage-bars, .compare-bars, .metrica-mini { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   3. ESCALA TIPOGRÁFICA como utilitários
   --------------------------------------------------------------------- */
.tx-display { font: var(--tx-display); letter-spacing: -0.02em; }
.tx-heroi   { font: var(--tx-heroi);   letter-spacing: -0.01em; }
.tx-titulo  { font: var(--tx-titulo);  letter-spacing: -0.01em; }
.tx-tile    { font: var(--tx-tile); }
.tx-corpo-m { font: var(--tx-corpo-m); }
.tx-corpo   { font: var(--tx-corpo); }
.tx-legenda { font: var(--tx-legenda); }
.tx-micro   { font: var(--tx-micro); letter-spacing: 0.06em; text-transform: uppercase; }

.c-1 { color: var(--texto-1); }
.c-2 { color: var(--texto-2); }
.c-3 { color: var(--texto-3); }

/* ---------------------------------------------------------------------
   4. PÁGINA E CABEÇALHO
   --------------------------------------------------------------------- */
.pagina {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--e-6) var(--e-6) var(--e-10);
}
@media (max-width: 599px) {
  .pagina { padding: var(--e-4) var(--e-4) var(--e-8); }
}

.cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}
.cabecalho__titulo { font: var(--tx-titulo); letter-spacing: -0.01em; }
.cabecalho__sub { margin-top: var(--e-1); color: var(--texto-2); font: var(--tx-corpo); }
@media (max-width: 599px) {
  .cabecalho { flex-direction: column; align-items: stretch; }
}

/* Busca "Ir para módulo": a função da busca antiga, demovida a atalho.
   Filtra a tela in-place (ver JS mínimo em cada tela). */
.busca {
  display: block;        /* <label> é inline por padrão; precisa ser bloco para o
                            position:absolute do ícone e do atalho funcionar */
  position: relative;
  flex: 0 1 320px;
  min-width: 0;
}
@media (max-width: 599px) {
  /* No cabeçalho em coluna, flex-basis viraria ALTURA. Zera. */
  .busca { flex: none; width: 100%; }
}
.busca__campo {
  width: 100%;
  height: 40px;
  padding: 0 var(--e-4) 0 38px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-int);
  background: var(--card);
  color: var(--texto-1);
  font: var(--tx-corpo);
}
.busca__campo::placeholder { color: var(--texto-3); }
.busca__icone {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--texto-3); pointer-events: none;
}
.busca__atalho {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: var(--tx-legenda); color: var(--texto-3);
  padding: 1px 6px; border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--grade);
}
.busca__campo:focus ~ .busca__atalho { display: none; }
.sem-resultado {
  display: none;
  padding: var(--e-8) var(--e-4);
  text-align: center;
  color: var(--texto-2);
}
.pagina.is-vazia .sem-resultado { display: block; }

/* ---------------------------------------------------------------------
   5. GRADE BENTO
   12 colunas ≥ 1200px · 6 colunas 600–1199px · 2 colunas < 600px.
   Um tile declara largura com .t-3 / .t-4 / .t-5 / .t-6 / .t-7 / .t-8 / .t-12
   (colunas na grade de 12) e altura com .r-2 (duas linhas). A folha remapeia
   nos breakpoints — a tela NÃO escreve media query própria.
   --------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--linha-base), auto);
  grid-auto-flow: dense;
  gap: var(--gutter);
}
.bento + .bento { margin-top: var(--gutter); }

.t-2  { grid-column: span 2; }
.t-3  { grid-column: span 3; }
.t-4  { grid-column: span 4; }
.t-5  { grid-column: span 5; }
.t-6  { grid-column: span 6; }
.t-7  { grid-column: span 7; }
.t-8  { grid-column: span 8; }
.t-9  { grid-column: span 9; }
.t-12 { grid-column: span 12; }
.r-2  { grid-row: span 2; }

/* 600–1199: 6 colunas. Tiles largos viram meia ou uma linha; pequenos, terço/meia. */
@media (max-width: 1199px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t-2 { grid-column: span 2; }
  .t-3 { grid-column: span 3; }
  .t-4 { grid-column: span 3; }
  .t-5 { grid-column: span 6; }
  .t-6 { grid-column: span 6; }
  .t-7 { grid-column: span 6; }
  .t-8 { grid-column: span 6; }
  .t-9 { grid-column: span 6; }
  /* `.t-12` faltava aqui: `span 12` numa grade de 6 colunas cria seis colunas
     implícitas e a linha inteira desanda. O bug foi contornado em três folhas
     de extras antes de alguém olhar a origem. Abaixo de 600 o bloco seguinte
     sobrescreve para `span 2`. */
  .t-12 { grid-column: span 6; }
}

/* < 600: 2 colunas. Métricas pequenas emparelham; todo o resto ocupa a linha.
   Spans de linha são liberados: a altura passa a ser do conteúdo. */
@media (max-width: 599px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .t-2, .t-3 { grid-column: span 1; }
  .t-4, .t-5, .t-6, .t-7, .t-8, .t-9, .t-12 { grid-column: span 2; }
  .r-2 { grid-row: auto; }
  /* Tile pequeno que carrega chart ou chip longo não cabe em 171px: ocupa a linha. */
  .t-3.tile--largo-movel, .t-2.tile--largo-movel { grid-column: span 2; }
}

/* ---------------------------------------------------------------------
   6. TILE — base
   --------------------------------------------------------------------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--e-5);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
  box-shadow: var(--sombra-1);
  color: var(--texto-1);
}

/* Tile inteiro clicável (é um <a>). Hover = levanta, não muda cor. */
.tile--link {
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.tile--link:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-2);
  border-color: color-mix(in oklab, var(--texto-3) 60%, var(--hairline));
}
.tile--link:active { transform: translateY(0); }

/* Cabeçalho comum de tile: eyebrow/título à esquerda, ação à direita. */
.tile__cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.tile__titulo { font: var(--tx-tile); }
.tile__sub { margin-top: 2px; color: var(--texto-2); font: var(--tx-legenda); }
.tile__eyebrow { font: var(--tx-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.tile__rodape { margin-top: auto; padding-top: var(--e-3); }

/* Ação discreta no canto (chevron ou "ver tudo →"). */
.acao {
  display: inline-flex; align-items: center; gap: 4px;
  font: var(--tx-legenda); color: var(--texto-2);
  padding: 4px 6px; margin: -4px -6px;
  border-radius: var(--r-mini);
  cursor: pointer;
}
/* Quando a ação É o rodapé (<span class="tile__rodape acao">), as duas regras
   têm a mesma especificidade e a shorthand `margin` de `.acao` vence a
   `margin-top: auto` de `.tile__rodape` por vir depois — o link deixava de
   descer ao pé do tile. Reafirmado aqui com especificidade maior. */
.tile__rodape.acao { margin-top: auto; }
.acao:hover { color: var(--texto-1); background: var(--grade); }
.acao svg { width: 14px; height: 14px; }

/* Poço de ícone: quadrado 36px com tint da série 1 (marca). */
.poco {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-int);
  background: color-mix(in oklab, var(--serie-1) var(--tint-forca), var(--card));
  color: var(--serie-1);
}
.poco svg { width: 18px; height: 18px; }
.poco--sm { width: 28px; height: 28px; border-radius: var(--r-mini); }
.poco--sm svg { width: 15px; height: 15px; }

/* Ícone de linha genérico */
.ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ico--sm { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------
   7. TILE-MÉTRICA — rótulo + número herói + delta (+ sparkline)
   Vira <a class="tile tile--link tile-metrica"> quando leva ao módulo.
   --------------------------------------------------------------------- */
.tile-metrica { gap: var(--e-2); }
.tile-metrica__rotulo { font: var(--tx-corpo); color: var(--texto-2); }
.tile-metrica__linha { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3); }

/* ValorHeroi: número herói. [data-lider] recebe o underline lima — uso 1 de 3.
   UM por tela. Duplo sublinhado é bug de proposta, não escolha de estilo. */
.valor-heroi {
  display: inline-block;
  font: var(--tx-heroi);
  letter-spacing: -0.01em;
  color: var(--texto-1);
}
.valor-heroi--display { font: var(--tx-display); letter-spacing: -0.02em; }
.valor-heroi[data-lider] {
  padding-bottom: 4px;
  border-bottom: 3px solid var(--lima);
}
.valor-heroi small { font-size: 0.6em; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }

/* Sparkline: 12 pontos, série 1, 2px, marcador final ≥ 8px com anel de superfície. */
.sparkline { width: 96px; height: 28px; overflow: visible; flex: 0 0 auto; }
.sparkline__linha { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline__ponto { fill: var(--serie-1); stroke: var(--card); stroke-width: 2; }

/* Métrica mini (inline, para faixas dentro de território): rótulo em cima, número embaixo. */
.metrica-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
/* align-items: flex-start é o que impede o underline lima de esticar até a
   borda quando o número herói vive numa coluna flex: o traço é do NÚMERO. */
.metrica-mini__rotulo { font: var(--tx-legenda); color: var(--texto-2); }
.metrica-mini__valor { font: var(--tx-tile); color: var(--texto-1); white-space: nowrap; }

/* ---------------------------------------------------------------------
   8. CHIP DE STATUS / DELTA — ícone + rótulo, texto em token de texto.
   A cor vem do SIGNIFICADO (data-tom), nunca da direção da seta.
   --------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-pill);
  font: var(--tx-legenda);
  font-weight: 500;
  color: var(--texto-1);
  background: var(--grade);
  white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; color: var(--texto-3); }
.chip[data-tom="bom"]     { background: color-mix(in oklab, var(--bom) var(--tint-forca), var(--card)); }
.chip[data-tom="bom"] svg { color: var(--bom); }
.chip[data-tom="alerta"]     { background: color-mix(in oklab, var(--alerta) var(--tint-forca), var(--card)); }
.chip[data-tom="alerta"] svg { color: var(--alerta); }
.chip[data-tom="serio"]     { background: color-mix(in oklab, var(--serio) var(--tint-forca), var(--card)); }
.chip[data-tom="serio"] svg { color: var(--serio); }
.chip[data-tom="critico"]     { background: color-mix(in oklab, var(--critico) var(--tint-forca), var(--card)); }
.chip[data-tom="critico"] svg { color: var(--critico); }
/* neutro: sem tom (ex.: "Não conectado") — cinza de texto, sem cor de status */
.chip--neutro { color: var(--texto-2); }

/* Ponto de notificação — uso 3 de 3 do lima. Nunca sozinho: acompanha um texto. */
.ponto-notificacao {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 2px var(--card);
}

/* ---------------------------------------------------------------------
   9. TILE-STATUS — estado de um módulo (NFS-e com erro, conciliação com fila…)
   Faixa lateral na cor do status + ícone + rótulo. Sempre os três.
   --------------------------------------------------------------------- */
.tile-status { position: relative; overflow: hidden; gap: var(--e-2); }
.tile-status::before {
  content: "";
  position: absolute; left: -1px; top: 20px; bottom: 20px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--grade);
}
.tile-status[data-tom="bom"]::before     { background: var(--bom); }
.tile-status[data-tom="alerta"]::before  { background: var(--alerta); }
.tile-status[data-tom="serio"]::before   { background: var(--serio); }
.tile-status[data-tom="critico"]::before { background: var(--critico); }

/* ---------------------------------------------------------------------
   10. TILE-CHART — casco ChartCard (título, sub, ação, legenda) + corpo
   --------------------------------------------------------------------- */
.tile-chart .tile__cab { margin-bottom: var(--e-4); }
.legenda {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin: 0 0 var(--e-3);
  font: var(--tx-legenda); color: var(--texto-2);
}
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.marca { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.marca--traco { width: 14px; height: 3px; border-radius: 2px; }

/* StageBars — pílulas horizontais na rampa ordinal.
   Proporcional ao MAIOR estágio (não ao total): a maior enche o trilho. */
.stage-bars { display: flex; flex-direction: column; gap: var(--e-3); }
.stage-bars__linha {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto 2.6rem;
  align-items: center;
  gap: var(--e-3);
}
.stage-bars__rotulo { display: flex; align-items: center; gap: 8px; min-width: 0; font: var(--tx-legenda); color: var(--texto-2); }
.stage-bars__rotulo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-bars__trilho { height: 24px; border-radius: var(--r-pill); background: var(--grade); overflow: hidden; }
.stage-bars__barra { display: block; height: 100%; border-radius: var(--r-pill); min-width: 8px; }
.stage-bars__valor { font: var(--tx-corpo-m); color: var(--texto-1); white-space: nowrap; }
.stage-bars__pct { font: var(--tx-legenda); color: var(--texto-2); text-align: right; }
.stage-bars--compacto .stage-bars__trilho { height: 14px; }
.stage-bars--compacto { gap: var(--e-2); }
/* A cor do passo vem da posição na rampa. [data-passo] em vez de nth-child
   para uma faixa "fora da ordem" poder existir sem consumir passo. */
[data-passo="1"] { --cor-passo: var(--ordinal-1); }
[data-passo="2"] { --cor-passo: var(--ordinal-2); }
[data-passo="3"] { --cor-passo: var(--ordinal-3); }
[data-passo="4"] { --cor-passo: var(--ordinal-4); }
[data-passo="neutro"] { --cor-passo: var(--neutro); }
.stage-bars__barra, .stage-bars__rotulo .marca, .faixa__seg, .faixa-legenda .marca { background: var(--cor-passo); }
@media (max-width: 599px) {
  .stage-bars__linha { grid-template-columns: 1fr auto 2.6rem; }
  .stage-bars__rotulo { grid-column: 1 / -1; }
  .stage-bars__trilho { grid-column: 1; }
}

/* StackedBar ("faixa empilhada") — versão de UMA linha do StageBars, para caber
   dentro de um território. Folga de 2px na cor da superfície entre segmentos. */
.faixa { display: flex; gap: 2px; height: 12px; border-radius: var(--r-pill); overflow: hidden; }
.faixa__seg { display: block; height: 100%; min-width: 6px; }
.faixa__seg:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.faixa__seg:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.faixa-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-1) var(--e-4); margin-top: var(--e-3); }
.faixa-legenda li { display: flex; align-items: center; gap: 6px; font: var(--tx-legenda); color: var(--texto-2); min-width: 0; }
.faixa-legenda b { font-weight: 500; color: var(--texto-1); margin-left: auto; white-space: nowrap; }

/* CompareBars — medidas na MESMA unidade. Barra até 70% para o valor caber à direita. */
.compare-bars { display: flex; flex-direction: column; gap: var(--e-3); }
.compare-bars__linha { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); align-items: center; gap: var(--e-3); }
.compare-bars__rotulo { display: flex; align-items: center; gap: 8px; min-width: 0; font: var(--tx-legenda); color: var(--texto-1); }
.compare-bars__rotulo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-bars__pista { display: flex; align-items: center; gap: 10px; min-width: 0; }
.compare-bars__barra { display: block; height: 20px; border-radius: var(--r-pill); min-width: 12px; }
.compare-bars__valor { font: var(--tx-legenda); font-weight: 600; color: var(--texto-1); white-space: nowrap; }
[data-serie="1"] { --cor-serie: var(--serie-1); }
[data-serie="2"] { --cor-serie: var(--serie-2); }
[data-serie="3"] { --cor-serie: var(--serie-3); }
[data-serie="4"] { --cor-serie: var(--serie-4); }
[data-serie="5"] { --cor-serie: var(--serie-5); }
[data-serie="6"] { --cor-serie: var(--serie-6); }
[data-serie="7"] { --cor-serie: var(--serie-7); }
[data-serie="8"] { --cor-serie: var(--serie-8); }
.compare-bars__barra, .compare-bars__rotulo .marca { background: var(--cor-serie); }
@media (max-width: 599px) {
  .compare-bars__linha { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------------------------------------------------------------
   11. TILE-NAV — navegação. Três densidades.
   .nav-lista  linhas 44px com poço de ícone (dentro de território / índice)
   .nav-chip   pílula compacta com ícone (faixas, organização)
   .tile-nav   tile inteiro é um link (ícone grande + título + hint)
   --------------------------------------------------------------------- */
.nav-lista { display: flex; flex-direction: column; }
.nav-lista__item {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 44px; padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--r-int);
  cursor: pointer;
  color: var(--texto-1);
}
.nav-lista__item:hover { background: var(--grade); }
.nav-lista__item:hover .nav-lista__chev { color: var(--texto-1); transform: translateX(2px); }
.nav-lista__texto { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.nav-lista__titulo { font: var(--tx-corpo-m); display: flex; align-items: center; gap: 8px; }
.nav-lista__hint { font: var(--tx-legenda); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-lista__chev { width: 14px; height: 14px; color: var(--texto-3); transition: transform 120ms ease, color 120ms ease; flex: 0 0 auto; }
.nav-lista--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-3); }
@media (max-width: 599px) { .nav-lista--2col { grid-template-columns: minmax(0, 1fr); } }
/* Sem isto o item (flex) tem largura mínima `auto` e um hint longo — como
   "Campos personalizados no checkout e no cadastro de contatos" — estica a
   coluna além do viewport (scrollWidth 453 num quadro de 390).
   `gestao-negocios` não tropeçou porque os hints de lá são curtos. */
.nav-lista--2col > .nav-lista__item { min-width: 0; }

/* Item de índice: sem poço, ícone nu, uma linha. Densidade máxima (Cockpit). */
.nav-lista--indice .nav-lista__item { min-height: 36px; padding: 4px 8px; gap: 10px; }
.nav-lista--indice .ico { color: var(--texto-3); }
.nav-lista--indice .nav-lista__item:hover .ico { color: var(--serie-1); }
.nav-lista--indice .chip { padding: 0 6px 0 4px; font-size: 11px; line-height: 16px; }
.nav-lista--indice .nav-lista__chev { display: none; } /* 25 chevrons são ruído; o hover já diz que é link */
.nav-lista--indice .nav-lista__titulo { flex-wrap: wrap; row-gap: 2px; }
.nav-lista--indice .chip svg { width: 11px; height: 11px; }

.nav-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 14px 6px 10px;
  border: 1px solid var(--hairline); border-radius: var(--r-int);
  background: var(--card); color: var(--texto-1);
  font: var(--tx-corpo-m);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.nav-chip .ico { color: var(--serie-1); }
.nav-chip:hover { background: var(--grade); border-color: color-mix(in oklab, var(--texto-3) 60%, var(--hairline)); }
.nav-chip small { font: var(--tx-legenda); color: var(--texto-2); }
.nav-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.tile-nav { gap: var(--e-3); justify-content: space-between; }
.tile-nav__titulo { font: var(--tx-tile); }
.tile-nav__hint { font: var(--tx-legenda); color: var(--texto-2); }

/* ---------------------------------------------------------------------
   12. TILE-GRUPO (território) — variante B. Um domínio inteiro num tile:
   cabeçalho (eyebrow numerado + título + "n módulos"), dado vivo embutido,
   lista de links. O tamanho do território é a hierarquia.
   --------------------------------------------------------------------- */
.tile-grupo { gap: 0; }
.tile-grupo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.tile-grupo__titulo { font: var(--tx-titulo); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; }
.tile-grupo__n { font: var(--tx-micro); letter-spacing: 0.06em; color: var(--texto-3); }
.tile-grupo__vivo {
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-4);
  margin-bottom: var(--e-3);
  border-radius: var(--r-int);
  background: var(--pagina);   /* o dado vivo fica "afundado" no território */
}
[data-theme="dark"] .tile-grupo__vivo { background: color-mix(in oklab, var(--pagina) 60%, var(--card)); }
.tile-grupo__vivo--faixa { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--e-4) var(--e-8); align-items: flex-end; }
.tile-grupo__vivo--faixa > * { flex: 0 1 auto; }
.tile-grupo .nav-lista { margin-top: auto; }
.tile-grupo.is-vazio { opacity: 0.4; }

/* ---------------------------------------------------------------------
   13. TILE-LOGO — gateway: poço branco com logo + badge ativo/inativo.
   Poço é branco nos dois modos (as marcas são desenhadas para fundo claro).
   No protótipo o logo é um monograma SVG; em produção, /integrations/*.svg.
   --------------------------------------------------------------------- */
.logo-poco {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-int);
  background: var(--branco);
  border: 1px solid var(--hairline);
  color: var(--petroleo);
}
.logo-poco svg { width: 22px; height: 22px; }
.logo-poco--lg { width: 44px; height: 44px; }
.logo-poco--lg svg { width: 26px; height: 26px; }
/* Logo de marca como <img>: mesma caixa do monograma SVG. `contain` porque
   nem toda logo de parceiro é quadrada (Sicoob é PNG, ValidaPay é JPEG). */
.logo-poco img { width: 22px; height: 22px; object-fit: contain; display: block; }
.logo-poco--lg img { width: 26px; height: 26px; }
/* Gateway inativo: poço dessaturado, texto rebaixado — não escondido. */
.is-inativo .logo-poco { color: var(--neutro); border-style: dashed; }
.is-inativo .nav-lista__titulo { color: var(--texto-2); }

.tile-logo { flex-direction: row; align-items: center; gap: var(--e-3); padding: var(--e-4); }
.tile-logo__texto { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tile-logo__titulo { font: var(--tx-corpo-m); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile-logo__hint { font: var(--tx-legenda); color: var(--texto-2); }
.gateways-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
.gateways-grade .tile-logo { padding: var(--e-3); border-radius: var(--r-int); box-shadow: none; }
@media (max-width: 599px) { .gateways-grade { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   14. TILE-VITRINE — a única superfície em petróleo. UM por tela, no máximo.
   Carrega o KPI líder (Cockpit) ou uma chamada à ação. Texto em branco /
   secundário-escuro; ambos hex da paleta. O lima do líder brilha aqui.
   --------------------------------------------------------------------- */
.tile-vitrine {
  background: var(--petroleo);
  border-color: var(--petroleo);
  color: var(--branco);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.tile-vitrine .tile__eyebrow,
.tile-vitrine .tile-metrica__rotulo,
.tile-vitrine .c-2,
.tile-vitrine .metrica-mini__rotulo { color: var(--sobre-petroleo-2); }
.tile-vitrine .valor-heroi,
.tile-vitrine .metrica-mini__valor,
.tile-vitrine .c-1 { color: var(--branco); }
.tile-vitrine .chip { background: color-mix(in oklab, var(--branco) 14%, var(--petroleo)); color: var(--branco); }
.tile-vitrine .acao { color: var(--sobre-petroleo-2); }
/* `small` do número herói herdava `--texto-2`, ilegível sobre o petróleo no claro. */
.tile-vitrine .valor-heroi small { color: var(--sobre-petroleo-2); }
.tile-vitrine .acao:hover { color: var(--branco); background: color-mix(in oklab, var(--branco) 12%, var(--petroleo)); }
.tile-vitrine .divisor { border-color: color-mix(in oklab, var(--branco) 18%, var(--petroleo)); }
/* Marca-d'água geométrica: círculos concêntricos na própria cor, 8% de branco. */
.tile-vitrine__marca {
  position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px;
  color: color-mix(in oklab, var(--branco) 10%, transparent);
  pointer-events: none;
}
.tile-vitrine > * { position: relative; }
.tile-vitrine > .tile-vitrine__marca { position: absolute; }

.divisor { border: 0; border-top: 1px solid var(--hairline); margin: var(--e-3) 0; }

/* ---------------------------------------------------------------------
   15. TILE-ÍNDICE — variante A. Os 25 módulos numa grade de colunas
   por domínio, densidade máxima. Substitui as duas colunas de cards.
   --------------------------------------------------------------------- */
.indice { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); }
.indice__grupo { min-width: 0; }
.indice__grupo.is-vazio { display: none; }
.indice__titulo { font: var(--tx-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); padding: 0 8px; margin-bottom: var(--e-2); display: flex; align-items: center; gap: 8px; }
.indice__titulo .marca { width: 6px; height: 6px; background: var(--serie-1); }
@media (max-width: 1199px) { .indice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .indice { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--e-3); } }

/* Filtro da busca */
[hidden] { display: none !important; }


/* ===== landing ===== */
/* =====================================================================
   extras/landing-v5.css — v5 da landing pública da Ritto.

   Contrato com o shell (docs/proposta-layout): esta folha é linkada DEPOIS
   de proposta.css e herda dela os tokens de superfície (--pagina, --card,
   --hairline, --grade, --texto-1/2/3), que já têm par em [data-theme="dark"].
   Os blocos claros da landing usam esses tokens, então o toggle claro/escuro
   do shell funciona de verdade. O petróleo (#0C4651) e o lima (#DDDC00) são
   os do kit e não mudam com o tema: são a marca. As réplicas de UI (WhatsApp
   iOS, Gmail, e-mail transacional) usam as cores reais dessas interfaces.

   Objetivo da página: agendar demonstração. Nada de self-checkout.
   ===================================================================== */

@font-face { font-family: "Sora"; src: url("/a/08d9cd36a6/assets/fontes/sora.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/a/08d9cd36a6/assets/fontes/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --petroleo-fundo: color-mix(in oklab, var(--petroleo) 86%, black);   /* nav, rodapé, moldura: único tom mais fundo */
  --petroleo-card: color-mix(in oklab, var(--petroleo) 90%, white);
  --petroleo-card-2: color-mix(in oklab, var(--petroleo) 80%, white);
  --petroleo-claro: color-mix(in oklab, var(--petroleo) 55%, white);
  --petroleo-tinta: color-mix(in oklab, var(--petroleo) 8%, var(--card));
  --lima-escuro: color-mix(in oklab, var(--lima) 80%, var(--petroleo));
  --lima-brilho: color-mix(in oklab, var(--lima) 32%, transparent);
  --ok: #00C48C;
  --erro: #F03E3E;

  /* Superfícies claras: do shell. */
  --superficie: var(--pagina);
  --cartao: var(--card);
  --linha: var(--hairline);
  --tinta: var(--texto-1);
  --tinta-2: var(--texto-2);
  --tinta-3: var(--texto-3);

  --sobre-1: #FFFFFF;
  --sobre-2: rgba(255,255,255,.74);
  --sobre-3: rgba(255,255,255,.48);
  --linha-v: rgba(255,255,255,.12);
  --linha-v-forte: rgba(255,255,255,.22);

  --fonte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Sora", var(--fonte);
  --fonte-ios: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --largura: 1200px;
  --facil: cubic-bezier(.2,.7,.2,1);
  --mola: cubic-bezier(.34,1.4,.64,1);
  --sombra-flutua: 0 40px 80px -32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.2);
  --sombra-cartao: 0 1px 2px var(--sombra-cor), 0 24px 40px -28px color-mix(in oklab, var(--texto-1) 35%, transparent);
}
[data-theme="dark"] {
  --petroleo-tinta: color-mix(in oklab, var(--petroleo) 40%, var(--card));
  --sombra-cartao: 0 0 0 1px var(--hairline);
}

/* ---------------------------------------------------------------- Base */
html { background: var(--petroleo); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 var(--fonte); color: var(--sobre-1); background: var(--petroleo); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }
::selection { background: var(--lima); color: var(--petroleo); }

.wrap { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
@media (min-width: 900px) { .wrap { width: min(100% - 80px, var(--largura)); } }
.secao { position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.secao--claro { background: var(--superficie); color: var(--tinta); }
.secao--petroleo { background: var(--petroleo); color: var(--sobre-1); }
.secao__cab { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.secao__cab .tx-lead { margin-top: 18px; }
.secao__cab--centro { margin-inline: auto; text-align: center; }
.secao__cab--centro .eyebrow { justify-content: center; }

.grade::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, black 20%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, black 20%, transparent 100%); }
.grade > * { position: relative; z-index: 1; }
.brilho::after { content: ""; position: absolute; z-index: 0; pointer-events: none; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, var(--lima-brilho) 0%, transparent 62%); filter: blur(40px); opacity: .5; }

/* ---------------------------------------------------------------- Tipografia */
h1, h2, h3, .tx-titulo { font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: -0.03em; }
.tx-h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.tx-h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.tx-h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; }
.tx-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.secao--petroleo .tx-lead, .hero .tx-lead { color: var(--sobre-2); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/16px var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--lima); }
.secao--petroleo .eyebrow, .hero .eyebrow { color: var(--sobre-2); }
.marca-lima { color: var(--lima); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Botões */
.botao { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); color: var(--tinta); font: 500 15px/20px var(--fonte); white-space: nowrap; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 200ms var(--facil), box-shadow 200ms ease; will-change: transform; }
.botao .ic { width: 16px; height: 16px; }
.botao:hover { background: var(--grade); }
.botao--lima { background: var(--lima); border-color: var(--lima); color: var(--petroleo); font-weight: 600; box-shadow: 0 0 0 0 var(--lima-brilho), 0 8px 24px -12px rgba(221,220,0,.6); }
.botao--lima:hover { background: color-mix(in oklab, var(--lima) 88%, white); box-shadow: 0 0 0 6px var(--lima-brilho), 0 12px 28px -12px rgba(221,220,0,.7); }
.botao--petroleo { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.botao--petroleo:hover { background: var(--petroleo-card-2); border-color: var(--petroleo-card-2); }
.botao--vidro { background: rgba(255,255,255,.07); border-color: var(--linha-v-forte); color: var(--sobre-1); backdrop-filter: blur(8px); }
.botao--vidro:hover { background: rgba(255,255,255,.13); }
.botao--fantasma { background: transparent; border-color: transparent; color: var(--sobre-2); }
.botao--fantasma:hover { background: rgba(255,255,255,.08); color: var(--sobre-1); }
.botao--lg { min-height: 58px; padding: 0 28px; font-size: 16px; border-radius: 16px; }
.botao--sm { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.botao[disabled] { opacity: .6; cursor: not-allowed; }
.botao--bloco { width: 100%; }

/* ---------------------------------------------------------------- Etiquetas / poços */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--sobre-1); font: 500 12px/16px var(--fonte); white-space: nowrap; }
.etiqueta .ic { width: 13px; height: 13px; }
.etiqueta--ok { color: #6FF0C5; } .etiqueta--ok .ic { color: var(--ok); }
.etiqueta--lima { background: var(--lima); color: var(--petroleo); font-weight: 600; }
.secao--claro .etiqueta { background: var(--petroleo-tinta); color: var(--tinta); }
[data-theme="dark"] .secao--claro .etiqueta { color: var(--sobre-1); }
.icone-poco { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--petroleo-tinta); color: var(--petroleo); flex: none; }
[data-theme="dark"] .icone-poco { color: var(--lima); }
.icone-poco--v { background: rgba(255,255,255,.1); color: var(--lima); }
.icone-poco img { width: 26px; height: 26px; object-fit: contain; }
/* Placas brancas para os logos de parceiros sobre o petróleo (Meta Business Partner e Open Finance Brasil) */
.placa { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px -16px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.12); }
.placa img { display: block; width: auto; }
.placa--meta img { height: 64px; }
.placa--of img { height: 34px; }
.placa--md { padding: 10px 14px; border-radius: 12px; }
.placa--md.placa--meta img { height: 44px; }
.placa--md.placa--of img { height: 24px; }
.placa--lg { padding: 16px 22px; }
.placa--lg.placa--of img { height: 40px; }
.hero__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
/* Foto do fundador com fallback (iniciais num círculo petróleo quando o arquivo não existe) */
.foto { position: relative; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--petroleo); color: var(--lima); flex: none; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto i { display: none; font: 700 1em/1 var(--fonte-titulo); font-style: normal; }
.foto.is-sem-foto img { display: none; }
.foto.is-sem-foto i { display: block; }
.foto--sm { width: 40px; height: 40px; font-size: 13px; }
.foto--lg { width: 220px; height: 220px; font-size: 64px; box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.6); }
/* Retrato do CTA final: recorte 4:5 arredondado, borda lima sutil, brilho e legenda em degradê */
.foto--retrato { width: 320px; aspect-ratio: 4 / 5; border-radius: 28px; font-size: 72px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--lima) 55%, transparent), 0 0 0 12px color-mix(in oklab, var(--lima) 10%, transparent), 0 40px 80px -40px rgba(0,0,0,.7); }
.foto--retrato img { object-position: 50% 18%; transform: scale(1.06); transform-origin: 50% 20%; }
.foto--retrato::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,40,47,.85) 0%, rgba(6,40,47,.2) 38%, transparent 60%); pointer-events: none; }
.foto--retrato b { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: #fff; font: 600 16px/20px var(--fonte); text-align: left; }
.foto--retrato b small { display: block; font: 500 12px/16px var(--fonte); color: var(--lima); margin-top: 2px; }
.foto--retrato.is-sem-foto::after { display: none; }
.foto--retrato.is-sem-foto b { display: none; }
@media (max-width: 899px) { .foto--lg { width: 150px; height: 150px; font-size: 44px; } .foto--retrato { width: min(280px, 100%); font-size: 56px; } }

/* ---------------------------------------------------------------- Revelação */
.revela { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 900ms var(--facil); transition-delay: var(--atraso, 0ms); }
.revela.is-visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- Nav */
.nav { position: sticky; top: 0; z-index: 60; color: var(--sobre-1); background: color-mix(in oklab, var(--petroleo-fundo) 80%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.nav.is-rolada { border-bottom-color: var(--linha-v); }
.nav .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; gap: 2px; margin-left: 4px; }
.nav__links a { padding: 8px 11px; border-radius: 10px; font: 500 14px/20px var(--fonte); color: var(--sobre-2); white-space: nowrap; transition: color 120ms ease, background 120ms ease; }
.nav__links a:hover { color: var(--sobre-1); background: rgba(255,255,255,.07); }
.nav__links a[aria-current="page"] { color: var(--sobre-1); box-shadow: inset 0 -2px 0 var(--lima); border-radius: 0; }
.nav__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 10px; place-items: center; }
@media (max-width: 1099px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
  .nav.is-aberta .nav__links { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; padding: 12px 16px 20px; background: var(--petroleo-fundo); border-bottom: 1px solid var(--linha-v); }
  .nav.is-aberta .nav__links a { font-size: 17px; padding: 12px 8px; }
}
.nav__entrar-movel { display: none !important; }
@media (max-width: 599px) {
  .nav.is-aberta .nav__links .nav__entrar-movel { display: flex !important; order: 99; justify-content: center; margin-top: 10px; min-height: 48px; align-items: center; border: 1px solid var(--linha-v); border-radius: 14px; color: var(--sobre-1); font-weight: 600; }
}
@media (max-width: 599px) { .nav .botao--fantasma { display: none; } .nav__acoes .botao--lima { min-height: 44px; padding: 0 14px; font-size: 14px; } }

/* ================================================================== HERO */
.hero { position: relative; overflow: hidden; background: var(--petroleo); color: var(--sobre-1); padding: clamp(32px, 4vw, 48px) 0 clamp(48px, 6vw, 72px); isolation: isolate; }
.hero.brilho::after { right: -220px; top: -260px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero__h1 em { font-style: normal; color: var(--lima); }
.hero__h1 .risco { position: relative; display: inline-block; }
.hero__h1 .risco::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .08em; border-radius: 4px; background: var(--lima); transform-origin: left; transform: scaleX(0); animation: risco 900ms var(--facil) 500ms forwards; }
@keyframes risco { to { transform: scaleX(1); } }
.hero .tx-lead { max-width: 540px; margin-top: 24px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__prova { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; color: var(--sobre-2); font: 500 13px/18px var(--fonte); }
.hero__prova li { display: inline-flex; align-items: center; gap: 7px; }
.hero__prova .ic { width: 15px; height: 15px; color: var(--lima); }

.palco { position: relative; display: flex; justify-content: flex-start; align-items: center; min-height: 700px; }
.palco__telefone { position: relative; z-index: 2; }
.palco__telefone .iphone { --fw: 352px; }
.palco__painel { position: absolute; z-index: 1; right: -48px; bottom: 48px; width: 250px; }
.palco__notifs { position: absolute; z-index: 4; right: -48px; top: 40px; width: 250px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1279px) { .palco__telefone .iphone { --fw: 340px; } .palco__painel, .palco__notifs { right: -24px; } }
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .palco { min-height: 0; margin-top: 12px; flex-direction: column; }
  .palco__painel { position: static; width: 100%; max-width: 380px; margin-top: 16px; }
  .palco__notifs { left: auto; right: 4px; top: 16px; width: min(280px, 80%); }
}

.painel { background: var(--petroleo-card); border: 1px solid var(--linha-v-forte); border-radius: 20px; padding: 18px 18px 16px; box-shadow: var(--sombra-flutua); color: var(--sobre-1); }
.painel__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.painel__cab img { height: 16px; width: auto; }
.painel__rotulo { font: 500 12px/16px var(--fonte); color: var(--sobre-2); }
.painel__valor { font: 600 30px/34px var(--fonte-titulo); letter-spacing: -0.03em; margin-top: 4px; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.painel__valor > span { white-space: nowrap; }
.painel__valor small { font: 500 12px/16px var(--fonte); color: #6FF0C5; }
.painel__grafico { margin-top: 12px; }
.painel__grafico svg { width: 100%; height: auto; }
.painel__linha { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha-v); font: 500 12px/16px var(--fonte); color: var(--sobre-2); }
.painel__linha b { color: var(--sobre-1); font-weight: 600; }

.notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; color: #1A1A1A; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.15); opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity 400ms ease, transform 500ms var(--mola); }
.notif.is-in { opacity: 1; transform: none; }
.notif.is-out { opacity: 0; transform: translateY(6px) scale(.98); }
.notif__ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #EEF3F4; flex: none; }
.notif__ico img { width: 20px; height: 20px; object-fit: contain; }
.notif__t { display: flex; align-items: center; gap: 6px; font: 600 13px/16px var(--fonte); }
.notif__t i { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px var(--lima-brilho); }
.notif__s { display: block; font: 400 12px/16px var(--fonte); color: #5A5A5A; }

/* ================================================================== iPHONE + WhatsApp iOS */
.iphone { --fw: 340px; --raio: calc(var(--fw) * .155); position: relative; width: var(--fw); height: calc(var(--fw) * 844 / 390); border-radius: var(--raio); background: #0B1214; padding: calc(var(--fw) * .028); box-shadow: 0 0 0 calc(var(--fw) * .006) #2A3437, 0 0 0 calc(var(--fw) * .014) #0B1214, 0 60px 100px -40px rgba(0,0,0,.7), 0 20px 40px -20px rgba(0,0,0,.5); flex: none; }
.iphone::before { content: ""; position: absolute; left: -2px; top: 16%; width: 3px; height: 6%; background: #1c2528; border-radius: 2px 0 0 2px; box-shadow: 0 calc(var(--fw) * .1) 0 #1c2528, calc(var(--fw) + 1px) calc(var(--fw) * .06) 0 #1c2528, calc(var(--fw) + 1px) calc(var(--fw) * .16) 0 #1c2528; }
.iphone__tela { position: relative; width: 100%; height: 100%; min-height: 0; border-radius: calc(var(--raio) - var(--fw) * .028); overflow: hidden; background: #EFEAE2; font-family: var(--fonte-ios); font-size: calc(var(--fw) * 17 / 390); line-height: 1.3; color: #111B21; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
.iphone__ilha { position: absolute; z-index: 30; left: 50%; top: calc(var(--fw) * .028); transform: translateX(-50%); width: calc(var(--fw) * .32); height: calc(var(--fw) * .09); border-radius: 999px; background: #000; }
.iphone__status { position: relative; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--fw) * .04) calc(var(--fw) * .07) 0; height: calc(var(--fw) * .135); font-size: .95em; font-weight: 600; letter-spacing: -.01em; background: #F6F6F6; }
.iphone__status svg { height: .75em; width: auto; }
.iphone__status .st-ico { display: flex; gap: .3em; align-items: center; }
.iphone__home { position: absolute; z-index: 30; left: 50%; bottom: calc(var(--fw) * .02); transform: translateX(-50%); width: calc(var(--fw) * .35); height: calc(var(--fw) * .012); border-radius: 999px; background: #111; opacity: .9; }

.wa__topo { position: relative; z-index: 10; display: flex; align-items: center; gap: .5em; padding: .35em .6em .55em; background: #F6F6F6; border-bottom: .5px solid #C8C7CC; }
.wa__voltar { display: flex; align-items: center; color: #007AFF; gap: .1em; font-size: 1em; }
.wa__voltar svg { width: .75em; height: 1.2em; }
.wa__voltar b { font-weight: 400; font-size: .95em; }
.wa__avatar { width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--petroleo); color: var(--lima); display: grid; place-items: center; font: 700 .95em/1 var(--fonte-titulo); overflow: hidden; flex: none; }
.wa__quem { flex: 1; min-width: 0; text-align: left; }
.wa__nome { display: flex; align-items: center; gap: .25em; font-weight: 600; font-size: .95em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa__selo { width: .9em; height: .9em; flex: none; }
.wa__status { font-size: .75em; color: #8E8E93; line-height: 1.2; }
.wa__acoes { display: flex; gap: .9em; color: #007AFF; }
.wa__acoes svg { width: 1.25em; height: 1.25em; }

.wa__corpo { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: .5em .6em 0; background: #EFEAE2 url("/a/08d9cd36a6/assets/wa-doodle.svg") center / 11em auto; display: flex; flex-direction: column; gap: .2em; }
/* Conversa curta fica no pé (como no WhatsApp); conversa longa rola normalmente, sem o vazio inalcançável do flex-end. */
.wa__corpo > :first-child { margin-top: auto; }
.wa__corpo::before { content: ""; position: absolute; inset: 0; background: rgba(239,234,226,.74); pointer-events: none; }
.wa__corpo > * { position: relative; }
.wa__data { align-self: center; margin: .3em 0 .5em; padding: .3em .6em; border-radius: .5em; background: rgba(255,255,255,.92); color: #6B7377; font-size: .72em; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 1px .5px rgba(0,0,0,.08); }
.wa__toast { position: absolute; z-index: 35; left: 50%; bottom: 4.2em; transform: translate(-50%, .6em); padding: .5em .9em; border-radius: .6em; background: rgba(17,27,33,.92); color: #fff; font-size: .8em; white-space: nowrap; opacity: 0; transition: opacity 250ms ease, transform 300ms var(--facil); pointer-events: none; }
.wa__toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* Balão. A estrutura do template oficial segue OficialPhonePreview.tsx:
   cabeçalho (PDF/imagem) → faixa "Pagar com" → corpo → rodapé → hora → botões. */
.balao { position: relative; max-width: 88%; margin-bottom: .25em; font-size: 1em; animation: balao-entra 380ms var(--mola) both; transform-origin: left bottom; }
.balao--in { align-self: flex-start; }
.balao--out { align-self: flex-end; transform-origin: right bottom; }
.balao__caixa { position: relative; border-radius: .75em; background: #FFFFFF; box-shadow: 0 1px .5px rgba(0,0,0,.13); overflow: hidden; }
.balao--out .balao__caixa { background: #DCF8C6; }
.balao--in .balao__caixa { border-top-left-radius: .2em; }
.balao--in::before { content: ""; position: absolute; left: -.42em; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 .5em .6em 0; border-color: transparent #FFFFFF transparent transparent; filter: drop-shadow(-1px 1px .5px rgba(0,0,0,.08)); }
.balao--out .balao__caixa { border-top-right-radius: .2em; }
.balao--out::before { content: ""; position: absolute; right: -.42em; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 .6em .5em; border-color: transparent transparent transparent #DCF8C6; filter: drop-shadow(1px 1px .5px rgba(0,0,0,.08)); }
@keyframes balao-entra { from { opacity: 0; transform: translateY(.5em) scale(.92); } to { opacity: 1; transform: none; } }
/* Cabeçalho DOCUMENT: miniatura da 1ª página + nome + "PDF · 1 página" */
.balao__pdf { display: flex; align-items: center; gap: .6em; padding: .5em .6em; background: #F5F6F6; }
.balao__mini { position: relative; flex: none; width: 2.4em; height: 3.1em; border-radius: .2em; background: #fff; box-shadow: 0 0 0 .5px #D0D4D8, 0 1px 2px rgba(0,0,0,.12); overflow: hidden; }
.balao__mini::before { content: ""; position: absolute; left: .3em; right: .3em; top: .35em; height: .22em; border-radius: 1px; background: var(--petroleo); box-shadow: 0 .42em 0 -.05em #C8CDD1, 0 .8em 0 -.05em #C8CDD1, 0 1.18em 0 -.05em #DDE1E4, 0 1.56em 0 -.05em #DDE1E4; }
.balao__mini::after { content: ""; position: absolute; left: .3em; right: .3em; bottom: .3em; height: .55em; background: repeating-linear-gradient(to right, #111 0 1px, transparent 1px 2px, #111 2px 4px, transparent 4px 5px, #111 5px 6px, transparent 6px 8px); }
.balao__mini--nfse::before { background: var(--petroleo); box-shadow: 0 .42em 0 -.05em #C8CDD1, 0 .8em 0 -.05em #C8CDD1, 0 1.18em 0 -.05em #C8CDD1, 0 1.56em 0 -.05em #DDE1E4, 0 1.94em 0 -.05em #DDE1E4; }
.balao__mini--nfse::after { height: .3em; background: #DDE1E4; }
.balao__pdf-nome { font-size: .92em; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111B21; }
.balao__pdf-meta { font-size: .7em; color: #667781; margin-top: .15em; }
/* Faixa "Pagar com" com as formas do modelo (Pix, boleto, cartão) */
.balao__pagar { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .5em .6em; border-bottom: .5px solid #E4E6E8; }
.balao__pagar span { font-size: .82em; color: #667781; }
.balao__pagar i { display: flex; align-items: center; gap: .4em; }
.balao__pagar img { height: .85em; width: auto; }
.balao__pagar img[alt="Boleto"] { height: .8em; }
.balao__pagar img[alt="Visa"] { height: .62em; }
.balao__pagar img[alt="Mastercard"] { height: .78em; }
.balao__txt { padding: .38em .5em .3em .6em; white-space: pre-wrap; word-wrap: break-word; }
.balao__txt b { font-weight: 600; }
.balao__txt .link { color: #027EB5; text-decoration: underline; overflow-wrap: anywhere; }
.balao__txt .link .fim { white-space: nowrap; }
.balao__rodape { padding: 0 .6em; margin-top: -.15em; font-size: .72em; color: #667781; }
.balao__meta { display: flex; justify-content: flex-end; align-items: center; gap: .2em; padding: 0 .45em .3em 0; margin-top: -.45em; font-size: .68em; color: #667781; line-height: 1; }
.balao__meta svg { width: 1.35em; height: .9em; }
.balao__meta .ticks--azul { color: #53BDEB; }
.balao__meta .ticks--cinza { color: #8696A0; }
.balao__botoes { border-top: .5px solid #E4E6E8; }
.balao__botao { display: flex; align-items: center; justify-content: center; gap: .35em; padding: .55em .5em; color: #027EB5; font-size: .95em; font-weight: 500; border-top: .5px solid #E4E6E8; background: #FFFFFF; transition: background 120ms ease; }
.balao__botao:first-child { border-top: 0; }
.balao__botao svg { width: 1em; height: 1em; }
.balao__botao.is-tocado { background: #E9F1F5; }

.wa__rodape { position: relative; z-index: 10; display: flex; align-items: center; gap: .5em; padding: .4em .6em calc(var(--fw) * .07); background: #F6F6F6; border-top: .5px solid #C8C7CC; color: #007AFF; }
.wa__rodape svg { width: 1.45em; height: 1.45em; flex: none; }
.wa__input { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 2em; padding: 0 .5em 0 .7em; border-radius: 1em; background: #FFFFFF; border: .5px solid #C8C7CC; color: #8E8E93; font-size: .95em; }
.wa__input svg { width: 1.2em; height: 1.2em; color: #8E8E93; }

.ios-notif { position: absolute; z-index: 40; left: .5em; right: .5em; top: calc(var(--fw) * .14); display: flex; gap: .55em; align-items: center; padding: .6em .7em; border-radius: 1.2em; background: rgba(245,245,247,.88); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 10px 30px -8px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.06); color: #111; transform: translateY(-160%); opacity: 0; transition: transform 550ms var(--mola), opacity 300ms ease; }
.ios-notif.is-in { transform: none; opacity: 1; }
.ios-notif.is-out { transform: translateY(-160%); opacity: 0; transition: transform 350ms ease-in, opacity 250ms ease; }
.ios-notif__app { width: 2.2em; height: 2.2em; border-radius: .55em; background: #25D366; display: grid; place-items: center; flex: none; }
.ios-notif__app svg { width: 1.5em; height: 1.5em; }
.ios-notif__txt { flex: 1; min-width: 0; }
.ios-notif__cab { display: flex; justify-content: space-between; align-items: baseline; font-size: .82em; }
.ios-notif__cab b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-notif__cab span { color: #8E8E93; font-size: .85em; flex: none; margin-left: .5em; }
.ios-notif__corpo { font-size: .82em; line-height: 1.25; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pix-folha { position: absolute; z-index: 35; left: 0; right: 0; bottom: 0; padding: 1em .9em 1.6em; border-radius: 1.2em 1.2em 0 0; background: #FFFFFF; box-shadow: 0 -10px 40px rgba(0,0,0,.25); transform: translateY(110%); transition: transform 500ms var(--facil); color: #111; }
.pix-folha.is-in { transform: none; }
.pix-folha__puxador { width: 2.2em; height: .28em; border-radius: 999px; background: #D1D1D6; margin: 0 auto .8em; }
.pix-folha__cab { display: flex; align-items: center; gap: .5em; font-size: .8em; color: #666; }
.pix-folha__cab img { width: 1.4em; height: 1.4em; }
.pix-folha__valor { font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; margin-top: .3em; }
.pix-folha__para { font-size: .8em; color: #666; margin-top: .2em; }
.pix-folha__para b { color: #111; font-weight: 600; }
.pix-folha__btn { margin-top: .9em; height: 2.8em; border-radius: .7em; background: #111; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .95em; transition: background 200ms ease; }
.pix-folha__btn.is-ok { background: var(--ok); }
.pix-folha__btn.is-ok::before { content: "Pagamento confirmado"; }
.pix-folha__btn:not(.is-ok)::before { content: "Confirmar pagamento"; }

@keyframes vibra { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-.4deg); } 40% { transform: translateX(3px) rotate(.4deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.iphone.is-vibra { animation: vibra 420ms ease; }
/* Pulso lima: anel em ::after com transform/opacity (compositado), sem animar box-shadow */
.iphone::after { content: ""; position: absolute; inset: calc(var(--fw) * -.014); border-radius: calc(var(--raio) + var(--fw) * .014); border: 3px solid var(--lima); opacity: 0; pointer-events: none; transform: scale(1); }
.iphone.is-pulso::after { animation: pulso-anel 900ms ease-out; }
@keyframes pulso-anel { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.07); } }

/* ================================================================== FAIXA DE CONFIANÇA */
.confianca { padding: 26px 0 30px; background: var(--petroleo-fundo); border-top: 1px solid var(--linha-v); border-bottom: 1px solid var(--linha-v); }
.confianca .wrap { display: flex; align-items: center; gap: 24px; }
.confianca__rotulo { flex: none; font: 600 11px/16px var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--sobre-2); max-width: 150px; }
.marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.marquee__trilho { display: flex; gap: 12px; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee__trilho, .marquee.is-pausado .marquee__trilho { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-chip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--linha-v); color: var(--sobre-2); font: 500 13px/16px var(--fonte); white-space: nowrap; }
.logo-chip img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; background: #fff; padding: 2px; }
.confianca .placa { flex: none; }
@media (max-width: 1099px) { .confianca .wrap { flex-wrap: wrap; } .marquee { width: 100%; flex-basis: 100%; order: 3; } }

/* ================================================================== DEMO (agendamento) */
.demo { background: var(--petroleo); overflow: hidden; }
.demo.brilho::after { left: -260px; bottom: -300px; }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 1099px) { .demo__grid { grid-template-columns: minmax(0, 1fr); } }

/* O cartão de agendamento: branco de verdade, como Cal.com, sobre o petróleo */
.agenda { background: #fff; color: #111; border-radius: 24px; box-shadow: var(--sombra-flutua); overflow: hidden; font-family: var(--fonte); }
[data-theme="dark"] .agenda { background: var(--card); color: var(--texto-1); }
.agenda__passos { display: flex; gap: 0; border-bottom: 1px solid var(--linha); }
.agenda__passo { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font: 600 12px/16px var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 2px solid transparent; }
.agenda__passo b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 11px/1 var(--fonte); letter-spacing: 0; }
.agenda__passo.is-ativo { color: var(--petroleo); border-bottom-color: var(--lima); }
[data-theme="dark"] .agenda__passo.is-ativo { color: var(--lima); }
.agenda__passo.is-feito { color: var(--tinta-2); }
.agenda__passo.is-feito b { background: var(--ok); border-color: var(--ok); color: #fff; }
.agenda__passo.is-ativo b { background: var(--lima); border-color: var(--lima); color: var(--petroleo); }
@media (max-width: 599px) { .agenda__passo span { display: none; } .agenda__passo { justify-content: center; } }
.agenda__tela { display: none; }
.agenda__tela.is-ativa { display: block; }

.agenda__corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 236px; min-height: 460px; }
.agenda__info { padding: 22px 20px; border-right: 1px solid var(--linha); }
.agenda__host { display: flex; align-items: center; gap: 10px; }
.agenda__host-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--petroleo); color: var(--lima); display: grid; place-items: center; font: 700 13px/1 var(--fonte-titulo); }
.agenda__host > div b { display: block; font: 600 14px/18px var(--fonte); }
.agenda__host > div span { display: block; font: 400 12px/16px var(--fonte); color: var(--tinta-2); }
.agenda__titulo { margin-top: 16px; font: 600 20px/1.2 var(--fonte-titulo); letter-spacing: -.02em; }
.agenda__meta { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.agenda__meta li { display: flex; align-items: center; gap: 8px; }
.agenda__meta .ic { width: 16px; height: 16px; color: var(--petroleo); }
[data-theme="dark"] .agenda__meta .ic { color: var(--lima); }
.agenda__meta img { width: 16px; height: 16px; }
.agenda__cal { padding: 22px 20px; }
.cal__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__mes { font: 600 15px/20px var(--fonte); text-transform: capitalize; }
.cal__nav { display: flex; gap: 4px; }
.cal__nav button { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--tinta-2); }
.cal__nav button:hover { background: var(--grade); color: var(--tinta); }
.cal__nav button[disabled] { opacity: .3; cursor: not-allowed; }
.cal__nav .ic { width: 16px; height: 16px; }
.cal__grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dia-sem { text-align: center; font: 600 10px/16px var(--fonte); letter-spacing: .02em; text-transform: uppercase; color: var(--tinta-3); padding: 4px 0 8px; }
.cal__dia { position: relative; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font: 500 14px/1 var(--fonte); color: var(--tinta); background: var(--petroleo-tinta); transition: background 120ms ease, color 120ms ease, transform 160ms var(--mola); }
.cal__dia:hover { background: color-mix(in oklab, var(--petroleo) 18%, var(--card)); }
.cal__dia[disabled] { background: transparent; color: var(--tinta-3); cursor: not-allowed; opacity: .55; }
.cal__dia.is-hoje::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--lima); }
.cal__dia[aria-pressed="true"] { background: var(--petroleo); color: #fff; transform: scale(1.04); }
.cal__dia.is-vazio { visibility: hidden; }
.cal__fuso { margin-top: 14px; display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--fonte); color: var(--tinta-3); }
.cal__fuso .ic { width: 14px; height: 14px; }
.agenda__host-avatar { display: none; }
.agenda__slots { padding: 22px 16px 22px 18px; border-left: 1px solid var(--linha); }
.slots__dia { font: 600 14px/20px var(--fonte); margin-bottom: 10px; }
.slots__lista { display: flex; flex-direction: column; gap: 14px; }
.turno__rotulo { display: flex; align-items: center; gap: 6px; font: 600 11px/14px var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 6px; }
.turno__rotulo .ic { width: 13px; height: 13px; }
.turno__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.slot { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; border: 1px solid var(--petroleo); color: var(--petroleo); font: 600 13px/1 var(--fonte); transition: background 120ms ease, color 120ms ease, transform 160ms var(--mola); }
[data-theme="dark"] .slot { border-color: var(--hairline); color: var(--texto-1); }
.slot:hover { background: var(--petroleo-tinta); }
.slot[aria-pressed="true"] { background: var(--petroleo); color: #fff; border-color: var(--petroleo); }
.slot--vazio { border-style: dashed; color: var(--tinta-3); cursor: default; border-color: var(--linha); font-weight: 500; }
/* horário ocupado (API) ou já passado: fica visível, riscado e sem clique */
.slot[disabled] { border-color: var(--linha); color: var(--tinta-3); background: transparent; cursor: not-allowed; text-decoration: line-through; opacity: .7; }
.slot[disabled]:hover { background: transparent; }
.slots__msg { margin-top: 12px; }
.slots__msg:empty { display: none; }
.slots__carregando { color: var(--tinta-3); font: 400 12px/16px var(--fonte); margin-top: 8px; }
.slots__vazio { color: var(--tinta-3); font: 400 13px/18px var(--fonte); }
.slots__avancar { margin-top: 12px; }
@media (max-width: 899px) {
  .agenda__corpo { grid-template-columns: minmax(0, 1fr); }
  .agenda__info { border-right: 0; border-bottom: 1px solid var(--linha); }
  .agenda__slots { border-left: 0; border-top: 1px solid var(--linha); }
}

/* Passo 2: qualificação curta */
.agenda__form { padding: 24px; }
.agenda__resumo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--petroleo-tinta); font: 500 13px/18px var(--fonte); margin-bottom: 18px; }
.agenda__resumo .ic { width: 16px; height: 16px; color: var(--petroleo); }
[data-theme="dark"] .agenda__resumo .ic { color: var(--lima); }
.agenda__resumo button { margin-left: auto; font: 500 12px/16px var(--fonte); color: var(--petroleo); text-decoration: underline; }
[data-theme="dark"] .agenda__resumo button { color: var(--lima); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo--cheio { grid-column: 1 / -1; }
.campo__rotulo { font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.entrada { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--card); color: var(--tinta); font: 400 16px/20px var(--fonte); transition: border-color 120ms ease, box-shadow 120ms ease; appearance: none; }
select.entrada { background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.entrada::placeholder { color: var(--tinta-3); }
.entrada:focus { outline: none; border-color: var(--petroleo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--petroleo) 18%, transparent); }
[data-theme="dark"] .entrada:focus { border-color: var(--lima); box-shadow: 0 0 0 3px var(--lima-brilho); }
.campo.is-erro .entrada { border-color: var(--erro); box-shadow: 0 0 0 3px rgba(240,62,62,.18); }
.campo__erro { display: none; font: 500 12px/16px var(--fonte); color: var(--erro); }
.campo.is-erro .campo__erro { display: block; }
.campo.is-ok .entrada { border-color: color-mix(in oklab, var(--ok) 60%, var(--linha)); }
.honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.marcar { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 400 13px/18px var(--fonte); color: var(--tinta-2); }
.marcar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.marcar__caixa { flex: none; width: 22px; height: 22px; margin-top: -2px; border-radius: 7px; border: 1.5px solid color-mix(in oklab, var(--tinta-3) 70%, var(--linha)); background: var(--card); display: grid; place-items: center; color: var(--petroleo); transition: background 120ms ease, border-color 120ms ease; }
.marcar__caixa svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity 120ms ease, transform 160ms var(--mola); }
.marcar input:checked + .marcar__caixa { background: var(--lima); border-color: var(--lima); }
.marcar input:checked + .marcar__caixa svg { opacity: 1; transform: scale(1); }
.marcar input:focus-visible + .marcar__caixa { outline: 2px solid var(--lima); outline-offset: 2px; }
.marcar.is-erro { color: var(--erro); } .marcar.is-erro .marcar__caixa { border-color: var(--erro); }
.marcar b { color: var(--tinta); font-weight: 600; }
.agenda__opcoes { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.exemplo-escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-left: 34px; }
.exemplo-escolha button { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--card); text-align: left; font: 500 12px/16px var(--fonte); color: var(--tinta-2); transition: border-color 120ms ease, background 120ms ease, color 120ms ease; }
.exemplo-escolha button[aria-pressed="true"] { border-color: var(--petroleo); background: var(--petroleo-tinta); color: var(--tinta); }
[data-theme="dark"] .exemplo-escolha button[aria-pressed="true"] { border-color: var(--lima); }
.exemplo-escolha small { display: block; font: 400 11px/14px var(--fonte); color: var(--tinta-3); }
/* Cloudflare Turnstile (managed, appearance interaction-only): fica invisível até precisar de interação; o widget tem 300×65 quando aparece. */
.turnstile { display: flex; flex-direction: column; gap: 8px; max-width: 300px; outline: none; }
.turnstile__widget:not(:empty) { margin-top: 12px; min-height: 0; }
.turnstile__widget iframe { display: block; }
.turnstile__msg { display: none; font: 500 12px/16px var(--fonte); color: var(--erro); }
.turnstile__msg:not(:empty) { display: block; margin-top: 8px; }
.agenda__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.enviar { position: relative; overflow: hidden; min-height: 54px; padding: 0 26px; border-radius: 14px; background: var(--petroleo); color: #fff; font: 600 15px/20px var(--fonte); display: inline-grid; place-items: center; transition: background 200ms ease; }
[data-theme="dark"] .enviar { background: var(--lima); color: var(--petroleo); }
.enviar:hover { background: var(--petroleo-card-2); }
.enviar__txt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.enviar__barra { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--lima-escuro); transition: width 2200ms linear; }
.enviar.is-enviando { cursor: progress; }
.enviar.is-enviando .enviar__barra { width: 100%; }
.enviar.is-enviando .enviar__txt::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; animation: gira 700ms linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.form-msg { font: 500 13px/18px var(--fonte); min-height: 18px; }
.form-msg[data-tom="erro"] { color: var(--erro); }
.form-msg[data-tom="ok"] { color: #0B7A55; }
.form-msg[data-tom="neutro"] { color: var(--tinta-2); }
.form-nota { margin-top: 14px; font: 400 12px/16px var(--fonte); color: var(--tinta-3); display: flex; gap: 8px; align-items: flex-start; }
.form-nota .ic { width: 14px; height: 14px; margin-top: 1px; color: var(--petroleo); }

/* Passo 3: confirmação */
.agenda__ok { padding: 32px 28px; text-align: center; animation: sucesso-entra 500ms var(--mola) both; }
@keyframes sucesso-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.agenda__ok-selo { width: 68px; height: 68px; border-radius: 50%; background: var(--lima); color: var(--petroleo); display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 0 0 10px var(--lima-brilho); }
.agenda__ok-selo svg { width: 32px; height: 32px; stroke-width: 2.5; }
.agenda__ok h3 { font-size: 1.6rem; line-height: 1.15; }
.agenda__ok h3 b { color: var(--petroleo); }
[data-theme="dark"] .agenda__ok h3 b { color: var(--lima); }
.agenda__ok p { margin-top: 8px; color: var(--tinta-2); }
.agenda__ok-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px auto 0; max-width: 520px; text-align: left; }
.agenda__ok-dados li { padding: 12px 14px; border-radius: 12px; background: var(--petroleo-tinta); font: 500 13px/18px var(--fonte); }
.agenda__ok-dados span { display: block; font: 500 11px/14px var(--fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 2px; }
.agenda__ok-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.agenda__ok-exemplo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha); font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.agenda__ok-exemplo img, .agenda__ok-exemplo .ic { width: 18px; height: 18px; }
.agenda__ok-exemplo .etiqueta { background: #E6F9F2; color: #0B7A55; }
.aviso-previa { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--linha); font: 500 12px/16px var(--fonte); color: var(--tinta-3); }
.aviso-previa .ic { width: 14px; height: 14px; }
@media (max-width: 599px) { .agenda__ok-dados { grid-template-columns: minmax(0, 1fr); } .campos { grid-template-columns: minmax(0, 1fr); } .exemplo-escolha { grid-template-columns: minmax(0, 1fr); margin-left: 0; } }

/* A prévia do que a pessoa recebe ao agendar */
.previa { position: sticky; top: 96px; }
.previa__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.previa__cab p { font: 500 14px/20px var(--fonte); color: var(--sobre-2); }
.previa__cab p b { color: var(--sobre-1); font-weight: 600; }
.segmento { display: inline-flex; padding: 4px; gap: 2px; background: rgba(0,0,0,.2); border: 1px solid var(--linha-v); border-radius: 12px; }
.segmento button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 9px; font: 500 13px/18px var(--fonte); color: var(--sobre-2); white-space: nowrap; transition: background 140ms ease, color 140ms ease; }
.segmento button img, .segmento button .ic { width: 15px; height: 15px; }
.segmento button[aria-pressed="true"] { background: var(--lima); color: var(--petroleo); font-weight: 600; }
.segmento button[aria-pressed="true"] .ic { color: var(--petroleo); }
.segmento button img { border-radius: 50%; }
.segmento button[aria-pressed="true"] img { background: #fff; padding: 2px; width: 20px; height: 20px; margin: -2px 0; box-shadow: 0 0 0 1px rgba(12,70,81,.15); }
/* Logo verde do WhatsApp sobre petróleo: sempre numa pastilha branca */
.botao--vidro img[src*="whatsapp"], .botao--petroleo img[src*="whatsapp"] { background: #fff; border-radius: 50%; padding: 2px; width: 22px; height: 22px; }
.previa__palco { display: flex; justify-content: center; }
.previa__palco .iphone { --fw: 340px; }
.previa[data-mostra="email"] .previa__fone { display: none; }
.previa[data-mostra="whatsapp"] .previa__email { display: none; }
.previa__email { width: 100%; }
@media (max-width: 1099px) { .previa { position: static; } }

/* ================================================================== GMAIL + e-mail real da régua */
.mail { border-radius: 16px; overflow: hidden; background: #FFFFFF; color: #1F1F1F; font-family: var(--fonte-ios); font-size: 13px; box-shadow: var(--sombra-flutua); border: 1px solid rgba(0,0,0,.08); }
.mail__janela { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: #F1F3F4; border-bottom: 1px solid #E0E3E5; }
.mail__janela i { width: 11px; height: 11px; border-radius: 50%; background: #E0E3E5; }
.mail__janela i:nth-child(1) { background: #FF5F57; } .mail__janela i:nth-child(2) { background: #FEBC2E; } .mail__janela i:nth-child(3) { background: #28C840; }
.mail__url { flex: 1; margin-left: 10px; height: 26px; border-radius: 6px; background: #FFFFFF; border: 1px solid #E0E3E5; display: flex; align-items: center; padding: 0 10px; gap: 6px; color: #5F6368; font-size: 12px; }
.mail__url svg { width: 12px; height: 12px; }
.mail__corpo { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 520px; }
.mail__principal { display: flex; flex-direction: column; min-width: 0; }
.mail__busca { display: flex; align-items: center; gap: 10px; height: 44px; margin: 10px 14px 6px; padding: 0 14px; border-radius: 24px; background: #EAF1FB; color: #444746; font-size: 13px; }
.mail__busca svg { width: 16px; height: 16px; }
.mail__abas { display: flex; border-bottom: 1px solid #E8EAED; padding: 0 8px; }
.mail__aba { padding: 10px 14px; font-size: 13px; color: #444746; border-bottom: 3px solid transparent; }
.mail__aba.is-ativa { color: #0B57D0; border-bottom-color: #0B57D0; font-weight: 500; }
.mail__lista { flex: 1; }
.mail-linha { display: grid; grid-template-columns: auto auto 118px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 10px; border-bottom: 1px solid #F1F3F4; font-size: 13px; color: #5F6368; cursor: pointer; transition: box-shadow 120ms ease, background 200ms ease; text-align: left; width: 100%; }
.mail-linha:hover { box-shadow: inset 1px 0 0 #DADCE0, inset -1px 0 0 #DADCE0, 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); z-index: 1; position: relative; }
.mail-linha svg { width: 16px; height: 16px; color: #C4C7C5; }
.mail-linha__de { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-linha__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mail-linha__txt small { color: #5F6368; font-size: 13px; }
.mail-linha__hora { font-size: 12px; white-space: nowrap; }
.mail-linha.is-nova { color: #1F1F1F; font-weight: 700; background: #FFFFFF; }
.mail-linha.is-nova .mail-linha__hora { color: #1F1F1F; }
.mail-linha.is-nova .mail-linha__txt small { font-weight: 400; }
.mail-linha.is-lida { background: #F2F6FC; }
.mail-linha.is-chegando { animation: mail-chega 600ms var(--mola) both; }
@keyframes mail-chega { from { opacity: 0; transform: translateY(-14px); background: #FFFDE7; } 60% { background: #FFFDE7; } }
.mail__leitura { display: none; flex-direction: column; flex: 1; }
.mail[data-tela="leitura"] .mail__lista, .mail[data-tela="leitura"] .mail__abas, .mail[data-tela="leitura"] .mail__busca { display: none; }
.mail[data-tela="leitura"] .mail__leitura { display: flex; }
.mail__ferramentas { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid #E8EAED; color: #444746; }
.mail__ferramentas svg { width: 18px; height: 18px; }
.mail__ferramentas button { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -8px; border-radius: 50%; }
.mail__ferramentas button:hover { background: #F1F3F4; }
.mail__assunto { padding: 16px 18px 6px; font-size: 19px; font-weight: 400; color: #1F1F1F; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail__assunto .rotulo { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: #E8EAED; color: #444746; }
.mail__remetente { display: flex; align-items: flex-start; gap: 12px; padding: 6px 18px 12px; }
.mail__avatar { width: 40px; height: 40px; border-radius: 50%; background: #004350; color: #fff; display: grid; place-items: center; font: 700 15px/1 var(--fonte-titulo); flex: none; }
.mail__quem { flex: 1; min-width: 0; line-height: 1.3; font-size: 12.5px; }
.mail__quem b { font-weight: 700; color: #1F1F1F; font-size: 13px; }
.mail__quem span { color: #5F6368; }
.mail__quando { color: #5F6368; font-size: 12px; white-space: nowrap; }
.mail__html { flex: 1; }

/* O e-mail real: wrapReguaEmailChrome + renderMioloHtml (template-render.ts) */
.rt { background: #f6f8fa; padding: 24px 12px; font-family: sans-serif; }
.rt__cartao { max-width: 500px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 3px 16px rgba(0,0,0,.04); overflow: hidden; }
.rt__topo { background: #004350; padding: 36px 16px 28px; text-align: center; color: #fff; font-size: 24px; font-weight: bold; letter-spacing: 1px; word-break: break-word; }
.rt__via { color: #004350; font-size: 12px; text-align: center; margin: 20px 28px 10px; }
.rt__miolo { padding: 0 28px 10px; color: #222; font-size: 14px; line-height: 1.5; }
.rt__miolo h1 { font-family: sans-serif; font-size: 20px; color: #004350; margin: 0 0 12px; font-weight: bold; letter-spacing: 0; }
.rt__miolo .bloco { margin: 0 0 12px; }
.rt__miolo a.var { color: #004350; text-decoration: underline; word-break: break-all; }
.rt__btn-wrap { text-align: center; margin: 22px 0 18px; }
.rt__btn { display: inline-block; background: #004350; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 8px; padding: 14px 36px; letter-spacing: 1px; }
.rt__rodape { background: #e7edf0; padding: 28px 20px 18px; text-align: center; color: #222; font-size: 14px; line-height: 1.45; }
.rt__rodape a { display: inline-block; margin-top: 14px; color: #004350; border: 2px solid #004350; padding: 10px 24px; border-radius: 24px; font-size: 15px; font-weight: 500; }
.rt__copy { font-size: 11px; color: #8a8a8a; margin-top: 10px; text-align: center; }

/* ================================================================== RÉGUA (stepper, sem sticky nem sincronização com a rolagem) */
.regua__abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.regua__aba { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linha); background: var(--cartao); text-align: left; transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease; position: relative; overflow: hidden; }
.regua__aba small { font: 600 11px/14px var(--fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.regua__aba b { font: 600 14px/18px var(--fonte); color: var(--tinta); }
.regua__aba::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lima); transform: scaleX(0); transform-origin: left; }
.regua__aba[aria-selected="true"] { border-color: var(--petroleo); box-shadow: 0 0 0 3px var(--lima-brilho); }
[data-theme="dark"] .regua__aba[aria-selected="true"] { border-color: var(--lima); }
.regua__aba[aria-selected="true"] small { color: var(--petroleo); }
[data-theme="dark"] .regua__aba[aria-selected="true"] small { color: var(--lima); }
.regua__aba[aria-selected="true"]::after { transform: scaleX(1); transition: transform var(--regua-dur, 6s) linear; }
.regua.is-pausada .regua__aba[aria-selected="true"]::after { transform: scaleX(1); transition: none; }
.regua__grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.regua__painel { display: flex; flex-direction: column; gap: 18px; }
.regua__detalhe { padding: 20px 24px; border-radius: 18px; background: var(--petroleo-tinta); border: 1px solid var(--linha); }
.regua__detalhe h4 { font: 600 12px/16px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 10px; }
.regua__detalhe ul { display: flex; flex-direction: column; }
.regua__detalhe li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); font: 400 13.5px/18px var(--fonte); color: var(--tinta-2); }
.regua__detalhe li:first-child { border-top: 0; padding-top: 0; }
.regua__detalhe li b { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 599px) { .regua__detalhe li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.regua__texto { position: relative; padding: 26px 30px; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); }
.regua__texto .momento__n { position: absolute; right: 22px; top: 22px; font: 700 48px/1 var(--fonte-titulo); letter-spacing: -.04em; color: var(--petroleo); opacity: .9; }
.regua__texto .momento__quando { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--petroleo); margin-bottom: 12px; }
[data-theme="dark"] .regua__texto .momento__quando { color: var(--lima); }
.regua__texto .momento__quando i { width: 8px; height: 8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px var(--lima-brilho); }
.regua__texto h3 { font-size: 1.6rem; line-height: 1.15; padding-right: 80px; }
.regua__texto p { margin-top: 10px; color: var(--tinta-2); font-size: 15.5px; line-height: 1.55; }
.regua__texto .momento__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.regua__texto.is-troca > * { animation: texto-entra 320ms var(--facil) both; }
@keyframes texto-entra { from { opacity: 0; transform: translateY(8px); } }
.regua__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.regua__pontos { display: inline-flex; gap: 6px; margin: 0 6px; }
.regua__pontos i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha); transition: background 200ms ease, transform 200ms ease; }
.regua__pontos i.is-ativo { background: var(--petroleo); transform: scale(1.25); }
[data-theme="dark"] .regua__pontos i.is-ativo { background: var(--lima); }
.regua__auto { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.regua__auto .ic { width: 15px; height: 15px; }
.regua__auto[aria-pressed="true"] { border-color: var(--petroleo); color: var(--petroleo); }
[data-theme="dark"] .regua__auto[aria-pressed="true"] { border-color: var(--lima); color: var(--lima); }
.regua__fone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.regua__fone .iphone { --fw: 340px; }
.regua__calendario { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; padding-right: 14px; border-radius: 14px; overflow: hidden; background: var(--cartao); color: var(--tinta); box-shadow: var(--sombra-cartao); text-align: center; font-family: var(--fonte); }
.regua__calendario b { display: flex; align-items: center; align-self: stretch; padding: 8px 12px; background: var(--erro); color: #fff; font: 700 10px/12px var(--fonte); letter-spacing: .1em; text-transform: uppercase; transition: background 300ms ease; }
.regua__calendario span { display: block; font: 700 22px/1 var(--fonte-titulo); letter-spacing: -.03em; }
.regua__calendario small { display: block; font: 500 12px/14px var(--fonte); color: var(--tinta-2); }
.regua__calendario[data-tom="ok"] b { background: var(--ok); }
.regua__calendario[data-tom="petroleo"] b { background: var(--petroleo); }
@media (max-width: 1023px) {
  .regua__abas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regua__grid { grid-template-columns: minmax(0, 1fr); }
  .regua__fone { order: -1; flex-direction: column; align-items: center; }
  .regua__texto h3 { padding-right: 60px; font-size: 1.35rem; }
  .regua__auto span { display: none; }
}
@media (max-width: 599px) { .regua__abas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .regua__aba { padding: 10px 12px; } .regua__aba b { font-size: 13px; } }

/* ================================================================== GRELHA (bento) */
.grelha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.cartao { position: relative; grid-column: span 2; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); padding: 24px; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; --mx: 50%; --my: 50%; }
.cartao--3 { grid-column: span 3; }
.cartao--4 { grid-column: span 4; }
.cartao--petroleo { background: var(--petroleo); color: var(--sobre-1); border-color: transparent; }
.cartao.cartao--petroleo p { color: var(--sobre-2); }
.cartao::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx) var(--my), var(--lima) 0%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(221,220,0,.10), transparent 60%); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.cartao:hover::before, .cartao:hover::after { opacity: 1; }
.cartao h3 { font-size: 1.2rem; line-height: 1.25; margin-top: 14px; position: relative; z-index: 1; }
.cartao p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); position: relative; z-index: 1; }
.cartao__visual { position: relative; z-index: 1; margin-top: auto; padding-top: 20px; }
.cartao .icone-poco { position: relative; z-index: 1; }
@media (max-width: 899px) { .grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cartao, .cartao--3, .cartao--4 { grid-column: span 2; min-height: 0; } }
.mini-nota { background: #fff; color: #08252B; border-radius: 12px; padding: 14px 16px; border: 1px solid #DFE8EA; font-size: 12px; box-shadow: 0 20px 30px -24px rgba(0,0,0,.4); }
.mini-nota__cab { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.mini-nota__linha { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #DFE8EA; color: #4A6169; }
.mini-nota__linha b { color: #08252B; font-weight: 600; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.barras i { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--petroleo-claro); transform: scaleY(0); transform-origin: bottom; transition: transform 800ms var(--facil); transition-delay: calc(var(--i) * 60ms); }
.barras i:nth-child(3n) { background: var(--petroleo); }
[data-theme="dark"] .barras i:nth-child(3n) { background: var(--petroleo-card-2); }
.barras i.lima { background: var(--lima); }
.is-visivel .barras i { transform: scaleY(1); }
.linha-grafico { width: 100%; height: auto; }
.linha-grafico .eixo { stroke: var(--linha); }
.linha-grafico path.tr { fill: none; stroke: var(--petroleo); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1800ms var(--facil) 200ms; }
[data-theme="dark"] .linha-grafico path.tr { stroke: var(--lima); }
.linha-grafico path.ar { fill: url(#grad-lima); opacity: 0; transition: opacity 800ms ease 1200ms; }
.is-visivel .linha-grafico path.ar { opacity: 1; }
.is-visivel .linha-grafico path.tr { stroke-dashoffset: 0; }
.kpi-grande { font: 700 clamp(2.6rem, 4vw, 3.6rem)/1 var(--fonte-titulo); letter-spacing: -.04em; }
.kpi-grande small { font: 500 14px/1 var(--fonte); letter-spacing: 0; color: var(--sobre-2); margin-left: 6px; }
.selo-meta { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; color: #1A1A1A; border: 1px solid #DFE8EA; font: 600 13px/18px var(--fonte); }
.selo-meta img { height: 34px; width: auto; }
.selo-meta small { display: block; font: 500 12px/16px var(--fonte); color: #5A5A5A; }
.lista-check { display: flex; flex-direction: column; gap: 8px; font: 500 13.5px/18px var(--fonte); }
.lista-check li { display: flex; align-items: center; gap: 8px; }
.lista-check .ic { width: 16px; height: 16px; color: var(--ok); }

/* ================================================================== OPEN FINANCE */
.of { background: var(--petroleo); overflow: hidden; }
.of__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 40px; }
.of__numero { text-align: right; }
.of__numero b { display: block; font: 700 clamp(4rem, 9vw, 7.5rem)/1 var(--fonte-titulo); letter-spacing: -.05em; color: var(--lima); font-variant-numeric: tabular-nums; }
.of__numero > span { display: block; font: 500 14px/20px var(--fonte); color: var(--sobre-2); margin-top: 6px; }
.of__numero .placa { margin-top: 18px; }
@media (max-width: 899px) { .of__topo { grid-template-columns: minmax(0, 1fr); } .of__numero { text-align: left; } }
.mural { position: relative; display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
.mural__fila { display: flex; gap: 12px; width: max-content; animation: marquee var(--dur, 70s) linear infinite; }
.mural__fila--inv { animation-direction: reverse; }
.mural:hover .mural__fila, .mural.is-pausado .mural__fila { animation-play-state: paused; }
.banco { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 8px; border-radius: 14px; background: #fff; color: #1A1A1A; font: 500 13px/16px var(--fonte); white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.banco img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; }
.of__valor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.of__valor li { padding: 20px 22px; border-radius: 18px; background: var(--petroleo-card); border: 1px solid var(--linha-v-forte); }
.of__valor h3 { font-size: 1.1rem; margin-top: 12px; }
.of__valor p { margin-top: 6px; font-size: 14px; color: var(--sobre-2); line-height: 1.5; }
@media (max-width: 899px) { .of__valor { grid-template-columns: minmax(0, 1fr); } }
.of__busca { margin-top: 40px; padding: 22px; border-radius: 22px; background: var(--petroleo-card); border: 1px solid var(--linha-v-forte); }
.of__busca-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 16px; }
.of__busca-cab h3 { font-size: 1.15rem; }
.of__busca-cab p { font: 400 13px/18px var(--fonte); color: var(--sobre-2); }
.of__campo { position: relative; flex: 1 1 320px; max-width: 480px; }
.of__campo .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sobre-3); }
.of__campo input { width: 100%; height: 50px; padding: 0 14px 0 42px; border-radius: 14px; border: 1px solid var(--linha-v-forte); background: rgba(0,0,0,.2); color: var(--sobre-1); font: 400 16px/20px var(--fonte); }
.of__campo input::placeholder { color: var(--sobre-3); }
.of__campo input:focus { outline: none; border-color: var(--lima); box-shadow: 0 0 0 3px var(--lima-brilho); }
.of__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.of__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--linha-v); font: 500 13px/16px var(--fonte); color: var(--sobre-1); min-width: 0; }
.of__item img { width: 32px; height: 32px; border-radius: 8px; background: #fff; object-fit: contain; flex: none; }
.of__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of__item small { display: block; font: 400 11px/14px var(--fonte); color: var(--sobre-3); }
.of__item mark { background: var(--lima); color: var(--petroleo); border-radius: 2px; padding: 0 1px; }
.of__ini { display: inline-grid; place-items: center; flex: none; border-radius: 8px; background: var(--petroleo); color: #fff; font: 700 13px/1 var(--fonte-titulo); letter-spacing: .02em; }
.banco .of__ini { border-radius: 9px; }
.of__vazio { padding: 16px 4px; font: 400 14px/20px var(--fonte); color: var(--sobre-2); }
.of__mais { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font: 500 13px/18px var(--fonte); color: var(--sobre-2); }

/* ================================================================== CALCULADORA (claro) */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.calc__controles, .calc__resultado { border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: var(--cartao); border: 1px solid var(--linha); }
.calc__controles { display: flex; flex-direction: column; gap: 22px; }
.calc .campo__rotulo { display: flex; justify-content: space-between; font-size: 14px; }
.calc .campo__rotulo b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--lima) 0 var(--pct, 50%), var(--grade) var(--pct, 50%) 100%); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--grade); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--lima); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--petroleo); border: 3px solid var(--lima); box-shadow: 0 0 0 5px var(--lima-brilho); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--petroleo); border: 3px solid var(--lima); }
.calc__resultado { display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; background: var(--petroleo); color: var(--sobre-1); border-color: transparent; }
.calc__resultado::after { content: ""; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--lima-brilho), transparent 65%); filter: blur(20px); pointer-events: none; }
.calc__resultado .eyebrow { color: var(--sobre-2); }
.odometro { font: 700 clamp(3rem, 6vw, 5rem)/1 var(--fonte-titulo); letter-spacing: -.045em; color: var(--lima); font-variant-numeric: tabular-nums; }
.calc__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc__kpi { padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.16); border: 1px solid var(--linha-v); }
.calc__kpi span { display: block; font: 500 12px/16px var(--fonte); color: var(--sobre-2); }
.calc__kpi b { display: block; margin-top: 4px; font: 600 22px/26px var(--fonte-titulo); letter-spacing: -.02em; }
.premissas { display: flex; flex-direction: column; gap: 8px; font: 400 12px/17px var(--fonte); color: var(--sobre-3); }
.premissas li { display: flex; gap: 8px; }
.premissas .ic { width: 14px; height: 14px; margin-top: 1px; flex: none; }
@media (max-width: 899px) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== INTEGRAÇÕES */
.integ-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.integ { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); text-align: left; transition: border-color 160ms ease, transform 220ms var(--facil), box-shadow 220ms ease; }
.integ:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -22px rgba(12,70,81,.45); border-color: var(--petroleo-claro); }
.integ[aria-pressed="true"] { border-color: var(--petroleo); box-shadow: 0 0 0 3px var(--lima-brilho); }
[data-theme="dark"] .integ[aria-pressed="true"] { border-color: var(--lima); }
.integ img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; padding: 3px; background: #fff; border: 1px solid var(--linha); }
.integ b { display: block; font: 600 14px/18px var(--fonte); }
.integ small { display: block; font: 400 12px/16px var(--fonte); color: var(--tinta-3); }
.integ-painel { margin-top: 20px; padding: 24px; border-radius: 22px; background: var(--petroleo); color: var(--sobre-1); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.integ-painel h3 { font-size: 1.3rem; }
.integ-painel p { margin-top: 6px; color: var(--sobre-2); font-size: 14.5px; }
.integ-painel ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.integ-painel .etiqueta { background: rgba(255,255,255,.1); color: var(--sobre-1); }
.integ-painel .etiqueta .ic { color: var(--lima); }
.integ-painel .etiqueta--lima { background: var(--lima); color: var(--petroleo); }
.integ-painel .etiqueta--lima .estrela { fill: var(--petroleo); }
@media (max-width: 699px) { .integ-painel { grid-template-columns: minmax(0, 1fr); } }
.pagamentos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linha); color: var(--tinta-3); font: 500 13px/18px var(--fonte); }
.pagamentos img { height: 22px; width: auto; }
.pagamentos .bancos { display: flex; gap: 6px; }
.pagamentos .bancos img { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--linha); object-fit: contain; background: #fff; }

/* ================================================================== PLANO */
.plano { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.plano__card { position: relative; border-radius: 26px; padding: clamp(24px, 3vw, 36px); background: var(--petroleo); color: var(--sobre-1); overflow: hidden; display: flex; flex-direction: column; gap: 18px; }
.plano__card::after { content: ""; position: absolute; right: -140px; bottom: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, var(--lima-brilho), transparent 65%); filter: blur(20px); pointer-events: none; }
.plano__card > * { position: relative; z-index: 1; }
.plano__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plano__cab p { color: var(--sobre-2); font-size: 14px; margin-top: 4px; }
.plano__preco { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plano__preco .valor { font: 700 clamp(3rem, 5vw, 4.2rem)/1 var(--fonte-titulo); letter-spacing: -.045em; }
.plano__preco small { font: 500 15px/1 var(--fonte); color: var(--sobre-2); }
.plano__nota { font: 400 13px/18px var(--fonte); color: var(--sobre-2); }
.plano__inclui { display: flex; flex-direction: column; gap: 8px; font: 500 14px/20px var(--fonte); }
.plano__inclui li { display: flex; align-items: center; gap: 10px; }
.plano__inclui .ic { width: 16px; height: 16px; color: var(--lima); }
.garantias { display: flex; flex-wrap: wrap; gap: 6px; }
.plano__recursos { border-radius: 26px; padding: clamp(24px, 3vw, 36px); background: var(--cartao); border: 1px solid var(--linha); }
.plano__recursos p { color: var(--tinta-2); margin-top: 4px; font-size: 14.5px; }
.recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 22px; }
.recursos li { display: flex; align-items: center; gap: 10px; font: 500 14px/20px var(--fonte); }
.recursos .ic { width: 16px; height: 16px; color: var(--ok); }
@media (max-width: 899px) { .plano { grid-template-columns: minmax(0, 1fr); } .recursos { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== FAQ */
.faq { max-width: 800px; margin-inline: auto; border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 22px 4px; text-align: left; font: 600 17px/1.35 var(--fonte-titulo); letter-spacing: -.01em; }
.faq__q .ic { width: 20px; height: 20px; color: var(--petroleo); transition: transform 300ms var(--facil); }
[data-theme="dark"] .faq__q .ic { color: var(--lima); }
.faq__item.is-aberto .faq__q .ic { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--facil); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 4px 22px; color: var(--tinta-2); font-size: 15px; line-height: 1.6; max-width: 700px; }
.faq__item.is-aberto .faq__a { grid-template-rows: 1fr; }

/* ================================================================== CTA FINAL + RODAPÉ */
/* Sem blur, sem máscara, sem posicionamento absoluto: só um cartão. */
.cta-final { position: relative; padding: clamp(72px, 9vw, 120px) 0; background: var(--petroleo); color: var(--sobre-1); }
.cta-final__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--petroleo-card); border: 1px solid var(--linha-v-forte); background-image: radial-gradient(circle at 0% 100%, color-mix(in oklab, var(--lima) 14%, transparent), transparent 55%); }
.cta-final__texto .tx-lead { max-width: 560px; margin-top: 16px; color: var(--sobre-2); }
.cta-final__texto .eyebrow { color: var(--sobre-2); }
.cta-final__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 899px) { .cta-final__card { grid-template-columns: minmax(0, 1fr); text-align: center; } .cta-final__foto { display: flex; justify-content: center; } .cta-final__texto .eyebrow { justify-content: center; } .cta-final__texto .tx-lead { margin-inline: auto; } .cta-final__ctas { justify-content: center; } }
.rodape { background: var(--petroleo-fundo); border-top: 1px solid var(--linha-v); padding: 56px 0 32px; color: var(--sobre-2); font-size: 14px; }
.rodape__grade { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.rodape__marca img { height: 30px; width: auto; }
.rodape__marca p { margin-top: 16px; max-width: 320px; line-height: 1.55; }
.rodape__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; margin-bottom: 14px; }
.rodape__nfse { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/16px var(--fonte); color: var(--sobre-1); }
.rodape__nfse i { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 3px var(--lima-brilho); }
.rodape h3, .rodape h4 { font: 600 12px/16px var(--fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--sobre-1); margin-bottom: 14px; }
.rodape ul { display: flex; flex-direction: column; gap: 10px; }
.rodape a:hover { color: var(--sobre-1); }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linha-v); font-size: 12px; color: var(--sobre-2); }
.rodape__links { display: flex; gap: 16px; }
@media (max-width: 899px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ================================================================== MOBILE (390) */
@media (max-width: 599px) {
  .iphone, .palco__telefone .iphone, .previa__palco .iphone, .regua__fone .iphone { --fw: min(358px, calc(100vw - 32px)); }
  .palco__telefone { margin-inline: auto; }
  .hero__ctas .botao, .cta-final__ctas .botao { width: 100%; }
  .placa--meta img { height: 52px; } .placa--of img { height: 28px; }
  .of__numero .placa { padding: 12px 16px; } .of__numero .placa img { height: 30px; }
  .of__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of__item { font-size: 12px; }
  .mail-linha { grid-template-columns: auto auto 84px minmax(0, 1fr) auto; }
  .rt { padding: 16px 8px; }
  .rt__topo { font-size: 20px; padding: 28px 12px 22px; }
  .rt__miolo { padding: 0 18px 10px; }
  .rt__rodape a { font-size: 13px; padding: 9px 14px; }
}

/* ================================================================== b/bancos.html */
.bancos-hero { padding: clamp(48px, 6vw, 80px) 0 32px; background: var(--petroleo); color: var(--sobre-1); }
.bancos-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.bancos-hero .tx-lead { margin-top: 16px; max-width: 640px; }
.bancos-hero__voltar { display: flex; width: max-content; align-items: center; gap: 6px; font: 500 13px/18px var(--fonte); color: var(--sobre-2); margin-bottom: 26px; padding: 6px 10px 6px 6px; border-radius: 8px; border: 1px solid var(--linha-v); }
.bancos-hero__voltar:hover { background: rgba(255,255,255,.08); color: var(--sobre-1); }
.bancos-hero__voltar .ic { width: 15px; height: 15px; }
@media (max-width: 899px) { .bancos-hero__grid { grid-template-columns: minmax(0, 1fr); } .bancos-hero .of__numero { text-align: left; } }
.bancos-filtros { position: sticky; top: 72px; z-index: 30; background: var(--superficie); border-bottom: 1px solid var(--linha); padding: 12px 0; }
.bancos-filtros .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bancos-filtros .of__campo { flex: 1 1 280px; max-width: 460px; }
.bancos-filtros .of__campo .ic { color: var(--tinta-3); }
.bancos-filtros .of__campo input { background: var(--cartao); color: var(--tinta); border-color: var(--linha); height: 46px; }
.bancos-filtros .of__campo input::placeholder { color: var(--tinta-3); }
.bancos-filtros .of__campo input:focus { border-color: var(--petroleo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--petroleo) 18%, transparent); }
.filtros { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta-2); font: 500 13px/18px var(--fonte); transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.filtro b { font: 600 11px/16px var(--fonte); padding: 0 6px; border-radius: 999px; background: var(--grade); color: var(--tinta-2); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.filtro[aria-pressed="true"] b { background: rgba(255,255,255,.18); color: #fff; }
.bancos-lista { padding: 28px 0 40px; }
.bancos-lista .of__mais { color: var(--tinta-2); margin-bottom: 14px; margin-top: 0; }
.bancos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.bancos-grade .of__item { background: var(--cartao); border-color: var(--linha); color: var(--tinta); padding: 10px 12px; }
.bancos-grade .of__item img { width: 40px; height: 40px; }
.bancos-grade .of__item small { color: var(--tinta-3); }
.bancos-grade .of__item mark { background: var(--lima); color: var(--petroleo); }
.bancos-grade .of__vazio { color: var(--tinta-2); grid-column: 1 / -1; }
.bancos-ajuda { padding: 0 0 56px; }
.bancos-ajuda__card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px 28px; border-radius: 22px; background: var(--cartao); border: 1px solid var(--linha); }
.bancos-ajuda__card h3 { font-size: 1.25rem; }
.bancos-ajuda__card p { margin-top: 4px; color: var(--tinta-2); font-size: 14.5px; }
.bancos-cta { padding: clamp(56px, 8vw, 96px) 0; background: var(--petroleo); color: var(--sobre-1); text-align: center; }
.bancos-cta .tx-lead { max-width: 600px; margin: 16px auto 0; color: var(--sobre-2); }
.bancos-cta .eyebrow { color: var(--sobre-2); justify-content: center; }
.bancos-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.cta-fixo { display: none; }
@media (max-width: 899px) {
  .bancos-filtros { top: 72px; }
  .cta-fixo { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--petroleo-fundo) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--linha-v); }
  .cta-fixo .botao { width: 100%; }
  body.tem-cta-fixo { padding-bottom: 84px; }
  .bancos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bancos-grade .of__item { font-size: 12px; }
}
@media (max-width: 599px) { .bancos-grade { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== MOBILE / TOQUE */
@media (hover: none) and (pointer: coarse) {
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--petroleo-fundo); }
  .brilho::after { filter: none; opacity: .35; }
  .cta-fixo { backdrop-filter: none; }
  .marcar { min-height: 44px; align-items: center; }
  .marcar input, input[type="checkbox"] { font-size: 16px; }
  .agenda__cal { padding: 18px 14px; }
  .cal__grade { gap: 2px; }
  .cal__dia { min-height: 44px; }
}
/* Balões que já vieram no HTML (SSR) não animam; os novos sim */
.balao[data-ssr] { animation: none; }

/* ================================================================== PÁGINAS LEGAIS */
.legal { background: var(--superficie); color: var(--tinta); padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.legal__grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal__lateral { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 22px; }
.legal__voltar { color: var(--tinta-2); border-color: var(--linha); margin: 0; }
.legal__voltar:hover { background: var(--grade); color: var(--tinta); }
.legal__idioma { display: inline-flex; padding: 4px; gap: 2px; border-radius: 12px; background: var(--grade); border: 1px solid var(--linha); width: max-content; }
.legal__idioma button { min-height: 40px; padding: 0 14px; border-radius: 9px; font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.legal__idioma button[aria-pressed="true"] { background: var(--petroleo); color: #fff; }
.legal__sumario h4, .legal__outros h4 { font: 600 11px/16px var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.legal__sumario ol { counter-reset: s; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 330px); overflow: auto; scrollbar-width: thin; padding-right: 6px; }
.legal__sumario a { display: block; padding: 7px 10px; border-radius: 8px; font: 500 13px/18px var(--fonte); color: var(--tinta-2); border-left: 2px solid transparent; }
.legal__sumario a:hover { background: var(--grade); color: var(--tinta); }
.legal__sumario a.is-ativo { color: var(--petroleo); border-left-color: var(--lima); background: var(--petroleo-tinta); }
[data-theme="dark"] .legal__sumario a.is-ativo { color: var(--lima); }
.legal__outros ul { display: flex; flex-direction: column; gap: 2px; }
.legal__outros a { display: block; padding: 7px 10px; border-radius: 8px; font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.legal__outros a[aria-current="page"] { color: var(--tinta); background: var(--grade); }
.legal__texto { max-width: 760px; font-size: 16.5px; line-height: 1.7; }
.legal__texto h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 8px; }
.legal__data { font: 500 13px/18px var(--fonte); color: var(--tinta-3); margin-bottom: 22px; }
.legal__texto h2 { font-size: 1.35rem; line-height: 1.25; margin: 40px 0 12px; padding-top: 16px; border-top: 1px solid var(--linha); scroll-margin-top: 96px; }
.legal__texto h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.legal__texto p { margin: 0 0 14px; color: var(--tinta); }
.legal__texto ul, .legal__texto ol { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal__texto ul { list-style: disc; } .legal__texto ol { list-style: decimal; }
.legal__texto li::marker { color: var(--petroleo); }
[data-theme="dark"] .legal__texto li::marker { color: var(--lima); }
@media (max-width: 899px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .legal__lateral { position: static; }
  .legal__sumario ol { max-height: none; }
  .legal__texto { font-size: 16px; }
}

/* ================================================================== CTAs de seção, microcopy, barra fixa (v8) */
.micro-cta { margin-top: 12px; font: 500 13px/18px var(--fonte); color: var(--sobre-2); }
.plano__card .micro-cta--petroleo { margin-top: -6px; }
.cta-final__texto .micro-cta { margin-top: 14px; color: var(--sobre-2); }
.cta-secao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--linha); }
.cta-secao--petroleo { border-top-color: var(--linha-v); }
.cta-secao__micro { flex-basis: 100%; font: 500 13px/18px var(--fonte); color: var(--tinta-2); }
.cta-secao--petroleo .cta-secao__micro, .secao--petroleo .cta-secao__micro { color: var(--sobre-2); }
.cta-secao__nota { font: 500 13px/18px var(--fonte); color: var(--tinta-3); }
.cta-secao .botao img[src*="whatsapp"] { width: 18px; height: 18px; }
.botao:focus-visible, .cta-movel a:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }
.secao--claro .botao--lima:focus-visible { outline-color: var(--petroleo); }
/* Nav: destaque leve no botão depois do hero */
.nav .botao--lima { transition: box-shadow 300ms ease, transform 300ms var(--facil), background 160ms ease; }
.nav.is-pos-hero .botao--lima { box-shadow: 0 0 0 4px var(--lima-brilho), 0 10px 24px -12px rgba(221,220,0,.8); }
/* Barra fixa no mobile: aparece depois do hero, some no #agendar e no CTA final */
.cta-movel { display: none; }
@media (max-width: 899px) {
  .cta-movel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--petroleo-fundo); border-top: 1px solid var(--linha-v); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.6); transform: translateY(110%); transition: transform 320ms var(--facil); }
  .cta-movel.is-visivel { transform: none; }
  .cta-movel__txt { font: 500 12px/16px var(--fonte); color: var(--sobre-2); flex: 1; min-width: 0; }
  .cta-movel .botao { min-height: 48px; flex: none; }
  body.tem-cta-movel { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .cta-secao .botao { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 52px; padding: 12px 18px; line-height: 1.3; }
  .cta-secao .botao .ic { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .cta-movel { transition: none; } }

/* ================================================================== ValidaPay: recomendado pela Ritto (v8) */
.estrela { width: 14px; height: 14px; fill: var(--lima); stroke: color-mix(in oklab, var(--lima) 60%, var(--petroleo)); stroke-width: 1; stroke-linejoin: round; flex: none; }
.integ--recomendado { border-color: color-mix(in oklab, var(--lima) 70%, var(--linha)); box-shadow: 0 0 0 3px var(--lima-brilho); }
.integ--recomendado[aria-pressed="true"] { border-color: var(--petroleo); }
.integ__selo { display: inline-flex; align-items: center; gap: 5px; margin-top: -4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--lima); color: var(--petroleo); font: 700 11px/14px var(--fonte); }
.integ__selo .estrela { fill: var(--petroleo); stroke: none; width: 13px; height: 13px; }
.etiqueta--lima .estrela { fill: var(--petroleo); stroke: none; width: 12px; height: 12px; }
.logo-chip__logo { position: relative; display: inline-flex; flex: none; }
.logo-chip__logo .estrela { position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; fill: var(--lima); stroke: #06272C; stroke-width: 1.6; paint-order: stroke fill; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.logo-chip--recomendado { border-color: color-mix(in oklab, var(--lima) 45%, var(--linha-v)); }

/* Mobile: com a barra inferior visível, o botão da nav some (fica só logo e menu) */
@media (max-width: 899px) {
  .nav__acoes .botao--lima { transition: opacity 260ms ease, transform 260ms var(--facil), visibility 0s linear 0s; }
  .nav.is-barra-visivel .nav__acoes .botao--lima { opacity: 0; transform: translateY(-6px) scale(.96); visibility: hidden; pointer-events: none; transition: opacity 260ms ease, transform 260ms var(--facil), visibility 0s linear 260ms; }
}

/* v8.1: CTA da régua dentro do painel; cabeçalho IMAGE (QR Pix) no balão */
.cta-secao--painel { margin-top: 4px; padding-top: 0; border-top: 0; }
.balao__img { display: flex; flex-direction: column; align-items: center; padding: .6em .6em .4em; background: #fff; border-bottom: .5px solid #E4E6E8; }
.balao__img svg { width: 7.4em; height: 7.4em; display: block; }
.balao__img span { margin-top: .2em; font-size: .68em; color: #667781; }


/* v9: cabeçalhos reais dos modelos aprovados — imagem Pix 1.91:1 de ponta a ponta e PDF com miniatura da 1ª página */
.balao__foto { aspect-ratio: 1.91 / 1; overflow: hidden; background: #E9EDEF; }
.balao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.balao__mini--img { background: #fff; }
.balao__mini--img::before, .balao__mini--img::after { display: none; }
.balao__mini--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* campo de e-mail: verificação pela API (landing-demo → Reoon) */
.campo__estado { display: none; align-items: center; gap: 6px; font: 500 12px/16px var(--fonte); color: var(--tinta-3); }
.campo.is-verificando .campo__estado, .campo.is-verificado .campo__estado { display: inline-flex; }
.campo.is-verificando .campo__erro, .campo.is-verificado .campo__erro { display: none; }
.campo.is-verificado .campo__estado { color: #0B7A55; }
.campo.is-verificado .entrada { border-color: color-mix(in oklab, var(--ok) 60%, var(--linha)); }
.campo__estado .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--linha); border-top-color: var(--petroleo); animation: gira 700ms linear infinite; }
.campo__estado .ic { width: 14px; height: 14px; }
.enviar[disabled] { opacity: .55; cursor: not-allowed; }
/* e-mail que a API não conseguiu verificar (rede/5xx): não trava o envio, o servidor revalida */
.campo.is-nao-verificado .campo__estado { display: inline-flex; color: var(--tinta-3); }
.campo.is-nao-verificado .campo__erro { display: none; }
.form-msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* v9.1: seletor próprio (botão + listbox; bottom sheet no mobile) */
.seletor { position: relative; }
.seletor__botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.seletor__valor { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor__valor[data-vazio="true"] { color: var(--tinta-3); }
.seletor__chev { width: 16px; height: 16px; color: var(--tinta-3); transition: transform 200ms var(--facil); flex: none; }
.seletor.is-aberto .seletor__chev { transform: rotate(180deg); }
.seletor.is-aberto .seletor__botao { border-color: var(--petroleo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--petroleo) 18%, transparent); }
.seletor__pop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.08); padding: 6px; }
.seletor__cab { display: none; }
.seletor__lista { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow: auto; outline: none; }
.seletor__lista [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font: 500 15px/20px var(--fonte); color: var(--tinta); cursor: pointer; outline: none; }
.seletor__lista [role="option"]::after { content: ""; width: 16px; height: 16px; flex: none; opacity: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat; color: var(--petroleo); }
[data-theme="dark"] .seletor__lista [role="option"]::after { color: var(--lima); }
.seletor__lista [role="option"][aria-selected="true"] { font-weight: 600; color: var(--petroleo); background: var(--petroleo-tinta); }
[data-theme="dark"] .seletor__lista [role="option"][aria-selected="true"] { color: var(--lima); }
.seletor__lista [role="option"][aria-selected="true"]::after { opacity: 1; }
.seletor__lista [role="option"]:hover, .seletor__lista [role="option"].is-ativo { background: var(--grade); }
.seletor__lista [role="option"]:focus-visible { box-shadow: inset 0 0 0 2px var(--lima); }
.seletor__pano { display: none; }
@media (max-width: 899px) {
  .seletor.is-sheet .seletor__pop { position: fixed; z-index: 90; left: 0; right: 0; top: auto; bottom: 0; border-radius: 22px 22px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); max-height: 70vh; display: flex; flex-direction: column; animation: sheet-sobe 260ms var(--facil); }
  @keyframes sheet-sobe { from { transform: translateY(24px); opacity: 0; } }
  .seletor.is-sheet .seletor__cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 10px; font: 600 15px/20px var(--fonte); color: var(--tinta); border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
  .seletor.is-sheet .seletor__cab::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: var(--linha); }
  .seletor__fechar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--tinta-2); }
  .seletor.is-sheet .seletor__lista { max-height: none; }
  .seletor.is-sheet .seletor__lista [role="option"] { min-height: 48px; font-size: 16px; }
  .seletor__pano { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(6,39,44,.45); }
  /* A .wrap da seção (z-index 1) prendia a gaveta numa camada abaixo do pano, que fica no body. */
  body.tem-sheet .wrap { z-index: auto; }
  body.tem-sheet { overflow: hidden; }
}

/* Obrigatórios e dados lembrados */
.obrig { font-style: normal; color: var(--critico, #e34948); margin-left: 2px; }
.campos__nota { margin: 0 0 12px; font: 500 12.5px/18px var(--fonte); color: var(--tinta-3); }
.lead-lembrado { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--lima) 16%, var(--cartao)); font: 500 13px/19px var(--fonte); color: var(--tinta); }
.lead-lembrado[hidden] { display: none; }
.lead-lembrado button { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--petroleo); font: 600 13px/19px var(--fonte); text-decoration: underline; cursor: pointer; }

/* Redes sociais no rodapé */
.rodape__redes { display: flex; gap: 10px; margin-top: 18px; }
.rodape__redes--linha { margin-top: 0; }
.rodape__redes a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linha-v, rgba(255,255,255,.14)); color: var(--sobre-2, #A8BFC7); transition: color 120ms ease, border-color 120ms ease, background 120ms ease; cursor: pointer; }
.rodape__redes a:hover { color: var(--lima); border-color: color-mix(in oklab, var(--lima) 60%, transparent); background: rgba(255,255,255,.05); }
.rodape__redes a:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }
.rodape__redes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* produção: título da versão em inglês das páginas legais */
.legal__texto .legal__h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 8px; padding: 0; border: 0; }