/* Meu Fiscal · site do piloto
   Tokens da identidade v1.0 (assets/marca/Meu_Fiscal/05_design_system/tokens.css).
   Página clara: papel no fundo, cartões brancos, tinta no texto e lima na ação.
   Verde, âmbar e vermelho ficam só para situação, sempre com texto. */
:root {
  --tinta: #242335;
  --lima: #D6F26B;
  --lima-2: #C6E54F;
  --papel: #F6F7F2;
  --papel-2: #EEEFE8;
  --roxo: #6251B5;
  --branco: #FFFFFF;
  --linha: #D8D9D2;
  --texto: var(--tinta);
  --texto-2: #626174;
  --texto-inv-2: #C9C8D6;
  --borda-campo: #8A8999;
  --marca-exemplo: #1F4FB8; /* cor de escritório usada nos exemplos */
  --ok-bg: #E3F1EA;      --ok: #24664C;
  --atencao-bg: #FBF0D9; --atencao: #815800;
  --critico-bg: #FBE7EB; --critico: #A72F46;
  --sombra: rgba(36, 35, 53, 0.18);

  --titulo: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-000: 0.75rem;  /* 12 */
  --t-00: 0.8125rem; /* 13 */
  --t-0: 0.875rem;   /* 14 */
  --t-1: 1.0625rem;  /* 17 */
  --t-2: 1.3125rem;  /* 21 */
  --t-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --t-4: clamp(2.75rem, 1.6rem + 5vw, 5.25rem);

  --raio: 12px;
  --raio-p: 8px;
  --raio-g: 20px;
  --raio-pp: 4px;
  --raio-celular: 44px;
  --raio-tela: 34px;
  --largura: 1240px;
  --respiro: clamp(4.5rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --rapido: 160ms;
  --padrao: 240ms;
  --lento: 600ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --atraso-1: 120ms;
  --atraso-2: 380ms;
  --atraso-3: 560ms;
  --atraso-escada: 60ms;
  --pilula: 999px;
  --sombra-1: 0 18px 40px -24px var(--sombra);
  --sombra-2: 0 24px 48px -32px var(--sombra);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; scroll-padding-bottom: 5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font: 400 var(--t-1)/1.6 var(--sans);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--t-4); line-height: 1; letter-spacing: -0.04em; }
h2 { font-size: var(--t-3); line-height: 1.12; }
h3 { font-size: var(--t-2); line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
main a:not(.botao) { text-decoration-color: var(--roxo); }
:focus-visible { outline: 3px solid var(--roxo); outline-offset: 3px; border-radius: var(--raio-pp); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--branco); padding: 8px 14px; border-radius: var(--raio-p); z-index: 20; }
.skip:focus { left: 8px; }
.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; }

/* Botões e links */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.5rem;
  background: var(--lima); color: var(--tinta);
  font: 600 var(--t-1)/1 var(--sans); text-decoration: none;
  border: 1px solid var(--tinta); border-radius: var(--raio-p); cursor: pointer;
  transition: background-color var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.botao:hover { background: var(--lima-2); }
