/* Tourism Brasil | folha de estilo compartilhada
 *
 * ESTRUTURA de componentes adaptada do template de Turismo Dourados
 * (D:\Projetos\Dourados_Turismo\site), a pedido do proprietário: topbar +
 * cabeçalho sticky, navegação em pílulas, hero com gradiente, cards com
 * elevação e rodapé escuro em três colunas com faixa final.
 *
 * A PALETA NÃO foi copiada. O arquivo 02 fixa as cores do Tourism Brasil, e
 * elas são as mesmas do logotipo oficial:
 *   #005EB8  azul     ~6,38:1 sobre branco — serve para texto comum
 *   #237E18  verde    ~5,16:1 sobre branco — serve para texto comum
 *   #00BCE4  ciano    ~2,25:1 sobre branco — NÃO serve para texto
 *
 * O ciano ocupa aqui o papel que o amarelo ocupa no modelo: acento sobre
 * fundo escuro, onde o contraste é alto, e nunca texto sobre branco.
 *
 * Sem framework, sem fonte de ícone, sem biblioteca de interface (arquivo 14).
 */

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

:root {
    /* Azuis — base institucional, derivados do #005EB8 da marca */
    --azul-profundo: #06345F;
    --azul:          #005EB8;
    --azul-medio:    #0A74D6;
    --azul-claro:    #5BA8E0;
    --azul-bg:       #EAF3FB;
    --azul-borda:    #CFE2F3;

    /* Verde — natureza, confirmação. Cor do "Brasil" no logotipo. */
    --verde:       #237E18;
    --verde-medio: #2E9A20;
    --verde-bg:    #EDF6EB;

    /* Ciano — acento da marca. Uso: fundo escuro, detalhe, borda, realce. */
    --ciano:       #00BCE4;
    --ciano-claro: #5FD8F2;
    --ciano-bg:    #E6F8FD;

    /* Neutros */
    --texto:       #12283D;
    --cinza:       #55677A;
    --cinza-claro: #F7FAFD;
    --branco:      #FFFFFF;

    /* Elevação */
    --sombra:      0 4px 20px rgba(6, 52, 95, .08);
    --sombra-card: 0 10px 35px rgba(6, 52, 95, .12);

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

    /* Tipografia. Pilha do sistema: o arquivo 14 pede fontes locais, e
       carregar de CDN externo criaria dependência de terceiro e questão de
       privacidade para o público europeu. Ver STATUS.md. */
    --fonte-titulo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-texto:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html { scroll-behavior: smooth; }

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

body {
    font-family: var(--fonte-texto);
    color: var(--texto);
    background: var(--branco);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    /* Títulos alemães são longos: quebra natural evita overflow (arquivo 08). */
    overflow-wrap: break-word;
}

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: 700;
    letter-spacing: -.015em;
    hyphens: auto;
}

/* Nenhum título termina com palavra solta na última linha. */
h1, h2, h3, h4, .secao-titulo, .hero h1, .card h3, .eyebrow { text-wrap: balance; }
p, .secao-sub, .hero__sub, .card p { text-wrap: pretty; }

/* Acessibilidade: foco sempre visível. Nunca remover sem substituir. */
:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sobre fundo escuro o foco azul sumiria: ali o ciano é quem marca. */
.topbar :focus-visible,
.hero :focus-visible,
.rodape :focus-visible,
.faixa-escura :focus-visible {
    outline-color: var(--ciano);
}

/* ---------- 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: 600;
}

.skip-link:focus { left: 0; color: #fff; }

/* ---------- layout ---------- */

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

.prose { max-width: var(--largura-texto); }

section { padding: 40px 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 26px; }

.eyebrow {
    display: inline-block;
    background: var(--ciano-bg);
    color: var(--azul-profundo);
    border: 1px solid var(--ciano);
    padding: 5px 14px;
    border-radius: var(--raio-pill);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.secao-titulo { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: 10px; }
.secao-sub { color: var(--cinza); font-size: .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: inherit;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .25s, color .25s, transform .25s, border-color .25s;
}

.btn-primario { background: var(--azul); color: #fff; box-shadow: 0 6px 18px rgba(0, 94, 184, .3); }
.btn-primario:hover { background: var(--azul-profundo); color: #fff; transform: translateY(-2px); }

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

/* Sobre o hero escuro: contorno ciano, texto branco. */
.btn-contorno { background: transparent; color: #fff; border-color: var(--ciano); }
.btn-contorno:hover { background: var(--ciano); color: var(--azul-profundo); }

/* ---------- topbar + cabeçalho ---------- */

/* Sticky em vez de fixed: o bloco ocupa espaço no fluxo, então o conteúdo
   começa sempre abaixo dele e nunca passa por trás. */
.topo-fixo { position: sticky; top: 0; z-index: 100; }

.topbar {
    background: var(--azul-profundo);
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .3px;
}

.topbar strong { color: var(--ciano); font-weight: 600; }

.cabecalho {
    position: relative;   /* referência do menu suspenso no celular */
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.cabecalho__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--largura-max);
    margin: 0 auto;
    /* Respiro vertical curto: a altura da barra passa a ser ditada pelo
       logotipo, nao pelo padding. */
    padding: 5px 24px;
}

.logo { display: flex; align-items: center; flex: 0 0 auto; }
/* Altura do logotipo: a marca e a ancora visual do cabecalho, entao ela manda
   na altura da barra. O arquivo de origem tem 420px de largura, o que cobre
   tela retina nesta altura sem ficar borrado. */
.logo img { display: block; width: auto; height: 64px; }

.cabecalho__spacer { flex: 1; }

/* ---------- navegação ---------- */

/* Itens próximos, cada um com contorno de botão e canto pequeno. O contorno
   fica sempre visível — botão que só ganha borda no hover muda de tamanho e
   empurra os vizinhos. */
.nav { display: flex; gap: 3px; align-items: center; }

.nav a {
    display: block;
    color: var(--azul-profundo);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--azul-borda);
    transition: border-color .2s, color .2s, background .2s;
}

.nav a:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-bg); }

