/* ===========================================================================
   Montana Rafting e Expedicoes -- folha de estilo compartilhada.
   Extraida do <style> inline do index.html quando o site virou multipagina
   (home + uma pagina por roteiro). Sem isso seriam 5 copias do mesmo CSS.
   Nao ha url() aqui: todos os assets sao referenciados no HTML.
   =========================================================================== */


:root{
  --verde-escuro:#0E2A1C;
  --verde:#1C6B3E;
  --verde-claro:#2E8B57;
  --amarelo:#F7B733;
  --laranja:#F2994A;
  --creme:#FAF6EC;
  --texto-claro:#F5F1E6;
  --texto-escuro:#12231A;
  --muted:rgba(245,241,230,0.68);
  --muted-escuro:rgba(18,35,26,0.62);
  --azul-rio:#2E7DA8;        /* traço do rio sobre fundo claro */
  --azul-rio-claro:#5BB3D9;  /* mesmo traço sobre fundo escuro (.pilares) */
}
*{margin:0;padding:0;box-sizing:border-box;}
/* scrollbar-gutter: reserva a calha da barra de rolagem desde sempre, pra a
   página não dar salto lateral entre telas com e sem scroll. */
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
/* A nav é fixa, então um link de âncora deixaria o alvo escondido embaixo dela.
   scroll-margin-top reserva essa altura no ponto de parada da rolagem. */
:target,[id]{scroll-margin-top:104px;}
@media (max-width:768px){ :target,[id]{scroll-margin-top:84px;} }
body{font-family:'Inter',sans-serif;background:var(--creme);color:var(--texto-escuro);overflow-x:hidden;}
/* line-height:1.15 (não 0.97): a Anton tem acento alto, e em caixa alta o til/
   circunflexo da 2ª linha encostava na linha de cima ("EXPERIÊNCIAS", "SÃO LUIZ",
   "CALENDÁRIO"). 1.15 dá o respiro do acento; ainda lê como título condensado. */
h1,h2,h3,.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:0.01em;text-transform:uppercase;line-height:1.15;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{max-width:1240px;margin:0 auto;padding:0 40px;}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:0.24em;display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.eyebrow::before{content:"";width:32px;height:3px;display:inline-block;}
.eyebrow.on-dark{color:var(--amarelo);} .eyebrow.on-dark::before{background:var(--amarelo);}
.eyebrow.on-light{color:var(--verde);} .eyebrow.on-light::before{background:var(--verde);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;border-radius:999px;font-weight:700;font-size:13.5px;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,background .2s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(135deg,var(--amarelo),var(--laranja));color:var(--texto-escuro);}
.btn-outline{border-color:var(--amarelo);color:var(--amarelo);background:rgba(8,20,14,0.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.btn-outline-dark{border-color:rgba(18,35,26,0.25);color:var(--texto-escuro);}
/* Em tela bem estreita o nowrap do .btn fazia rótulo longo ("Ver perfil completo
   no Instagram", 345px) estourar o container de 320px e empurrar a página pra
   direita. Aqui ele passa a quebrar em duas linhas em vez de vazar. */
@media (max-width:400px){
  .btn{white-space:normal;text-align:center;max-width:100%;padding:14px 22px;}
}
.btn-sm{padding:11px 20px;font-size:12px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:linear-gradient(to bottom, rgba(14,42,28,0.92), rgba(14,42,28,0.55) 70%, transparent);}
.logo{display:flex;align-items:center;gap:10px;}
.logo-sun{width:32px;height:32px;flex-shrink:0;}
.logo-img{width:38px;height:38px;flex-shrink:0;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,0.4);}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-text b{font-family:'Anton',sans-serif;font-size:19px;color:var(--texto-claro);letter-spacing:0.03em;}
.logo-text span{font-size:9.5px;letter-spacing:0.2em;color:var(--amarelo);text-transform:uppercase;margin-top:2px;}
.nav-center{display:flex;gap:30px;align-items:center;}
.nav-item{position:relative;}
.nav-item > a{font-size:12.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--texto-claro);opacity:0.88;display:flex;align-items:center;gap:5px;padding:10px 0;}
.nav-item > a:hover{opacity:1;}
.nav-item .caret{font-size:9px;opacity:0.7;}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border-radius:14px;padding:10px;min-width:210px;box-shadow:0 20px 45px rgba(14,42,28,0.22);opacity:0;visibility:hidden;translate:0 6px;transition:all .18s ease;}
.nav-item:hover .dropdown{opacity:1;visibility:visible;translate:0 0;}
.dropdown a{display:block;padding:11px 14px;border-radius:9px;font-size:13px;font-weight:600;color:var(--texto-escuro);}
.dropdown a:hover{background:var(--creme);color:var(--verde);}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-right a.txt{font-size:12px;font-weight:600;color:var(--texto-claro);opacity:0.8;}
@media (max-width:980px){.nav-center,.nav-right a.txt{display:none;}}

/* HERO */
/* Era 100vh + 2200px com o .hero sticky: essa pista extra existia só pra dar
   scroll ao scrub de frames do vídeo. Com o vídeo em loop simples ela não tem
   mais função — o wrapper fica como âncora da cena de scroll do bote. */
.hero-track{position:relative;}
/* Conteúdo centralizado verticalmente: com padding-top fixo de 172px numa altura
   travada em 100vh, os botões e o divisor caíam fora da tela em telas mais baixas.
   Os filhos absolutos (canvas/overlay/espuma/glow) não entram no flex — o fundo
   segue igual; só o .container é item flex. */
.hero{position:relative;min-height:100vh;height:100vh;background:radial-gradient(130% 90% at 12% 0%, #163d27 0%, var(--verde-escuro) 45%, #081810 100%);padding:118px 0 74px;color:var(--texto-claro);overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
/* object-fit:cover faz o que o canvas fazia na mão (recorte proporcional). */
.hero-canvas-el{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;object-fit:cover;}
/* A .hero-foam (PNG de espuma de 190px sobre o vídeo) foi removida: ela existia
   pra dar água ao hero antigo, e agora só cobria a corredeira real do vídeo com
   uma faixa esbranquiçada — era o "espaço em branco" embaixo. Sai junto um PNG
   de 825 KB do carregamento. */
/* Overlay leve: só o bastante pro menu no topo e pra transição na onda embaixo.
   O contraste do H1 é resolvido no próprio H1 (text-shadow), que é cirúrgico —
   escurecer o vídeo inteiro por causa de duas linhas de texto era o que estava
   apagando o rio. */
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(8,20,14,0.42) 0%, rgba(8,20,14,0.10) 34%, rgba(8,20,14,0.14) 62%, rgba(8,20,14,0.40) 100%);}
.hero-sun-glow{position:absolute;top:-120px;right:-100px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle, rgba(247,183,51,0.32), rgba(247,183,51,0) 70%);pointer-events:none;z-index:1;}
.hero > .container{position:relative;z-index:2;}
.hero h1{font-size:clamp(34px,5vw,67px);max-width:780px;text-shadow:0 2px 26px rgba(8,20,14,0.6), 0 1px 3px rgba(8,20,14,0.4);}
.hero h1 .accent{color:var(--amarelo);}
/* Selo de certificação — saiu do hero (empilhado no centro, empurrava os botões
   pra fora da tela) e agora vive na seção .pilares, junto do argumento de
   segurança que ele comprova. Sobre fundo verde-escuro, mesmo tratamento. */
.selo-nsv{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:118px;height:118px;border-radius:50%;border:2px solid rgba(247,183,51,0.55);text-align:center;padding:10px;margin-top:26px;}
.selo-nsv b{font-family:'Anton',sans-serif;font-size:13px;color:var(--amarelo);line-height:1.1;}
.selo-nsv span{font-size:9px;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;margin-top:4px;}
/* Sem height explícito o SVG herdava a proporção do viewBox (1440x120) e virava
   uma faixa creme de ~160px numa tela larga, comendo o vídeo. Como o
   preserveAspectRatio é "none", fixar a altura só achata a onda — que é
   decorativa — e devolve esse espaço pro vídeo. */
.river-wave{position:absolute;bottom:-2px;left:0;width:100%;height:68px;line-height:0;z-index:2;filter:blur(5px);transform:scale(1.01);}
.river-wave path{transition:none;}
@media (max-width:768px){ .river-wave{height:44px;} }

/* FAIXA DE FATOS — os chips que viviam no hero. Mesmo --creme da onda e da
   .intro, então vídeo → faixa → seção branca emendam sem linha aparente.
   As pills seguem o padrão claro que já existe em .tag-estacao. */