.botao:active { transform: translateY(1px); }
.botao--pequeno { min-height: 44px; padding: 0 1rem; font-size: var(--t-0); }
.botao--largo { width: 100%; }
.botao[disabled] { opacity: 0.6; cursor: progress; }
.link-forte { font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo__in { max-width: var(--largura); margin: 0 auto; padding: 0.75rem var(--gutter); display: flex; align-items: center; gap: 2rem; }
.topo__marca img { width: 156px; height: auto; }
.topo__nav { display: flex; gap: 1.5rem; margin-left: auto; font-size: var(--t-0); font-weight: 500; }
.topo__nav a { text-decoration: none; color: var(--texto-2); }
.topo__nav a:hover { color: var(--texto); }

/* Seções: mesma largura, fundo claro contínuo, separadas por respiro */
main > section { max-width: var(--largura); margin: 0 auto; padding: var(--respiro) var(--gutter) 0; }
main > section:last-child { padding-bottom: var(--respiro); }
.cabeca { display: grid; gap: 0.75rem; text-align: center; justify-items: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cabeca p { color: var(--texto-2); max-width: 40em; }
.cabeca--esquerda { text-align: left; justify-items: start; }

/* Quadro de imagem: guarda a proporção; sem a imagem, fica um bloco neutro no lugar */
.quadro { position: relative; border-radius: var(--raio-g); overflow: hidden; background: linear-gradient(135deg, var(--papel-2), var(--linha)); }
.quadro img { width: 100%; height: 100%; object-fit: cover; }
.quadro--4x3 { aspect-ratio: 4 / 3; }
.quadro--3x2 { aspect-ratio: 3 / 2; }
.quadro--16x10 { aspect-ratio: 16 / 10; }
.quadro--4x5 { aspect-ratio: 4 / 5; }
.quadro--vazio img { display: none; }

/* Vitrine: imagem com cartões do produto por cima */
.vitrine { position: relative; margin: 0; }
.flutua {
  position: absolute; z-index: 1;
  display: flex; gap: 0.75rem; align-items: flex-start; flex-direction: column;
  background: var(--branco); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 0.9rem 1rem; max-width: 300px;
  box-shadow: var(--sombra-1);
}
.flutua:has(.flutua__icone) { flex-direction: row; align-items: center; }
.flutua__titulo { font: 700 var(--t-1)/1.25 var(--titulo); letter-spacing: -0.015em; }
.flutua__meta { font-size: var(--t-0); color: var(--texto-2); line-height: 1.35; }
.flutua__meta .contagem { font-weight: 600; color: var(--texto); }
.flutua .barra { width: 100%; margin: 0; }
.flutua__icone { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lima); }
.flutua__icone--ok { background: var(--ok-bg); }
.flutua__icone svg, .icone svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.flutua__icone--ok svg { stroke: var(--ok); }
.flutua__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--t-0); }
.flutua__lista .st { margin-right: 0.35rem; }
.flutua--topo { top: 7%; left: -2.5rem; min-width: 260px; }
.flutua--baixo { bottom: 7%; right: -1.5rem; }
.flutua--centro { left: 1.25rem; bottom: 1.25rem; max-width: 340px; }
.legenda { margin-top: 0.6rem; font-size: var(--t-000); color: var(--texto-2); }

/* Hero */
.hero { display: grid; grid-template-columns: 0.95fr 1.15fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.selo { display: inline-block; font-size: var(--t-0); font-weight: 500; color: var(--texto); background: var(--branco); border: 1px solid var(--linha); padding: 0.3rem 0.8rem; border-radius: var(--pilula); margin-bottom: 1.5rem; }
.selo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lima); border: 1px solid var(--tinta); margin-right: 0.5rem; vertical-align: 0.05em; }
.hero h1 { max-width: 9ch; }
.hero__beneficio { margin-top: 1.5rem; font: 700 var(--t-3)/1.15 var(--titulo); letter-spacing: -0.02em; max-width: 18ch; }
.hero__sub { font-size: var(--t-1); line-height: 1.55; color: var(--texto-2); margin-top: 1rem; max-width: 34em; }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.hero__nota { margin-top: 1.25rem; font-size: var(--t-0); color: var(--texto-2); max-width: 36em; }
/* No hero, os cartões ficam no terço direito da foto, livre de propósito, sem cobrir a pessoa */
.vitrine--hero .flutua--topo { left: auto; right: -1.5rem; top: 8%; }
.vitrine--hero .flutua--baixo { bottom: 9%; }

/* Barra de progresso */
.barra { height: 8px; background: var(--papel-2); border-radius: var(--pilula); margin: 1rem 0 0.5rem; overflow: hidden; }
.barra span { display: block; height: 100%; width: var(--p); background: var(--tinta); border-radius: inherit; transform-origin: left center; }
.barra--marca span { background: var(--marca-exemplo); }

