/* ═══════════════════════════════════════════════════════════════
   ROCINHA COUSINS — "sobe o morro"

   O QUE ESTE SITE É
   Um tour, não uma butique. Dois primos de vinte e poucos anos
   levando gringo pra cima do morro de moto-táxi. Tem que parecer
   jovem e caro ao mesmo tempo — marca de streetwear, não agência
   de turismo.

   COR
   Um acento quente só: o laranja de luz de sódio. É a cor real da
   iluminação dos becos à noite e da hora dourada batendo na
   encosta. Não é laranja de moodboard: é a luz que existe lá.
   Todo o resto é asfalto e cal, para o laranja nunca disputar.

   A ASSINATURA — O CORTE DO MORRO
   As seções não se empilham com borda reta. O hero e o rodapé
   cortam na diagonal, descendo da esquerda para a direita, no
   mesmo sentido da encosta que aparece na foto. A Rocinha é uma
   diagonal; a página passou a ser também.
   Só dois cortes na página inteira. Repetir em toda seção
   transformaria a ideia em enfeite.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --asfalto:#0A0A0C;
  --asfalto-2:#131317;
  --asfalto-3:#1C1C21;
  --sodio:#FF5A1E;
  --sodio-2:#FF8348;
  --cal:#F4F1EC;
  --cinza:#9C958B;
  --linha:rgba(244,241,236,.15);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;

  --pad:clamp(18px,5vw,72px);
  --secao:clamp(72px,10vw,140px);
  --max:1320px;
  --corte:clamp(26px,5.5vw,96px);   /* a altura da diagonal do morro */
  --sangra:calc(max(var(--pad), (100vw - var(--max))/2) * -1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--asfalto)}
body{
  background:var(--asfalto);color:var(--cal);
  font-family:var(--body);font-size:17px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;font-synthesis-weight:none;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--sodio);outline-offset:3px}

/* ── tipografia ────────────────────────────────────────────────
   Archivo tem eixo de largura. O display usa a largura expandida
   no peso máximo — é o que dá cara de pôster em vez de cara de
   folheto. O corpo usa a mesma família na largura normal, então a
   página inteira fala com uma voz só. */
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;line-height:.9}
/* A escala vem de medição, não de gosto: a palavra mais larga do site é
   "EXPERIÊNCIA" (pt/es), que ocupa 6,87px de largura para cada 1px de
   corpo. Com 12vw ela cabe com folga em toda tela de celular; com os 13vw
   anteriores ela estourava e era cortada em silêncio pelo overflow-x do
   body — dava para ver "EXPERIENC" sem o E final.
   O break-word é rede de segurança: se algum dia entrar uma palavra ainda
   maior, ela quebra em vez de sumir pela borda. */
h1{font-variation-settings:'wdth' 125,'wght' 900;font-size:clamp(38px,12vw,150px);overflow-wrap:break-word}
h2{font-variation-settings:'wdth' 118,'wght' 900;font-size:clamp(34px,6vw,84px)}
h3{font-variation-settings:'wdth' 112,'wght' 800;font-size:clamp(26px,3.4vw,46px);line-height:.95}
p{max-width:60ch}

.deck{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--cinza);max-width:44ch}

/* etiqueta utilitária: duração, tamanho do grupo, placa de rua */
.tag{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sodio);
}
.tag-cinza{color:var(--cinza)}

/* ── barra de topo ─────────────────────────────────────────── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px var(--pad);
  transition:background .3s,border-color .3s;border-bottom:1px solid transparent;
}
.topbar.solid{background:rgba(10,10,12,.9);backdrop-filter:blur(14px);border-bottom-color:var(--linha)}
.brand{
  font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 900;
  font-size:15px;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;
}
.brand span{color:var(--sodio)}

.navlinks{display:none}
@media(min-width:1080px){
  .navlinks{display:flex;gap:26px;margin-right:auto;margin-left:44px}
  .navlinks a{
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--cinza);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
  }
  .navlinks a:hover{color:var(--cal);border-bottom-color:var(--sodio)}
}

.langs{display:flex;border:1px solid var(--linha)}
.langs button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 4px;transition:color .18s,background .18s;
}
.langs button:hover{color:var(--cal)}
.langs button[aria-pressed="true"]{background:var(--sodio);color:var(--asfalto)}

/* ── botões ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 800;
  font-size:14.5px;text-transform:uppercase;letter-spacing:.01em;
  padding:17px 26px;border:1.5px solid transparent;
  transition:background .18s,color .18s,transform .18s,border-color .18s;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-laranja{background:var(--sodio);color:var(--asfalto)}
.btn-laranja:hover{background:var(--sodio-2);transform:translateY(-2px)}
.btn-linha{border-color:var(--linha);color:var(--cal)}
.btn-linha:hover{border-color:var(--sodio);color:var(--sodio);transform:translateY(-2px)}
.btn-cal{background:var(--cal);color:var(--asfalto)}
.btn-cal:hover{background:#fff;transform:translateY(-2px)}

/* ── hero ──────────────────────────────────────────────────────
   Mídia em tela cheia com o título por cima, e o véu escuro só no
   terço de baixo — o meio da imagem, que é onde está a favela,
   fica limpo. Um véu no quadro inteiro apagaria justamente o
   assunto, que foi o erro da versão anterior. */
