/* =========================================================
   Recanto do Dario · v3
   Identidade oficial (Manual de Identidade Dario): azul-noite do D,
   azul #336699, azul médio #4692c2, ciano #00ccff e grafite #373334.
   Maiandra GD nos títulos (é a letra da logo) e Yeah Papa nos
   bilhetes manuscritos. Fundo claro e frio, fotos grandes e um fio
   com as três ondas da logo descendo a página e ligando as seções.
   Fonte em px por breakpoint, escala de 8, grade até 1280px.
   ========================================================= */
@font-face { font-family: 'Maiandra GD'; src: url('../fonts/maiandra.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Yeah Papa'; src: url('../fonts/yeahpapa.woff2') format('woff2'); font-display: swap; }

:root {
  /* cores oficiais */
  --noite: #000c28;
  --azul: #336699;
  --azul-medio: #4692c2;
  --ciano: #00ccff;
  --grafite: #373334;
  /* apoio, derivados para leitura */
  --nevoa: #f1f5f4;
  --nevoa-2: #e4ecea;
  --papel: #fbfcfc;
  --tinta: #0b1a33;
  --tinta-2: #4b5966;
  --linha: #cdd8d6;
  --espuma: #9fdcf5;
  --mata: #2d4a37;
  --musgo: #3f6b4a;
  --alerta: #9a3d12;
  /* nomes usados pelas seções de serviço reaproveitadas */
  --rio: var(--azul); --rio-forte: var(--azul); --rio-texto: #fff;

  --font-display: 'Maiandra GD', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --font-mao: 'Yeah Papa', 'Segoe Print', cursive;

  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px;
  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px;
  --sombra-cartao: 0 1px 0 rgba(0,12,40,.06), 0 24px 60px rgba(0,12,40,.10);
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nevoa); color: var(--tinta); font: 400 17px/1.65 var(--font-sans); overflow-x: clip; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: var(--azul); text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
.icone { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; margin: 0 0 var(--space-2); }
h1 { font-size: 36px; line-height: 1.1; }
h2 { font-size: 30px; line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.2; margin-bottom: var(--space-1); }
p { margin: 0 0 var(--space-2); }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.rotulo { font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); margin: 0 0 var(--space-2); }
.manuscrito { font: 400 28px/1 var(--font-mao); color: var(--ciano); margin: 0 0 var(--space-1); letter-spacing: .02em; }
.mono { font-family: var(--font-mono); font-size: 15px; }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; }
.pular { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--noite); color: #fff; padding: 8px 16px; border-radius: var(--radius-sm); }
.pular:focus { top: 16px; }
[hidden] { display: none !important; }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--radius-sm); background: var(--azul); color: #fff; font: 600 16px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color .25s, transform .25s, box-shadow .25s; }
.botao:hover { background: var(--noite); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,12,40,.25); }
.botao--vazado { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.botao--vazado:hover { background: #fff; color: var(--noite); }
.botao--topo { display: none; min-height: 44px; padding: 8px 18px; font-size: 15px; }
.botao--cheio { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-3); }
.acoes--centro { justify-content: center; }
.link-texto { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; margin-top: var(--space-2); }
.link-texto .icone { width: 16px; height: 16px; }

/* ---------- topo: logo oficial clara sobre o vídeo, azul quando sólido ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 60; color: #fff; transition: background-color .35s, color .35s, box-shadow .35s; }
.topo__linha { display: flex; align-items: center; gap: var(--space-3); padding-block: 10px; }
.marca { position: relative; display: block; margin-right: auto; width: 64px; height: 70px; }
.marca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.marca__escura { opacity: 0; }
.topo__nav { display: none; gap: var(--space-4); }
.topo__nav a { color: inherit; text-decoration: none; font-size: 15px; font-weight: 600; opacity: .9; }
.topo__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.topo.solido { background: rgba(241,245,244,.95); color: var(--tinta); box-shadow: 0 1px 0 var(--linha); backdrop-filter: blur(8px); }
.topo.solido .marca__clara { opacity: 0; }
.topo.solido .marca__escura { opacity: 1; }

/* ---------- o fio do rio ---------- */
.fio { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; z-index: 1; overflow: visible; }
.fio path { fill: none; stroke-linecap: round; }
.fio__a { stroke: var(--azul); stroke-width: 2.5; }
.fio__b { stroke: var(--azul-medio); stroke-width: 2.5; }
.fio__c { stroke: var(--ciano); stroke-width: 2; }
.fio__ponto { fill: var(--nevoa); stroke: var(--azul-medio); stroke-width: 2; transition: fill .4s, r .4s; }
.fio__ponto.aceso { fill: var(--ciano); stroke: var(--azul); }
.fio__a { opacity: .9; } .fio__b { opacity: .7; } .fio__c { opacity: .8; }
main { position: relative; }
main > section { position: relative; }
main > section > .container, main > section > .trilho { position: relative; z-index: 2; }

/* =========================================================
   1. ABERTURA
   ========================================================= */
.abertura { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; background: var(--noite); overflow: hidden; padding: 120px 0 112px; }
.abertura__midia, .abertura__midia picture, .abertura__poster, .abertura__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura__poster, .abertura__video { object-fit: cover; }
.abertura__video { opacity: 0; transition: opacity 1.2s ease; }
.abertura__video.tocando { opacity: 1; }
.abertura__veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,12,40,.55) 0%, rgba(0,12,40,0) 24%), linear-gradient(0deg, rgba(0,12,40,.92) 0%, rgba(0,12,40,.55) 38%, rgba(0,12,40,0) 66%); }
.abertura__conteudo { position: relative; z-index: 2; }
.abertura h1 { max-width: 760px; text-shadow: 0 2px 28px rgba(0,0,0,.3); }
.abertura__apoio { max-width: 56ch; color: rgba(255,255,255,.92); font-size: 17px; }
.ondas-divisa { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 72px; z-index: 3; }
.ondas-divisa .o1 { fill: var(--nevoa); }
.ondas-divisa .o2 { fill: none; stroke: var(--azul-medio); stroke-width: 2.5; }
.ondas-divisa .o3 { fill: none; stroke: var(--ciano); stroke-width: 2; }

