/* Carrossauro · Tramandaí — página dos bancos (NFC)
   Três paletas de fundo: branca (padrão), verde e azul. Escolha por ?paleta=verde|azul.
   Tokens e decisões em DESIGN.md. */

/* fontes e tokens de cor: tokens.css */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: calc(var(--doca-h) + var(--seguro) + 32px);
}
:root[data-paleta="branca"] { color-scheme: light; }
:root[data-paleta="verde"], :root[data-paleta="azul"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-1);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--amarelo); color: oklch(0.24 0.03 235); }
img, svg, canvas { display: block; }
svg { fill: currentColor; }
a { color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--realce); outline-offset: 3px; border-radius: 8px; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- palco: vídeo do passeio, fixo atrás ---------- */
.palco {
  position: fixed;
  inset: 0 0 auto 0;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  background: var(--fundo) url("img/poster-v5.webp") center / cover no-repeat;
  pointer-events: none;
}
.palco-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco-tom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--tom-topo) 0%, transparent 30%, transparent 70%, var(--tom-base) 100%);
}

main { position: relative; z-index: 1; }

/* ---------- abertura ---------- */
.abertura {
  min-height: 92svh;
  padding: calc(9svh + env(safe-area-inset-top, 0px)) 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.logo {
  width: min(88vw, 460px);
  height: auto;
  filter: drop-shadow(0 4px 10px oklch(0.2 0.03 235 / 0.25));
}
.slogan {
  margin: 16px auto 0;
  max-width: 16ch;
  font-size: var(--t-3);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-shadow: 0 0 18px var(--tom-topo), 0 0 6px var(--tom-topo);
}
.desde {
  font-family: var(--f-marca);
  font-weight: 400;
  color: var(--realce);
  letter-spacing: 0;
  white-space: nowrap;
}
.valores {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  max-width: 460px;
}
.valor {
  padding: 12px 14px;
  border-radius: var(--r-1);
  background: var(--vidro);
  border: 1px solid var(--vidro-linha);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--sombra);
}
.valor dt { font-size: var(--t-0); font-weight: 750; color: var(--texto-2); }
.valor dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.preco { font-family: var(--f-marca); font-size: var(--t-3); line-height: 1.05; font-variant-numeric: tabular-nums; }
.preco-obs { font-size: var(--t-0); font-weight: 700; color: var(--texto-2); }

/* ---------- painéis de vidro ---------- */
.trecho { padding: 16svh 16px 0; }
#carrossauro { padding-top: 22svh; }
#carreta-maluca { padding-top: 14svh; }
.vidro {
  max-width: 460px;
  padding: 20px 20px 18px;
  border-radius: var(--r-2);
  background: var(--vidro);
  border: 1px solid var(--vidro-linha);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--sombra), inset 0 1px 0 oklch(1 0 0 / 0.35);
}
.vidro-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vidro h2 {
  margin: 0;
  font-family: var(--f-marca);
  font-weight: 400;
  font-size: var(--t-4);
  line-height: 1;
  color: var(--titulo);
}
.linha { margin: 8px 0 0; font-weight: 700; color: var(--texto); text-wrap: pretty; }

.agora {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--vidro-forte);
  font-size: var(--t-0);
  font-weight: 750;
}
.agora[hidden] { display: none; }
.agora-ponto { width: 9px; height: 9px; border-radius: 50%; background: oklch(0.65 0.02 235); flex: none; }
.agora[data-estado="rodando"] .agora-ponto { background: oklch(0.72 0.2 148); animation: pulso 2.4s var(--ease-saida) infinite; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 oklch(0.72 0.2 148 / 0.55); }
  100% { box-shadow: 0 0 0 10px oklch(0.72 0.2 148 / 0); }
}

.grade { margin: 14px 0 0; }
.grade-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-top: 1px solid var(--linha-grade);
}
.grade dt { font-weight: 650; color: var(--texto-2); }
.grade dd { margin: 0; font-weight: 800; font-size: var(--t-2); line-height: 1.2; font-variant-numeric: tabular-nums; }
#carreta-maluca .grade dd { font-size: var(--t-1); }
.nota { margin: 10px 0 0; font-size: var(--t-0); font-weight: 700; color: var(--texto-2); text-wrap: pretty; }
.info { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-0); font-weight: 700; color: var(--texto-2); }
.info li::before { content: "·"; margin-right: 8px; color: var(--titulo); font-weight: 900; }
.grade-preco dd { font-family: var(--f-marca); font-weight: 400; font-size: var(--t-3); color: var(--titulo); }
.grade-linha[data-hoje] dt::after {
  content: "hoje";
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--amarelo);
  color: oklch(0.24 0.03 235);
  font-size: 0.75rem;
  font-weight: 800;
  vertical-align: 2px;
}