/* O padding é zerado aqui de propósito: o hero é um <section> e herdava o
   respiro da regra genérica, que somava ao padding do .hero-inner. Dava
   respiro lateral em dobro (36px a menos de linha, o que cortava o título)
   e um vão morto embaixo. Quem controla o espaçamento do hero é o
   .hero-inner, sozinho. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:0}
/* O menu fica fixo por cima do hero. Quando o conteudo era mais alto que a
   tela, o comeco do titulo entrava por baixo dele: pegava ate o ingles em
   notebook de 1280x800 e 1366x768. Com este respiro no topo, se faltar
   altura o hero cresce para baixo em vez de o titulo sumir sob o menu. */
.hero{padding-top:88px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 72%;
}
/* Numa tela estreita e alta, o material vertical cabe quase inteiro e o
   object-position não tem folga para morder: sobra céu e a favela fica
   espremida atrás do texto. Uma aproximação leve, ancorada no terço de
   baixo, empurra o céu para fora e traz o assunto para a tela. */
@media(max-width:700px){
  .hero-media video,.hero-media img{transform:scale(1.28);transform-origin:center 74%}
}
/* Botao de tocar o video, escondido ate fazer falta. Fica na borda direita,
   na altura em que nao encosta nem no menu de cima nem no texto de baixo.
   48px de alvo, acima dos 44 do minimo. */
.hero-play{
  position:absolute;right:14px;top:28%;z-index:2;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(244,241,236,.5);
  background:rgba(10,10,12,.45);backdrop-filter:blur(3px);
  color:var(--cal);transition:border-color .18s,color .18s,background .18s;
}
.hero-play:hover{border-color:var(--sodio);color:var(--sodio);background:rgba(10,10,12,.7)}
.hero-play svg{width:22px;height:22px;margin-left:2px}
/* Em tela estreita e baixa o hero comprime e o titulo sobe: os 28% caem
   em cima dele. Ali o botao vai para logo abaixo do menu, que e a unica
   faixa livre que sobra. */
@media(max-width:360px){ .hero-play{top:96px} }

/* Sobre foto, a borda a 15% some. No hero ela precisa de mais presença. */
.hero .btn-linha{border-color:rgba(244,241,236,.5);backdrop-filter:blur(2px)}
.hero .btn-linha:hover{border-color:var(--sodio)}
/* O véu é forte em cima (para o menu ler) e forte embaixo (para o texto
   ler), mas quase inexistente na faixa do meio — que é onde está a favela.
   Escurecer o quadro inteiro apagaria o assunto; deixar tudo limpo tornaria
   o texto ilegível. O degradê resolve os dois sem escolher um. */
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(10,10,12,.62) 0,
    rgba(10,10,12,.10) 20%,
    rgba(10,10,12,.06) 38%,
    rgba(10,10,12,.70) 60%,
    rgba(10,10,12,.93) 84%,
    var(--asfalto) 100%);
}
/* O CORTE DO MORRO: a base do hero desce da esquerda para a
   direita, no mesmo sentido da encosta da foto.
   O fio laranja marca a aresta. Sem ele o corte é preto contra
   preto e a ideia desaparece — a diagonal precisa ser vista para
   valer como assinatura. */