/* Situação: sempre texto e ícone */
.st { display: inline-block; font-size: var(--t-00); font-weight: 500; padding: 0.2rem 0.55rem; border-radius: var(--raio-p); line-height: 1.35; }
.st::before { margin-right: 0.35rem; font-weight: 700; }
.st--ok::before { content: "✓" / ""; }
.st--atencao::before { content: "!" / ""; }
.st--critico::before { content: "✕" / ""; }
.st--ok { background: var(--ok-bg); color: var(--ok); }
.st--atencao { background: var(--atencao-bg); color: var(--atencao); }
.st--critico { background: var(--critico-bg); color: var(--critico); }

/* Passos: abas que trocam o cartão sobre o painel */
.passos__grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.passos__abas { display: grid; gap: 0.75rem; }
.aba {
  display: flex; gap: 1rem; align-items: flex-start; width: 100%; text-align: left;
  padding: 1.1rem 1.25rem; font: inherit; color: var(--texto); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--raio);
  transition: background-color var(--padrao) var(--ease), border-color var(--padrao) var(--ease);
}
.aba:hover { background: var(--branco); }
.aba[aria-selected="true"] { background: var(--branco); border-color: var(--linha); box-shadow: var(--sombra-1); }
.aba__num { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco); font: 700 1rem/1 var(--titulo); transition: background-color var(--padrao) var(--ease), border-color var(--padrao) var(--ease); }
.aba[aria-selected="true"] .aba__num { background: var(--lima); border-color: var(--tinta); }
.aba__texto { display: grid; gap: 0.35rem; }
.aba__titulo { font: 700 var(--t-2)/1.25 var(--titulo); letter-spacing: -0.015em; }
.aba__desc { color: var(--texto-2); font-size: var(--t-1); line-height: 1.5; }
.aba[aria-selected="false"] .aba__desc { display: none; }

/* Linhas alternadas: produto de um lado, texto do outro */
.linha-produto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.linha-produto--invertida > :first-child { order: 2; }
.linha-produto__texto { display: grid; gap: 1.25rem; max-width: 34em; }
.linha-produto__texto > p { color: var(--texto-2); }

/* Conversa por cima da foto */
.chat { gap: 0.45rem; align-items: stretch; width: min(320px, 80%); max-width: none; background: var(--branco); }
.flutua--chat { right: -1.5rem; bottom: -2rem; }
.chat__data { align-self: center; font-size: var(--t-000); color: var(--texto-2); background: var(--papel); padding: 0.1rem 0.55rem; border-radius: var(--raio-p); }
.msg { max-width: 85%; background: var(--papel); padding: 0.45rem 0.7rem; border-radius: var(--raio-pp) var(--raio) var(--raio) var(--raio); font-size: var(--t-0); line-height: 1.4; }
.msg--eu { align-self: flex-end; background: var(--papel-2); border-radius: var(--raio) var(--raio-pp) var(--raio) var(--raio); }