.faixa-fatos{background:var(--creme);padding:22px 0 6px;}
.faixa-fatos .container{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;}
.fato-pill{padding:9px 18px;border-radius:999px;background:#fff;border:1px solid rgba(28,107,62,0.2);color:var(--verde);font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;}
.fato-txt{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-escuro);white-space:nowrap;}
.fato-sep{color:var(--amarelo);}

/* INTRO DE MARCA */
.intro{padding:110px 0 90px;background:var(--creme);}
.intro-wrap{max-width:820px;}
.intro h2{font-size:clamp(28px,4vw,42px);margin-bottom:22px;}
.intro p{font-size:16px;line-height:1.75;color:rgba(18,35,26,0.72);margin-bottom:16px;}
.intro strong{color:var(--verde);}
.intro-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-top:32px;}
.stamp{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--verde);}
.stamp b{font-family:'Anton',sans-serif;font-size:15px;}

/* EXPERIENCES */
.roteiros{padding:90px 0;background:var(--creme);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:46px;flex-wrap:wrap;gap:20px;}
.section-head h2{font-size:clamp(30px,4vw,46px);}
.section-head p{max-width:360px;font-size:14px;color:var(--muted-escuro);line-height:1.6;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:20px;}
/* Sem aspect-ratio fixo: com 5 cards cada um fica estreito, a altura travada em
   3/4.3 ficava menor que o conteúdo e o texto vazava por cima do número.
   Agora a altura vem do conteúdo e o grid (align-items:stretch) iguala todos.
   padding-top reserva a faixa do .card-num. */
