/* Mockup da home v3, rodada D90 (20/10, tarde): problema × solução, a jornada por 7 serviços, gráficos de ganho, diagrama
   da operação, tabela do Diagnóstico. Rodada 2 em site.rodada2.css.
   Antes: rodada 2 (20/10): pedidos do Caio sobre a rodada 1 (abertura, mapa, problemas no desenho do deck,
   faixas verdes, o que muda, mapa de ponta a ponta, Diagnóstico e rodapé). Usa o kit de telas (kit/telas.css).
   Direção: o sistema aprovado (Schibsted, papel claro, verde da marca) com as telas do produto como protagonistas,
   uma por benefício (referência Graniq, referencias/graniq.md §5), e faixas verdes só na confiança e na chamada.
   Réguas do verificador: 7 tamanhos de letra fora das telas, 3 fundos (papel, branco das telas, verde), 3 raios
   (8, 12, pílula), 1 sombra (a da tela), 3 pontos de quebra (640, 1024, 1440), toda borda numa coluna. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: var(--f-texto);
  line-height: var(--l-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, dl, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; }
b { font-weight: 600; }

:root {
  --grid-gap: var(--gap);
  --cols: 4; --gap: 16px; --m: 20px;
  --f-abre: min(36px, 9.2vw);  --l-abre: 40px;
  --f-secao: 30px; --l-secao: 36px;
  --f-num: 24px;   --l-num: 28px;
  --f-bloco: 20px; --l-bloco: 28px;
  --f-dest: 18px;  --l-dest: 28px;
  --f-texto: 16px; --l-texto: 24px;
  --f-nota: 14px;  --l-nota: 20px;
  --s-capitulo: 40px; --s-secao: 56px; --s-verde: 56px; --s-titulo: 24px;
  --cal: #F6F7F5;
  --cal-2: rgba(246, 247, 245, .86);
  --cal-3: rgba(246, 247, 245, .72);
  --cal-linha: rgba(246, 247, 245, .24);
}
@media (min-width: 640px) {
  :root { --cols: 8; --gap: 24px; --m: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --cols: 12; --m: 48px;
    --f-abre: 72px;  --l-abre: 72px;
    --f-secao: 48px; --l-secao: 52px;
    --f-num: 32px;   --l-num: 36px;
    --f-bloco: 24px; --l-bloco: 32px;
    --f-dest: 21px;  --l-dest: 32px;
    --f-texto: 17px; --l-texto: 28px;
    --s-capitulo: 64px; --s-secao: 128px; --s-verde: 128px; --s-titulo: 48px;
  }
}
@media (min-width: 1440px) {
  :root { --m: calc((100vw - 1200px) / 2); }
}

/* Grid: 4 / 8 / 12 colunas; a borda de tudo cai numa coluna */
.c {
  width: calc(100% - 2 * var(--m));
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
}
.c > * { grid-column: 1 / -1; min-width: 0; }
.sub { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }

/* ---------- Tipos ---------- */
.t-abre { font-size: var(--f-abre); line-height: var(--l-abre); font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.t-secao { font-size: var(--f-secao); line-height: var(--l-secao); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.t-num { font-size: var(--f-num); line-height: var(--l-num); font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
@media (min-width: 1024px) { .tinta-2 { margin-left: -2px; } .tinta-3 { margin-left: -3px; } }
.t-bloco { font-size: var(--f-bloco); line-height: var(--l-bloco); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.t-dest { font-size: var(--f-dest); line-height: var(--l-dest); color: var(--t2); text-wrap: pretty; }
.t-texto { font-size: var(--f-texto); line-height: var(--l-texto); color: var(--t2); text-wrap: pretty; }
.t-nota { font-size: var(--f-nota); line-height: var(--l-nota); color: var(--t3); text-wrap: pretty; }
.t-dest b, .t-texto b { color: var(--tinta); }
.nw { white-space: nowrap; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px;
  border-radius: 8px;
  font: 600 var(--f-texto)/1 "Schibsted Grotesk", system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, color .12s, transform 80ms;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.btn--verde { background: var(--verde); color: var(--branco); }
.btn--verde:hover { background: var(--verde-esc); }
.btn--verde:active { background: #044D22; }
.btn--contorno { border: 1px solid var(--tinta); color: var(--tinta); }
.btn--contorno:hover { background: var(--branco); }
.btn--contorno:active { background: var(--linha); }
.btn--cal { background: var(--cal); color: var(--verde); }
.btn--cal:hover { background: var(--branco); }
.btn--cal:active { background: var(--nevoa); }
.btn--cal-contorno { border: 1px solid var(--cal-3); color: var(--cal); }
.btn--cal-contorno:hover { background: rgba(246, 247, 245, .12); }
.btn--cal-contorno:active { background: rgba(246, 247, 245, .24); }
.verde .btn:focus-visible, .verde a:focus-visible { outline-color: var(--cal); }

/* ---------- Faixas verdes ---------- */
.verde { background: var(--verde); color: var(--cal); }
.verde .t-secao, .verde .t-num, .verde .t-abre { color: var(--cal); }
.verde .t-dest, .verde .t-texto, .verde .t-nota { color: var(--cal); }

/* ---------- Menu ---------- */
.menu { position: sticky; top: 0; z-index: 20; background: var(--papel); }
.menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linha); opacity: 0; }
.menu.rolou::after { opacity: 1; }
.menu .c { height: 56px; align-items: center; }
.menu-logo { grid-column: 1 / 3; border-radius: 8px; justify-self: start; }
.menu-logo:hover { opacity: .8; }
.menu-logo:active { opacity: .6; }
.menu-logo img { height: 20px; width: auto; }
.menu-nav { display: contents; }
.menu-como { display: none; }
.menu-diag { grid-column: 3 / -1; justify-self: end; display: flex; align-items: center; height: 44px; color: var(--t2); text-decoration: none; border-radius: 8px; }
.menu-nav a:hover { color: var(--tinta); }
.menu-nav a:active { color: var(--verde); }
.menu-cta { display: none; }
@media (min-width: 1024px) {
  .menu .c { height: 64px; }
  .menu-logo { grid-column: 1 / 4; }
  .menu-logo img { height: 24px; }
  .menu-nav { display: grid; grid-template-columns: subgrid; grid-column: 6 / 10; font-size: var(--f-texto); }
  .menu-nav a { grid-column: span 2; display: flex; align-items: center; height: 44px; justify-self: start; text-decoration: none; color: var(--t2); border-radius: 8px; }
  .menu-como { display: flex; }
  .menu-cta { display: inline-flex; grid-column: 10 / -1; justify-self: end; height: 40px; padding: 0 16px; font-size: var(--f-nota); }
}

/* ---------- s1 · Abertura ---------- */
.s1 { padding: 16px 0 var(--s-secao); }
.s1-esq { display: grid; justify-items: start; }
.s1-apoio { margin-top: 12px; }
.s1-botoes { margin-top: 24px; display: grid; gap: 12px; justify-items: start; width: 100%; }
.s1-botoes .btn--verde { width: 100%; }
@media (max-width: 639px) {
  .s1-botoes .btn--contorno { height: 24px; padding: 0; border: 0; color: var(--verde); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .s1-botoes .btn--contorno:hover { background: none; color: var(--verde-esc); }
  .s1-botoes .btn--contorno:active { background: none; color: var(--tinta); }
}
.s1-sob { margin-top: 12px; }
@media (max-width: 1023px) { .s1-sob { margin-top: 16px; } }
.s1-feed { display: none; }
.s1-mapa { margin: 20px calc(-1 * var(--m)) 0; }
@media (min-width: 640px) {
  .s1-esq { grid-template-columns: subgrid; }
  .s1-esq > * { grid-column: 1 / -1; }
  .s1-botoes { grid-template-columns: subgrid; column-gap: var(--gap); }
  .s1-botoes .btn { width: 100%; }
  .s1-botoes .btn--verde, .s1-botoes .btn--contorno { grid-column: span 4; }
  .s1-mapa { margin-inline: 0; }
}
@media (min-width: 1024px) {
  .s1 { padding-top: 56px; }
  .s1-esq { grid-column: 1 / 9; grid-row: 1; align-content: center; }
  .s1-apoio { grid-column: 1 / 7; margin-top: 24px; }
  .s1-botoes { margin-top: 32px; }
  .s1-botoes .btn--verde, .s1-botoes .btn--contorno { grid-column: span 3; }
  .s1-sob { grid-column: 1 / 9; grid-row: 2; margin-top: 16px; }
  .s1-feed { display: block; grid-column: 9 / -1; grid-row: 1 / 3; align-self: center; }
  .s1-mapa { grid-row: 3; margin-top: 48px; }
}
/* a tela bloqueada do lado do título */
.feed .bloqueio { padding: 16px 14px 14px; align-items: stretch; }
.feed .bloqueio-data, .feed .bloqueio-hora { text-align: center; }
.feed .bloqueio-hora { font-size: 48px; }
.feed .notif { margin-top: 10px; }
.feed .notif:first-of-type { margin-top: 16px; }
.notif-ic--pn { background: #2F5D8A; }
.notif-ic--ac { background: var(--verde); }

/* O mapa: quatro etapas, do Google ao WhatsApp do advogado (cena 1) */
.mapa { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 640px) { .mapa { border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra-tela); } }
.mapa .selo .rever { margin-left: auto; }
.mapa-corpo { display: grid; position: relative; padding: 0 16px 16px; }
.est { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; column-gap: 10px; position: relative; padding: 12px 0 0; }
/* a etapa: número no fio, nome forte e a hora */
.est-rot { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: center; font-size: var(--tt); line-height: 18px; color: var(--t3); }
.est-n { grid-row: span 2; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--verde); color: var(--branco); font-size: var(--tt-meta); font-weight: 600; position: relative; z-index: 1; }
.est-rot b { color: var(--tinta); font-weight: 600; font-size: var(--tt-nome); }
.est-h { white-space: nowrap; }
.est::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: -14px; border-left: 2px solid var(--verde); }
.est--3::before, .est--4::before { display: none; }
.est--4 { order: -1; grid-template-columns: minmax(0, 1fr); padding: 12px 0 6px; gap: 10px; }
.est--4 .est-rot { grid-template-columns: 26px auto 1fr; }
.est--4 .est-n { grid-row: auto; }
.est--4 .est-h { justify-self: end; }
/* peça mínima de cada etapa no celular: a busca, o 1º balão, a 1ª linha do painel */
.est-peca { display: none; }
.est--1 .est-peca, .est--2 .est-peca, .est--3 .est-peca { display: block; grid-column: 2; margin: 0; }
.est--2 .b--out { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.est--3 .pm-linha { padding: 6px 8px; }
.est--1 .serp-busca { height: 32px; padding: 0 10px; }
.est--1 .serp-anuncio, .est--2 .b--in, .est--3 .pm-linha + .pm-linha { display: none; }
.est--2 .wa-mini { padding: 6px 8px; }
.est--4 .caso { box-shadow: none; border: 1px solid var(--verde); }
@media (min-width: 1024px) {
  .mapa-corpo { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
  .est, .est--4 { grid-column: auto; order: 0; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding: 22px clamp(14px, 1.4vw, 20px) 24px; gap: 16px; border-right: 1px solid var(--linha); min-width: 0; }
  .est:last-child { border-right: 0; }
  /* o fio na horizontal, passando pelo número de cada etapa */
  .est::before, .est--3::before, .est--4::before { display: block; left: 0; right: 0; top: 35px; bottom: auto; border-left: 0; border-top: 2px solid var(--verde); }
  .est:first-child::before { left: 20px; }
  .est--4::before { right: auto; width: 20px; }
  /* nome e hora numa linha; onde a coluna não comporta (1024), a hora desce sozinha (crítica 11, M2) */
  .est-rot, .est--4 .est-rot { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; padding-right: 0; }
  .est-rot .est-h { margin-left: auto; }
  .est-n { grid-row: auto; }
  .est-rot b { font-size: 16px; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--branco); justify-self: start; }
  .est-h { justify-self: end; padding-left: 8px; background: var(--branco); }
  .est .est-peca, .est--1 .est-peca, .est--2 .est-peca, .est--3 .est-peca { display: grid; grid-column: 1; margin-top: 0; }
  .est--1 .serp-anuncio { display: grid; }
  .est--3 .pm-linha + .pm-linha { display: flex; }
  .est--2 .b--in { display: block; }
  .est--2 .wa-mini { padding: 12px 14px; }
  .est--2 .b--out { display: block; -webkit-line-clamp: none; overflow: visible; max-width: 92%; }
  .est--3 .pm-linha { padding: 9px 12px; }
  .est--1 .serp-busca { height: auto; min-height: 36px; padding: 7px 14px; white-space: normal; }
  .est--1 .serp-q { white-space: normal; }
  .est--4 { background: var(--verde); grid-template-rows: auto 1fr; }
  .est--4 .est-n { background: var(--branco); color: var(--verde-esc); }
  .est--4 .est-rot b { background: var(--verde); color: var(--branco); }
  .est--4 .est-h { background: var(--verde); color: var(--branco); }
  .est--4::before { border-top-color: var(--branco); }
  /* o card logo abaixo do rótulo: a 1366×768 ele fica inteiro na primeira tela (crítica 11, M3) */
  .est--4 .caso { align-self: start; border: 0; box-shadow: var(--sombra-tela); }
  .pm-linha .chip { padding: 0 7px; }
}
/* resultado do Google */
.serp { gap: 10px; }
.serp-busca { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; white-space: nowrap; overflow: hidden; min-width: 0; border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--wa-txt); }
.serp-busca svg { color: var(--t3); flex: none; }
.serp-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.serp-anuncio, .serp-org { display: grid; gap: 2px; }
.serp-pat { font-size: var(--tt-meta); font-weight: 600; color: var(--wa-txt); }
.serp-url { font-size: var(--tt-meta); color: var(--t3); }
.serp-tit { font-size: 15px; line-height: 1.3; color: #1A0DAB; }
.serp-tit--apagado { color: #6B6FB4; }
.serp-txt { color: var(--t2); }
/* conversa curta */
.wa-mini { background: var(--wa-fundo); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.wa-mini .b { max-width: 92%; }
/* painel curto */
.painel-mini { display: grid; border: 1px solid var(--linha); border-radius: 8px; }
.pm-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--linha); }
.pm-linha:first-child { border-top: 0; }
.pm-quem { display: grid; font-weight: 600; min-width: 0; }
.pm-quem small, .pn-quem small, .pn-orig small { font-size: var(--tt-meta); font-weight: 400; color: var(--t3); }
.chip { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: var(--tt-meta); color: var(--t2); white-space: nowrap; }
.chip--ok { border-color: var(--verde); color: var(--verde-esc); background: var(--nevoa); font-weight: 600; }
.chip--fora { color: var(--t3); border-style: dashed; }

/* ---------- s2 · Problema × solução (D90 a): a dor à esquerda, o que fazemos à direita ---------- */
.s2 { padding: 0 0 var(--s-secao); }
.s2-apoio { margin: 12px 0 var(--s-titulo); }
.ps { display: grid; grid-template-columns: subgrid; }
.ps > * { grid-column: 1 / -1; }
.ps-cab { display: none; }
.ps-linha { display: grid; grid-template-columns: subgrid; column-gap: var(--gap); row-gap: 16px; padding: 24px 0; border-top: 1px solid var(--linha); }
.ps-linha:last-child { border-bottom: 1px solid var(--linha); }
.ps-dor, .ps-sol { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--gap); row-gap: 6px; align-content: start; }
.ps-dor > *, .ps-sol > * { grid-column: 2 / -1; }
.ps-dor > .dor-n, .ps-sol > .ps-ic { grid-column: 1; }
.dor-n { grid-column: 1; grid-row: 1; font-size: var(--f-bloco); line-height: var(--l-bloco); font-weight: 600; color: var(--ambar); font-variant-numeric: tabular-nums; }
.ps-t { font-size: var(--f-bloco); line-height: var(--l-bloco); font-weight: 600; color: var(--tinta); letter-spacing: -.01em; text-wrap: balance; }
.ps-t--sol { color: var(--verde-esc); }
.ps-ic { grid-column: 1; grid-row: 1; color: var(--verde); }
.ps-selo { display: flex; margin-top: 6px; }
.ps-selo i { font-style: normal; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--nevoa); color: var(--verde-esc); font-size: var(--f-nota); font-weight: 600; white-space: nowrap; }
@media (min-width: 640px) {
  .ps-cab { display: grid; grid-template-columns: subgrid; column-gap: var(--gap); padding-bottom: 12px; }
  .ps-cab p { font-size: var(--f-nota); line-height: var(--l-nota); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
  .ps-cab svg { display: none; }
  .ps-cab-hoje { grid-column: 1 / 5; color: var(--ambar); }
  .ps-cab-nos { grid-column: 5 / -1; color: var(--verde-esc); }
  .ps-dor { grid-column: 1 / 5; }
  .ps-sol { grid-column: 5 / -1; }
}
@media (min-width: 1024px) {
  .s2 h2, .s2-apoio { grid-column: 1 / 9; }
  .ps-cab-hoje { grid-column: 1 / 7; }
  .ps-cab-nos { grid-column: 7 / -1; }
  .ps-linha { padding: 28px 0; }
  .ps-dor { grid-column: 1 / 7; }
  .ps-dor > * { grid-column: 2 / -1; }
  .ps-dor > p { grid-column: 2 / 6; }
  .ps-sol { grid-column: 7 / -1; }
  .ps-sol > p.t-texto { grid-column: 2 / 6; }
}

/* ---------- s3 · Um parceiro só (D90 b): texto à esquerda, a conta em pé à direita ---------- */
.s3 { padding: 0; }
.s3 > .c { padding-bottom: var(--s-secao); }
.s3-texto { display: grid; gap: 16px; align-content: start; }
.s3-texto h2 { margin-bottom: 8px; }
.s3-troca { margin-top: var(--s-capitulo); }
.troca-corpo { display: grid; gap: 10px; padding: 16px; }
.troca-rot { font-weight: 600; font-size: var(--tt-nome); }
.troca-rot--hoje { color: var(--ambar); }
.troca-rot--nos { color: var(--verde); }
.forn { display: grid; gap: 6px; }
.forn li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed #D9B98A; border-radius: 8px; }
.forn b { font-weight: 600; }
.forn span { font-size: var(--tt-meta); color: #7A4808; white-space: nowrap; }
.troca-soma { font-weight: 600; font-size: var(--tt-nome); }
.troca-soma--hoje { color: #7A4808; }
.troca-soma--nos { color: var(--verde-esc); }
.troca-nota { font-size: var(--tt-meta); color: var(--t2); margin-top: -4px; }
.troca-seta { display: flex; justify-content: center; color: var(--verde); padding: 4px 0; }
.troca-seta svg { transform: rotate(90deg); }
.nos { border: 2px solid var(--verde); border-radius: 8px; padding: 14px; display: grid; gap: 10px; background: var(--nevoa); }
.nos-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--verde-esc); font-size: var(--tt-nome); }
.nos-nome svg { color: var(--verde); }
.nos-itens { display: flex; flex-wrap: wrap; gap: 6px; }
.nos-itens li { padding: 4px 10px; border-radius: 999px; background: var(--branco); border: 1px solid var(--verde); color: var(--verde-esc); font-weight: 500; }
@media (max-width: 639px) { .forn span { display: none; } }
@media (min-width: 640px) { .troca-corpo { padding: 24px; } }
@media (min-width: 1024px) {
  .s3-texto { grid-column: 1 / 7; grid-row: 1; }
  .s3-troca { grid-column: 7 / -1; grid-row: 1; margin-top: 0; }
}
/* a faixa da tese (D90 c): planta técnica ao fundo e a ficha da estrutura */
.s3-faixa { position: relative; overflow: hidden; padding: var(--s-verde) 0; }
.planta { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cal); pointer-events: none; }
.s3-faixa > .c { position: relative; }
.s3-tese { color: var(--cal); }
.s3-tese-apoio { margin-top: 16px; }
.spec { margin-top: var(--s-capitulo); display: grid; grid-template-columns: subgrid; }
.spec li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--gap); row-gap: 4px; padding: 20px 0; border-top: 1px solid var(--cal-linha); align-items: baseline; }
.spec li:last-child { border-bottom: 1px solid var(--cal-linha); }
.spec h3, .spec p { grid-column: 1 / -1; }
.spec h3 { font-size: var(--f-bloco); line-height: var(--l-bloco); }
@media (min-width: 640px) {
  .spec h3 { grid-column: 1 / 4; grid-row: 1; }
  .spec p { grid-column: 4 / -1; grid-row: 1; }
}
@media (min-width: 1024px) {
  .s3-tese { grid-column: 1 / 10; }
  .s3-tese-apoio { grid-column: 1 / 8; }
  .spec li { padding: 24px 0; }
  .spec h3 { grid-column: 1 / 5; }
  .spec p { grid-column: 5 / 11; }
}