/* a busca de reserva */
.busca { margin-top: var(--space-4); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: var(--space-2); border-radius: var(--radius-md); background: rgba(251,252,252,.96); color: var(--tinta); box-shadow: 0 24px 60px rgba(0,0,0,.28); max-width: 980px; }
.busca__campo { display: grid; gap: 4px; min-width: 0; }
.busca__campo:first-child { grid-column: 1 / -1; }
.busca label { font: 500 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.busca select, .busca input { width: 100%; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--linha); border-radius: var(--radius-sm); background: #fff; font-size: 16px; }
.busca select:focus, .busca input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(51,102,153,.2); }
.busca__botao { grid-column: 1 / -1; }
.busca__aviso { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--alerta); }
.busca__aviso:empty { display: none; }

/* =========================================================
   2. BEM-VINDO
   ========================================================= */
.bemvindo { padding: var(--space-12) 0 var(--space-8); }
.bemvindo__grade { display: grid; gap: var(--space-6); }
.bemvindo__texto > p { color: var(--tinta-2); max-width: 58ch; }
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-4) 0 0; }
.numeros div { border-top: 2px solid var(--azul); padding-top: 12px; }
.numeros dt { font: 500 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.numeros dd { margin: 4px 0 0; font: 400 34px/1 var(--font-display); color: var(--noite); }
.bemvindo__fotos { position: relative; display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: var(--space-2); }
.foto img { width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; }
.foto--alta img { aspect-ratio: 3 / 4; }
.foto--baixa { margin-bottom: -48px; }
.foto--baixa img { aspect-ratio: 4 / 5; border: 6px solid var(--nevoa); }
.foto figcaption { font-size: 14px; color: var(--tinta-2); margin-top: 8px; }

/* =========================================================
   3. EXPERIÊNCIAS: ladrilhos com foto inteira e botão vazado
   ========================================================= */
.experiencias { padding: var(--space-12) 0; }
.cabeca { max-width: 680px; margin-bottom: var(--space-4); }
.ladrilhos { display: grid; gap: var(--space-2); }
.ladrilho { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 380px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.ladrilho > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ladrilho::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,12,40,.88) 0%, rgba(0,12,40,.35) 50%, rgba(0,12,40,.05) 100%); }
.ladrilho:hover > img { transform: scale(1.05); }
.ladrilho__texto { padding: var(--space-3); }
.ladrilho__texto .icone { width: 24px; height: 24px; color: var(--ciano); margin-bottom: var(--space-1); }
.ladrilho__texto p { color: rgba(255,255,255,.9); max-width: 40ch; font-size: 16px; }
.ladrilho__texto .botao { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.credito { position: absolute; top: 12px; right: 12px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(0,12,40,.6); font: 500 11px/1.2 var(--font-mono); color: #fff; }

/* =========================================================
   4. QUIOSQUES
   ========================================================= */
.quiosques { padding: var(--space-12) 0; }
.quiosques__grade { display: grid; gap: var(--space-6); }
.quiosques__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiosques__fotos .foto:first-child { grid-column: 1 / -1; }
.quiosques__fotos .foto:first-child img { aspect-ratio: 4 / 3; }
.quiosques__fotos .foto:not(:first-child) img { aspect-ratio: 1; }
.quiosques__texto > p { color: var(--tinta-2); max-width: 50ch; }
.itens { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--space-2); }
.itens li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 16px; }
.itens .icone { color: var(--azul); }
.preco-linha { color: var(--tinta-2); }
.preco-linha strong { font: 400 36px/1 var(--font-display); color: var(--azul); margin-right: 8px; }

