/* canal-denuncias.css — Landing Page EvoVoz | EVOPRO Consultoria v2
   Reaproveita: .page-hero, .container, .label-caps, .section-header,
   .ordinal, .btn/.btn-primary/.btn-white, .servico-item (accordion).
   Aqui só o que é específico desta página. */

/* ============================================================
   1 — HERO
   ============================================================ */
.cd-hero .page-hero-title { max-width: 780px; }
.cd-hero .page-hero-sub   { max-width: 640px; }

/* Sem o badge entre eles, o H1 colaria no breadcrumb. */
.cd-hero .breadcrumb-white { margin-bottom: 2.5rem; }

/* O overlay global (93%) foi calibrado para foto clara e apagaria esta imagem,
   que ja e escura. Aqui o gradiente e assimetrico de proposito: pesado a
   esquerda, onde mora o H1, e leve a direita, para o cartaz continuar legivel. */
.cd-hero .page-hero-overlay {
  background: linear-gradient(100deg,
    rgba(29, 22, 86, 0.90) 0%,
    rgba(29, 22, 86, 0.80) 42%,
    rgba(29, 22, 86, 0.52) 100%);
}
/* O <picture> e inline por padrao: sem display:block + height:100% o
   height:100% da <img> nao teria contra o que resolver e a foto deixaria
   de cobrir o hero. */
.cd-hero .page-hero-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* O cartaz vive na borda direita: sem isto o object-fit: cover o corta fora
   nas larguras estreitas, que e justamente o assunto da foto. */
.cd-hero .page-hero-photo { object-position: 72% center; }

.badge-outline-light-cd {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}

.cd-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.selos-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.selo-hero {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.8);
}
.selo-hero svg {
  flex-shrink: 0;
  color: rgba(255,255,255,0.65);
}

/* ============================================================
   CABEÇALHOS DE SEÇÃO
   ============================================================ */
/* Regra: conteudo full-width abaixo -> cabecalho centralizado (.centered,
   utilitario que ja existe no global.css). Layout em colunas -> cabecalho
   a esquerda. O max-width preserva a medida de leitura nos dois casos;
   720px aqui, contra os 680px do global. */
main .section-header { max-width: 720px; }

/* Estas intros vivem fora do .section-header e precisam acompanhar
   a centralizacao, senao o bloco fica misto (titulo centro, texto esquerda). */
.section-manifestacoes .manifestacao-intro,
.section-manifestacoes .manifestacao-fecho {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Tem max-width proprio: sem as margens automaticas ficaria encostada
   a esquerda dentro de um cabecalho centralizado. */
.section-comparativo-cd .comparativo-intro {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   2 — AUTODIAGNÓSTICO
   ============================================================ */
.section-diagnostico { background: var(--color-off-white); }

.diagnostico-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

.diagnostico-intro {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 620px;
}

.diagnostico-lista {
  border-top: 1px solid var(--color-border);
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1rem 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.check-item:focus-visible {
  outline: 2px solid var(--color-purple-main);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.check-box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-purple-main);
  background: var(--color-white);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.check-box svg { opacity: 0; transition: opacity var(--transition-fast); }

/* Hover apenas insinua o gesto; o clique e que marca de fato. */
.check-item:hover .check-box     { border-color: var(--color-purple-main); }
.check-item:hover .check-box svg { opacity: 0.35; }

.check-item[aria-checked="true"] .check-box {
  background: var(--color-purple-main);
  border-color: var(--color-purple-main);
  color: var(--color-white);
}
.check-item[aria-checked="true"] .check-box svg { opacity: 1; }
.check-item[aria-checked="true"] .check-texto  { color: var(--color-text-dark); font-weight: 500; }

.check-texto {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-dark);
  transition: font-weight var(--transition-fast);
}

.diagnostico-nota {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border);
}

.diagnostico-card {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-purple-main);
  border-radius: var(--radius-md);
  padding: 2rem;
}