.corte{position:absolute;left:0;right:0;bottom:-1px;height:var(--corte);z-index:3;pointer-events:none}
.corte::before,.corte::after{
  content:'';position:absolute;left:0;right:0;top:0;height:100%;
  clip-path:polygon(0 0,100% 100%,100% 101%,0 101%);
}
.corte::before{background:var(--sodio);transform:translateY(-3px)}
.corte::after{background:var(--asfalto)}
.hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) calc(var(--corte) + clamp(28px,5vh,64px));
}
/* A medida era 11ch, e esse foi o defeito: ch e a largura do zero, que
   nesta fonte vale 0,57em, entao 11ch dava 6,27em. EXPERIENCIA mede 6,76em,
   VERDADEIRA 6,53em e ate EXPERIENCE 6,44em. Nenhuma cabia, e o
   overflow-wrap herdado do h1 partia a palavra no meio.
   7.8em e maior que a palavra mais longa dos quatro idiomas e menor que
   qualquer par que nao deve dividir linha, como THE REAL ROCINHA (9,8em).
   Por ser em em, acompanha o tamanho da letra: o titulo tem a mesma
   composicao em qualquer tela, tres linhas nos quatro idiomas.
   O tamanho da letra obedece a tres tetos ao mesmo tempo: 12vw, a coluna
   dividida pela medida (a palavra mais longa sempre cabe) e a altura da
   tela menos o menu e o resto do bloco (os botoes ficam na primeira tela).
   Medido em 14 telas de 320 a 2560, nos quatro idiomas. */
.hero h1{
  max-width:7.8em;text-shadow:0 2px 30px rgba(10,10,12,.5);
  overflow-wrap:normal;word-break:normal;hyphens:manual;
  font-size:clamp(30px,min(12vw,calc((100vw - 2 * var(--pad)) / 7.9),calc((100svh - 460px) / 2.7)),150px);
}
.hero h1 em{font-style:normal;color:var(--sodio)}
/* Sobre foto o texto de apoio não pode ser cinza: some. Fica cal, com uma
   sombra fechada que o descola do fundo sem precisar de mais véu. */
.hero .deck{margin:20px 0 28px;color:var(--cal);text-shadow:0 1px 16px rgba(10,10,12,.9)}
.hero .fala{text-shadow:0 1px 12px rgba(10,10,12,.9)}
.hero .fala b{color:var(--cal)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.fala{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);
}
.fala b{color:var(--cal);font-weight:400}

/* ── ticker ────────────────────────────────────────────────────
   Laranja chapado, texto preto: é a faixa que grita, e por isso
   fica sozinha nesse papel na página inteira. */
.ticker{background:var(--sodio);color:var(--asfalto);overflow:hidden;padding:13px 0}
.ticker-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.ticker-group{display:flex;align-items:center;flex:none}
.ticker-item{
  display:flex;align-items:center;gap:9px;padding:0 22px;flex:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;font-weight:700;
}
.ticker-item svg{width:15px;height:15px;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── seções ────────────────────────────────────────────────── */
section{padding:var(--secao) var(--pad)}
section,footer{scroll-margin-top:70px}
.wrap{max-width:var(--max);margin:0 auto}
.head{max-width:700px;margin-bottom:clamp(34px,5vw,60px)}
.head .tag{display:block;margin-bottom:14px}
.head .deck{margin-top:18px;max-width:52ch}

/* ── experiências ──────────────────────────────────────────────
   A foto sangra até a borda da tela, alternando de lado. Card com
   margem dos dois lados é linguagem de e-commerce; sangrar é o que
   faz parecer editorial de marca. */
.exp{display:grid;gap:clamp(22px,3vw,44px);margin-bottom:var(--secao)}
.exp:last-of-type{margin-bottom:0}
.exp-body{align-self:center}
/* A etiqueta numerada existe para responder a uma dúvida real: o nome antigo
   ("Rocinha & Vidigal") fazia parecer que os passeios vinham juntos num pacote.
   O número diz que são três coisas separadas e que a pessoa escolhe uma. */
.exp-tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:16px}
.exp-num{background:var(--sodio);color:var(--asfalto);padding:4px 9px;letter-spacing:.12em}
.exp-body h3{margin-bottom:16px}
.exp-body p{color:var(--cinza);margin-bottom:26px;max-width:48ch}
.exp .ph{aspect-ratio:4/5}

