/* Base: reset, tipografia, navegação, botões, formulários, rodapé. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--c-asfalto);
  color: var(--c-creme);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
fieldset { border: 0; min-width: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
p { text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--c-pinca); outline-offset: 3px; }
.papel :focus-visible { outline-color: var(--c-tinta); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--margem); top: -100px; z-index: 60;
  background: var(--c-pinca); color: var(--c-asfalto); padding: var(--e-2) var(--e-3); border-radius: var(--raio);
  min-height: var(--alvo); display: inline-flex; align-items: center;
}
.pular:focus { top: var(--e-2); }

.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--margem); }

/* Tipos */
.display-xl { font-family: var(--font-display); font-size: var(--t-display-xl); font-weight: 600; line-height: .95; letter-spacing: -.02em; }
.display-l { font-family: var(--font-display); font-size: var(--t-display-l); font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.1; }
.h3 { font-family: var(--font-body); font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.texto-l { font-size: var(--t-body-l); max-width: var(--texto-max); }
/* Texto suave: Concreto no escuro, Tinta suave no papel, Creme sobre foto (o Concreto não garante 4,5:1 sobre imagem). */
.suave { color: var(--texto-suave, var(--c-concreto)); }
.papel { --texto-suave: var(--c-tinta-suave); }
.com-veu, .cenas-pin, .nao-encontrada { --texto-suave: var(--c-creme); }
.dado { font-family: var(--font-data); font-size: var(--t-data); font-variant-numeric: tabular-nums; }

/* Marca (logotipo em SVG via máscara, herda currentColor) */
.marca {
  display: inline-block; background: currentColor; aspect-ratio: 926 / 119;
  -webkit-mask: url("/img/logo/logo-wordmark.svg") center / contain no-repeat;
  mask: url("/img/logo/logo-wordmark.svg") center / contain no-repeat;
}
.marca-k {
  display: inline-block; background: currentColor; aspect-ratio: 361 / 308;
  -webkit-mask: url("/img/logo/logo-k.svg") center / contain no-repeat;
  mask: url("/img/logo/logo-k.svg") center / contain no-repeat;
}

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 52px; padding: 0 var(--e-4); border-radius: var(--raio);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--entrar), background-color .2s var(--entrar);
}
.botao:active { transform: scale(.98); }
.botao-pinca { background: var(--c-pinca); color: var(--c-asfalto); }
.botao-pinca:hover { background: #E2B04D; }
.papel .botao-pinca { border-color: var(--c-tinta); }
.botao-linha { border-color: rgba(237, 228, 211, .4); color: var(--c-creme); background: transparent; }
.botao-linha:hover { border-color: var(--c-creme); }
.papel .botao-linha { border-color: var(--c-tinta); color: var(--c-tinta); }
.botao-pequeno { min-height: var(--alvo); padding: 0 var(--e-3); font-size: .9375rem; }
.icone { width: 1.25em; height: 1.25em; flex: none; }

.link {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size .35s var(--entrar);
}
.link:hover, .link:focus-visible { background-size: 100% 2px; }
.link-desenha { background-size: 0 1px; }
.link-desenha:hover, .link-desenha:focus-visible { background-size: 100% 1px; }

/* Topo */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--c-creme);
  transition: background-color .3s var(--entrar);
}
.topo.solido { background: var(--c-grafite); }
.topo-barra {
  display: flex; align-items: center; gap: var(--e-5);
  max-width: var(--largura-max); margin-inline: auto; padding: var(--e-3) var(--margem);
}
.topo-marca { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--c-creme); }
.topo-marca .marca { width: 132px; }
.topo-nav { margin-left: auto; }
.topo-nav ul { display: flex; gap: var(--e-4); list-style: none; }
.topo-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); min-width: var(--alvo); padding-inline: var(--e-1);
  text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.topo-nav a[aria-current="page"] { color: var(--c-pinca); }
.topo-menu { display: none; }

.menu-movel {
  position: fixed; inset: 0; z-index: 39; background: var(--c-asfalto); color: var(--c-creme);
  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--margem) var(--e-6);
  display: flex; flex-direction: column; gap: var(--e-5);
}
.menu-movel ul { list-style: none; display: grid; gap: var(--e-2); }
.menu-movel a:not(.botao) {
  display: block; font-family: var(--font-display); font-size: var(--t-h2); text-decoration: none; padding: var(--e-1) 0;
}

@media (max-width: 960px) {
  .topo-nav, .topo-wa { display: none; }
  .topo-menu {
    display: inline-flex; margin-left: auto; align-items: center; min-height: var(--alvo); padding: 0 var(--e-3);
    background: none; border: 1px solid rgba(237, 228, 211, .4); border-radius: var(--raio); cursor: pointer;
  }
}