/* =========================================================
   5. CACHOEIRAS: seção escura, a água em evidência
   ========================================================= */
/* entra e sai do escuro pela onda da logo (ver .ondas-divisa--topo): corte limpo, nunca faixa de degradê */
.cachoeiras { padding: calc(var(--space-12) + 72px) 0 calc(var(--space-12) + 72px); background: var(--noite); color: #fff; }
.cabeca--clara .rotulo { color: var(--espuma); }
.duas { display: grid; gap: var(--space-3); }
.duas__item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.duas__item figcaption { margin-top: 12px; color: rgba(255,255,255,.85); max-width: 44ch; }
.duas__item .manuscrito { display: block; font-size: 32px; }
.cuidado { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-6); padding: var(--space-2); border-radius: var(--radius-md); background: rgba(255,255,255,.06); border: 1px solid rgba(159,220,245,.25); }
.cuidado img { width: 96px; height: 160px; object-fit: cover; border-radius: 8px; flex: none; }
.cuidado p { margin: 0; color: rgba(255,255,255,.88); font-size: 15px; }
.cuidado strong { color: #fff; }

/* =========================================================
   6. DETALHES: trilho que corre para o lado
   ========================================================= */
.detalhes { padding: var(--space-12) 0; }
.trilho { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) var(--space-2); scroll-padding-inline: var(--gutter); scrollbar-width: thin; cursor: grab; }
.trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.trilho figure { flex: 0 0 76%; scroll-snap-align: start; }
.trilho img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-md); pointer-events: none; }
.trilho figcaption { font: 400 24px/1.1 var(--font-mao); color: var(--azul); margin-top: 10px; }

/* =========================================================
   7. VOZES
   ========================================================= */
.vozes { padding: var(--space-12) 0; }
.vozes__grade { display: grid; gap: var(--space-6); }
.vozes__numero { display: flex; align-items: baseline; gap: 12px; margin: 0 0 var(--space-2); }
.vozes__numero strong { font: 400 96px/1 var(--font-display); color: var(--noite); }
.vozes__numero span { font: 500 14px/1.3 var(--font-mono); color: var(--tinta-2); }
.vozes__nota { color: var(--tinta-2); max-width: 44ch; }
.temas { display: grid; gap: 12px; align-content: start; }
.tema { display: grid; grid-template-columns: 136px 1fr 28px; align-items: center; gap: var(--space-2); font-size: 15px; font-weight: 600; }
.tema i { height: 12px; border-radius: 6px; background: rgba(0,12,40,.08); overflow: hidden; }
.tema b { display: block; height: 100%; width: calc(var(--n) / var(--max, 21) * 100%); background: linear-gradient(90deg, var(--azul), var(--azul-medio)); border-radius: 6px; transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .temas:not(.visivel) .tema b { transform: scaleX(0); }
.tema em { font: 500 14px/1 var(--font-mono); font-style: normal; color: var(--tinta-2); text-align: right; }

/* =========================================================
   8. GRUPOS
   ========================================================= */
.grupos { padding: var(--space-12) 0; }
.grupos__grade { display: grid; gap: var(--space-4); }
.grupos .foto img { aspect-ratio: 3 / 2; }
.grupos__texto > p { color: var(--tinta-2); max-width: 56ch; }

/* ajustes das seções reaproveitadas para a identidade oficial */
.historia, .vozes__estrelas { display: none; }
.precos dd { font-family: var(--font-display); color: var(--azul); }
.resumo { background: var(--noite); }
.resumo__total strong { font-family: var(--font-display); }

/* =========================================================
   FINAL
   ========================================================= */
.final { position: relative; overflow: hidden; padding: calc(var(--space-16) + 48px) 0 var(--space-16); background: var(--noite); color: #fff; text-align: center; }
.final__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45); }
.final__conteudo { position: relative; display: flex; flex-direction: column; align-items: center; }
.final h2 { font-size: 36px; max-width: 18ch; }
.final .manuscrito { font-size: 34px; }