.card{position:relative;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:64px 20px 24px;color:var(--texto-claro);min-height:320px;}
.card-1{background:linear-gradient(160deg,#2E8B57,#0E2A1C 85%);}
.card-2{background:linear-gradient(160deg,#F2994A,#7a3f0e 85%);}
.card-3{background:linear-gradient(160deg,#1C6B3E,#081810 85%);}
.card-4{background:linear-gradient(160deg,#12314f,#081018 85%);}
.card-5{background:linear-gradient(160deg,#8E3A1F,#0E2A1C 85%);}
.card-num{position:absolute;top:16px;left:20px;font-family:'Anton',sans-serif;font-size:28px;color:var(--amarelo);text-shadow:0 2px 12px rgba(0,0,0,0.35);line-height:1;}
.card-tag{font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--amarelo);margin-bottom:6px;}
.card h3{font-size:21px;margin-bottom:6px;}
.card p{font-size:12px;color:var(--muted);line-height:1.45;margin-bottom:14px;}
.card .btn-row{gap:8px;}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;gap:16px;}
  /* altura pelo conteúdo — o card 3/4.3 ficava alto demais em coluna única */
  .card{aspect-ratio:auto;padding:20px;padding-top:54px;}
  .card-num{top:14px;left:18px;font-size:26px;}
  .card h3{font-size:19px;}
  .card p{margin-bottom:12px;}
}

/* SÃO LUIZ DO PARAITINGA — parallax (fundo parado, conteúdo rola por cima) */
.cidade-parallax{position:relative;}
.cidade-bg{position:sticky;top:0;height:100vh;z-index:0;overflow:hidden;background:var(--verde-escuro);}
.cidade-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cidade-bg::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 50% at 50% 100%, rgba(20,15,10,0.4), transparent 70%);
}
.cidade-overlay{position:sticky;top:0;height:100vh;margin-top:-100vh;z-index:1;background:linear-gradient(180deg, rgba(8,20,14,0.15) 0%, rgba(8,20,14,0.35) 55%, rgba(8,20,14,0.8) 100%);}
.cidade-content{position:relative;z-index:2;margin-top:-100vh;min-height:115vh;display:flex;align-items:center;color:var(--texto-claro);}
.cidade-content h2{font-size:clamp(38px,6vw,72px);margin-bottom:20px;}
.cidade-content p{max-width:560px;font-size:15.5px;line-height:1.75;color:var(--muted);margin-bottom:28px;}

/* ---------------------------------------------------------------------------
   Card inteiro clicável, sem JS.

   O link "Ver detalhes" ganha um ::after que cobre o card todo (padrão
   "stretched link"). Não dá pra envolver o card num <a>, porque ele já contém o
   link do WhatsApp, e <a> dentro de <a> é HTML inválido — o navegador desmonta.
   Assim o card inteiro responde ao clique, o Tab segue alcançando os dois links
   separadamente e o leitor de tela anuncia cada um com o próprio texto.
   --------------------------------------------------------------------------- */
.card .card-link::after{content:"";position:absolute;inset:0;z-index:3;}
/* Só o "Reservar" (.btn-primary) precisa ficar acima da camada esticada pra
   continuar indo direto pro WhatsApp. "Ver detalhes" também é um .btn, mas é
   ELE que gera o ::after esticado (.card-link) — se ganhasse position:relative
   aqui também, o ::after passaria a se posicionar relativo ao próprio botão
   pequeno (não mais ao .card inteiro), e o card inteiro parava de ser
   clicável, sobrando só o botão. Foi exatamente esse bug que aconteceu. */
.card .btn-row .btn-primary{position:relative;z-index:4;}
/* "Ver detalhes" herda .btn-outline, que tem backdrop-filter:blur(). Filtro
   (blur, backdrop-filter, transform, will-change:transform...) cria um novo
   "containing block" pro próprio elemento, INDEPENDENTE do position — então
   mesmo com .card-link em position:static, o ::after esticado continuava se
   posicionando relativo ao botãozinho, não ao .card. Essa é a causa real do
   card só responder ao clique bem em cima do botão. Sem o desfoque aqui o
   botão ainda fica legível (o fundo do card já é escuro o bastante). */
.card .card-link{backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Mesma causa, gatilho diferente: `.btn:hover{transform:translateY(-2px)}`
   também recria o containing block assim que o mouse passa por cima do
   "Ver detalhes" — e como ele agora é o card inteiro, isso acontecia o tempo
   todo. O card já tem o próprio efeito de elevação no :hover (--ty/--sc), não
   precisa também do micro-lift do botão aqui. */
.card .card-link:hover{transform:none;}

/* ---------------------------------------------------------------------------
   Cards dos roteiros: destaque 3D no hover.

   A perspectiva fica no CONTAINER, não no card: é o que faz o rotateX/rotateY
   ter profundidade de verdade em vez de parecer um losango achatado. O card não
   precisa de preserve-3d — ele mesmo é quem gira, e o overflow:hidden dele
   forçaria o flatten de qualquer jeito.

   O transform é montado a partir de variáveis pra que CSS e JS não briguem pela
   mesma propriedade: o hover define elevação e escala, o ponteiro define a
   inclinação (ver assets/js/card-3d.js).
   --------------------------------------------------------------------------- */
.cards{perspective:1400px;}
.card{
  cursor:pointer;
  will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--ty,0px)) scale(var(--sc,1));
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease,
             opacity .35s ease, filter .35s ease;
}
/* Enquanto o ponteiro percorre o card a inclinação tem que acompanhar quase de
   imediato; a transição longa serve só pra entrada e saída. */
.card.inclinando{transition:transform .1s linear, box-shadow .45s ease;}

/* Brilho que segue o cursor — é o que faz a superfície parecer inclinada de
   verdade, e não apenas deslocada. */
.card::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,0.18), rgba(255,255,255,0) 68%);
  opacity:0;transition:opacity .35s ease;
}
.card button.btn{font-family:inherit;}

@media (hover:hover) and (pointer:fine){
  .card:hover{
    --ty:-14px; --sc:1.06;
    z-index:5;
    box-shadow:0 44px 90px rgba(8,20,14,0.5), 0 0 0 1px rgba(247,183,51,0.32);
  }
  .card:hover::before{opacity:1;}
  /* O "estar por cima" vem do contraste: os vizinhos recuam e perdem cor, então
     o card sob o mouse salta do plano. :has() e não .cards:hover — este último
     dispararia também no vão entre os cards e apagaria todos de uma vez. */
  .cards:has(.card:hover) .card:not(:hover){
    --sc:.93; opacity:.45; filter:saturate(.55);
  }
}

@media (prefers-reduced-motion:reduce){
  .card{transition:box-shadow .3s ease;}
  .card:hover{--ty:0px; --sc:1;}
  .cards:has(.card:hover) .card:not(:hover){--sc:1; opacity:1; filter:none;}
  .card::before{display:none;}
}

/* As regras da modal saíram junto com ela: as páginas de roteiro passaram a ter
   mais conteúdo do que a prévia mostrava, e o card agora leva direto pra página.
   As classes .det-* continuam — são o corpo dessas páginas. */

.det-capa{position:relative;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:32px;color:var(--texto-claro);background-size:cover;background-position:center;}
.det-capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,14,0.15),rgba(8,20,14,0.88));}
.det-capa > *{position:relative;z-index:1;}
/* Roteiro ainda sem foto própria: o gradiente da marca segura o mesmo layout. */
.det-capa-sem-foto{background-image:linear-gradient(150deg,#12314f,#0E2A1C 60%,#081018);}
.det-tag{font-size:11px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--amarelo);margin-bottom:10px;}
.det-capa h3{font-size:clamp(26px,4.4vw,42px);margin-bottom:8px;}
.det-resumo{font-size:14px;color:var(--muted);}

.det-corpo{padding:34px 38px 10px;}
.det-corpo h4{font-family:'Inter',sans-serif;font-weight:800;font-size:16px;text-transform:none;letter-spacing:0;
  margin:30px 0 14px;color:var(--verde);}
.det-corpo p{font-size:15px;line-height:1.72;color:rgba(18,35,26,0.76);margin-bottom:14px;}
.det-lead{font-size:16.5px!important;color:var(--texto-escuro)!important;font-weight:500;}
.det-corpo strong{color:var(--verde);}

.det-opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.det-opcao{background:#fff;border-radius:16px;padding:18px;border:1px solid rgba(28,107,62,0.14);}
.det-opcao b{display:block;font-family:'Anton',sans-serif;font-size:21px;color:var(--verde);margin-bottom:7px;}
.det-opcao span{font-size:13px;line-height:1.55;color:var(--muted-escuro);}

.det-colunas{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;}
.det-lista{display:flex;flex-direction:column;gap:10px;}
/* O item era display:flex com o ✓ no ::before. Num <li> que começa com <b> o
   negrito virava um item flex separado do texto, e o rótulo quebrava numa coluna
   torta ("Meio ambiente:" numa linha, a descrição noutra). Agora o marcador é um
   ::before absoluto e o conteúdo do <li> volta a ser uma frase corrida. */
.det-lista li{position:relative;padding-left:24px;font-size:14px;line-height:1.55;color:rgba(18,35,26,0.76);}
.det-lista li::before{content:"✓";position:absolute;left:0;top:0;color:var(--verde-claro);font-weight:800;}
.det-lista b{color:var(--texto-escuro);}

.det-destaque{background:linear-gradient(150deg,var(--verde-escuro),#081810);color:var(--texto-claro);
  border-radius:20px;padding:26px 28px;margin:30px 0;}
.det-destaque-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--amarelo);margin-bottom:10px;}
.det-destaque h4{color:var(--texto-claro);margin:0 0 10px;}
.det-destaque p{color:var(--muted);margin:0;}
/* .det-lista foi pensada pra fundo claro (texto quase preto). Dentro do
   .det-destaque, que é escuro, esse texto ficava invisível — só o ✓ aparecia. */
.det-destaque .det-lista{margin:14px 0;}
.det-destaque .det-lista li{color:var(--muted);}

@media (max-width:820px){
  .det-opcoes,.det-colunas{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .det-capa{min-height:210px;padding:24px 20px;}
  .det-corpo{padding:26px 20px 6px;}
}

/* SAZONAL */
.sazonal{padding:90px 0;background:#fff;}
/* Dois blocos lado a lado; dentro de cada um a foto fica EM CIMA do texto.
   As fotos são panorâmicas (900x466). Com a foto ao lado do texto ela sobrava
   com ~280px de largura e 145px de altura — um selo perdido ao lado de uma
   coluna alta de texto. Ocupando a largura do bloco ela vai a ~600x310, e o
   texto ganha o dobro de linha útil: parágrafo em 3 linhas em vez de 6. */
.sazonal-duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.sazonal-bloco{display:flex;flex-direction:column;gap:24px;}
/* Pedido do Vitor (13/09/2026): os dois blocos (vídeo + foto do float) em
   formato 9:16 — o vídeo enviado já é vertical de verdade (720x1280 = 9:16
   exato), e a foto do float (ainda provisória, paisagem) entra cortada com
   object-fit:cover pra preencher a mesma proporção, sem sobrar barra preta.
   aspect-ratio fixo evita o salto de layout que rolava entre o pôster e o
   vídeo tocando (antes disso a caixa mudava de forma sozinha). max-width trava
   um tamanho de "vídeo de celular" em vez de esticar a coluna inteira. */
.sazonal-foto{width:100%;max-width:280px;height:auto;aspect-ratio:3/4;object-fit:cover;
  border-radius:18px;display:block;margin:0 auto;background:#000;}

/* Botão de play grande no centro do vídeo — some assim que o vídeo começa a
   tocar (ver o pequeno script no fim da página) e volta se o visitante pausar,
   pra sempre ter um alvo de clique óbvio. Os controles nativos do <video> (a
   barra debaixo) continuam do jeito que o navegador desenha, sem mexer. */
.video-wrap{position:relative;max-width:280px;margin:0 auto;}
.video-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(8,20,14,0.55);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;padding-left:3px;
  box-shadow:0 8px 24px rgba(8,20,14,0.4);transition:transform .2s ease,background .2s ease;
}
.video-play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(8,20,14,0.72);}
.video-play-btn.escondido{display:none;}
.sazonal-texto{min-width:0;}   /* sem isso o texto longo estoura a coluna do grid */
/* Aqui o eyebrow vem DEPOIS do h2 (título preto em cima, linha verde embaixo),
   então a margem do h2 é o respiro entre os dois e precisa ser curta — os 18px
   de baixo do próprio .eyebrow é que separam do parágrafo. */
.sazonal h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px;}
.sazonal p{font-size:15px;line-height:1.72;color:var(--muted-escuro);margin-bottom:13px;}
.sazonal-tags{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px;}
.tag-estacao{padding:10px 18px;border-radius:999px;background:var(--creme);font-size:12px;font-weight:700;color:var(--verde);border:1px solid rgba(28,107,62,0.2);}
.sazonal .btn{margin-top:22px;}
/* Abaixo de 820px dois blocos deixam a foto pequena demais de novo: passam a
   ocupar a largura toda, um sob o outro. */
@media (max-width:820px){ .sazonal-duo{grid-template-columns:1fr;gap:52px;} }

/* PILARES */
.pilares{padding:100px 0;background:var(--verde-escuro);color:var(--texto-claro);}
.pilares > .container > .section-head h2,
.pilares > .container > .section-head p{color:var(--texto-claro);}
.pilares .section-head p{color:var(--muted);}
.pilar{display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;padding:34px 0;border-top:1px solid rgba(245,241,230,0.12);align-items:start;}
.pilar:last-child{border-bottom:1px solid rgba(245,241,230,0.12);}
.pilar-num{font-family:'Anton',sans-serif;font-size:34px;color:var(--amarelo);}
.pilar h3{font-family:'Inter',sans-serif;font-weight:800;font-size:19px;text-transform:none;letter-spacing:0;line-height:1.3;}
.pilar-check{display:flex;flex-direction:column;gap:9px;}
.pilar-check li{display:flex;gap:9px;font-size:13.5px;color:var(--muted);align-items:flex-start;}
.pilar-check li::before{content:"✓";color:var(--amarelo);font-weight:700;flex-shrink:0;}
@media (max-width:820px){.pilar{grid-template-columns:50px 1fr;}.pilar-check{grid-column:1/-1;margin-left:50px;}}

/* STATS */
.stats{padding:70px 0;background:var(--creme);}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stat b{display:block;font-family:'Anton',sans-serif;font-size:clamp(32px,4vw,48px);color:var(--verde);}
.stat span{font-size:12.5px;color:var(--muted-escuro);letter-spacing:0.04em;text-transform:uppercase;}
.stat.humor b{font-size:clamp(20px,2.4vw,26px);text-transform:none;font-family:'Inter',sans-serif;font-weight:800;color:var(--laranja);}
@media (max-width:820px){.stats-row{grid-template-columns:repeat(2,1fr);}}

/* INSTAGRAM */
.insta{padding:90px 0;background:#fff;}
.insta-head{text-align:center;max-width:520px;margin:0 auto 32px;}
.insta-head h2{font-size:clamp(28px,4vw,40px);margin-bottom:12px;}
.insta-head p{font-size:14.5px;color:var(--muted-escuro);line-height:1.6;}

.insta-profile{display:flex;align-items:center;gap:22px;background:var(--creme);border-radius:20px;padding:20px 28px;box-shadow:0 16px 40px rgba(14,42,28,0.06);max-width:720px;margin:0 auto 36px;flex-wrap:wrap;}
.insta-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--amarelo);background:#fff;}
.insta-profile-info{display:flex;flex-direction:column;margin-right:auto;}
.insta-profile-info b{font-size:15px;}
.insta-profile-info span{font-size:12.5px;color:var(--muted-escuro);}
.insta-stats{display:flex;gap:20px;}
.insta-stats div{text-align:center;}
.insta-stats b{display:block;font-size:15px;font-family:'Anton',sans-serif;color:var(--verde);}
.insta-stats span{font-size:10px;color:var(--muted-escuro);text-transform:uppercase;letter-spacing:0.05em;}

/* Grade real (10 fotos recortadas do print do feed, 13/09/2026) — 5 colunas
   bate com a grade de verdade do Instagram (2 linhas de 5). As classes de
   gradiente/emoji (.insta-tile-bg, .tile-1..6) e o overlay de curtida/comentário
   inventado (.insta-overlay) saíram: eram só placeholder até ter foto real. */
.insta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.insta-tile{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;display:block;}
.insta-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.3,1);}
.insta-tile:hover .insta-tile-img{transform:scale(1.06);}
.insta-play{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.4);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;z-index:2;}
.insta-cta{text-align:center;margin-top:32px;}
@media (max-width:820px){.insta-grid{grid-template-columns:repeat(3,1fr);} .insta-profile{justify-content:center;}}
@media (prefers-reduced-motion:reduce){.insta-tile:hover .insta-tile-img{transform:none;}}