/* Simulador e celular */
.sim { display: grid; gap: 0.6rem; margin-top: 0.5rem; padding: 1.5rem; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); }
.sim__titulo { font: 600 var(--t-1)/1.3 var(--sans); letter-spacing: 0; margin-bottom: 0.25rem; }
.sim > label, .sim legend, .campo label { font-size: var(--t-0); font-weight: 600; }
.sim input[type="text"], .campo input, .campo select {
  width: 100%; min-height: 48px; padding: 0 0.875rem;
  font: 400 var(--t-1) var(--sans); color: var(--texto);
  background: var(--branco); border: 1px solid var(--borda-campo); border-radius: var(--raio-p);
}
.sim input[type="text"]:focus, .campo input:focus, .campo select:focus, .calc input[type="number"]:focus { border-color: var(--roxo); outline: 3px solid var(--roxo); outline-offset: 2px; }
.sim fieldset { border: 0; padding: 0; margin: 0.75rem 0 0; }
.sim legend { margin-bottom: 0.6rem; }
.sim__cores { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim__cores label { position: relative; }
.sim__cores input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sim__cores span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.8rem 0 0.5rem;
  border: 1px solid var(--linha); border-radius: var(--pilula); font-size: var(--t-0); cursor: pointer; background: var(--branco);
  transition: border-color var(--rapido) var(--ease), box-shadow var(--rapido) var(--ease);
}
.sim__cores span::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.sim__cores input:checked + span { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.sim__cores input:focus-visible + span { outline: 3px solid var(--roxo); outline-offset: 2px; }
.sim__nota { font-size: var(--t-00); color: var(--texto-2); }

.celular { margin: 0; width: 300px; justify-self: center; padding: 12px; background: var(--tinta); border-radius: var(--raio-celular); box-shadow: 0 40px 80px -40px var(--sombra); }
.celular__tela { background: var(--papel); border-radius: var(--raio-tela); padding: 1.25rem 1rem 1rem; min-height: 560px; display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--t-0); }
.app__topo { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.25rem 0.25rem; }
.app__sigla { width: 36px; height: 36px; border-radius: var(--raio-p); background: var(--marca); color: var(--branco); display: grid; place-items: center; font-weight: 600; font-size: var(--t-00); transition: background-color var(--rapido) var(--ease); }
.app__nome { font-weight: 600; font-size: 0.9375rem; line-height: 1.2; overflow-wrap: anywhere; }
.app__ola { font-family: var(--titulo); font-weight: 700; letter-spacing: -0.02em; font-size: 1.5rem; padding: 0 0.25rem; }
.app__cartao { background: var(--branco); border-radius: var(--raio); padding: 0.9rem 1rem; border: 1px solid var(--linha); }
.app__rotulo { color: var(--texto-2); font-size: var(--t-00); }
.app__valor { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.app__det { color: var(--texto-2); font-size: var(--t-00); line-height: 1.4; }
.app__limite { height: 8px; background: var(--papel-2); border-radius: var(--pilula); margin: 0.5rem 0; overflow: hidden; }
.app__limite span { display: block; height: 100%; background: var(--marca); border-radius: inherit; transition: background-color var(--rapido) var(--ease); }
.app__pedido { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--marca); border-radius: var(--raio); padding: 0.8rem 0.9rem; line-height: 1.4; transition: border-color var(--rapido) var(--ease); }
.app__pedido strong { font-weight: 600; }
.app__enviar { color: var(--marca); font-weight: 600; transition: color var(--rapido) var(--ease); }
.app__botao { margin-top: auto; display: grid; place-items: center; min-height: 50px; border-radius: var(--raio); background: var(--marca); color: var(--branco); font-weight: 600; transition: background-color var(--rapido) var(--ease); }
.celular__legenda { margin-top: 0.6rem; text-align: center; font-size: var(--t-000); color: var(--texto-inv-2); }

/* Placar completo */
.placar { margin: 0; color: var(--texto); background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 1.5rem; box-shadow: var(--sombra-2); }
.placar__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.placar__titulo { font-family: var(--titulo); font-size: var(--t-2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.placar__meta { font-size: var(--t-0); color: var(--texto-2); }
.placar__meta strong { font-weight: 600; color: var(--texto); }
.placar__dias { font-size: var(--t-00); color: var(--texto-2); border: 1px solid var(--linha); padding: 0.2rem 0.6rem; border-radius: var(--pilula); white-space: nowrap; }
.placar__lista { list-style: none; margin: 0; padding: 0; }
.placar__lista li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--linha); font-size: var(--t-0); }
.placar__lista li:first-child { border-top: 0; }
.placar__lista .st { text-align: right; }
.cli { font-weight: 500; display: flex; flex-direction: column; line-height: 1.3; }
.cli small { font-weight: 400; color: var(--texto-2); font-size: var(--t-00); }
.placar figcaption { margin-top: 0.75rem; font-size: var(--t-000); color: var(--texto-2); }