.rodape { background: var(--noite); }
.rodape__grade { grid-template-columns: 1fr; }
.rodape__logo { width: 128px; height: auto; }

.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* =========================================================
   Tablet
   ========================================================= */
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  h1 { font-size: 44px; }
  h2 { font-size: 38px; }
  .topo__nav { display: flex; }
  .botao--topo { display: inline-flex; }
  .marca { width: 76px; height: 82px; }
  .busca { grid-template-columns: 1.3fr 1fr 110px auto; align-items: end; padding: 12px; }
  .busca__campo:first-child, .busca__botao { grid-column: auto; }
  .ladrilhos { grid-template-columns: 1fr 1fr; }
  .ladrilho--grande { grid-column: 1 / -1; min-height: 460px; }
  .duas { grid-template-columns: 1fr 1fr; }
  .trilho figure { flex-basis: 40%; }
  .trilho img { height: 360px; }
  .vozes__grade { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--space-8); }
  .grupos__grade { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--space-6); }
  .rodape__grade { grid-template-columns: 1.2fr 1.4fr 1.2fr 1fr; }
}

/* =========================================================
   Computador
   ========================================================= */
@media (min-width: 1024px) {
  h1 { font-size: 50px; } /* teto do h1 (lei G33) */
  h2 { font-size: 42px; }
  .abertura__apoio { font-size: 19px; }
  .manuscrito { font-size: 32px; }
  .bemvindo__grade { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); }
  .ladrilhos { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 320px; }
  .ladrilho { min-height: 0; }
  .ladrilho--grande { grid-column: span 2; grid-row: span 2; min-height: 0; }
  /* o texto acompanha as fotos enquanto elas passam, em vez de flutuar no meio de um vazio */
  .quiosques__grade { grid-template-columns: 1.2fr 1fr; align-items: start; gap: var(--space-8); }
  .quiosques__texto { position: sticky; top: 132px; padding-top: var(--space-4); }
  .trilho { padding-left: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); scroll-padding-left: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); }
  .trilho figure { flex-basis: 30%; }
  .trilho img { height: 420px; }
  .grupos__grade { gap: var(--space-8); }
  .final h2 { font-size: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .abertura__video { display: none; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .ladrilho > img, .tema b { transition: none; }
  .js .temas:not(.visivel) .tema b { transform: none; }
}

/* ---------- seções de serviço (planejador, combinados, como chegar, dúvidas, rodapé) ---------- */
/* =========================================================
   6. PLANEJADOR
   ========================================================= */
.planejar { padding: var(--space-12) 0; }
.planejar__grade { display: grid; gap: var(--space-6); }
.planejar__intro > p { color: var(--tinta-2); max-width: 52ch; }
.precos { margin: var(--space-4) 0 var(--space-2); }
.precos > div { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--linha); }
.precos > div:first-child { border-top: 1px solid var(--linha); }
.precos dt { font-weight: 600; }
.precos dt small, .precos dd small { display: block; font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin-top: 4px; }
.precos dd { margin: 0; text-align: right; font: 400 36px/1 var(--font-display); color: var(--rio); white-space: nowrap; }
.nota { font-size: 14px; color: var(--tinta-2); }
.planejador { background: var(--papel); border-radius: var(--radius-md); padding: var(--space-3) var(--space-2); box-shadow: var(--sombra-cartao); display: grid; gap: var(--space-3); }
.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo > label, .campo legend { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.campo small { font-weight: 400; color: var(--tinta-2); }
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: start; }
.campo input[type="date"], .campo input[type="text"] { width: 100%; min-height: 48px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--linha); background: var(--nevoa); color: var(--tinta); font: inherit; font-size: 16px; }
.campo input:focus { border-color: var(--rio); outline: none; box-shadow: 0 0 0 3px rgba(44,100,145,.2); }
.aviso-campo { margin: 8px 0 0; font-size: 14px; color: var(--alerta); }
.aviso-campo:empty { display: none; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.opcao > span { display: grid; gap: 2px; padding: var(--space-2); border-radius: var(--radius-md); border: 1.5px solid var(--linha); background: var(--nevoa); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.opcao .icone { width: 24px; height: 24px; color: var(--musgo); margin-bottom: 8px; }
.opcao small { font-size: 14px; color: var(--tinta-2); }
.opcao input:checked + span { border-color: var(--rio); background: #e6f0f7; box-shadow: 0 0 0 3px rgba(44,100,145,.15); }
.opcao input:checked + span .icone { color: var(--rio); }
.opcao input:focus-visible + span { outline: 3px solid var(--espuma); outline-offset: 2px; }
.contador { display: flex; border: 1.5px solid var(--linha); border-radius: var(--radius-sm); background: var(--nevoa); overflow: hidden; }
.contador button { width: 44px; min-height: 48px; flex: none; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.contador button:hover { background: var(--nevoa-2); }
.contador input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; text-align: center; font: 500 18px/1 var(--font-mono); color: var(--tinta); -moz-appearance: textfield; }
.contador input::-webkit-inner-spin-button, .contador input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.extra { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-2); border-radius: var(--radius-md); border: 1.5px dashed var(--linha); cursor: pointer; }
.extra input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rio); flex: none; }
.extra > span { display: flex; gap: 8px; font-weight: 600; }
.extra .icone { color: var(--musgo); margin-top: 2px; }
.extra small { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-2); }
.resumo { border-radius: var(--radius-md); background: var(--noite); color: #e9eff4; padding: var(--space-2) 20px; }
.resumo__linhas { list-style: none; margin: 0 0 12px; padding: 0; font-size: 15px; }
.resumo__linhas li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; color: #a9b8c6; }
.resumo__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 12px; border-top: 1px solid rgba(233,239,244,.16); }
.resumo__total span { font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.resumo__total strong { font: 400 34px/1 var(--font-display); color: #fff; }
.resumo__nota { margin: 8px 0 0; font-size: 13px; color: #a9b8c6; }
.planejador__rodape { margin: -8px 0 0; font-size: 13px; color: var(--tinta-2); text-align: center; }

/* =========================================================
   7. COMBINADOS
   ========================================================= */
.combinados { padding: var(--space-12) 0; }
.combinados__grade { display: grid; gap: var(--space-4); }
.combinados__intro { color: var(--tinta-2); max-width: 36ch; }
.regras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.regras li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) 0; border-bottom: 1px solid var(--linha); }
.regras li:first-child { border-top: 1px solid var(--linha); }
.regras .icone { width: 24px; height: 24px; color: var(--mata); margin-top: 2px; }
.regras b { display: block; }
.regras span { display: block; font-size: 15px; color: var(--tinta-2); }

/* =========================================================
   8. HISTÓRIA (foto de fundo, noite)
   ========================================================= */
.historia { position: relative; overflow: hidden; background: var(--noite); color: #fff; padding: var(--space-16) 0 var(--space-12); }
.historia__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.historia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,27,51,.92) 0%, rgba(13,27,51,.55) 70%, rgba(13,27,51,.35) 100%); }
.historia__grade { position: relative; z-index: 1; display: grid; gap: var(--space-2); }
.historia__ano { font: 400 104px/1 var(--font-display); margin: 0; color: transparent; -webkit-text-stroke: 1.5px var(--espuma); }
.historia .rotulo { color: var(--espuma); }
.historia__texto p:last-child { color: rgba(255,255,255,.88); max-width: 60ch; }