/* ---------- s4 · A jornada de um contato pelos serviços (D90 d) ---------- */
.s4 { padding: var(--s-secao) 0; }
.s4-apoio { margin: 12px 0 var(--s-titulo); }
.indice { display: none; }
.passos { display: grid; gap: var(--s-secao); }
.passo { display: grid; gap: 12px; align-content: start; }
.passo-rot { font-size: var(--f-nota); line-height: var(--l-nota); font-weight: 600; color: var(--verde-esc); text-transform: uppercase; letter-spacing: .06em; }
.passo-rot span { color: var(--verde); margin-right: 10px; font-variant-numeric: tabular-nums; }
.passo-tela { margin: 12px calc(-1 * var(--m)) 0; display: grid; gap: var(--s-titulo); }
.passo-tela > .tela, .passo-tela > figure > .tela { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.passo-tela .dado, .passo-tela .reuniao { margin-inline: var(--m); }
@media (min-width: 640px) {
  .passo-tela { margin-inline: 0; }
  .passo-tela > .tela, .passo-tela > figure > .tela { border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra-tela); }
  .passo-tela .dado, .passo-tela .reuniao { margin-inline: 0; }
}
@media (min-width: 1024px) {
  .s4 .c { align-items: start; }
  .s4 h2, .s4-apoio { grid-column: 1 / 9; }
  .indice {
    display: grid; gap: 2px; grid-column: 1 / 4; grid-row: 3;
    position: sticky; top: 112px; align-self: start; margin-top: 3px;
  }
  .indice a {
    display: flex; align-items: center; min-height: 40px; padding-left: 16px;
    border-left: 2px solid var(--linha); color: var(--t3); text-decoration: none; font-size: var(--f-texto);
  }
  .indice a:hover { color: var(--tinta); }
  .indice a:active { color: var(--verde-esc); }
  .indice a[aria-current]:hover { color: var(--verde-esc); }
  .indice a[aria-current]:active { color: var(--verde); }
  .indice a[aria-current] { color: var(--tinta); font-weight: 600; border-left-color: var(--verde); }
  .passos { grid-column: 4 / -1; grid-row: 3; grid-template-columns: subgrid; gap: var(--s-secao) var(--gap); }
  .passo { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 12px; }
  .passo > * { grid-column: 1 / -1; }
  .passo > h3, .passo > p.t-texto { grid-column: 1 / 7; }
  .passo-tela { margin-top: 16px; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: var(--gap); }
  .passo-tela > figure, .passo-tela > .tela { grid-column: 1 / -1; }
  .passo-tela--wa > .tela, .passo-tela--aviso > .tela { grid-column: 1 / 6; }
  .passo-tela--wa .dado, .passo-tela--aviso .reuniao { grid-column: 6 / -1; align-self: center; border-top: 0; padding-top: 0; }
}
@media (max-width: 639px) {
  .passo > .passo-rot { order: 0; } .passo > h3 { order: 1; } .passo > p.t-texto { order: 2; } .passo > .passo-tela { order: 3; }
}