@media(min-width:900px){
  .exp{grid-template-columns:.95fr 1.05fr;align-items:center;gap:clamp(36px,4vw,72px)}
  .exp .ph{aspect-ratio:4/5}
  /* Sangra para fora do .wrap até a borda da janela. A distância até a borda
     é o MAIOR entre o respiro lateral da seção e a sobra da centralização —
     não a soma dos dois. Somar jogava a foto 60px para fora em telas de 1440
     e criava barra de rolagem horizontal. */
  .exp .exp-media{margin-left:var(--sangra)}
  .exp:nth-of-type(even) .exp-media{order:2;margin-left:0;margin-right:var(--sangra)}
  .exp:first-of-type{align-items:start}
  .exp:first-of-type .exp-media{position:sticky;top:86px}
}

/* ── a rota ────────────────────────────────────────────────────
   O tour é uma sequência real, com paradas reais e nesta ordem —
   por isso ela pode ser listada sem virar enfeite. O traço cheio é
   o que se faz a pé; o picotado é o trecho de moto-táxi. */
.rota{list-style:none;margin:0 0 22px;padding:0}
.rota li{position:relative;padding:0 0 20px 28px;display:grid;gap:2px}
.rota li:last-child{padding-bottom:0}
.rota li::before{
  content:'';position:absolute;left:0;top:6px;width:9px;height:9px;
  background:var(--asfalto);border:2px solid var(--sodio);
}
.rota li::after{
  content:'';position:absolute;left:4px;top:17px;bottom:-1px;border-left:2px solid var(--sodio);
}
.rota li:last-child::after{display:none}
.rota li.moto::after{border-left-style:dashed}
.rota li.moto::before{background:var(--sodio)}
/* O item de fecho não é uma parada: é o sinal de que a lista continua.
   Ganha um "+" no lugar do quadrado e não puxa traço para baixo. */
.rota li.mais{padding-bottom:0}
.rota li.mais::before{
  content:'+';border:0;background:none;color:var(--sodio);
  width:auto;height:auto;left:-2px;top:-4px;
  font-family:var(--mono);font-size:19px;line-height:1;font-weight:700;
}
.rota li.mais .parada{color:var(--cinza)}
.rota .parada{
  font-family:var(--display);font-variation-settings:'wdth' 105,'wght' 700;
  font-size:16px;text-transform:uppercase;letter-spacing:.01em;
}
.rota .como{font-family:var(--mono);font-size:12.5px;color:var(--cinza);line-height:1.4}
.rota-legenda{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin:-4px 0 26px 28px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--cinza);
}
.rota-legenda span{display:inline-flex;align-items:center;gap:7px}
.rota-legenda i{display:block;width:18px;border-top:2px solid var(--sodio)}
.rota-legenda i.tracejado{border-top-style:dashed}

/* ── add-ons ───────────────────────────────────────────────────
   Usa <details>, que e o botao de abrir e fechar nativo do navegador:
   continua funcionando com o JavaScript desligado, ja vem acessivel por
   teclado e nao acrescenta uma linha de script ao site.

   ATENCAO: existem regras globais de "details" e "summary" mais abaixo,
   escritas para o FAQ, com 26px e borda embaixo. Elas caem sozinhas em
   qualquer <details> novo, entao tudo aqui precisa sobrescrever. Sem isto
   o add-on sai com cara de pergunta frequente gigante no meio da coluna. */
.addons{border-bottom:0;border-top:1px solid var(--linha);margin:26px 0}
.addons summary{
  list-style:none;cursor:pointer;position:relative;
  padding:15px 34px 15px 0;min-height:44px;
  display:flex;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cinza);line-height:1.5;
  border-bottom:1px solid var(--linha);transition:color .18s;
}
.addons summary:hover{color:var(--cal)}
.addons summary::-webkit-details-marker{display:none}
/* O mesmo "+" do FAQ, para a pagina ter um sinal so de "abre aqui". */
.addons summary::after,.addons summary::before{
  content:'';position:absolute;right:8px;top:50%;
  width:12px;height:2px;background:var(--sodio);transform:translateY(-50%);
}
.addons summary::before{transform:translateY(-50%) rotate(90deg);transition:transform .2s}
.addons[open] summary::before{transform:translateY(-50%) rotate(0)}
.add-sub{font-family:var(--mono);font-size:12px;color:var(--cinza);line-height:1.5;padding:16px 0 4px;max-width:46ch}
.add-list{list-style:none;margin:0;padding:0}
/* Mesmo par tipografico da lista da rota, logo acima: o bloco tem que
   parecer parte da mesma lista, e nao um enxerto. */
