/* ==========================================================================
   TURISMO DOURADOS, CSS global
   Estrutura de componentes herdada do template de referência (modelo_Site).
   Identidade visual, paleta e nomenclatura são próprias do projeto.
   Paleta conforme o layout-base: azul profundo, azul médio, verde natural,
   amarelo discreto e branco.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Azuis, base institucional */
  /* Altura da barra do topo. Quem for sticky abaixo dela gruda aqui, e
     nao em zero, senao os dois disputam o mesmo lugar. */
  --altura-topo: 68px;
  --azul-profundo: #06294A;
  --azul:          #0B4C87;
  --azul-medio:    #1B6CA8;
  --azul-claro:    #5BA8E0;
  --azul-bg:       #EAF3FB;
  --azul-borda:    #CFE2F3;

  /* Verde natural, Mato Grosso do Sul, confirmação, natureza */
  --verde:       #1E7A4C;
  --verde-medio: #26955E;
  --verde-bg:    #E9F5EF;

  /* Amarelo discreto, acento e CTA primário */
  --amarelo:       #D9A310;
  --amarelo-claro: #F2C43D;

  /* Laranja da marca. Amostrado do logo, não escolhido a olho: #F88000 é a cor
     exata do "Dourados". Usado só em detalhe, nunca em área grande, para não
     brigar com o azul institucional que sustenta o layout.

     São três tons porque o laranja vibrante reprova em contraste como texto:
     sobre branco ele dá 3,28:1, e a regra do projeto exige WCAG AA. Os outros
     dois são o mesmo matiz, escurecido até passar. */
  --laranja:       #F88000;   /* a cor da marca: fundo escuro e área de cor */
  --laranja-borda: #E47600;   /* elemento de interface: 3,05:1 sobre branco */
  /* Escurecer o laranja para chegar a 4,5:1 sobre branco levava a #AB5800, que
     nao le mais como laranja: le como marrom, e marrom nao esta na paleta do
     aeroporto. Este e o tom mais escuro que ainda e reconhecivelmente laranja.
     Sobre branco da 3,06:1, entao ele vale para texto grande ou em negrito e
     para elemento de interface; texto pequeno em cor usa o azul. */
  --laranja-texto: #E06E00;
  --laranja-bg:    #FFF2E5;

  /* Neutros */
  --texto:       #0F2540;
  --cinza:       #56667A;
  --cinza-claro: #F7FAFD;
  --branco:      #FFFFFF;

  /* WhatsApp (cor da marca, uso apenas no botão do canal) */
  --whatsapp: #25D366;

  /* Elevação */
  /* Sombras discretas: o cartao se define pela borda, nao pela sombra.
     A elevacao aparece de leve, e so no hover. */
  --sombra:      0 1px 3px rgba(6, 41, 74, .05);
  --sombra-card: 0 2px 8px rgba(6, 41, 74, .06);

  /* Métricas */
  --largura-max: 1200px;
  --raio:        14px;
  --raio-pill:   50px;
  --toque-min:   44px;

  /* Tipografia */
  --fonte-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte-texto);
  color: var(--texto);
  background: var(--branco);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration: none; transition: color .2s; }
a:hover { color: var(--azul-medio); }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.25;
  color: var(--texto);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   QUEBRA DE LINHA, proibido deixar palavra sozinha na última linha
   --------------------------------------------------------------------------
   `balance` distribui as linhas de forma equilibrada em blocos curtos, então
   um título nunca termina com uma palavra solta. `pretty` faz o mesmo para
   texto corrido, cuidando apenas da última linha. Onde o navegador não
   suportar, o main.js aplica espaço inseparável entre as duas últimas
   palavras como reserva.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.secao-titulo, .secao-sub,
.hero h1, .hero__sub,
.cta-final h2, .cta-final p,
.card h3, .seg-card h3, .seg-card p,
.dest-nome, .mini-card__nome,
.eyebrow, .hero__eyebrow,
.card-cidade__nome,
.faq-item__botao,
.serv-item span,
.formato__nome,
.parceiro__titulo,
.filtro-cat__nome,
.bagagem-card__intro,
section > .container > h2,
section > .container > h3,
.rodape h3 {
  text-wrap: balance;
  /* Palavra mais larga que a coluna estoura o cartao em vez de quebrar. Sao
     poucas no site, mas "aeroportodourados.com.br" numa coluna de 130 px e
     uma delas. */
  overflow-wrap: break-word;
}

p,
.hero__sub,
.secao-sub,
.card p,
.resposta-direta p,
.documento p,
.cta-final p,
.lista-checks li,
.fluxo__passo span,
.figura-destino figcaption {
  text-wrap: pretty;
}

/* Reserva para navegador sem text-wrap: o par final fica inseparável. */
.sem-orfa { white-space: nowrap; }

/* Acessibilidade: foco sempre visível, em qualquer interativo. */
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--azul-profundo);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 500;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.container { max-width: var(--largura-max); margin: 0 auto; padding: 0 24px; }

section { padding: 34px 0; scroll-margin-top: 96px; }

.bg-alt   { background: var(--cinza-claro); }
.bg-azul  { background: var(--azul-bg); }

.secao-cabecalho { text-align: center; max-width: 960px; margin: 0 auto 22px; }

/* Etiqueta de secao em laranja: e um elemento pequeno e repetido, entao
   carrega a marca pelo site inteiro sem pesar em lugar nenhum. */
.eyebrow {
  display: inline-block;
  background: var(--laranja-bg);
  color: var(--laranja-texto);
  padding: 5px 14px;
  border-radius: var(--raio-pill);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.secao-titulo { font-size: clamp(16px, 2.6vw, 20px); margin-bottom: 8px; }
.secao-sub { color: var(--cinza); font-size: clamp(.86rem, 2.4vw, .95rem); max-width: 760px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--toque-min);
  padding: 11px 24px;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s, border-color .25s;
}

.btn-primario {
  background: var(--amarelo);
  color: #22190A;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(217, 163, 16, .35);
}
.btn-primario:hover { background: var(--amarelo-claro); color: #22190A; transform: translateY(-2px); }

.btn-secundario { background: var(--azul); color: #fff; }
.btn-secundario:hover { background: var(--azul-profundo); color: #fff; transform: translateY(-2px); }

.btn-contorno { background: transparent; color: #fff; border-color: #fff; }
.btn-contorno:hover { background: #fff; color: var(--azul-profundo); }

.btn-whatsapp { background: var(--whatsapp); color: #06301A; font-weight: 500; }
.btn-whatsapp:hover { background: #1FBF5B; color: #06301A; transform: translateY(-2px); }
.btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   TOPBAR + CABEÇALHO
   -------------------------------------------------------------------------- */
/* Bloco topo: sticky em vez de fixed.
   Sticky ocupa espaço no fluxo, então o conteúdo das páginas começa sempre
   abaixo do menu e nunca passa por trás dele. Ao rolar, o bloco gruda no topo.
   Com `fixed` era preciso compensar a altura à mão em cada página, e qualquer
   página que esquecesse a compensação ficava com o conteúdo escondido. */
.topo-fixo {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Sticky, e nao fixed: assim o bloco ocupa espaco no fluxo e o conteudo da
     pagina comeca sempre abaixo dele, sem compensacao de altura pagina a
     pagina. Ao rolar, gruda no topo. */
  background: #fff;
}

.cabecalho {
  position: relative;   /* referência para o menu suspenso no celular */
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.cabecalho__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 68px;
}

.logo { display: flex; align-items: center; flex: 0 0 auto; padding: 10px 0; }
.logo img { display: block; width: auto; height: 36px; }

/* Versão em texto, mantida para onde o logo em imagem não se aplica. */
.logo__marca { color: var(--verde); font-weight: 500; }

/* Barra de navegacao portada do site da CFH, com a cor invertida: la a barra e
   azul-escura com dourado, aqui e branca com o azul e o laranja da marca.

   O que veio de la, item por item:
     - itens de altura cheia, sem contorno, em caixa alta e corpo pequeno;
     - divisor em fio inclinado a -13 graus entre um item e o outro;
     - realce de hover como um BLOCO inclinado no mesmo angulo do divisor, e
       nao um retangulo reto, que e o que da o corte diagonal continuo;
     - item atual em bloco chapado, no mesmo angulo;
     - seta em chevron que gira ao abrir o submenu.

   O bloco inclinado vai no ::before com z-index negativo, atras do texto: o
   texto nao pode entrar no skew, senao sai torto. */
.nav { display: flex; gap: 0; align-items: stretch; }

.nav > a, .nav > .nav__grupo { position: relative; display: flex; }

.nav a {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  color: var(--azul-profundo);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: color .2s;
}

/* Divisor inclinado. Nasce e morre em transparente, entao nao encosta no topo
   nem na base da barra. */
.nav > a:not(:last-child)::after,
.nav > .nav__grupo:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 26%; bottom: 26%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--azul-borda) 20%,
                              var(--azul-borda) 80%, transparent);
  transform: skewX(-13deg);
  pointer-events: none;
  z-index: 1;
}

/* Realce de hover: bloco inclinado atras do texto. */
.nav > a::before,
.nav__grupo > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transform: skewX(-13deg);
  transition: background .22s;
}
.nav > a:hover, .nav__grupo:hover > a, .nav__grupo:focus-within > a {
  color: var(--azul-profundo);
}
.nav > a:hover::before,
.nav__grupo:hover > a::before,
.nav__grupo:focus-within > a::before { background: var(--azul-claro); }

/* Item atual: o mesmo bloco, um tom acima, para nao se confundir com o hover.
   SO no item de barra: escrito como ".nav a", isto alcancava tambem os links do
   submenu, e la o resultado era texto branco sobre painel branco, com o fundo
   azul caindo no ::before, que ali e o marcador ">". O item da pagina atual
   sumia do submenu. */
.nav > a[aria-current="page"],
.nav__grupo > a[aria-current="page"] { color: #fff; }
.nav > a[aria-current="page"]::before,
.nav__grupo > a[aria-current="page"]::before { background: var(--azul); }

/* No painel, o item atual e marcado pelo fundo claro, e nao por bloco chapado:
   o painel ja e branco e o texto precisa continuar escuro. */
.nav__sub a[aria-current="page"] {
  background: var(--azul-bg);
  color: var(--azul-profundo);
}

.nav .nav__cta {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}
/* O item atual tambem no laranja, com a borda no tom do texto. */
.nav .nav__cta:hover { background: var(--azul-profundo); border-color: var(--azul-profundo); color: #fff; }

/* --------------------------------------------- BARRA DE FILTRO, PARCEIROS
   Fixa logo abaixo do menu: a lista de parceiros e longa, e um filtro que
   sobe junto com a rolagem obriga a voltar ao topo para trocar de ramo.

   Gruda em --altura-topo, e nao em zero: o cabecalho tambem e sticky e ja
   ocupa o topo da tela. Sem essa distancia, os dois se sobrepoem.

   Botao pequeno, com o icone NA FRENTE do texto, e nao acima: em uma unica
   linha de altura contida, icone empilhado dobraria a altura da barra.

   Rola na horizontal quando nao cabe, em vez de quebrar em tres fileiras. */
.filtro-barra {
  position: sticky;
  top: var(--altura-topo);
  /* referencia do veu de rolagem */
  overflow: hidden;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--azul-borda);
  box-shadow: 0 2px 10px rgba(6, 41, 74, .05);
}
.filtro-barra__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 9px;
  padding-bottom: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtro-barra__inner::-webkit-scrollbar { display: none; }
.filtro-barra { position: sticky; }
.filtro-barra::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 26px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
}

.filtro-barra__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--azul-borda);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--azul-profundo);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.filtro-barra__item .filtro-cat__icone {
  width: 15px;
  height: 15px;
  color: var(--laranja-texto);
  transition: color .2s;
}
.filtro-barra__item:hover {
  border-color: var(--azul-medio);
  color: var(--azul-medio);
  background: var(--azul-bg);
}
/* O ramo escolhido: bloco chapado, para nao restar duvida de qual filtro esta
   valendo enquanto a lista aparece cortada. */
.filtro-barra__item--ativo,
.filtro-barra__item--ativo:hover {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: #fff;
}
.filtro-barra__item--ativo .filtro-cat__icone { color: var(--azul-claro); }

/* Aviso de "nenhum parceiro neste ramo". Fica escondido ate o filtro precisar
   dele: um cartao vazio permanente na pagina seria ruido. */
.filtro-barra-vazio {
  border: 1px dashed var(--azul-borda);
  border-radius: var(--raio);
  background: var(--azul-bg);
  padding: 24px 20px;
  text-align: center;
  color: var(--cinza);
  line-height: 1.7;
  margin-bottom: 22px;
}

@media (max-width: 620px) {
  .filtro-barra__inner { padding-top: 7px; padding-bottom: 7px; gap: 5px; }
  .filtro-barra__item { font-size: 11.5px; padding: 6px 9px; }
  .filtro-barra__item .filtro-cat__icone { width: 14px; height: 14px; }
  /* A trilha some no celular: em tela estreita ela ocupa uma linha inteira
     para dizer "Inicio > Parceiros", que a pessoa acabou de percorrer. */
  .filtro-barra + section > .container > h1 { margin-top: 4px; }
}

/* ------------------------------------------------- FILTRO DE CATEGORIAS
   Atalhos por ramo de parceiro, no espirito de um classificado da cidade:
   quem chegou procurando hotel nao quer a lista inteira de anunciantes, quer
   o ramo.

   Sao LINKS para paginas reais, e nao um filtro em JavaScript sobre a mesma
   lista. Cada ramo tem URL propria, e URL propria e o que pode ranquear. Sem
   JavaScript tambem nao ha nada a carregar antes de a barra funcionar.

   Faixa azul de ponta a ponta: e o unico bloco escuro entre a dobra e o rodape,
   e e isso que o separa das duas secoes claras em volta.

   Grade de largura automatica, e nao uma linha unica: com oito itens numa
   linha so, o ultimo sobrava sozinho na linha de baixo em telas medias. */
.filtro-cat {
  background: var(--azul-profundo);
  padding: 26px 0 30px;
}
.filtro-cat__rotulo {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  text-align: center;
  margin: 0 0 18px;
}
.filtro-cat__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}
.filtro-cat__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* Altura confortavel de toque, bem acima dos 44 px minimos: e um alvo que
     no celular fica lado a lado com outro. */
  min-height: 88px;
  padding: 14px 8px;
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  color: #fff;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.filtro-cat__icone {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  /* O traco herda a cor do texto, entao o icone acompanha o hover sem
     nenhuma regra propria. */
  color: var(--laranja);
  transition: color .2s;
}
.filtro-cat__nome {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}
.filtro-cat__item:hover {
  background: #fff;
  border-color: #fff;
  color: var(--azul-profundo);
  transform: translateY(-2px);
}
.filtro-cat__item:hover .filtro-cat__icone { color: var(--laranja-texto); }

