/* ═══════════════════════════════════════════════════════════
   Páginas de destino (/envio-para-*, /envio-internacional-goiania)
   Arquivo à parte, carregado só por views/pages/destinos/_topo.php: o
   99envio.css estava sendo reorganizado ao mesmo tempo (27/10/2026) e estas
   regras só servem a estas páginas. Tudo com os tokens do 99envio.css.
   ═══════════════════════════════════════════════════════════ */

/* Trilha (breadcrumb) sobre o azul-marinho do topo. Precisa ser visível: o
   BreadcrumbList do JSON-LD só pode marcar o que a pessoa vê. */
.trilha { margin-bottom: var(--space-3); font-size: .875rem; }
.trilha ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.trilha li { color: var(--text-on-dark); }
.trilha li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-on-dark-muted); }
.trilha a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.trilha a:hover { color: var(--surface); }

/* Botões do topo: empilham no celular para cada um ter a largura toda. */
.destino-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
@media (max-width: 479px) { .destino-hero__acoes .btn { flex: 1 1 100%; } }

/* Passo a passo: é sequência de verdade, então lista numerada. O .prose só
   estiliza ul; aqui o ol ganha os números. */
.prose ol.passos { margin: 0 0 var(--space-4); padding-left: var(--space-5); list-style: decimal; }
.prose ol.passos li + li { margin-top: var(--space-3); }
.prose ol.passos li::marker { color: var(--orange-700); font-weight: 700; }
.prose h3 { margin: var(--space-5) 0 var(--space-2); color: var(--ink); font-size: 1.125rem; }

.destino-revisado { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: .875rem; }

/* "Veja também": lista simples de links, não cartões (design.md, princípio 5). */
.destino-links__titulo { margin-bottom: var(--space-4); font-size: 1.375rem; }
.destino-links { display: grid; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .destino-links { grid-template-columns: repeat(2, minmax(0, max-content)); } }
.destino-links a { display: inline-block; padding-block: var(--space-2); }

/* Texto alinhado à esquerda com o topo e o FAQ. No .prose padrão a coluna de
   68ch fica centralizada e, nestas páginas, o texto "pulava" para o meio
   entre o topo e o FAQ (visto na captura de 1280 px). A largura de leitura
   continua limitada em cada bloco. */
.container.prose { max-width: calc(var(--container) + 2 * var(--gutter)); }
.container.prose > * { max-width: 68ch; }