/* Nort: faixa "Por que dá para confiar", logo acima do rodapé. Só afirma o que é verdade e verificável:
   nada de selo de certificação que a Nort não tem. As bandeiras são a rota: América Latina → EUA. */
.confianca { max-width: var(--max); margin: 0 auto; padding: var(--s8) 16px var(--s6); display: grid; gap: var(--s4); }
.confianca-topo { display: grid; gap: 8px; max-width: 640px; }
.confianca-topo .label { margin: 0; }
.confianca-topo h2 { margin: 0; font-size: var(--t-h-sm); letter-spacing: var(--tr-h-sm); line-height: 1.1; color: var(--navy); }
.confianca-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.confianca-itens li {
  display: grid; gap: 6px; align-content: start; padding: var(--s3) 20px; background: var(--white);
  border-radius: var(--r-panel); box-shadow: var(--sh-card); color: var(--navy);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.confianca-itens li:hover { transform: translateY(-2px); box-shadow: var(--sh-raised); }
.confianca-itens svg { width: 28px; height: 28px; margin-bottom: 6px; fill: none; stroke: var(--cornflower); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.confianca-itens b { font-size: 17px; letter-spacing: -0.01em; }
.confianca-itens span { font-size: 14px; line-height: 1.5; color: var(--dusk); }
.confianca-itens a { color: var(--link); font-weight: 600; }
.confianca-rota { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: var(--s3); border-top: 1px solid var(--silver); }
.confianca-rota .label { margin: 0; flex: 1 1 220px; }
.rota { display: flex; align-items: center; gap: 8px; }
.rota span { display: block; width: 30px; height: 20px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(32, 41, 76, 0.12); transition: transform var(--d-fast) var(--ease); }
.rota span:hover { transform: translateY(-3px) rotate(-4deg); }
.rota svg { display: block; width: 100%; height: 100%; }
.rota svg * { stroke: none; }
.rota .rota-destino { width: 36px; height: 24px; }
.rota-seta { position: relative; width: 44px; height: 2px; margin: 0 4px; background: repeating-linear-gradient(90deg, var(--cornflower) 0 6px, transparent 6px 10px); background-size: 20px 2px; animation: rota-anda 1.4s linear infinite; }
.rota-seta::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--cornflower); border-right: 0; }
@keyframes rota-anda { to { background-position: 20px 0; } }
/* Selos: carimbo serrilhado com o texto girando em volta. Os três primeiros abrem a verificação de terceiros. */
.selos-bloco { display: grid; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--silver); }
.selos-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.selos-topo .label { margin: 0; }
.selos-sub { margin: 0; color: var(--dusk); font-size: 14px; }
.selo-defs { position: absolute; }
.selos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
.selo { display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; color: var(--navy); border-radius: var(--r-panel); padding: 8px 4px 12px; }
.selo svg { width: 112px; height: 112px; overflow: visible; transition: transform 420ms var(--ease); }
.selo-borda { fill: var(--navy); stroke: none; }
.selo-miolo, .selo-texto { stroke: none; }
.selo-miolo { fill: var(--white); }
.selo-fio { fill: none; stroke: var(--cornflower); stroke-width: 0.8; stroke-dasharray: 1.6 2.2; }
.selo-texto { font-family: var(--font); font-size: 8.6px; font-weight: 700; letter-spacing: 0.06em; fill: var(--navy); }
.selo-centro { fill: var(--fog); stroke: var(--navy); stroke-width: 1.2; }
.selo-icone * { fill: none; stroke: var(--navy); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.selo-giro { transform-origin: 60px 60px; transition: transform 900ms var(--ease); }
.selo-nome { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.selo-ver { font-size: 12px; font-weight: 600; color: var(--link); }
.selo:hover svg, .selo:focus-visible svg { transform: translateY(-3px) rotate(-6deg); }
.selo:hover .selo-giro, .selo:focus-visible .selo-giro { transform: rotate(40deg); }
.selo:hover .selo-centro { fill: var(--voltage); }
.selo:focus-visible { outline: 2px solid var(--cornflower); outline-offset: 2px; }
@media (max-width: 960px) {
  .confianca-itens { grid-template-columns: repeat(2, 1fr); }
  .selos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .confianca-itens { grid-template-columns: 1fr; }
  .confianca-topo h2 { font-size: 26px; }
  .selos { grid-template-columns: repeat(2, 1fr); }
  .selo svg { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .rota-seta { animation: none; }
  .confianca-itens li, .rota span, .selo svg, .selo-giro { transition: none; }
}