/* A propria pagina nao vira link que aponta para onde ja se esta. */
.filtro-cat__item--atual {
  background: #fff;
  border-color: #fff;
  color: var(--azul-profundo);
  cursor: default;
}
.filtro-cat__item--atual .filtro-cat__icone { color: var(--laranja-texto); }

@media (max-width: 620px) {
  .filtro-cat { padding: 20px 0 24px; }
  .filtro-cat__grade { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
  .filtro-cat__item { min-height: 78px; gap: 7px; }
  .filtro-cat__icone { width: 22px; height: 22px; }
  .filtro-cat__nome { font-size: 11.5px; }
}

/* -------------------------------------------------------- BANNER NO TEXTO
   Banner quadrado a esquerda e a chamada a direita. Entra no meio do artigo,
   nao no fim: no fim quase ninguem chega. */
.banner-artigo {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 16px;
  margin: 26px 0;
  background: #fff;
}
.banner-artigo a { display: block; line-height: 0; }
.banner-artigo img { width: 100%; height: auto; border-radius: 8px; display: block; }
.banner-artigo p { color: var(--cinza); line-height: 1.65; margin: 0; font-size: 14.5px; }
.banner-artigo strong { color: var(--azul-profundo); }

@media (max-width: 620px) {
  .banner-artigo { grid-template-columns: 1fr; gap: 14px; }
  .banner-artigo img { max-width: 260px; margin: 0 auto; }
}

/* ------------------------------------------------------- VITRINE VAZIA
   Estado declarado da pagina de parceiros enquanto nao ha anunciante. Melhor
   que titulo seguido de nada, e diz a verdade. */
.vitrine-vazia {
  border: 1px dashed var(--azul-borda);
  border-radius: var(--raio);
  background: var(--azul-bg);
  padding: 26px 22px;
  text-align: center;
  margin-bottom: 22px;
}
.vitrine-vazia p { color: var(--cinza); line-height: 1.7; margin: 0 0 14px; }

/* --------------------------------------------------------- CTA DE COMPRA
   Bloco curto no meio da pagina de destino, levando ao buscador da home.
   Fica visualmente separado do texto para nao parecer paragrafo. */
.cta-compra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid var(--azul-borda);
  border-left: 4px solid var(--laranja-texto);
  border-radius: var(--raio);
  background: var(--azul-bg);
  padding: 16px 20px;
  margin: 24px 0;
}
.cta-compra p { color: var(--cinza); line-height: 1.6; margin: 0; max-width: 60ch; }
.cta-compra strong { color: var(--azul-profundo); }

/* Lista de links entre destinos. Marcador proprio, para nao herdar o ponto
   do navegador em uma lista que e navegacao, nao enumeracao. */
.lista-links { list-style: none; padding: 0; margin: 0 0 20px; }
.lista-links li {
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--azul-borda);
  position: relative;
  line-height: 1.6;
}
.lista-links li:last-child { border-bottom: 0; }
.lista-links li::before {
  /* A seta e um caractere de verdade, e nao um escape CSS. O escape
     numerico passou por um script, virou byte de controle no arquivo e
     sobrou so o numero na tela. Caractere literal nao corre esse risco. */
  content: "→";
  position: absolute;
  left: 0;
  color: var(--laranja-texto);
  font-weight: 500;
}

/* Bloco de foto no meio do texto, menor que a foto de largura cheia. */
.foto--meio { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------- BAGAGEM
   Dois cartoes lado a lado, um por volume de cabine. Cada um leva a arte, a
   cota e os exemplos, na ordem em que a duvida aparece: quanto cabe, qual a
   medida, com que se parece. Em coluna unica no celular. */
.bagagem-chapeu { text-align: center; margin-bottom: 2px; }
.bagagem-chapeu__sub {
  text-align: center;
  color: var(--cinza);
  margin: 0 0 20px;
  font-size: 15px;
}

.bagagem-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}
.bagagem-card {
  background: var(--azul-bg);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 22px 22px 18px;
}
.bagagem-card h3 {
  text-align: center;
  color: var(--azul-profundo);
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.bagagem-card__tarifa {
  text-align: center;
  color: var(--azul-medio);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 16px;
}
.bagagem-card__arte {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 16px;
}
.bagagem-card__intro { font-weight: 500; color: var(--azul-profundo); margin: 0 0 6px; font-size: clamp(13px, 3.6vw, 14.5px); }
.bagagem-card__medida { color: var(--cinza); line-height: 1.7; margin: 0 0 14px; font-size: 14.5px; }
.bagagem-card__cota {
  display: block;
  margin: 0 auto 16px;
  max-width: 190px;
  width: 100%;
  height: auto;
}
.bagagem-card__exemplos { width: 100%; height: auto; display: block; margin-bottom: 16px; }
.bagagem-card p { color: var(--cinza); line-height: 1.7; font-size: 14.5px; }
.bagagem-card ul { color: var(--cinza); line-height: 1.9; font-size: 14.5px; padding-left: 18px; margin: 6px 0 0; }

/* Bloco da despachada: cota a esquerda, texto a direita. */
.bagagem-despachada {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 14px 0 18px;
}
.bagagem-despachada img { width: 100%; height: auto; }
.bagagem-despachada p { color: var(--cinza); line-height: 1.8; margin-bottom: 10px; }

/* ----------------------------------------------------------- MEDIDAS
   Tres diagramas de mala com cota, lado a lado. Em coluna unica no celular:
   cota de 11 px em um terco da tela nao se le. */
.medidas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 24px;
}
.medida {
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 18px 16px 16px;
  background: #fff;
  text-align: center;
}
.medida img { width: 100%; height: auto; max-width: 190px; margin: 0 auto 10px; display: block; }
.medida figcaption { display: block; }
.medida__nome {
  display: block;
  font-weight: 500;
  color: var(--azul-profundo);
  font-size: 15px;
  margin-bottom: 2px;
}
.medida__num {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--laranja-texto);
  letter-spacing: -.01em;
}
.medida__obs { display: block; font-size: 12.5px; color: var(--cinza); line-height: 1.5; margin-top: 5px; }


/* --------------------------------------------------------- CHAMADA MALA
   Bloco curto reaproveitado em varias paginas, levando para o guia de
   medidas. Fica visualmente separado do texto para nao parecer paragrafo. */
.chamada-mala {
  border: 1px solid var(--azul-borda);
  border-left: 4px solid var(--azul);
  border-radius: var(--raio);
  background: var(--azul-bg);
  padding: 18px 20px;
  margin: 22px 0;
}
.chamada-mala h2, .chamada-mala h3 {
  font-size: 1.05rem;
  color: var(--azul-profundo);
  margin: 0 0 6px;
}
.chamada-mala p { color: var(--cinza); line-height: 1.7; margin: 0 0 12px; }
/* Botao menor, para chamada dentro do texto: o botao de hero pesaria demais
   no meio de um paragrafo. */
.btn-pequeno { padding: 9px 18px; font-size: 14px; }

/* -------------------------------------------------------------- FOTO
   Foto de conteudo com legenda. A legenda nao e enfeite: diz o que a imagem
   mostra e quando foi feita, que e o que separa foto de registro de foto de
   banco de imagem. width e height ficam no HTML, para o navegador reservar a
   altura antes do arquivo chegar e o texto nao pular. */
.foto {
  margin: 0 0 20px;
}
.foto img {
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  display: block;
}
.foto figcaption {
  font-size: 13px;
  color: var(--cinza);
  line-height: 1.6;
  padding-top: 8px;
}

/* Duas fotos lado a lado. Em coluna unica abaixo de 768 px, pela regra geral
   do arquivo. */
.foto--par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  margin-bottom: 20px;
}
.foto--par .foto { margin-bottom: 0; }

/* ----------------------------------------------------------- SUBMENU
   Dois grupos: "Aeroporto" reune as paginas da operacao e "Categorias" e o
   indice dos ramos de parceiro, como o sumario de um classificado.

   O item pai continua sendo um link de verdade: quem toca nele no celular vai
   para a pagina, em vez de ficar preso num menu que so abre com cursor.

   O painel abre no HOVER e no FOCO, e ancora na altura cheia da barra: o
   grupo se estica de topo a base do cabecalho (align-self: stretch), entao
   "100%" e a base da barra e o painel nunca sobe por cima dos itens. Era esse
   o defeito quando o grupo tinha so a altura do proprio botao.

   O painel fica ABAIXO do cabecalho no empilhamento visual mas acima do
   conteudo: z-index maior que o do conteudo, menor que o do menu do celular. */
.nav__grupo {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}
/* O item pai e um <a> dentro de um <span>: sem isto ele perderia a borda e o
   espacamento que o seletor .nav > a dava. */