/* =========================================================
   9. COMO CHEGAR
   ========================================================= */
.chegar { padding: var(--space-12) 0; }
.chegar__grade { display: grid; gap: var(--space-4); }
.ficha { margin: var(--space-3) 0; }
.ficha > div { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-2); padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ficha > div:first-child { border-top: 1px solid var(--linha); }
.ficha dt { font: 500 12px/24px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dd { margin: 0; }
.mapa { position: relative; min-height: 360px; border-radius: var(--radius-lg); overflow: hidden; background: var(--noite); display: grid; place-items: center; }
.mapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.mapa__botao { position: relative; display: inline-flex; gap: 8px; align-items: center; min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--radius-sm); background: var(--papel); color: var(--tinta); font-weight: 600; cursor: pointer; }
.mapa__nota { position: absolute; left: 0; right: 0; bottom: var(--space-2); margin: 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.85); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =========================================================
   10. DÚVIDAS
   ========================================================= */
.duvidas { padding: var(--space-12) 0; }
.duvidas__grade { display: grid; gap: var(--space-3); }
.duvidas details { border-bottom: 1px solid var(--linha); }
.duvidas summary { cursor: pointer; list-style: none; position: relative; padding: 20px 40px 20px 0; font-weight: 600; font-size: 18px; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: ''; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--rio); border-bottom: 2px solid var(--rio); transform: rotate(45deg); transition: transform .25s ease; }
.duvidas details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.duvidas details p { color: var(--tinta-2); max-width: 62ch; padding-bottom: 8px; }