.nav a[aria-current="true"] {
    color: var(--azul);
    background: var(--azul-bg);
    border-color: var(--azul);
}

.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;
    flex: 0 0 auto;
}

.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; }

/* ---------- seletor de idioma ---------- */

.lang { position: relative; flex: 0 0 auto; }

/* Botao compacto: codigo do idioma e uma seta. O nome por extenso vive no
   rotulo acessivel, nao na largura do cabecalho. */
.lang__botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    background: #fff;
    border: 1px solid var(--azul-borda);
    border-radius: 6px;
    padding: 5px 9px;
    font: inherit;
    cursor: pointer;
    color: var(--azul-profundo);
    transition: border-color .2s, background .2s;
}

.lang__botao:hover { border-color: var(--azul); background: var(--azul-bg); }
.lang__botao[aria-expanded="true"] { border-color: var(--azul); background: var(--azul-bg); }

.lang__seta { width: 13px; height: 13px; color: var(--cinza); flex-shrink: 0; }
.lang__botao[aria-expanded="true"] .lang__seta { transform: rotate(180deg); }

/* Selo do codigo. Fundo ciano claro com texto azul escuro: o ciano puro daria
   2,25:1 como texto e nao serve (arquivo 08). */
.lang__codigo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--ciano-bg);
    border: 1px solid var(--ciano);
    color: var(--azul-profundo);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.6;
    flex-shrink: 0;
}

.lang__lista {
    list-style: none;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--azul-borda);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--sombra-card);
}

.js .lang__lista {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    /* Largura pelo conteudo, nao por um minimo arbitrario: 220px deixava uma
       faixa vazia do lado dos nomes, que sao curtos. */
    width: max-content;
    min-width: 0;
    max-width: 15rem;
    z-index: 60;
}

.js .lang__lista[hidden] { display: none; }

.lang__lista a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 5px;
    font-size: 12.5px;
    white-space: nowrap;
    color: var(--texto);
}

.lang__lista a:hover { background: var(--azul-bg); color: var(--azul); }

.lang__lista a[aria-current="true"] {
    background: var(--azul-bg);
    color: var(--azul);
    font-weight: 700;
}

.lang__lista a[aria-current="true"] .lang__codigo {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
}

.lang__nome { flex: 1; }

/* Idioma sem traducao: nao e link de artigo, e aviso com link para a home.
   O arquivo 09 proibe apresentar a home como se fosse a traducao da pagina. */
.lang__ausente {
    border-top: 1px solid var(--azul-borda);
    margin-top: 6px;
    padding: 7px 7px 2px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--cinza);
}

.lang__ausente p { margin-bottom: 7px; }
.lang__ausente a { display: inline; padding: 0; font-weight: 600; text-decoration: underline; }

/* ---------- hero em duas colunas ---------- */

.hero-duplo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    padding: 26px 0 10px;
}

@media (min-width: 860px) {
    .hero-duplo { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; }
}

.hero-duplo h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 12px; }
.hero-duplo .resumo { font-size: 1.05rem; color: var(--cinza); margin-bottom: 14px; }
.hero-duplo__figura { margin: 0; }

.hero-duplo__figura img {
    width: 100%;
    /* Formato unico para toda foto de destaque: sem isto cada arquivo entra
       com a propria altura e a imagem cresce alem do texto ao lado. */
    aspect-ratio: 16 / 9;
    max-height: 240px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.hero-duplo__figura figcaption { margin-top: 8px; font-size: .8rem; }

/* ---------- grade de passeios: dois cards por linha ---------- */

.grade-passeios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 22px 0 30px;
}

@media (min-width: 700px) {
    .grade-passeios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

/* Todas as celulas com a mesma altura, e dentro delas a foto sempre com a
   mesma proporcao. Sem isto, um texto mais longo esticava o card vizinho e a
   grade saia desalinhada. */
.grade-passeios { grid-auto-rows: 1fr; }

.passeio {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    overflow: hidden;
}

/* Seletor com .artigo-corpo de proposito: sem ele, a regra generica de
   `.artigo-corpo figure` vence por especificidade e devolve a margem, os
   cantos arredondados, a sombra e o 16:9 da figura solta do corpo — que foi
   como a foto acabou encolhida e flutuando dentro do card. */
.artigo-corpo .passeio__figura {
    margin: 0;
    max-width: none;
}

.artigo-corpo .passeio__figura img {
    width: 100%;
    /* Formato unico: sem isto cada foto entrava com a altura do arquivo e a
       grade virava uma escada de cards desalinhados. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    /* O card ja tem raio e sombra; repetir nos dois cria a borda dupla. */
    border-radius: 0;
    box-shadow: none;
}

.passeio__corpo {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.artigo-corpo .passeio__corpo h2 {
    font-size: 1.12rem;
    margin: 0;
    scroll-margin-top: 100px;
}

.artigo-corpo .passeio__corpo p { font-size: .92rem; margin: 0; }

/* ---------- bloco de duas colunas: texto e foto ---------- */

/* Acento no meio de uma pagina de texto longo: coluna de texto a esquerda,
   foto a direita (ou o inverso, com --invertido). Nao serve para listar
   atrativos — para isso existe a grade de cards acima, que mantem todos do
   mesmo tamanho. Aqui a pagina continua sendo texto corrido; o bloco so
   quebra o ritmo onde ha uma imagem que vale a interrupcao. */
.bloco-foto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    /* Alinhado pelo topo: centralizado, um texto curto ao lado de uma foto
       alta abria um vao grande acima e abaixo. */
    align-items: start;
    margin: 26px 0;
}

@media (min-width: 760px) {
    /* Texto com um pouco mais de largura que a foto: em colunas iguais a
       imagem dominava a linha e o texto virava legenda. */
    .bloco-foto { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; }
    .bloco-foto--invertido .bloco-foto__texto { order: 2; }
}

/* Logo abaixo do titulo da secao, para o bloco nao descolar do proprio titulo. */
.artigo-corpo h2 + .bloco-foto { margin-top: 10px; }

.bloco-foto__texto h3 { margin: 0 0 8px; font-size: 1.1rem; }
.bloco-foto__texto p { margin-bottom: 10px; }

/* Com .artigo-corpo pela mesma razao dos cards: a regra generica de
   `.artigo-corpo figure` vence por especificidade e devolve margem e 16:9. */
.artigo-corpo .bloco-foto__figura {
    margin: 0;
    max-width: none;
}

.artigo-corpo .bloco-foto__figura img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    display: block;
}