.nav__grupo > a,
.nav__grupo > .nav__rotulo { display: flex; align-items: center; }
/* Rotulo de grupo: parece item de menu, mas nao leva a lugar nenhum. Existe
   para o grupo "Categorias", cujo destino seria a mesma pagina do item
   "Parceiros" ao lado. */
.nav__rotulo {
  position: relative;
  z-index: 0;
  gap: 4px;
  padding: 0 11px;
  color: var(--azul-profundo);
  font-size: 9.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  cursor: default;
  transition: color .2s;
}
.nav__rotulo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transform: skewX(-13deg);
  transition: background .22s;
}
.nav__grupo:hover > .nav__rotulo,
.nav__grupo:focus-within > .nav__rotulo { color: var(--azul-profundo); }
.nav__grupo:hover > .nav__rotulo::before,
.nav__grupo:focus-within > .nav__rotulo::before { background: var(--azul-claro); }
.nav__sub a::after { display: none; }

.nav__seta {
  width: 5px; height: 5px;
  margin-left: 4px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s;
}
.nav__grupo:hover .nav__seta,
.nav__grupo:focus-within .nav__seta { transform: translateY(1px) rotate(-135deg); }

.nav__sub {
  position: absolute;
  top: 100%;
  left: -6px;
  /* Numeros iguais aos do menu do CFH, que e o modelo pedido: 310 px de
     largura minima, 6 px de folga em cima e embaixo e o fio de marca de 3 px
     no topo. A largura maior e o que faz o painel parecer uma lista, e nao uma
     caixinha grudada no item. */
  min-width: 310px;
  background: #fff;
  border-top: 3px solid var(--azul-claro);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: 0 14px 34px rgba(6, 41, 74, .16);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  /* Escondido por visibilidade, e nao por display: assim a transicao existe e
     o item nao vira alvo de tabulacao enquanto esta fechado. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 40;
}
.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Aqui o item nao e botao: dentro do painel, sete contornos azuis viravam uma
   grade de caixas. Linha divisoria e marcador bastam. */
.nav__sub a {
  display: block;
  border: 0;
  border-bottom: 1px solid var(--azul-borda);
  border-radius: 0;
  padding: 9px 20px;
  /* Caixa alta e espacamento de letra sao da BARRA, nao do painel: a regra
     .nav a alcanca tambem os itens daqui, e sem desfazer os dois o submenu
     saia em maiusculas e parecendo maior do que e. */
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--texto);
  white-space: nowrap;
  transition: background .2s, color .2s, padding-left .2s;
}
.nav__sub a:last-child { border-bottom: 0; }
.nav__sub a::before {
  content: "›";
  color: var(--azul-claro);
  font-weight: 500;
  font-size: 14px;
  margin-right: 9px;
}
.nav__sub a:hover {
  background: var(--azul-bg);
  color: var(--azul-profundo);
  border-color: var(--azul-borda);
  padding-left: 28px;
}

.menu-toggle {
  display: none;
  width: var(--toque-min);
  height: var(--toque-min);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--azul-profundo);
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { width: 26px; height: 26px; }
.menu-toggle__fechar { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__abrir { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__fechar { display: block; }

/* --------------------------------------------------------------------------
   BREADCRUMBS
   -------------------------------------------------------------------------- */
/* Trilha discreta: fonte fina, 9px, sem negrito em nenhum item. */
/* O padding lateral vem do .container e alinha a trilha com o logo. Escrever
   "padding: 10px 0 0" aqui zerava esse recuo e jogava o texto para a esquerda. */
.breadcrumbs { padding: 10px 24px 0; font-size: 8px; font-weight: 400; color: var(--cinza); letter-spacing: .2px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.breadcrumbs a { color: var(--cinza); font-weight: 400; }
.breadcrumbs a:hover { color: var(--azul); }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 5px; color: var(--azul-borda); }
.breadcrumbs [aria-current="page"] { color: var(--cinza); font-weight: 400; }
.breadcrumbs li { font-weight: 400; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  /* Sem compensar altura de menu: o bloco do topo já ocupa espaço no fluxo. */
  padding: 54px 24px 86px;
  /* Fundo de reserva: aparece se as imagens do slide não carregarem. */
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 45%, var(--verde) 130%);
}

/* --------------------------------------------------------------------------
   SLIDE DE FUNDO DO HERO
   Três camadas empilhadas: imagens no fundo, véu escuro no meio, texto por
   cima. O véu é o que mantém o texto legível sobre qualquer foto.
   -------------------------------------------------------------------------- */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  will-change: opacity;
}
.hero__slide.is-ativo { opacity: 1; }

/* Véu escuro entre as fotos e o texto. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(3, 20, 38, .78), rgba(6, 41, 74, .58), rgba(4, 28, 52, .82)),
    radial-gradient(circle at 50% 62%, rgba(3, 18, 34, .34) 0, transparent 62%);
}

/* 1080px: largura em que o H1 da home fecha em duas linhas em vez de tres.
   Abaixo disso a terceira linha volta; muito acima, o titulo estica demais. */
.hero__conteudo { position: relative; z-index: 2; max-width: 1080px; }

/* Topo das paginas internas: faixa BAIXA.

   O titulo da pagina nao e o conteudo dela. Uma tarja alta com letra grande
   empurra o texto para fora da primeira tela e obriga a rolar antes de ler a
   primeira linha do que a pessoa veio buscar. Aqui a faixa serve so para
   nomear a pagina e dar uma frase de apoio.

   O tamanho do H1 nao muda a hierarquia: ele continua sendo o unico H1 da
   pagina, e e disso que o buscador cuida, nao do numero de pixels. */
/* Seletor com as DUAS classes de proposito: ".hero h1" e a regra do titulo
   grande da home e vem depois desta no arquivo. Com a mesma especificidade,
   quem vem depois vence, e a faixa das paginas internas voltava ao tamanho
   grande. O mesmo vale para o padding, que era desfeito pela regra ".hero" de
   dentro da media query do celular. */
.hero.hero--compacto { padding: 12px 24px 14px; }
.hero.hero--compacto h1 {
  /* 24 px de teto, e nao um valor fixo: em tela estreita o titulo ainda
     precisa encolher para nao quebrar no meio da frase. */
  font-size: clamp(18px, 3.4vw, 24px);
  font-weight: 500;
  line-height: 1.28;
  margin-bottom: 3px;
  text-shadow: none;
}
.hero.hero--compacto .hero__sub {
  font-size: .8rem;
  line-height: 1.5;
  max-width: 820px;
  margin: 0 auto;
  opacity: .9;
}
/* Com o buscador logo abaixo, a folga de baixo volta: o cartao dele sobe sobre
   a faixa, e sem essa margem ele encostaria no titulo. */
.hero.hero--compacto:not(.hero--solo) { padding-bottom: 46px; }

/* Topo das paginas internas: cor institucional, sem foto.

   O slide e exclusivo da home. Numa pagina interna, a foto grande empurra o
   conteudo para baixo, carrega 1920 px que nao explicam o assunto e, quando e
   de um destino generico, chega a contradizer o titulo.

   O veu escuro do .hero::before some junto: ele existe para dar contraste sobre
   fotografia. Sobre a cor chapada, so a escurecia sem motivo. */
.hero--cor {
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 100%);
}
.hero--cor::before { display: none; }

/* Topo das listagens do blog: sem foto de fundo e com espaco minimo. Serve
   para identificar a secao e dar o texto de apoio ao H1, nada alem disso. */
.hero--sem-foto {
  padding: 16px 24px 18px;
  background: linear-gradient(120deg, var(--azul-profundo) 0%, var(--azul) 100%);
}
.hero--sem-foto::before { display: none; }
.hero.hero--sem-foto h1 { font-size: clamp(18px, 3.4vw, 24px); }
.hero--sem-foto .hero__sub {
  font-size: .8rem;
  line-height: 1.5;
  margin-top: 5px;
  max-width: 780px;
  opacity: .92;
}

/* Sem movimento: mostra apenas a primeira foto, sem troca automática. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(4, 20, 38, .55);
  border: 1px solid rgba(242, 196, 61, .38);
  color: var(--amarelo-claro);
  padding: 9px 20px;
  border-radius: var(--raio-pill);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(20px, 3.2vw, 26px);
  color: #fff;
  font-weight: 500;
  line-height: 1.22;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

/* A frase de apoio da home e H2, e nao parte do H1: o H1 carrega so a palavra
   chave. Visualmente ela continua sendo a segunda linha do titulo, entao o
   H1 perde a margem de baixo e ela fica colada nele. */
.hero h1 + .hero__frase { margin-top: -12px; }
.hero__frase {
  font-size: clamp(15px, 2.2vw, 18px);
  color: #fff;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 14px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

.hero__sub {
  font-size: clamp(14px, 1.6vw, 15.5px);
  max-width: 720px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, .95);
  line-height: 1.7;
}

.hero__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }





/* --------------------------------------------------------------------------
   FAIXA ESCURA COM PILLS  (padrão do template do cliente)
   Itens curtos em cartões translúcidos sobre fundo azul. Sem descrição longa:
   a leitura é de varredura, não de parágrafo.
   -------------------------------------------------------------------------- */
.servicos {
  background: linear-gradient(135deg, #071B31 0%, #0B2E4F 55%, #103F63 100%);
  color: #fff;
}
.servicos .secao-titulo { color: #fff; }
.servicos .secao-sub { color: rgba(255, 255, 255, .9); }

.serv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.serv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  transition: background .25s, transform .25s;
}
.serv-item:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.serv-item span:last-child { font-size: .85rem; font-weight: 500; line-height: 1.4; }

.serv-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--azul-profundo);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 12px;
}

@media (max-width: 960px) { .serv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .serv-grid { grid-template-columns: 1fr; gap: 8px; } }

/* --------------------------------------------------------------------------
   CARDS DE SERVIÇO COM ÍCONE
   Ícone em círculo com gradiente ao lado do título, e a descrição abaixo.
   Três colunas: com seis cartões, fecha 3 x 2 sem sobra na última linha.
   -------------------------------------------------------------------------- */
.seg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* O cartão é uma grade de duas colunas: o ícone ocupa a primeira, o título a
   segunda, e a descrição atravessa as duas. Assim o ícone fica na frente do
   título sem precisar de um <div> a mais no HTML. */
.seg-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.seg-card:hover {
  transform: translateY(-2px);
  border-color: var(--laranja-borda);
  box-shadow: 0 2px 10px rgba(6, 41, 74, .07);
}

.seg-icon {
  grid-column: 1;
  grid-row: 1;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .2s;
}
/* O icone ganha um anel laranja no hover: repete o risco do aviao do logo,
   que atravessa o marinho em laranja e azul-claro. */
.seg-card:hover .seg-icon {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px var(--laranja-bg);
}

/* Ícones em SVG, não em emoji: emoji depende da fonte do sistema e no Windows
   vários não têm glifo, o que deixava o círculo vazio. */
.seg-icon svg {
  width: 20px; height: 20px;
  fill: #fff;
  stroke: none;
}
.seg-icon--traco svg {
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seg-card h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: 1rem;
  margin-bottom: 0;
  color: var(--azul);
  line-height: 1.25;
}
/* A descrição atravessa as duas colunas: alinhada ao ícone, ela teria uma
   coluna estreita demais e quebraria em três ou quatro linhas. */
.seg-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--cinza);
}

@media (max-width: 960px) { .seg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .seg-grid { grid-template-columns: 1fr; gap: 10px; }
  .seg-card { padding: 14px; column-gap: 10px; }
  .seg-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .seg-icon svg { width: 18px; height: 18px; }
  .seg-card h3 { font-size: .94rem; }
  .seg-card p { font-size: .78rem; }
}

/* --------------------------------------------------------------------------
   MINI CARDS DE DESTINO
   Grade compacta: foto com o nome do lugar por cima. Ocupa pouco espaço e
   cabem muitos destinos sem virar uma lista comprida.
   -------------------------------------------------------------------------- */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.mini-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .25s, box-shadow .25s;
}
.mini-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-card); }