/* Botão flutuante */
.wa-flutuante {
  position: fixed; z-index: 30;
  right: calc(var(--e-3) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
  background: var(--c-pinca); color: var(--c-asfalto);
}
.wa-flutuante .icone { width: 26px; height: 26px; }

/* Véu sobre foto */
.com-veu { position: relative; isolation: isolate; }
.com-veu::after { content: ""; position: absolute; inset: 0; background: var(--veu); z-index: 0; pointer-events: none; }

/* Papel (mundo repasse) */
.papel { background: var(--c-creme); color: var(--c-tinta); }

/* Formulários */
.campo { display: grid; gap: var(--e-2); }
.campo label, .campo .rotulo { font-size: var(--t-small); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: var(--e-2) 0; background: transparent;
  border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo select { padding-right: var(--e-4); }
.campo select option { color: var(--c-tinta); background: var(--c-creme); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom: 2px solid var(--c-pinca); }
.papel .campo input:focus, .papel .campo select:focus, .papel .campo textarea:focus { border-bottom-color: var(--c-tinta); }
.campo [aria-invalid="true"] { border-bottom-color: var(--c-alerta-escuro); }
.papel .campo [aria-invalid="true"] { border-bottom-color: var(--c-alerta); }
.erro-campo { display: flex; gap: var(--e-1); align-items: flex-start; font-size: var(--t-small); color: var(--c-alerta-escuro); }
.papel .erro-campo { color: var(--c-alerta); }
.ajuda { font-size: var(--t-small); color: var(--c-concreto); }
.papel .ajuda { color: var(--c-tinta-suave); }

/* Chips de filtro */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--alvo);
  padding: 0 var(--e-3); border: 1px solid rgba(237, 228, 211, .3); border-radius: var(--raio);
  background: transparent; cursor: pointer; font-size: .9375rem;
}
.chip[aria-pressed="true"] { border-color: var(--c-creme); background: rgba(237, 228, 211, .08); }
.papel .chip { border-color: var(--c-linha-papel); }
.papel .chip[aria-pressed="true"] { border-color: var(--c-tinta); background: rgba(26, 26, 24, .06); }

/* Selos */
.selo {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--e-2);
  font-size: .8125rem; font-weight: 600; border: 1px solid currentColor; border-radius: var(--raio);
}

/* Esqueleto (carregando) */
.esqueleto { background: linear-gradient(100deg, rgba(237,228,211,.06) 30%, rgba(237,228,211,.12) 50%, rgba(237,228,211,.06) 70%) 0 0 / 300% 100%; animation: brilho 1.6s linear infinite; }
.papel .esqueleto { background-image: linear-gradient(100deg, rgba(26,26,24,.05) 30%, rgba(26,26,24,.1) 50%, rgba(26,26,24,.05) 70%); }
@keyframes brilho { to { background-position: -150% 0; } }

/* Aviso de erro/vazio em bloco */
.aviso { display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-6) 0; }

/* Rodapé */
.rodape { background: var(--c-asfalto); color: var(--c-creme); padding: var(--e-8) 0 calc(var(--e-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-linha-escuro); }
.rodape-logo { display: flex; align-items: center; min-height: var(--alvo); color: var(--c-creme); width: 100%; margin-bottom: var(--e-7); }
.rodape-logo .marca { width: 100%; }
.rodape-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-5); margin-bottom: var(--e-7); }
.rodape h2 { font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; color: var(--c-concreto); margin-bottom: var(--e-2); }
.rodape address { font-style: normal; }
.rodape-colunas .link { display: inline-flex; align-items: center; gap: .35em; min-height: var(--alvo); background-position: 0 calc(100% - 10px); }
.rodape-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--c-linha-escuro); font-size: var(--t-small); color: var(--c-concreto); }
.credito { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alvo); text-decoration: none; color: var(--c-concreto); }
.credito img { height: 24px; width: auto; }
.versao { margin-top: var(--e-3); font-size: .75rem; color: var(--c-concreto); }

/* Grão (atmosfera) — fixo, nunca no conteúdo que rola */
.grao::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .botao-pulso::after { display: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; scroll-behavior: auto !important; }
}