.diagnostico-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.875rem;
  color: var(--color-purple-dark);
}
.diagnostico-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 0.875rem;
}
.diagnostico-card .btn { margin-top: 0.5rem; width: 100%; justify-content: center; }

.diagnostico-card .diag-contador {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-border);
}
.diagnostico-card .diag-contador strong { color: var(--color-purple-main); font-weight: 700; }
.diagnostico-card .diag-contador[hidden] { display: none; }

/* As quatro faixas ocupam a mesma celula do grid: a altura passa a ser a da
   maior delas, entao trocar de mensagem nao empurra o botao para baixo. */
.diagnostico-card .diag-msg { display: grid; margin-bottom: 1.25rem; }
.diagnostico-card .diag-faixa {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base);
}
.diagnostico-card .diag-faixa.ativa { opacity: 1; visibility: visible; }
.diagnostico-card .diag-faixa p {
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 0.875rem;
}
.diagnostico-card .diag-faixa p:last-child { margin-bottom: 0; }

/* ============================================================
   3 — POR QUE OS CANAIS FRACASSAM
   ============================================================ */
.section-falha { background: var(--color-white); }

.falha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2.5rem;
}

/* Blocos abertos: divisoria vertical entre colunas, horizontal entre fileiras.
   Sem card fechado, sem sombra, sem fundo proprio. */
.falha-bloco                 { padding: 2rem 0; }
.falha-bloco:nth-child(-n+2) { padding-top: 0; }
.falha-bloco:nth-child(odd)  { padding-right: 2.5rem; }
.falha-bloco:nth-child(even) {
  padding-left: 2.5rem;
  border-left: 1px solid var(--color-border);
}
.falha-bloco:nth-child(n+3)  { border-top: 1px solid var(--color-border); }

.falha-bloco h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 0.625rem;
  transition: color var(--transition-fast);
}
.falha-bloco:hover h3 { color: var(--color-purple-main); }

/* Terracota dessaturado: sinaliza "problema" sem o vermelho de alerta,
   que destoaria da paleta roxa da marca. */
.falha-marcador {
  flex-shrink: 0;
  width: 3px;
  height: 18px;
  margin-top: 0.15em;
  background: #B4523F;
  border-radius: 1px;
}

.falha-bloco p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   4 — APRESENTAÇÃO DO EVOVOZ (fundo escuro)
   ============================================================ */
.section-evovoz { background: var(--color-purple-dark); }

.evovoz-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.evovoz-inner h2 {
  color: var(--color-white);
  margin-bottom: 1.5rem;
}
.evovoz-inner p {
  color: rgba(255,255,255,0.75);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.evovoz-inner p:last-of-type { margin-bottom: 0; }
.evovoz-inner strong { color: var(--color-white); font-weight: 600; }

.pilares-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 3.5rem auto 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 2.5rem;
}

.pilar-col { padding: 0 2rem; text-align: left; }
.pilar-col + .pilar-col { border-left: 1px solid rgba(255,255,255,0.15); }
.pilar-col:first-child { padding-left: 0; }
.pilar-col:last-child  { padding-right: 0; }

.pilar-col h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-purple-light);
  margin-bottom: 0.75rem;
}
.pilar-col p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* ============================================================
   5 — COMO FUNCIONA (etapas com linha conectora)
   ============================================================ */
.section-etapas { background: var(--color-white); }

.etapas-horizontal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.etapa-col { position: relative; }

.etapa-marker {
  position: relative;
  height: 40px;
  margin-bottom: 1.125rem;
}

/* Fundo branco + z-index maior: o numeral "fura" a linha em vez de ficar riscado. */
.etapa-num {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: var(--color-white);
  padding-right: 0.875rem;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-purple-light);
  transition: color var(--transition-base);
}
.etapa-col:hover .etapa-num { color: var(--color-purple-main); }