.mini-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.mini-card:hover img { transform: scale(1.06); }

/* Véu na base para o nome ficar legível sobre qualquer foto. */
.mini-card__nome {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(to top, rgba(3, 18, 34, .9), rgba(3, 18, 34, 0));
  color: #fff;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: .88rem;
  line-height: 1.25;
}
.mini-card__nome small {
  display: block;
  font-family: var(--fonte-texto);
  font-weight: 400;
  font-size: .7rem;
  opacity: .82;
  margin-top: 1px;
}

@media (max-width: 720px) {
  .mini-cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
  .mini-card__nome { font-size: .8rem; padding: 18px 9px 8px; }
}

/* --------------------------------------------------------------------------
   ATALHO DE BUSCA, usado nos guias no lugar do widget
   Página de leitura não carrega os 2 MB do buscador de terceiro; leva o
   convite para pesquisar, que abre o buscador de verdade.
   -------------------------------------------------------------------------- */
.busca-atalho {
  position: relative;
  z-index: 5;
  margin-top: -44px;
  margin-bottom: 20px;
}
.busca-atalho .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1000px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(6, 41, 74, .16);
}
.busca-atalho p { font-size: .95rem; color: var(--texto); font-weight: 500; }
.busca-atalho__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   BLOG: listagem, categorias e paginacao
   --------------------------------------------------------------------------
   A lista e gerada por scripts/blog.py a partir dos artigos existentes, entao
   estas regras precisam valer para 12 ou para 300 cartoes sem ajuste manual. */
/* A capa de artigo com foto atras do titulo foi removida: o topo do artigo
   passou a ser a mesma faixa de cor das demais paginas internas. A imagem do
   front matter continua servindo ao cartao da listagem e ao compartilhamento. */

/* Barra de categorias: texto com divisor entre os itens, precedida por um
   ícone de etiqueta. Ocupa bem menos altura que a fileira de pílulas anterior. */
/* Filtro de categoria: fileira de pills. Antes eram itens separados por
   divisor, que no celular quebravam em tres linhas com barrinhas soltas no
   comeco de cada uma. Em pills a quebra fica legivel, e em tela estreita a
   fileira rola na horizontal em vez de empilhar. */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--azul-borda);
}
.blog-cats__icone {
  width: 15px; height: 15px;
  color: var(--azul);
  margin-right: 10px;
  flex-shrink: 0;
}
.blog-cats a {
  font-size: 13px;
  font-weight: 500;
  color: var(--cinza);
  background: var(--azul-bg);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio-pill);
  padding: 6px 14px;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}
.blog-cats a:hover { color: var(--azul); border-color: var(--azul-claro); }
.blog-cats a[aria-current="page"] {
  color: #fff;
  background: var(--azul);
  border-color: var(--azul);
}

@media (max-width: 560px) {
  .blog-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 14px;
  }
  .blog-cats::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   CARTAO DE MATERIA  (listagem de noticias)
   Texto na frente: categoria, titulo e resumo. Substitui o cartao de foto com
   titulo sobreposto, em que so cabia o titulo e nao se sabia do que era a
   materia antes de clicar.
   -------------------------------------------------------------------------- */
.materia-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.materia-card:hover {
  transform: translateY(-2px);
  border-color: var(--azul-medio);
  box-shadow: 0 2px 10px rgba(6, 41, 74, .07);
}

.materia-card__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--azul-bg);
}

.materia-card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.materia-card__cat {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  /* #7C8FA3 dava 3,33:1 sobre o branco do cartao, abaixo do minimo de 4,5:1.
     Em 8 px e caixa alta o texto ja e dificil, e a cor clara piorava. */
  color: #556678;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 7px;
}
.materia-card__cat:hover { color: var(--azul); }

.materia-card__titulo {
  font-size: 1.02rem;
  line-height: 1.32;
  margin-bottom: 8px;
  text-wrap: balance;
}
.materia-card__titulo a { color: var(--azul-profundo); }
.materia-card__titulo a:hover { color: var(--azul-medio); }
/* Estica o link do titulo sobre o cartao inteiro: um destino so, sem link
   aninhado. A etiqueta de categoria fica acima no empilhamento e segue
   clicavel por conta propria. */
.materia-card__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.materia-card__resumo {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--cinza);
  margin-bottom: 14px;
}

.materia-card__mais {
  margin-top: auto;
  font-size: .82rem;
  font-weight: 500;
  color: var(--laranja-texto);
}
.materia-card__mais::after { content: " →"; }

.artigos-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
/* Cartão de artigo: foto ocupando o cartão inteiro, com o texto por cima e um
   véu escuro em degradê. Sem o véu, título branco sobre foto clara fica
   ilegível, ele é o que garante contraste em qualquer imagem. */
/* Cartão de artigo: foto ocupando o cartão inteiro, conteúdo centralizado por
   cima e um véu escuro em degradê. Sem o véu, título branco sobre foto clara
   fica ilegível, ele é o que garante contraste em qualquer imagem. */
/* Cartao de artigo: foto no cartao inteiro, conteudo na metade de baixo e um
   veu preto em degrade a partir da metade. O veu e o que garante contraste do
   texto branco sobre qualquer foto, inclusive as claras. */
.artigo-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  isolation: isolate;
  background: #0B0B0B;
  transition: transform .25s, box-shadow .25s;
}
.artigo-card:hover { transform: translateY(-2px); box-shadow: 0 2px 10px rgba(6, 41, 74, .07); }

/* Materia sem foto: o fundo padrao e quase preto e deixaria um retangulo morto
   na grade. Recebe o degrade institucional, o mesmo do hero de reserva. */
.artigo-card--sem-foto {
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 55%, var(--azul-medio) 100%);
}

.artigo__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .45s;
}
.artigo-card:hover .artigo__foto { transform: scale(1.06); }

.artigo-card__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Comeca em 40% da altura, de cima para baixo: a metade superior da foto
     fica limpa e o texto ganha fundo escuro exatamente onde comeca. */
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0%,
              rgba(0, 0, 0, 0) 40%,
              rgba(0, 0, 0, .55) 62%,
              rgba(0, 0, 0, .90) 100%);
}

/* Link que cobre o cartao inteiro: quem clica na foto tambem abre o artigo.
   Fica abaixo apenas da etiqueta de categoria, que tem destino proprio. */
.artigo-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.artigo-card__link:focus-visible { outline-offset: -4px; }

.artigo-card__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 0 14px 14px;
  width: 100%;
  /* Reserva os 60% de baixo: o titulo comeca sempre em 40% da altura e cresce
     para baixo, entao titulo longo cabe sem empurrar o resto para fora. O
     conteudo fica agrupado no topo dessa faixa, sem vao no meio. */
  min-height: 60%;
  padding-top: 4px;
}

.artigo-card__titulo {
  font-size: .95rem;
  line-height: 1.3;
  color: #fff;
  text-wrap: balance;
  /* Sombra em duas camadas: uma curta que cola no contorno da letra e uma
     larga que escurece a area em volta. Garante leitura mesmo quando a foto
     por tras tem ponto claro bem no meio do titulo. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 16px rgba(0, 0, 0, .75);
  margin: 0;
}
.artigo-card:hover .artigo-card__titulo { color: var(--amarelo-claro); }

.artigo-card__mais {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  font-size: .76rem;
  font-weight: 500;
  color: var(--amarelo-claro);
  border-bottom: 1px solid rgba(242, 196, 61, .5);
  padding-bottom: 1px;
}
.artigo-card:hover .artigo-card__mais { color: #fff; border-color: rgba(255,255,255,.6); }

/* Etiqueta no fim do cartao, em corpo bem pequeno: e apoio, nao chamada. */
.artigo__cat {
  position: relative;
  z-index: 4;
  margin-top: 2px;
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 2px 7px;
  border-radius: var(--raio-pill);
}
.artigo__cat:hover { background: rgba(255, 255, 255, .28); color: #fff; }

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 8px 0 4px;
}
.paginacao a, .paginacao__atual {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid var(--azul-borda);
  color: var(--azul-profundo);
}
.paginacao a:hover { border-color: var(--azul-medio); background: var(--azul-bg); }
.paginacao__atual { background: var(--azul); border-color: var(--azul); color: #fff; }
.paginacao__nav { padding: 0 16px; }

/* Layout do blog: coluna de artigos + barra lateral, como em blog tradicional.
   A lateral sustenta a linkagem interna quando houver centenas de artigos. */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 20px;
  align-items: start;
}
.blog-coluna { min-width: 0; }

/* Artigo unico. Na listagem o grid nasce dentro de <section><div class="container">,
   entao ja vem travado em 1200px. No artigo o grid envolve o corpo inteiro e fica
   solto no <main>: ocupava a janela toda e o texto corria de ponta a ponta.
   Aqui ele recebe a mesma trava de largura do resto do site, e o .container de
   cada secao interna e neutralizado para nao somar padding em cima do padding. */
.artigo-layout {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}
.artigo-layout .blog-coluna > section > .container { max-width: none; padding: 0; }

/* Tabela de conteudo dentro de artigo. Nao tinha estilo nenhum: saia com o
   padrao do navegador, colada e sem separacao, e em tela estreita empurrava a
   coluna para fora. O overflow-x deixa a tabela rolar sozinha em vez de
   esticar a pagina. */
.tabela-wrap { overflow-x: auto; margin: 14px 0 18px; }
.tabela-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  min-width: 420px;
}
.tabela-wrap th,
.tabela-wrap td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--azul-borda);
  line-height: 1.45;
}
.tabela-wrap thead th {
  background: var(--azul-bg);
  color: var(--azul-profundo);
  font-weight: 500;
  font-size: .8rem;
  white-space: nowrap;
}
.tabela-wrap tbody tr:last-child td { border-bottom: 0; }
.tabela-wrap .td-num { white-space: nowrap; }

/* Texto editorial da categoria: dois paragrafos proprios, para a pagina de
   listagem nao ser conteudo raso indexavel. */
.blog-descricao {
  color: var(--cinza);
  font-size: .88rem;
  line-height: 1.7;
  max-width: 860px;
  margin-bottom: 12px;
}

.blog-intro {
  color: var(--cinza);
  font-size: .92rem;
  line-height: 1.6;
  max-width: 820px;
  margin-bottom: 14px;
}

/* O cabeçalho fixo tem 103px. Grudar em 96px fazia a lateral sumir
   atrás dele ao rolar a página. */
.blog-lateral { position: sticky; top: 115px; display: grid; gap: 12px; }
/* Respiro generoso em cima: o titulo e caixa alta pequena, e caixa alta tem
   pouca folga natural acima da linha. Com 14px o texto encostava na borda do
   cartao. O line-height explicito impede que a folga dependa do padrao do
   navegador. */
.lateral__bloco {
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 12px;
  padding: 24px 20px 20px;
}

/* O banner ocupa o cartao inteiro: sem padding, sem borda e sem canto
   arredondado na arte. A dupla classe e proposital, para vencer o
   .lateral__bloco acima sem depender da ordem do arquivo. */
.lateral__bloco.lateral__banner {
  padding: 0;
  border: 0;
  overflow: hidden;
  background: none;
  /* Mesmo raio dos outros cartoes da lateral, para o banner nao ser o unico
     bloco de canto reto na coluna. O overflow acima e o que faz a arte
     acompanhar a curva em vez de vazar pelo canto. */
  border-radius: 12px;
}
.lateral__banner a { display: block; line-height: 0; }
.lateral__banner img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Banner de afiliado. Nao e espaco vendido a parceiro: e receita do proprio
   portal. Por isso nao usa a moldura de anuncio, e leva sempre o aviso de
   comissao embaixo, que e exigencia e nao cortesia. */