.add-list li{padding:14px 0;border-bottom:1px solid var(--linha);display:grid;gap:3px}
.add-list li:last-child{border-bottom:0}
.add-nome{
  font-family:var(--display);font-variation-settings:'wdth' 105,'wght' 700;
  font-size:16px;text-transform:uppercase;letter-spacing:.01em;color:var(--cal);
}
.add-desc{font-family:var(--mono);font-size:12.5px;color:var(--cinza);line-height:1.45;max-width:48ch}

/* ── fotos ─────────────────────────────────────────────────── */
.ph{position:relative;width:100%;overflow:hidden;background:var(--asfalto-2);display:block}
.ph img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.ph:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.ph:hover img{transform:none}}

/* ── carrossel ─────────────────────────────────────────────── */
.carousel{position:relative;width:100%;height:100%}
.carousel-track{
  display:flex;width:100%;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 100%;height:100%;scroll-snap-align:start}
.carousel-slide img{width:100%;height:100%;object-fit:cover;object-position:center 70%;display:block}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:0;
  background:rgba(10,10,12,.66);backdrop-filter:blur(6px);
  border:1px solid var(--linha);color:var(--cal);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s;z-index:2;padding:0;
}
.car-btn svg{width:16px;height:16px}
.car-btn:hover{background:var(--sodio);border-color:var(--sodio);color:var(--asfalto)}
.car-prev{left:10px}
.car-next{right:10px}
.car-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:2px;z-index:2}
.car-dot{width:28px;height:28px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.car-dot::before{content:'';width:16px;height:3px;background:rgba(244,241,236,.4);transition:background .2s}
.car-dot.active::before{background:var(--sodio)}
.carousel.single .car-btn,.carousel.single .car-dots{display:none}

/* ── os primos ─────────────────────────────────────────────── */
.cousins{background:var(--asfalto-2)}
.cousins-grid{display:grid;gap:clamp(28px,4vw,56px)}
.cousins .ph{aspect-ratio:4/5}
.cousins-text h2{margin-bottom:22px}
.cousins-text p{color:var(--cinza);margin-bottom:16px}
.nota{
  border-left:3px solid var(--sodio);padding:2px 0 2px 16px;
  color:var(--cal);font-size:16px;margin-top:24px;
}
.nota b{font-weight:700;color:var(--sodio)}
@media(min-width:900px){.cousins-grid{grid-template-columns:.85fr 1.15fr;align-items:center}}

/* ── galeria ───────────────────────────────────────────────────
   Grade colada, quase sem respiro entre as fotos: parece prova de
   contato, não vitrine de produto. */
.grid-gal{display:grid;gap:4px;grid-template-columns:repeat(2,1fr)}
.grid-gal .ph{aspect-ratio:1/1}
.grid-gal .ph:first-child{grid-column:span 2;aspect-ratio:16/10}
@media(min-width:760px){
  .grid-gal{grid-template-columns:repeat(4,1fr)}
  .grid-gal .ph:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
  /* A primeira ocupa 2x2, entao a galeria gasta 23 celulas com 20 fotos e
     sobrava um buraco preto na ultima fileira de quatro. A ultima foto
     ocupando duas colunas fecha a conta em 24, e de quebra da um par: foto
     grande abre, foto larga fecha. */
  .grid-gal .ph:last-child{grid-column:span 2;aspect-ratio:2/1}
}

/* ── o que está incluso ────────────────────────────────────── */
.incluso{background:var(--asfalto-2)}
.inc-list{list-style:none;display:grid;gap:0}
.inc-list li{padding:26px 0;border-top:1px solid var(--linha);display:grid;gap:8px}
.inc-list li:last-child{border-bottom:1px solid var(--linha)}
.inc-list h3{font-size:clamp(19px,2vw,26px)}
.inc-list p{color:var(--cinza);font-size:16px;max-width:52ch}
@media(min-width:900px){
  .inc-list{grid-template-columns:1fr 1fr;column-gap:60px}
  .inc-list li:nth-last-child(2){border-bottom:1px solid var(--linha)}
}

/* ── avaliações ────────────────────────────────────────────────
   Não é card com sombra: é bloco com fio de 1px em cima, a mesma
   língua da lista do "o que está incluso". A página inteira é aresta
   viva; uma caixa arredondada aqui seria a única da página.
   O texto da avaliação é cor de cal, não cinza: é o que a pessoa
   veio ler. O cinza fica para a assinatura. */
.rev-grid{display:grid;gap:0}
.rev{padding:30px 0;border-top:1px solid var(--linha);display:grid;gap:14px}
.rev:last-child{border-bottom:1px solid var(--linha)}
.rev p{font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--cal);max-width:54ch}
/* O [...] marca corte de tamanho, nunca de sentido. Vai em laranja para
   ficar claro que a mão é nossa e que ali falta texto, que está no link. */
