/* ═══════════════════════════════════════════════════════════════
   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}
.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%}
}
/* 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));
}
.hero h1{max-width:11ch;text-shadow:0 2px 30px rgba(10,10,12,.5)}
/* No celular a medida de 11ch tirava 40px úteis de uma linha que já estava
   no limite. Lá a largura da tela é a única medida que importa. */
@media(max-width:899px){.hero h1{max-width:none}}
.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}
}

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