.etapa-conector {
  position: absolute;
  z-index: 1;
  top: 19px;
  left: 0;
  width: calc(100% + 2rem);
  height: 1px;
  background: var(--color-border);
}
.etapa-col:last-child .etapa-conector { display: none; }

.etapa-texto h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.etapa-texto p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   7 — ALÉM DA DENÚNCIA (tipos de manifestação)
   ============================================================ */
/* Tom proprio (purple-pale) porque esta secao fica entre duas ja definidas:
   especialista (off-white) e recursos (branco). Sem ele, duas faixas iguais
   ficariam coladas. Serve tambem para marcar o momento em que a pagina
   reenquadra o produto. */
.section-manifestacoes { background: var(--color-purple-pale); }

/* Sobre --color-purple-pale, o --color-text-muted fica em ~4,5:1, no limite
   da AA. Estes textos usam --color-text-dark para ganhar folga. */
.manifestacao-intro { max-width: 720px; margin-top: 1.75rem; }
.manifestacao-intro p { font-size: 1rem; line-height: 1.8; margin: 0 0 1rem; color: var(--color-text-dark); }
.manifestacao-intro p:last-child { margin-bottom: 0; }

.manifestacao-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2.5rem;
}

/* Divisorias mais escuras que --color-border: sobre o fundo lavanda,
   #e8e6f0 praticamente desaparece. */
.manifestacao-card                 { padding: 2rem 0; }
.manifestacao-card:nth-child(-n+2) { padding-top: 0; }
.manifestacao-card:nth-child(odd)  { padding-right: 2.5rem; }
.manifestacao-card:nth-child(even) {
  padding-left: 2.5rem;
  border-left: 1px solid rgba(29, 22, 86, 0.10);
}
.manifestacao-card:nth-child(n+3)  { border-top: 1px solid rgba(29, 22, 86, 0.10); }

.manifestacao-card svg {
  display: block;
  color: var(--color-purple-main);
  margin-bottom: 0.875rem;
}
.manifestacao-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}
.manifestacao-card p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  color: var(--color-text-dark);
}

.manifestacao-fecho {
  font-size: 15px;
  line-height: 1.8;
  max-width: 720px;
  margin-top: 2.5rem;
  color: var(--color-text-dark);
}

/* ============================================================
   6 — QUEM RECEBE A DENÚNCIA (o diferencial)
   ============================================================ */
.section-especialista { background: var(--color-off-white); }

/* O cabecalho vive dentro do grid, na coluna do texto: assim ele fica
   exatamente sobre o conteudo que introduz, em vez de atravessar as duas
   colunas e terminar no meio da segunda. A foto ocupa as duas linhas. */
.especialista-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) 1fr;
  column-gap: 3.5rem;
  row-gap: 1.5rem;
  align-items: start;
  margin-top: 2.5rem;
}
.especialista-grid > .section-header {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}
.especialista-grid > .especialista-card {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.especialista-grid > .especialista-texto {
  grid-column: 2;
  grid-row: 2;
}

.especialista-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.especialista-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: block;
}