.afiliado { margin: 18px 0 22px; }
.afiliado__arte {
  display: block;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
}
.afiliado__arte img { width: 100%; height: auto; display: block; }
.afiliado__aviso {
  font-size: .72rem;
  line-height: 1.45;
  color: var(--cinza);
  margin: 7px 2px 0;
}

/* Formato de duas colunas, da primeira dobra: argumento a esquerda, arte a
   direita. O leitor entende por que comparar sem rolar a pagina. */
.afiliado--duplo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 22px;
  align-items: center;
  background: var(--azul-bg);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin: 14px 0 22px;
}
.afiliado__chamada {
  font-family: var(--fonte-titulo);
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--azul-profundo);
  margin-bottom: 6px;
}
.afiliado__linha {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--cinza);
  margin-bottom: 12px;
}
.afiliado--duplo .afiliado__aviso { margin: 10px 0 0; }

/* Uma coluna a partir do tablet: em 360px de largura a arte perde o carro e
   vira mancha azul, e o texto fica espremido em quatro linhas. */
@media (max-width: 768px) {
  .afiliado--duplo { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}

/* Bloco de abertura da home, em 70/30: o resumo do aeroporto à esquerda e a
   arte de aluguel de carro à direita, dentro da primeira tela. */
.bluf__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 22px;
  align-items: center;
}
.bluf__grade .resposta-direta { margin-bottom: 0; }
/* A arte fica menor que a coluna e encostada na direita: em 330px ela ficava
   mais alta que a caixa de texto ao lado e puxava o olho para fora do resumo,
   que e o conteudo principal da abertura. */
.bluf__grade .afiliado {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 280px;
}

@media (max-width: 768px) {
  .bluf__grade { grid-template-columns: 1fr; gap: 16px; }
  /* Em coluna unica, encostada na direita a arte fica torta. Centraliza. */
  .bluf__grade .afiliado { justify-self: center; }
}
/* Na lateral o cartao tem padding zero, para a arte ocupar o bloco inteiro.
   O aviso precisa do proprio recuo para nao encostar na borda. */
.lateral__afiliado .afiliado__aviso {
  padding: 0 2px;
  margin-top: 6px;
  font-size: .68rem;
}
.lateral__titulo {
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--cinza);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--azul-borda);
}
.lateral__lista { list-style: none; display: grid; gap: 8px; }
.lateral__lista a {
  display: block;
  font-size: .8rem;
  color: var(--texto);
  line-height: 1.4;
}
.lateral__lista a:hover { color: var(--azul); }
.lateral__lista a[aria-current="page"] { color: var(--azul); font-weight: 500; }
.lateral__lista--links a { display: block; }
.lateral__cta { background: var(--azul-bg); border-color: var(--azul-borda); }
.lateral__cta p { font-size: .82rem; color: var(--cinza); margin-bottom: 12px; }
.lateral__cta .btn { width: 100%; }

@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; gap: 24px; }
  .blog-lateral { position: static; grid-template-columns: 1fr 1fr; }
  .lateral__cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .blog-lateral { grid-template-columns: 1fr; } }

@media (max-width: 1180px) { .artigos-grade { grid-template-columns: 1fr 1fr; } }
/* Uma coluna a partir do tablet. Em duas, o titulo da materia quebrava em
   quatro linhas dentro de um cartao estreito demais para ser lido, e o resumo
   ficava espremido. */
@media (max-width: 768px) { .artigos-grade { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .artigos-grade { grid-template-columns: 1fr; gap: 12px; }
  .artigo-card__titulo { font-size: .8rem; }
  .artigo-card__conteudo { padding: 0 10px 11px; gap: 5px; }
  .artigo-card__mais { font-size: .72rem; }
}

/* Buscador do Travelpayouts nos guias. O widget monta o resultado dentro da
   propria pagina, entao o bloco precisa poder crescer em altura. */

@media (max-width: 720px) {
  .busca-atalho { margin-top: -28px; margin-bottom: 16px; }
  .busca-atalho .container { padding: 18px; margin: 0 16px; }
  /* No celular os botões empilham. Com flex:1 lado a lado o rótulo quebrava
     em duas linhas dentro da pílula e o bloco ficava desalinhado. */
  .busca-atalho__acoes { width: 100%; flex-direction: column; align-items: stretch; }
  .busca-atalho__acoes .btn { width: 100%; }
}

/* Bloco de abertura (BLUF): a resposta que buscadores e sistemas de IA
   recortam. Fica logo após o buscador, antes de qualquer outra seção. */
.bluf { padding: 26px 0 6px; }

/* --------------------------------------------------------------------------
   BLOCO DE RESPOSTA DIRETA (conteúdo citável por LLMs, prompts_aeroportodourados/17)
   -------------------------------------------------------------------------- */
.resposta-direta {
  background: var(--azul-bg);
  border-left: 4px solid var(--azul-medio);
  border-radius: 0 var(--raio) var(--raio) 0;
  padding: 22px 26px;
  margin-bottom: 28px;
}
.resposta-direta p { font-size: 1rem; line-height: 1.7; color: var(--texto); }
.resposta-direta p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   GRADES E CARDS
   -------------------------------------------------------------------------- */
.grade      { display: grid; gap: 16px; }
.grade--2   { grid-template-columns: repeat(2, 1fr); }
.grade--3   { grid-template-columns: repeat(3, 1fr); }
.grade--4   { grid-template-columns: repeat(4, 1fr); }

/* Cards de cidade: quatro por linha e compactos. O texto é curto, então o
   padding e o corpo do card acompanham, senão sobra espaço vazio. */
.grade--cidades { gap: 12px; }
.grade--cidades .card { padding: 14px 14px 12px; border-radius: 10px; }
.grade--cidades .card h3 { font-size: .92rem; margin-bottom: 5px; }
.grade--cidades .card p { font-size: .78rem; line-height: 1.45; }
.grade--cidades .card__link { font-size: .76rem; margin-top: 10px; }

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 24px 22px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--laranja-borda);
  box-shadow: 0 2px 10px rgba(6, 41, 74, .07);
}
.card__icone { width: 42px; height: 42px; margin-bottom: 14px; color: var(--azul); }
.card__icone svg { width: 100%; height: 100%; }
.card h3 { font-size: clamp(.94rem, 3.2vw, 1.02rem); margin-bottom: 8px; color: var(--azul-profundo); }
.card p { font-size: .89rem; color: var(--cinza); line-height: 1.65; margin-bottom: 14px; }
/* Contato discreto: mesmo peso do texto do card, sem virar chamada. */
.contato-discreto { margin-top: auto; font-size: .85rem; }
.contato-discreto a { color: var(--azul); font-weight: 500; }
.contato-discreto a:hover { text-decoration: underline; }

/* Assinatura de data no fim da materia. Discreta de proposito: quem le o artigo
   ja tem a data de verificacao no texto, e a versao que os buscadores usam e o
   datePublished / dateModified do JSON-LD, nao esta linha. */
.materia__data {
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #9FAEBF;
  margin-bottom: 16px;
}

.card__link {
  margin-top: auto;
  font-weight: 500;
  font-size: .85rem;
  color: var(--azul);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card__link::after { content: "→"; transition: transform .2s, color .2s; }
.card:hover .card__link::after { transform: translateX(4px); color: var(--laranja-texto); }

/* Figura de destaque das páginas de destino */
.figura-destino {
  margin: 24px 0 28px;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--azul-borda);
  box-shadow: var(--sombra-card);
}
.figura-destino img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.figura-destino figcaption {
  padding: 10px 16px;
  background: var(--cinza-claro);
  border-top: 1px solid var(--azul-borda);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--cinza);
}

/* Card com imagem, destinos */
.card--midia { padding: 0; overflow: hidden; }
.card--midia .card__figura {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .5);
  font-family: var(--fonte-titulo);
  font-size: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.card--midia .card__figura img { width: 100%; height: 100%; object-fit: cover; }
.card--midia .card__corpo { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card--midia .card__tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--verde-bg);
  color: var(--verde);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--raio-pill);
  margin-bottom: 10px;
}

/* Card de cidade */
.card-cidade {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 12px;
  padding: 16px 18px;
  min-height: var(--toque-min);
  box-shadow: var(--sombra);
  transition: transform .25s, border-color .25s, background .25s;
}
.card-cidade:hover { transform: translateY(-3px); border-color: var(--azul-medio); background: var(--azul-bg); }
.card-cidade__nome { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(.9rem, 3vw, .98rem); color: var(--azul-profundo); }
.card-cidade__uf { font-size: .78rem; color: var(--cinza); }
.card-cidade--destaque {
  border-color: var(--amarelo);
  border-width: 2px;
  background: linear-gradient(135deg, #fff, var(--azul-bg));
}
.card-cidade--destaque .card-cidade__nome { color: var(--azul); }
.card-cidade__selo {
  display: inline-block;
  background: var(--amarelo);
  color: #22190A;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--raio-pill);
  margin-top: 4px;
  align-self: flex-start;
}

/* Lista de vantagens com marcador de verificação */
.lista-checks { list-style: none; display: grid; gap: 12px; }
.lista-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: .92rem; line-height: 1.6; }
/* A seta das listas era verde, cor sem relacao com a marca. Em laranja ela
   vira o detalhe repetido que mais aparece nas paginas de conteudo. */
.lista-checks .check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--laranja-bg);
  color: var(--laranja-texto);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 12px;
  margin-top: 1px;
}

/* Passo a passo numerado */
.fluxo { display: flex; flex-direction: column; gap: 12px; }
.fluxo__passo {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--sombra);
  transition: transform .3s, border-color .3s;
}
.fluxo__passo:hover { transform: translateX(6px); border-color: var(--azul-medio); }
.fluxo__num {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 500; font-size: 15px;
}
.fluxo__passo span:last-child { font-weight: 500; font-size: .9rem; }

/* --------------------------------------------------------------------------
   SEÇÃO ESCURA (destaque institucional)
   -------------------------------------------------------------------------- */