.artigo-corpo .bloco-foto__figura figcaption { margin-top: 8px; }

/* Vaga de foto: enquanto a imagem nao chega, o lugar dela fica visivel e
   identificado. Um espaco que some nao avisa ninguem do que falta. */
.foto-vaga {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    border: 2px dashed var(--azul-borda, #b9d6ee);
    border-radius: 10px;
    background:
        repeating-linear-gradient(45deg,
            rgba(0, 94, 184, .04) 0 10px,
            transparent 10px 20px);
    color: var(--azul);
    text-align: center;
    padding: 12px;
}

.foto-vaga__etiqueta { font-weight: 700; font-size: .82rem; letter-spacing: .3px; }

.foto-vaga__slot {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .74rem;
    color: var(--texto);
    background: #fff;
    border: 1px solid var(--azul-borda, #b9d6ee);
    border-radius: 4px;
    padding: 2px 8px;
    word-break: break-all;
}

.foto-vaga__medida { font-size: .68rem; color: var(--cinza); }

/* ---------- blog: grade de cards e barra lateral ---------- */

/* Container mais largo para as paginas com barra lateral: com a largura
   normal, o artigo e a lateral juntos ficariam apertados demais. */


.grade-blog {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin: 26px 0 8px;
}

@media (min-width: 700px) {
    .grade-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tres colunas no desktop, que e o pedido para a abertura do blog. */
@media (min-width: 1024px) {
    .grade-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grade-blog--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.grade-blog { grid-auto-rows: 1fr; }

.secao-titulo--esquerda { text-align: left; margin: 34px 0 4px; }

/* Cabecalho do blog: curto, para a grade comecar acima da dobra. */
.blog-topo { padding: 24px 0 4px; }

/* Rótulo da seção, discreto: marca a hierarquia sem virar bloco de texto. */
.blog-secao {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cinza);
    margin: 22px 0 2px;
}
.blog-topo h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 8px; }
.blog-topo .resumo { font-size: 1.02rem; color: var(--cinza); max-width: 78ch; margin: 0; }

/* Texto de apresentacao, abaixo dos posts e visivelmente separado deles. */
.blog-sobre {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--azul-borda);
}

/* ---------- artigo com barra lateral ---------- */

.blog-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: start;
}

@media (min-width: 1024px) {
    .blog-grade { grid-template-columns: minmax(0, 1fr) 230px; gap: 40px; }
}

/* O cabecalho do artigo passou para dentro da coluna de conteudo, para nao
   passar por cima da barra de categorias. Duas consequencias a corrigir:
   o topo tem de nascer na mesma linha da barra, e a regra generica
   `.artigo-corpo figure img` reescreveria a foto de destaque com 16:9 e
   sombra, que nao e o formato do destaque. */
.artigo-corpo > .hero-duplo { padding-top: 0; }

.artigo-corpo .hero-duplo__figura { margin: 0; max-width: none; }

.artigo-corpo .hero-duplo__figura img {
    aspect-ratio: 16 / 9;
    max-height: 240px;
    object-fit: cover;
    box-shadow: none;
    border-radius: 10px;
}

/* O bloco do tempo tambem desceu para dentro da coluna: deixa de ser faixa
   de ponta a ponta e passa a caixa, com borda fechada. */
.artigo-corpo > .cidade-bloco {
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    padding: 22px;
    margin: 6px 0 24px;
}

.artigo-corpo > .cidade-bloco > .container { width: 100%; padding: 0; }

.blog-lateral {
    background: #fff;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    padding: 16px 18px 18px;
}

/* Fixa ao rolar, no desktop. O topo desconta a barra de navegacao. */
/* Altura do topo fixo: faixa (~24px) + cabecalho (logotipo 64px + 10px de
   padding). A barra lateral encosta logo abaixo dele. */
:root { --altura-topo: 98px; }

@media (min-width: 1024px) {
    .blog-lateral {
        position: sticky;
        top: calc(var(--altura-topo) + 12px);
        max-height: calc(100vh - var(--altura-topo) - 24px);
        overflow-y: auto;
    }
}

.blog-lateral__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ciano-bg);
}

.blog-lateral__titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--azul-profundo);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}

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

.blog-lateral__lista li + li { border-top: 1px solid var(--cinza-claro); }

.blog-lateral__lista a {
    display: block;
    padding: 10px 2px;
    font-size: .92rem;
    color: var(--texto);
    transition: color .2s, padding-left .2s;
}

.blog-lateral__lista a:hover {
    color: var(--azul);
    padding-left: 6px;
}

.blog-lateral__lista a[aria-current="page"] {
    color: var(--azul);
    font-weight: 700;
}

/* ---------- painel lateral no telemovel ---------- */