/* página por tese no celular (usada no passo 2, com o mapa de calor por cima) */
.pt-serp { display: grid; gap: 14px; padding: 16px; align-content: center; }
.lp { max-width: 300px; margin: 0 auto; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.lp-marca { font-size: var(--tt-meta); font-weight: 600; color: var(--t3); }
.lp-tit { font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.lp-txt { color: var(--t2); }
.lp-btn { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; background: var(--verde); color: var(--branco); font-weight: 600; }
.lp-itens { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--linha); }
.lp-itens li::before { content: "· "; color: var(--t3); }
.lp-oab { font-size: var(--tt-meta); color: var(--t3); }
@media (min-width: 640px) { .pt-serp { padding: 24px; } }
/* anúncio: o Google e a campanha por trás dele */
.an-corpo { display: grid; }
.an-conta { padding: 16px; border-top: 1px solid var(--linha); display: grid; gap: 10px; align-content: start; background: var(--papel); }
.an-tit { font-weight: 600; font-size: var(--tt-nome); }
.an-dl { display: grid; gap: 8px; }
.an-dl div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.an-dl dt { color: var(--t3); font-size: var(--tt-meta); padding-top: 1px; }
.an-dl dd { margin: 0; }
.an-nota { display: flex; gap: 8px; align-items: flex-start; font-size: var(--tt-meta); color: var(--verde-esc); padding-top: 10px; border-top: 1px solid var(--linha); }
.an-nota svg { flex: none; margin-top: 2px; color: var(--verde); }
.an-corpo .pt-serp { display: grid; }
@media (min-width: 640px) {
  .an-corpo { grid-template-columns: 1.3fr 1fr; }
  .an-conta { border-top: 0; border-left: 1px solid var(--linha); padding: 24px; }
}
/* página com mapa de calor */
.ca-corpo { display: grid; }
.ca-cel { position: relative; padding: 16px; background: var(--papel); }
.ca-cel .lp { position: relative; }
.ca-calor { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.ca-toque { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; border: 2px solid #E5484D; background: rgba(229, 72, 77, .25); }
.ca-lado { padding: 16px; display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--linha); }
.ca-tit { font-weight: 600; font-size: var(--tt-nome); }
.ca-leg { display: grid; gap: 8px; }
.ca-leg li { display: flex; gap: 8px; align-items: center; }
.q { flex: none; width: 14px; height: 14px; border-radius: 999px; }
.q--1 { background: #E5484D; } .q--2 { background: #F5A524; } .q--3 { background: #46A758; }
.ca-grav { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 8px; }
.ca-grav span:last-child { display: grid; }
.ca-grav small { font-size: var(--tt-meta); color: var(--t3); }
.ca-play { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--tinta); color: var(--branco); display: grid; place-items: center; }
.ca-nota { font-size: var(--tt-meta); color: var(--t3); }
@media (min-width: 640px) {
  .ca-corpo { grid-template-columns: 1fr 1fr; }
  .ca-cel { padding: 24px; }
  .ca-lado { border-top: 0; border-left: 1px solid var(--linha); padding: 24px; }
}
/* rastreamento: a linha do tempo do contato (cena 4) */
.ra-corpo { padding: 16px; display: grid; gap: 12px; }
.ra-tit { font-weight: 600; font-size: var(--tt-nome); }
.ra-linha { display: grid; }
.ra-linha li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; position: relative; padding: 0 0 16px; }
.ra-linha li::before { content: ""; position: absolute; left: 66px; top: 6px; width: 10px; height: 10px; border-radius: 999px; background: var(--verde); }
.ra-linha li::after { content: ""; position: absolute; left: 70px; top: 18px; bottom: 0; border-left: 2px solid var(--nevoa); }
.ra-linha li:last-child { padding-bottom: 0; }
.ra-linha li:last-child::after { display: none; }
.ra-h { font-size: var(--tt-meta); color: var(--t3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ra-o { display: grid; gap: 2px; padding-left: 28px; color: var(--t2); }
.ra-o b { color: var(--tinta); font-weight: 600; }
.ra-fim::before { background: var(--branco) !important; border: 2px solid var(--verde); }
.ra-fim .ra-o b { color: var(--verde-esc); }
@media (min-width: 640px) { .ra-corpo { padding: 24px; } }
/* o dado do 1,9% */
.dado { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linha); }
.dado-kicker { font-weight: 600; color: var(--verde-esc); }
.dado-n { font-size: var(--f-abre); line-height: var(--l-abre); font-weight: 500; letter-spacing: -.035em; color: var(--verde); }
.dado-frase { color: var(--tinta); }
/* monitoria: a conversa da equipe e a avaliação */
.pn-corpo { display: grid; }
.pn-conversa { padding: 16px; display: grid; gap: 8px; align-content: start; background: var(--wa-fundo); }
.pn-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 4px; font-weight: 600; font-size: var(--tt-nome); }
.pn-cab span:last-child { font-size: var(--tt-meta); font-weight: 400; color: var(--t3); }
.mo-msg { display: grid; gap: 2px; max-width: 86%; padding: 8px 10px; border-radius: 8px; background: var(--wa-in); }
.mo-msg b { font-size: var(--tt-meta); color: var(--t3); font-weight: 600; }
.mo-msg--eq { justify-self: end; background: var(--wa-out); }
.mo-msg--atencao { outline: 2px solid var(--ambar); outline-offset: 2px; }
.pn-aval { padding: 16px; border-top: 1px solid var(--linha); display: grid; gap: 4px; align-content: start; }
.pn-aval-tit { font-weight: 600; }
.pn-aval-sub { font-size: var(--tt-meta); color: var(--t3); margin-bottom: 8px; }
.pn-aval ul { display: grid; gap: 8px; }
.pn-aval li { display: flex; gap: 8px; align-items: flex-start; }
.pn-aval li svg { color: var(--verde); flex: none; margin-top: 3px; }
.pn-aval .pn-atencao svg { color: var(--ambar); }
.pn-sug { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: var(--tt-meta); color: var(--verde-esc); }
@media (min-width: 640px) {
  .pn-corpo { grid-template-columns: 1.3fr 1fr; }
  .pn-conversa { padding: 20px; }
  .pn-aval { border-top: 0; border-left: 1px solid var(--linha); padding: 20px; }
}
.reuniao { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linha); }
.reuniao .t-dest { color: var(--tinta); font-weight: 600; }
/* ficha do contato */
.fi-corpo { padding: 16px; display: grid; gap: 16px; }
.fi-topo { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; }
.fi-topo .chip { grid-column: 2; justify-self: start; }
.fi-av { grid-row: span 2; width: 40px; height: 40px; border-radius: 999px; background: var(--verde); color: var(--branco); display: grid; place-items: center; font-weight: 600; }
.fi-quem { display: grid; }
.fi-quem small { font-size: var(--tt-meta); color: var(--t3); }
.fi-grade { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.fi-grade > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.fi-rot { font-size: var(--tt-meta); color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.fi-voce { color: var(--verde-esc); font-weight: 600; }
@media (min-width: 640px) {
  .fi-corpo { padding: 24px; }
  .fi-topo { grid-template-columns: 40px 1fr auto; }
  .fi-topo .chip { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .fi-grade { grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; border-top: 0; }
  .fi-grade > div { border-top: 1px solid var(--linha); border-bottom: 0; }
}

/* ---------- s5 · O que muda (D90 e): fundo branco próprio; cada ganho com um gráfico ilustrativo ---------- */
.s5 { padding: var(--s-secao) 0; background: var(--branco); }
.s5-apoio { margin: 12px 0 var(--s-titulo); }
.ganhos { display: grid; gap: var(--s-capitulo); }
.ganho { display: grid; gap: 8px; align-content: start; }
.ganho .tela { margin-bottom: 12px; }
.ganho-rot { font-size: var(--f-nota); line-height: var(--l-nota); font-weight: 600; color: var(--verde-esc); text-transform: uppercase; letter-spacing: .06em; }
.gr { padding: 16px; display: grid; gap: 12px; align-content: start; }
.gr-rot { font-weight: 600; font-size: var(--tt-nome); }
.gr-dica { display: flex; gap: 6px; align-items: flex-start; font-size: var(--tt-meta); color: var(--verde-esc); padding-top: 10px; border-top: 1px solid var(--linha); }
.gr-dica svg { flex: none; margin-top: 2px; }
.gr-nome { font-size: var(--tt-meta); color: var(--t2); }
.gr-nome--ok { color: var(--verde-esc); font-weight: 600; }
.gr-trilho { position: relative; display: block; height: 14px; border-radius: 999px; background: var(--papel); }
/* resposta: a noite numa régua de horas */
.gr-resp { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; row-gap: 14px; align-items: center; }
.gr-resp .gr-rot { grid-column: 1 / -1; }
.gr-eixo { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--tt-meta); color: var(--t3); }
.gr-pista { display: contents; }
.gr-fim { grid-column: 2; font-size: var(--tt-meta); color: #7A4808; margin-top: -8px; }
.gr-fim--ok { color: var(--verde-esc); font-weight: 600; }
.gr-barra { position: absolute; top: 0; bottom: 0; left: var(--de); width: calc(var(--ate) - var(--de)); border-radius: 999px; background: #E9C891; transform-origin: left center; }
.gr-ponto { position: absolute; top: -1px; left: var(--de); width: 16px; height: 16px; margin-left: -8px; border-radius: 999px; background: var(--verde); box-shadow: 0 0 0 4px var(--nevoa); }
/* verba: contatos e casos por campanha */
.gr-v { display: grid; gap: 4px; }
.gr-tot, .gr-casos { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 999px; transform-origin: left center; }
.gr-tot { background: var(--linha-forte); }
.gr-casos { background: var(--verde); }
.gr-leg { display: flex; align-items: center; gap: 6px; font-size: var(--tt-meta); color: var(--t3); }
.gr-leg i { position: static; display: inline-block; width: 14px; height: 10px; margin-left: 8px; }
.gr-leg i:first-child { margin-left: 0; }
/* filtro: todos → triagem → você */
.gr-camada { display: grid; gap: 2px; padding: 10px 14px; border-radius: 8px; }
.gr-camada span { font-size: var(--tt-meta); }
.gr-camada--1 { background: var(--papel); border: 1px solid var(--linha); }
.gr-camada--2 { width: 84%; background: var(--nevoa); color: var(--verde-esc); }
.gr-camada--3 { width: 64%; background: var(--verde); color: var(--branco); }
/* simultâneo: várias conversas no sábado */
.gr-c { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--linha); }
.gr-c-quem { display: grid; }
.gr-c-quem small { font-size: var(--tt-meta); color: var(--t3); }
/* patrimônio: degraus que entram no nome do escritório */
.gr-d { display: grid; gap: 4px; }
.gr-degrau { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 999px; background: var(--verde); transform-origin: left center; }
.gr-d-nome { display: flex; gap: 6px; align-items: center; font-size: var(--tt-meta); color: var(--t2); }
.gr-d-nome svg { color: var(--verde); flex: none; }
/* equipe: conversas × critérios */
.gr-e { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linha); }
.gr-e > span:first-child { font-weight: 600; }
.gr-e--cab { border-top: 0; font-size: var(--tt-meta); color: var(--t3); line-height: 1.25; }
.gr-e--cab > span:first-child { font-weight: 400; }
.gr-m { justify-self: start; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; }
.gr-m--ok { background: var(--nevoa); color: var(--verde-esc); }
.gr-m--at { background: #FBEBD3; color: var(--ambar); }
.s4-fecho { margin-top: var(--s-capitulo); color: var(--tinta); font-weight: 600; }
@media (min-width: 1024px) {
  .s4-fecho { grid-column: 4 / -1; }
}
@media (min-width: 640px) { .gr { padding: 20px; } }
@media (min-width: 1024px) {
  .s5 h2, .s5-apoio { grid-column: 1 / 9; }
  .ganhos { grid-template-columns: subgrid; grid-template-rows: repeat(8, auto); column-gap: var(--gap); row-gap: 0; }
  .ganho { grid-column: span 4; grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .ganho > .ganho-rot { margin-top: 4px; }
  .ganho > h3 { margin-top: 8px; }
  .ganho > p.t-texto { margin-top: 8px; }
  .ganho:nth-child(n+4) > .tela { margin-top: var(--s-capitulo); }
  .ganho > p.t-texto { padding-right: var(--gap); }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .ganhos { grid-template-columns: subgrid; column-gap: var(--gap); }
  .ganho { grid-column: span 4; }
}

/* ---------- s6 · Testado em casa (verde): texto e números, o diagrama vivo da operação e as regras ---------- */
.s6 { padding: var(--s-verde) 0; }
.s6-texto { display: grid; gap: 16px; align-content: start; }
.nums { display: grid; gap: 24px; margin-top: var(--s-capitulo); }
.nums p { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--cal-linha); }
.nums .t-abre { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cal); }
.s6-diag { margin: var(--s-capitulo) calc(-1 * var(--m)) 0; }
.s6-diag .tela { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.dg-corpo { position: relative; padding: 16px; }
.dg-nos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; position: relative; }
.dg-nos li { display: grid; gap: 2px; justify-items: start; align-content: start; }
.dg-nos b { font-weight: 600; margin-top: 6px; }
.dg-nos small { font-size: var(--tt-meta); color: var(--t3); }
.dg-ic { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--branco); border: 1.5px solid var(--verde); color: var(--verde); position: relative; z-index: 1; }
.dg-voce .dg-ic { background: var(--verde); color: var(--branco); }
.dg-fio { display: none; }
@media (min-width: 640px) {
  .s6-diag { margin-inline: 0; }
  .s6-diag .tela { border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra-tela); }
  .dg-corpo { padding: 28px 24px; }
  .dg-nos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .s6-texto { grid-column: 1 / 7; grid-row: 1; }
  .nums { grid-column: 8 / -1; grid-row: 1; margin-top: 1px; }
  .s6-diag { grid-row: 2; }
  .dg-nos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dg-fio { display: block; position: absolute; left: 44px; right: 44px; top: 47px; height: 2px; background: var(--nevoa); }
  .dg-pulso { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 999px; background: var(--verde); opacity: 0; }
}
.regras { margin-top: var(--s-capitulo); display: grid; row-gap: 0; }
.regras li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--cal-linha); color: var(--cal); }
.regras b { color: var(--cal); font-size: var(--f-bloco); line-height: var(--l-bloco); }
.s6-nota { margin-top: 24px; }
@media (min-width: 640px) {
  .regras { grid-template-columns: subgrid; column-gap: var(--gap); }
  .regras li { grid-column: span 4; }
}
@media (min-width: 1024px) {
  .regras li { grid-column: span 3; padding-right: var(--gap); }
}