.secao-escura {
  background: linear-gradient(135deg, #071B31 0%, #0B2E4F 55%, #103F63 100%);
  color: #fff;
}
.secao-escura .secao-titulo { color: #fff; }
.secao-escura .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
.secao-escura .secao-sub { color: rgba(255, 255, 255, .88); }
.secao-escura .lista-checks li { color: rgba(255, 255, 255, .92); }
.secao-escura .lista-checks .check { background: rgba(255, 255, 255, .95); color: var(--azul-profundo); }
.secao-escura a { color: var(--amarelo-claro); }

.painel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  border-radius: var(--raio);
  padding: 24px 22px;
}
.painel h3 { color: #fff; font-size: clamp(.94rem, 3.2vw, 1.02rem); margin-bottom: 10px; }
.painel p { font-size: .89rem; color: rgba(255, 255, 255, .82); line-height: 1.65; }

/* --------------------------------------------------------------------------
   FAQ, acordeão acessível (aria-expanded + aria-controls)
   -------------------------------------------------------------------------- */
.faq-lista { display: flex; flex-direction: column; gap: 10px; }

/* Duas colunas a partir de 6 perguntas. Cada coluna é uma lista fechada:
   assim o acordeão abre sem empurrar o conteúdo do outro lado. */
.faq-lista--duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  align-items: start;
}
.faq-coluna { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 10px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.faq-item__botao {
  width: 100%;
  min-height: var(--toque-min);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: .93rem;
  color: var(--texto);
}
.faq-item__botao::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--azul);
  transition: transform .25s;
}
.faq-item__botao[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-item__botao:hover { background: var(--azul-bg); }

.faq-item__resposta {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  color: var(--cinza);
  font-size: .89rem;
  line-height: 1.7;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item__resposta[data-aberto="true"] { max-height: 600px; padding: 0 18px 18px; }
.faq-item__resposta p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   DOCUMENTOS LEGAIS E PÁGINAS DE TEXTO
   -------------------------------------------------------------------------- */
.documento__revisao {
  font-size: .82rem;
  color: var(--cinza);
  margin-bottom: 20px;
}

.documento h2 {
  font-size: 1.12rem;
  margin: 30px 0 10px;
  color: var(--azul-profundo);
}
.documento p { color: var(--cinza); line-height: 1.8; margin-bottom: 12px; }
.documento ul { margin: 0 0 14px 20px; color: var(--cinza); line-height: 1.8; }
.documento li { margin-bottom: 7px; }
.documento strong { color: var(--texto); }
.documento code {
  background: var(--azul-bg);
  border: 1px solid var(--azul-borda);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .88em;
  color: var(--azul-profundo);
}

.aviso-pendente {
  background: #FFF8E6;
  border: 1px solid #F0DCA0;
  border-left: 4px solid var(--amarelo);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 18px 0;
  font-size: .89rem;
  line-height: 1.75;
  color: #5A4712;
}
.aviso-pendente strong { color: #3D2F06; }

.dados-legais {
  background: var(--cinza-claro);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 20px 24px;
}
.dados-legais p { font-size: .9rem; color: var(--cinza); margin-bottom: 7px; }
.dados-legais p:last-child { margin-bottom: 0; }
.dados-legais strong { color: var(--texto); }

/* Página com apenas texto: h2 do conteúdo precisa de respiro. */
/* H1 dentro do conteudo, das paginas sem a faixa de titulo. Sem esta regra ele
   caia no padrao do navegador, que no celular sai com o dobro do tamanho do
   resto e come a primeira tela. */
section > .container > h1 {
  font-size: clamp(18px, 3.8vw, 24px);
  margin: 0 0 6px;
  color: var(--azul-profundo);
}
section > .container > h2 { margin: 26px 0 10px; font-size: clamp(15px, 3.6vw, 18px); color: var(--azul-profundo); }

/* --------------------------------------------------------------------------
   FORMULÁRIO
   -------------------------------------------------------------------------- */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.formulario__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: .87rem; font-weight: 500; color: var(--texto); }

.campo input,
.campo select,
.campo textarea {
  min-height: var(--toque-min);
  padding: 11px 14px;
  font-family: var(--fonte-texto);
  font-size: .93rem;
  color: var(--texto);
  background: #fff;
  border: 1.5px solid var(--azul-borda);
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--azul-claro); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(27, 108, 168, .15);
}
.campo input::placeholder, .campo textarea::placeholder { color: #97A6B8; }

.campo__ajuda { font-size: .82rem; color: var(--cinza); margin-top: -6px; }
.campo__opcional { font-weight: 400; color: var(--cinza); }

.campo--consentimento {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  background: var(--cinza-claro);
  border: 1px solid var(--azul-borda);
  border-radius: 10px;
  padding: 14px 16px;
}
.campo--consentimento input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--azul);
}
.campo--consentimento label { font-weight: 400; font-size: .86rem; line-height: 1.6; color: var(--cinza); }

.formulario .btn { align-self: flex-start; }

@media (max-width: 720px) {
  .formulario__linha { grid-template-columns: 1fr; }
  .formulario .btn { align-self: stretch; }
}