/* No desktop nao existe botao nem fundo: a barra ja esta visivel. */
.lateral-abrir,
.lateral-fechar,
.lateral-fundo { display: none; }

@media (max-width: 1023px) {
    .lateral-abrir {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 4px 0 18px;
        padding: 10px 18px;
        background: #fff;
        border: 1px solid var(--azul-borda);
        border-radius: var(--raio-pill, 999px);
        box-shadow: var(--sombra-card);
        font: inherit;
        font-size: .88rem;
        font-weight: 700;
        color: var(--azul-profundo);
        cursor: pointer;
    }

    .lateral-abrir__icone {
        width: 16px;
        height: 2px;
        background: currentColor;
        box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
    }

    .lateral-fechar {
        display: block;
        background: none;
        border: 0;
        font-size: 1.7rem;
        line-height: 1;
        color: var(--cinza);
        cursor: pointer;
        padding: 0 4px;
    }

    /* Sai da tela pela direita e volta ao abrir. */
    .blog-lateral {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 86vw);
        z-index: 60;
        border-radius: 0;
        border: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .28s ease;
    }

    .blog-lateral[data-aberta] { transform: translateX(0); }

    .lateral-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(6, 52, 95, .45);
    }

    /* Enquanto o painel esta aberto, o fundo nao rola. */
    body[data-lateral-aberta] { overflow: hidden; }
}

/* Sem JavaScript o painel nao abre, entao ele nao sai da tela. */
@media (max-width: 1023px) {
    html:not(.js) .blog-lateral { position: static; transform: none; width: auto; border: 1px solid var(--azul-borda); border-radius: var(--raio); }
    html:not(.js) .lateral-abrir { display: none; }
}

/* ---------- breadcrumb ---------- */

.breadcrumbs {
    /* Encostado na barra de menu e em corpo 8: e trilha de orientacao, nao
       linha de leitura. */
    padding: 5px 24px 0;
    font-size: 10.5px;
    color: var(--cinza);
    max-width: var(--largura-max);
    margin: 0 auto;
}

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs a { color: var(--cinza); }
.breadcrumbs a:hover { color: var(--azul); }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--azul-borda); }
.breadcrumbs [aria-current="page"] { color: var(--texto); }

/* ---------- hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    padding: 62px 24px 72px;
    background:
        radial-gradient(1100px 420px at 78% -10%, rgba(0, 188, 228, .34), transparent 62%),
        linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul) 52%, var(--verde) 145%);
}

/* Silhueta de montanha, desenhada em CSS: sem baixar imagem, sem foto de um
   lugar servindo de ilustração para outro (arquivo 08). */
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 64px;
    background: #fff;
    clip-path: polygon(0 100%, 0 62%, 12% 40%, 22% 58%, 34% 26%, 46% 54%, 58% 34%, 72% 60%, 86% 38%, 100% 58%, 100% 100%);
    opacity: .1;
    pointer-events: none;
}

.hero__conteudo { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }

.hero h1 { color: #fff; font-size: clamp(1.75rem, 4.2vw, 2.9rem); margin-bottom: 14px; }

.hero__sub {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(.98rem, 1.6vw, 1.12rem);
    max-width: 62ch;
    margin: 0 auto 26px;
}

.hero__busca { max-width: 34rem; margin: 0 auto; }

/* ---------- busca ---------- */

.busca { display: flex; gap: 8px; }

.busca input[type="search"] {
    flex: 1;
    min-width: 0;
    min-height: var(--toque-min);
    padding: 11px 18px;
    border: 1.5px solid var(--azul-borda);
    border-radius: var(--raio-pill);
    font: inherit;
    font-size: 15px;
    color: var(--texto);
    background: #fff;
}

.busca input[type="search"]::placeholder { color: #8697A8; }

/* ---------- 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); }

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    overflow: hidden;
    transition: transform .3s, border-color .3s;
    /* Base do ::after que estica o link do titulo sobre o card inteiro. */
    position: relative;
}

.card:hover { transform: translateY(-4px); border-color: var(--azul-medio); }

.card__corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }

.card__tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--verde-bg);
    color: var(--verde);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--raio-pill);
}

.card h3 { font-size: 1.02rem; margin: 0; }
.card h3 a { color: var(--azul-profundo); }
.card h3 a:hover { color: var(--azul); }
.card p { font-size: .88rem; color: var(--cinza); line-height: 1.6; margin: 0; }

/* O card inteiro clica com UM link so. O ::after do link do titulo cobre o
   card, entao a foto e a chamada continuam clicaveis sem precisarem ser
   ancoras proprias — antes eram, e o mesmo destino aparecia tres vezes no
   HTML com texto generico numa delas. */
.card__titulo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card__link {
    margin-top: auto;
    padding-top: 6px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--azul);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card__link::after { content: "→"; transition: transform .2s; }
/* A chamada virou span e perdeu o a:hover global. A cor de hover volta pelo
   card, para o efeito visual ficar igual ao de antes. */
.card:hover .card__link { color: var(--azul-medio); }
.card:hover .card__link::after { transform: translateX(4px); }

/* Area da foto do card. Nao e mais um link: a sobreposicao do link do titulo
   cobre esta area, entao o visitante continua clicando na imagem e chegando
   na pagina, sem uma segunda ancora no HTML. */
.card__midia {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--azul-bg);
    overflow: hidden;
}

.card__midia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.card:hover .card__midia img { transform: scale(1.04); }

/* Sem fotografia propria, a marca ocupa o lugar — nunca foto de outro
   assunto para preencher (arquivo 08). */
.card__figura {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--azul-medio), var(--azul-profundo));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: center;
    padding: 12px;
}

/* ---------- faixa escura com pílulas ---------- */