/* Listas com marca */
.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.lista-check li { position: relative; padding-left: 2rem; color: var(--texto-2); }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--lima); border: 1px solid var(--tinta); }
.lista-check li::after { content: ""; position: absolute; left: 0.42rem; top: 0.48em; width: 0.4rem; height: 0.22rem; border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); transform: rotate(-45deg); }

/* Por que agora */
.agora { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.agora__texto { display: grid; gap: 1.25rem; }
.agora__texto p { color: var(--texto-2); }
.linha { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linha); }
.linha li { position: relative; display: grid; gap: 0.25rem; padding: 0 0 2rem 1.75rem; }
.linha li:last-child { padding-bottom: 0; }
.linha li::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--lima); border: 1px solid var(--tinta); }
.linha__quando { font-family: var(--titulo); font-size: var(--t-2); font-weight: 700; letter-spacing: -0.015em; }
.linha__fontes { margin-top: 1.5rem; font-size: var(--t-00); color: var(--texto-2); }

/* Confiança */
.confianca__grade { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.confianca__grade div { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
.icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-p); background: var(--papel); border: 1px solid var(--linha); margin-bottom: 0.5rem; }
.confianca dt { font-weight: 600; }
.confianca dd { margin: 0; color: var(--texto-2); font-size: 0.9375rem; }

/* Preço */
.preco { display: grid; grid-template-columns: 1fr 440px; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.preco__texto { display: grid; gap: 1.5rem; max-width: 36em; }
.preco__texto > p:first-of-type { font-size: var(--t-2); line-height: 1.5; color: var(--texto-2); }
.preco__justo { font-size: var(--t-0); color: var(--texto-2); }
.calc { background: var(--branco); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: 1.75rem; display: grid; gap: 1rem; box-shadow: var(--sombra-2); }
.calc > label { font-weight: 600; }
.calc__entrada { display: flex; align-items: center; gap: 1rem; }
.calc__entrada input[type="range"] { flex: 1; accent-color: var(--tinta); min-height: 32px; }
.calc__entrada input[type="number"] { width: 5.5rem; min-height: 44px; padding: 0 0.6rem; font: 600 var(--t-1) var(--sans); color: var(--texto); border: 1px solid var(--borda-campo); border-radius: var(--raio-p); text-align: right; }
.calc__aviso { font-size: var(--t-00); color: var(--texto-2); }
.calc__aviso:empty { display: none; }
.calc__saida { display: grid; gap: 0.5rem; padding: 1rem 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.calc__linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: baseline; color: var(--texto-2); }
.calc__linha strong { color: var(--texto); font-weight: 600; }
.calc__linha--destaque strong { font-family: var(--titulo); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; background: var(--lima); padding: 0 0.4rem; border-radius: var(--raio-p); }
.calc__por { font-size: var(--t-0); color: var(--texto-2); }

/* Perguntas */
main > section.perguntas { max-width: calc(820px + 2 * var(--gutter)); }
.perguntas h2 { margin-bottom: 1.5rem; }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas details:last-of-type { border-bottom: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-weight: 600; font-size: var(--t-1); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--texto); border-bottom: 2px solid var(--texto); transform: translateY(-70%) rotate(45deg); transition: transform var(--rapido) var(--ease); }
.perguntas details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.perguntas details p { padding: 0 0 1.25rem; color: var(--texto-2); max-width: 64ch; }

/* Formulário */
.vaga { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.vaga__texto { display: grid; gap: 1.25rem; }
.vaga__texto > p { color: var(--texto-2); }
.form { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; }
.campo { display: grid; gap: 0.4rem; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--critico); }
.campo .erro { font-size: var(--t-00); color: var(--critico); }
.campo--mel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__obrigatorio { font-size: var(--t-0); color: var(--texto-2); }
.form__privacidade { font-size: var(--t-00); color: var(--texto-2); }
.form__noscript { font-size: var(--t-0); font-weight: 500; color: var(--critico); }
.form__status { font-size: var(--t-0); font-weight: 500; }
.form__status[data-tipo="ok"] { color: var(--ok); background: var(--ok-bg); padding: 0.75rem 1rem; border-radius: var(--raio-p); }
.form__status[data-tipo="erro"] { color: var(--critico); background: var(--critico-bg); padding: 0.75rem 1rem; border-radius: var(--raio-p); }