/* ---------- s7 · Além do comercial (D90 g): título numa linha, texto largo embaixo, o mapa de ponta a ponta ---------- */
.s7 { padding: var(--s-secao) 0; }
.s7-texto { display: grid; gap: 12px; margin-top: 16px; }
.s7-mapa { margin-top: var(--s-capitulo); }
@media (min-width: 1024px) {
  .s7-texto { grid-column: 1 / 10; }
}

.e2e .selo { justify-content: flex-start; }
.e2e-leg { margin-left: auto; }
.e2e-leg { display: none; }
.e2e-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.area { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 8px; }
.area-tit { font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--tt-nome); }
.area-tit span { font-size: var(--tt-meta); font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.area ul { display: grid; gap: 6px; }
.area li { padding: 6px 10px; border-radius: 8px; }
.area--ar { background: var(--verde); color: var(--branco); }
.area--ar li { background: var(--verde-esc); }
/* em implantação (crítica 11, I1): faz parte do serviço, mas ainda não roda para o escritório */
.area--ar li.impl { background: transparent; border: 1px dashed rgba(255, 255, 255, .7); }
.area--ar li small { display: block; font-size: var(--tt-meta); }
.area--breve { border: 1.5px dashed var(--linha-forte); color: var(--t2); }
.area--breve li { border: 1px dashed var(--linha-forte); }
.area--breve li.voce { border: 1.5px solid var(--tinta); color: var(--tinta); font-weight: 600; }
.area--fecha { border: 1.5px dashed var(--linha-forte); color: var(--t2); }
.area--fecha li.breve { border: 1px dashed var(--linha-forte); }
.area--fecha li small { display: block; font-size: var(--tt-meta); color: var(--t3); }
.area--fecha li.voce { border: 1.5px solid var(--tinta); color: var(--tinta); font-weight: 600; background: var(--branco); }
.area--sob { border: 1.5px dashed var(--verde); color: var(--verde-esc); background: var(--nevoa); }
.area--sob li { background: var(--branco); }
.lg { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin: 0 4px 0 12px; vertical-align: middle; }
.lg--ar { background: var(--verde); }
.lg--breve { border: 1px dashed var(--t3); }
.lg--impl { border: 1px dashed var(--verde); background: repeating-linear-gradient(135deg, var(--verde) 0 2px, transparent 2px 5px); }
.lg--sob { border: 1px dashed var(--verde); background: var(--nevoa); }
@media (min-width: 640px) {
  .e2e-leg { display: inline; }
  .e2e-corpo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px; }
}

