/* Andes Experience · style.css · só estiliza e chama os tokens dos kits (RECEITAS §E) */
:root {
  --bg: #F3EDE2; --fg: #2A251B; --acento: #F26B45;
  --superficie: #E8DECB; --marca: #776A50; --linha: rgba(119,106,80,.28);
  --mudo: color-mix(in oklab, var(--fg) 62%, var(--bg));
  --noite: #211C14; --noite-fg: #EFE7D8;
  --display: "Fraunces", Georgia, serif; --texto: "Instrument Sans", system-ui, sans-serif;
  --pad: clamp(64px, 10vw, 140px); --lado: 6vw;
}
body { font: 400 1rem/1.6 var(--texto); }
a { color: inherit; }
img { height: auto; }

/* ---- tipografia ---- */
.titulo, .hero__titulo, .contato__manchete, .numero, .servicos__nome, .estacao__nome {
  font-family: var(--display); font-weight: 400; font-variation-settings: "SOFT" 50; }
.hero__titulo { font-size: clamp(3rem, 7.2vw, 8rem); line-height: 1.02; letter-spacing: -0.04em; margin: .2em 0 .25em; max-width: 12ch; overflow-wrap: anywhere; }
.titulo { font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1.05; letter-spacing: -0.03em; margin: .3em 0 .4em; max-width: 16ch; }
.titulo--grande { font-size: clamp(2.4rem, 5.4vw, 5.6rem); max-width: 15ch; }
.titulo em, .hero__titulo em { font-style: italic; color: var(--acento); }
.rotulo { font: 600 .78rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--marca); margin: 0; font-variant-numeric: tabular-nums; }
.escuro { --fg: var(--noite-fg); color: var(--noite-fg); }
.escuro .rotulo { color: #E9C9A8; }
p { max-width: 62ch; }

/* ---- botões ---- */
.botao { display: inline-flex; align-items: center; gap: .5em; padding: 15px 24px; border-radius: 10px; font: 600 .95rem/1 var(--texto);
  text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro); }
.botao--sol { background: var(--acento); color: #23170F; box-shadow: 0 6px 0 -2px rgba(42,37,27,.25); }
.botao--sol:hover { background: #2A251B; color: #F3EDE2; transform: translateY(-2px); }
.botao--linha { border: 1.5px solid var(--fg); color: var(--fg); }
.botao--linha:hover { background: var(--fg); color: var(--bg); }
.link-seta { display: inline-block; margin-top: 1rem; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--acento); padding-bottom: 3px; }
.link-seta::after { content: " →"; }
.link-seta--claro { color: var(--noite-fg); }
.botoes { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 1.6rem; }
.so-movel { display: none; }

/* ---- nav: placa própria (camada fixa declara as suas cores) ---- */
.nav { --bg: #F3EDE2; --fg: #2A251B; position: fixed; z-index: 60; top: 12px; left: 16px; right: 16px; height: 64px;
  display: flex; align-items: center; gap: 28px; padding: 0 10px 0 8px; border-radius: 14px; color: var(--fg);
  background: rgba(243,237,226,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -18px rgba(42,37,27,.45); }
.nav__marca img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--linha); }
.nav__links { display: flex; gap: 26px; margin-right: auto; font-weight: 500; font-size: .95rem; }
.nav__links a { text-decoration: none; }
.nav__links a:hover { color: var(--marca); }
.nav__idiomas { display: flex; gap: 2px; }
.nav__idiomas button { font: 600 .74rem/1 var(--texto); letter-spacing: .08em; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--fg); cursor: pointer; }
.nav__idiomas button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.nav__cta { padding: 13px 18px; font-size: .9rem; }
.nav > * { min-width: 0; }

/* ---- menu do celular: botão + placa areia sólida ---- */
.nav__menu, .gaveta { display: none; }
.nav__menu { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.nav__menu i { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-micro) var(--ease-out); }
.nav__menu[aria-expanded="true"] i:first-child { transform: translate3d(0, 4px, 0) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-child { transform: translate3d(0, -4px, 0) rotate(-45deg); }
.gaveta { --bg: #F3EDE2; --fg: #2A251B; position: fixed; z-index: 59; top: 74px; left: 10px; right: 10px; padding: 18px 20px 22px; border-radius: 14px;
  background: #F3EDE2; color: #2A251B; box-shadow: 0 18px 40px -18px rgba(42,37,27,.55);
  opacity: 0; visibility: hidden; transform: translate3d(0, -14px, 0); pointer-events: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out), visibility 0s linear var(--dur-reveal); }
