/* Base das versões. Papéis de cor (identidade da marca):
   azul-marinho = títulos, texto e família do fundo escuro;
   laranja = só botão de ação principal e acentos de sol/energia;
   verde = só valores de economia e estados concluídos;
   dourado = só o brilho do sol no tema escuro.
   Tema: data-tema="claro" | "escuro" no <html> (script no <head> + /versoes/tema.js);
   sem data-tema, segue prefers-color-scheme. */
:root {
  --azul: #003A74;
  --laranja: #EF7B0E;
  --acao: #EF7B0E;
  --acao-texto: #0B1B33;
  --sol: #FFB31A;
  --display: 'Unbounded', system-ui, sans-serif;
  --texto: 'Instrument Sans', system-ui, sans-serif;
  --gutter: clamp(16px, 6vw, 96px);
}

:root,
:root[data-tema="claro"] {
  --papel: #F3F6FB;
  --superficie: #FFFFFF;
  --tinta: #003A74;
  --azul-escuro: #123E6B;
  --suave: #4C6683;
  --linha: #DCE5F0;
  --regua: #B9C8DB;
  --verde: #17703F;
  --verde-faixa: #7FE0A8;
  --sobre-cor: #FFFFFF;
  --anel-verde: rgba(23, 112, 63, 0.18);
  --anel-suave: rgba(76, 102, 131, 0.2);
  --acao-hover: #F59234;
  --foco: #003A74;
  --foco-faixa: #F3F6FB;
  --faixa: #003A74;
  --faixa-texto: #FFFFFF;
  --faixa-texto-2: #CFDCEA;
  --fantasma-hover: rgba(0, 58, 116, 0.07);
  --chip: #E3EBF5;
  --erro: #B3261E;
  --campo: #FFFFFF;
  --selecao-fundo: #003A74;
  --selecao-texto: #FFFFFF;
  --selecao-sub: #CFDCEA;
  --sombra: rgba(0, 38, 77, 0.16);
  --veu-rgb: 243, 246, 251;
  --creme: #FBF4EA;
  --icone: #003A74;
  --icone-fundo: #E3EBF5;
  --borda-secao: transparent;
  --zap-fundo: #E1F3E8;
  --zap-texto: #0E3B22;
  --zap-hora: #25603D;
  --bolha-cliente: #003A74;
  --bolha-cliente-texto: #FFFFFF;
  --cel-moldura: #0B1626;
  --cel-chat: #ECE5DD;
  --cel-msg: #DCF8C6;
  --cel-texto: #14231B;
  --cel-hora: #4A5E53;
  --cel-topo: #075E54;
  --cel-topo-texto: #FFFFFF;
  --cel-topo-sub: #D5EEE9;
  --cel-pe: #F0F0F0;
  --cel-acento: #075E54;
  --cel-acento-hover: rgba(7, 94, 84, 0.1);
  --mapa-pais: #DCE5F0;
  --mapa-pais-borda: #B9C8DB;
  --mapa-uf: #003A74;
  --mapa-uf-borda: #F3F6FB;
  --mapa-rotulo: #FFFFFF;
  --logo-fundo: transparent;
  --logo-respiro: 0;
  --brilho-sol: none;
  --mostra-sol: none;
  --mostra-lua: inline;
  color-scheme: light;
}

