/*
 * 02c-comparacao.css
 * Seção: "O Velho Sistema" vs "O Novo Sistema" — inserida entre Notícias
 * (02b) e Identificação (03) a pedido do cliente (2026-08-11). Numerada
 * "02c" pelo mesmo motivo do "02b" (ver nota em docs/CONVENCOES.md): evita
 * renumerar 03→15 em cascata e não invade a faixa de CSS/asset IDs já
 * reservada às demais seções.
 *
 * Fundo claro (--cor-fundo-claro) — mesma cor de fundo usada no topo da
 * página (seção 02b-notícias), pedido explícito do cliente para dar
 * continuidade visual entre as duas dobras.
 *
 * [ATUALIZAÇÃO 2026-08-13, pedido do cliente] Reescrita como "tabela
 * premium" de 3 COLUNAS reais (não 2 colunas com uma linha de cabeçalho por
 * área, como na versão anterior):
 *   Coluna 1 — `.comparacao__label` — só identifica o tema (ícone SVG estilo
 *     Lucide + nome), NÃO faz parte da comparação. Fundo creme dedicado
 *     (--cor-comparacao-label-bg).
 *   Coluna 2 — `.comparacao__celula--velho` — fundo rosa claro
 *     (--cor-comparacao-velho-bg).
 *   Coluna 3 — `.comparacao__celula--novo` — fundo verde claro
 *     (--cor-comparacao-novo-bg).
 * `.comparacao__tabela` usa `display: grid` com 3 colunas reais
 * (`grid-template-columns`); cada linha (header + 4 temas) tem exatamente 3
 * células-filhas em sequência — sem spanning. Bordas/divisores extremamente
 * sutis (rgba grafite 0.08), radius 20px no container, bastante padding —
 * ver seção "Tabela — visual premium" abaixo.
 *
 * DOIS componentes distintos no DOM o tempo todo (CSS decide qual mostrar
 * por breakpoint):
 *   - `.comparacao__tabela` — tabela de 3 colunas, ≥769px.
 *   - `.comparacao__blocos` — cards por tema (não lista, não tabela com
 *     scroll horizontal): cada card tem cabeçalho (ícone + nome do tema) e
 *     as duas linhas Velho/Novo com um divisor discreto entre elas. ≤768px.
 *
 * Ícones: SVG inline no HTML (estilo Lucide — stroke 1.75, sem fill),
 * coloridos via `currentColor` + `color: var(--cor-destaque-em-claro)`
 * (dourado institucional sobre fundo claro, mesmo token usado em outros
 * destaques dourados do site — ver styles/tokens.css).
 *
 * A seção também tem `.comparacao__intro` (pergunta retórica, antes da
 * tabela) e `.comparacao__fechamento` + `.comparacao__cta-btn` (parágrafo +
 * CTA dourado, MESMO padrão visual/tokens do `.noticias__cta-btn` em
 * 02b-noticias.css, copiado para dentro deste arquivo — não há import/
 * compartilhamento de CSS entre arquivos de seção, ver docs/CONVENCOES.md).
 */

.comparacao {
  background-color: var(--cor-fundo-claro);
}

/* ---------------------------------------------------------------------------
 * Intro — pergunta retórica + frase de contexto (antes da tabela)
 * ------------------------------------------------------------------------- */

.comparacao__intro {
  max-width: 1220px;
  margin: 0 auto 56px;
  text-align: center;
}

.comparacao__intro-titulo {
  font-size: var(--fs-h2-destaque);
  font-weight: var(--fw-h2-destaque);
  line-height: var(--lh-h2-destaque);
  color: var(--cor-texto-quase-preto);
}

.comparacao__intro-corpo {
  max-width: 700px;
  margin: 20px auto 0;
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-escuro);
}

/* ---------------------------------------------------------------------------
 * Componente 1 — Tabela premium de 3 colunas (desktop/tablet, ≥769px)
 * Grid real de 3 colunas: rótulo do tema | Velho Sistema | Novo Sistema.
 * Cada linha (header + 4 temas) tem exatamente 3 células-filhas em
 * sequência no HTML — sem spanning, sem células "fantasma". A 1ª coluna é
 * mais estreita (identifica o tema, não compara nada); as colunas 2 e 3
 * dividem o restante em partes iguais.
 * ------------------------------------------------------------------------- */

.comparacao__tabela {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 1fr 1fr;
  background-color: rgba(31, 31, 31, 0.06);
  border: 1px solid rgba(31, 31, 31, 0.08);
  border-radius: 20px;
  overflow: hidden;
  gap: 1px;
}

.comparacao__canto,
.comparacao__header,
.comparacao__label,
.comparacao__celula {
  background-color: var(--cor-comparacao-label-bg);
}

.comparacao__header {
  padding: 26px var(--card-feature-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-familia-base);
  font-size: var(--fs-label-premiacao);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparacao__header--velho {
  background-color: var(--cor-comparacao-velho);
  color: var(--cor-fundo-claro);
}

.comparacao__header--novo {
  background-color: var(--cor-comparacao-novo);
  color: var(--cor-fundo-claro);
}

/* Coluna 1 — identifica o tema; NÃO participa da comparação Velho↔Novo. */
.comparacao__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px var(--card-feature-padding);
}

.comparacao__label-icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--cor-destaque-em-claro);
}

.comparacao__label-icone svg {
  width: 100%;
  height: 100%;
}

.comparacao__label-texto {
  font-family: var(--font-familia-base);
  font-size: var(--fs-card-titulo);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-comparacao-texto);
}

