/* Página Confiança: cada grupo é uma seção com título grande (como os títulos de seção do site), separada da
   anterior por um fio; os itens do grupo (os testes, as certificações…) ficam em cartões, um nível abaixo:
   título pequeno, texto de apoio apagado */
/* O fio fica só na largura do conteúdo (o container tem margem interna), como o do rodapé */
.trust-group { padding-block: 3.5rem; background: linear-gradient(var(--color-line), var(--color-line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.trust-intro + .trust-group, .trust-group:last-child { background: none; }
.trust-group:last-child { padding-block: 0 4rem; }
.trust-group h2 { font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: .875rem; }
.trust-note { color: var(--color-muted); max-width: 45rem; }
.trust-more { margin-top: 1.25rem; }
.trust-group a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.trust-group a:focus-visible { color: var(--color-accent); }
/* Só com mouse: no toque, o :hover ficaria grudado no link tocado */
@media (hover: hover) { .trust-group a:hover { color: var(--color-accent); } }

/* Cartões dos itens: 2 colunas no computador, 1 no celular */
.trust-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: .875rem; margin-top: 1.75rem; }
.trust-items > div { padding: 1.25rem 1.375rem; background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius); }
.trust-items dt { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.trust-items dd { font-size: .95rem; color: var(--color-muted); max-width: 45rem; }

/* Faixa de abas (Confiança e Privacidade), como a da Central de Confiança da Bambu: logo abaixo do topo e
   grudada no alto ao rolar. Fica abaixo do chat (50) e do painel do menu do celular (70) */
:root { --trust-tabs-h: 3.0625rem; }
.trust-tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* No celular a faixa rola de lado (sem barra visível); a página não */
.trust-tabs-list {
  position: relative;
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
}
.trust-tabs-list::-webkit-scrollbar { display: none; }
/* Esmaecido na borda só do lado em que há mais abas para ver (o trust-tabs.js liga); a cor só dá a opacidade */
.trust-tabs { --fade-start: 0px; --fade-end: 0px; }
.trust-tabs.has-more { --fade-end: 48px; }
.trust-tabs.has-less { --fade-start: 32px; }
.trust-tabs.has-more .trust-tabs-list, .trust-tabs.has-less .trust-tabs-list {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--color-text) var(--fade-start), var(--color-text) calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--color-text) var(--fade-start), var(--color-text) calc(100% - var(--fade-end)), transparent);
}
.trust-tab {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 3rem;
  font-size: .92rem;
  white-space: nowrap;
  color: var(--color-muted);
  transition: color .15s;
}
/* Aba ativa: cor do texto e sublinhado do accent, como o item ativo do menu */
.trust-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.trust-tab[aria-current] { color: var(--color-text); }
/* Só com mouse: no toque, o :hover ficaria grudado na aba tocada */
@media (hover: hover) { .trust-tab:hover { color: var(--color-text); } }
.trust-tab[aria-current]::after { transform: scaleX(1); }
.trust-tab:focus-visible { color: var(--color-text); outline-offset: -2px; }

/* Âncoras: o título aparece logo abaixo da faixa (o html já soma 24px de scroll-padding) */
.trust-group[id], .trust-intro { scroll-margin-top: calc(var(--trust-tabs-h) - 24px); }
.trust-group h2 { scroll-margin-top: calc(var(--trust-tabs-h) + 4px); }

/* Topo: título e frase; no computador, o orbe do Núcleo pequeno à direita (orb-mount.js; sem JS fica escondido).
   A altura dele fica reservada desde o início: quando o script o mostra, nada abaixo se mexe */
.trust-intro { --trust-mark: 11rem; align-items: center; }
.trust-mark { justify-self: end; width: var(--trust-mark); height: var(--trust-mark); }
@media (min-width: 861px) { .trust-intro { grid-template-rows: minmax(var(--trust-mark), auto); } }
@media (max-width: 860px) {
  .trust-tabs-list { gap: 1.375rem; }
  .trust-mark { display: none; }
  .trust-group { padding-top: 2.5rem; }
  .trust-items { grid-template-columns: 1fr; gap: .625rem; margin-top: 1.375rem; }
  .trust-items > div { padding: 1.125rem; }
}