:root[data-tema="escuro"] {
  --papel: #0B1B33;
  --superficie: #12284A;
  --tinta: #F3F6FB;
  --azul-escuro: #C9D6E5;
  --suave: #9FB3C8;
  --linha: #24406A;
  --regua: #2F5182;
  --verde: #3FBF7F;
  --verde-faixa: #7FE0A8;
  --sobre-cor: #0B1B33;
  --anel-verde: rgba(63, 191, 127, 0.25);
  --anel-suave: rgba(159, 179, 200, 0.22);
  --acao-hover: #F59234;
  --foco: #F3F6FB;
  --foco-faixa: #F3F6FB;
  --faixa: #163560;
  --faixa-texto: #F3F6FB;
  --faixa-texto-2: #C9D6E5;
  --fantasma-hover: rgba(243, 246, 251, 0.08);
  --chip: #1C3A63;
  --erro: #FF8A80;
  --campo: #12284A;
  --selecao-fundo: #F3F6FB;
  --selecao-texto: #0B1B33;
  --selecao-sub: #4C6683;
  --sombra: rgba(0, 0, 0, 0.45);
  --veu-rgb: 11, 27, 51;
  --creme: #172C4B;
  --icone: #9CC2EE;
  --icone-fundo: #1C3A63;
  --borda-secao: rgba(255, 255, 255, 0.06);
  --zap-fundo: #005C4B;
  --zap-texto: #E9EDEF;
  --zap-hora: #B3D9CE;
  --bolha-cliente: #2A4A78;
  --bolha-cliente-texto: #F3F6FB;
  --cel-moldura: #2A3942;
  --cel-chat: #0B141A;
  --cel-msg: #005C4B;
  --cel-texto: #E9EDEF;
  --cel-hora: #B3D9CE;
  --cel-topo: #202C33;
  --cel-topo-texto: #E9EDEF;
  --cel-topo-sub: #AEBAC1;
  --cel-pe: #202C33;
  --cel-acento: #00A884;
  --cel-acento-hover: rgba(0, 168, 132, 0.15);
  --mapa-pais: #1C3558;
  --mapa-pais-borda: #2C4A75;
  --mapa-uf: #7FA8D9;
  --mapa-uf-borda: #0B1B33;
  --mapa-rotulo: #0B1B33;
  --logo-fundo: #F3F6FB;
  --logo-respiro: 3px;
  --brilho-sol: radial-gradient(circle at 94% 0%, rgba(255, 179, 26, 0.16), rgba(255, 179, 26, 0) 34%);
  --mostra-sol: inline;
  --mostra-lua: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --papel: #0B1B33;
    --superficie: #12284A;
    --tinta: #F3F6FB;
    --azul-escuro: #C9D6E5;
    --suave: #9FB3C8;
    --linha: #24406A;
    --regua: #2F5182;
    --verde: #3FBF7F;
    --verde-faixa: #7FE0A8;
    --sobre-cor: #0B1B33;
    --anel-verde: rgba(63, 191, 127, 0.25);
    --anel-suave: rgba(159, 179, 200, 0.22);
    --acao-hover: #F59234;
    --foco: #F3F6FB;
    --foco-faixa: #F3F6FB;
    --faixa: #163560;
    --faixa-texto: #F3F6FB;
    --faixa-texto-2: #C9D6E5;
    --fantasma-hover: rgba(243, 246, 251, 0.08);
    --chip: #1C3A63;
    --erro: #FF8A80;
    --campo: #12284A;
    --selecao-fundo: #F3F6FB;
    --selecao-texto: #0B1B33;
    --selecao-sub: #4C6683;
    --sombra: rgba(0, 0, 0, 0.45);
    --veu-rgb: 11, 27, 51;
    --creme: #172C4B;
    --icone: #9CC2EE;
    --icone-fundo: #1C3A63;
    --borda-secao: rgba(255, 255, 255, 0.06);
    --zap-fundo: #005C4B;
    --zap-texto: #E9EDEF;
    --zap-hora: #B3D9CE;
    --bolha-cliente: #2A4A78;
    --bolha-cliente-texto: #F3F6FB;
    --cel-moldura: #2A3942;
    --cel-chat: #0B141A;
    --cel-msg: #005C4B;
    --cel-texto: #E9EDEF;
    --cel-hora: #B3D9CE;
    --cel-topo: #202C33;
    --cel-topo-texto: #E9EDEF;
    --cel-topo-sub: #AEBAC1;
    --cel-pe: #202C33;
    --cel-acento: #00A884;
    --cel-acento-hover: rgba(0, 168, 132, 0.15);
    --mapa-pais: #1C3558;
    --mapa-pais-borda: #2C4A75;
    --mapa-uf: #7FA8D9;
    --mapa-uf-borda: #0B1B33;
    --mapa-rotulo: #0B1B33;
    --logo-fundo: #F3F6FB;
    --logo-respiro: 3px;
    --brilho-sol: radial-gradient(circle at 94% 0%, rgba(255, 179, 26, 0.16), rgba(255, 179, 26, 0) 34%);
    --mostra-sol: inline;
    --mostra-lua: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.rodape a { display: inline-flex; align-items: center; min-height: 44px; }

/* botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  color: var(--acao-texto);
  background: var(--acao);
}
.btn-primary:hover { background: var(--acao-hover); transform: translateY(-1px); }

.btn-ghost {
  color: var(--tinta);
  border-color: currentColor;
  background: transparent;
}
.btn-ghost:hover { background: var(--fantasma-hover); }

/* etapas da linha do tempo (a lista pai precisa de counter-reset: etapa) */

.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  padding-bottom: 28px;
  counter-increment: etapa;
}