.faixa-escura {
    background: linear-gradient(135deg, #052742 0%, var(--azul-profundo) 55%, #0A5FA3 100%);
    color: #fff;
}

.faixa-escura .secao-titulo { color: #fff; }
.faixa-escura .secao-sub { color: rgba(255, 255, 255, .9); }
.faixa-escura .eyebrow { background: rgba(0, 188, 228, .16); color: var(--ciano-claro); border-color: rgba(0, 188, 228, .5); }

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

.pill-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    color: #fff;
    font-size: .87rem;
    font-weight: 500;
    transition: background .25s, transform .25s, border-color .25s;
}

.pill-item:hover {
    background: rgba(255, 255, 255, .16);
    border-color: var(--ciano);
    color: #fff;
    transform: translateY(-2px);
}

.pill-marca {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--ciano);
    color: var(--azul-profundo);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 12px;
}

/* ---------- lista de links ---------- */

.link-list { list-style: none; display: grid; gap: 8px; }

.link-list a {
    display: block;
    padding: 13px 18px;
    border: 1px solid var(--azul-borda);
    border-radius: 10px;
    color: var(--texto);
    font-weight: 500;
    background: #fff;
    transition: border-color .2s, color .2s, background .2s;
}

.link-list a:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-bg); }

/* ---------- artigo ---------- */

.artigo-cabecalho { padding: 26px 0 6px; }
.artigo-cabecalho h1 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); margin-bottom: 12px; }
.artigo-cabecalho .resumo { font-size: 1.05rem; color: var(--cinza); max-width: 62ch; }

/* Autoria e data agora fecham o artigo, em corpo 8: e registro de
   procedencia, nao chamada de leitura. */
.artigo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 26px;
    padding-top: 12px;
    border-top: 1px solid var(--azul-borda);
    font-size: 10.5px;
    color: var(--cinza);
}

.artigo-corpo { font-size: 1rem; padding-bottom: 12px; }
.artigo-corpo h2 { font-size: 1.35rem; margin: 30px 0 10px; scroll-margin-top: 100px; }
.artigo-corpo h3 { font-size: 1.1rem; margin: 22px 0 8px; scroll-margin-top: 100px; }
.artigo-corpo p { margin-bottom: 14px; }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 16px 22px; }
.artigo-corpo li { margin-bottom: 6px; }

.artigo-corpo figure {
    margin: 20px 0 24px;
}
.artigo-corpo figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    display: block;
    object-fit: cover;
}
.artigo-corpo figcaption {
    font-size: 0.85rem;
    color: var(--cinza);
    margin-top: 8px;
    line-height: 1.4;
}

/* ---------- crédito de foto ----------
 * Hoje a atribuição vai no fim da meta description, entre parênteses, e esta
 * linha não é impressa (ver templates/components/credito-foto.php).
 *
 * Se for religada, o proprietário definiu o formato: 6px, cinza, colada na
 * foto. É o menor corpo que ele aceita e a regra existe para que a linha não
 * dispute nada com a imagem. */
.credito-foto {
    margin: 1px 0 0;
    font-size: 6px;
    line-height: 1.2;
    color: var(--cinza);
    letter-spacing: .01em;
}
.hero-duplo__figura .credito-foto,
.bloco-foto__figura .credito-foto {
    text-align: right;
}
.passeio__figura .credito-foto {
    padding: 0 2px;
}

/* ---------- hero da página ---------- */
.artigo-hero {
    margin: 16px 0 28px;
}
.artigo-hero__figura {
    margin: 0;
    width: 100%;
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-card);
    background: var(--azul-bg);
}
.artigo-hero__figura img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}
.artigo-hero__figura figcaption {
    font-size: 0.82rem;
    color: var(--cinza);
    padding: 8px 14px;
    text-align: right;
    background: #fff;
    border-top: 1px solid var(--azul-borda);
}

.toc {
    background: var(--cinza-claro);
    border: 1px solid var(--azul-borda);
    border-left: 4px solid var(--ciano);
    border-radius: var(--raio);
    padding: 16px 22px;
    margin: 0 0 26px;
    max-width: var(--largura-texto);
}

.toc h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px; color: var(--cinza); }
.toc ol { margin: 0 0 0 18px; font-size: .9rem; }
.toc li { margin-bottom: 4px; }

/* Tabela rola no celular, com indicação visível (arquivo 08). */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    margin-bottom: 20px;
    max-width: 100%;
}

.table-wrap table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.table-wrap th, .table-wrap td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--azul-borda); }
.table-wrap th { background: var(--cinza-claro); font-weight: 700; color: var(--azul-profundo); }
.table-wrap tr:last-child td { border-bottom: none; }

/* ---------- avisos ---------- */

.aviso {
    border: 1px solid var(--azul-borda);
    border-left: 4px solid var(--azul);
    background: var(--cinza-claro);
    border-radius: var(--raio);
    padding: 16px 20px;
    margin-bottom: 20px;
    font-size: .9rem;
    max-width: var(--largura-texto);
}

.aviso--natureza { border-left-color: var(--verde); background: var(--verde-bg); }
.aviso--pendente { border-left-color: #D9A310; background: #FDF6E3; }
.aviso__titulo { font-weight: 700; margin-bottom: 4px; color: var(--azul-profundo); }
.aviso p:last-child { margin-bottom: 0; }

/* Prévia privada: precisa ser impossível de confundir com página publicada. */
.preview-banner {
    background: #FDF6E3;
    border-bottom: 2px solid #E6D9A8;
    padding: 10px 16px;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    color: #6B5A15;
}

/* ---------- etapas de roteiro ---------- */

.steps { list-style: none; display: grid; gap: 16px; }

.step {
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    padding: 22px 24px;
    background: #fff;
    box-shadow: var(--sombra);
    max-width: var(--largura-texto);
}

.step__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #fff;
    background: var(--azul);
    padding: 4px 12px;
    border-radius: var(--raio-pill);
    margin-bottom: 10px;
}

