/* Compara Jurídico v5: comparador em cartoon. Contorno marinho grosso, cores chapadas, sombra dura. */

@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinta: #14163d;
  --azul: #2b4cf0;
  --azul-esc: #1c33b8;
  --azul-claro: #e3e9ff;
  --amarelo: #ffd43b;
  --amarelo-claro: #fff4c2;
  --vermelho: #f03e3e;
  --vermelho-claro: #ffe3e3;
  --verde: #12b886;
  --verde-esc: #087f5b;
  --verde-claro: #d3f9e8;
  --roxo: #7048e8;
  --fundo: #f6f7ff;
  --branco: #ffffff;
  --cinza: #555b7e;
  --linha: #d9def5;
  --display: "Gabarito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --borda: 3px solid var(--tinta);
  --sombra: 5px 5px 0 var(--tinta);
  --raio: 18px;
  --pagina: 72rem;
  --lado: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
h1 { font-weight: 900; font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4rem); }
h2 { font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
p { margin: 0 0 1rem; }
a { color: var(--azul-esc); text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
a:hover { color: var(--tinta); background: var(--amarelo); }
:focus-visible { outline: 4px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.pular { position: absolute; left: -999rem; top: 0; background: var(--amarelo); padding: 0.6rem 1rem; font-weight: 800; z-index: 50; }
.pular:focus { left: 1rem; top: 1rem; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.miolo { max-width: var(--pagina); margin: 0 auto; padding: 0 var(--lado); }
.mini { flex: none; vertical-align: -0.2em; }

/* ---------- topo ---------- */

.topo { background: var(--branco); border-bottom: var(--borda); position: relative; z-index: 5; }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.7rem; padding-bottom: 0.7rem; flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-weight: 900; font-size: 1.35rem; color: var(--tinta); text-decoration: none; letter-spacing: -0.02em; }
.marca:hover { background: none; }
.topo nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 1.3rem; margin: 0; padding: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.topo nav a { color: var(--tinta); text-decoration: none; padding: 0.2rem 0; border-bottom: 3px solid transparent; }
.topo nav a:hover, .topo nav a[aria-current="page"] { background: none; border-bottom-color: var(--azul); }

/* ---------- botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 800; font-size: 1.08rem; line-height: 1.15; text-align: center;
  color: var(--tinta); background: var(--amarelo); text-decoration: none;
  padding: 0.85rem 1.35rem; border: var(--borda); border-radius: 14px; box-shadow: 4px 4px 0 var(--tinta);
  cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:hover { background: var(--amarelo); color: var(--tinta); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tinta); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tinta); }
.btn-verde, .btn-verde:hover { background: var(--verde); }
.btn-azul, .btn-azul:hover { background: var(--azul); color: #fff; }
.btn-branco, .btn-branco:hover { background: var(--branco); }
.btn-cheio { display: flex; width: 100%; }
.btn-p { font-size: 0.98rem; padding: 0.6rem 1rem; border-radius: 12px; box-shadow: 3px 3px 0 var(--tinta); }
.btn:disabled { opacity: 0.6; cursor: default; }
.sob-botao { font-size: 0.86rem; font-weight: 600; color: var(--cinza); margin: 0.55rem 0 0; line-height: 1.35; }

/* ---------- herói ---------- */

.heroi { background: var(--amarelo); border-bottom: var(--borda); overflow: hidden; }
.heroi .miolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: end; padding-top: 2.6rem; padding-bottom: 0; }
.heroi-texto { padding-bottom: 2.8rem; align-self: center; }
.heroi h1 { max-width: 13ch; }
.heroi .sub { font-size: 1.22rem; font-weight: 600; line-height: 1.45; max-width: 34rem; margin: 1.1rem 0 1.5rem; }
.heroi-botoes { display: flex; flex-wrap: wrap; gap: 0.8rem 0.9rem; }
.heroi .cena { display: block; width: 100%; height: auto; margin-bottom: -6px; }
.pilula { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--display); font-weight: 800; font-size: 0.98rem; background: var(--branco); border: var(--borda); border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 1.1rem; }
.pilula[hidden] { display: none; }
.confere { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin: 1.5rem 0 0; padding: 0; font-family: var(--display); font-weight: 700; font-size: 1rem; }
.confere li { display: inline-flex; align-items: center; gap: 0.4rem; }
.confere .mini { color: var(--tinta); background: var(--branco); border: 2px solid var(--tinta); border-radius: 50%; padding: 2px; }

.heroi-pagina { background: var(--amarelo); border-bottom: var(--borda); }
.heroi-pagina .miolo { padding-top: 2.2rem; padding-bottom: 2.4rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; }
.heroi-pagina h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.2rem); max-width: 20ch; }
.heroi-pagina .sub { font-size: 1.18rem; font-weight: 600; max-width: 40rem; margin: 1rem 0 0; line-height: 1.45; }
.heroi-pagina .arte { width: clamp(9rem, 20vw, 14rem); }
.heroi-pagina .arte .icone, .heroi-pagina .arte .gente { width: 100%; height: auto; display: block; }
.heroi-azul { background: var(--azul-claro); }
.heroi-verde { background: var(--verde-claro); }
.heroi-rosa { background: var(--vermelho-claro); }
.atualizado { font-family: var(--display); font-weight: 700; font-size: 0.95rem; margin: 1rem 0 0; }
.contagem { font-family: var(--display); font-weight: 800; color: #b3261e; margin: 0.4rem 0 0; }

/* ---------- faixa de contagem ---------- */

.faixa { background: var(--tinta); color: #fff; font-family: var(--display); font-weight: 700; }
.faixa .miolo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 2rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 1.05rem; }
.faixa strong { color: var(--amarelo); font-weight: 900; }
.faixa a { color: #fff; }
.faixa a:hover { color: var(--tinta); }
.faixa [hidden] { display: none; }

.promo-faixa { background: var(--vermelho); color: #fff; font-family: var(--display); font-weight: 700; border-bottom: var(--borda); }
.promo-faixa[hidden], .promo-faixa [hidden] { display: none; }
.promo-faixa .miolo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 1.2rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.promo-faixa strong { font-weight: 900; }
.promo-faixa a { color: #fff; background: rgba(20, 22, 61, 0.28); border: 2px solid #fff; border-radius: 999px; padding: 0.1rem 0.7rem; text-decoration: none; }
.promo-faixa a:hover { background: var(--amarelo); color: var(--tinta); border-color: var(--tinta); }

.necessidade { display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.4fr); gap: 1.5rem 3rem; align-items: center; }
.necessidade h2 { margin-bottom: 0.9rem; }
.necessidade p { font-size: 1.12rem; font-weight: 600; max-width: 40rem; }
.necessidade .tempo[hidden] { display: none; }
.necessidade .tempo strong { color: #b3261e; font-weight: 900; }
.necessidade .nota { font-size: 0.9rem; }
.placa-num { background: var(--amarelo); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.3rem 1.3rem 1.1rem; transform: rotate(-2deg); }
.placa-num p { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; margin: 0.8rem 0 0; }
.placa-num strong { display: block; font-weight: 900; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; }
.bonecos { display: flex; flex-wrap: nowrap; gap: 0.12rem; }
.bonecos svg { width: 9%; max-width: 1.9rem; height: auto; }
.bonecos .fora { color: var(--tinta); opacity: 0.85; }
.bonecos .dentro { color: var(--verde-esc); }

/* ---------- seções ---------- */

.secao { padding: 3.4rem 0; }
.secao-branca { background: var(--branco); border-top: var(--borda); border-bottom: var(--borda); }
.secao-azul { background: var(--azul-claro); border-top: var(--borda); border-bottom: var(--borda); }
.secao + .secao-branca, .secao + .secao-azul { margin-top: 0; }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 2rem; margin-bottom: 1.8rem; }
.cabeca p { margin: 0.5rem 0 0; font-size: 1.12rem; font-weight: 600; color: var(--cinza); max-width: 40rem; }
.cabeca .btn { flex: none; }
.cabeca-gente { display: flex; align-items: flex-end; gap: 1rem; }
.cabeca-gente .gente { width: 5.2rem; height: auto; flex: none; margin-bottom: -0.2rem; }

.texto { max-width: 46rem; }
.texto h2 { margin: 2.6rem 0 0.9rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.texto h2:first-child { margin-top: 0; }
.texto h3 { margin: 1.8rem 0 0.5rem; }
.texto ul, .texto ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.texto li { margin-bottom: 0.5rem; }
.nota { font-size: 0.95rem; font-weight: 600; color: var(--cinza); }

/* ---------- cartões de curso ---------- */

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1.6rem; }
.cartao { position: relative; display: flex; flex-direction: column; background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.capa { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 8.2rem; padding: 0.9rem 1.1rem; border-bottom: var(--borda); border-radius: 15px 15px 0 0; background: var(--azul); color: #fff; overflow: hidden; }
.capa::before { content: ""; position: absolute; right: -2.2rem; top: -2.2rem; width: 9rem; height: 9rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.capa .icone { position: relative; width: 6.4rem; height: 6.4rem; flex: none; }
.capa-marca { position: relative; font-family: var(--display); font-weight: 900; font-size: 1.55rem; line-height: 1.05; letter-spacing: -0.02em; }
.capa-tipo { display: block; font-size: 0.9rem; font-weight: 700; letter-spacing: 0; margin-top: 0.3rem; opacity: 0.95; }
.capa-amarela { background: var(--amarelo); color: var(--tinta); }
.capa-vermelha { background: var(--vermelho); }
.capa-verde { background: var(--verde); color: var(--tinta); }
.capa-roxa { background: var(--roxo); }
.capa-marinho { background: #2a2d5a; }
.capa-clara { background: var(--azul-claro); color: var(--tinta); }
.capa-cinza { background: #c9cee6; color: var(--tinta); }

.adesivo { position: absolute; z-index: 2; top: -0.85rem; right: 0.8rem; transform: rotate(3deg); font-family: var(--display); font-weight: 900; font-size: 0.88rem; line-height: 1.1; background: var(--vermelho); color: #fff; border: var(--borda); border-radius: 10px; padding: 0.3rem 0.6rem; box-shadow: 3px 3px 0 var(--tinta); }
.adesivo-verde { background: var(--verde); color: var(--tinta); }
.adesivo-amarelo { background: var(--amarelo); color: var(--tinta); }
.adesivo-cinza { background: var(--branco); color: var(--tinta); }
.adesivo[hidden] { display: none; }

.cartao-corpo { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.2rem; }
.cartao h3 { font-size: 1.3rem; }
.cartao h3 a { color: var(--tinta); text-decoration: none; }
.cartao h3 a:hover { background: var(--amarelo); }
.avaliacao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: var(--cinza); margin: 0.45rem 0 0; }
.estrelas { position: relative; display: inline-block; line-height: 0; }
.estrelas-fundo { display: inline-flex; color: #cfd5ee; }
.estrelas-cheias { position: absolute; left: 0; top: 0; display: inline-flex; overflow: hidden; white-space: nowrap; color: #f59f00; }
.estrelas svg { flex: none; }
.fatos { list-style: none; padding: 0; margin: 0.85rem 0 1rem; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.fatos li { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.fatos .mini { color: var(--verde-esc); margin-top: 0.1rem; }
.fatos li.contra .mini { color: #c2255c; }
.preco-bloco { margin-top: auto; padding-top: 0.8rem; border-top: 2px dashed var(--linha); }
.preco-bloco > span { display: block; }
.preco-de { display: block; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--cinza); }
.preco-de s { text-decoration-thickness: 2px; }
.preco { display: block; font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; }
.preco small { font-size: 1rem; font-weight: 800; }
.preco-extra { display: block; font-size: 0.92rem; font-weight: 700; color: var(--cinza); margin-top: 0.15rem; }
.cartao .btn { margin-top: 0.9rem; }
.cartao-fechado .capa { filter: saturate(0.55); }

/* ---------- cartões de caminho (quem é você) ---------- */

.caminhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.5rem; }
.caminho { display: flex; flex-direction: column; align-items: flex-start; background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.1rem 1.2rem 1.3rem; text-decoration: none; color: var(--tinta); transition: transform 0.08s ease, box-shadow 0.08s ease; }
.caminho:hover { background: var(--branco); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tinta); }
.caminho .gente { width: 7rem; height: auto; margin: -2.6rem 0 0.4rem; }
.caminho h3 { font-size: 1.35rem; }
.caminho p { margin: 0.4rem 0 0.9rem; font-weight: 600; color: var(--cinza); }
.caminho .vai { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--display); font-weight: 800; color: var(--azul-esc); }
.caminhos { padding-top: 2.4rem; }

/* ---------- guias ---------- */

.guia { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: center; background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.1rem; text-decoration: none; color: var(--tinta); transition: transform 0.08s ease, box-shadow 0.08s ease; }
.guia:hover { background: var(--branco); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--tinta); }
.guia .icone { width: 5rem; height: 5rem; grid-row: span 2; }
.guia h3 { align-self: end; }
.guia p { margin: 0; font-weight: 600; color: var(--cinza); align-self: start; line-height: 1.4; }
.gratis { display: inline-block; font-family: var(--display); font-weight: 900; font-size: 0.8rem; background: var(--verde); border: 2px solid var(--tinta); border-radius: 8px; padding: 0.05rem 0.45rem; margin-left: 0.4rem; vertical-align: 0.15em; }

/* ---------- passos ---------- */

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; counter-reset: passo; list-style: none; padding: 0; margin: 0; }
.passos li { counter-increment: passo; background: var(--branco); border: var(--borda); border-radius: var(--raio); padding: 1.2rem 1.2rem 1.1rem; position: relative; }
.passos li::before { content: counter(passo); position: absolute; top: -1rem; left: 1rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 1.25rem; background: var(--amarelo); border: var(--borda); border-radius: 50%; }
.passos h3 { margin: 0.7rem 0 0.4rem; }
.passos p { margin: 0; font-weight: 600; color: var(--cinza); }

/* ---------- página de análise ---------- */

.analise-topo { background: var(--amarelo); border-bottom: var(--borda); }
.analise-topo .miolo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr); gap: 1.5rem 2.5rem; align-items: start; padding-top: 2.2rem; padding-bottom: 2.6rem; }
.analise-topo h1 { font-size: clamp(1.95rem, 1.2rem + 3vw, 3.1rem); }
.analise-topo .sub { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 0; max-width: 38rem; line-height: 1.45; }
.trilha { font-family: var(--display); font-weight: 700; font-size: 0.95rem; margin: 0 0 0.8rem; }
.trilha a { color: var(--tinta); }
.placar { background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); position: relative; }
.placar .capa { min-height: 6.6rem; }
.placar .capa .icone { width: 5.2rem; height: 5.2rem; }
.placar-corpo { padding: 1rem 1.15rem 1.2rem; }
.placar .preco { font-size: 2.3rem; }
.placar .fatos { margin: 0.8rem 0 0.2rem; }

.veredito { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1.2rem; align-items: center; background: var(--amarelo-claro); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.2rem 1.3rem; margin: 0 0 2rem; }
.veredito .gente { width: 6rem; height: auto; }
.veredito h2 { font-size: 1.45rem; margin: 0 0 0.35rem; }
.veredito p { margin: 0; font-weight: 600; font-size: 1.08rem; }

.dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1.4rem; margin: 0 0 2rem; }
.bloco { background: var(--branco); border: var(--borda); border-radius: var(--raio); overflow: hidden; }
.bloco h2, .bloco h3 { font-size: 1.2rem; margin: 0; padding: 0.7rem 1.1rem; border-bottom: var(--borda); display: flex; align-items: center; gap: 0.5rem; }
.bloco-bom h2, .bloco-bom h3 { background: var(--verde-claro); }
.bloco-olho h2, .bloco-olho h3 { background: var(--vermelho-claro); }
.bloco-neutro h2, .bloco-neutro h3 { background: var(--azul-claro); }
.bloco ul { list-style: none; margin: 0; padding: 0.9rem 1.1rem 0.7rem; font-weight: 600; }
.bloco li { display: flex; gap: 0.55rem; margin-bottom: 0.6rem; line-height: 1.4; }
.bloco-bom .mini { color: var(--verde-esc); }
.bloco-olho .mini { color: #c2255c; }
.bloco-neutro .mini { color: var(--azul-esc); }
.bloco li .mini { margin-top: 0.15rem; }

.tabela-caixa { background: var(--branco); border: var(--borda); border-radius: var(--raio); overflow: hidden; margin: 0 0 1rem; }
.tabela-rolagem { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; font-family: var(--display); font-weight: 800; font-size: 1.2rem; padding: 0.9rem 1.1rem; background: var(--azul-claro); border-bottom: var(--borda); }
th, td { text-align: left; vertical-align: top; padding: 0.75rem 1.1rem; border-bottom: 2px solid var(--linha); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-family: var(--display); font-weight: 800; font-size: 0.92rem; color: var(--cinza); background: #fbfbff; }
tbody th { font-family: var(--display); font-weight: 800; }
.espelho tbody th { width: 11rem; }
.espelho td.sit { width: 9.5rem; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--display); font-weight: 800; font-size: 0.9rem; border: 2px solid var(--tinta); border-radius: 999px; padding: 0.1rem 0.6rem 0.1rem 0.4rem; background: var(--verde-claro); }
.chip-parte { background: var(--amarelo-claro); }
.chip-nao { background: var(--vermelho-claro); }

.comparativo th, .comparativo td { padding: 0.7rem 0.9rem; font-size: 0.98rem; }
.comparativo tbody th { min-width: 12rem; }
.comparativo .marca-celula { display: block; font-size: 0.82rem; font-weight: 800; color: var(--cinza); }
.comparativo td.num { font-family: var(--display); font-weight: 900; white-space: nowrap; font-size: 1.08rem; }
.comparativo td small { display: block; font-family: var(--texto); font-weight: 700; color: var(--cinza); font-size: 0.84rem; white-space: nowrap; }

.barras { list-style: none; margin: 0; padding: 1rem 1.1rem 1.1rem; display: grid; gap: 0.7rem; }
.barras li { display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr; gap: 0.3rem 0.9rem; align-items: center; font-family: var(--display); font-weight: 700; font-size: 0.98rem; line-height: 1.2; }
.barra { display: flex; align-items: center; height: 2.1rem; min-width: 5.6rem; background: var(--azul); border: var(--borda); border-radius: 10px; padding: 0 0.6rem; color: #fff; font-weight: 900; white-space: nowrap; }
.barra-1 { background: var(--verde); color: var(--tinta); }
.barra-fim { background: var(--amarelo); color: var(--tinta); }

.provao tbody th { font-family: var(--display); font-weight: 700; width: 21rem; }
.provao tr.grupo th { background: var(--amarelo); font-weight: 900; border-bottom: var(--borda); border-top: var(--borda); }
.provao tbody tr.grupo:first-child th { border-top: 0; }
.provao td { white-space: nowrap; }
.bolhas span { display: inline-block; width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--azul); border: 2px solid var(--tinta); margin-right: 0.22em; vertical-align: -0.08em; }
.provao .n { font-family: var(--display); font-weight: 900; margin-left: 0.35rem; }
.plano tbody th { width: 9rem; }
.plano .datas { display: block; font-weight: 700; font-size: 0.9rem; color: var(--cinza); }
.plano td.peso { width: 8.5rem; font-family: var(--display); font-weight: 700; white-space: nowrap; }
.plano td.peso strong { font-size: 1.25rem; font-weight: 900; }
.agenda th { width: 44%; }

.perguntas { display: grid; gap: 0.8rem; margin: 0 0 1rem; }
.perguntas details { background: var(--branco); border: var(--borda); border-radius: 14px; }
.perguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem; padding: 0.85rem 1.1rem; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: var(--amarelo); border: 2px solid var(--tinta); border-radius: 50%; font-weight: 900; line-height: 1; }
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { margin: 0; padding: 0 1.1rem 1rem; font-weight: 600; }

.caixa-compra { background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.3rem 1.3rem 1.4rem; margin: 0 0 2rem; display: grid; grid-template-columns: 1fr auto; gap: 0.8rem 2rem; align-items: center; }
.caixa-compra .preco { font-size: 2.4rem; }
.caixa-compra p { margin: 0.5rem 0 0; font-weight: 600; }

/* ---------- aviso de venda fechada e lista de e-mail ---------- */

.fechado { background: var(--vermelho-claro); border: var(--borda); border-radius: var(--raio); padding: 1.1rem 1.2rem 1.2rem; scroll-margin-top: 1rem; }
.fechado h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; }
.fechado p { font-weight: 600; margin: 0 0 0.6rem; }
.lista { margin: 0.8rem 0 0; position: relative; }
.lista label { display: block; font-family: var(--display); font-weight: 800; margin-bottom: 0.35rem; }
.lista-linha { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.lista input[type="email"] { flex: 1 1 14rem; min-width: 0; font-family: var(--texto); font-weight: 700; font-size: 1.05rem; padding: 0.8rem 0.9rem; border: var(--borda); border-radius: 14px; background: #fff; color: var(--tinta); }
.lista input[type="email"]::placeholder { color: #7a80a0; font-weight: 600; }
.lista .nota { margin: 0.7rem 0 0; font-size: 0.88rem; }
.lista-armadilha { position: absolute; left: -999rem; top: 0; }
.lista-retorno { font-family: var(--display); font-weight: 800; margin: 0.8rem 0 0; }
.lista.enviado .lista-linha, .lista.enviado > label { display: none; }
.lista.enviado .lista-retorno { color: var(--verde-esc); font-size: 1.2rem; margin: 0; }

.inscricao { background: var(--tinta); color: #fff; border-top: var(--borda); }
.inscricao .miolo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 2.2rem; align-items: center; padding-top: 2.6rem; padding-bottom: 2.8rem; }
.inscricao .gente { width: clamp(7rem, 16vw, 11rem); height: auto; }
.inscricao h2 { color: #fff; }
.inscricao p { font-weight: 600; font-size: 1.1rem; margin: 0.6rem 0 0; max-width: 38rem; }
.inscricao .lista { max-width: 36rem; }
.inscricao .lista input[type="email"] { border-color: #fff; }
.inscricao .btn { box-shadow: 4px 4px 0 #fff; }
.inscricao .btn:hover { box-shadow: 2px 2px 0 #fff; }
.inscricao .nota { color: #c9cee6; }
.inscricao a { color: var(--amarelo); }
.inscricao .lista.enviado .lista-retorno { color: var(--amarelo); }

/* ---------- rodapé ---------- */

.rodape { background: var(--branco); border-top: var(--borda); padding: 2.2rem 0 2.6rem; font-size: 0.94rem; font-weight: 600; color: var(--cinza); }
.rodape .miolo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 3rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-family: var(--display); font-weight: 700; font-size: 1rem; }
.rodape a { color: var(--tinta); }
.rodape p { margin: 0.7rem 0 0; max-width: 40rem; }

.barra-compra { display: none; }

/* ---------- telas pequenas ---------- */

@media (max-width: 56rem) {
  .heroi .miolo { grid-template-columns: 1fr; padding-top: 1.8rem; }
  .heroi-texto { padding-bottom: 0.6rem; }
  .heroi .cena { max-width: 30rem; margin-left: auto; margin-right: auto; }
  .analise-topo .miolo { grid-template-columns: 1fr; }
  .heroi-pagina .miolo { grid-template-columns: 1fr; }
  .heroi-pagina .arte { display: none; }
  .necessidade { grid-template-columns: 1fr; }
  .placa-num { max-width: 22rem; }
  .rodape .miolo { grid-template-columns: 1fr; }
  .caixa-compra { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
  body { font-size: 1.03rem; }
  .secao { padding: 2.5rem 0; }
  .topo nav ul { gap: 0.1rem 1rem; font-size: 0.98rem; }
  .heroi .sub { font-size: 1.1rem; }
  .heroi-botoes .btn { flex: 1 1 100%; }
  .cabeca .btn { width: 100%; }
  .inscricao .miolo { grid-template-columns: 1fr; }
  .inscricao .gente { display: none; }
  .lista .btn { flex: 1 1 100%; }
  .veredito { grid-template-columns: 1fr; }
  .veredito .gente { width: 4.6rem; }
  .guia .icone { width: 4rem; height: 4rem; }

  .espelho thead, .plano thead { position: absolute; left: -999rem; }
  .espelho, .espelho tbody, .espelho tr, .espelho th, .espelho td,
  .plano, .plano tbody, .plano tr, .plano th, .plano td { display: block; width: auto; }
  .espelho tbody tr, .plano tbody tr { border-bottom: 2px solid var(--linha); padding: 0.8rem 1rem; }
  .espelho tbody tr:last-child, .plano tbody tr:last-child { border-bottom: 0; }
  .espelho tbody th, .espelho tbody td, .plano tbody th, .plano tbody td { border: 0; padding: 0; width: auto; }
  .espelho td.sit, .plano td.peso { margin-top: 0.4rem; white-space: normal; }
  .provao th, .provao td { padding: 0.5rem 0.6rem; }
  .provao tbody th { width: 44%; font-size: 0.96rem; }
  .bolhas span { width: 0.7em; height: 0.7em; margin-right: 0.14em; }
  .barras li { grid-template-columns: 1fr; }

  body.tem-barra { padding-bottom: 4.7rem; }
  .barra-compra { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.55rem 0.9rem; background: var(--branco); border-top: var(--borda); font-family: var(--display); }
  .barra-compra-info { font-weight: 900; font-size: 1.1rem; line-height: 1.15; }
  .barra-compra-prazo { font-weight: 700; font-size: 0.86rem; color: #b3261e; }
  .barra-compra .btn { padding: 0.65rem 1rem; font-size: 1rem; white-space: nowrap; box-shadow: 3px 3px 0 var(--tinta); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .caminho, .guia { transition: none; }
}

@media print {
  .topo nav, .btn, .barra-compra, .lista, .inscricao, .faixa { display: none; }
  body { background: #fff; }
}