.gaveta.aberta { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.gaveta nav { display: grid; margin-bottom: 14px; }
.gaveta nav a { padding: 11px 2px; border-bottom: 1px solid var(--linha); text-decoration: none; font: 400 1.3rem/1.2 var(--display); }
.gaveta nav a[aria-current="page"] { color: var(--acento); }

/* ---- abertura (no lugar do contador do kit): o desenho do logo em tela cheia, a latitude é o contador e o dia se abre
   a partir do sol, que fica exatamente sobre o sol do primeiro quadro do filme (--sx, --sy e --furo vêm do main.js) ---- */
.abertura { --furo: 0px; --sx: 65%; --sy: 42%; color: #2A251B; background: linear-gradient(180deg, #F3EDE2 0%, #F3E4D0 55%, #EFD4B6 100%);
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent var(--furo), #000 calc(var(--furo) + 1px));
          mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent var(--furo), #000 calc(var(--furo) + 1px)); }
.abertura__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__sol { fill: var(--acento); filter: drop-shadow(0 0 28px rgba(242,107,69,.5)); }
.abertura__serra { fill: #776A50; }
.abertura__serra--fundo { fill: #BBA483; }
.abertura__plano { fill: #E8DECB; }
.abertura__estrada { fill: none; stroke: #9A8F7B; stroke-width: 6; stroke-linecap: round; }
.abertura__poeira circle { fill: #D8C6A6; }
.abertura__4x4 { position: absolute; left: 0; top: 0; width: clamp(46px, 4.6vw, 76px); transform-origin: 50% 85%; will-change: transform; filter: drop-shadow(5px 4px 3px rgba(42,37,27,.3)); }
.abertura__marco { position: absolute; left: var(--lado); top: 17vh; }
.abertura__rotulo { margin: 0; font: 600 .78rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: #776A50; }
.abertura__lat { margin: .12em 0 0; font: 400 clamp(3.4rem, 10vw, 9rem)/1 var(--display); font-variation-settings: "SOFT" 50; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abertura__lugar { margin: .1em 0 0; overflow: hidden; font: 400 clamp(1.8rem, 4vw, 3.4rem)/1.15 var(--display); }
.abertura__lugar em { display: inline-block; color: var(--acento); }

/* ---- odômetro (D7 + D1 + D6) ---- */
.odometro { --bg: #F3EDE2; --fg: #2A251B; gap: 12px; padding: 9px 16px; }
.odometro__estrada { position: relative; width: 120px; height: 16px; border-bottom: 1px solid rgba(243,237,226,.6); overflow: hidden; }
.odometro__4x4 { position: absolute; left: 0; bottom: 0; width: 26px; will-change: transform; }
.odometro__sol { position: absolute; right: 8px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--acento); will-change: transform; }

/* ---- palcos de cena ---- */
.am-palco { background-size: cover; background-position: center; }
.am-palco canvas { position: absolute; inset: 0; }
.viagem__canvas, .parada__canvas, .por-do-sol__canvas { opacity: 0; transition: opacity var(--dur-micro) linear; }
.viagem { --trilho-cena: 700vh; }
.parada, .por-do-sol { --trilho-cena: 300vh; }
.parada { --trilho-cena: 400vh; }   /* correção 13/10: o glaciar limpo fica ~80vh na tela antes de os capítulos subirem */
.veu { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.veu--ceu { background: linear-gradient(180deg, rgba(243,237,226,.62) 0%, rgba(243,237,226,.28) 34%, rgba(243,237,226,0) 56%); }
.veu--esquerda { background: linear-gradient(90deg, rgba(33,28,20,.72) 0%, rgba(33,28,20,.5) 30%, rgba(33,28,20,0) 58%); }
.veu--baixo { background: linear-gradient(0deg, rgba(33,28,20,.78) 0%, rgba(33,28,20,.45) 32%, rgba(33,28,20,0) 62%); }

.hero { position: absolute; z-index: 2; left: var(--lado); top: 17vh; right: var(--lado); will-change: transform, opacity; }
.hero__sub { font-size: clamp(1.05rem, 1.35vw, 1.3rem); max-width: 34ch; margin: 0; }
/* legibilidade sobre a cordilheira escura: letra maior e mais encorpada, com um halo de areia por trás */
.hero__sub, .hero .link-seta { text-shadow: 0 0 2px rgba(243,237,226,.9), 0 0 14px rgba(243,237,226,.95), 0 0 30px rgba(243,237,226,.8); }
.hero__sub { font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 500; line-height: 1.45; }
.hero .link-seta { font-size: clamp(1.05rem, 1.25vw, 1.25rem); border-bottom-width: 2px; }
.manifesto { position: absolute; z-index: 2; left: var(--lado); top: 17vh; width: min(40rem, 42vw); opacity: 0; will-change: transform, opacity;
  padding: 28px 32px 30px; border-radius: 16px; background: rgba(243,237,226,.9); box-shadow: 12px 16px 0 -6px rgba(42,37,27,.18); }
.manifesto .titulo { font-size: clamp(2rem, 3.4vw, 3.4rem); }
.manifesto__texto { font-size: 1.12rem; line-height: 1.55; margin: 0; }
.dados-4x4 { z-index: 2; }
.dados-4x4 .am-dado { font: 600 .82rem/1.3 var(--texto); letter-spacing: .02em; background: rgba(243,237,226,.95); box-shadow: 6px 8px 0 -3px rgba(42,37,27,.25); white-space: nowrap; }
.dados-4x4 path { stroke-width: 1.5; stroke: #2A251B; }
.dados-4x4 circle { fill: var(--acento); stroke: #F3EDE2; stroke-width: 1.5; opacity: 0; }
.dados-lista { display: none; }
html { overflow-x: clip; }

/* ---- a estrada do calendário (assinatura) ---- */
.estrada { position: relative; z-index: 3; height: 400vh; margin-top: -100dvh; background: var(--bg); }
.estrada__palco { background: var(--bg); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 40px -24px rgba(42,37,27,.35); }
.estrada__cabeca { position: absolute; left: var(--lado); top: 104px; z-index: 2; }
.estrada__cabeca .titulo { margin-bottom: 0; max-width: none; font-size: clamp(2.2rem, 3.8vw, 3.8rem); }
.estrada__faixa { padding: 0 6vw 0 8vw; margin-top: 17vh; align-items: stretch; position: relative; z-index: 2; }
/* desktop: o título ocupa o seu lugar e as saídas vêm logo abaixo (antes o primeiro cartão cobria a frase) */
@media (min-width: 821px) {
  /* correção 13/10: a base do palco reserva a estrada (5vh + 48px) e uma pista livre de 17vh acima dela, mais alta que a 4x4
     (13vw × .77 ≈ 16vh a 1440 × 900): a caminhonete roda NA estrada e nunca atravessa um cartão. A máscara de 0 a 6vw faz o
     cartão que sai pela esquerda desvanecer em vez de mostrar o texto cortado */
  /* correção v4: em tela de notebook (720 a 800 px de altura) o cartão inteiro, botão incluído, cabe acima da pista da 4x4.
     A 4x4 passa a ser medida pela altura (min(9vw, 15vh) × .77 ≤ 11,6vh) e a pista livre cai de 17vh para 13vh;
     cada data ocupa uma linha (nome à esquerda, data à direita) e título e nome da saída acompanham a altura da tela */
  .estrada__palco { box-sizing: border-box; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3vh; padding-top: 88px; padding-bottom: calc(5vh + 48px + 13vh); }
  /* a borda que desvanece (mask-image no palco .am-3d apagava as peças absolutas): um degradê de areia de 0 a 6vw por cima dos cartões */
  .estrada__palco::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6vw; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 85%, transparent) 45%, transparent 100%); }
  .estrada__cabeca { position: relative; top: auto; left: auto; padding-left: var(--lado); }
  .estrada__cabeca .titulo { font-size: clamp(2rem, min(3.8vw, 6.2vh), 3.8rem); }
  .estrada__faixa { margin-top: 0; width: max-content; }
  /* .estrada na frente: este bloco vem antes das regras base dos cartões e da 4x4, e precisa vencê-las */
  .estrada .estrada__4x4 { width: clamp(110px, min(9vw, 15vh), 170px); }
  .estrada .estacao { width: 28rem; padding: 18px 24px 20px; }
  .estrada .estacao__nome { font-size: clamp(1.6rem, 3.6vh, 2.1rem); margin: .3em 0 .4em; }
  .estrada .estacao__datas { gap: 6px; margin-bottom: 16px; }
  .estrada .estacao__datas li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding-top: 6px; }
  .estrada .estacao__datas b { display: inline; }
}
.estacao { width: 25rem; padding: 22px 26px 24px; border-radius: 16px; background: var(--superficie); box-shadow: 14px 16px 0 -8px rgba(119,106,80,.35), 0 1px 0 rgba(255,255,255,.6) inset; }
.estacao--destaque { background: #2A251B; color: #EFE7D8; --fg: #EFE7D8; }
.estacao--destaque .estacao__lugar { color: #E9C9A8; }
.estacao__lugar { font: 600 .74rem/1.3 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--marca); margin: 0; }
.estacao__nome { font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.02em; margin: .4em 0 .5em; }
.estacao__datas { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; font-variant-numeric: tabular-nums; }
.estacao__datas li { padding-top: 10px; border-top: 1px solid var(--linha); }
.estacao__datas b { display: block; font-weight: 600; }
.estrada__ripio { position: absolute; left: 0; right: 0; bottom: 5vh; height: 48px; z-index: 1;
  background: linear-gradient(90deg, transparent 0 calc(50% - 1px), transparent 0), #9A8F7B;
  box-shadow: 0 -3px 0 #776A50 inset, 0 3px 0 #C9BBA2 inset; }
.estrada__ripio::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #F3EDE2 0 28px, transparent 28px 56px); opacity: .8; }
.estrada__4x4 { position: absolute; left: 0; bottom: calc(5vh + 18px); width: clamp(140px, 13vw, 210px); z-index: 4; filter: drop-shadow(10px 8px 6px rgba(42,37,27,.35)); }
/* o horizonte do pico: a cordilheira do logo (as mesmas cores da abertura) assentada sobre a estrada, atrás dos cartões;
   o sol nasce atrás do pico mais alto (x 76%) e desce um degrau por estação (main.js: y 0 a 12vh, --quente 0 a 1) */
.estrada__serra { position: absolute; left: 0; bottom: calc(5vh + 46px); width: 100%; height: 16vh; z-index: 0; pointer-events: none; }
.estrada__serra path { fill: #776A50; }
.estrada__serra .estrada__serra--fundo { fill: #BBA483; }
.estrada__sol { --quente: 0; position: absolute; left: 74%; bottom: calc(5vh + 46px + 15vh - clamp(40px, 4vw, 65px)); width: clamp(80px, 8vw, 130px); aspect-ratio: 1; border-radius: 50%;
  background: var(--acento); z-index: 0; box-shadow: 0 0 48px rgba(242,107,69,.35); }
.estrada__sol::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #DD4422; opacity: var(--quente); }

/* ---- cena 3 ---- */
.parada__texto { position: absolute; z-index: 2; left: var(--lado); top: 50%; transform: translateY(-46%); max-width: 36rem; }
.parada__texto p { font-size: 1.08rem; }
/* cena 3: o céu do glaciar é laranja-dourado; o véu escurece toda a faixa do título e o "leva" usa o laranja claro da paleta (≥ 3:1) */
/* correção 13/10: o véu fica só na zona do texto (0 a 45% da largura) e sai com o texto (main.js), para o glaciar nascer limpo */
@media (min-width: 821px) { .parada .veu--esquerda { background: linear-gradient(90deg, rgba(33,28,20,.7) 0%, rgba(33,28,20,.6) 30%, rgba(33,28,20,0) 45%); } }
.parada__texto .titulo em { color: #FF9A73; }
.lugares { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lugares li { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(239,231,216,.45); font-size: .88rem; font-weight: 500; }

/* ---- capítulos ---- */
.capitulos { margin-top: -100dvh; background: var(--bg); color: var(--fg); border-radius: 28px 28px 0 0; box-shadow: 0 -24px 40px -24px rgba(33,28,20,.45); }
.cap { padding: clamp(56px, 7vh, 96px) var(--lado); }   /* correção 13/10: teto de seção na escala de 4px, sem vãos de 280px entre capítulos */
/* D7 em escala real: a estrada na margem dos capítulos, o sol que desce por ela e a luz que enche atrás (main.js) */
.capitulos { position: relative; }
.capitulos__estrada { position: absolute; z-index: 1; left: calc(var(--lado) / 2 - 1px); top: 0; bottom: 0; width: 2px; pointer-events: none;
  background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--fg) 30%, transparent) 0 10px, transparent 10px 18px); }
.capitulos__luz { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--acento); transform: scaleY(0); transform-origin: 50% 0; will-change: transform; }
.capitulos__sol { position: absolute; left: -8px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--acento); will-change: transform;
  box-shadow: 0 0 0 6px rgba(242,107,69,.18), 0 0 24px rgba(242,107,69,.6); }
.servicos__lista { list-style: none; margin: 2.4rem 0 0; padding: 0; counter-reset: s; }
.servicos__lista li { border-top: 1px solid var(--linha); }
.servicos__lista li:last-child { border-bottom: 1px solid var(--linha); }
.servicos__lista a { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: baseline; padding: 26px 0; text-decoration: none; transition: padding var(--dur-micro) var(--ease-out); }
.servicos__lista a:hover .servicos__nome { color: var(--acento); }
.servicos__nome { font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; transition: color var(--dur-micro); }
.servicos__desc { color: var(--mudo); font-size: 1.05rem; }

/* correção 13/10: a grade dos números fica ENTRE as fotos (Bariloche em cima, Pampas Negras embaixo) na coluna da direita,
   e o comboio da esquerda segue pinado enquanto ela passa (sem linhas vazias na grade) */
.numeros { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px 28px; align-items: start; }
.numeros__foto { margin: 0; overflow: hidden; border-radius: 14px; box-shadow: 16px 18px 0 -10px rgba(119,106,80,.3); }
.numeros__foto img { width: 100%; height: 100%; object-fit: cover; }
.numeros__foto--a { grid-column: 1 / 6; grid-row: 1 / 4; aspect-ratio: 4 / 5; position: sticky; top: 14vh; }
.numeros__grade { grid-column: 7 / 13; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
/* a foto do grupo vem escurecida do próprio Wix (DOSSIE §5, hero.jpg): o brilho devolve a luz do dia, sempre acima de 1 */
.numeros__foto--b img { filter: brightness(1.45) saturate(1.05); }
.numeros__grade p { margin: 0; display: grid; gap: 6px; color: var(--mudo); }
.numero { font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.numero__pre { display: block; font-size: .32em; letter-spacing: 0; font-style: italic; color: var(--mudo); margin-bottom: .2em; }
.numeros__foto--b { grid-column: 7 / 13; grid-row: 1; aspect-ratio: 16 / 9; }
.numeros__foto--c { grid-column: 7 / 13; grid-row: 3; aspect-ratio: 16 / 9; }

.equipe .am-split { align-items: start; }
.equipe__foto { margin: 1.6rem 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 16px 18px 0 -10px rgba(0,0,0,.25); }
.equipe__foto img { width: 100%; height: 100%; object-fit: cover; }
.equipe__lista article { padding: 22px 0; border-top: 1px solid color-mix(in oklab, var(--fg) 22%, transparent); }
.equipe__lista h3 { font: 400 1.7rem/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 .3em; }
.equipe__lista p { margin: 0; color: color-mix(in oklab, var(--fg) 72%, var(--bg)); }
.equipe__lista .cargo { color: var(--acento); font-weight: 600; margin-bottom: .4em; }

/* ---- depoimentos (já na noite do P06): a placa de areia com o vídeo e o texto + a estrada das paradas, onde anda o sol do logo ---- */
.relatos .rotulo, .canal .rotulo, .blog .rotulo { color: #E9C9A8; }
.relatos__palco { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5vw; align-items: start; margin-top: 2.6rem; }
.relatos__placa { overflow: hidden; border-radius: 16px; background: #F3EDE2; color: #2A251B; box-shadow: 16px 18px 0 -8px rgba(0,0,0,.45); }
.relatos__tela { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2A251B; }
.relatos__capa, .relatos__tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.relatos__tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(33,28,20,.6) 0%, rgba(33,28,20,0) 48%); }
.relatos__tela.tocando::after, .relatos__tela.tocando .relatos__play { display: none; }
.relatos__play { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none;
  color: #EFE7D8; font: 600 1rem/1 var(--texto); cursor: pointer; }
.relatos__play i { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: var(--acento); animation: relato-pulso 2.4s var(--ease-out) infinite; transition: transform var(--dur-micro) var(--ease-out); }
.relatos__play i::after { content: ""; position: absolute; left: 25px; top: 20px; border-left: 20px solid #23170F; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.relatos__play:hover i { transform: scale(1.08); }
.relatos__play:focus-visible { outline: 2px solid var(--acento); outline-offset: 6px; }
@keyframes relato-pulso { 0% { box-shadow: 0 0 0 0 rgba(242,107,69,.6); } 70%, 100% { box-shadow: 0 0 0 18px rgba(242,107,69,0); } }
.relatos__tempo { font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }
.relatos__falha { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: rgba(33,28,20,.85); color: #EFE7D8; font-weight: 600; }
.relatos__falha[hidden] { display: none; }
.relatos__texto { padding: 30px 36px 34px; min-height: 17rem; }
.relatos__marco { margin: 0; font: 600 .74rem/1.3 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: #776A50; }
.relatos__fala { position: relative; margin: .9em 0 0; padding-left: 2.4rem; max-width: 42ch; font: 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.4 var(--display); font-variation-settings: "SOFT" 50; letter-spacing: -.01em; }
.relatos__fala::before { content: "“"; position: absolute; left: -.05em; top: -.18em; font: italic 400 4.4rem/1 var(--display); color: var(--acento); }
.relatos__quem { margin: 1.1em 0 0; padding-left: 2.4rem; font: italic 400 1.2rem/1.2 var(--display); }
.relatos__quem::before { content: ""; display: inline-block; width: 28px; height: 1.5px; margin-right: 12px; vertical-align: middle; background: var(--acento); }
.relatos__estrada { position: relative; padding-left: 34px; }
.relatos__estrada::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(180deg, rgba(239,231,216,.35) 0 10px, transparent 10px 18px); }
.relatos__luz { position: absolute; left: 9px; top: 10px; width: 2px; height: 0; background: var(--acento); }
.relatos__sol { position: absolute; z-index: 1; left: 1px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--acento); will-change: transform;
  box-shadow: 0 0 0 6px rgba(242,107,69,.18), 0 0 24px rgba(242,107,69,.6); }
.relatos__paradas { list-style: none; margin: 0; padding: 0; }
.dep { position: relative; display: grid; gap: 5px; width: 100%; padding: 16px 0 16px 8px; border: 0; border-bottom: 1px solid rgba(239,231,216,.14); background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: .5; transition: opacity var(--dur-micro), transform var(--dur-reveal) var(--ease-out); }
.dep::before { content: ""; position: absolute; left: -31px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: #211C14; border: 2px solid rgba(239,231,216,.5); }
.dep:hover { opacity: .85; }
.dep[aria-pressed="true"] { opacity: 1; transform: translateX(8px); }
.dep[aria-pressed="true"]::before { border-color: var(--acento); }
.dep:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
.dep__nome { font: 400 1.45rem/1.15 var(--display); letter-spacing: -.01em; }
.dep__marco { font: 600 .7rem/1.3 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: #E9C9A8; font-variant-numeric: tabular-nums; }

/* ---- canal no YouTube: o desenho de uma página de canal (um vídeo grande e a fila ao lado) ---- */
.canal__cabeca, .blog__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0 40px; }
.canal__cabeca .botao, .blog__cabeca .botao { margin-bottom: 1.4rem; }
.canal__icone { position: relative; width: 24px; height: 17px; border-radius: 5px; background: #23170F; }
.canal__icone::after { content: ""; position: absolute; left: 9px; top: 4px; border-left: 8px solid var(--acento); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.canal__grade { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px 40px; margin-top: 2.2rem; }
.video { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 16px; align-items: start; text-decoration: none; color: inherit; }
.video--grande { grid-row: 1 / 4; grid-template-columns: 1fr; gap: 20px; }
.video__capa { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #3A3226; }
.video--grande .video__capa { box-shadow: 16px 18px 0 -10px rgba(0,0,0,.45); }
.video__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.video:hover .video__capa img { transform: scale(1.06); }
.video__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--acento); opacity: .92;
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro); }
.video__play::after { content: ""; position: absolute; left: 17px; top: 14px; border-left: 13px solid #23170F; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.video--grande .video__play { width: 76px; height: 76px; margin: -38px 0 0 -38px; animation: relato-pulso 2.4s var(--ease-out) infinite; }
.video--grande .video__play::after { left: 30px; top: 25px; border-left-width: 22px; border-top-width: 13px; border-bottom-width: 13px; }
.video:hover .video__play { transform: scale(1.1); opacity: 1; }
.video__tempo { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 4px; background: rgba(20,16,11,.85); color: #EFE7D8; font: 600 .74rem/1 var(--texto); font-variant-numeric: tabular-nums; }
.video__info { display: grid; gap: 6px; }
.video__titulo { font: 400 1.15rem/1.25 var(--display); letter-spacing: -.01em; transition: color var(--dur-micro); }
.video--grande .video__titulo { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.15; }
.video:hover .video__titulo { color: var(--acento); }
.video__canal { font: 500 .85rem/1.2 var(--texto); color: color-mix(in oklab, var(--fg) 62%, var(--bg)); }

/* ---- blog: o diário de bordo (o post mais novo com a placa de areia sobre a foto, os outros como índice) ---- */
.blog__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 2.2rem; }
.post { display: block; text-decoration: none; color: inherit; }
.post__foto { display: block; overflow: hidden; border-radius: 14px; background: #3A3226; }
.post__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.post:hover .post__foto img { transform: scale(1.05); }
.post--destaque .post__foto { aspect-ratio: 16 / 10; box-shadow: 16px 18px 0 -10px rgba(0,0,0,.45); }
.post__placa { position: relative; display: block; width: min(86%, 38rem); margin: -7.5rem 0 0 auto; padding: 28px 32px 24px; border-radius: 14px;
  background: #F3EDE2; color: #2A251B; box-shadow: 14px 16px 0 -8px rgba(0,0,0,.45); }
.post__marco { display: block; font: 600 .72rem/1.3 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: #776A50; }
.blog__indice .post__marco { color: #E9C9A8; }
.post__titulo { margin: .35em 0 .4em; font: 400 1.4rem/1.18 var(--display); letter-spacing: -.02em; transition: color var(--dur-micro); }
.post--destaque .post__titulo { font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.1; }
.post:hover .post__titulo { color: var(--acento); }
.post__resumo { display: block; color: #5E523C; }
.post__pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 1.1rem; padding-top: 14px; border-top: 1px solid rgba(119,106,80,.28);
  font: 500 .85rem/1.3 var(--texto); font-variant-numeric: tabular-nums; }
.post__ler { font-weight: 600; }
.post__ler::after { content: " →"; color: var(--acento); }
.blog__indice { display: grid; }
.blog__indice .post { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 22px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid rgba(239,231,216,.16); }
.blog__indice .post__foto { aspect-ratio: 4 / 3; }
.blog__indice .post__pe { border-top-color: rgba(239,231,216,.16); color: color-mix(in oklab, var(--fg) 72%, var(--bg)); }
.blog__temas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; }
.blog__temas a { padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(239,231,216,.3); text-decoration: none; font: 500 .88rem/1.2 var(--texto);
  transition: background-color var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro); }
.blog__temas a:hover { background: var(--acento); border-color: var(--acento); color: #23170F; }

/* ---- cena 4 + contato ---- */
.por-do-sol .am-palco { background-color: var(--noite); }
.por-do-sol__texto { position: absolute; z-index: 2; left: var(--lado); bottom: 12vh; }
.por-do-sol__texto p { font-size: 1.15rem; margin: 0; }
.contato { position: relative; z-index: 3; margin-top: -100dvh; min-height: 100dvh; background: var(--noite); border-radius: 28px 28px 0 0;
  padding: var(--pad) var(--lado) 40px; box-shadow: 0 -24px 40px -24px rgba(0,0,0,.6); }
.contato__manchete { display: block; font-size: clamp(2.8rem, 8.4vw, 9rem); line-height: 1; letter-spacing: -0.045em; text-decoration: none; margin: .25em 0 .1em; color: var(--noite-fg); font-variant-numeric: tabular-nums; }
.contato__manchete:hover { color: var(--acento); }
.contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 4rem; padding-top: 32px; border-top: 1px solid rgba(239,231,216,.2); }
.contato__grade h3 { font: 600 .78rem/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: #E9C9A8; margin: 0 0 1rem; }
.contato__grade p { margin: 0 0 .6rem; }
.rodape { margin-top: 5rem; padding-top: 32px; border-top: 1px solid rgba(239,231,216,.2); display: grid; grid-template-columns: auto 1fr 1fr; gap: 32px; align-items: start; }
.rodape__logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.rodape nav { display: grid; gap: 8px; }
.rodape nav a { text-decoration: none; opacity: .85; }
.rodape nav a:hover { opacity: 1; color: var(--acento); }
.rodape__nota { grid-column: 1 / -1; font-size: .85rem; opacity: .6; margin: 0; }

/* ---- celular ---- */
@media (max-width: 820px) {
  :root { --lado: 20px; }
  .viagem { --trilho-cena: 460vh; }
  .parada, .por-do-sol { --trilho-cena: 200vh; }
  .nav { left: 10px; right: 10px; top: 8px; height: 58px; gap: 10px; max-width: calc(100vw - 20px); }
  .nav__cta { flex-shrink: 0; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .gaveta { display: block; }
  .nav__idiomas { margin-left: auto; }
  .nav__idiomas button { padding: 8px 7px; }
  .nav__marca img { width: 42px; height: 42px; }
  .so-desk { display: none; } .so-movel { display: inline; }
  .nav__cta { padding: 12px 14px; }
  /* correção 13/10: foco do cover em x = .38 do quadro no celular (a 4x4 inteira nos 390 px desde o frame 1). O kit centra o
     cover no canvas; o canvas fica mais largo que a tela em .24 × a largura desenhada (100dvh × 16/9) e alinhado à esquerda,
     então o ponto .38 do quadro cai no centro da tela. O pôster usa o mesmo foco (34% no background-position) */
  .am-palco .viagem__canvas { width: calc(100% + 42.67dvh); max-width: none; right: auto; }
  .viagem__palco { background-position: 34% center; }
  .hero { top: 15vh; }
  .hero__titulo { font-size: clamp(2.1rem, 9.4vw, 3.4rem); max-width: calc(100vw - 2 * var(--lado)); white-space: normal; overflow-wrap: break-word; }
  .hero, .hero__sub { max-width: calc(100vw - 2 * var(--lado)); }
  .parada__texto { padding-bottom: calc(env(safe-area-inset-bottom) + 88px); }
  .contato { padding-bottom: calc(env(safe-area-inset-bottom) + 112px); }
  .titulo { max-width: 100%; overflow-wrap: break-word; }
  .manifesto { width: auto; right: var(--lado); top: 13vh; padding: 20px 20px 22px; background: rgba(243,237,226,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .manifesto .titulo { color: var(--fg); }
  .manifesto .titulo { font-size: 1.9rem; }
  .manifesto__texto { font-size: 1rem; }
  .dados-4x4 { display: none; }
  .dados-lista { display: grid; list-style: none; margin: 0; padding: 32px 20px 40px; gap: 10px; background: var(--bg); position: relative; z-index: 3; }
  .dados-lista li { padding: 12px 14px; border-radius: 10px; background: var(--superficie); font-weight: 600; font-size: .95rem; }
  .estrada { height: auto; margin-top: 0; }
  .estrada__palco { display: block; padding: 96px 0 180px; border-radius: 0; }
  .estrada__cabeca { position: static; padding: 0 20px 24px; }
  .estrada__faixa { padding: 0 20px; margin-top: 0; gap: 14px; }
  .estacao { width: 82vw; }
  .estrada__ripio { bottom: 40px; }
  .estrada__4x4 { bottom: 58px; width: 130px; transform: translateX(20px); }
  .estrada__sol { top: auto; left: auto; bottom: 122px; right: 24px; width: 56px; }
  .estrada__serra { bottom: 86px; height: 64px; }
  .parada__texto { top: auto; bottom: 7vh; transform: none; right: 20px; }
  .veu--esquerda { background: linear-gradient(0deg, rgba(33,28,20,.85) 0%, rgba(33,28,20,.6) 45%, rgba(33,28,20,0) 75%); }
  .capitulos { margin-top: 0; }
  .servicos__lista a { grid-template-columns: 1fr; gap: 6px; }
  .numeros { grid-template-columns: 1fr; }
  .numeros__foto--a, .numeros__grade, .numeros__foto--b, .numeros__foto--c { grid-column: 1; grid-row: auto; margin-top: 0; }
  .numeros__foto--a { position: static; }
  .numeros__foto--a { aspect-ratio: 4 / 3; }
  .numeros__grade { gap: 28px 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .numero { font-size: 2.2rem; }
  .numeros__grade p, .numeros > * { min-width: 0; }
  .viagem, .estrada, .parada, .capitulos, .por-do-sol, .contato, .dados-lista { max-width: 100vw; }
  .contato { margin-top: 0; }
  .contato__manchete { font-size: 9.4vw; }
  .botao { white-space: normal; }
  .contato__grade, .rodape { grid-template-columns: 1fr; gap: 28px; }
  .odometro__estrada { width: 70px; }
  .abertura__marco { top: 14vh; }
  .relatos__palco { grid-template-columns: 1fr; gap: 36px; }
  .relatos__texto { min-height: 0; padding: 22px 20px 26px; }
  .relatos__fala { padding-left: 1.8rem; font-size: 1.15rem; }
  .relatos__fala::before { font-size: 3.4rem; }
  .relatos__quem { padding-left: 1.8rem; }
  .relatos__play { left: 16px; bottom: 14px; }
  .canal__grade { grid-template-columns: 1fr; gap: 22px; }
  .video--grande { grid-row: auto; }
  .blog__grade { grid-template-columns: 1fr; gap: 44px; }
  .post__placa { width: auto; margin: -3rem 12px 0; padding: 22px 20px 20px; }
  .blog__indice .post { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 16px; }
}
.numeros { --fg: #2A251B; color: #2A251B; }