/* Guias de compra — paleta do design system, sem cor nova.
   Coluna de leitura estreita de proposito: sao paginas de texto longo, e a
   medida de linha e o que decide se alguem le ate a tabela. */

.gd{background:var(--ds-cream)}
.gd-head{max-width:760px;padding:clamp(2rem,5vw,3.4rem) 0 0}
.gd-h1{font-size:var(--ds-h1);line-height:1.12;color:var(--ds-ink);margin:.5rem 0 .6rem;letter-spacing:-.01em}
.gd-meta{color:var(--ds-ink-soft);font-size:.9rem;margin:0}
.gd-body{max-width:760px;padding-bottom:clamp(2.5rem,6vw,4rem)}

/* Resposta primeiro. E o bloco que o motor de IA cita, entao ele precisa ser
   visualmente uma unidade fechada e ficar acima de qualquer outra coisa. */
.gd-answer{
  background:var(--ds-surface);
  border:1px solid var(--ds-line-dark);
  border-left:3px solid var(--ds-champ);
  border-radius:var(--ds-radius-sm);
  padding:1.4rem 1.5rem;
  margin:1.8rem 0 0;
  box-shadow:var(--ds-shadow)
}
.gd-answer p{margin:0;font-size:1.08rem;line-height:1.75;color:var(--ds-ink)}

/* Bordas nas celulas, nao gap colorido: com `gap:1px` sobre um fundo escuro,
   uma linha incompleta (4 fatos em 3 colunas) deixa um retangulo cinza vazio
   onde nao ha celula. Com borda por celula o vazio some. */
.gd-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--ds-surface);
  border:1px solid var(--ds-line-dark);border-radius:var(--ds-radius-sm);
  overflow:hidden;margin:1.6rem 0 0
}
/* Separador por box-shadow em vez de borda: a sombra nao ocupa caixa, entao
   o `overflow:hidden` do container apara a que sobra na ultima coluna e na
   ultima linha sem precisar saber quantas colunas o auto-fit criou. */
.gd-fact{
  padding:1rem 1.1rem;margin:0;
  box-shadow:1px 0 0 var(--ds-line-dark), 0 1px 0 var(--ds-line-dark)
}
.gd-fact dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ds-ink-soft);margin:0 0 .35rem}
.gd-fact dd{margin:0;font-weight:700;color:var(--ds-ink);font-size:1.02rem;line-height:1.35}

.gd-sec{margin:2.6rem 0 0}
.gd-sec h2{font-size:var(--ds-h3);color:var(--ds-ink);line-height:1.25;margin:0 0 .8rem;letter-spacing:-.005em}
.gd-sec p{color:var(--ds-ink-soft);line-height:1.85;margin:0 0 1rem;font-size:1rem}
.gd-sec p:last-child{margin-bottom:0}

.gd-faq__item{border-top:1px solid var(--ds-line-dark);padding:1.2rem 0}
.gd-faq__item:last-child{border-bottom:1px solid var(--ds-line-dark)}
.gd-faq__item h3{font-size:1.05rem;color:var(--ds-ink);margin:0 0 .5rem;line-height:1.35}
.gd-faq__item p{margin:0}

/* Tabela: rola dentro do proprio quadro. O `1fr` da grid tem piso de
   min-content, entao sem o wrapper de overflow uma tabela larga empurra a
   pagina inteira e o body passa a rolar na horizontal no celular. */
/* A tabela sai da coluna de leitura no desktop. A medida de linha de 760px e
   boa para prosa e apertada para quatro colunas: dentro dela a ultima coluna
   ficava cortada mesmo sobrando tela dos dois lados. */
.gd-tablewrap{margin:1.8rem 0 0}
@media (min-width:1040px){
  .gd-tablewrap{width:min(1000px, calc(100vw - 4rem));margin-inline:calc((760px - min(1000px, calc(100vw - 4rem))) / 2)}
}
.gd-tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ds-line-dark);border-radius:var(--ds-radius-sm);background:var(--ds-surface)}
.gd-tablescroll:focus-visible{outline:2px solid var(--ds-champ);outline-offset:2px}
.gd-table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
.gd-table th,.gd-table td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--ds-line-dark)}
.gd-table thead th{background:var(--ds-tint);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-ink);white-space:nowrap}
.gd-table tbody th{font-weight:700;color:var(--ds-ink);white-space:nowrap}
.gd-table td{color:var(--ds-ink-soft);line-height:1.55}
.gd-table tbody tr:last-child th,.gd-table tbody tr:last-child td{border-bottom:0}
.gd-tablewrap figcaption{color:var(--ds-ink-soft);font-size:.84rem;margin-top:.6rem;line-height:1.5}

.gd-sources ol{margin:.4rem 0 0;padding-left:1.2rem}
.gd-sources li{color:var(--ds-ink-soft);line-height:1.6;margin-bottom:.5rem;font-size:.92rem}
.gd-sources a{color:var(--ds-champ-deep);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.gd-sources__note{font-size:.92rem}

.gd-disclosure{
  margin:2.4rem 0 0;padding:1.1rem 1.2rem;
  background:var(--ds-tint);border-radius:var(--ds-radius-sm);
  border:1px solid var(--ds-line-dark)
}
.gd-disclosure p{margin:0;font-size:.88rem;line-height:1.7;color:var(--ds-ink-soft)}
.gd-disclosure strong{color:var(--ds-ink)}

.gd-bridge{max-width:760px;text-align:center}
.gd-bridge p{color:var(--ds-ink-soft);line-height:1.8;margin:1rem auto 0;max-width:64ch}
.gd-bridge__actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.6rem}

.gd-hero{min-height:auto;padding-block:clamp(3rem,8vw,5.5rem)}
.gd-card__eyebrow{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ds-champ-deep);margin-bottom:.4rem}

@media (max-width:640px){
  .gd-answer{padding:1.1rem 1.15rem}
  .gd-answer p{font-size:1rem}
  .gd-facts{grid-template-columns:1fr 1fr}
}

/* Lista de prosa dentro de `.gd-sec` (pilar de contratante). Herda a cor e a
   entrelinha do paragrafo da secao para nao virar um bloco de texto com outro
   peso no meio da leitura. */
.gd-list{margin:1rem 0 0;padding-left:1.15rem;list-style:disc}
.gd-list li{color:var(--ds-ink-soft);line-height:1.8;margin:0 0 .6rem}
.gd-list li:last-child{margin-bottom:0}
.gd-list a{color:var(--ds-ink)}
/* Variante horizontal (lista de estados): sem marcador e sem recuo, porque
   com `flex-wrap` o disco fica orfao no comeco de cada linha quebrada. */
.gd-list--inline{
  display:flex;flex-wrap:wrap;gap:.5rem .55rem;
  padding-left:0;list-style:none;margin-top:1.1rem
}
.gd-list--inline li{margin:0}
.gd-list--inline a{
  display:inline-block;padding:.4rem .8rem;
  border:1px solid var(--ds-line-dark);border-radius:999px;
  font-size:.9rem;text-decoration:none;color:var(--ds-ink);background:var(--ds-surface)
}
.gd-list--inline a:hover{border-color:var(--ds-champ-deep);color:var(--ds-champ-deep)}