.rev .corte-cit{color:var(--sodio);font-family:var(--mono);font-size:.85em}
.rev cite{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza);font-style:normal;
}
.rev cite b{color:var(--cal);font-weight:400}
.estrelas{display:flex;gap:3px;color:var(--sodio);line-height:0}
.estrelas svg{width:15px;height:15px;fill:currentColor}
.rev-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vw,44px)}
/* A nota vai em letra pequena, e nao em display grande, de proposito. Com
   cinco avaliacoes no total, um numero gigante chamaria atencao justamente
   para o que ainda e pouco. A contagem aparece junto: e o denominador que
   faz o 5,0 ler como verdade em vez de propaganda. */
.avals{display:flex;flex-wrap:wrap;gap:10px 30px;margin-bottom:clamp(26px,3.5vw,38px)}
.aval{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cinza);
}
.aval .estrelas svg{width:12px;height:12px}
.aval b{color:var(--cal);font-weight:400}
@media(min-width:900px){
  .rev-grid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,72px)}
  /* Em número ímpar a última sobraria sozinha numa coluna, com a coluna
     vizinha aberta embaixo. Fazendo ela atravessar, o fio de cima fecha as
     duas colunas de uma vez. A medida do texto não muda: continua presa
     em 54ch, para não virar uma linha de 90 caracteres. */
  .rev:last-child:nth-child(odd){grid-column:1/-1}
}

/* ── perguntas ─────────────────────────────────────────────── */
.faq-list{max-width:860px;border-top:1px solid var(--linha)}
details{border-bottom:1px solid var(--linha)}
summary{
  list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 800;
  font-size:clamp(18px,2.2vw,26px);text-transform:uppercase;letter-spacing:-.01em;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'';position:absolute;right:8px;top:50%;width:14px;height:2px;background:var(--sodio);transform:translateY(-50%)}
summary::before{content:'';position:absolute;right:14px;top:50%;width:2px;height:14px;background:var(--sodio);transform:translateY(-50%);transition:transform .22s,opacity .22s}
details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
details p{padding:0 0 24px;color:var(--cinza)}

/* ── rodapé ────────────────────────────────────────────────────
   O segundo e último corte do morro. Aqui a diagonal fecha o que o
   hero abriu. */
.foot{position:relative;background:var(--asfalto-2);padding:calc(var(--corte) + var(--secao)) var(--pad) var(--secao)}
/* O segundo e último corte, paralelo ao do hero, com o mesmo fio laranja. */
.foot::after{
  content:'';position:absolute;left:0;right:0;top:3px;height:var(--corte);z-index:1;
  background:var(--sodio);clip-path:polygon(0 0,100% 0,100% 100%);
}
.foot::before{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--corte);z-index:2;
  background:var(--asfalto);clip-path:polygon(0 0,100% 0,100% 100%);
}
.foot > .wrap{position:relative;z-index:3}
.foot h2{text-align:center;margin-bottom:26px}
.foot h2 em{font-style:normal;color:var(--sodio)}
.foot-cta{display:flex;justify-content:center}
.socials{display:flex;justify-content:center;gap:10px;margin-top:26px}
.socials a{
  width:48px;height:48px;border:1px solid var(--linha);
  display:grid;place-items:center;transition:border-color .2s,color .2s,background .2s;
}
.socials a:hover{border-color:var(--sodio);background:var(--sodio);color:var(--asfalto)}
.socials svg{width:19px;height:19px}
.foot-links{
  display:grid;gap:30px;margin-top:clamp(38px,5vw,58px);
  padding-top:32px;border-top:1px solid var(--linha);
}
@media(min-width:700px){.foot-links{grid-template-columns:repeat(3,1fr);text-align:center}}
.foot-col h4{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sodio);margin-bottom:14px;font-weight:700;
}
.foot-col ul{list-style:none;display:grid;gap:2px}
/* 15px de texto dá 16px de alvo. Com padding o link vira uma área de 44px,
   que é o mínimo para o polegar acertar sem errar de linha. */
