/* Blog Onyx Viagens — mesmos tokens da landing (onyx-viagens-landing-v2.html) */
:root{
  --azul-onyx: #082D4A;
  --azul-onyx-2: #0F3E63;
  --azul-viagem: #00AEEF;
  --cinza-claro: #EBEEF4;
  --cinza: #5A6270;
  --champagne: #D4B87F;
  --champagne-soft: #E8D9B8;
  --white: #FFFFFF;
  --cyan: #5FE1FF;
  --font: 'Montserrat', sans-serif;
  --container: 1180px;
  --leitura: 720px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font); color: var(--azul-onyx); background: var(--white);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.sprite{ display:none; }
.container{ max-width: var(--container); margin:0 auto; padding:0 32px; }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font); font-weight:600; font-size:15.5px;
  padding: 15px 26px; border-radius:4px; white-space:nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary{ background: var(--azul-viagem); color: var(--azul-onyx); }
.btn-primary:hover{ box-shadow: 0 10px 28px rgba(0,174,239,.4); transform: translateY(-1px); }
.btn-champagne{ background: var(--champagne); color: var(--azul-onyx); }
.btn-champagne:hover{ box-shadow: 0 10px 28px rgba(212,184,127,.45); transform: translateY(-1px); }
.wa-icon{ width:17px; height:17px; flex-shrink:0; }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:40;
  background: rgba(8,45,74,.97); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(212,184,127,.18);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:var(--container); margin:0 auto; }
.brand img{ height:48px; width:auto; }
.nav-links{ display:flex; gap:34px; color: rgba(255,255,255,.8); font-size:14.5px; font-weight:500; }
.nav-links a:hover, .nav-links a.ativo{ color: var(--white); }
.nav-links a.ativo{ border-bottom: 1.5px solid var(--azul-viagem); }
.nav .btn-primary{ padding:10px 20px; font-size:13.5px; }
@media (max-width: 860px){ .nav-links{ display:none; } }
@media (max-width: 480px){
  .nav{ padding:12px 18px; }
  .brand img{ height:36px; }
  .nav .btn-primary{ padding:8px 12px; font-size:12px; gap:6px; }
}

/* =====================================================
   CAPA DO POST — texto sobre a foto, igual à home
   -----------------------------------------------------
   COMPUTADOR: foto inteira ao fundo, escurecido NA DIAGONAL (não de baixo
   para cima). O texto fica numa coluna escura à esquerda e a foto segue
   limpa à direita — é isso que faz funcionar com quase qualquer foto.
   CELULAR: não cabe coluna lateral, então a tag e o título ficam sobre a
   parte de baixo da foto e o resumo/data/botão descem para a faixa azul.

   Dois ajustes por post, quando a foto pedir:
     <section class="post-hero capa-direita">   → espelha: texto à direita
                                                  (foto com assunto à esquerda)
     style="--capa-foco: 70% 50%"               → desloca o enquadramento
   Saída de emergência, se nenhuma das duas resolver: class="post-hero foto-acima"
   ===================================================== */
.post-hero{
  --capa-foco: center;
  display:grid; grid-template-areas:"capa"; min-height:560px;
  color:var(--white); background: var(--azul-onyx); overflow:hidden;
}
.post-hero img{ grid-area:capa; width:100%; height:100%; object-fit:cover; object-position: var(--capa-foco); }
.post-hero::after{
  content:''; grid-area:capa; z-index:1;   /* a foto tem transform (parallax) e subiria por cima */
  background: linear-gradient(100deg,
    rgba(8,45,74,.96) 0%, rgba(8,45,74,.93) 38%, rgba(8,45,74,.82) 52%,
    rgba(8,45,74,.34) 73%, rgba(8,45,74,.05) 100%);
}
.post-hero.capa-direita::after{
  background: linear-gradient(260deg,
    rgba(8,45,74,.96) 0%, rgba(8,45,74,.93) 38%, rgba(8,45,74,.82) 52%,
    rgba(8,45,74,.34) 73%, rgba(8,45,74,.05) 100%);
}
.post-hero .container{ grid-area:capa; z-index:2; align-self:center; width:100%; min-width:0; padding-top:96px; padding-bottom:48px; }
.post-hero .capa-topo, .post-hero .capa-baixo{ max-width:620px; }
.post-hero.capa-direita .capa-topo, .post-hero.capa-direita .capa-baixo{ margin-left:auto; }
.breadcrumb{ font-size:13px; color: rgba(255,255,255,.88); margin-bottom:18px; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.breadcrumb a:hover{ color:var(--white); }
.tag{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--azul-onyx); background: var(--champagne); padding:5px 12px; border-radius:100px; margin-bottom:16px;
}
.post-hero h1{ font-size:44px; font-weight:800; line-height:1.12; letter-spacing:-.015em; margin-bottom:16px; text-shadow: 0 2px 12px rgba(0,0,0,.28); }
.post-hero .resumo{ font-size:18px; color: rgba(255,255,255,.88); max-width:56ch; margin-bottom:22px; }
.post-meta{ display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color: rgba(255,255,255,.88); margin-bottom:26px; text-shadow: 0 1px 3px rgba(0,0,0,.45); }

