/* Página "Canais Oficiais" — Figma: "Canais Oficiais — Desktop 1200" (339:1064) e "Canais Oficiais — Mobile 375" (339:1366).
   Reaproveita a estrutura da Política de Privacidade (privacy.css): header fixo, grade 344 | 1 | resto com a coluna
   esquerda "sticky" (nunca "fixed") e o filete vertical; no mobile, uma coluna só. Este arquivo só acrescenta o que é
   próprio da página e só usa classes "co-". Tamanhos do Figma, sem escala fluida. */

.co-main {
  padding-block: 40px 64px;
}

.co-eyebrow {
  color: var(--texto-destaque);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Coluna esquerda: contexto (mobile: topo da página) ---------- */

.co-side {
  gap: 32px;
}

.co-side > * {
  width: 100%;
}

.co-titulo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.co-lead {
  color: var(--texto-corpo);
  font-size: 18px;
  line-height: 28px;
}

/* Cartão de contato: 8px de respiro em volta e a mesma sombra flutuante dos cards do site */
.co-visual {
  padding: 8px;
}

.co-cartao {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--borda-padrao);
  border-radius: 24px;
  background: var(--fundo-superficie);
  filter: var(--sombra-comparacao);
}

.co-cartao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.co-cartao__logo {
  flex: none;
  width: 101px;
  height: 25px;
}

.co-selo {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--verde-30);
  border-radius: 999px;
  background: var(--verde-10);
  color: var(--texto-destaque);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.co-selo img {
  flex: none;
  width: 14px;
  height: 14px;
}

.co-cartao__linha {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--borda-padrao);
}