/* DEPOIMENTOS */
.depoimentos{padding:90px 0;background:var(--creme);}
.dep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.dep-card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 16px 40px rgba(14,42,28,0.06);}
.dep-stars{color:var(--amarelo);font-size:15px;margin-bottom:14px;letter-spacing:2px;}
.dep-card p{font-size:14px;line-height:1.65;color:rgba(18,35,26,0.75);margin-bottom:16px;}
.dep-autor{font-size:13px;font-weight:700;color:var(--verde);}
.dep-nota{grid-column:1/-1;font-size:11.5px;color:rgba(18,35,26,0.4);text-align:center;margin-top:6px;}
@media (max-width:900px){.dep-grid{grid-template-columns:1fr;}}

/* AGENDA */
.agenda{padding:100px 0;background:#fff;}
/* .painel base (fundo/sombra) — os cartões dos roteiros (.painel-par) e a agenda usam. */
.painel{background:var(--creme);border-radius:24px;padding:32px;min-height:340px;box-shadow:0 20px 60px rgba(14,42,28,0.06);}

/* CTA FINAL */
.cta-final{padding:110px 0;background:linear-gradient(135deg,var(--laranja),var(--amarelo));color:var(--texto-escuro);text-align:center;}
.cta-final h2{font-size:clamp(34px,6vw,64px);margin-bottom:18px;}
.cta-final p{font-size:15px;max-width:480px;margin:0 auto 30px;opacity:0.85;}
.cta-final .btn-primary{background:var(--texto-escuro);color:var(--texto-claro);}

/* FOOTER */
footer{background:#081810;color:var(--muted);padding:56px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:36px;}
.footer-col h4{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--amarelo);margin-bottom:16px;}
.footer-col a,.footer-col p{display:block;font-size:13px;margin-bottom:10px;color:var(--muted);}
.footer-col a:hover{color:var(--amarelo);}
.footer-social{display:flex;gap:12px;margin-top:6px;}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(245,241,230,0.25);display:flex;align-items:center;justify-content:center;font-size:14px;}
.footer-social a:hover{border-color:var(--amarelo);color:var(--amarelo);}
.footer-bottom{border-top:1px solid rgba(245,241,230,0.12);padding-top:22px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}

@media (min-width:769px) and (max-height:820px){
  .hero{padding-top:100px;padding-bottom:58px;}
}

/* RIO — trilha decorativa do bote, responsiva em 4 níveis (ver seção "Estratégia
   responsiva" do plano). A geometria (viewBox 0 0 160 1000, preserveAspectRatio="none")
   é sempre a mesma; só a posição/largura/opacidade do "corredor" mudam por tamanho de
   tela — abaixo de 480px o traço fica invisível mas a geometria segue ativa guiando o
   MotionPathPlugin, porque o personagem importa mais que a linha decorativa. */
.intro,.roteiros,.agenda,.sazonal,.pilares,.stats,.insta,.depoimentos{position:relative;}
.river-rail{
  position:absolute;top:0;bottom:0;pointer-events:none;z-index:2;
  --river-line:var(--azul-rio);
  --rail-offset:4px;--rail-width:8px;--rail-opacity:0.75;
  right:var(--rail-offset);width:var(--rail-width);opacity:var(--rail-opacity);
}
.river-rail.side-left{right:auto;left:var(--rail-offset);}
.river-svg{width:100%;height:100%;display:block;overflow:visible;}
/* Traço grosso em azul pra ler como água de verdade. São duas linhas sobrepostas:
   a debaixo (.river-path-fundo) é mais larga e translúcida e faz o "corpo" do rio;
   a de cima é o brilho da correnteza. preserveAspectRatio="none" esticaria a
   espessura junto com o viewBox — vector-effect trava a largura em px de tela. */
.river-path,.river-path-fundo{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke-opacity .3s ease;}
.river-path-fundo{stroke:var(--river-line);stroke-width:11;opacity:0.4;}
.river-path{stroke:var(--river-line);stroke-width:5;}
.pilares .river-rail{--river-line:var(--azul-rio-claro);--rail-opacity:0.85;}
/* No mobile a trilha precisa ficar afastada da borda: o bote é centralizado nela
   (alignOrigin 0.5/0.5 no ScrollController), então com offset de 4px metade do
   lobo ficava fora da tela. O afastamento acompanha metade da largura do bote. */
/* O traço agora aparece também no mobile (antes ficava com stroke-opacity:0): com
   o rail afastado 36px da borda há espaço, e um rio visível é o ponto do efeito. */
@media (max-width:479px){
  .river-rail{--rail-offset:36px;--rail-width:26px;}
  .river-path-fundo{stroke-width:8;} .river-path{stroke-width:3.5;}
}
@media (min-width:480px) and (max-width:767px){ .river-rail{--rail-offset:40px;--rail-width:32px;} }
@media (min-width:768px) and (max-width:1399px){ .river-rail{--rail-offset:40px;--rail-width:44px;} }
@media (min-width:1400px){ .river-rail{--rail-offset:calc(50% - 620px - 24px);--rail-width:84px;} }