/* Rodapé */
.rodape { background: var(--tinta); color: var(--texto-inv-2); }
.rodape__in { max-width: var(--largura); margin: 0 auto; padding: 3rem var(--gutter); display: grid; gap: 0.75rem; font-size: var(--t-0); }
.rodape img { width: 156px; }
.rodape__descritor { color: var(--branco); font: 600 var(--t-1)/1.4 var(--titulo); margin-bottom: 0.5rem; }
.rodape :focus-visible { outline-color: var(--lima); }
.rodape a { color: inherit; }

/* Atalho de WhatsApp (só aparece se configurado) */
.whats { position: fixed; right: 1rem; bottom: 1rem; z-index: 9; background: var(--branco); color: var(--texto); border: 1px solid var(--linha); padding: 0.75rem 1rem; border-radius: var(--pilula); font-weight: 600; font-size: var(--t-0); text-decoration: none; box-shadow: var(--sombra-1); }

/* Movimento: uma entrada no hero e revelação única ao rolar. Nada se mexe sem parar. */
@media (prefers-reduced-motion: no-preference) {
  /* "backwards": se a animação não rodar, o conteúdo aparece normalmente */
  /* A entrada do hero é só CSS: não depende do script e não pisca */
  .entra { animation: sobe var(--lento) var(--ease) backwards; }
  .entra--2 { animation-delay: var(--atraso-1); }
  .entra--3 { animation-delay: var(--atraso-2); }
  .entra--4 { animation-delay: var(--atraso-3); }
  .vitrine--hero .barra span { animation: enche var(--lento) var(--ease) var(--atraso-3) backwards; }
  .js .revela { opacity: 0; transform: translateY(16px); transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease); }
  .js .revela.visivel { opacity: 1; transform: none; }
  .js .revela.visivel .placar__lista li, .js .revela.visivel .flutua:not([role="tabpanel"]) { animation: sobe var(--padrao) var(--ease) backwards; animation-delay: calc(var(--atraso-1) + var(--i, 0) * var(--atraso-escada)); }
  .js .revela.visivel .barra span { animation: enche var(--lento) var(--ease) var(--atraso-1) backwards; }
  .js [role="tabpanel"]:not([hidden]) { animation: aparece var(--padrao) var(--ease); }
  @keyframes sobe { from { opacity: 0; transform: translateY(10px); } }
  @keyframes enche { from { transform: scaleX(0); } }
  @keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Responsivo */
@media (max-width: 980px) {
  .hero, .agora, .vaga, .preco, .passos__grade, .linha-produto { grid-template-columns: minmax(0, 1fr); }
  .linha-produto--invertida > :first-child { order: 0; }
  .passos__abas { order: -1; }
  .confianca__grade { grid-template-columns: 1fr 1fr; }
  .topo__nav { display: none; }
  .topo__in { justify-content: space-between; }
  .flutua--topo, .vitrine--hero .flutua--topo { left: auto; right: 1rem; }
  .flutua--baixo, .flutua--chat { right: 1rem; }
  .vitrine--dor { margin-bottom: 2rem; }
}
@media (max-width: 680px) {
  .confianca__grade { grid-template-columns: 1fr; }
  .placar { padding: 1.1rem; }
  .placar__lista li { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .placar__lista .st { text-align: left; }
  .celular { width: min(300px, 100%); }
  .topo__marca img { width: 128px; }
  .botao--pequeno { padding: 0 0.8rem; }
  /* No celular, os cartões saem de cima da imagem e ficam logo abaixo dela */
  .flutua { position: relative; inset: auto; max-width: none; width: auto; margin: -1.5rem 0.75rem 0; }
  .flutua + .flutua { margin-top: 0.75rem; }
  .vitrine--dor { margin-bottom: 0; }
  .aba__desc { font-size: var(--t-0); }
}