/* SEÇÃO 8 — Cirurgia × Regenerativo ========================================
   Tabela de verdade (não divs), porque é dado tabular: leitor de tela
   anuncia linha e coluna, e o conteúdo continua legível sem CSS. */

.comparativo__caixa {
  max-width: 56rem;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.comparativo__tabela {
  width: 100%;
  border-collapse: collapse;
}

.comparativo__tabela th,
.comparativo__tabela td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  vertical-align: top;
}

/* Cabeçalho das colunas */
.comparativo__tabela thead th {
  padding-block: var(--sp-4);
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  border-bottom: 1px solid var(--line);
}

.comparativo__col--a {
  color: var(--text-muted);
  background: var(--bg-alt);
}

.comparativo__col--b {
  color: var(--amber-800);
  background: var(--brand-tint);
}

/* Primeira coluna: o aspecto comparado */
.comparativo__tabela tbody th {
  font-weight: 600;
  color: var(--text);
  width: 34%;
}

.comparativo__tabela tbody td {
  color: var(--text-soft);
  width: 33%;
}

.comparativo__tabela tbody tr + tr th,
.comparativo__tabela tbody tr + tr td {
  border-top: 1px solid var(--line-soft);
}

/* A coluna do regenerativo recebe fundo quente e marcação de vantagem */
.comparativo__tabela td.is-favoravel {
  background: var(--brand-tint);
  color: var(--amber-900);
  font-weight: 550;
}

.comparativo__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

/* -------------------------------------------------------------- CELULAR
   Tabela de 3 colunas não cabe em 390px. Vira uma lista de blocos, cada
   aspecto com as duas respostas empilhadas e rotuladas. */

@media (max-width: 47.99rem) {
  .comparativo__tabela thead {
    display: none;
  }

  .comparativo__tabela,
  .comparativo__tabela tbody,
  .comparativo__tabela tr {
    display: block;
  }

  .comparativo__tabela tr {
    padding: var(--sp-4) var(--sp-5);
  }

  .comparativo__tabela tr + tr {
    border-top: 1px solid var(--line-soft);
  }

  .comparativo__tabela tbody th,
  .comparativo__tabela tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0 !important;
  }

  .comparativo__tabela tbody th {
    margin-bottom: var(--sp-3);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* O rótulo fica ACIMA do valor, não ao lado: "Cirurgia" é largo demais
     para caber numa coluna lateral e acabava por cima do texto. */
  .comparativo__tabela tbody td {
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--bg-alt);
  }

  .comparativo__tabela tbody td + td {
    margin-top: var(--sp-2);
  }

  .comparativo__tabela tbody td::before {
    content: 'Com cirurgia';
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .comparativo__tabela tbody td.is-favoravel::before {
    content: 'Regenerativo';
    color: var(--amber-700);
  }

}