/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 60%, var(--verde) 150%);
  color: #fff;
  text-align: center;
  padding: 62px 24px;
}
.cta-final h2 { color: #fff; font-size: clamp(16px, 2.6vw, 20px); margin-bottom: 10px; }
.cta-final p { max-width: 620px; margin: 0 auto 24px; font-size: .97rem; color: rgba(255, 255, 255, .92); }
.cta-final .hero__ctas { margin-top: 4px; }

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */
.rodape { background: #051E36; color: #9FB3C8; padding: 26px 0 16px; font-size: .8rem; }

/* Três colunas: marca, A agência, Políticas. A primeira é mais larga porque
   carrega o texto e o NAP; as outras duas são só listas curtas. */
/* Quatro colunas iguais. minmax(0, 1fr) e nao 1fr puro: em grid, 1fr tem
   minimo automatico, e a coluna com o texto mais longo empurraria as outras. */
.rodape__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                 gap: 14px 26px; }

/* NAP do rodape. address vem em italico por padrao do navegador e fica ruim
   em corpo pequeno sobre fundo escuro. */
/* O endereco inteiro e o link para o Google Maps: um sublinhado discreto
   avisa que e clicavel sem transformar o bloco em botao. */
.rodape__endereco { color: inherit; text-decoration: underline; text-underline-offset: 3px;
                    text-decoration-color: rgba(255, 255, 255, .3); }
.rodape__endereco:hover { color: var(--amarelo-claro); text-decoration-color: currentColor; }

.rodape__nap {
  font-style: normal;
  line-height: 1.45;
  font-size: 12.5px;
  margin-bottom: 5px;
}
.rodape__horario { font-size: 12px; margin-top: 5px; opacity: .8; line-height: 1.4; }

.rodape h3 {
  color: #fff;
  font-size: .72rem;
  letter-spacing: .3px;
  margin-bottom: 6px;
  line-height: 1.35;
}
/* 6 px de espacamento e 6 px de padding no link dao a area minima de
   toque que a diretriz pede, sem desfazer a compactacao do rodape. */
.rodape ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rodape li { line-height: 1.5; }
.rodape li a { display: inline-block; padding: 3px 0; }
.rodape a { color: #9FB3C8; }
.rodape a:hover { color: var(--laranja); }

/* O link dentro de texto corrido precisa de mais que cor para ser percebido:
   quem nao distingue as duas cores nao ve que ali tem link. O sublinhado
   resolve sem mudar o resto do visual. */
.consentimento__texto a,
.rodape__sobre a,
.rodape__horario a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Link dentro de texto corrido leva sublinhado.

   Cor sozinha nao basta: quem nao distingue os dois tons nao percebe que ali
   ha um link. A regra alcanca paragrafo, item de lista e legenda, que e onde
   o link aparece no meio da leitura. Fica de fora o que ja se anuncia como
   controle: botao, menu, cartao, rodape e paginacao.

   O text-underline-offset afasta o traco da base da letra, para nao cortar o
   pe do "g" e do "p". */
main p a,
main li a,
main figcaption a,
main .documento a,
main dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
main .btn,
main .lista-links a,
main .cta-compra a,
main .chamada-mala a,
main .lateral__lista a,
main .materia-card a,
main .parceiro a,
main .faq-item a {
  text-decoration: none;
}

/* Sem negrito no rodape, por decisao do cliente. O h3 ja se separa do resto
   pela caixa alta e pelo espacamento entre letras. */
.rodape strong, .rodape b { font-weight: 400; }
.rodape h3 { font-weight: 500; }

/* Com o corpo menor, o link da lista ganha area de toque propria: sem isso o
   alvo no celular fica abaixo dos 44 px que a diretriz de acessibilidade pede. */
@media (max-width: 768px) {
  .rodape li { line-height: 1.9; }
  .rodape li a { display: inline-block; padding: 3px 0; }
}

/* Placa branca: o "Aeroporto" da marca é azul-marinho e sumiria no fundo
   escuro do rodapé. Preserva as cores originais sem inventar versão negativa. */
.rodape__logo {
  display: block;
  width: auto;
  height: 30px;
  margin-bottom: 9px;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
}
.rodape__logo .logo__marca { color: var(--verde-medio); }
.rodape__sobre { font-size: .74rem; line-height: 1.5; margin-bottom: 8px; }
.rodape__regiao { font-size: .72rem; line-height: 1.5; color: #9FB3C8; }

/* Faixa final: assinatura | selo | crédito.
   1fr auto 1fr mantém o selo no centro exato do rodapé, independentemente do
   comprimento dos textos das pontas. */
.rodape__base {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* #9FB3C8 sobre #051E36 da 7,8:1. O tom anterior ficava em 5,3:1 e o
   credito, mais escuro, em 4,2:1: abaixo do minimo de 4,5:1. */
.rodape__copy { font-size: .7rem; line-height: 1.45; color: #9FB3C8; }

/* Tres partes na barra: copy a esquerda, selo ao centro, credito a direita.
   O grid ja e 1fr auto 1fr, entao basta alinhar as pontas para fora. */
/* Dois cards brancos com os logos, lado a lado, no centro da barra final.
   As duas marcas sao coloridas e sumiriam sobre o azul do rodape, entao cada
   uma ganha o proprio berco branco. Sem divisor entre eles: os dois cards ja
   se separam sozinhos. */
.rodape__selos {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rodape__selo {
  height: 26px;
  width: auto;
  background: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  display: block;
}


.rodape__credito {
  justify-self: end;
  text-align: right;
  font-size: .7rem;
  line-height: 1.45;
  color: #9FB3C8;
}
.rodape__credito a { color: #B9C9D9; font-weight: 400; }
.rodape__credito a:hover { color: var(--amarelo-claro); }
.rodape__copy strong { color: #B9C9D9; font-weight: 400; }
.rodape__copy strong a { color: inherit; }
.rodape__copy strong a:hover { color: var(--amarelo-claro); }

/* A logo oficial tem texto azul-escuro, ilegível sobre o rodapé escuro ,
   por isso vai sobre uma placa branca, preservando as cores da marca. */
.rodape__cadastur {
  justify-self: center;
  width: 124px;
  height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
}

/* Esta regra vem DEPOIS da definicao principal do credito, mais acima, e por
   isso vencia com a mesma especificidade. Os tons #6B7F96 e #8FA5BC davam
   4,2:1 e 5,9:1 sobre o fundo do rodape, e o primeiro reprovava. */
.rodape__credito { justify-self: end; text-align: right; font-size: .7rem; color: #9FB3C8; }
.rodape__credito a { color: #C2D4E3; }
.rodape__credito a:hover { color: var(--amarelo-claro); }

/* Símbolo de marca registrada: sobrescrito sem esticar a altura da linha. */
.marca-registrada {
  font-size: .62em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}


/* Redes sociais no rodapé: some quando nenhuma foi cadastrada. */
.rodape__redes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: .76rem; }
.rodape__redes:empty { display: none; }

/* Lista de créditos de imagem */
.creditos { list-style: none; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.creditos li {
  background: var(--cinza-claro);
  border: 1px solid var(--azul-borda);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--cinza);
}
.creditos code {
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .86em;
  color: var(--azul-profundo);
}
.creditos em { color: var(--verde); font-style: normal; font-weight: 500; }
.documento h3 { font-size: clamp(.92rem, 3vw, .98rem); margin: 22px 0 8px; color: var(--azul); }


/* --------------------------------------------------------------------------
   BANNERS DE PARCEIROS  (novo componente)
   Publicidade precisa ser reconhecivel como publicidade: o cartao tem borda
   tracejada e rotulo fixo, deliberadamente diferente do .card editorial, que
   e solido. Quem bate o olho sabe o que e.

   Construido so com os tokens de :root, sem cor, fonte ou medida nova.
   -------------------------------------------------------------------------- */
.parceiros { padding: 34px 0; background: var(--cinza-claro); }

/* Tres colunas fixas no desktop. Com seis parceiros ativos, fecha 3 x 2. */
.parceiros__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .parceiros__grade { grid-template-columns: repeat(2, 1fr); } }

.parceiro {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px dashed var(--azul-borda);
  border-radius: var(--raio);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  min-height: var(--toque-min);
}
.parceiro:hover, .parceiro:focus-visible {
  transform: translateY(-2px);
  border-color: var(--azul-claro);
  box-shadow: 0 2px 10px rgba(6, 41, 74, .07);
}

/* A proporcao NAO e fixa aqui: vem inline, das dimensoes declaradas de cada
   espaco no painel. Hoje todos os espacos usam 2:1 (800x400), cartao baixo, que
   interrompe menos a leitura e deixa o anunciante com uma arte so para qualquer
   posicao. Trocar isso e um campo no painel, nao uma regra nova aqui.

   O fallback de 2:1 cobre o caso de um anuncio antigo sem dimensao gravada. */
.parceiro__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--azul-bg);
}

.parceiro__texto { display: block; padding: 14px 16px 16px; }
.parceiro__titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: .98rem;
  font-weight: 500;
  color: var(--azul-profundo);
  margin-bottom: 4px;
  line-height: 1.35;
}
.parceiro__desc { display: block; font-size: .85rem; line-height: 1.6; color: var(--cinza); }

/* O cartao tem DOIS destinos para o mesmo endereco: o cartao inteiro e o botao
   "Fale conosco". Link dentro de link e HTML invalido, entao o cartao virou uma
   div e quem cobre a area toda e o pseudo-elemento do titulo.

   O botao fica acima dele na pilha e por isso continua clicavel, inclusive por
   teclado, onde recebe foco proprio. */
.parceiro__link {
  color: inherit;
  text-decoration: none;
}
.parceiro__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.parceiro:hover .parceiro__link { text-decoration: underline; }

/* Discreto de proposito: e uma conveniencia, nao o assunto do cartao. */
.parceiro__contato {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid var(--laranja-borda);
  border-radius: var(--raio-pill);
  font-size: .76rem;
  font-weight: 500;
  color: var(--laranja-texto);
  text-decoration: none;
  background: transparent;
  transition: background .2s ease, color .2s ease;
  min-height: 0;
}
.parceiro__contato:hover,
.parceiro__contato:focus-visible {
  background: var(--laranja-bg);
  color: var(--laranja-texto);
}

.parceiro--destaque { border-color: var(--azul-claro); }

/* Faixa de publicidade intercalada na listagem de noticias.
   Mesma grade das materias, para as colunas alinharem, com respiro em volta
   para o leitor perceber que ali muda a natureza do conteudo. */
.parceiros__faixa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 26px 0;
  padding: 22px 0;
  border-top: 1px solid var(--azul-borda);
  border-bottom: 1px solid var(--azul-borda);
}
@media (max-width: 1180px) { .parceiros__faixa { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .parceiros__faixa { grid-template-columns: 1fr; } }

/* Caixa de espaco disponivel.
   Deliberadamente diferente do banner pago: fundo claro em vez de branco,
   borda tracejada mais visivel e nenhum rotulo de publicidade, porque nao e
   publicidade. Quem olha entende que ali cabe um anuncio, sem confundir com
   um anunciante de verdade. */
.parceiro--vago {
  background: var(--azul-bg);
  border: 2px dashed var(--azul-borda);
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 0;
  padding: 20px;
}
.parceiro--vago:hover {
  border-color: var(--azul-medio);
  background: #E1EEFA;
}

/* Mensagem unica, centrada, das caixas de espaco livre.

   Vale para a grade e para a faixa de topo, e por isso a classe nao carrega o
   nome de nenhuma das duas: a mensagem e a mesma, e o site inteiro deve falar
   de um jeito so sobre espaco a venda. */
.vago-msg {
  display: block;
  text-align: center;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--azul-profundo);
  text-wrap: balance;
}
.vago-msg__sep { color: var(--azul-borda); margin: 0 4px; }
.vago-msg__cta { color: var(--laranja-texto); font-weight: 500; }
.parceiro--vago:hover .vago-msg__cta,
.topo-faixa--vaga .topo-faixa__link:hover .vago-msg__cta { text-decoration: underline; }

/* Em caixa pequena a linha unica nao cabe; ai as duas metades empilham. */
@media (max-width: 420px) {
  .vago-msg { font-size: .88rem; }
}


@media (max-width: 768px) {
  .parceiros { padding: 26px 0; }
  .parceiros__grade { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   AVISO DE COOKIES
   Faixa discreta, um botão só. Some depois da primeira escolha.
   -------------------------------------------------------------------------- */
.consentimento {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 620px;
  margin: 0 auto;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(6, 41, 74, .22);
}
.consentimento[hidden] { display: none; }
.consentimento__texto { flex: 1; min-width: 220px; font-size: .78rem; line-height: 1.5; color: var(--cinza); }
.consentimento__texto strong { color: var(--texto); margin-right: 4px; }
.consentimento .btn { flex-shrink: 0; min-height: 38px; padding: 8px 22px; font-size: 13px; }

@media (max-width: 720px) {
  .consentimento { left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; gap: 10px; }
  .consentimento__texto { font-size: .75rem; }
  .consentimento .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   BOTÕES FLUTUANTES
   -------------------------------------------------------------------------- */

.topo-float {
  position: fixed;
  bottom: 22px; right: 22px;
  /* Acima do aviso de cookies (120), senão o aviso engole a setinha. */
  z-index: 121;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(11, 76, 135, .4);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .15s, visibility .15s, transform .15s, background .15s;
}
.topo-float:active { transform: translateY(0) scale(.92); }
.topo-float.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.topo-float.acima-aviso { bottom: 112px; }
.topo-float:hover { background: var(--azul-profundo); }
.topo-float svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   RESPONSIVO, mobile first na leitura, ajustes descendentes aqui
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: #fff;
    padding: 16px 20px 22px;
    box-shadow: var(--sombra);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .nav.aberto { display: flex; }

  /* Empilhado, o grupo deixa de ser um item de barra e vira um bloco: o item
     pai em cima e a lista dele embaixo.

     O seletor precisa ser `.nav > .nav__grupo`, e nao `.nav__grupo`: a regra do
     desktop que poe o grupo em linha tambem e `.nav > .nav__grupo`, e tem
     especificidade maior. Com o seletor curto aqui, ela vencia dentro do
     celular e o item pai ficava ao LADO da propria lista. */
  .nav > a, .nav > .nav__grupo { display: block; width: 100%; }
  .nav__rotulo {
    display: block;
    padding: 12px 4px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--azul-borda);
  }
  .nav__rotulo::before { display: none; }
  .nav__grupo { display: block; align-items: initial; }
  .nav__seta { display: none; }

  /* O angulo nao se aplica na vertical: um bloco inclinado dentro de uma lista
     fica torto em relacao ao vizinho de cima e ao de baixo. */
  .nav > a::before, .nav__grupo > a::before,
  .nav > a::after, .nav > .nav__grupo::after { display: none; }

  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 14px;
    min-width: 0;
  }

  /* Aqui o item volta a ser texto normal, separado por uma linha reta. */
  .nav a {
    display: block;
    width: 100%;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--azul-profundo);
    border-bottom: 1px solid var(--azul-borda);
    border-radius: 0;
  }
  .nav > a:last-child { border-bottom-color: transparent; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--azul-medio); }
  .nav__sub a { font-size: 13.5px; font-weight: 500; padding: 11px 4px; }
  .nav__sub a:hover { background: none; padding-left: 4px; }
  .nav__sub a:last-child { border-bottom: 0; }

  .menu-toggle { display: flex; }

  .foto--par { grid-template-columns: 1fr; }
  .medidas { grid-template-columns: 1fr; }
  .bagagem-par { grid-template-columns: 1fr; }
  .bagagem-despachada { grid-template-columns: 1fr; }
  .bagagem-despachada img { max-width: 190px; margin: 0 auto; }

  .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(2, 1fr); }

  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 720px) {
  section { padding: 24px 0; }
  .container { padding: 0 18px; }
  /* Mesmo recuo do .container: o artigo unico e quem carrega o padding
     lateral, porque o .container de dentro dele foi zerado. */
  .artigo-layout { padding: 0 18px; }
  /* Mesmo recuo do .container, para logo, trilha e conteúdo ficarem na
     mesma linha vertical no celular. */
  .cabecalho__inner { padding-left: 18px; padding-right: 18px; }
  .breadcrumbs { padding-left: 18px; padding-right: 18px; }

  /* Só o hero alto da home: a faixa compacta das paginas internas tem o
     proprio padding e nao pode ser reinflada aqui. */
  .hero:not(.hero--compacto) { padding: 34px 18px 66px; }
  .hero.hero--compacto { padding: 11px 18px 13px; }
  .hero.hero--compacto:not(.hero--solo) { padding-bottom: 44px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__selos { flex-direction: column; align-items: stretch; }
  .hero__selo { justify-content: center; }

  .grade--2, .grade--3, .grade--4 { grid-template-columns: 1fr; }
  .faq-lista--duas { grid-template-columns: 1fr; }

  /* No celular as duas listas de links ficam lado a lado, que e onde a divisao
     em duas colunas ainda ajuda. A marca e o endereco ocupam a largura toda:
     texto corrido em meia tela quebra em palavras soltas. */
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 22px 20px; }

  /* Bloco da marca: faixa centralizada no topo. */
  .rodape__grade > :first-child {
    grid-column: 1 / -1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .rodape__logo { margin-left: auto; margin-right: auto; }
  .rodape__sobre { max-width: 42ch; }

  /* Coluna do endereco: largura cheia e centralizada, junto com o horario. */
  .rodape__grade > :last-child { grid-column: 1 / -1; text-align: center; }
  .rodape__nap { line-height: 1.6; }

  .rodape__base { grid-template-columns: 1fr; justify-items: center; gap: 16px;
                  text-align: center; }
  .rodape__credito { justify-self: center; text-align: center; }
  .topo-float { bottom: 16px; right: 16px; }
}

/* Colunas duplas que devem permanecer em duas colunas mesmo no celular */
@media (max-width: 720px) {
  .grade--cidades { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ===========================================================================
   Formatos a venda, na pagina /anuncie/

   Cada formato mostra uma miniatura da pagina com o lugar do banner em laranja.
   A pergunta que o anunciante faz antes de qualquer outra e "onde aparece?", e
   texto nenhum responde isso tao rapido quanto o desenho.
   =========================================================================== */
.anuncie__abre {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--cinza-escuro, var(--cinza));
  max-width: 68ch;
  margin: 0 0 26px;
}

/* Duas colunas no desktop. Com o desenho ao LADO do texto, como era antes, a
   coluna de texto ficava com uns 270 px e o titulo quebrava no meio da frase;
   por isso aqui o desenho vai em cima e o texto embaixo, dentro do cartao.

   Altura igual entre os cartoes da mesma linha nao se faz com min-height: o
   grid ja estica todos ao mais alto da linha. O que faltava era o conteudo
   ocupar essa altura, e nao sobrar espaco branco no fim do cartao mais curto.
   Por isso o corpo e uma coluna flexivel e a ficha carrega margin-top: auto:
   ficha e botao descem para a base e ficam alinhados de um cartao para o
   outro. */
.formatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 34px;
}

.formato {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--branco);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
}

.formato__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* O formato que lista uma pagina por linha ocupa a largura toda e fica
   sozinho na sua linha: com nove itens ele e muito mais alto que os outros, e
   ao lado de um cartao curto deixava meia grade em branco.

   Neste, e so neste, o desenho volta para o LADO do texto. Empilhado na
   largura cheia, o desenho ficava centralizado com um vazio de cada lado e a
   lista esticava de ponta a ponta, jogando os botoes a um palmo do nome da
   pagina. Ao lado, o desenho ocupa o vazio e a lista fica na largura em que
   nome e botao se leem juntos. */
.formato--largo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.formato--largo .formato__desenho { max-width: none; margin: 0 0 14px; }
/* Coluna da esquerda: desenho e, embaixo dele, o nome, o texto e a ficha. */
.formato--largo .formato__lado { display: block; }
.formato--largo .formato__ficha { margin-bottom: 0; }

/* A lista de paginas vive sozinha na coluna da direita, em DUAS colunas.
   Fixas, e nao auto-fit: com auto-fit o navegador punha tres colunas na tela
   larga, porque cabiam. */
.formato--largo .formato__paginas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
}
.formato--largo .formato__pagina:first-child { border-top: 1px solid var(--azul-borda); }
.formato--largo .formato__pagina:nth-child(-n+2) { border-top: 0; }