/* ===== Kit de animação (só age com JS; sem JS tudo fica visível) ===== */
.mascara, .linha { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.linha { display: block; }
.palavra, .letra, .linha-dentro { display: inline-block; will-change: transform; }
[data-reativo] .letra { font-variation-settings: "wght" 500; transition: none; }
[data-reativo] { transform-origin: 0 100%; }

/* A: abertura */
.abertura {
  position: fixed; inset: 0; z-index: 100; background: var(--c-asfalto); color: var(--c-creme);
  display: grid; place-items: center; align-content: center; gap: var(--e-4);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  padding: env(safe-area-inset-top, 0px) var(--margem) env(safe-area-inset-bottom, 0px);
}
.abertura-k { width: min(28vw, 160px); height: auto; overflow: visible; }
.abertura-marca { font-family: var(--font-display); font-weight: 600; letter-spacing: .3em; font-size: clamp(1rem, .8rem + 1vw, 1.5rem); }
.abertura-base { position: absolute; left: var(--margem); right: var(--margem); bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: center; }
.abertura-num { font-family: var(--font-data); font-size: var(--t-h3); font-variant-numeric: tabular-nums; }
.abertura-barra { height: 1px; background: var(--c-linha-escuro); overflow: hidden; }
.abertura-barra span { display: block; height: 100%; background: var(--c-pinca); transform: scaleX(0); transform-origin: 0 50%; }
.abertura-pular { min-height: var(--alvo); padding: 0 var(--e-3); background: none; border: 1px solid rgba(237, 228, 211, .4); border-radius: var(--raio); cursor: pointer; }

/* E: cursor */
.cursor-ativo, .cursor-ativo a, .cursor-ativo button, .cursor-ativo summary, .cursor-ativo label { cursor: none; }
.cursor-ativo.cursor-texto, .cursor-ativo input, .cursor-ativo textarea, .cursor-ativo select { cursor: auto; }
.cursor-ponto, .cursor-anel { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; border-radius: 999px; mix-blend-mode: difference; }
.cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--c-creme); }
.cursor-anel { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid var(--c-creme); transition: width .3s var(--entrar), height .3s var(--entrar), margin .3s var(--entrar); }
.cursor-anel.sobre { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor-texto .cursor-ponto, .cursor-texto .cursor-anel { opacity: 0; }

/* E: brilho que segue o cursor nos cards */
.cartao-foto { position: relative; }
.cartao-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--brilho-x, 50%) var(--brilho-y, 50%), rgba(237, 228, 211, .18), transparent 45%); }
.cartao:hover .cartao-foto::after { opacity: 1; }

/* P: palco WebGL (canvas não recebe clique) */
.palco-webgl { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; z-index: 0; }
.galeria-principal { position: relative; }
.galeria-principal.com-palco img { opacity: 0; }

/* N/C: cenas fixadas */
.cenas-pin { position: relative; height: 100dvh; overflow: hidden; }
.cenas-pin .cena { position: absolute; inset: 0; min-height: 0; }
.cenas-pin .cena img { will-change: clip-path; }
.cenas-pin.com-palco .cena img { opacity: 0; }
.cenas-pin .cena::after { z-index: 1; }
.cenas-pin .cena-texto { z-index: 2; }
.cenas-pin.com-palco::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--veu); pointer-events: none; }
.cenas-pin.com-palco .cena::after { display: none; }
.cenas-pin .cena { pointer-events: none; z-index: 2; }
.cenas-pin.com-palco .cena { background: transparent; }
.cenas-pin .cena-texto { pointer-events: auto; }

/* H: botão principal com pulso */
.botao-pulso { position: relative; }
.botao-pulso::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--c-pinca); border-radius: inherit; opacity: 0; animation: pulso 2.6s var(--entrar) 3; pointer-events: none; }
@keyframes pulso { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.18, 1.45); opacity: 0; } }

/* G: K 3D */
.k3d-ativo .marca-k { opacity: 0; }

/* J: vinheta */
.home .chegada-foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(18, 18, 18, .55) 100%); }



/* Toque: sem atraso de duplo toque, destaque de toque intencional. */
a, button, summary, label, select, input, textarea { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--c-pinca) 25%, transparent); }
.menu-movel { overscroll-behavior: contain; overflow-y: auto; }

/* Pausa dos marquees (movimento automático > 5 s precisa de controle). */
.faixa { position: relative; }
.faixa-pausa { position: absolute; right: var(--margem); top: 50%; transform: translateY(-50%); z-index: 2; min-height: var(--alvo); padding: 0 var(--e-3); background: var(--c-grafite); font-size: var(--t-small); }

/* Lacunas de movimento: menu do celular, painel de filtros e erros entram com transição curta. */
@keyframes entrar-menu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes entrar-item { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.menu-movel:not([hidden]) { animation: entrar-menu .28s var(--entrar) both; }
.menu-movel:not([hidden]) li { animation: entrar-item .4s var(--entrar) both; }
.erro-campo:not([hidden]) { animation: entrar-menu .2s var(--entrar) both; }
.faixa-pausa[aria-pressed="true"] { background: var(--c-creme); color: var(--c-asfalto); }