/* ══ Efeitos opcionais ══════════════════════════════════════════════════════
   Faixa infinita · Números animados · Revelação com cursor ·
   Storytelling fixo · Botões magnéticos · Cartões com luz no hover
   Tudo respeita prefers-reduced-motion e telas de toque.               */

/* Algarismos alinhados: a Cormorant usa números "antigos" (10 parece IO) */
.numero-valor, .historia-num, .historia-total, .historia-passo-num, .passos li::before { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

/* ── Faixa infinita (Infinite Marquee) ─────────────────────────────────── */
.faixa {
  position: relative; z-index: 2; overflow: hidden;
  padding: clamp(20px, 3vw, 36px) 0; display: grid; gap: 10px;
  border-block: 1px solid var(--linha);
  background: linear-gradient(var(--fundo), var(--fundo-2) 50%, var(--fundo));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.faixa-linha { display: flex; width: max-content; animation: faixa var(--faixa-tempo, 46s) linear infinite; }
.faixa-linha--reversa { animation-direction: reverse; --faixa-tempo: 38s; }
.faixa:hover .faixa-linha { animation-play-state: paused; }
.faixa-trilho { list-style: none; margin: 0; padding: 0; display: flex; flex-shrink: 0; }
.faixa-trilho li {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(28px, 4.4vw, 64px); line-height: 1.1; color: var(--texto);
}
.faixa-trilho li::after { content: "✳"; font-family: var(--fonte-texto); font-size: .36em; color: var(--acento); margin: 0 .9em; }
.faixa-trilho--pequeno li { font-family: var(--fonte-texto); font-weight: 500; font-size: clamp(12px, 1vw, 14px); letter-spacing: .32em; text-transform: uppercase; color: var(--texto-suave); }
.faixa-trilho--pequeno li::after { content: "·"; font-size: 1.4em; margin: 0 1.6em; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ── Números animados (Animated Counters) ──────────────────────────────── */
.numeros { position: relative; padding: clamp(48px, 9vh, 110px) var(--gutter); }
.numeros-grade { max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.numero { display: grid; gap: 6px; text-decoration: none; padding: clamp(22px, 2.6vw, 34px); }
.numero[hidden] { display: none; }
.numero-valor {
  font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(54px, 6vw, 92px); line-height: 1; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.numero-valor small { font-size: .42em; margin-left: .12em; color: var(--acento); }
.numero-estrela { font-family: var(--fonte-texto); }
.numero-rotulo { font-size: 14px; letter-spacing: .04em; color: var(--texto-suave); }

/* ── Revelação com cursor (Cursor Mask Reveal) ─────────────────────────── */
.revela { position: relative; padding: 0; }
.revela-palco {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  --x: 50%; --y: 50%; --r: 0px; cursor: crosshair; touch-action: pan-y;
}
.revela-base, .revela-topo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.revela-base { filter: grayscale(1) brightness(.22) blur(2px); transform: scale(1.02); }
.revela-topo {
  filter: brightness(1.12) contrast(1.05);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 45%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 45%, transparent 100%);
}
.revela-palco::after { /* vinheta para fundir com as seções vizinhas */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--fundo), transparent 18%, transparent 82%, var(--fundo)),
              linear-gradient(to left, var(--fundo), transparent 30%);
}
.revela-texto { position: absolute; z-index: 2; right: var(--gutter); top: 50%; translate: 0 -50%; width: min(460px, calc(100% - 2 * var(--gutter))); }
.revela-frase { font-family: var(--fonte-titulo); font-weight: 300; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.05; color: var(--texto); margin-bottom: .4em; }
.revela-dica { display: block; margin-top: 1.2em; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--acento); }
.revela-dica-touch { display: none; }
@media (hover: none) { .revela-dica-desk { display: none; } .revela-dica-touch { display: inline; } .revela-palco { cursor: auto; } }
@media (max-width: 860px) {
  .revela-palco::after { background: linear-gradient(var(--fundo), transparent 18%, transparent 55%, var(--fundo) 92%); }
  .revela-texto { top: auto; bottom: 7vh; translate: none; left: var(--gutter); right: var(--gutter); width: auto; }
}

/* ── Storytelling fixo (Sticky Storytelling) ───────────────────────────── */
.secao--historia { align-content: start; padding-top: 0; padding-bottom: 0; }
.historia-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(24px, 5vw, 80px); }
.historia-palco { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; isolation: isolate; }
.historia-arte {
  position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); top: 8%; width: 115%; height: 84%; object-fit: cover; object-position: left center;
  mix-blend-mode: var(--mistura); opacity: .9;
  -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 92%), linear-gradient(transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to right, #000 30%, transparent 92%), linear-gradient(transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: transform 1.2s var(--ease);
}
.historia-indice { max-width: 440px; margin-left: auto; margin-right: clamp(0px, 3vw, 40px); }
.historia-contador { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; font-family: var(--fonte-titulo); }
.historia-num { font-size: clamp(64px, 7vw, 104px); line-height: 1; color: var(--acento); font-variant-numeric: tabular-nums; display: inline-block; }
.historia-num.troca { animation: historia-num .5s var(--ease); }
@keyframes historia-num { from { opacity: 0; transform: translateY(18px); } }
.historia-total { font-size: 22px; color: var(--texto-suave); }
.historia-barra { height: 2px; margin-top: 18px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.historia-barra span { display: block; height: 100%; width: 100%; background: var(--acento); transform-origin: left; transform: scaleX(var(--progresso, 0)); }
.historia-passos { list-style: none; margin: 0; padding: 30vh 0 40vh; display: grid; gap: 34vh; }
.historia-passo { opacity: .28; transform: scale(.97); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .6s; }
.historia-passo.ativo { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.historia-passo-num { display: block; font-family: var(--fonte-titulo); font-size: 15px; letter-spacing: .2em; color: var(--acento); margin-bottom: 12px; }
.historia-passo h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 400; }
@media (max-width: 860px) {
  .historia-grade { grid-template-columns: 1fr; gap: 0; }
  .historia-palco { position: sticky; top: 56px; z-index: 3; height: auto; padding: 10px 0 14px; background: linear-gradient(var(--fundo) 80%, transparent); }
  .historia-arte { display: none; }
  .historia-indice { margin: 0; max-width: none; padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; }
  .historia-indice .rotulo { grid-column: 1 / -1; margin-bottom: 6px; }
  .historia-indice h2 { font-size: 24px; margin: 0; }
  .historia-contador { margin: 0; grid-row: 2; grid-column: 2; }
  .historia-num { font-size: 44px; }
  .historia-total { font-size: 15px; }
  .historia-barra { grid-column: 1 / -1; margin-top: 12px; }
  .historia-passos { padding: 6vh 0 12vh; gap: 16vh; }
}

/* ── Cartões com luz no hover (Minimal Hover Card) ─────────────────────── */
.cartao { --mx: 50%; --my: 50%; isolation: isolate; overflow: hidden; }
.cartao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.cartao::after { /* borda que acende perto do cursor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx) var(--my), color-mix(in srgb, var(--acento) 70%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s var(--ease);
}
.cartao:hover::before, .cartao:hover::after { opacity: 1; }
.cartao:hover { transform: translateY(-3px); border-color: var(--linha); }
.cartao h3 { transition: color .3s; }
.cartao:hover h3 { color: #fff; }
.local-mapa .seta { display: inline-block; transition: transform .35s var(--ease); }
.cartao:hover .local-mapa .seta, .local-mapa:hover .seta { transform: translateX(5px); }

/* ── Botões magnéticos (Magnetic Button) ───────────────────────────────── */
[data-magnetico] { translate: var(--tx, 0px) var(--ty, 0px); transition: translate .5s cubic-bezier(.2, .9, .25, 1.3), transform .4s var(--ease), filter .3s, background .3s; }
[data-magnetico].puxando { transition: translate .12s linear, transform .4s var(--ease), filter .3s, background .3s; }
.whats[data-magnetico] { transition: translate .5s cubic-bezier(.2, .9, .25, 1.3), transform .5s var(--ease); }

/* ── Movimento reduzido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .faixa-linha { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .faixa-trilho { flex-wrap: wrap; justify-content: center; }
  .faixa-trilho[aria-hidden] { display: none; }
  .historia-passo { opacity: 1; transform: none; }
  [data-magnetico] { translate: none; }
}