.foot-col a,.foot-col span{
  color:var(--cinza);font-size:15px;transition:color .18s;
  display:inline-flex;align-items:center;min-height:44px;
}
.foot-col a:hover{color:var(--cal)}
.meet{margin-top:38px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--cinza);max-width:none}
.legal{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--linha);text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#857E74;max-width:none;
}

/* ── barra fixa de contato ─────────────────────────────────── */
.dock{
  position:fixed;z-index:55;left:var(--pad);right:var(--pad);bottom:14px;
  display:flex;gap:8px;transform:translateY(160%);transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.dock.show{transform:none}
.dock .btn{flex:1;justify-content:center;padding:14px 10px;font-size:13px}
@media(min-width:760px){
  .dock{left:auto;right:22px;bottom:22px;flex-direction:column;align-items:flex-end}
  .dock .btn{flex:none}
}

/* ── entrada ao rolar ──────────────────────────────────────────
   Só liga com a classe .js, posta no <html> no <head>. Sem
   JavaScript nada some: aparece direto, sem animação. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .grid-gal.rv{opacity:1;transform:none;transition:none}
.js .grid-gal .ph{
  opacity:0;transform:translateY(12px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 35ms);
}
.js .grid-gal.in .ph{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .rv,.js .grid-gal .ph{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── paginas de produto ────────────────────────────────────────────────
   Elas reusam quase tudo desta folha. So precisam de tres coisas que a
   home nao tem: o titulo de pagina, que nao pode ter o tamanho do hero,
   o link de volta no lugar do seletor de idioma, e a fileira das outras
   experiencias no fim. */
/* A foto de abertura das paginas de produto ocupava 52% da altura do
   celular, e empurrava o botao de reservar para fora da primeira tela em
   375x812 e em 390x844, que sao os dois tamanhos mais comuns. E a pagina
   mais perto da compra: era justamente nela que o botao sumia. */
@media(max-width:899px){
  .pg-titulo{margin-top:4px}
  /* 33vh, e nao 38vh. A linha de preco entrou logo acima do botao de
     reservar e custou uns 60px de altura. Nas paginas do baile e da
     trilha a folga era de exatamente 0px em 375x812, ou seja, o botao
     encostava na dobra. Estes cinco pontos percentuais, mais as margens
     apertadas abaixo, devolvem a folga. Medido, nao chutado. */
  .exp-media .ph{max-height:33vh}
  .exp-media .ph img{height:100%;object-fit:cover}
  .pg-titulo h1{margin-top:10px}
  .pg-titulo .deck{margin-top:14px}
  .pg-titulo .preco-topo{margin-top:12px;gap:2px 10px}
  .pg-titulo .preco-topo b{font-size:clamp(24px,6.4vw,32px)}
}
/* Nas telas de 375px o deck do baile e o da trilha ocupam duas linhas a
   mais que o do tour, e sobravam 11px para o botao caber inteiro. Quatro
   pontos percentuais de foto resolvem, e so nesta faixa: em 390 e 430,
   que sao os tamanhos mais comuns, a foto continua com 33vh. */
@media(max-width:389px){
  .exp-media .ph{max-height:29vh}
}
.pg-titulo h1{
  font-variation-settings:'wdth' 116,'wght' 900;
  font-size:clamp(29px,5.2vw,60px);line-height:.94;max-width:none;
  margin-top:14px;
}
.pg-titulo .deck{margin-top:20px;max-width:56ch}
/* Grade de fotos das paginas de produto. Diferente da galeria da home:
   sem a primeira ocupando 2x2, porque aqui o numero de fotos varia por
   experiencia e o quadro grande so fecharia a conta em alguns casos. */
.grid-pg{display:grid;gap:4px;grid-template-columns:repeat(2,1fr)}
.grid-pg .ph{aspect-ratio:1/1}
@media(min-width:760px){.grid-pg{grid-template-columns:repeat(3,1fr)}}

/* ═══════════ PRECO ═══════════
   Duas pecas. A linha de cima (.preco-topo) fica no topo da pagina, junto
   do botao de reservar, e custa pouca altura de proposito: a dobra do
   celular ja estava no limite e o botao nao pode sair da primeira tela.
   O bloco de faixas (.preco) fica la embaixo, depois da lista do que esta
   incluso, onde quem chegou ate ali ja sabe o que esta comprando.

   O R$ 300 riscado ao lado do R$ 260 e um preco que existe de verdade: e
   o que uma pessoa sozinha paga. Nao ha "de" inventado em lugar nenhum
   deste site, e o mesmo par de numeros vai no JSON-LD como highPrice e
   lowPrice. */
.preco-topo{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
  margin-top:22px;
}
.preco-topo b{
  font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 900;
  font-size:clamp(27px,4.4vw,38px);line-height:1;color:var(--sodio);
}
.preco-topo s{
  font-family:var(--mono);font-size:15px;color:var(--cinza);
  text-decoration-thickness:1px;
}
.preco-topo span{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cinza);line-height:1.5;
}
/* Sem borda em cima: a .inc-list logo acima ja fecha com uma linha, e
   duas linhas paralelas separadas por 40px de nada parecem defeito. */