/* mobile bem maior pra dar pra ler "MONTANA" no bote e reconhecer o lobo */
#river-boat{position:absolute;top:0;left:0;z-index:50;pointer-events:none;opacity:0;will-change:transform,opacity;width:64px;}
#river-boat.parked{position:fixed;}
@media (min-width:480px){ #river-boat{width:72px;} }
@media (min-width:768px){ #river-boat{width:67px;} }
@media (min-width:1400px){ #river-boat{width:89px;} }
#river-boat img{position:relative;width:100%;display:block;filter:drop-shadow(0 3px 6px rgba(8,20,14,0.35));}
#river-boat.flip img{transform:scaleX(-1);}
@media (prefers-reduced-motion:reduce){ #river-boat{transition:opacity .4s ease;} }

/* Balãozinho de fala do lobo — só aparece na cena de saudação da .intro.
   Fica fora do .flip de propósito: o texto nunca deve espelhar junto com a arte. */
/* Ancorado pela DIREITA, não centralizado: o bote navega junto da borda direita da
   tela, e um balão centralizado nele vazaria pra fora do viewport quando o texto
   é uma frase. Cresce pra esquerda, com o rabinho apontando pro bote. */
#river-boat-bubble{
  position:absolute;bottom:100%;right:-2px;left:auto;
  transform:translateY(-6px) scale(0.7);transform-origin:82% 100%;
  margin-bottom:9px;padding:7px 13px;border-radius:14px;
  max-width:min(250px,58vw);text-align:center;
  background:var(--amarelo);color:var(--verde-escuro);
  /* Inter e não Anton: as falas são conversa curta do lobo com o visitante, e a
     condensada de display fica apertada demais nesse tamanho de balão. */
  font-family:'Inter',sans-serif;font-weight:800;font-size:13.5px;
  letter-spacing:0.005em;line-height:1.4;
  box-shadow:0 6px 18px rgba(8,20,14,0.28);
  opacity:0;pointer-events:none;z-index:2;
  transition:opacity .28s ease,transform .34s cubic-bezier(.34,1.56,.64,1);
}
/* Reserva pra frase fora do padrão (classe posta pelo Character): encolhe mais um
   pouco em vez de virar um balão gigante. */
#river-boat-bubble.longa{font-size:12px;line-height:1.35;padding:9px 14px;}
#river-boat-bubble::after{
  content:'';position:absolute;top:100%;right:16px;
  border:6px solid transparent;border-top-color:var(--amarelo);border-bottom:0;
}
#river-boat.saudando #river-boat-bubble{opacity:1;transform:translateY(0) scale(1);}
@media (max-width:479px){
  #river-boat-bubble{font-size:12.5px;padding:6px 11px;}
  #river-boat-bubble.longa{font-size:11.5px;padding:8px 12px;}
}

@media (max-width:768px){
  .container{padding:0 20px;}
  nav{padding:14px 16px;}
  .logo{gap:8px;}
  .logo-img{width:30px;height:30px;}
  .logo-text b{font-size:14px;}
  .logo-text span{font-size:7px;letter-spacing:0.1em;}
  .nav-right{gap:10px;}
  .nav-right .btn-sm{padding:9px 15px;font-size:11px;}
  .hero{height:100vh;height:100dvh;padding:112px 0 36px;}
  .selo-nsv{width:92px;height:92px;padding:7px;margin-top:20px;}
  .selo-nsv b{font-size:10.5px;}
  .selo-nsv span{font-size:7.5px;margin-top:3px;}
  .faixa-fatos{padding:18px 0 4px;}
  .faixa-fatos .container{gap:9px;}
  .fato-pill{padding:7px 13px;font-size:9.5px;}
  .fato-txt{font-size:9.5px;}
  .fato-sep{display:none;}   /* com quebra de linha o separador vira ruído */
  .roteiros,.sazonal,.pilares,.stats,.insta,.depoimentos,.agenda,.cta-final,.intro{padding:70px 0;}
}

@media (max-width:768px) and (max-height:720px){
  .hero{padding:96px 0 24px;}
}

/* ===== ALINHAMENTO CENTRAL =====
   Bloco único no fim do <style> de propósito: centralizar é uma decisão visual
   global, e mantê-la junta aqui deixa fácil ajustar ou reverter sem caçar regra
   por regra. Por vir depois das media queries, também vence os alinhamentos
   laterais que elas definem.
   Ficam FORA as partes funcionais/tabulares — calendário, slots de horário,
   lista de pilares e colunas do rodapé — onde centralizar atrapalha a leitura. */
.eyebrow{justify-content:center;}          /* é flex, com o tracinho no ::before */

/* padding e flex do hero ficam na regra base (não aqui) pra não atropelar as
   media queries de tela baixa/estreita, que vêm antes deste bloco. */
.hero > .container{width:100%;text-align:center;}
.hero h1{margin-left:auto;margin-right:auto;}
.section-head .selo-nsv{align-self:center;}

.intro-wrap{margin-left:auto;margin-right:auto;text-align:center;}
.intro-footer{justify-content:center;}

.section-head{flex-direction:column;align-items:center;text-align:center;}
.section-head p{max-width:560px;}

.card{text-align:center;}
.card .btn-row{justify-content:center;}
/* .card-num fica no canto superior esquerdo (base): centralizado ele caía em cima
   do título, que também é centralizado. */

.sazonal-texto{text-align:center;}
.sazonal-tags{justify-content:center;}

.dep-card{text-align:center;}

/* ===========================================================================
   FAQ
   Bloco de perguntas com <details>/<summary>: acordeão nativo, sem JS, e o texto
   da resposta continua no HTML mesmo fechado — o Google indexa e casa com o
   schema FAQPage, que é o que gera o resultado rico na busca.
   =========================================================================== */
.faq{padding:90px 0;background:var(--creme);}
.faq-lista{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto;text-align:left;}
.faq-item{background:#fff;border-radius:16px;border:1px solid rgba(28,107,62,0.12);overflow:hidden;}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:18px 22px;font-weight:700;font-size:15px;color:var(--texto-escuro);list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";flex-shrink:0;font-family:'Anton',sans-serif;font-size:22px;color:var(--verde);
  transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{background:rgba(28,107,62,0.04);}
.faq-item summary:focus-visible{outline:2px solid var(--verde);outline-offset:-2px;}
.faq-resposta{padding:0 22px 20px;font-size:14.5px;line-height:1.7;color:rgba(18,35,26,0.75);}
.faq-resposta p + p{margin-top:10px;}
/* Resposta que ainda depende de confirmação do cliente. Fica visível de propósito:
   é o checklist da reunião, não pode passar despercebido e ir pro ar. */
.faq-confirmar{
  display:inline-block;margin-top:10px;padding:5px 11px;border-radius:999px;
  background:rgba(247,183,51,0.22);color:#8a5a00;font-size:11.5px;font-weight:700;
  letter-spacing:0.04em;text-transform:uppercase;
}

/* ===========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   =========================================================================== */
.wpp-flutuante{
  position:fixed;right:20px;bottom:20px;z-index:250;
  display:flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;
  border-radius:999px;background:#25D366;color:#0b2418;
  font-weight:800;font-size:14px;white-space:nowrap;
  box-shadow:0 12px 32px rgba(8,20,14,0.32);
  transition:transform .2s ease,box-shadow .2s ease;
}
.wpp-flutuante:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(8,20,14,0.4);}
.wpp-flutuante svg{width:22px;height:22px;flex-shrink:0;}
/* z-index 250: acima da nav (200), pra o botão nunca ficar atrás do menu fixo. */
@media (max-width:600px){
  .wpp-flutuante{right:14px;bottom:14px;padding:14px;}
  .wpp-flutuante span{display:none;}   /* vira só o ícone, não tapa o conteúdo */
}

/* ===========================================================================
   PÁGINAS DE ROTEIRO (site/roteiros/*.html)
   Reaproveitam .det-* da modal; aqui vão só o enquadramento da página.
   =========================================================================== */
.pagina-roteiro{background:var(--creme);}
.rot-capa{
  position:relative;min-height:56vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:150px 0 54px;color:var(--texto-claro);
  background-size:cover;background-position:center;
}
.rot-capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,14,0.35),rgba(8,20,14,0.9));}
.rot-capa > .container{position:relative;z-index:1;}
.rot-capa h1{font-size:clamp(32px,5.5vw,62px);margin-bottom:14px;}
.rot-capa .rot-resumo{font-size:16px;color:var(--muted);max-width:620px;margin:0 auto;}
.rot-sem-foto{background-image:linear-gradient(150deg,#12314f,#0E2A1C 60%,#081018);}

.rot-corpo{padding:64px 0 20px;}
.rot-corpo .container{max-width:900px;}
/* O conteúdo vem dos mesmos .det-* da modal — sem o padding que lá era do painel. */
.rot-corpo .det-corpo{padding:0;}

/* Vem logo abaixo da capa, que já tem o padding pra escapar da nav fixa.
   O reset explícito é obrigatório: o breadcrumb é um <nav>, e a regra base do
   menu é um SELETOR DE TIPO (`nav{position:fixed;top:0;z-index:200;background:
   ...verde...}`). Sem desfazer aqui, o breadcrumb virava uma segunda barra verde
   fixa no topo, cobrindo o conteúdo das páginas de roteiro. A classe vence o
   elemento em especificidade — só precisava declarar. */
.migalhas{
  position:static;background:none;z-index:auto;display:block;
  font-size:12.5px;color:var(--muted-escuro);padding:26px 0 0;
}
.migalhas a{color:var(--verde);font-weight:600;}
.migalhas a:hover{text-decoration:underline;}

.rot-outros{padding:60px 0 90px;background:#fff;}
.rot-outros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rot-outro{
  display:block;padding:22px;border-radius:18px;background:var(--creme);
  border:1px solid rgba(28,107,62,0.12);transition:transform .25s ease,box-shadow .25s ease;
}
.rot-outro:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,42,28,0.12);}
.rot-outro b{display:block;font-family:'Anton',sans-serif;font-size:19px;text-transform:uppercase;color:var(--verde-escuro);margin-bottom:6px;}
.rot-outro span{font-size:13px;line-height:1.55;color:var(--muted-escuro);}
@media (max-width:820px){ .rot-outros-grid{grid-template-columns:1fr;} }
@media (max-width:600px){
  .rot-capa{min-height:44vh;padding:120px 0 40px;}
  .rot-corpo{padding:34px 0 12px;}
  .migalhas{padding-top:20px;}
}

/* Nas páginas de roteiro o menu fica sobre fundo claro na rolagem — a nav do
   site é desenhada pra fundo escuro, então ganha um fundo sólido próprio. */
.pagina-roteiro nav{background:linear-gradient(to bottom, rgba(14,42,28,0.96), rgba(14,42,28,0.82));}


/* ===========================================================================
   REVELAÇÃO NO SCROLL
   Estado inicial de qualquer elemento marcado com .revela; o reveal.js troca
   para .visivel quando ele entra na tela. O atraso vem de --i (índice do item
   dentro do bloco), o que dá o escalonamento sem uma linha de JS por card.
   =========================================================================== */
/* O estado escondido só vale quando há JS: a classe .js é posta no <html> por um
   script inline no <head>. Se o JS falhar ou estiver desligado, esta regra nunca
   casa e o conteúdo aparece normalmente — nada de card invisível pro visitante
   nem pro rastreador do Google. */
.js .revela{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js .revela.visivel{opacity:1;transform:none;}

/* ===========================================================================
   CARDS DAS PÁGINAS DE ROTEIRO

   A "linha d'água": no hover uma faixa translúcida sobe do rodapé do card, no
   mesmo azul da trilha do rio que percorre o site. É o motivo de água aplicado
   à interação, em vez de uma barra de acento genérica.
   =========================================================================== */
.card-agua{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, border-color .35s ease;}
.card-agua::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:100%;z-index:-1;
  background:linear-gradient(to top, rgba(46,125,168,0.16), rgba(46,125,168,0) 62%);
  transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.card-agua:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(14,42,28,0.14);}
.card-agua:hover::after{transform:translateY(0);}

/* --- 1. Painel par: o que a Montana entrega × o que é sua parte ----------- */
.painel-par{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 6px;}
.painel{border-radius:20px;padding:26px 26px 28px;}
.painel h4{margin:0 0 4px;}
.painel-sub{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;margin-bottom:16px;}
.painel ul{display:flex;flex-direction:column;gap:13px;}
.painel li{position:relative;padding-left:30px;font-size:14px;line-height:1.6;}

/* Entrega da empresa: verde sólido, marcador preenchido. Lê como promessa. */
.painel-inclui{background:linear-gradient(150deg,var(--verde-escuro),#081810);color:var(--texto-claro);}
.painel-inclui h4{color:var(--texto-claro);}
.painel-inclui .painel-sub{color:var(--amarelo);}
.painel-inclui li{color:var(--muted);}
.painel-inclui li::before{
  content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:var(--verde-claro);
  box-shadow:inset 0 0 0 2px var(--verde-escuro), inset 0 0 0 4px var(--verde-claro);
  transition:background .3s ease, transform .3s ease;
}
.painel-inclui:hover li::before{background:var(--amarelo);box-shadow:inset 0 0 0 2px var(--verde-escuro), inset 0 0 0 4px var(--amarelo);}

/* Parte do visitante: claro, tracejado, marcador de caixa vazia. Lê como
   checklist que ainda vai ser cumprido. */
.painel-levar{background:#fff;border:2px dashed rgba(28,107,62,0.28);color:rgba(18,35,26,0.78);}
.painel-levar h4{color:var(--verde);}
.painel-levar .painel-sub{color:var(--muted-escuro);}
.painel-levar li::before{
  content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:5px;
  border:2px solid rgba(28,107,62,0.45);transition:border-color .3s ease, background .3s ease;
}
.painel-levar:hover li::before{border-color:var(--verde-claro);background:rgba(46,139,87,0.12);}

/* Cartões da agenda (home, #agenda): reaproveitam o painel par e ganham um
   botão de WhatsApp no pé de cada um. No hover: o cartão sobe mais, a borda
   tracejada vira linha cheia, os itens deslizam em cascata e a seta do botão
   anda — o cartão inteiro "puxa" pro clique. */
.agenda-par .painel{display:flex;flex-direction:column;min-height:0;}
.agenda-par ul{margin-bottom:24px;}
.agenda-par li{transition:transform .35s cubic-bezier(.2,.8,.3,1);}
.agenda-par .painel:hover li{transform:translateX(5px);}
.agenda-par .painel:hover li:nth-child(2){transition-delay:.05s;}
.agenda-par .painel:hover li:nth-child(3){transition-delay:.1s;}
.agenda-par .painel:hover{transform:translateY(-8px);box-shadow:0 26px 56px rgba(14,42,28,0.2);}
.agenda-par .painel-levar:hover{border-style:solid;border-color:var(--verde-claro);}
.agenda-cta{margin-top:auto;align-self:flex-start;gap:10px;}
.agenda-cta svg{width:17px;height:17px;flex:none;}
.agenda-seta{font-style:normal;display:inline-block;transition:transform .3s ease;}
.agenda-par .painel:hover .agenda-cta{transform:scale(1.04);box-shadow:0 10px 24px rgba(247,183,51,0.35);}
.agenda-par .painel:hover .agenda-seta{transform:translateX(5px);}
@media (prefers-reduced-motion:reduce){
  .agenda-par li,.agenda-seta{transition:none;}
  .agenda-par .painel:hover,.agenda-par .painel:hover li,.agenda-par .painel:hover .agenda-cta,
  .agenda-par .painel:hover .agenda-seta{transform:none;}
}

/* --- 2. Cards temáticos: conjuntos categóricos ---------------------------- */
/* Sem numeração de propósito: são domínios distintos, não uma sequência —
   numerar sugeriria uma ordem que o conteúdo não tem. A distinção vem da cor. */
.cards-tema{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:8px 0 6px;}
/* 3 colunas só onde cabem: abaixo de 821px a media query de .cards-tema assume e
   volta pra 1 coluna. Fica em classe, e não em style inline no HTML, justamente
   porque inline venceria a media query — foi esse o bug que espremia os cards
   das atrações a ~100px no celular. */
@media (min-width:821px){ .cards-tema-3{grid-template-columns:repeat(3,1fr);} }
.card-tema{
  background:#fff;border-radius:20px;padding:24px;
  border:1px solid rgba(28,107,62,0.14);border-top:3px solid var(--acento,var(--verde-claro));
}
.card-tema-marca{
  width:38px;height:38px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,107,62,0.10);  /* fallback: color-mix é recente */
  background:color-mix(in srgb, var(--acento) 15%, transparent);
  color:var(--acento);font-family:'Anton',sans-serif;font-size:17px;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.card-agua:hover .card-tema-marca{transform:scale(1.12) rotate(-4deg);}
.card-tema b{display:block;font-size:15.5px;font-weight:800;color:var(--texto-escuro);margin-bottom:7px;}
.card-tema span{display:block;font-size:13.5px;line-height:1.62;color:var(--muted-escuro);}
.acento-amarelo{--acento:#F7B733;}
.acento-verde{--acento:#2E8B57;}
.acento-azul{--acento:#2E7DA8;}
.acento-laranja{--acento:#F2994A;}

/* --- 3. Cards de aviso: ressalvas, não benefícios ------------------------- */
.cards-aviso{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:8px 0 6px;}
.card-aviso{
  background:rgba(247,183,51,0.09);border:1px solid rgba(247,183,51,0.32);
  border-radius:16px;padding:18px 20px 18px 48px;position:relative;
  font-size:13.5px;line-height:1.6;color:rgba(18,35,26,0.78);
}
.card-aviso::before{
  content:"!";position:absolute;left:18px;top:17px;
  width:20px;height:20px;border-radius:50%;background:var(--amarelo);color:var(--verde-escuro);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:13px;
}

/* --- 4. Durações do rafting: card existente, mesmo tratamento ------------- */
.det-opcoes .det-opcao{transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;}

/* ===========================================================================
   TRILHA DE ATRAÇÕES
   Um caminho vertical que desce a página, com as paradas alternando de lado —
   a leitura vira um percurso, não uma lista. Usa o mesmo azul do rio que já
   percorre o site, pra ser a mesma linguagem e não um componente estrangeiro.
   =========================================================================== */
.trilha{position:relative;padding:10px 0 6px;}
/* A linha do caminho. Fica atrás dos cards e some no mobile, onde não há dois
   lados pra alternar e ela viraria só um risco solto na lateral. */
.trilha::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:linear-gradient(to bottom,
    rgba(46,125,168,0) 0%, rgba(46,125,168,0.45) 6%,
    rgba(46,125,168,0.45) 94%, rgba(46,125,168,0) 100%);
  border-radius:2px;
}
.parada{position:relative;display:grid;grid-template-columns:1fr 62px 1fr;align-items:center;
  gap:0;margin-bottom:34px;}
.parada:last-child{margin-bottom:0;}
/* A marca na linha: o ponto onde a pessoa "chega" naquela parada. */
.parada-marca{
  grid-column:2;justify-self:center;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--creme);border:3px solid var(--azul-rio);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:17px;color:var(--verde-escuro);
  box-shadow:0 6px 18px rgba(14,42,28,0.16);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.parada:hover .parada-marca{transform:scale(1.14);background:var(--azul-rio);color:#fff;}
.parada-card{
  grid-column:1;background:#fff;border-radius:20px;overflow:hidden;
  border:1px solid rgba(28,107,62,0.12);
}
/* Alterna o lado: a parada par nasce à direita da linha. O grid-column explícito
   já resolve — a ordem no HTML segue sempre a mesma, o que mantém a leitura por
   teclado e por leitor de tela na ordem correta do percurso. */
.parada:nth-child(even) .parada-card{grid-column:3;}

.parada-foto{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.3,1);}
.parada-card:hover .parada-foto{transform:scale(1.06);}
/* Parada sem foto própria: o gradiente da marca segura o mesmo formato. */
.parada-sem-foto{aspect-ratio:16/10;background:linear-gradient(150deg,#1C6B3E,#0E2A1C 70%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:38px;color:rgba(247,183,51,0.5);}
.parada-texto{padding:20px 22px 22px;}
.parada-tipo{font-size:10.5px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--azul-rio);margin-bottom:7px;}
.parada-texto h3{font-family:'Inter',sans-serif;font-weight:800;font-size:17px;
  text-transform:none;letter-spacing:0;line-height:1.3;color:var(--texto-escuro);margin-bottom:8px;}
.parada-texto p{font-size:13.5px;line-height:1.62;color:var(--muted-escuro);margin:0;}

/* Bloco menor: o que existe na região mas NÃO faz parte do city tour. A
   distinção é de conteúdo, não de estética — prometer cachoeira num passeio a
   pé pelo centro seria o mesmo erro do camping no ponto do rafting. */
.perto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.perto-item{background:var(--creme);border:1px solid rgba(28,107,62,0.14);
  border-radius:16px;padding:18px 20px;}
.perto-item b{display:block;font-size:14.5px;color:var(--texto-escuro);margin-bottom:5px;}
.perto-item span{font-size:13px;line-height:1.55;color:var(--muted-escuro);}

.creditos-fotos{margin-top:26px;font-size:11.5px;line-height:1.6;color:rgba(18,35,26,0.45);
  text-align:center;}
.creditos-fotos a{color:rgba(18,35,26,0.6);text-decoration:underline;}

/* ===========================================================================
   SELO DE AVALIAÇÃO EXTERNA
   Nota de terceiro (TripAdvisor) entra como texto visível com atribuição, e
   NUNCA como aggregateRating no schema: o Google trata nota de fora marcada
   como própria do site como violação, com penalidade manual.
   =========================================================================== */
.selo-nota{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;
  background:#fff;border:1px solid rgba(28,107,62,0.16);border-radius:20px;
  padding:22px 26px;margin:8px 0 6px;text-align:left;
}
.selo-nota-num{font-family:'Anton',sans-serif;font-size:44px;line-height:1;color:var(--verde);}
.selo-nota-info{display:flex;flex-direction:column;gap:3px;}
.selo-nota-estrelas{color:var(--amarelo);font-size:16px;letter-spacing:2px;}
.selo-nota-texto{font-size:13px;color:var(--muted-escuro);}
.selo-nota .btn{margin-left:auto;}

/* Galeria de fotos reais da operação (quadros do vídeo da própria Montana). */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px;}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;}
.galeria img:hover{transform:scale(1.04);box-shadow:0 18px 40px rgba(14,42,28,0.2);}

/* --- Responsivo ---------------------------------------------------------- */
@media (max-width:820px){
  .painel-par,.cards-tema,.cards-aviso,.perto-grid{grid-template-columns:1fr;}
  .painel{padding:22px 20px 24px;}
  .galeria{grid-template-columns:repeat(2,1fr);}
  /* Coluna única: a linha central e a alternância deixam de fazer sentido, e a
     marca passa a ficar sobre o topo do card. */
  .trilha::before{display:none;}
  .parada{grid-template-columns:1fr;margin-bottom:22px;}
  .parada-card,.parada:nth-child(even) .parada-card{grid-column:1;}
  .parada-marca{grid-column:1;justify-self:start;margin-bottom:-22px;margin-left:16px;
    position:relative;width:38px;height:38px;font-size:15px;}
}
@media (prefers-reduced-motion:reduce){
  .js .revela{opacity:1;transform:none;transition:none;transition-delay:0s;}
  .card-agua,.card-agua::after,.card-tema-marca{transition:none;}
  .card-agua:hover{transform:none;}
  .card-agua:hover::after{transform:translateY(100%);}
}

/* ===========================================================================
   BLOCO DE PREÇO (páginas de serviço)
   Reaproveita .det-opcoes/.det-opcao/.card-agua. O valor entra num .preco-valor
   com data-preco="chave" pra ser preenchido depois num só lugar. Enquanto não
   houver número real, .preco-valor.pendente mostra "valores pelo WhatsApp" — não
   publicar "R$ —" em página que é destino de anúncio.
   =========================================================================== */
.preco-parcelas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:4px 0 16px;}
.preco-item .preco-valor{display:block;font-family:'Anton',sans-serif;font-size:26px;
  color:var(--verde);margin:2px 0;line-height:1.05;}
.preco-item .preco-parcela{display:block;font-size:12.5px;font-weight:700;color:var(--laranja);
  letter-spacing:0.02em;margin-bottom:8px;}
.preco-valor.pendente{color:var(--muted-escuro);font-family:'Inter',sans-serif;font-size:14.5px;
  font-weight:700;}
.preco-obs{font-size:12px;color:var(--muted-escuro);margin:12px 0 6px;line-height:1.5;}

/* ===========================================================================
   FITA DE FOTOS — faixa horizontal contínua, puro CSS (sem lib de carrossel).
   A trilha tem a lista de fotos duplicada uma vez; a animação anda -50% da
   largura total, que é exatamente uma volta do conjunto original — a costura
   entre o fim e a volta ao início fica invisível. Decorativa (fotos com
   alt="" e wrapper aria-hidden): o conteúdo real já foi descrito em texto
   nas seções acima.
   =========================================================================== */
.foto-fita{overflow:hidden;margin:30px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.foto-fita-trilho{display:flex;gap:12px;width:max-content;animation:fita-rola 50s linear infinite;}
.foto-fita:hover .foto-fita-trilho{animation-play-state:paused;}
.foto-fita-trilho img{height:130px;width:190px;object-fit:cover;border-radius:14px;flex-shrink:0;display:block;}
@keyframes fita-rola{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:600px){.foto-fita-trilho img{height:92px;width:134px;}}
@media (prefers-reduced-motion:reduce){
  .foto-fita-trilho{animation:none;flex-wrap:wrap;width:100%;}
  .foto-fita{-webkit-mask-image:none;mask-image:none;}
}

/* Variante "logo abaixo do hero": full-bleed (sem .container — corre de ponta
   a ponta da tela, como uma faixa de notícia), imagens bem menores. A
   velocidade acompanha o tamanho: a trilha fica bem mais curta que a versão
   grande, então a duração cai também — senão ela pareceria mais rápida do
   que devia (mesmo px/s, mas o giro inteiro passa rápido demais pra ler). */
.foto-fita-hero{margin:0;background:var(--creme);padding:12px 0;}
.foto-fita-hero .foto-fita-trilho{gap:8px;animation-duration:34s;}
.foto-fita-hero .foto-fita-trilho img{height:70px;width:104px;border-radius:9px;}
@media (max-width:600px){
  .foto-fita-hero .foto-fita-trilho{gap:6px;animation-duration:26s;}
  .foto-fita-hero .foto-fita-trilho img{height:54px;width:80px;border-radius:7px;}
}

/* ===========================================================================
   ROTEIROS DE RAFTING (ficha do Guto, 03/10/2026)
   A Montana parou de vender "2h/4h/6h" e passou a vender quatro trechos com
   nome proprio. Sao usados na home (secao .rafting, que e a pagina de venda)
   e na pagina do rafting, com a mesma marcacao nos dois lugares.

   Duas pecas: .roteiro-comparativo (os quatro lado a lado, pra bater o olho e
   escolher) e .roteiro-bloco (foto + texto de cada um, alternando o lado).
   O resto reaproveita .card-agua, .revela, .fato-pill e .btn.
   =========================================================================== */
.rafting{padding:90px 0;background:var(--creme);position:relative;}

/* Quatro colunas de largura igual. minmax(0,1fr) e nao 1fr: o conteudo minimo
   de uma coluna de grid e "auto", entao um nome longo ("Santa Virginia")
   esticaria a coluna e desalinharia as outras tres. */
.roteiro-comparativo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:8px 0 10px;}
.roteiro-card{background:#fff;border-radius:18px;padding:22px 20px 20px;border:1px solid rgba(28,107,62,0.14);
  display:flex;flex-direction:column;text-align:left;}
/* Santa Virginia e o roteiro que a Montana quer vender mais (Vitor,
   06/10/2026): vem primeiro e com moldura laranja + selo. */
.roteiro-card.destaque{border:2px solid var(--laranja);box-shadow:0 16px 40px rgba(242,153,74,0.22);position:relative;}
.roteiro-card-selo{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--amarelo),var(--laranja));color:var(--texto-escuro);
  padding:5px 11px;border-radius:999px;margin-bottom:10px;}
.roteiro-card-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px;}
.roteiro-card-nome{font-family:'Anton',sans-serif;font-size:21px;line-height:1.1;color:var(--verde);
  text-transform:uppercase;}
.roteiro-card-tempo{font-size:12px;font-weight:800;color:var(--laranja);letter-spacing:0.04em;white-space:nowrap;}

/* Ficha tecnica: rotulo a esquerda, valor a direita, com linha pontilhada
   ligando os dois. E a leitura de quem compara trecho por trecho. */
.roteiro-ficha{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.roteiro-ficha div{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--muted-escuro);}
.roteiro-ficha dt{flex-shrink:0;}
.roteiro-ficha i{flex:1;border-bottom:1px dotted rgba(28,107,62,0.3);font-style:normal;}
.roteiro-ficha dd{flex-shrink:0;font-weight:700;color:var(--texto-escuro);}

/* Barra de nivel: 5 tracos, os preenchidos ate o nivel maximo do trecho.
   Mostra "quao pesado e" sem o visitante precisar saber o que significa
   "nivel 4" na escala internacional de corredeira. */
.roteiro-nivel{display:flex;gap:3px;align-items:center;}
.roteiro-nivel s{width:13px;height:5px;border-radius:3px;background:rgba(28,107,62,0.18);text-decoration:none;display:block;}
.roteiro-nivel s.on{background:var(--verde-claro);}
.roteiro-nivel s.on.forte{background:var(--laranja);}

.roteiro-card-preco{margin-top:auto;padding-top:14px;border-top:1px solid rgba(28,107,62,0.1);}
.roteiro-card-preco b{display:block;font-family:'Anton',sans-serif;font-size:27px;line-height:1.05;color:var(--verde);}
.roteiro-card-preco span{display:block;font-size:12.5px;font-weight:700;color:var(--laranja);margin-top:3px;}
.roteiro-card-preco a{display:block;margin-top:12px;width:100%;}

/* Blocos detalhados: foto de um lado, texto do outro, invertendo a cada bloco
   (:nth-child(even)) pra a sequencia nao virar uma coluna repetida. */
/* Pedido do Vitor (06/10/2026): no PC os blocos pareciam "grudados", um
   emendando no outro. Agora cada trecho e uma moldura propria: borda mais
   marcada, sombra, faixa colorida no topo e bem mais respiro entre eles. */
.roteiro-blocos{display:flex;flex-direction:column;gap:56px;margin-top:48px;}
.roteiro-bloco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  background:#fff;border-radius:24px;overflow:hidden;border:2px solid rgba(28,107,62,0.18);
  box-shadow:0 18px 44px rgba(14,42,28,0.10);border-top:6px solid var(--verde-claro);}
.roteiro-bloco.destaque{border-top-color:var(--laranja);border-color:rgba(242,153,74,0.45);
  border-top-width:6px;box-shadow:0 22px 54px rgba(242,153,74,0.18);}
.roteiro-bloco:nth-child(even) .carrossel{order:2;}
.roteiro-bloco-foto{width:100%;height:100%;min-height:260px;object-fit:cover;display:block;}

/* CARROSSEL de fotos de cada trecho. scroll-snap faz o arrastar no celular
   sem JS; carrossel.js poe setas, bolinhas e contador por cima. */
.carrossel{position:relative;min-height:340px;background:var(--verde-escuro);}
.carrossel-trilho{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;scroll-behavior:smooth;}
.carrossel-trilho::-webkit-scrollbar{display:none;}
.carrossel-trilho img,.carrossel-trilho video{flex:0 0 100%;width:100%;height:100%;min-height:340px;object-fit:cover;
  scroll-snap-align:start;display:block;}.carrossel-seta{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,0.92);color:var(--verde-escuro);
  font-size:22px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);transition:transform .15s ease,background .15s ease;z-index:2;}
