/* ============================================================
   We Love Chile · páginas de passeio no modelo do Valle Nevado
   Nasceu em 2026-10-09 da revisão em vídeo da Laise (itens C2 a C30 da spec
   Entregas/2026-10-09-site-wlc-revisao-em-video/spec-rodada.md). Aprovada no mesmo
   dia, vale para todas as páginas de passeio (scripts/paginas-passeio/gerar.py).
   Carregar DEPOIS de wlc-scrapbook.css.
   Cores só dos tokens de wlc-paginas.css e wlc-scrapbook.css. A única cor nova
   é nenhuma: tudo sai dos tokens.
   ============================================================ */

/* ---------- Ícones de traço único que pegam a cor do CSS (máscara) ---------- */
.ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico--1 { --ico: url(../assets/scrapbook/icon-1.svg); }
.ico--3 { --ico: url(../assets/scrapbook/icon-3.svg); }
.ico--7 { --ico: url(../assets/scrapbook/icon-7.svg); }
.ico--11 { --ico: url(../assets/scrapbook/icon-11.svg); }
.ico--15 { --ico: url(../assets/scrapbook/icon-15.svg); }
.ico--andes { --ico: url(../assets/icons/wlc-icon-silhueta-andes.svg); }

/* C2: ícones das pílulas do topo em amarelo, para contrastar com o navy */
.pilula .ico { color: var(--yellow); width: 20px; height: 20px; }

/* C3: a van da linha da montanha não some no pico (o desenho deixa ela passar da borda de cima),
   e a nota das curvas sai do caminho dela */
#montanha-svg { overflow: visible; }
.montanha__nota { left: auto; right: 28px; transform: none; }
#van-hero-valle { transition: opacity .35s ease; }

/* C4: pílulas do índice centralizadas (margem automática: no celular a fila continua rolando) */
.indice__trilho > a:first-child { margin-left: auto; }
.indice__trilho > a:last-child { margin-right: auto; }

/* ---------- C5 a C7: bolhas do nome em lugar fixo, guarda-chuvas pequenos e sempre atrás ---------- */
.nome-vivo { background: var(--papel); }
.nome-vivo:not(.nome-vivo--estatico) .nome-vivo__palco { padding-top: 96px; }
/* o título vira o único item da grade: antes as bolhas ocupavam uma linha vazia e o nome subia, deixando a metade de baixo sem nada */
.nome-vivo:not(.nome-vivo--estatico) .bolhas { position: absolute; inset: 0; }
.nome-vivo .bolha img, .nome-vivo .bolha video { object-position: var(--foco, 50% 50%); }
.nome-vivo .bolha img { transform: scale(var(--zoom, 1)); transform-origin: var(--foco, 50% 50%); }
.nome-vivo .bolha--guarda { z-index: 2; }
/* C8: crédito da licença CC BY do vídeo de esqui, discreto, junto da legenda que aparece com o vídeo */
.nome-vivo__credito { display: block; text-align: center; font-family: 'Lufga', var(--font-sans-fb); font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-top: 4px; opacity: .92; }
.nome-vivo .bolha--guarda img { filter: drop-shadow(0 8px 12px rgba(27,42,94,.22)); }

/* ---------- C15: cada seção com o seu fundo, alternando as cores da marca ---------- */
/* papel (nome) · bege (ficha) · navy (o passeio) · amarelo (roteiro) · creme (mapa) · papel (inclui)
   · amarelo (preço) · verde-petróleo (avaliações) · vermelho (reserva) · bege (dúvidas) · papel (outros) · navy (caderno) */
#ficha { background: var(--cream); }

#o-que-e { background: var(--navy); color: var(--cream); }
#o-que-e .h-lufga, #o-que-e .h-chalk { color: var(--cream); }
#o-que-e .eyebrow { color: var(--yellow); }
#o-que-e .paragrafo { color: var(--cream); }
#o-que-e .paragrafo mark { background: var(--yellow); color: var(--navy); padding: 1px 6px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#o-que-e .numero--navy { background: var(--blue); }
#o-que-e .nota-mao { color: var(--yellow); }
#o-que-e .nota-mao img { filter: brightness(0) invert(1); }