.precos { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.precos div { padding: 10px 12px; border-radius: 14px; background: var(--vidro-forte); }
.precos dt { font-size: var(--t-0); font-weight: 700; color: var(--texto-2); }
.precos dd { margin: 0; font-family: var(--f-marca); font-size: var(--t-3); line-height: 1.1; color: var(--titulo); font-variant-numeric: tabular-nums; }

/* balão do WhatsApp dentro do vidro */
.balao {
  position: relative;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  border-radius: 20px 20px 20px 6px;
  background: oklch(1 0 0 / 0.86);
  color: oklch(0.24 0.03 235);
  text-decoration: none;
  box-shadow: 0 10px 24px -14px oklch(0.2 0.05 150 / 0.6);
  transition: transform 0.2s var(--ease-saida), background-color 0.2s var(--ease-saida);
}
.balao::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -9px;
  width: 18px;
  height: 14px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.balao-texto { font-size: 0.97rem; line-height: 1.3; }
.balao-texto strong { display: block; font-weight: 800; color: var(--zap-texto); }
.ico-zap { color: var(--zap); flex: none; }
.balao:active { transform: scale(0.98); }
@media (hover: hover) { .balao:hover { background: oklch(1 0 0 / 0.96); } }

/* ---------- fotos antigas (desde 1992): aparecem no primeiro scroll e abrem com o dedo ---------- */
.album { padding: 2svh 16px 0; display: flex; justify-content: center; }
.fotos {
  --entra: 0;
  --abre: 0;
  position: relative;
  width: 100%;
  height: clamp(176px, 50vw, 250px);
  max-width: 460px;
  opacity: var(--entra);
  transform: translateY(calc(28px * (1 - var(--entra))));
}
.foto {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  width: 60%;
  padding: 5px;
  background: oklch(0.96 0.02 85);
  border-radius: 4px;
  box-shadow: 0 14px 26px -12px oklch(0.15 0.04 60 / 0.6);
  transform-origin: 50% 100%;
}
.foto img { width: 100%; height: auto; border-radius: 2px; }
/* selo de autoridade: aparece e assenta junto com o leque */
.selo {
  position: absolute;
  z-index: 5;
  right: -2px;
  top: -30px;
  width: clamp(88px, 25vw, 112px);
  height: auto;
  opacity: var(--abre);
  transform: rotate(calc(-14deg + 6deg * var(--abre))) scale(calc(0.7 + 0.3 * var(--abre)));
  filter: drop-shadow(0 8px 14px oklch(0.2 0.04 60 / 0.35));
}
.selo-disco { fill: var(--amarelo); stroke: oklch(0.24 0.03 235); stroke-width: 3; }
.selo-anel { fill: none; stroke: oklch(0.24 0.03 235 / 0.55); stroke-width: 1.5; }
.selo-volta { font-family: var(--f-texto); font-size: 10.5px; font-weight: 800; fill: oklch(0.24 0.03 235); }
.selo-num { font-family: var(--f-marca); font-size: 34px; fill: var(--vermelho); }
.selo-anos { font-family: var(--f-texto); font-size: 12px; font-weight: 800; fill: oklch(0.24 0.03 235); letter-spacing: 0.04em; }
.foto:nth-of-type(1) { z-index: 1; transform: translateX(calc(-50% - 30% * var(--abre))) rotate(calc(-8deg * var(--abre))); }
.foto:nth-of-type(2) { z-index: 3; transform: translateX(-50%) translateY(calc(14px * var(--abre))) rotate(calc(1.5deg * var(--abre))); }
.foto:nth-of-type(3) { z-index: 2; transform: translateX(calc(-50% + 30% * var(--abre))) rotate(calc(8deg * var(--abre))); }

/* ---------- botões com a identidade de cada rede ---------- */
/* o vão entre a Carreta Maluca e o "Curtiu" é onde o letreiro aparece */
.fim { padding: 36svh 16px 0; }
.fim h2 {
  margin: 0;
  font-family: var(--f-marca);
  font-weight: 400;
  font-size: var(--t-4);
  line-height: 1;
  color: var(--titulo);
}
.vidro-fim { padding-bottom: 20px; }
.acoes { margin-top: 18px; display: grid; gap: 12px; max-width: 460px; }
.marca-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 0 18px 0 20px;
  border-radius: var(--r-1);
  font-size: var(--t-1);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 26px -16px oklch(0.2 0.04 235 / 0.55);
  transition: transform 0.2s var(--ease-saida), filter 0.2s var(--ease-saida);
}
.marca-botao svg { flex: none; }
.marca-botao:active { transform: scale(0.98); }
@media (hover: hover) { .marca-botao:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); } }
.b-insta { color: #fff; background: linear-gradient(120deg, #5b2bc0 0%, #8a2fb8 45%, #c32f8f 100%); }
.b-google { color: var(--google-texto); background: #fff; }
.b-zap { color: var(--zap-texto); background: #fff; }
.b-zap svg { color: var(--zap); }
/* mapa ao vivo: vermelho do letreiro, o mesmo do marcador no mapa; só aparece com o mapa ligado */
.b-aovivo { margin-top: 16px; color: #fff; background: var(--vermelho); }
.b-aovivo[hidden] { display: none; }
.aovivo-ponto { width: 12px; height: 12px; border-radius: 50%; background: #fff; flex: none; animation: pulso-branco 2.4s var(--ease-saida) infinite; }
@keyframes pulso-branco {
  0% { box-shadow: 0 0 0 0 oklch(1 0 0 / 0.6); }
  100% { box-shadow: 0 0 0 10px oklch(1 0 0 / 0); }
}
@media (prefers-reduced-motion: reduce) { .aovivo-ponto { animation: none; } }
.google { letter-spacing: -0.01em; }
.google span:nth-child(1), .google span:nth-child(4) { color: #4285f4; }
.google span:nth-child(2), .google span:nth-child(6) { color: #ea4335; }
.google span:nth-child(3) { color: #e8a600; }
.google span:nth-child(5) { color: #34a853; }

/* ---------- rodapé ---------- */
.rodape {
  display: flex;
  justify-content: center;
  padding: 20px 16px calc(var(--seguro) + 24px);
}
.assina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--texto-2);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-saida);
}
.golden { height: 10px; width: auto; }
.golden-claro { display: none; }
:root[data-paleta="verde"] .golden-escuro, :root[data-paleta="azul"] .golden-escuro { display: none; }
:root[data-paleta="verde"] .golden-claro, :root[data-paleta="azul"] .golden-claro { display: block; }
@media (hover: hover) { .assina:hover { opacity: 1; } }

/* ---------- doca fixa ---------- */
.doca {
  position: fixed;
  z-index: 10;
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--seguro));
  height: var(--doca-h);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: var(--r-2);
  background: var(--vidro-forte);
  border: 1px solid var(--vidro-linha);
  -webkit-backdrop-filter: var(--vidro-filtro);
  backdrop-filter: var(--vidro-filtro);
  box-shadow: var(--sombra), inset 0 1px 0 oklch(1 0 0 / 0.3);
  transition: opacity 0.35s var(--ease-saida), transform 0.35s var(--ease-saida);
}
.doca a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--texto);
  transition: background-color 0.2s var(--ease-saida);
}
.d-insta { fill: url(#g-insta); }
.d-zap { color: var(--zap); }
.doca a:active { background: oklch(1 0 0 / 0.2); }
@media (hover: hover) { .doca a:hover { background: oklch(1 0 0 / 0.16); } }
.doca[data-recolhida] { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* ---------- telas largas (desktop) — o celular não passa por aqui ----------
   Vídeo numa janela vertical e conteúdo numa coluna, os dois centrados na tela.
   Atrás, o mesmo vídeo bem desfocado na cor da paleta: a tela inteira anda com o passeio. */
.ambiente, .ambiente-tom { display: none; }
@media (min-width: 960px) {
  :root {
    --doca-h: 60px;
    --video-h: min(88vh, 900px);
    --video-w: calc(var(--video-h) * 9 / 16);
    --coluna: 460px;
    --vao: clamp(48px, 6vw, 112px);
    --esquerda: max(32px, calc((100vw - var(--video-w) - var(--vao) - var(--coluna)) / 2));
  }
  .ambiente {
    display: block;
    position: fixed;
    inset: -8vmax;
    width: calc(100% + 16vmax);
    height: calc(100% + 16vmax);
    z-index: 0;
    filter: blur(56px) saturate(1.35);
    pointer-events: none;
  }
  .ambiente-tom {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--fundo);
    opacity: 0.62;
    pointer-events: none;
  }
  :root[data-paleta="verde"] .ambiente-tom, :root[data-paleta="azul"] .ambiente-tom { opacity: 0.5; }
  .palco {
    left: var(--esquerda);
    right: auto;
    top: calc((100vh - var(--video-h)) / 2);
    width: var(--video-w);
    height: var(--video-h);
    border-radius: 28px;
    box-shadow: 0 30px 60px -30px oklch(0.15 0.04 235 / 0.55), 0 0 0 1px oklch(1 0 0 / 0.35);
  }
  .palco-tom { display: none; }
  main {
    margin-left: calc(var(--esquerda) + var(--video-w) + var(--vao));
    width: var(--coluna);
    max-width: calc(100vw - var(--esquerda) - var(--video-w) - var(--vao) - 24px);
  }
  .abertura, .album, .trecho, .fim, .rodape { padding-left: 0; padding-right: 0; }
  .abertura { min-height: 100vh; justify-content: center; padding-top: 0; }
  .slogan { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
  .album { padding-top: 0; }
  #carrossauro { padding-top: 14vh; }
  #carreta-maluca { padding-top: 10vh; }
  /* no desktop o letreiro já aparece na janela do vídeo: o vão do celular fecha */
  .fim { padding-top: 12vh; }
  .rodape { padding-bottom: 32px; }
  /* atalhos viram uma barra vertical à direita da coluna, onde sobra espaço */
  .doca {
    left: calc(var(--esquerda) + var(--video-w) + var(--vao) + var(--coluna) + 28px);
    right: auto;
    top: 50%;
    bottom: auto;
    width: 84px;
    height: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: 70px;
    transform: translateY(-50%);
  }
  .doca[data-recolhida] { transform: translateY(-50%) translateX(12px); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .doca { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .agora[data-estado="rodando"] .agora-ponto { animation: none; }
  * { transition-duration: 0.01ms !important; }
}