/* Altura confortável + bastante padding, pedido do cliente ("tabela
   premium", nada parecido com tabela HTML comum). */
.comparacao__celula {
  display: flex;
  align-items: center;
  padding: 28px 40px;
  min-height: 108px;
}

.comparacao__celula--velho {
  background-color: var(--cor-comparacao-velho-bg);
}

.comparacao__celula--novo {
  background-color: var(--cor-comparacao-novo-bg);
}

.comparacao__celula-corpo {
  font-size: var(--fs-card-corpo);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cor-comparacao-texto);
}

/* ---------------------------------------------------------------------------
 * Componente 2 — Cards por tema (mobile, ≤768px)
 * Oculto por padrão (desktop usa a tabela acima); vira flex-column na media
 * query da seção "Responsivo" abaixo. Cada card preserva a comparação
 * Velho→Novo (não é uma lista genérica, não é tabela com scroll horizontal):
 * cabeçalho com ícone + nome do tema, depois as 2 linhas Velho/Novo
 * separadas por um divisor discreto.
 * ------------------------------------------------------------------------- */

.comparacao__blocos {
  display: none;
}

.comparacao-bloco {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 31, 0.08);
  background-color: var(--cor-comparacao-label-bg);
}

.comparacao-bloco + .comparacao-bloco {
  margin-top: 24px;
}

.comparacao-bloco__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 24px 16px;
}

.comparacao-bloco__icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--cor-destaque-em-claro);
}

.comparacao-bloco__icone svg {
  width: 100%;
  height: 100%;
}

.comparacao-bloco__titulo {
  font-family: var(--font-familia-base);
  font-size: var(--fs-card-titulo);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cor-comparacao-texto);
}

.comparacao-bloco__linha {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 24px 22px;
}

/* Fundo tingido por linha (rosa/verde clarinho, mesmos tokens da tabela
   desktop) — pedido do cliente para recuperar a pista de cor que a versão
   anterior (cards com metade vermelha/metade verde) já dava de cara. */
.comparacao-bloco__linha:has(.comparacao-bloco__tag--velho) {
  background-color: var(--cor-comparacao-velho-bg);
}

.comparacao-bloco__linha:has(.comparacao-bloco__tag--novo) {
  background-color: var(--cor-comparacao-novo-bg);
}

.comparacao-bloco__tag {
  width: fit-content;
  font-family: var(--font-familia-base);
  font-size: var(--fs-footer);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comparacao-bloco__tag--velho {
  color: var(--cor-comparacao-velho);
}

.comparacao-bloco__tag--novo {
  color: var(--cor-comparacao-novo);
}

.comparacao-bloco__texto {
  font-size: var(--fs-card-corpo);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cor-comparacao-texto);
}

.comparacao-bloco__divisor {
  height: 1px;
  margin: 0 24px;
  background-color: rgba(31, 31, 31, 0.08);
}

/* ---------------------------------------------------------------------------
 * Fechamento — parágrafo + CTA (depois da tabela/blocos)
 * ------------------------------------------------------------------------- */

.comparacao__fechamento {
  max-width: 680px;
  margin: 48px auto 0;
  text-align: center;
}

.comparacao__fechamento-texto {
  font-size: var(--fs-hero-subtitulo);
  font-weight: var(--fw-hero-subtitulo);
  line-height: var(--lh-hero-subtitulo);
  color: var(--cor-texto-cinza-escuro);
}

.comparacao__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.comparacao__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--botao-height-lg);
  padding: 0 32px;
  border-radius: calc(var(--botao-height-lg) / 2);
  background-color: var(--cor-cta-dourado);
  color: var(--cor-cta-dourado-texto);
  font-size: var(--fs-botao);
  font-weight: var(--fw-botao);
  line-height: var(--lh-botao);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.comparacao__cta-btn:hover {
  background-color: var(--cor-cta-dourado-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
}

.comparacao__cta-btn:focus-visible {
  outline: 2px solid var(--cor-fundo-escuro-base);
  outline-offset: 3px;
}

.comparacao__cta-arrow {
  font-weight: var(--peso-semibold);
}

/* ---------------------------------------------------------------------------
 * Responsivo — ver convenção de breakpoints em styles/base.css
 * ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .comparacao__tabela {
    grid-template-columns: minmax(160px, 0.7fr) 1fr 1fr;
  }

  .comparacao__header,
  .comparacao__celula {
    padding-left: 24px;
    padding-right: 24px;
  }

  .comparacao__label {
    padding-left: 24px;
    padding-right: 16px;
  }
}

@media (max-width: 768px) {
  /* Quebra estrutural: a tabela dá lugar ao componente de blocos por área
     de vida (ver bloco de comentário no topo do arquivo). */
  .comparacao__tabela {
    display: none;
  }

  .comparacao__blocos {
    display: flex;
    flex-direction: column;
  }

  .comparacao__intro {
    margin-bottom: 40px;
  }

  .comparacao__fechamento {
    margin-top: 40px;
  }
}

@media (max-width: 430px) {
  .comparacao__intro-titulo {
    font-size: clamp(24px, 6.5vw, 30px);
  }

  .comparacao-bloco__linha {
    padding-left: 16px;
    padding-right: 16px;
  }

  .comparacao-bloco__header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .comparacao-bloco__divisor {
    margin-left: 16px;
    margin-right: 16px;
  }

  .comparacao__cta-btn {
    width: 100%;
    padding: 0 20px;
  }
}

@media (max-width: 375px) {
  .comparacao__intro-corpo,
  .comparacao__fechamento-texto {
    font-size: 16px;
  }
}