.step h2 { font-size: 1.1rem; margin: 0 0 6px; }
.step p { color: var(--cinza); font-size: .92rem; margin: 0; }

/* ---------- paginação ---------- */

.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.pagination .muted { font-size: .85rem; }

/* ---------- busca: resultados ---------- */

.results { list-style: none; display: grid; gap: 18px; max-width: var(--largura-texto); }
.result { border-bottom: 1px solid var(--azul-borda); padding-bottom: 18px; }
.result h2 { font-size: 1.08rem; margin: 0 0 3px; }
.result__path { font-size: .76rem; color: var(--verde); margin-bottom: 5px; }

/* ---------- estado vazio e erro ---------- */

.state { text-align: center; padding: 64px 24px 76px; max-width: 44rem; margin: 0 auto; }
.state h1 { margin-bottom: 12px; }
.state p { color: var(--cinza); margin-bottom: 24px; }

/* O numero e marca d'agua: diz o que houve sem competir com o titulo. */
.state__codigo {
    font-size: clamp(3.6rem, 12vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--azul-borda);
    margin: 0 0 4px;
}

.state__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Botao de segunda ordem: os atalhos nao podem disputar com o "voltar ao
   inicio", que e a saida principal. */
.btn-suave {
    background: var(--azul-bg);
    color: var(--azul-profundo);
    border: 1px solid var(--azul-borda);
}

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

/* ---------- rodapé ---------- */

/* Molde do site do aeroporto: faixa escura, baixa, com a marca na primeira
   coluna e tres listas curtas ao lado, fechada por uma linha fina com o
   copyright. Estreito de proposito — o rodape termina a pagina, nao e mais
   uma secao dela.

   O logotipo entra como esta, sem placa e sem variante: e o arquivo da
   marca e nao se mexe nele. O fundo e grafite azulado, e nao o azul da
   marca, justamente para o tracado azul e o ciano do logotipo se
   destacarem em vez de sumirem dentro da propria cor. */
.rodape {
    background: #0C1620;
    color: #A9B6C2;
    padding: 34px 0 14px;
    font-size: .82rem;
}

.rodape__grade {
    display: grid;
    /* Marca + as duas listas que o rodape realmente tem. Quatro
       colunas como no modelo deixariam uma vaga vazia. */
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px 34px;
    align-items: start;
}

.rodape__marca img { height: 40px; width: auto; margin-bottom: 8px; }

.rodape__marca p {
    font-size: .78rem;
    color: #8D9CAA;
    margin: 0;
    max-width: 34ch;
    line-height: 1.55;
}

.rodape__col h2 {
    color: #fff;
    font-size: .7rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 2px 0 8px;
}

.rodape__col ul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 0; }
.rodape__col li { line-height: 1.4; }
.rodape a { color: #A9B6C2; text-decoration: none; }
.rodape a:hover { color: var(--ciano-claro); text-decoration: underline; }

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .72rem;
    color: #7C8B99;
}

.rodape__base p { margin: 0; }

/* ---------- voltar ao topo ---------- */

.topo-float {
    position: fixed;
    bottom: 22px; right: 22px;
    z-index: 90;
    width: 46px; height: 46px;
    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(0, 94, 184, .4);
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: opacity .15s, visibility .15s, transform .15s, background .15s;
}

.topo-float.visivel { opacity: 1; visibility: visible; transform: translateY(0); }
.topo-float:hover { background: var(--azul-profundo); }
.topo-float:active { transform: scale(.92); }
.topo-float svg { width: 21px; height: 21px; }

/* ---------- utilitários ---------- */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.muted { color: var(--cinza); }
.stack > * + * { margin-top: 16px; }

/* ---------- responsivo ---------- */

@media (max-width: 1080px) {
    .nav a { font-size: 12.5px; padding: 8px 11px; }
    .cabecalho__inner { gap: 10px; }
}

@media (max-width: 960px) {
    /* Painel do celular.
     *
     * Sem JS o menu continua visível como lista de links: a navegação
     * essencial não depende de script (arquivo 14). O `.js` no <html> é o que
     * autoriza esconder, e ele só existe se o script rodou.
     *
     * O estado aberto é uma CLASSE, não o atributo `hidden`, porque no desktop
     * o mesmo <nav> precisa ficar sempre visível. */
    .js .nav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        padding: 10px 16px 18px;
        border-top: 1px solid var(--azul-borda);
        box-shadow: 0 18px 30px rgba(6, 52, 95, .16);
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .js .nav.aberto { display: flex; animation: nav-entra .18s ease-out; }

    @keyframes nav-entra {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Item de menu no toque: alvo alto, seta discreta à direita, separador
       fino entre linhas. */
    .nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--toque-min);
        padding: 13px 14px;
        font-size: 15px;
        border-radius: 8px;
        border: none;
        border-bottom: 1px solid var(--azul-borda);
    }

    .nav a::after {
        content: "›";
        color: var(--azul-claro);
        font-size: 20px;
        line-height: 1;
        margin-left: 12px;
    }

    .nav a:last-child { border-bottom: none; }
    .nav a:hover, .nav a:focus-visible { background: var(--azul-bg); }
    .nav a[aria-current="true"] { background: var(--azul-bg); }

    .js .menu-toggle { display: flex; }

    /* O botao ja e compacto por natureza; no celular so encolhe o respiro. */
    .lang__botao { padding: 6px 9px; gap: 4px; }

    .grade--4, .grade--3 { grid-template-columns: repeat(2, 1fr); }
    .pill-grid { grid-template-columns: repeat(2, 1fr); }
    .rodape__grade { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 720px) {
    section { padding: 28px 0; }
    .container { padding: 0 18px; }
    .cabecalho__inner { padding-left: 18px; padding-right: 18px; }
    .logo img { height: 50px; }
    .breadcrumbs { padding-left: 18px; padding-right: 18px; }

    .hero { padding: 40px 18px 56px; }
    .busca { flex-direction: column; }
    .busca .btn { width: 100%; }

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

    .rodape__grade { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
    .rodape__grade > :first-child { grid-column: 1 / -1; }
    .rodape__base { flex-direction: column; text-align: center; }

    .topo-float { bottom: 16px; right: 16px; }
}

/* ---------- faixa de regiões ---------- */

/* Abrangência nacional em uma linha só: nome da região e quantas UFs ela tem.
   Os números vêm do cadastro geográfico, não de texto escrito à mão. Não são
   links porque ainda não existe página de região — link para o nada seria
   404 (arquivo 08: apresentar abrangência sem despejar links). */
.faixa-regioes {
    background: var(--azul-bg);
    border-bottom: 1px solid var(--azul-borda);
    padding: 12px 0;
}

.regioes {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    margin: 0;
}

.regioes li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .84rem;
    color: var(--cinza);
}