/* ---------- s8 · Diagnóstico (verde): o que testamos e o que você descobre, a escassez com o porquê, a chamada ---------- */
.s8 { padding: var(--s-verde) 0; }
.s8 .c { row-gap: 16px; }
.s8-texto { display: grid; gap: 16px; align-content: start; }
.s8-nome { font-weight: 600; }
.s8-relatorio { margin: 8px calc(-1 * var(--m)); }
.s8-relatorio .tela { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.testes { margin-top: var(--s-titulo); display: grid; grid-template-columns: subgrid; }
.testes > * { grid-column: 1 / -1; }
.testes-cab { display: none; }
.teste { display: grid; grid-template-columns: subgrid; column-gap: var(--gap); row-gap: 4px; padding: 16px 0; border-top: 1px solid var(--cal-linha); }
.teste:last-child { border-bottom: 1px solid var(--cal-linha); }
.teste > p { grid-column: 2 / -1; }
.teste-ic { grid-column: 1; grid-row: 1 / span 3; color: var(--cal); padding-top: 3px; }
.teste-p { font-size: var(--f-bloco); line-height: var(--l-bloco); font-weight: 600; color: var(--cal); }
.teste-como { color: var(--cal); }
.teste-desc { color: var(--cal); font-weight: 600; }
.escassez { margin-top: var(--s-titulo); display: grid; gap: 8px; padding-top: 20px; border-top: 2px solid var(--cal); }
.escassez-t { color: var(--cal); }
.selos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap); margin-top: 8px; }
.selos li { padding: 10px 0; border-top: 1px solid var(--cal-linha); color: var(--cal); font-weight: 600; font-size: var(--f-dest); line-height: var(--l-dest); }
.s8-botoes { display: grid; gap: 12px; margin-top: 8px; }
.s8-botoes .btn { width: 100%; }
@media (min-width: 640px) {
  .s8-botoes { grid-template-columns: subgrid; column-gap: var(--gap); }
  .s8-botoes .btn { grid-column: span 4; }
  .s8-relatorio { margin-inline: 0; }
  .s8-relatorio .tela { border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra-tela); }
  .testes-cab { display: grid; grid-template-columns: subgrid; column-gap: var(--gap); padding-bottom: 10px; }
  .testes-cab p { font-size: var(--f-nota); line-height: var(--l-nota); font-weight: 600; color: var(--cal); text-transform: uppercase; letter-spacing: .06em; }
  .testes-cab p:nth-child(1) { grid-column: 2 / 4; }
  .testes-cab p:nth-child(2) { grid-column: 4 / 6; }
  .testes-cab p:nth-child(3) { grid-column: 6 / -1; }
  .teste { align-items: start; }
  .teste-ic { grid-row: 1; }
  .teste > p { grid-row: 1; }
  .teste > .teste-p { grid-column: 2 / 4; }
  .teste > .teste-como { grid-column: 4 / 6; }
  .teste > .teste-desc { grid-column: 6 / -1; }
}
@media (min-width: 1024px) {
  .s8 .c { row-gap: 0; }
  .s8-texto { grid-column: 1 / 7; grid-row: 1; align-self: center; }
  .s8-relatorio { grid-column: 8 / -1; grid-row: 1; margin: 0; align-self: center; }
  .testes { grid-row: 2; margin-top: var(--s-secao); }
  .testes-cab p:nth-child(1) { grid-column: 2 / 5; }
  .testes-cab p:nth-child(2) { grid-column: 5 / 9; }
  .testes-cab p:nth-child(3) { grid-column: 9 / -1; }
  .teste > .teste-p { grid-column: 2 / 5; }
  .teste > .teste-como { grid-column: 5 / 9; }
  .teste > .teste-desc { grid-column: 9 / -1; }
  .escassez { grid-row: 3; grid-column: 1 / 7; margin-top: var(--s-capitulo); }
  .selos { grid-row: 3; grid-column: 7 / -1; margin-top: calc(var(--s-capitulo) + 3px); align-self: start; display: grid; grid-template-columns: subgrid; }
  .selos li { grid-column: span 3; }
  .s8-botoes { grid-row: 4; grid-column: 1 / -1; margin-top: var(--s-capitulo); }
  .s8-botoes .btn { grid-column: span 3; }
}
@media (max-width: 639px) {
  .s8-relatorio .constatacao, .s8-relatorio .prioridade, .s8-relatorio .a4-conta, .nivel-decl { display: none; }
}