/* ---------- rodapé ---------- */
.rodape { background: var(--noite); color: #a9b8c6; padding: var(--space-8) 0 112px; font-size: 15px; }
.rodape a { color: #e9eff4; }
.rodape__grade { display: grid; gap: var(--space-4); }
.rodape__marca { font: 400 24px/1.2 var(--font-display); color: #e9eff4; margin-bottom: var(--space-1); }
.rodape__titulo { color: #e9eff4; font-weight: 600; margin-bottom: var(--space-1); }
.rodape__pequeno { font-size: 13px; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid rgba(233,239,244,.14); font-size: 13px; }
.rodape__base p { margin: 0; }

/* ---------- barra fixa do celular ---------- */
.barra-acao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(238,242,239,.96); box-shadow: 0 -1px 0 var(--linha); backdrop-filter: blur(8px); transform: translateY(110%); transition: transform .35s ease; }
.barra-acao.visivel { transform: none; }
.barra-acao .botao { flex: 1; }
.barra-acao__whats { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: #1f7a45; color: #fff; }

/* ---------- entrada dos blocos ---------- */
.js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .revelar.visivel { opacity: 1; transform: none; }


/* identidade oficial sobre as seções reaproveitadas */
.precos dd, .resumo__total strong, .rodape__marca { font-family: var(--font-display); }
.rodape { background: var(--noite); }
.rodape__grade { display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
  .planejador { padding: var(--space-4); }
  .combinados__grade, .duvidas__grade { grid-template-columns: 1fr 1.5fr; gap: var(--space-8); }
  .chegar__grade { grid-template-columns: 1fr 1.1fr; gap: var(--space-8); align-items: center; }
  .rodape { padding-bottom: var(--space-6); }
  .rodape__grade { grid-template-columns: 1fr 1.4fr 1.2fr .8fr; }
  .barra-acao { display: none; }
}
@media (min-width: 1024px) {
  .planejar__grade { grid-template-columns: 1fr 1.05fr; gap: var(--space-8); align-items: start; }
  .planejar__intro { position: sticky; top: 112px; }
  .mapa { min-height: 460px; }
}

/* =========================================================
   v3.1: ajustes da auditoria
   ========================================================= */
/* um fundo só para todas as seções claras: separação por espaço e pelo fio, sem emendas */
main > section:not(.abertura):not(.cachoeiras):not(.final) { background: transparent; }
.ondas-divisa--topo { top: -1px; bottom: auto; transform: scaleY(-1); }

/* sobretítulo: azul no claro, ciano só no escuro. Ganha das regras "> p" de cada seção */
.container p.rotulo { color: var(--azul); }
.cabeca--clara p.rotulo { color: var(--ciano); }

/* respiro de seção no celular: 56px. O de 96px deixava buracos de quase 200px entre blocos */
:root { --space-12: 56px; }
@media (min-width: 768px) { :root { --space-12: 72px; } }
@media (min-width: 1024px) { :root { --space-12: 96px; } }

/* topo do celular: baixo, com menu num botão */
.topo__menu { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; margin-right: -8px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.topo__menu span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
.topo.aberto .topo__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topo.aberto .topo__menu span:nth-child(2) { opacity: 0; }
.topo.aberto .topo__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 767px) {
  .topo__linha { padding-block: 6px; }
  .marca { width: 46px; height: 50px; }
  .topo.aberto { background: rgba(241,245,244,.98); color: var(--tinta); box-shadow: 0 1px 0 var(--linha); }
  .topo.aberto .marca__clara { opacity: 0; }
  .topo.aberto .marca__escura { opacity: 1; }
  .topo.aberto .topo__nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; gap: 0; padding: 8px var(--gutter) 16px; background: var(--nevoa); box-shadow: 0 12px 24px rgba(0,12,40,.12); }
  .topo.aberto .topo__nav a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--linha); opacity: 1; }
}
@media (min-width: 768px) { .topo__menu, .so-celular { display: none; } }

/* trilho dos detalhes: sem a barra cinza do sistema, com setas e progresso na cor da marca */
.trilho { scrollbar-width: none; }
.trilho::-webkit-scrollbar { display: none; }
.trilho__controle { display: flex; align-items: center; gap: 12px; margin-top: var(--space-2); }
.trilho__progresso { flex: 1; height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.trilho__progresso i { display: block; height: 100%; width: var(--p, 20%); margin-left: var(--x, 0%); background: var(--azul); border-radius: 3px; }
.trilho__seta { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1.5px solid var(--linha); border-radius: 50%; background: transparent; color: var(--azul); cursor: pointer; transition: border-color .2s, background-color .2s, opacity .2s; }
.trilho__seta:hover { border-color: var(--azul); background: var(--papel); }
.trilho__seta[data-trilho="-1"] .icone { transform: rotate(180deg); }
.trilho__seta:disabled { opacity: .35; cursor: default; }

/* aviso do poço: a placa grande o bastante para ler */
.cuidado { align-items: flex-start; }
.cuidado p.cuidado__titulo { font: 400 26px/1 var(--font-mao); color: var(--ciano); margin: 0 0 var(--space-1); }
@media (min-width: 768px) { .cuidado { padding: var(--space-3); gap: var(--space-3); align-items: center; } .cuidado img { width: 120px; height: 200px; } .cuidado p { font-size: 16px; } }

/* vozes: nota, distribuição real e três trechos de quem veio */
.vozes__grade { align-items: start; }
.vozes .temas { margin-top: var(--space-3); }
.falas { display: grid; gap: var(--space-2); }
.fala { margin: 0; padding: var(--space-3); background: var(--papel); border-radius: var(--radius-md); box-shadow: 0 1px 0 rgba(0,12,40,.06); border-left: 3px solid var(--azul-medio); }
.fala p { font: 400 20px/1.35 var(--font-display); color: var(--tinta); margin: 0 0 12px; }
.fala p::before { content: "\201C"; }
.fala p::after { content: "\201D"; }
.fala footer { font: 500 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }

/* fio do rio: o ponto só aparece quando a linha chega nele */
.fio__ponto { opacity: 0; transition: opacity .4s, fill .4s; }
.fio__ponto.aceso { opacity: 1; }

/* =========================================================
   v3.2: redes no rodapé, detalhes presos no computador
   ========================================================= */
.redes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.redes a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.redes a:hover { text-decoration: underline; }
.redes .icone { color: var(--espuma); }

/* o trilho preso: a seção fica alta, o palco gruda na tela e a rolagem vertical
   vira deslocamento horizontal (só no computador e sem "reduzir movimento") */
.detalhes.pino { padding: 0; }
.detalhes.pino .detalhes__palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; overflow: hidden; }
.detalhes.pino .trilho { overflow-x: hidden; scroll-snap-type: none; cursor: default; }
.detalhes.pino .trilho img { height: min(440px, 52vh); }
.detalhes.pino .trilho__seta { display: none; }
.detalhes.pino .trilho__controle { margin-top: var(--space-4); }