/* CELULAR: foto inteira em cima, SEM escurecido, e todo o texto no azul embaixo.
   Mudado em 19/10/2026 a pedido do Douglas, depois de um print do celular. A capa antiga
   punha o título sobre a foto e dava dois problemas:
     1. título de 3 linhas = faixa escura cobrindo quase toda a foto ("ficou muito preto");
     2. o parallax põe transform na foto, e ela escapava da própria linha do grid,
        aparecendo como uma tira de coqueiro em cima do resumo.
   Por isso aqui a foto perde o parallax e ganha linha própria. No computador não muda nada. */
@media (max-width: 860px){
  .post-hero{ grid-template-areas:"foto" "baixo"; grid-template-rows:auto auto; min-height:0; }
  .post-hero img{
    grid-area:foto; aspect-ratio:16/10; height:auto;
    transform:none !important;   /* sem parallax: era ele que vazava por cima do texto */
    /* a faixa do celular é bem mais larga que alta, então às vezes precisa de um
       enquadramento próprio: --capa-foco-cel na <section>. Sem ela, usa o do computador. */
    object-position: var(--capa-foco-cel, var(--capa-foco));
  }
  .post-hero::after{ display:none; }   /* nada de escurecido: a foto aparece como ela é */
  .post-hero .container{ grid-area:baixo; display:block; align-self:auto; padding:24px 22px 34px; }
  .post-hero .capa-topo, .post-hero .capa-baixo{
    grid-area:auto; max-width:none; padding:0; margin-left:0; background:none;
  }
  .post-hero .breadcrumb{ margin-bottom:12px; }
  .post-hero h1{ font-size:30px; margin-bottom:14px; text-shadow:none; }
  .post-hero .resumo{ font-size:15.5px; }
  .post-hero .post-meta{ text-shadow:none; }
}
@media (max-width: 420px){
  .post-hero h1{ font-size:26px; }
}

/* ---------- CORPO DO ARTIGO ---------- */
.artigo{ max-width: calc(var(--leitura) + 64px); margin:0 auto; padding:64px 32px 40px; }
.artigo > p, .artigo li{ font-size:17px; color:#1d3a52; }
.artigo > p{ margin-bottom:20px; }
.artigo h2{ font-size:29px; font-weight:700; line-height:1.2; letter-spacing:-.01em; margin:52px 0 16px; scroll-margin-top:90px; }
.artigo h3{ font-size:20px; font-weight:600; margin:30px 0 10px; }
.artigo strong{ color: var(--azul-onyx); }
.artigo ul.lista{ margin:0 0 22px; display:flex; flex-direction:column; gap:10px; }
.artigo ul.lista li{ padding-left:22px; position:relative; }
.artigo ul.lista li::before{ content:''; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background: var(--azul-viagem); }
.artigo a.link{ color:#0079a8; text-decoration:underline; text-underline-offset:3px; }

.indice{ background: var(--cinza-claro); border-left:3px solid var(--champagne); border-radius:6px; padding:22px 26px; margin-bottom:36px; }
.indice strong{ display:block; font-size:14px; margin-bottom:10px; }
.indice ol{ padding-left:20px; display:grid; gap:4px; font-size:15px; }
.indice a:hover{ color:#0079a8; }

figure{ margin:28px 0 30px; }
figure img{ width:100%; height:auto; border-radius:8px; aspect-ratio: 3/2; object-fit:cover; }
figcaption{ font-size:13px; color: var(--cinza); margin-top:8px; }

/* ---------- FOTOS ESTILO REVISTA ---------- */
body{ overflow-x: clip; }

/* foto de ponta a ponta abrindo a seção, com o título por cima */
.foto-full{
  position:relative; width:100vw; margin:56px 0 28px calc(50% - 50vw);
  height:62vh; min-height:360px; max-height:620px; overflow:hidden;
  display:flex; align-items:flex-end; color:var(--white);
}
.foto-full img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.foto-full::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,45,74,0) 35%, rgba(8,45,74,.85) 100%); }
.foto-full .titulo{ position:relative; z-index:1; width:100%; max-width: calc(var(--leitura) + 64px); margin:0 auto; padding:0 32px 34px; }
.foto-full .titulo span{ display:block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--champagne); margin-bottom:6px; }
.artigo .foto-full h2{ margin:0; color:var(--white); font-size:36px; text-shadow: 0 2px 10px rgba(0,0,0,.3); }