.especialista-info {
  padding: 1.5rem;
  border-top: 3px solid var(--color-purple-main);
}
.especialista-info h3 {
  font-size: 1.0625rem;
  color: var(--color-purple-dark);
  margin-bottom: 0.25rem;
}
.socia + .socia {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-border);
}
.especialista-cred {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

.especialista-intro {
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 620px;
}

.arg-lista { border-top: 1px solid var(--color-border); }

.arg-item {
  display: flex;
  gap: 1rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.arg-check {
  color: var(--color-purple-main);
  flex-shrink: 0;
  margin-top: 3px;
}

.arg-item h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.arg-item p {
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0;
}

/* ============================================================
   7 — RECURSOS DA PLATAFORMA (grid 3x3 aberto)
   ============================================================ */
.section-recursos { background: var(--color-white); }

.recursos-nota {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}
.recursos-nota a {
  color: var(--color-purple-main);
  font-weight: 600;
  border-bottom: 1px solid var(--color-purple-main);
  padding-bottom: 1px;
  transition: opacity var(--transition-fast);
}
.recursos-nota a:hover { opacity: 0.7; }

.recursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.recurso-item {
  padding: 2rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.recurso-item:hover { background: var(--color-off-white); }

.recurso-item svg {
  color: var(--color-purple-main);
  margin-bottom: 1rem;
  display: block;
}
.recurso-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.recurso-item p {
  font-size: 0.875rem;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   8 — COMPARATIVO
   ============================================================ */
.section-comparativo-cd { background: var(--color-off-white); }

.comparativo-intro {
  font-size: 1rem;
  max-width: 640px;
  margin-top: 0.5rem;
}

.cd-tabela-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.cd-tabela {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.cd-tabela thead tr { background: var(--color-purple-dark); }

.cd-tabela th {
  padding: 16px 20px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}
.cd-tabela th.col-evovoz { background: var(--color-purple-main); }

.cd-tabela .th-badge {
  display: inline-block;
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-xs);
  padding: 2px 10px;
  font-size: 12px;
}

.cd-tabela tbody tr { border-bottom: 1px solid var(--color-border); }
.cd-tabela tbody tr:last-child { border-bottom: none; }

.cd-tabela td {
  padding: 14px 20px;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.cd-tabela td.cd-criterio {
  background: var(--color-off-white);
  font-weight: 500;
  color: var(--color-text-dark);
  text-align: left;
  white-space: nowrap;
}
.cd-tabela td.cd-evo {
  background: var(--color-purple-pale);
  color: var(--color-purple-main);
  font-weight: 600;
}

.cd-tabela .cell-bad::before {
  content: '✗';
  color: #c0392b;
  font-weight: 700;
  margin-right: 6px;
}
.cd-tabela .cell-good::before {
  content: '✓';
  color: var(--color-purple-main);
  font-weight: 700;
  margin-right: 6px;
}

.cd-tabela-nota {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1.25rem;
  max-width: 720px;
}

/* ============================================================
   9 — CONFORMIDADE LEGAL
   ============================================================ */
.section-conformidade { background: var(--color-white); }

/* Bloco inteiro centralizado: a descricao fica em ~85 caracteres por linha,
   e o espaco dos dois lados vira respiro, nao falta. */
.section-conformidade .section-header,
.section-conformidade .disclaimer-box,
.section-conformidade .normas-lista {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.disclaimer-box {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-purple-light);
  border-radius: var(--radius-sm);
  background: var(--color-off-white);
  padding: 1rem 1.25rem;
  margin: 0 0 2.5rem;
}
.disclaimer-box p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}

.normas-lista { border-top: 1px solid var(--color-border); }

.norma-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.norma-chip {
  justify-self: start;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--color-purple-pale);
  color: var(--color-purple-main);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  white-space: nowrap;
}

.norma-desc {
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  padding-top: 1px;
}
.norma-desc strong { color: var(--color-text-dark); font-weight: 600; }

/* ============================================================
   10 — FAQ (reaproveita .servico-item de servicos.css)
   ============================================================ */
.section-faq-cd { background: var(--color-off-white); }

.section-faq-cd .servico-body-inner { background: var(--color-white); }
.section-faq-cd .servico-trigger { align-items: flex-start; gap: 0; }
.section-faq-cd .servico-name { line-height: 1.4; }

/* As 8 perguntas nao tem ordem: o numeral seria ornamento, e roubaria da
   secao "Como funciona" a exclusividade do recurso. /servicos/ nao muda. */
.section-faq-cd .servico-ordinal-sm { display: none; }
.section-faq-cd .servico-body-inner { padding-left: 1.5rem; }

/* ============================================================
   11 — CTA FINAL
   ============================================================ */
.section-cta-final { background: var(--color-purple-main); }

.cta-final-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.cta-final-inner h2 {
  color: var(--color-white);
  margin-bottom: 1.25rem;
}
.cta-final-inner p {
  color: rgba(255,255,255,0.85);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
/* Reversao de risco logo abaixo do botao: responde "o que acontece se eu
   clicar" no momento exato da decisao. */
.cta-garantia {
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0.875rem 0 0;
  color: var(--color-text-muted);
}
.cta-final-inner .cta-garantia {
  max-width: 30rem;
  margin-inline: auto;
  color: rgba(255,255,255,0.75);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1023px) {
  /* Abaixo de 1024px as etapas voltam ao empilhado, com linha vertical. */
  .etapas-horizontal { display: block; margin-top: 2.5rem; }
  .etapa-col {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 1.5rem;
    padding-bottom: 2.5rem;
  }
  .etapa-col:last-child { padding-bottom: 0; }
  .etapa-marker { position: static; height: auto; margin-bottom: 0; }
  .etapa-num {
    display: block;
    width: 56px;
    text-align: center;
    padding-right: 0;
    background: none;
  }
  .etapa-conector {
    top: 3rem;
    bottom: -0.25rem;
    left: 28px;
    width: 1px;
    height: auto;
  }

  .manifestacao-grid { grid-template-columns: 1fr; }
  .manifestacao-card:nth-child(odd)  { padding-right: 0; }
  .manifestacao-card:nth-child(even) { padding-left: 0; border-left: none; }
  .manifestacao-card:nth-child(2)    { border-top: 1px solid rgba(29, 22, 86, 0.10); }
  .manifestacao-card:first-child     { padding-top: 0; }

  .diagnostico-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
  .diagnostico-card  { position: static; }
  .especialista-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .especialista-grid > .section-header,
  .especialista-grid > .especialista-card,
  .especialista-grid > .especialista-texto { grid-column: 1; grid-row: auto; }
  .especialista-card { position: static; max-width: 340px; }
  .recursos-grid     { grid-template-columns: repeat(2, 1fr); }
  .pilares-cols      { grid-template-columns: 1fr; gap: 2rem; }
  .pilar-col         { padding: 0; }
  .pilar-col + .pilar-col {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 2rem;
  }
}

@media (max-width: 768px) {
  /* Quanto mais estreita a viewport, mais o cover recorta a largura. Em 72%
     o recorte cai na porta escura e o cartaz, que e o assunto da foto, sai de
     quadro: o hero vira um bloco roxo chapado. Aqui o enquadramento acompanha
     o cartaz. */
  .cd-hero .page-hero-photo { object-position: 88% center; }

  .selos-hero { gap: 0.75rem 1.25rem; }

  .cd-hero-ctas .btn { width: 100%; justify-content: center; }

  .falha-grid                  { grid-template-columns: 1fr; }
  .falha-bloco                 { padding: 1.75rem 0; }
  .falha-bloco:nth-child(odd)  { padding-right: 0; }
  .falha-bloco:nth-child(even) { padding-left: 0; border-left: none; }
  .falha-bloco:first-child     { padding-top: 0; }
  .falha-bloco:nth-child(n+2)  { border-top: 1px solid var(--color-border); }

  .etapa-col   { grid-template-columns: 44px 1fr; column-gap: 1.25rem; padding-bottom: 2.25rem; }
  .etapa-num   { width: 44px; font-size: 34px; }
  .etapa-conector { top: 2.5rem; left: 22px; }

  .norma-item  { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.375rem 0; }

  .especialista-card { max-width: none; }

  .recursos-grid { grid-template-columns: 1fr; }
  .recurso-item  { padding: 1.5rem; }

  .diagnostico-card { padding: 1.5rem; }

  .section-faq-cd .servico-body-inner { padding-left: 1.5rem; }
}

/* Âncora #como-funciona não pode ficar sob o header fixo */
html { scroll-behavior: smooth; }
#como-funciona { scroll-margin-top: var(--header-height); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .check-box,
  .check-box svg,
  .check-texto,
  .diagnostico-card .diag-faixa { transition: none; }
}