/* ---------- Rodapé ---------- */
.rodape { padding: var(--s-capitulo) 0; border-top: 1px solid var(--linha); background: var(--papel); }
.rodape .c { row-gap: 28px; }
.rod-marca { display: grid; gap: 12px; justify-items: start; }
.rod-cta { display: none; }
@media (min-width: 640px) { .rod-cta { display: inline-flex; } }
@media (max-width: 639px) { .rodape .c { row-gap: 20px; } .rod-nav, .rod-contato { grid-column: span 2; } .rod-empresa { grid-column: 1 / -1; } }
.rod-marca img { height: 24px; width: auto; }
.rod-tese { font-size: var(--f-dest); line-height: var(--l-dest); font-weight: 600; color: var(--tinta); }
.rod-col { display: grid; gap: 6px; align-content: start; padding-top: 5px; font-size: var(--f-nota); line-height: var(--l-nota); color: var(--t2); }
.rod-tit { font-weight: 600; color: var(--tinta); margin-bottom: 4px; }
.rod-col address { font-style: normal; }
.rod-col a { color: var(--t2); text-decoration: none; justify-self: start; }
.rod-col a:hover { color: var(--tinta); text-decoration: underline; }
.rod-col a:active { color: var(--verde); }
.rod-base { font-size: var(--f-nota); line-height: var(--l-nota); color: var(--t3); padding-top: 20px; border-top: 1px solid var(--linha); }
@media (min-width: 640px) {
  .rod-marca { grid-column: 1 / -1; }
  .rod-nav, .rod-contato { grid-column: span 2; }
  .rod-empresa { grid-column: span 4; }
}
@media (min-width: 1024px) {
  .rodape { padding: var(--s-capitulo) 0 32px; }
  .rod-marca { grid-column: 1 / 5; }
  .rod-col { grid-column: span 2; }
  .rod-nav { grid-column: 6 / 8; }
  .rod-contato { grid-column: 8 / 10; }
  .rod-empresa { grid-column: 10 / -1; }
}

/* contraste AA dentro das telas (axe): hora no balão verde e avatar cinza um tom mais escuros */
.b--out .b-meta, .b--out .b-audio-dur { color: #4F5E66; }
.wa-av:not(.wa-av--verde) { background: #56656D; }

/* ---------- Barra fixa do celular: sem ícone do WhatsApp ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: 64px; padding: 8px var(--m);
  background: var(--papel); border-top: 1px solid var(--linha);
}
.barra .btn { width: 100%; }
.js .barra:not(.ve) { opacity: 0; visibility: hidden; }
@media (min-width: 1024px) { .barra { display: none; } }

/* ---------- Controle "Rever" das cenas ---------- */
.rever {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: 500 var(--tt-meta)/1 "Schibsted Grotesk", system-ui, sans-serif; color: var(--t3);
}
.rever.espera { visibility: hidden; }
.rever:hover { color: var(--tinta); }
.rever:active { color: var(--verde); }
.rever:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wa-topo .rever { height: 32px; color: var(--wa-txt); }
.wa-topo .rever span { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}