.etapa::before {
  content: counter(etapa);
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--sobre-cor);
  background: var(--verde);
}

.etapa:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 4px;
  width: 2px;
  background: var(--linha);
}

.etapa h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.etapa-prazo {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-escuro);
}

.etapa-pendente::before { background: var(--suave); }

.etapa-pendente .etapa-prazo {
  display: inline-block;
  width: fit-content;
  padding: 2px 10px;
  border: 1px dashed var(--suave);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--suave);
}

/* avaliações */

.avaliacao {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--regua);
}

.avaliacao p { font-size: 17px; }

.avaliacao cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--suave);
}

.estrelas {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 18px;
  letter-spacing: 2px;
  color: #FBBC04; /* amarelo das estrelas do Google */
}

/* faixa de prova do Google: estrelas na cor do Google, sem nota inventada */

.barra-prova {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}
.barra-prova .estrelas { margin: 0; font-size: 20px; line-height: 1; }

/* ícones de linha (SVG inline no estilo Lucide, traço 1.75) */

.ic {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--icone);
  background: var(--icone-fundo);
}

/* fotos: mesmos cantos e sombra em todas as versões */

.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--chip);
  box-shadow: 0 1px 2px var(--sombra), 0 12px 32px -12px var(--sombra);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
/* miniaturas das etapas */

.etapa-midia { display: flex; gap: 8px; margin-top: 10px; }
.etapa-midia img,
.etapa-midia .ic-tile {
  width: 64px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
}
.etapa-midia .ic { width: 26px; height: 26px; }

/* perguntas frequentes */

.pergunta {
  border-bottom: 1px solid var(--linha);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.pergunta summary::-webkit-details-marker { display: none; }

.pergunta summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--tinta);
  border-bottom: 2.5px solid var(--tinta);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.pergunta[open] summary::after { transform: rotate(-135deg); }

.pergunta p {
  padding: 0 0 18px;
  max-width: 40rem;
  color: var(--azul-escuro);
}

/* faixa de prova */

.faixa-prova {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 40px;
  padding: 32px var(--gutter);
  background: var(--superficie);
  border-block: 1px solid var(--linha);
}

.faixa-prova strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--tinta);
}

/* número de economia: o único verde da faixa */
.faixa-prova .economia strong { color: var(--verde); }

.faixa-prova span { display: block; margin-top: 6px; font-size: 15px; color: var(--suave); }
.faixa-prova small { display: block; margin-top: 4px; font-size: 13px; color: var(--suave); }

@media (max-width: 639px) {
  .faixa-prova { grid-template-columns: 1fr; }
}

/* rodapé */

.rodape {
  padding: 40px var(--gutter);
  font-size: 14px;
  color: var(--faixa-texto);
  background: var(--faixa);
}

.rodape a { color: inherit; text-underline-offset: 3px; }
.rodape :focus-visible { outline-color: var(--foco-faixa); }

/* marca: no escuro o logo colorido ganha um selo claro (o azul do painel some no fundo marinho) */

.marca img {
  padding: var(--logo-respiro);
  border-radius: 10px;
  background: var(--logo-fundo);
}

/* topo: botão de tema ao lado do WhatsApp */

.topo-acoes { display: flex; align-items: center; gap: 8px; min-width: 0; }

.tema-botao {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--regua);
  border-radius: 50%;
  font: 20px/1 system-ui, 'Segoe UI Symbol', sans-serif;
  color: var(--tinta);
  background: transparent;
  cursor: pointer;
}
.tema-botao:hover { background: var(--fantasma-hover); }
.tema-sol { display: var(--mostra-sol); color: var(--sol); }
.tema-lua { display: var(--mostra-lua); }

/* texto só para leitor de tela em telas estreitas ("Falar no " some, "WhatsApp" fica) */
@media (max-width: 479px) {
  .some-estreito {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}