.preco{margin-top:clamp(26px,4vw,42px)}
.preco-tit{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sodio);margin-bottom:4px;
}
.preco-fx{list-style:none;margin:0;padding:0}
/* Mesmo par tipografico da lista da rota e do add-on: numero em display,
   rotulo em mono. O bloco tem que parecer parte da pagina, nao uma tabela
   de preco colada de outro site. */
.preco-fx li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--linha);
}
.preco-fx .quem{font-family:var(--mono);font-size:13px;color:var(--cinza);line-height:1.45}
.preco-fx .val{
  font-family:var(--display);font-variation-settings:'wdth' 105,'wght' 700;
  font-size:17px;letter-spacing:.01em;color:var(--cal);text-align:right;
}
.preco-fx li.melhor .val{color:var(--sodio)}
.preco-fx li.melhor .val s{
  font-family:var(--mono);font-size:13px;font-weight:400;color:var(--cinza);
  margin-right:8px;text-decoration-thickness:1px;
}
.preco-nota{
  font-family:var(--mono);font-size:12.5px;color:var(--cinza);line-height:1.5;
  padding:18px 0 0;max-width:56ch;
}
/* Meio de pagamento e objecao, nao detalhe: gringo que chega sem real na
   carteira precisa saber antes de mandar mensagem que cartao e Revolut
   resolvem. Fica colado na nota do preco, na mesma linha de leitura. */
.preco-pag{
  font-family:var(--mono);font-size:12.5px;color:var(--cinza);line-height:1.5;
  padding:10px 0 0;max-width:56ch;
}
.preco-pag span{
  color:var(--sodio);letter-spacing:.09em;text-transform:uppercase;
  font-size:12px;margin-right:8px;
}
/* Linha de preco nos cards da home. Menor que a das paginas de produto:
   ali ela e a informacao principal da coluna, aqui divide espaco com a
   rota e com o add-on. */
.preco-linha{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cinza);line-height:1.5;
  margin-top:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.preco-linha b{
  font-family:var(--display);font-variation-settings:'wdth' 108,'wght' 800;
  font-size:21px;letter-spacing:0;text-transform:none;color:var(--sodio);
}

/* Link de texto para a pagina da experiencia. Fica discreto de proposito:
   o laranja tem que continuar sendo o unico botao da coluna. */
.pg-link{
  display:inline-flex;align-items:center;min-height:44px;margin-left:18px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza);border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.pg-link:hover{color:var(--sodio);border-bottom-color:var(--sodio)}
@media(max-width:520px){.pg-link{margin-left:0;display:flex}}

.voltar{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cinza);display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 2px;transition:color .18s;
}
.voltar:hover{color:var(--sodio)}
.voltar svg{width:13px;height:13px;flex:none}
.outras{display:grid;gap:0}
.outras a{
  display:grid;gap:5px;padding:24px 0;border-top:1px solid var(--linha);
  transition:padding-left .2s;
}
.outras a:last-child{border-bottom:1px solid var(--linha)}
.outras a:hover{padding-left:10px}
.outras a:hover strong{color:var(--sodio)}
.outras strong{
  font-family:var(--display);font-variation-settings:'wdth' 110,'wght' 800;
  font-size:clamp(19px,2.4vw,26px);text-transform:uppercase;letter-spacing:-.01em;
  color:var(--cal);transition:color .18s;
}
.outras span{font-family:var(--mono);font-size:12.5px;color:var(--cinza);line-height:1.45}
@media(min-width:900px){
  .outras{grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,70px)}
  .outras a:nth-last-child(2){border-bottom:1px solid var(--linha)}
}