.regioes strong { color: var(--azul-profundo); font-weight: 700; }

.regioes span {
    font-size: .72rem;
    background: #fff;
    border: 1px solid var(--azul-borda);
    border-radius: 999px;
    padding: 1px 8px;
}

/* ---------- lista de links em duas colunas ---------- */

.link-list--duas { grid-template-columns: 1fr 1fr; }

@media (max-width: 720px) {
    .link-list--duas { grid-template-columns: 1fr; }
}

/* ---------- bloco de critério editorial ---------- */

/* O arquivo 08 pede seleção editorial com critério visível e o 13 pede que a
   publicação se identifique. Este bloco diz como o conteúdo é feito e leva às
   normas editoriais. */
.criterio {
    max-width: 62ch;
    margin: 0 auto;
    text-align: center;
}

.criterio h2 { font-size: 1.2rem; margin-bottom: 8px; }
.criterio p { color: var(--cinza); margin-bottom: 18px; }

/* ---------- bloco da cidade: CTA + tempo ---------- */

/* Duas colunas na segunda dobra do guia de destino: chamada à esquerda,
   condições do tempo à direita. Some inteiro se a API falhar — bloco vazio no
   meio do texto é pior que bloco nenhum. */
.cidade-bloco {
    background: var(--azul-bg);
    border-top: 1px solid var(--azul-borda);
    border-bottom: 1px solid var(--azul-borda);
    padding: 28px 0;
}

.cidade-bloco[hidden] { display: none; }

.cidade-bloco__grade {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 28px;
    align-items: center;
}

.cidade-bloco__cta h2 { font-size: 1.35rem; margin: 0 0 8px; }
.cidade-bloco__cta p { color: var(--cinza); margin: 0 0 16px; max-width: 52ch; }

/* Marcador único da cidade: uma leitura do momento, não painel de previsão. */
.tempo {
    background: #fff;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 16px 20px;
    text-align: center;
}

.tempo__cidade {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 700;
    color: var(--azul);
    margin: 0 0 4px;
}

.tempo__valor {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--azul-profundo);
    margin: 0;
}

.tempo__desc { font-size: .88rem; color: var(--cinza); margin: 2px 0 12px; }

.tempo__detalhes {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 0 0 10px;
    padding-top: 10px;
    border-top: 1px solid var(--azul-borda);
}

.tempo__detalhes dt {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--cinza);
}

.tempo__detalhes dd { font-size: .9rem; font-weight: 700; margin: 2px 0 0; color: var(--texto); }

/* Nota contextual da coluna esquerda: leva a previsao completa da cidade
   dentro da frase, nao como botao concorrendo com a chamada principal. */