.carrossel-seta:hover{background:var(--amarelo);transform:translateY(-50%) scale(1.08);}
.carrossel-seta.anterior{left:14px;} .carrossel-seta.proxima{right:14px;}
.carrossel-contador{position:absolute;top:14px;right:14px;z-index:2;font-size:12px;font-weight:700;
  color:#fff;background:rgba(8,20,14,0.6);padding:5px 11px;border-radius:999px;letter-spacing:0.04em;}
.carrossel-pontos{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:2;}
.carrossel-pontos button{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,0.55);transition:width .2s ease,background .2s ease;}
.carrossel-pontos button.ativo{width:22px;border-radius:5px;background:var(--amarelo);}
.carrossel.so-uma .carrossel-seta,.carrossel.so-uma .carrossel-contador,.carrossel.so-uma .carrossel-pontos{display:none;}
/* Sem JS (ou antes dele rodar) as setas nao fazem nada: escondidas. */
html:not(.js) .carrossel-seta,html:not(.js) .carrossel-contador{display:none;}
.roteiro-bloco-txt{padding:30px 32px;display:flex;flex-direction:column;}
.roteiro-bloco-txt h3{font-size:26px;color:var(--verde);margin-bottom:6px;}
.roteiro-bloco-txt p{font-size:14.5px;line-height:1.68;color:rgba(18,35,26,0.76);margin-bottom:14px;}
.roteiro-selos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.roteiro-selo{font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:999px;
  background:rgba(28,107,62,0.08);color:var(--verde);white-space:nowrap;}