@media (max-width: 780px) {
  .formato--largo { display: flex; }
  .formato--largo .formato__desenho { max-width: 340px; margin: 0 auto 14px; }
  .formato--largo .formato__paginas { grid-template-columns: minmax(0, 1fr); }
  .formato--largo .formato__pagina:nth-child(2) { border-top: 1px solid var(--azul-borda); }
}

@media (max-width: 780px) {
  .formatos { grid-template-columns: minmax(0, 1fr); }
}

/* Trava a largura do desenho: em coluna, esticado, ele viraria a metade
   do cartao e empurraria o texto para fora da primeira tela. */
.formato__desenho { margin: 0 auto; width: 100%; max-width: 340px; }

/* A miniatura tem moldura discreta: e o desenho de uma pagina, e sem a borda
   ela flutuaria solta no cartao. */
.formato__mini {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--azul-borda);
  border-radius: 6px;
  background: #fff;
}
.formato__legenda {
  margin: 8px 0 0;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--laranja-texto);
  text-align: center;
}

.formato__nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(.96rem, 3.4vw, 1.08rem);
  color: var(--azul-profundo);
  margin: 0 0 8px;
}
.formato__texto {
  font-size: clamp(.85rem, 2.6vw, .92rem);
  line-height: 1.7;
  color: var(--cinza);
  margin: 0 0 10px;
}
.formato__ficha {
  /* Empurra ficha e botao para a base do cartao, alinhando-os entre os
     cartoes da mesma linha. */
  margin-top: auto;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--cinza);
  padding: 8px 12px;
  background: var(--azul-bg);
  border-radius: 8px;
  margin-bottom: 14px;
}

/* Lista de paginas dentro de um formato: nome e botao, uma por linha. */
.formato__paginas { list-style: none; margin: 0; padding: 0; }
.formato__pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--azul-borda);
}
.formato__pagina:first-child { border-top: 0; }
.formato__pagina-nome { font-size: clamp(.82rem, 2.4vw, .9rem); color: var(--azul-profundo); font-weight: 500; }

.formato__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  padding: 10px 18px;
  border-radius: var(--raio-pill);
  background: var(--azul);
  color: #fff;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s ease;
}
.formato__botao:hover, .formato__botao:focus-visible { background: var(--azul-profundo); }
.formato__botao--pequeno { padding: 8px 14px; font-size: .82rem; }

/* Passos numerados do "como funciona". O numero e o fio condutor, entao ele
   ganha peso proprio em vez do marcador padrao da lista. */
.passos-numerados {
  counter-reset: passo;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.passos-numerados > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 16px 44px;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--cinza);
}
.passos-numerados > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--laranja-bg);
  border: 1px solid var(--laranja-borda);
  color: var(--laranja-texto);
  font-weight: 500;
  font-size: .84rem;
}
.passos-numerados strong { color: var(--azul-profundo); }

@media (max-width: 860px) {
  .formato { grid-template-columns: 1fr; gap: 16px; }
  .formato__desenho { max-width: 320px; }
}
@media (max-width: 560px) {
  .formato__pagina { grid-template-columns: 1fr; }
  .formato__pagina .formato__botao { justify-self: start; }
}

/* ===========================================================================
   Faixa de topo

   Espaco unico do portal, logo abaixo do menu, em todas as paginas. Duas artes:
   1200x120 no desktop e 720x120 no celular, escolhidas pelo <picture>. Uma peca
   de 1200 px encolhida para 360 px de tela vira uma tarja ilegivel.

   A faixa e baixa de proposito: ela aparece em toda pagina, entao qualquer
   altura a mais vira altura roubada do conteudo, em toda pagina.

   A altura vem declarada no HTML, entao o espaco nasce reservado e a pagina nao
   pula quando a imagem chega.
   =========================================================================== */
.topo-faixa {
  background: var(--branco);
  border-bottom: 1px solid var(--azul-borda);
  padding: 8px 0;
}

.topo-faixa__link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--raio);
  overflow: hidden;
  line-height: 0;   /* mata o vao que a linha de base deixa sob a imagem */
}

.topo-faixa__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 120;
  object-fit: cover;
  background: var(--azul-bg);
}
@media (min-width: 768px) {
  .topo-faixa__img { aspect-ratio: 1200 / 120; }
}

/* O rotulo e obrigatorio: publicidade no topo, se nao for identificada, se
   confunde com o proprio cabecalho do portal. */
.topo-faixa__rotulo {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  background: rgba(6, 41, 74, .82);
  color: #fff;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--raio-pill);
  line-height: 1.5;
}

/* --- espaco disponivel ---------------------------------------------------- */
.topo-faixa--vaga { background: var(--branco); }

.topo-faixa--vaga .topo-faixa__link {
  display: grid;
  place-items: center;
  line-height: 1.5;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px dashed var(--laranja-borda);
  background: var(--laranja-bg);
  transition: background .2s ease;
}
.topo-faixa--vaga .topo-faixa__link:hover { background: #FFE7CE; }
.topo-faixa--vaga .vago-msg { font-size: .88rem; }

/* ===========================================================================
   Destinos a partir do aeroporto

   Cada pagina abre pela logistica de sair de Dourados e so depois mostra o
   destino. As fotos vem quadradas da plataforma autorizada, em 480 px, entao
   entram como cartao e nunca como capa: esticar 480 px na largura da pagina
   deixaria a imagem borrada.
   =========================================================================== */
.destinos__nota {
  color: var(--cinza);
  font-size: .92rem;
  line-height: 1.7;
  margin: -6px 0 12px;
}

.destinos__fotos { margin: 18px 0 26px; }

.destino-foto { margin: 0; }
.destino-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio);
  border: 1px solid var(--azul-borda);
  background: var(--azul-bg);
}
.destino-foto figcaption {
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--cinza);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Fontes consultadas

   A classe ja era usada em seis paginas e nunca teve regra propria: a lista
   saia com o marcador padrao do navegador, encostada no texto. Como e o bloco
   que sustenta a credibilidade do conteudo, ela merece parecer deliberada.
   --------------------------------------------------------------------------- */
.fontes {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--azul-bg);
  border-left: 3px solid var(--azul-borda);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--cinza);
}
.fontes li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--azul-borda); }
.fontes a { color: var(--azul-medio); }

/* ===========================================================================
   Hero de duas colunas, das paginas de destino

   Texto a esquerda, foto do destino a direita. Uma pagina de destino sem
   imagem nenhuma no topo fica arida, e a foto do slide da home nao serve aqui:
   ela e generica e chega a contradizer o titulo.

   A coluna da foto tem largura maxima travada. E o que garante nitidez: parte
   das fotos vem em 480 px de largura, e estica-las para meia tela as deixaria
   borradas. Melhor a foto menor e limpa do que grande e suja.
   =========================================================================== */
.hero-duplo {
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 100%);
  color: #fff;
  padding: 30px 0 34px;
}

.hero-duplo__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 32px;
  align-items: center;
}

.hero-duplo__texto h1 {
  font-size: clamp(19px, 3.4vw, 25px);
  line-height: 1.18;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

/* A descricao do topo e texto de SEO e de leitura ao mesmo tempo: e o primeiro
   paragrafo que o buscador ve e a primeira frase que a pessoa le. */
.hero-duplo__sub {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #DCE9F5;
  max-width: 58ch;
}

.hero-duplo__foto { margin: 0; }
.hero-duplo__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(3, 20, 38, .28);
}

@media (max-width: 900px) {
  .hero-duplo { padding: 22px 0 26px; }
  .hero-duplo__grade { grid-template-columns: 1fr; gap: 18px; }
  /* No celular a ordem segue a do HTML: titulo, descricao e so entao a foto.
     Quem chega de busca precisa ver primeiro que a pagina responde a pergunta
     dele; a foto confirma depois, ela nao apresenta. */
  .hero-duplo__foto img { aspect-ratio: 16 / 9; }
  .hero-duplo__sub { font-size: .94rem; }
}

/* ===========================================================================
   Grade de artigos do blog

   Cartao com foto em cima e texto embaixo, tres colunas no desktop e uma no
   celular. Segue o mesmo desenho da listagem de noticias, para o leitor nao
   precisar reaprender a interface ao trocar de secao.
   =========================================================================== */
.artigos-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 22px 0 30px;
}

.artigo-card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.artigo-card:hover {
  transform: translateY(-2px);
  border-color: var(--laranja-borda);
  box-shadow: 0 2px 10px rgba(6, 41, 74, .07);
}

.artigo-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--azul-bg);
}

.artigo-card__texto { padding: 14px 16px 18px; }

.artigo-card__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 6px;
}
.artigo-card__titulo a { color: var(--azul-profundo); text-decoration: none; }
.artigo-card:hover .artigo-card__titulo a { text-decoration: underline; }

.artigo-card__desc {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--cinza);
  margin: 0;
}

/* Secao sem nenhum artigo ainda. Melhor dizer isso do que deixar um vazio que
   parece pagina quebrada. */
.vazio-secao {
  padding: 26px 20px;
  background: var(--azul-bg);
  border: 1px dashed var(--azul-borda);
  border-radius: var(--raio);
  text-align: center;
  color: var(--cinza);
  font-size: .92rem;
  margin: 22px 0 30px;
}

@media (max-width: 1024px) { .artigos-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .artigos-grade { grid-template-columns: 1fr; } }

/* ===========================================================================
   Barra lateral do artigo, revisada

   O desenho anterior empilhava tres caixas de altura parecida, com muito ar
   dentro e pouco conteudo. Num silo novo, com poucos artigos, aquilo parecia
   pagina inacabada. Agora os blocos sao compactos, a categoria mostra quantos
   artigos tem, e bloco sem conteudo nao e emitido pelo gerador.
   =========================================================================== */
.blog-lateral { gap: 14px; }

.lateral__lista { list-style: none; margin: 0; padding: 0; }

/* Categoria com a contagem a direita. O numero e informacao util: diz se vale
   a pena clicar antes de a pessoa descobrir que a secao tem um artigo so. */
.lateral__lista--cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: .88rem;
  color: var(--azul-profundo);
  text-decoration: none;
  border-bottom: 1px solid var(--cinza-claro);
}
.lateral__lista--cats li:last-child a { border-bottom: 0; padding-bottom: 0; }
.lateral__lista--cats a:hover { color: var(--laranja-texto); }
.lateral__lista--cats a[aria-current="page"] {
  color: var(--laranja-texto);
  font-weight: 500;
}

.lateral__conta {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--raio-pill);
  background: var(--azul-bg);
  color: var(--azul);
  font-size: .72rem;
  font-weight: 500;
  text-align: center;
}

/* Lista de leituras: titulo inteiro, em duas ou tres linhas se precisar. Cortar
   com reticencias esconderia justamente o que faz a pessoa decidir clicar. */
.lateral__lista--links a {
  display: block;
  padding: 8px 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--azul-profundo);
  text-decoration: none;
  border-bottom: 1px solid var(--cinza-claro);
}
.lateral__lista--links li:last-child a { border-bottom: 0; padding-bottom: 0; }
.lateral__lista--links a:hover { text-decoration: underline; color: var(--laranja-texto); }

/* A chamada e o unico bloco que aparece sempre, entao ela carrega a cor. */
.lateral__cta {
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 100%);
  border-color: transparent;
}
.lateral__cta .lateral__titulo {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .22);
}
.lateral__cta p {
  color: #DCE9F5;
  font-size: .84rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.lateral__cta .btn { width: 100%; justify-content: center; }


/* Mapa incorporado.

   A medida vem do codigo que o Google entrega e e mantida como veio, a pedido:
   300 por 150 pixels. O CSS aqui nao mexe em largura nem altura, so arredonda a
   borda e cuida da legenda. */
.mapa { margin: 0 0 26px; }
.mapa iframe {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}
.mapa figcaption {
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--cinza);
}
.mapa figcaption a { color: var(--azul-medio); }