.cidade-bloco__nota {
    font-size: .9rem;
    color: var(--cinza-escuro, #4a5560);
    margin: 0 0 18px;
    line-height: 1.6;
}

.cidade-bloco__nota a { font-weight: 600; }

.tempo__fonte { font-size: .64rem; color: var(--cinza); margin: 0; }

/* Enquanto carrega, os números ficam apagados em vez de piscar. */
.tempo[data-carregando] .tempo__valor,
.tempo[data-carregando] .tempo__detalhes dd { opacity: .35; }

@media (max-width: 720px) {
    .cidade-bloco__grade { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- loja de experiências (programa de afiliados) ----------
 * Cartão com foto, título, nota, duração e botão. Imagem, título e botão
 * apontam para o mesmo link de afiliado, a mando do proprietário. */
.loja {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin: 24px 0 32px;
}
.loja__cartao {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
}
.loja__foto {
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--azul-bg);
}
.loja__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.loja__corpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    flex: 1;
}
.loja__titulo {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}
.loja__titulo a {
    color: var(--texto);
    text-decoration: none;
}
.loja__titulo a:hover,
.loja__titulo a:focus-visible {
    text-decoration: underline;
}
.loja__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    color: var(--cinza);
}
.loja__nota {
    font-weight: 700;
    color: var(--texto);
}
.loja__nota::before {
    content: "\2605";
    color: var(--ciano);
    margin-right: 4px;
}
.loja__flag {
    margin: 0;
    font-size: .82rem;
    color: var(--verde);
}
.loja__rodape {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--azul-borda);
}
.loja__preco {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.loja__preco span {
    font-size: .75rem;
    color: var(--cinza);
}
.loja__preco strong {
    font-size: 1.15rem;
    color: var(--texto);
}
.loja__botao {
    display: inline-block;
    padding: 10px 18px;
    min-height: var(--toque-min);
    line-height: 24px;
    border-radius: var(--raio-pill);
    background: var(--azul);
    color: var(--branco);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}
.loja__botao:hover,
.loja__botao:focus-visible {
    background: var(--azul-profundo);
}
@media (max-width: 480px) {
    .loja { grid-template-columns: 1fr; }
}

/* ---------- chamada para a loja ---------- */
.cta-loja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--azul-bg);
    border: 1px solid var(--azul-borda);
    border-left: 4px solid var(--azul);
    border-radius: var(--raio);
}
.cta-loja__texto { flex: 1 1 280px; }
.cta-loja__texto h3 { margin: 0 0 4px; font-size: 1.05rem; }
.cta-loja__texto p { margin: 0; color: var(--cinza); font-size: .92rem; }
.cta-loja__botao {
    display: inline-block;
    padding: 12px 24px;
    min-height: var(--toque-min);
    line-height: 22px;
    border-radius: var(--raio-pill);
    background: var(--azul);
    color: var(--branco);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cta-loja__botao:hover,
.cta-loja__botao:focus-visible { background: var(--azul-profundo); color: var(--branco); }

/* Cabeçalho sem foto: uma coluna só, para páginas que por decisão não levam
 * imagem de destaque (a loja, por exemplo). */
.hero-duplo--simples { grid-template-columns: 1fr; }

/* Filtro de estados da loja */
.blog-lateral__conta {
    float: right;
    font-size: .8rem;
    color: var(--cinza);
    font-variant-numeric: tabular-nums;
}
.blog-lateral__lista a.esta-ativo {
    font-weight: 700;
    color: var(--azul-profundo);
}
.loja__vazio {
    margin: 0 0 32px;
    padding: 16px 20px;
    background: var(--cinza-claro);
    border-radius: var(--raio);
    color: var(--cinza);
}
.artigo-corpo--loja > .hero-duplo { margin-bottom: 8px; }

/* ---------- barra lateral da loja ----------
 * Diferente da do blog de propósito, a mando do proprietário: a lista de
 * estados é longa e cabe inteira na coluna, então ela desce com a página em
 * vez de virar uma caixinha com rolagem própria dentro da tela. */
#loja-lateral {
    padding: 14px 16px 16px;
}

@media (min-width: 1024px) {
    #loja-lateral {
        position: sticky;
        top: calc(var(--altura-topo) + 12px);
        /* Sem teto de altura e sem rolagem interna: a barra acompanha a
           página até o fim em vez de rolar por dentro. */
        max-height: none;
        overflow: visible;
    }
}

#loja-lateral .blog-lateral__topo {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

#loja-lateral .blog-lateral__lista a {
    padding: 5px 2px;
    font-size: .88rem;
    line-height: 1.35;
}

/* ---------- ajustes da vitrine ----------
 * Quatro colunas no desktop e duas no celular, a mando do proprietário. */
.loja {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1100px) { .loja { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .loja { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .loja { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* O cartão declara display:flex, e qualquer display de autor vence o
 * [hidden] do navegador — era por isso que o filtro de estado marcava os
 * cartões como ocultos e eles continuavam na tela. */
.loja__cartao[hidden] { display: none !important; }

/* Contagem de experiências: o proprietário pediu maior e com cara de botão. */
.loja__avaliacoes {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio-pill);
    background: var(--azul-bg);
    color: var(--azul-profundo);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
}
@media (max-width: 480px) {
    .loja__titulo { font-size: .95rem; }
    .loja__corpo { padding: 12px 12px 14px; }
    .loja__rodape { flex-direction: column; align-items: stretch; gap: 8px; }
    .loja__botao { text-align: center; }
}

/* Três colunas no desktop, a mando do proprietário. */
.loja { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .loja { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .loja { grid-template-columns: repeat(2, 1fr); } }

/* "A partir de" quebrava em três linhas dentro do cartão estreito. */
.loja__preco span { white-space: nowrap; }
.loja__rodape { gap: 10px; }

/* ---------- cartão da loja: espaçamento mais curto ----------
 * O corpo do cartão vinha com padding e gap herdados do artigo, o que abria
 * um vão grande entre a foto e o título. Aqui o cartão é uma peça compacta:
 * a informação toda cabe num relance, sem rolagem dentro dele. */
.loja__corpo {
    gap: 6px;
    padding: 10px 14px 12px;
}
.loja__titulo {
    font-size: .98rem;
    line-height: 1.3;
}
.loja__meta { gap: 6px; }
.loja__avaliacoes { padding: 2px 8px; }
.loja__flag { font-size: .8rem; }
.loja__rodape {
    padding-top: 8px;
    gap: 8px;
}
.loja__preco strong { font-size: 1.05rem; }
.loja__botao {
    padding: 8px 16px;
    min-height: 38px;
    line-height: 20px;
}

/* ---------- cartão da loja dentro do corpo do artigo ----------
 * `.artigo-corpo h2` traz `margin: 30px 0 10px` e vence `.loja__titulo` por
 * especificidade: era daí o vão entre a foto e o título do cartão. Estas
 * regras têm a mesma força e zeram a margem só dentro do cartão. */
.artigo-corpo .loja__titulo,
.artigo-corpo .loja__meta,
.artigo-corpo .loja__flag,
.artigo-corpo .loja__preco {
    margin: 0;
}

.artigo-corpo .loja__titulo {
    font-size: .98rem;
    line-height: 1.3;
    scroll-margin-top: 0;
}

/* A grade também não precisa do respiro de bloco de artigo. */
.artigo-corpo .loja { margin-top: 4px; }

/* Chamada para fora do portal: mesma caixa, borda em verde para separar do
 * que leva à loja. */
.cta-loja--externo { border-left-color: var(--verde); }
.cta-loja--externo .cta-loja__botao { background: var(--verde); }
.cta-loja--externo .cta-loja__botao:hover,
.cta-loja--externo .cta-loja__botao:focus-visible { background: #1B6312; }