.roteiro-selo.preco{background:linear-gradient(135deg,var(--amarelo),var(--laranja));color:var(--texto-escuro);}
.roteiro-bloco-txt .btn-row{margin-top:auto;}

/* Passo a passo do dia (base -> van -> rio -> volta). Numeracao no ::before,
   pra a ordem ficar no CSS e o HTML continuar so conteudo. */
.dia-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:8px 0 6px;counter-reset:passo;}
.dia-passo{background:#fff;border-radius:18px;padding:24px 22px;border:1px solid rgba(28,107,62,0.14);
  position:relative;counter-increment:passo;}
/* O numero fica DENTRO do card: o .card-agua tem overflow:hidden (precisa
   dele pro efeito de agua subindo no hover), entao um selo meio pra fora
   aparecia cortado ao meio. */
.dia-passo::before{content:counter(passo);
  width:32px;height:32px;border-radius:50%;background:var(--verde);color:var(--texto-claro);
  font-family:'Anton',sans-serif;font-size:16px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;}
.dia-passo b{display:block;font-size:15px;font-weight:800;color:var(--texto-escuro);margin:0 0 7px;}
.dia-passo span{display:block;font-size:13.5px;line-height:1.6;color:var(--muted-escuro);}
.dia-passo em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--laranja);margin-top:9px;}

.creditos-foto-canto{font-size:11px;color:var(--muted);text-align:right;margin-top:8px;}

@media (max-width:980px){
  .roteiro-comparativo,.dia-passos{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .rafting{padding:66px 0;}
  /* Uma coluna so: a foto volta pro topo mesmo nos blocos invertidos, senao o
     order:2 jogaria a imagem pra DEPOIS do texto so em metade dos blocos. */
  .roteiro-bloco{grid-template-columns:1fr;}
  .roteiro-bloco:nth-child(even) .carrossel{order:0;}
  .roteiro-blocos{gap:36px;}
  .carrossel,.carrossel-trilho img,.carrossel-trilho video{min-height:0;}
  .carrossel-trilho img,.carrossel-trilho video{aspect-ratio:4/3;height:auto;}
  .carrossel-seta{width:38px;height:38px;font-size:19px;}
  .roteiro-bloco-txt{padding:24px 22px;}
}
@media (max-width:520px){
  .roteiro-comparativo,.dia-passos{grid-template-columns:1fr;}
  .dia-passos{gap:14px;}
}