/* foto larga de respiro entre seções */
.foto-respiro{ width:100vw; margin:52px 0 12px calc(50% - 50vw); }
.foto-respiro img{ width:100%; height:48vh; min-height:280px; max-height:480px; object-fit:cover; }
.foto-respiro figcaption{ max-width: calc(var(--leitura) + 64px); margin:10px auto 0; padding:0 32px; }

/* duas fotos lado a lado, legenda sobre a foto */
.foto-dupla{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px -60px 30px; }
.foto-dupla figure{ margin:0; position:relative; border-radius:10px; overflow:hidden; aspect-ratio: 4/5; }
.foto-dupla img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.foto-dupla figure:hover img{ --hs:1.04; }
.foto-dupla figure::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,45,74,0) 45%, rgba(8,45,74,.92) 100%); }
.foto-dupla figcaption{ position:absolute; left:18px; right:18px; bottom:16px; z-index:1; margin:0; color: rgba(255,255,255,.95); font-size:13.5px; line-height:1.45; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.foto-dupla figcaption b{ display:block; color:var(--white); font-size:19px; font-weight:700; margin-bottom:2px; }

/* cards dos passeios */
.cards-passeio{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  width: min(1100px, calc(100vw - 64px)); margin:24px 0 30px calc(50% - min(550px, 50vw - 32px));
}
.card-passeio{ background: var(--white); border:1px solid rgba(8,45,74,.1); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.card-passeio img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.card-passeio div{ padding:16px 18px 20px; }
.artigo .card-passeio h3{ font-size:17px; margin:0 0 6px; }
.card-passeio p{ font-size:14.5px; color: var(--cinza); line-height:1.55; }

@media (max-width: 900px){
  .foto-dupla{ margin-left:0; margin-right:0; }
  .cards-passeio{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .artigo .foto-full h2{ font-size:27px; }
  .foto-full{ height:52vh; min-height:320px; }
  .foto-full .titulo{ padding:0 22px 24px; }
  .foto-dupla{ grid-template-columns:1fr; }
  .foto-dupla figure{ aspect-ratio: 4/3; }
  /* passeios viram carrossel de arrastar para o lado */
  .cards-passeio{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
    width:100vw; margin-left:calc(50% - 50vw); padding:0 22px 8px; scrollbar-width:none;
  }
  .cards-passeio::-webkit-scrollbar{ display:none; }
  .card-passeio{ flex:0 0 78%; scroll-snap-align:center; }
  .foto-respiro figcaption{ padding:0 22px; }
}

.dica{ background: #f5efe2; border:1px solid var(--champagne-soft); border-radius:8px; padding:18px 22px; margin:0 0 24px; font-size:15.5px; }
.dica b{ color: var(--azul-onyx); }

/* ---------- CAIXAS DE CHAMADA (CTA) ---------- */
.cta-box{
  background: var(--azul-onyx); color: var(--white); border-radius:10px;
  padding:34px; margin:44px 0; border:1px solid rgba(212,184,127,.3);
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center;
}
.cta-box h3{ margin:0 0 8px; font-size:21px; color:var(--white); }
.cta-box p{ color: rgba(255,255,255,.72); font-size:15px; margin:0; }
@media (max-width: 720px){ .cta-box{ grid-template-columns:1fr; padding:26px; } .cta-box .btn{ justify-content:center; } }

.onyx-inclui{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin:18px 0 26px; }
.onyx-inclui li{ background: var(--cinza-claro); border-radius:6px; padding:14px 16px; font-size:15px; font-weight:500; display:flex; gap:10px; align-items:flex-start; }
.onyx-inclui svg{ width:18px; height:18px; color:#0079a8; flex-shrink:0; margin-top:3px; }
@media (max-width: 560px){ .onyx-inclui{ grid-template-columns:1fr; } }

.cta-final{ background: var(--cinza-claro); padding:72px 0; text-align:center; }
.cta-final h2{ font-size:32px; margin-bottom:12px; }
.cta-final p{ color: var(--cinza); max-width:52ch; margin:0 auto 26px; font-size:16.5px; }
.cta-final .acoes{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.creditos{ max-width: calc(var(--leitura) + 64px); margin:0 auto; padding:0 32px 48px; font-size:12px; color: var(--cinza); }

/* ---------- LISTA DE POSTS (blog/index.html) ---------- */
.blog-topo{ background: var(--azul-onyx); color: var(--white); padding:80px 0 64px; }
.blog-topo h1{ font-size:42px; font-weight:800; margin-bottom:10px; }
.blog-topo p{ color: rgba(255,255,255,.75); max-width:56ch; font-size:17px; }
.posts{ padding:64px 0 96px; background: var(--white); }
.posts-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
@media (max-width: 960px){ .posts-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .posts-grid{ grid-template-columns: 1fr; } }
.post-card{ border:1px solid rgba(8,45,74,.1); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .2s ease; }
.post-card:hover{ box-shadow: 0 14px 34px rgba(8,45,74,.12); transform: translateY(-2px); }
.post-card img{ aspect-ratio: 16/10; object-fit:cover; width:100%; }
.post-card .corpo{ padding:22px; display:flex; flex-direction:column; gap:8px; flex-grow:1; }
.post-card .tag{ align-self:flex-start; margin-bottom:4px; font-size:11px; }
.post-card h2, .post-card h3{ font-size:19px; font-weight:700; line-height:1.3; }
.post-card p{ font-size:14.5px; color: var(--cinza); flex-grow:1; }
.post-card .ler{ font-size:14px; font-weight:600; color:#0079a8; }

/* ---------- FOOTER ---------- */
footer{ background: var(--azul-onyx); color: rgba(255,255,255,.6); padding:48px 0 28px; font-size:14px; }
.footer-linha{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
footer .brand img{ height:32px; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a:hover{ color: var(--white); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:28px; padding-top:20px; font-size:12.5px; color: rgba(255,255,255,.6); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---------- WHATSAPP FLUTUANTE ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:49;
  display:flex; align-items:center; gap:10px;
  background: var(--azul-viagem); color: var(--azul-onyx);
  padding:14px 20px; border-radius:100px; font-weight:600; font-size:14.5px;
  box-shadow: 0 12px 30px rgba(8,45,74,.35); transition: transform .2s ease;
}
.wa-float:hover{ transform: scale(1.04); }
.wa-float svg{ width:22px; height:22px; }
@media (max-width: 480px){ .wa-float{ right:12px; bottom:12px; padding:12px 16px; font-size:13px; } }

@media (max-width: 620px){ .container, .artigo, .creditos{ padding-left:22px; padding-right:22px; } }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

/* =====================================================
   V2 — INCREMENTOS
   ===================================================== */

/* barra de leitura */
.barra-leitura{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60; background: linear-gradient(90deg, var(--azul-viagem), var(--champagne)); }

/* Maragogi em resumo */
.resumo-rapido{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin:0 -60px 40px; }
.resumo-item{ background: var(--cinza-claro); border-radius:10px; padding:18px 16px; }
.resumo-item svg{ width:26px; height:26px; color:#0079a8; margin-bottom:10px; }
.resumo-item small{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--cinza); margin-bottom:4px; }
.resumo-item strong{ display:block; font-size:16px; line-height:1.3; }
.resumo-item span{ display:block; font-size:13px; color: var(--cinza); margin-top:3px; line-height:1.4; }
@media (max-width: 900px){ .resumo-rapido{ margin-left:0; margin-right:0; grid-template-columns: repeat(2, 1fr); } }

/* calendário de meses */
.calendario{ display:grid; grid-template-columns: repeat(12, 1fr); gap:5px; margin:20px 0 10px; }
.mes{ text-align:center; font-size:12.5px; font-weight:600; padding:12px 0; border-radius:6px; }
.mes.otimo{ background: var(--azul-viagem); color: var(--azul-onyx); }
.mes.bom{ background: #9fdcf3; color: var(--azul-onyx); }
.mes.chuva{ background: var(--cinza-claro); color: var(--cinza); }
.legenda-cal{ display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color: var(--cinza); margin-bottom:22px; }
.legenda-cal i{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
@media (max-width: 620px){ .calendario{ grid-template-columns: repeat(6, 1fr); } }

/* mapa da região */
.mapa{ background: var(--cinza-claro); border-radius:12px; padding:16px; margin:22px 0 26px; }
.mapa svg{ width:100%; height:auto; }
.mapa figcaption{ margin-top:8px; }

/* quem escreve */
.autor{ display:grid; grid-template-columns: 96px 1fr; gap:22px; align-items:center; border:1px solid rgba(8,45,74,.1); border-left:3px solid var(--champagne); border-radius:10px; padding:22px 24px; margin:40px 0; }
.autor img{ width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:center 20%; }
.autor small{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--cinza); }
.artigo .autor h3{ margin:2px 0 6px; font-size:19px; }
.autor p{ font-size:15px; color:#1d3a52; margin-bottom:12px; }
.autor .btn{ padding:10px 18px; font-size:14px; }
@media (max-width: 560px){ .autor{ grid-template-columns:1fr; text-align:center; } .autor img{ margin:0 auto; } }

/* perguntas rápidas */
.faq{ margin:14px 0 10px; display:flex; flex-direction:column; gap:10px; }
.faq details{ border:1px solid rgba(8,45,74,.12); border-radius:8px; padding:0 20px; background: var(--white); }
.faq summary{ cursor:pointer; list-style:none; padding:16px 28px 16px 0; font-weight:600; font-size:16px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:0; top:12px; font-size:22px; color:#0079a8; font-weight:400; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ font-size:15.5px; color:#1d3a52; padding-bottom:16px; }

/* cards de passeio que viram link quando o post existir */
a.card-passeio{ transition: box-shadow .2s ease, transform .2s ease; }
a.card-passeio:hover{ box-shadow: 0 12px 28px rgba(8,45,74,.12); transform: translateY(-2px); }
a.card-passeio .ler{ display:block; margin-top:8px; font-size:13.5px; font-weight:600; color:#0079a8; }

/* animação de entrada */
html.js .revela{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.js .revela.visivel{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .revela{ opacity:1; transform:none; } }

.mapa-mob{ display:none; }
@media (max-width: 620px){ .mapa-desk{ display:none; } .mapa-mob{ display:block; } }

/* =====================================================
   EFEITO NOS CARDS (passeios, lista do blog)
   ===================================================== */
.card-passeio, .post-card{
  position:relative;
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.card-passeio img, .post-card img{ transition: transform .6s ease; }
.card-passeio > div, .post-card .corpo{ position:relative; background: var(--white); }
.card-passeio::after, .post-card::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--champagne), var(--azul-viagem));
  transform: scaleX(0); transform-origin:left; transition: transform .45s ease;
}
.card-passeio h3, .post-card h2, .post-card h3{ transition: color .3s ease; }
.card-passeio{ overflow:hidden; }

@media (hover: hover){
  .card-passeio:hover, .post-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,174,239,.18); }
  .card-passeio:hover img, .post-card:hover img{ --hs:1.08; }
  .card-passeio:hover::after, .post-card:hover::after{ transform: scaleX(1); }
  .card-passeio:hover h3, .post-card:hover h2, .post-card:hover h3{ color:#0079a8; }
}
.card-passeio:active, .post-card:active{ transform: scale(.98); }

/* celular: card do meio em destaque no carrossel */
@media (max-width: 620px){
  .cards-passeio.com-foco .card-passeio{ transform: scale(.94); opacity:.75; }
  .cards-passeio.com-foco .card-passeio.em-foco{ transform:none; opacity:1; box-shadow: 0 12px 28px rgba(8,45,74,.14); }
  .cards-passeio.com-foco .card-passeio.em-foco::after{ transform: scaleX(1); }
}

/* entrada em sequência */
html.js .cards-passeio.revela, html.js .posts-grid.revela{ opacity:1; transform:none; }
html.js .revela .card-passeio, html.js .revela .post-card{ opacity:0; transform: translateY(24px); }
html.js .revela.visivel .card-passeio, html.js .revela.visivel .post-card{ opacity:1; transform:none; transition: transform .6s ease, opacity .6s ease, box-shadow .35s ease; }
html.js .revela.visivel .card-passeio:nth-child(2), html.js .revela.visivel .post-card:nth-child(2){ transition-delay: .08s; }
html.js .revela.visivel .card-passeio:nth-child(3), html.js .revela.visivel .post-card:nth-child(3){ transition-delay: .16s; }
html.js .revela.visivel .card-passeio:nth-child(4), html.js .revela.visivel .post-card:nth-child(4){ transition-delay: .24s; }
@media (hover: hover){
  html.js .revela.visivel .card-passeio:hover, html.js .revela.visivel .post-card:hover{ transform: translateY(-6px); transition-delay:0s; }
}
@media (max-width: 620px){
  html.js .revela.visivel.com-foco .card-passeio{ transform: scale(.94); opacity:.75; }
  html.js .revela.visivel.com-foco .card-passeio.em-foco{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  html.js .revela .card-passeio, html.js .revela .post-card{ opacity:1; transform:none; }
  .card-passeio, .post-card, .card-passeio img, .post-card img{ transition:none; }
}

/* =====================================================
   CELULAR: nada passa da borda
   ===================================================== */
picture{ display:contents; }
@media (max-width: 620px){
  .btn{ white-space:normal; text-align:center; justify-content:center; line-height:1.3; }
  .nav .btn{ white-space:nowrap; }
  .post-hero .btn, .cta-final .btn, .cta-box .btn{ width:100%; }
  .post-meta{ gap:4px 14px; }
}

/* =====================================================
   SEGUNDA BARRA DO MENU (celular e tablet)
   ===================================================== */
.subnav{ display:none; }
@media (max-width: 860px){
  .subnav{
    display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    padding:4px 48px 4px 18px; background: transparent;
    border-top:1px solid rgba(255,255,255,.06);
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
            mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .subnav::-webkit-scrollbar{ display:none; }
  .subnav a{
    flex:0 0 auto; font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
    display:inline-flex; align-items:center; min-height:32px;
    color: rgba(255,255,255,.88); padding:0 14px; border-radius:100px;
    border:1px solid rgba(255,255,255,.2); transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .subnav a.ativo{ background: var(--azul-viagem); color: var(--azul-onyx); border-color: var(--azul-viagem); }
  .artigo h2{ scroll-margin-top:130px; }
}

/* =====================================================
   MOVIMENTO NAS FOTOS (controlado por ../efeitos.js)
   ===================================================== */
[data-parallax]{ transform: translate3d(0, var(--py, 0px), 0) scale(1.16); will-change: transform; }
[data-zoom]{ transform: scale(calc(var(--zs, 1) * var(--hs, 1))); }
.moldura{ overflow:hidden; }
/* cortina: uma faixa branca por cima da foto se recolhe para cima (a foto nunca fica escondida para o navegador) */
.cortina::before{ content:''; position:absolute; inset:0; z-index:3; background: var(--white); transform: scaleY(0); transform-origin: top; pointer-events:none; }
html.js .cortina::before{ transform: scaleY(1); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
html.js .cortina.aberta::before{ transform: scaleY(0); }
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform:none; }
  [data-zoom]{ transform:none; }
  html.js .cortina::before{ transform: scaleY(0); transition:none; }
}

.card-passeio img, .post-card img{ height:auto; }

/* =====================================================
   FOTOS GRANDES NO CELULAR: ponta a ponta, mais baixas, foto inteira
   ===================================================== */
@media (max-width: 620px){
  .foto-full{ height:auto; min-height:0; max-height:none; aspect-ratio: 4/3; margin-top:44px; }
  .foto-full::after{ background: linear-gradient(180deg, rgba(8,45,74,0) 50%, rgba(8,45,74,.88) 100%); }
  .foto-full .titulo{ padding-bottom:16px; }
  .foto-full .titulo span{ font-size:11px; margin-bottom:3px; }
  .artigo .foto-full h2{ font-size:22px; line-height:1.2; }
  .foto-respiro img{ height:auto; min-height:0; max-height:none; aspect-ratio: 3/2; }
}

/* =====================================================
   CARDS DE TEXTO (ex.: espetáculos — sem foto)
   ===================================================== */
.cards-texto{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; margin:22px 0 28px; }
.card-texto{
  position:relative; background: var(--white); border:1px solid rgba(8,45,74,.12); border-radius:10px;
  padding:20px 20px 18px; overflow:hidden; transition: transform .35s ease, box-shadow .35s ease;
}
.card-texto::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(180deg, var(--champagne), var(--azul-viagem)); }
.card-texto .selo{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--azul-onyx); background: var(--champagne-soft); padding:3px 9px; border-radius:100px; margin-bottom:8px; }
.card-texto .selo.novo{ background: var(--azul-viagem); }
.artigo .card-texto h3{ margin:0 0 4px; font-size:18px; }
.card-texto .onde{ font-size:13px; font-weight:600; color:#0079a8; margin-bottom:6px; }
.card-texto p{ font-size:14.5px; color:#1d3a52; line-height:1.55; margin:0; }
@media (hover: hover){ .card-texto:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,174,239,.15); } }
@media (max-width: 620px){ .cards-texto{ grid-template-columns: 1fr; } }

/* =====================================================
   ROTEIRO EM LINHA DO TEMPO
   ===================================================== */
.roteiro{ list-style:none; margin:24px 0 30px; padding:0; position:relative; }
.roteiro::before{ content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background: linear-gradient(180deg, var(--azul-viagem), var(--champagne)); }
.roteiro > li{ position:relative; padding:0 0 26px 58px; }
.roteiro > li:last-child{ padding-bottom:0; }
.roteiro .dia{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  background: var(--azul-onyx); color: var(--white); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 4px var(--white);
}
.artigo .roteiro h3{ margin:6px 0 6px; font-size:18px; }
.roteiro p{ font-size:15.5px; color:#1d3a52; margin:0 0 8px; }
.roteiro .kids{
  display:inline-flex; gap:8px; align-items:flex-start; font-size:14px; color: var(--azul-onyx);
  background:#eaf7fd; border:1px solid rgba(0,174,239,.3); border-radius:8px; padding:8px 12px; line-height:1.45;
  max-width:100%; box-sizing:border-box;   /* senão estoura a borda em telas de 340px */
}
.roteiro .kids b{ white-space:nowrap; }
/* no celular o rótulo vai para a própria linha — senão sobra uma coluna de
   2 palavras para o texto em telas estreitas (testado em 340 px) */
@media (max-width: 560px){
  .roteiro .kids{ display:block; }
  .roteiro .kids b{ display:block; margin-bottom:3px; }
}

/* mapa único (um SVG só, com letra grande, para celular e computador) */
.mapa-unico svg{ max-width:440px; margin:0 auto; display:block; }

/* =====================================================
   CAPA COM A FOTO EM CIMA (quando o destaque da foto está no meio
   e o título cobriria o principal). Uso: <section class="post-hero foto-acima">
   ===================================================== */
.post-hero.foto-acima{ grid-template-areas:"foto" "baixo"; grid-template-rows:auto auto; min-height:0; }
.post-hero.foto-acima::after{ display:none; }
.post-hero.foto-acima img{
  grid-area:foto; width:100%; aspect-ratio:auto;
  height: clamp(260px, 42vw, 560px); object-fit:cover; object-position: var(--capa-foco, center 58%);
}
.post-hero.foto-acima .container{ grid-area:baixo; display:block; align-self:auto; padding-top:34px; padding-bottom:48px; }
.post-hero.foto-acima .capa-topo, .post-hero.foto-acima .capa-baixo{ grid-area:auto; max-width:none; padding:0; margin-left:0; }
@media (max-width: 860px){ .post-hero.foto-acima .container{ padding-top:26px; padding-bottom:34px; } }

/* foto em destaque na largura do texto (mais estreita que as de ponta a ponta) */
.foto-destaque{ max-width:520px; margin:32px auto 30px; }
.foto-destaque .moldura{ border-radius:14px; box-shadow: 0 18px 40px rgba(8,45,74,.18); }
.foto-destaque img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:0; display:block; }
.foto-destaque figcaption{ text-align:center; margin-top:12px; }

.foto-destaque.horizontal{ max-width:500px; }
.foto-destaque.horizontal img{ aspect-ratio:3/2; }

/* =====================================================
   LEGIBILIDADE NO CELULAR (letra mínima 13px) + cabeçalho que some ao rolar
   ===================================================== */
header{ transition: top .3s ease; }
@media (max-width: 860px){
  header{ background:#082D4A; -webkit-backdrop-filter:none; backdrop-filter:none; }
  header.header-oculto{ top:-130px; }
  .artigo h2{ scroll-margin-top:120px; }
}
@media (max-width: 620px){
  .creditos, .footer-bottom, .tag, .post-card .tag, .card-texto .selo, .resumo-item small, .autor small, .mes, .legenda-cal{ font-size:13px; }
  .resumo-item span{ font-size:13.5px; }
}

/* =====================================================
   CELULAR: menos quebras de linha
   ===================================================== */
@media (max-width: 620px){
  .so-pc{ display:none; }
  .post-meta{ gap:4px 12px; }
  .resumo-rapido{ grid-template-columns:1fr; gap:8px; }
  .resumo-item{ display:grid; grid-template-columns:30px 1fr; column-gap:12px; align-items:center; padding:12px 14px; }
  .resumo-item svg{ grid-row: 1 / span 3; margin:0; width:24px; height:24px; }
  .resumo-item small, .resumo-item strong, .resumo-item span{ grid-column:2; }
  .resumo-item span{ margin-top:1px; }
}
.orc-card.so-form{ grid-template-columns:1fr; max-width:640px; margin:0 auto; }
.mais-posts{ margin:22px 0 0 !important; }
.cta-final .link{ color:#0079a8; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.avaliacoes-post .link{ color:#0079a8; font-weight:600; text-decoration:underline; text-underline-offset:3px; font-size:15px; }

/* =====================================================
   TABELA DE PREÇOS (vira lista de cartões no celular)
   ===================================================== */
.precos{ width:100%; border-collapse:collapse; margin:20px 0 10px; font-size:15.5px; }
.precos th, .precos td{ text-align:left; padding:13px 14px; border-bottom:1px solid rgba(8,45,74,.12); vertical-align:top; }
.precos thead th{ background: var(--azul-onyx); color:#fff; font-size:13.5px; letter-spacing:.03em; text-transform:uppercase; border:none; }
.precos thead th:first-child{ border-radius:8px 0 0 0; }
.precos thead th:last-child{ border-radius:0 8px 0 0; }
.precos tbody tr:nth-child(even){ background:#f7f9fc; }
.precos .valor{ font-weight:700; color: var(--azul-onyx); white-space:nowrap; }
.precos .obs{ display:block; font-size:13.5px; color: var(--cinza); font-weight:400; margin-top:2px; white-space:normal; }
.precos td:first-child{ font-weight:600; }
@media (max-width: 620px){
  .precos, .precos tbody, .precos tr, .precos td{ display:block; width:100%; }
  .precos thead{ display:none; }
  .precos tr{ background:#f7f9fc !important; border:1px solid rgba(8,45,74,.12); border-radius:10px; margin-bottom:12px; padding:4px 2px; }
  .precos td{ border:none; padding:6px 14px; }
  .precos td:first-child{ font-size:16.5px; padding-top:12px; }
  .precos td:last-child{ padding-bottom:12px; }
}
.custo-dia{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 10px; }
.custo-dia div{ background: var(--cinza-claro); border-radius:10px; padding:18px 20px; border-left:3px solid var(--azul-viagem); }
.custo-dia small{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--cinza); margin-bottom:6px; }
.custo-dia strong{ display:block; font-size:22px; color: var(--azul-onyx); line-height:1.15; }
.custo-dia span{ display:block; font-size:14px; color:#1d3a52; margin-top:6px; line-height:1.5; }
@media (max-width: 620px){ .custo-dia{ grid-template-columns:1fr; } }