#dia { background: var(--yellow); }
#dia .eyebrow { color: var(--purple); }
#dia .paragrafo { color: var(--ink); }
#dia .trilha__svg .cobre { stroke: var(--yellow); }
/* segunda revisão de 09/10: a estrada do roteiro mais branquinha, para aparecer sobre o amarelo */
#dia .trilha__svg .asfalto { stroke: var(--papel); filter: drop-shadow(0 3px 0 rgba(27,42,94,.14)); }
#dia .parada__marco { box-shadow: 0 0 0 6px var(--yellow), 0 10px 24px rgba(27,42,94,.25); }
/* C12: "Como é o dia, do começo ao fim" numa linha só no computador */
#dia .roteiro__intro { max-width: 980px; }
@media (min-width: 900px) { #t-dia { white-space: nowrap; } }

#inclui { background: var(--papel); }
.preco-scrap::before { --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V38C1180 128 900 116 620 74C420 44 200 40 0 86Z' fill='%23FFFDF8'/%3E%3C/svg%3E"); }

#avaliacoes { background: var(--teal); }
#avaliacoes .avaliacoes-scrap__cab .eyebrow { color: var(--cream); }
#avaliacoes .avaliacoes-scrap__cab .h-chalk, #avaliacoes .avaliacoes-scrap__cab .h-lufga { color: var(--cream); }
#avaliacoes .avaliacoes-scrap__cab .paragrafo { color: var(--cream); }
#avaliacoes .polaroid--dep figcaption { color: #3A2418; }
.reserva-scrap::before { --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V38C1180 128 900 116 620 74C420 44 200 40 0 86Z' fill='%230E6A6C'/%3E%3C/svg%3E"); }

#duvidas { background: var(--cream); }
#outros { background: var(--papel); }
.caderno-scrap::before { --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V38C1180 128 900 116 620 74C420 44 200 40 0 86Z' fill='%23FFFDF8'/%3E%3C/svg%3E"); }

/* ---------- C10: ícones da ficha na cor da borda do próprio cartão ---------- */
.ficha .ico { width: 34px; height: 34px; color: var(--red); }
.ficha li:nth-child(2) .ico { color: var(--yellow); }
.ficha li:nth-child(3) .ico { color: var(--blue); }
.ficha li:nth-child(4) .ico { color: var(--teal); }
.ficha li:nth-child(5) .ico { color: var(--purple); }
.ficha li:nth-child(6) .ico { color: var(--laranja); }

/* ---------- C11: o guarda-chuva entre "O passeio" e o roteiro, em 3D de verdade (canvas) ---------- */
/* fica em cima da emenda das duas seções, sem abrir faixa de fundo entre elas */
.dobra-guarda { height: 230px; margin: -115px 0; }
.dobra-guarda canvas { display: none; width: 260px; height: 230px; filter: drop-shadow(0 18px 18px rgba(7,12,36,.32)); }
.dobra-guarda--3d canvas { display: block; }
.dobra-guarda--3d img { display: none; }

/* ---------- C16: o mapa do dia (terceira versão de 09/10) ----------
   "Veja de novo o estilo de inspiração no vídeo da aula": a estrutura é a do walkkumano.com/koyabound.
   Fundo claro, fotos grandes sem moldura rolando à esquerda (38%), mapa minimalista de curvas de nível
   preso à direita, a van andando pela rota e um facho de luz bem claro ligando o ponto atual à foto da
   vez. Nada de selo de ilustração ou vídeo. Celular: mapa preso no alto (40% da altura), fotos embaixo,
   sem facho. Sem JS ou com movimento reduzido: mapa inteiro parado em cima e as paradas em lista. */
.mapa-dia { position: relative; z-index: 1; background: var(--cream-soft); color: var(--ink); padding: clamp(56px, 7vw, 96px) 0; }
.mapa-dia__cab { max-width: 1360px; margin: 0 auto 28px; padding: 0 clamp(20px, 3.4vw, 48px); }
.mapa-dia__cab .eyebrow { color: var(--red-label); margin-bottom: 6px; }
.mapa-dia__cab .h-lufga { color: var(--ink); }
.mapa-dia__corpo { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 48px); }
.mapa-dia__palco { position: relative; }
.mapa-dia__svg { display: block; width: 100%; height: auto; overflow: hidden; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%); }
.mapa-dia__relevo { fill: none; stroke: var(--ink); stroke-opacity: .13; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.mapa-dia__regiao { font-family: 'Lufga', var(--font-sans-fb); font-size: 15px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; fill: var(--muted); fill-opacity: .55; }
.mapa-dia__rota { fill: none; stroke: var(--muted); stroke-opacity: .55; stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mapa-dia__feita { display: none; fill: none; stroke: var(--ink); stroke-opacity: .6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mapa-dia__pino .ponto { fill: var(--muted); fill-opacity: .7; transition: fill .3s ease; }
.mapa-dia__pino .anel { fill: var(--red); fill-opacity: .14; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s ease; }
.mapa-dia__pino text { font-family: 'Lufga', var(--font-sans-fb); font-size: 16px; font-weight: 500; fill: var(--muted); fill-opacity: .85; paint-order: stroke; stroke: var(--cream-soft); stroke-width: 5px; stroke-linejoin: round; transition: fill .3s ease; }
.mapa-dia__pino.ativa .ponto { fill: var(--red); fill-opacity: 1; }
.mapa-dia__pino.ativa .anel { opacity: 1; }
.mapa-dia__pino.ativa text { fill: var(--ink); fill-opacity: 1; font-weight: 700; }
.mapa-dia__van, .mapa-dia__facho { display: none; }

/* coluna de fotos: grandes, sem moldura, uma embaixo da outra */
.mapa-dia__fotos { display: grid; gap: 56px; margin-top: 32px; }
.mapa-dia__texto { max-width: 46ch; margin-bottom: 14px; }
.mapa-dia__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-family: 'Lufga', var(--font-sans-fb); font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.mapa-dia__texto h3 { font-family: 'Lufga', var(--font-sans-fb); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 0; }
.mapa-dia__texto p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 4px 0 0; }
.mapa-dia__foto { margin: 0 0 10px; }
.mapa-dia__foto img, .mapa-dia__foto video { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cream); }
.mapa-dia__parada { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 10px; }
.mapa-dia__parada .mapa-dia__texto { grid-column: 1 / -1; }
/* parada sem foto boa: só o texto, com altura para a van parar ali na rolagem */
.mapa-dia--vivo .mapa-dia__parada--texto .mapa-dia__texto { min-height: 34vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 0; }

/* com JS e sem movimento reduzido: fotos à esquerda, mapa preso à direita */
.mapa-dia--vivo .mapa-dia__corpo { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 0; max-width: none; padding-right: 0; padding-left: max(clamp(20px, 3.4vw, 48px), calc((100vw - 1360px) / 2 + 48px)); }
.mapa-dia--vivo .mapa-dia__fotos { max-width: 600px; }
.mapa-dia--vivo .mapa-dia__fotos { grid-column: 1; grid-row: 1; margin: 0; gap: 0; padding-bottom: 30vh; }
.mapa-dia--vivo .mapa-dia__parada { display: block; padding-top: 12vh; }
.mapa-dia--vivo .mapa-dia__parada:first-child { padding-top: 0; }
/* --md-topo: a altura do cabeçalho mais o índice de pílulas, os dois presos no alto (medida no JS) */
.mapa-dia--vivo .mapa-dia__palco { grid-column: 2; grid-row: 1; position: sticky; top: var(--md-topo, 0px); height: calc(100vh - var(--md-topo, 0px)); height: calc(100svh - var(--md-topo, 0px)); }
/* o relevo some suave nas bordas do mapa, como na referência */
.mapa-dia--vivo .mapa-dia__svg { width: 100%; height: 100%; -webkit-mask-image: radial-gradient(75% 70% at 45% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(75% 70% at 45% 50%, #000 55%, transparent 100%); }
.mapa-dia--vivo .mapa-dia__feita, .mapa-dia--vivo .mapa-dia__van { display: inline; }
.mapa-dia--vivo .mapa-dia__facho { display: block; position: absolute; top: 0; height: 100%; pointer-events: none; }
/* mapa parado (sem JS ou movimento reduzido): todas as paradas acesas e a rota inteira */
.mapa-dia:not(.mapa-dia--vivo) .mapa-dia__pino .ponto { fill: var(--red); fill-opacity: 1; }
.mapa-dia:not(.mapa-dia--vivo) .mapa-dia__pino text { fill: var(--ink); font-weight: 700; }
.mapa-dia:not(.mapa-dia--vivo) .mapa-dia__rota { stroke: var(--ink); stroke-opacity: .5; stroke-dasharray: none; }

/* ---------- C17 a C19 e C24: preço ---------- */
/* o ticket vai um pouco para o lado para as quatro formas de pagamento caberem numa linha */
@media (min-width: 961px) {
  #precos .duas { grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); }
  #precos .ticket { grid-template-columns: 1fr 118px; }
  #precos .ticket__cab { letter-spacing: .12em; }
}
.chips--3d { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px; }
.chips--3d .chip { padding: 6px 14px 6px 6px; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.chips--3d .chip img { width: 36px; height: 36px; }
@media (min-width: 961px) and (max-width: 1180px) { .chips--3d { grid-template-columns: repeat(2, max-content); } }
/* C24: o W do lacre num amarelo vivo, mais grosso e com brilho */
.lacre--navy b { color: var(--yellow); font-size: 50px; -webkit-text-stroke: 1.4px var(--yellow); text-shadow: 0 0 10px rgba(245,183,28,.6), 0 0 2px rgba(245,183,28,.9); }

/* ---------- C27: polaroides de "Outros passeios" na mesma altura ---------- */
#outros .polaroides { align-items: stretch; }
#outros .polaroides .polaroid:nth-child(n) { margin-top: 0; display: flex; flex-direction: column; }
#outros .polaroid__info { flex: 1; display: flex; flex-direction: column; }
#outros .polaroid__preco { margin-top: auto; align-self: flex-start; }
#outros .polaroid__info p { margin-bottom: 10px; }

/* ---------- C29 e C30: cadeado inteiro e o elástico amarelo ---------- */
.livro__cadeado { right: 58px; top: 22px; width: auto; }
.livro__elastico { background: var(--yellow); opacity: 1; }

/* ---------- Celular ---------- */
@media (max-width: 960px) {
  #outros .polaroides .polaroid:nth-child(n) { margin-top: 0; }
}
/* tablet em pé: o nome fica numa faixa mais larga que alta, no meio da tela, para as bolhas não se espalharem demais */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .nome-vivo:not(.nome-vivo--estatico) .nome-vivo__palco { height: 80vw; min-height: 0; top: calc(50svh - 40vw); padding-top: 40px; }
}
@media (max-width: 600px) {
  .montanha__nota { right: 14px; }
  .ficha .ico { width: 26px; height: 26px; }
  #dia .parada__marco { box-shadow: 0 0 0 4px var(--yellow), 0 6px 14px rgba(27,42,94,.22); }
  .chips--3d { grid-template-columns: repeat(2, max-content); }
  .chips--3d .chip img { width: 32px; height: 32px; }
  .dobra-guarda { display: grid; height: 170px; margin: -85px 0; }
  .dobra-guarda canvas { width: 190px; height: 168px; }
  .livro__cadeado { right: 48px; }
}

/* mapa parado no celular: o mundo inteiro cabe em 360 px, então nomes e pontos crescem para continuar legíveis */
@media (max-width: 760px) {
  .mapa-dia:not(.mapa-dia--vivo) .mapa-dia__pino text { font-size: 50px; stroke-width: 12px; }
  .mapa-dia:not(.mapa-dia--vivo) .mapa-dia__pino .ponto { r: 14px; }
  .mapa-dia:not(.mapa-dia--vivo) .mapa-dia__regiao { display: none; }
  .mapa-dia:not(.mapa-dia--vivo) .mapa-dia__pino[data-parada="3"] text { text-anchor: end; transform: translate(-62px, -30px); }
}
/* celular e tablet em pé: o mapa prende no alto ocupando 40% da altura e as fotos rolam embaixo; sem facho */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .mapa-dia--vivo .mapa-dia__corpo { display: block; padding: 0; }
  .mapa-dia--vivo .mapa-dia__palco { height: 40vh; height: 40svh; z-index: 2; background: var(--cream-soft); box-shadow: 0 10px 18px -12px rgba(27,42,94,.25); }
  .mapa-dia--vivo .mapa-dia__fotos { padding: 24px 16px 20vh; }
  .mapa-dia--vivo .mapa-dia__parada { padding-top: 8vh; }
  .mapa-dia--vivo .mapa-dia__facho { display: none; }
  .mapa-dia__pino text { font-size: 22px; }
}