.co-cartao__dados {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.co-cartao__dados div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.co-cartao__dados dt {
  color: var(--texto-apoio);
  font-size: 16px;
  line-height: 24px;
}

.co-cartao__dados dd {
  margin: 0;
  color: var(--texto-corpo);
  font-size: 18px;
  line-height: 28px;
}

/* No mobile o filete horizontal já vem de .policy__rule (margem de 40px); aqui o texto vem 40px depois */
.co-body {
  container-type: inline-size; /* "largo" x "empilhado" dependem da largura da coluna, não da janela */
  container-name: co;
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 40px;
  min-width: 0;
  color: var(--texto-corpo);
}

/* ---------- Seções da coluna direita ---------- */

.co-secao {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.co-cab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.co-h2 {
  color: var(--texto-titulo);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.005em;
}

.co-texto,
.co-textos {
  color: var(--texto-corpo);
  font-size: 18px;
  line-height: 28px;
}

.co-textos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- 02 · Canais ---------- */

.co-canais {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.co-canal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--borda-padrao);
  border-radius: 12px;
  background: var(--fundo-superficie);
}

.co-canal--destaque {
  border-color: var(--verde-30);
  background: var(--verde-10);
}

.co-canal__texto {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.co-canal__desc {
  font-size: 18px;
  line-height: 28px;
}

.co-canal__dado {
  color: var(--texto-apoio);
  font-size: 16px;
  line-height: 24px;
}

/* Botões dos canais: 56px de altura, padding 16/28, ícone de 20px (Figma). As cores e o hover vêm de .btn--* */
.co-btn {
  gap: 12px;
  min-height: 56px;
  padding: 16px 28px;
}

.co-btn img {
  flex: none;
  width: 20px;
  height: 20px;
}

.co-btn--primary {
  color: var(--texto-sobre-escuro);
  box-shadow:
    0 4px 4px 0 rgb(0 7 23 / 0.25),
    inset 0 5px 4px 0 rgb(166 164 152 / 0.2),
    inset 0 -4px 2px 0 rgb(0 7 23 / 0.2);
}

/* ---------- 03 · Escritórios ---------- */

.co-escritorios {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.co-escritorio {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding-top: 24px;
  border-top: 1px solid var(--borda-padrao);
}

.co-escritorio__endereco {
  font-size: 18px;
  line-height: 28px;
}

.co-mapa {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-destaque);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: underline;
  text-underline-position: from-font;
}

.co-mapa img {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---------- 04 · O que nunca pedimos ---------- */

.co-painel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: var(--fundo-pagina);
}

.co-nunca {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--borda-padrao);
}

.co-nunca__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.co-nunca__topo img {
  flex: none;
  width: 20px;
  height: 20px;
}

.co-nunca__num,
.co-etapa__num {
  color: var(--texto-destaque);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.co-nunca__titulo,
.co-etapa__nome {
  color: var(--texto-titulo);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.co-nunca__titulo {
  text-transform: uppercase;
}

.co-etapa__nome {
  text-transform: uppercase;
}

.co-nunca__texto,
.co-etapa__texto {
  font-size: 18px;
  line-height: 28px;
}

/* ---------- 05 · Recebeu uma mensagem ou ligação ---------- */

.co-etapas {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.co-etapa {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-top: 20px;
  border-top: 2px solid var(--verde-80);
}

.co-etapa__topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.co-etapa__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--verde-20);
}

/* ---------- 06 · Quem está por trás ---------- */

.co-institucional {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--borda-padrao);
  border-radius: 12px;
  background: var(--fundo-superficie);
}

.co-institucional div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-institucional dt {
  color: var(--texto-apoio);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.co-institucional dd {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
}

/* Divisória entre CNPJ e correspondente: 16px de cada lado, como no Figma */
.co-institucional div + div {
  padding-top: 16px;
  border-top: 1px solid var(--borda-padrao);
}

/* ---------- 07 · FAQ (mesmo componente da Home: faq.css + faq.js) ---------- */

.co-faq .faq__list {
  max-width: none;
}

/* ---------- 08 · CTA final (largura total, fora das colunas) ---------- */

.co-cta {
  padding-bottom: 64px;
}

.co-cta__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 600px; /* abaixo de 1024px a página é uma coluna de até 600px, como as outras sections */
  padding: 28px 24px;
  border-radius: 24px;
  background: var(--marca-primaria);
  box-shadow:
    0 4px 16px 0 var(--marca-primaria),
    inset 0 6px 6px 0 rgb(73 164 118 / 0.4),
    inset 0 -6px 4px 0 rgb(10 31 21 / 0.25);
}

.co-cta__texto {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.co-cta__titulo {
  color: var(--texto-sobre-escuro);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.005em;
}

.co-cta__lead {
  color: var(--neutra-20);
  font-size: 18px;
  line-height: 28px;
}

/* Botão claro sobre o verde (Figma: "Botão light") */
.co-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: 16px;
  background: var(--neutra-10);
  color: var(--texto-titulo);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

.co-cta__btn img {
  flex: none;
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .co-cta__btn:hover {
    background: var(--fundo-superficie);
  }
}

.co-cta__btn:focus-visible {
  outline-color: var(--neutra-10); /* o foco padrão (azul) não aparece sobre o fundo verde */
}

/* ---------- Coluna larga (≥ 610px de coluna): blocos lado a lado, como no desktop de 1200px do Figma ----------
   Em 1200px a coluna tem 631px (largo); em 1024px tem 455px (empilhado, como o mobile). */

@container co (min-width: 610px) {
  .co-canal {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .co-canal .co-btn {
    flex: none;
  }

  .co-escritorios {
    flex-direction: row;
  }

  .co-painel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .co-etapas {
    flex-direction: row;
    gap: 32px;
  }
}

/* ---------- Desktop (≥ 1024px): esquerda sticky | filete | direita ---------- */

@media (min-width: 1024px) {
  .co-main {
    padding-block: 64px 96px; /* Figma: 64 em cima; 96 entre as colunas e o CTA final */
  }

  .co-side {
    gap: 32px;
  }

  .co-lead {
    font-size: 20px;
    line-height: 32px;
  }

  .co-body {
    margin-top: 0;
    gap: 96px;
    /* Largura máxima: o que sobra no container de 1344px depois de 344 + 64 + 1 + 64 (igual à Política) */
    max-width: calc(var(--container-max) - 473px);
  }

  .co-secao {
    gap: 32px;
  }

  .co-h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .co-texto,
  .co-textos {
    font-size: 20px;
    line-height: 32px;
  }

  .co-canal {
    padding: 32px;
  }

  .co-canal__desc,
  .co-escritorio__endereco {
    font-size: 20px;
    line-height: 32px;
  }

  .co-canal__dado {
    font-size: 18px;
    line-height: 28px;
  }

  .co-painel {
    padding: 40px;
  }

  .co-nunca__texto,
  .co-etapa__texto {
    font-size: 20px;
    line-height: 32px;
  }

  .co-institucional {
    padding: 24px;
  }

  .co-institucional dd {
    font-size: 20px;
    line-height: 32px;
  }

  /* FAQ: o Figma usa a versão "desktop" (padding 24/32, pergunta 20/28, resposta 20/32) a partir daqui */
  .co-faq .faq-item__trigger {
    padding: 24px 32px;
  }

  .co-faq .faq-item.is-open .faq-item__trigger {
    padding-bottom: 12px;
  }

  .co-faq .faq-item__question {
    font-size: 20px;
    line-height: 28px;
  }

  .co-faq .faq-item__panel-inner {
    padding-inline: 32px;
  }

  .co-faq .faq-item__answer {
    max-width: 880px;
    padding-bottom: 24px;
    font-size: 20px;
    line-height: 32px;
  }

  .co-cta {
    padding-bottom: 96px;
  }

  .co-cta__card {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    max-width: none;
    padding: 40px 48px;
  }

  .co-cta__titulo {
    font-size: 32px;
    line-height: 40px;
  }

  .co-cta__lead {
    font-size: 20px;
    line-height: 32px;
  }

  .co-cta__btn {
    flex: none;
  }
}

/* Mobile: os botões ocupam a largura toda do bloco */
@media (max-width: 1023.98px) {
  .co-cta__btn {
    width: 100%;
  }
}

@container co (max-width: 609.98px) {
  .co-canal .co-btn {
    width: 100%;
  }
}