/* ==========================================================================
   A Avenida do Conhecimento · Buriti 2040
   Palco fixo de 1920×1080 escalado para qualquer tela (projeção).
   ========================================================================== */

:root {
  /* paleta do style guide Buriti 2040, com ajustes para aquarela e projeção */
  --forest-900: #183327;
  --forest-700: #24432F;
  --green-600: #2C5F2D;
  --clay-600: #B5683C;
  --clay-700: #96512C;
  --sand-500: #AE815A;
  --ivory: #FAF6F3;
  --paper: #F2EBDF;
  --ink: #27302A;
  --ink-2: #4F5A52;
  --ink-3: #7C847D;
  --route: #C2412B;      /* nanquim vermelho da Avenida */
  --route-hi: #E2563A;
  --hair: rgba(39, 48, 42, .22);

  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-ui: 'Jost', 'Segoe UI', Arial, sans-serif;

  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);
  --fit: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--paper) url(../assets/img/ui/papel_tile.jpg) center / 1000px auto;
  color: var(--ink);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  user-select: none;
}
body.idle, body.idle * { cursor: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--fit));
  overflow: hidden;
  background: var(--paper) url(../assets/img/ui/papel_tile.jpg) center / 1000px auto;
}

/* ---------- tipografia comum ---------- */
.kicker {
  font: 500 15px/1.3 var(--f-ui);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--clay-600);
}
.title {
  font: 600 76px/0.98 var(--f-display);
  color: var(--forest-900);
  letter-spacing: -.01em;
  margin: 0;
}
.lead { font: 400 22px/1.55 var(--f-ui); color: var(--ink-2); margin: 0; }

/* entrada escalonada: qualquer [data-a] dentro de um contêiner .in */
[data-a] {
  opacity: 0; transform: translateY(22px); filter: blur(6px);
  transition: opacity .9s var(--e-out), transform 1.1s var(--e-out), filter .9s var(--e-out);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d0, 0ms));
}
.panel.in [data-a], #sc-territorio.in [data-a], #sc-lugar.in [data-a] { opacity: 1; transform: none; filter: none; }

/* ---------- cenas ---------- */
.scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--e-io), visibility 0s linear 1s;
}
.scene.on { opacity: 1; visibility: visible; transition: opacity 1s var(--e-io), visibility 0s; }

/* ==========================================================================
   CAPA
   ========================================================================== */
#sc-capa { background: #EFE6D6; overflow: hidden; }
.capa-img { position: absolute; inset: -40px; }
.capa-img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  transition: transform 9s var(--e-out), filter 2.4s var(--e-out);
  filter: saturate(.85) brightness(1.04) blur(4px);
}
#sc-capa.in .capa-img img { transform: scale(1.02); filter: saturate(1) brightness(1) blur(0); animation: capaDrift 40s 8s ease-in-out infinite alternate; }
@keyframes capaDrift { to { transform: scale(1.07) translate(-14px, 6px); } }

.capa-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246, 240, 229, .94) 0%, rgba(246, 240, 229, .86) 30%, rgba(246, 240, 229, .4) 48%, rgba(246, 240, 229, 0) 62%),
    linear-gradient(180deg, rgba(250, 246, 240, 0) 55%, rgba(24, 51, 39, .3));
}
.capa-mist { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.capa-mist i {
  position: absolute; width: 1400px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 240, .55), rgba(255, 250, 240, 0));
  filter: blur(30px); opacity: .0;
  animation: mist 38s linear infinite;
}
.capa-mist i:nth-child(1) { top: 520px; left: -900px; animation-delay: -4s; }
.capa-mist i:nth-child(2) { top: 690px; left: -1300px; animation-duration: 52s; animation-delay: -20s; height: 300px; }
.capa-mist i:nth-child(3) { top: 380px; left: -1100px; animation-duration: 64s; animation-delay: -35s; height: 260px; }
@keyframes mist {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: .75; } 85% { opacity: .6; }
  100% { transform: translateX(3400px); opacity: 0; }
}
#motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.capa-text { position: absolute; left: 150px; top: 0; bottom: 0; width: 900px; display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
.capa-text .kicker { color: var(--clay-700); letter-spacing: .32em; }
.capa-title {
  margin: 30px 0 0;
  font: 500 138px/.92 var(--f-display);
  color: var(--forest-900);
  letter-spacing: -.015em;
}
.capa-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em 0; margin-bottom: -.12em; }
.capa-title .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.5s var(--e-out); transition-delay: calc(var(--i) * 110ms + 500ms); }
#sc-capa.in .capa-title .w > span { transform: none; }
.capa-title em { font-style: italic; font-weight: 400; color: var(--clay-700); }
.capa-sub {
  margin: 34px 0 0; max-width: 640px;
  font: 400 24px/1.5 var(--f-ui); color: var(--forest-700);
}
.capa-text .kicker, .capa-sub {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.2s var(--e-out) 1.4s, transform 1.4s var(--e-out) 1.4s;
}
.capa-text .kicker { transition-delay: .2s; }
#sc-capa.in .capa-text .kicker, #sc-capa.in .capa-sub { opacity: 1; transform: none; }

.capa-logo {
  position: absolute; left: 150px; bottom: 86px; height: 70px;
  opacity: 0; transition: opacity 1.6s ease 2.2s;
  filter: drop-shadow(0 0 18px rgba(250, 246, 240, .9)) drop-shadow(0 0 4px rgba(250, 246, 240, .9));
}
#sc-capa.in .capa-logo { opacity: 1; }
.capa-start {
  position: absolute; right: 150px; bottom: 86px;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 30px 18px 34px; border-radius: 999px;
  background: rgba(250, 246, 243, .86); color: var(--forest-900);
  backdrop-filter: blur(8px);
  font: 500 16px var(--f-ui); letter-spacing: .24em; text-transform: uppercase;
  box-shadow: 0 10px 40px rgba(24, 51, 39, .18);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.2s ease 2.6s, transform 1.2s var(--e-out) 2.6s, background .3s;
}
#sc-capa.in .capa-start { opacity: 1; transform: none; }
.capa-start:hover { background: var(--ivory); }
.capa-start svg, .cta svg, .nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.capa-start svg { animation: nudge 2.4s var(--e-io) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* ==========================================================================
   EPÍGRAFE
   ========================================================================== */
#sc-epigrafe { background: url(../assets/img/ui/papel.jpg) center / cover; }
.epi-ghost {
  position: absolute; right: -60px; top: 60px; width: 900px; height: 1000px;
  background: url(../assets/img/map/aquarela_sm.jpg) center / contain no-repeat;
  mix-blend-mode: multiply; opacity: 0; filter: grayscale(.4);
  transition: opacity 3s ease .6s;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent);
          mask-image: radial-gradient(closest-side, #000 40%, transparent);
}
#sc-epigrafe.in .epi-ghost { opacity: .13; }
.epi-inner { position: absolute; left: 260px; top: 0; bottom: 0; width: 1240px; display: flex; flex-direction: column; justify-content: center; }
.epi-text {
  margin: 0; font: italic 400 66px/1.22 var(--f-display); color: var(--forest-900);
  text-indent: -.42em;
}
.epi-text .w { display: inline-block; text-indent: 0; opacity: 0; filter: blur(8px); transform: translateY(14px); transition: opacity 1.1s var(--e-out), filter 1.1s var(--e-out), transform 1.2s var(--e-out); transition-delay: calc(var(--i) * 55ms + 300ms); }
#sc-epigrafe.in .epi-text .w { opacity: 1; filter: none; transform: none; }
.epi-src {
  margin-top: 40px; font: 500 16px var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--clay-600);
  opacity: 0; transition: opacity 1.4s ease 2.6s;
}
.epi-sintese { margin-top: 92px; display: flex; align-items: center; gap: 28px; opacity: 0; transition: opacity 1.6s ease 3.4s; }
.epi-sintese span { font: 500 30px var(--f-display); color: var(--ink-2); white-space: nowrap; }
.epi-sintese i { height: 1px; flex: 0 0 0; background: var(--hair); transition: flex-basis 2s var(--e-out) 3.6s; }
#sc-epigrafe.in .epi-src, #sc-epigrafe.in .epi-sintese { opacity: 1; }
#sc-epigrafe.in .epi-sintese i { flex-basis: 140px; }

/* ==========================================================================
   LINHA DO TEMPO
   ========================================================================== */
#sc-linha { overflow: hidden; background: url(../assets/img/ui/papel.jpg) center / cover; }
.ln-ghost { position: absolute; right: -80px; bottom: -40px; width: 1300px; height: 640px; opacity: 0; transition: opacity 3s ease .4s; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 80%, #000 30%, transparent 100%);
          mask-image: radial-gradient(60% 70% at 70% 80%, #000 30%, transparent 100%); }
.ln-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 70%; filter: grayscale(.5) sepia(.25); }
#sc-linha.in .ln-ghost { opacity: .16; }
.ln-head { position: absolute; left: 200px; top: 150px; }
.ln-head .title { margin-top: 22px; font-size: 84px; line-height: 1; }
.ln-head .title em { font-style: italic; font-weight: 400; color: var(--clay-700); }
.ln-head > * { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--e-out), transform 1.3s var(--e-out); }
.ln-head .title { transition-delay: .18s; }
#sc-linha.in .ln-head > * { opacity: 1; transform: none; }

.ln-track { position: absolute; left: 270px; width: 1340px; top: 640px; height: 0; }
.ln-axis { position: absolute; left: -70px; top: -.8px; width: calc(100% + 70px); height: 1.6px; background: var(--forest-900); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2.6s var(--e-io) .5s; }
#sc-linha.in .ln-axis { transform: none; }
.ln-future { position: absolute; left: calc(100% + 18px); top: -5px; width: 160px; height: 10px; overflow: visible; opacity: 0; transition: opacity 1.2s ease 3.1s; }
.ln-future path { fill: none; stroke: var(--forest-900); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.ln-future .hd { stroke-dasharray: none; stroke-linejoin: round; }
#sc-linha.in .ln-future { opacity: .7; }
.ln-items { list-style: none; margin: 0; padding: 0; }
.ln-items li { position: absolute; top: 0; width: 0; }
.ln-items .yr {
  position: absolute; bottom: 30px; left: 0; transform: translate(-50%, 16px);
  font: 500 78px/1 var(--f-display); color: var(--forest-900); white-space: nowrap; font-variant-numeric: lining-nums;
  opacity: 0; transition: opacity 1s var(--e-out), transform 1.3s var(--e-out);
  transition-delay: calc(var(--i) * 300ms + 900ms);
}
.ln-items .dot {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ivory); border: 2.5px solid var(--forest-900);
  transform: scale(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i) * 300ms + 800ms);
}
.ln-items .tx {
  position: absolute; top: 36px; left: 0; width: 230px; transform: translate(-50%, 14px); text-align: center;
  opacity: 0; transition: opacity 1s var(--e-out), transform 1.3s var(--e-out);
  transition-delay: calc(var(--i) * 300ms + 1100ms);
}
.ln-items .tx strong { display: block; font: 600 27px/1.1 var(--f-display); color: var(--forest-900); }
.ln-items .tx span { display: block; margin-top: 10px; font: 400 17px/1.45 var(--f-ui); color: var(--ink-2); }
.ln-items .tx::before { content: ''; display: block; width: 1px; height: 0; margin: -26px auto 20px; background: var(--hair); transition: height .8s var(--e-out); transition-delay: inherit; }
#sc-linha.in .ln-items .yr { opacity: 1; transform: translate(-50%, 0); }
#sc-linha.in .ln-items .dot { transform: scale(1); }
#sc-linha.in .ln-items .tx { opacity: 1; transform: translate(-50%, 0); }
#sc-linha.in .ln-items .tx::before { height: 18px; }
.ln-items .hot .yr, .ln-items .hot .tx strong { color: var(--route); }
.ln-items .hot .dot { background: var(--route); border-color: var(--ivory); box-shadow: 0 0 0 2.5px var(--route); }
.ln-items .hot .dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--route); opacity: 0; animation: pinHalo 2.4s var(--e-out) 3.2s infinite; --s: 1; }
.ln-items .open .yr { color: var(--clay-600); letter-spacing: .08em; }
.ln-items .open .dot { border-style: dashed; }

/* ==========================================================================
   TERRITÓRIO
   ========================================================================== */
#sc-territorio { overflow: hidden; background: var(--paper) url(../assets/img/ui/papel_tile.jpg) center / 1000px auto; }
#micro-cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; will-change: transform; }
#micro-drift { position: absolute; inset: 0; transform-origin: 1550px 560px; transition: transform 14s var(--e-out); transform: scale(1.06); }
#sc-territorio.in #micro-drift { transform: scale(1); }
#micro-drift img { position: absolute; left: 0; top: 4px; width: 1920px; height: auto; mix-blend-mode: multiply; }
#micro-drift .micro-sat { mix-blend-mode: normal; opacity: 0; transition: opacity 2.2s var(--e-io); }
#sc-territorio.sat .micro-sat { opacity: 1; }
#sc-territorio .micro-layers { position: absolute; left: 120px; top: 700px; z-index: 2; background: rgba(250, 246, 243, .82); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(24, 51, 39, .18); }
.micro-credit { position: absolute; right: 64px; bottom: 30px; z-index: 2; font: 400 12px var(--f-ui); letter-spacing: .04em; color: rgba(250, 246, 243, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); opacity: 0; transition: opacity 1s; }
#sc-territorio.sat .micro-credit { opacity: 1; }
#micro-svg { position: absolute; left: 0; top: 4px; width: 1920px; height: 1071.6px; overflow: visible; }
#micro-svg .ring { fill: none; stroke: var(--ivory); stroke-width: 5; opacity: 0; transform-box: fill-box; transform-origin: center; }
#micro-svg .ring.pulse { animation: ring 3.2s ease-out infinite; }
#micro-svg .ring.pulse.d2 { animation-delay: 1.6s; }
@keyframes ring { 0% { opacity: .9; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.35); } }
#micro-svg .lead-line { fill: none; stroke: var(--forest-900); stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--e-out); }
#micro-svg .dot { fill: var(--forest-900); opacity: 0; transition: opacity .6s; }
#micro-svg .lbl { opacity: 0; transition: opacity 1s ease; }
#micro-svg .lbl rect { fill: rgba(250, 246, 243, .9); }
#micro-svg .lbl text { font-family: var(--f-ui); fill: var(--forest-900); }
#micro-svg .lbl .t1 { font: 600 40px var(--f-display); fill: var(--forest-900); }
#micro-svg .lbl .t2 { font: 500 21px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; fill: var(--clay-600); }
#micro-svg .lbl.small .t1 { font: 600 33px var(--f-display); }
#micro-svg .lbl.big .t1 { font: 600 50px var(--f-display); }
#micro-svg .prop-glow { fill: rgba(250, 246, 243, .0); stroke: none; transition: fill 1.6s; }
#sc-territorio.in #micro-svg .lead-line { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 260ms + 1.1s); }
#sc-territorio.in #micro-svg .dot, #sc-territorio.in #micro-svg .lbl { opacity: 1; transition-delay: calc(var(--i) * 260ms + 1.4s); }

.terr-card {
  position: absolute; left: 120px; top: 110px; width: 600px;
  padding: 48px 50px 44px;
  background: rgba(250, 246, 243, .9);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(24, 51, 39, .18), 0 0 0 1px rgba(24, 51, 39, .06);
  border-radius: 4px;
}
.terr-card .title { font-size: 68px; margin-top: 16px; }
.terr-card .lead { margin-top: 22px; font-size: 21px; }
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; border-top: 1px solid var(--hair); }
.numbers div { padding: 22px 14px 0 0; }
.numbers div + div { padding-left: 18px; border-left: 1px solid var(--hair); }
.numbers b { display: block; font: 600 46px/1 var(--f-display); color: var(--forest-900); white-space: nowrap; }
.numbers b small { font: 500 22px var(--f-display); color: var(--ink-3); margin-left: 5px; }
.numbers > div > span { display: block; margin-top: 10px; font: 400 15px/1.35 var(--f-ui); color: var(--ink-2); }
#sc-territorio .terr-card [data-a] { --d0: 500ms; }

/* ==========================================================================
   MAPA
   ========================================================================== */
#sc-mapa { overflow: hidden; }
#map-view { position: absolute; inset: 0; mix-blend-mode: multiply; }
#map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --cam: 1; }
#map-world .layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .9s var(--e-io);
}
#map-world .layer.on { opacity: 1; }
#map-world .layer[data-layer="satelite"], #map-world .layer[data-layer="zoneamento"] {
  -webkit-mask-image: radial-gradient(64% 58% at 54% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(64% 58% at 54% 50%, #000 70%, transparent 100%);
}
#map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#route-ghost path { fill: none; stroke: var(--forest-900); stroke-opacity: .32; stroke-width: calc(2.2px / var(--cam)); stroke-dasharray: calc(5px / var(--cam)) calc(5px / var(--cam)); stroke-linecap: round; opacity: 0; transition: opacity 1s; }
#route-halo path { fill: none; stroke: #FBF6EC; stroke-opacity: .85; stroke-width: calc(9.5px / var(--cam)); stroke-linecap: round; stroke-linejoin: round; }
#route-main path { fill: none; stroke: var(--route); stroke-width: calc(4.6px / var(--cam)); stroke-linecap: round; stroke-linejoin: round; }
#route-halo path, #route-main path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.drawn #route-ghost path { opacity: 1; }
#trail, #trail-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
#trail-halo { stroke: rgba(255, 236, 200, .9); stroke-width: calc(16px / var(--cam)); filter: blur(calc(3px / var(--cam))); }
#trail { stroke: var(--route-hi); stroke-width: calc(5.6px / var(--cam)); }
#traveler { opacity: 0; transition: opacity .4s; }
#traveler.on { opacity: 1; }
#traveler .t-dot { fill: var(--ivory); stroke: var(--route); stroke-width: calc(3px / var(--cam)); r: calc(6px / var(--cam)); }
#traveler .t-glow { fill: rgba(255, 220, 170, .55); r: calc(18px / var(--cam)); animation: tglow 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes tglow { to { transform: scale(1.5); opacity: .3; } }

/* pins */
#pins { position: absolute; inset: 0; }
.pin {
  position: absolute; width: 0; height: 0;
  --s: calc(1 / var(--cam));
}
.pin .p {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  transform: scale(calc(var(--s) * var(--k, 1)));
  border-radius: 50%;
  background: var(--ivory); border: 2.5px solid var(--route);
  box-shadow: 0 3px 10px rgba(24, 51, 39, .3), 0 0 0 3px rgba(250, 246, 243, .7);
  display: grid; place-items: center;
  font: 600 13px var(--f-ui); color: var(--route); letter-spacing: .02em;
  transition: transform .5s var(--e-out), background .4s, color .4s, opacity .5s;
}
.pin.hidden .p { --k: 0; }
.pin.visited .p { background: var(--route); color: var(--ivory); border-color: var(--ivory); box-shadow: 0 3px 10px rgba(24, 51, 39, .35), 0 0 0 2px var(--route); }
.pin.current .p { --k: 1.18; background: var(--forest-900); color: var(--ivory); border-color: var(--ivory); box-shadow: 0 0 0 2px var(--forest-900), 0 6px 16px rgba(24, 51, 39, .4); }
.pin .halo {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 2px solid var(--route); opacity: 0; pointer-events: none;
  transform: scale(var(--s));
}
.pin.current .halo, .pin.hl .halo { animation: pinHalo 2s var(--e-out) infinite; }
@keyframes pinHalo { 0% { opacity: .9; transform: scale(var(--s)); } 100% { opacity: 0; transform: scale(calc(var(--s) * 2.6)); } }
.pin .tip {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 50%;
  transform: scale(var(--s)) translate(30px, -50%) translateX(-8px);
  display: flex; align-items: center; gap: 14px;
  padding: 8px 22px 8px 8px; border-radius: 999px;
  background: rgba(250, 246, 243, .96); box-shadow: 0 10px 30px rgba(24, 51, 39, .22);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .3s, transform .45s var(--e-out);
}
.pin .tip img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pin .tip b { display: block; font: 600 25px/1.1 var(--f-display); color: var(--forest-900); }
.pin .tip small { display: block; font: 500 11px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--clay-600); margin-bottom: 3px; }
.pin.left .tip { transform-origin: 100% 50%; transform: scale(var(--s)) translate(calc(-100% - 30px), -50%) translateX(8px); }
.interactive .pin { cursor: pointer; }
.interactive .pin:hover .tip, .pin.hl .tip { opacity: 1; transform: scale(var(--s)) translate(30px, -50%); }
.interactive .pin.left:hover .tip, .pin.left.hl .tip { transform: scale(var(--s)) translate(calc(-100% - 30px), -50%); }
.interactive .pin:hover .p { --k: 1.22; }
.pin-hit { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; transform: scale(var(--s)); border-radius: 50%; }
/* pins próximos: na vista geral se afastam, com linha de chamada até o ponto real */
.pin.spread { transform: translate(calc(var(--ox) * var(--spread, 0) * var(--s) * 1px), calc(var(--oy) * var(--spread, 0) * var(--s) * 1px)); }
.pin .lead, .pin .anchor { display: none; position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity .5s; }
.pin.spread .lead, .pin.spread .anchor { display: block; }
.pin .lead {
  width: calc(var(--ol) * var(--spread, 0) * var(--s) * 1px); height: calc(1.6px * var(--s)); margin-top: calc(-.8px * var(--s));
  background: var(--forest-900); opacity: .55; transform-origin: 0 50%; transform: rotate(var(--oa));
}
.pin .anchor {
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--route); box-shadow: 0 0 0 1.5px var(--ivory);
  transform: translate(calc(var(--ox) * var(--spread, 0) * var(--s) * -1px), calc(var(--oy) * var(--spread, 0) * var(--s) * -1px)) scale(var(--s));
  opacity: calc(var(--spread, 0) * 2);
}
.pin.hidden .lead, .pin.hidden .anchor { opacity: 0; }

/* painéis do mapa */
.panel { position: absolute; left: 1140px; top: 0; bottom: 0; width: 660px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.panel.in { pointer-events: auto; }
#hub-panel .logo { height: 54px; width: auto; margin-bottom: 46px; align-self: flex-start; }
#hub-panel .title { margin-top: 18px; font-size: 80px; }
#hub-panel .lead { margin-top: 26px; font-size: 20px; }
.stops-head { margin-top: 40px; display: flex; align-items: center; gap: 18px; font: 500 13px var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.stops-head i { flex: 1; height: 1px; background: var(--hair); }
.stops { list-style: none; margin: 14px 0 0; padding: 0; columns: 2; column-gap: 34px; }
.stops li { break-inside: avoid; }
.stops button {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  padding: 7px 0; border-bottom: 1px solid rgba(39, 48, 42, .08);
  font: 400 18px/1.25 var(--f-ui); color: var(--ink);
  transition: color .25s, padding .35s var(--e-out);
}
.stops button b { font: 600 20px var(--f-display); color: var(--clay-600); min-width: 26px; }
.stops button small { margin-left: auto; font: italic 400 15px var(--f-display); color: var(--ink-3); }
.stops button:hover, .stops button.hl { color: var(--route); padding-left: 6px; }
.hub-foot { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.layers { display: flex; padding: 4px; border-radius: 999px; background: rgba(39, 48, 42, .07); }
.layers button { padding: 10px 15px; border-radius: 999px; font: 500 13px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: background .3s, color .3s; }
.layers button.on { background: var(--ivory); color: var(--forest-900); box-shadow: 0 2px 8px rgba(24, 51, 39, .12); }
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 26px 18px 30px; border-radius: 999px;
  background: var(--forest-900); color: var(--ivory);
  font: 500 14px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(24, 51, 39, .25);
  transition: background .3s, transform .4s var(--e-out);
}
.cta:hover { background: var(--green-600); transform: translateY(-2px); }

#final-panel .kicker { margin-bottom: 30px; }
#final-panel .quote { margin: 0; font: italic 400 56px/1.16 var(--f-display); color: var(--forest-900); text-indent: -.35em; }
#final-panel .after { margin: 34px 0 0; font: 500 26px var(--f-display); color: var(--clay-700); }
#final-panel .rule { height: 1px; background: var(--hair); margin: 54px 0 40px; }
#final-panel .logo { height: 64px; width: auto; align-self: flex-start; }
#final-panel .credits { margin-top: 28px; font: 400 17px/1.7 var(--f-ui); color: var(--ink-2); }
.final-actions { margin-top: 36px; display: flex; gap: 14px; }
.final-actions button { padding: 14px 24px; border-radius: 999px; border: 1px solid var(--forest-900); font: 500 14px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--forest-900); transition: background .3s, color .3s; }
.final-actions button:hover { background: var(--forest-900); color: var(--ivory); }
#final-panel .foot { margin-top: 40px; font: 400 13px/1.5 var(--f-ui); color: var(--ink-3); letter-spacing: .04em; }

#travel-caption {
  position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 20px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 46px 22px; border-radius: 4px;
  background: rgba(250, 246, 243, .9); backdrop-filter: blur(8px);
  box-shadow: 0 16px 50px rgba(24, 51, 39, .2);
  opacity: 0; transition: opacity .6s, transform .8s var(--e-out);
  pointer-events: none; text-align: center;
}
#travel-caption.on { opacity: 1; transform: translate(-50%, 0); }
#travel-caption .tc-k { font: 500 13px var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--clay-600); }
#travel-caption .tc-t { font: 600 40px/1.05 var(--f-display); color: var(--forest-900); }

#map-legend {
  position: absolute; left: 120px; bottom: 52px; display: flex; flex-direction: column; gap: 10px;
  font: 400 14px var(--f-ui); color: var(--ink-2);
  opacity: 0; transition: opacity 1s;
}
.mode-hub #map-legend { opacity: 1; transition-delay: 1.6s; }
#map-legend span { display: flex; align-items: center; gap: 12px; }
.lg-route { width: 30px; height: 4px; border-radius: 2px; background: var(--route); box-shadow: 0 0 0 2px #FBF6EC; }
.lg-pin { width: 14px; height: 14px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--route); margin: 0 8px; }

/* ==========================================================================
   LUGAR (segunda camada)
   ========================================================================== */
#sc-lugar {
  position: absolute; inset: 0; visibility: hidden;
  clip-path: circle(0px at 960px 540px);
  background: var(--paper);
}
#sc-lugar.open { visibility: visible; }
.lg-paper { position: absolute; inset: 0; background: url(../assets/img/ui/papel.jpg) center / cover; mix-blend-mode: multiply; }
.lg-atmo { position: absolute; inset: -120px; overflow: hidden; }
.lg-atmo img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(1.2); opacity: 0; transform: scale(1.2); transition: opacity 1.2s; }

.sheet { position: absolute; left: 150px; top: 80px; width: 860px; height: 860px; margin: 0; mix-blend-mode: multiply; }
/* camadas próprias (will-change) e o fundo desfocado só depois que o círculo abriu por completo:
   durante a máscara circular, camadas compostas à parte podiam piscar como um retângulo claro */
#sc-lugar.revealed .lg-atmo, #sc-lugar.revealed .sheet { will-change: transform, translate; }
#sc-lugar.revealed .lg-atmo img { opacity: .32; }
.sheet-imgs { position: absolute; inset: 0; cursor: zoom-in; }
.sheet-imgs img {
  position: absolute; left: 50%; top: 50%;
  max-width: 100%; max-height: 100%;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 1.1s var(--e-io);
}
.sheet-imgs img.on { opacity: 1; }
.sheet-imgs img.seq { transition-duration: 1.6s; }
.sheet-imgs .kb { position: absolute; inset: 0; animation: kb 26s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.045) translate(-6px, 4px); } }
.sheet { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--e-out) .15s; }
#sc-lugar.in .sheet { clip-path: inset(-60px -60px -90px -60px); }
.crop { position: absolute; width: 26px; height: 26px; border: 0 solid var(--ink); opacity: .55; }
.crop.tl { left: -22px; top: -22px; border-left-width: 1px; border-top-width: 1px; }
.crop.tr { right: -22px; top: -22px; border-right-width: 1px; border-top-width: 1px; }
.crop.bl { left: -22px; bottom: -22px; border-left-width: 1px; border-bottom-width: 1px; }
.crop.br { right: -22px; bottom: -22px; border-right-width: 1px; border-bottom-width: 1px; }
.sheet figcaption {
  position: absolute; left: 0; right: 0; top: calc(100% + 22px);
  display: flex; align-items: center; gap: 22px;
  font: italic 400 21px var(--f-display); color: var(--ink-2);
}
.sheet .fig b { font-style: normal; font-weight: 600; color: var(--clay-600); margin-right: 8px; }
.sheet .seq { display: none; align-items: center; gap: 14px; margin-left: auto; font: 500 12px var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--clay-600); font-style: normal; }
.sheet.has-seq .seq { display: flex; }
.seq-steps { display: flex; gap: 6px; }
.seq-steps i { width: 30px; height: 3px; border-radius: 2px; background: var(--hair); transition: background .6s; cursor: pointer; }
.seq-steps i.on { background: var(--clay-600); }
.sheet .frames { margin-left: auto; display: flex; gap: 8px; }
.sheet.has-seq .frames { margin-left: 0; }
.frames i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: background .4s, border-color .4s; cursor: pointer; }
.frames i.on { background: var(--forest-900); border-color: var(--forest-900); }

.info { position: absolute; left: 1140px; top: 92px; width: 640px; height: 900px; display: flex; flex-direction: column; }
.info .num { display: flex; align-items: baseline; gap: 10px; }
.info .num b { font: 500 120px/.8 var(--f-display); color: var(--clay-600); letter-spacing: -.02em; }
.info .num span { font: 500 20px var(--f-ui); color: var(--ink-3); letter-spacing: .1em; }
.info .kicker { margin-top: 30px; }
.info .title { margin-top: 14px; font-size: 74px; }
.info .title.long { font-size: 62px; }
.info .sub { margin: 16px 0 0; font: italic 400 29px/1.25 var(--f-display); color: var(--ink-2); }
.info .rule { height: 1px; width: 100%; margin: 30px 0 26px; background: var(--hair); transform-origin: 0 50%; }
.info .body { margin: 0; font: 400 20.5px/1.62 var(--f-ui); color: #33403A; }
.notes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.notes li { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(39, 48, 42, .1); font: 400 17px/1.35 var(--f-ui); color: var(--ink); }
.notes li em { font: italic 500 20px var(--f-display); color: var(--clay-600); width: 14px; }
.info-foot { margin-top: auto; display: flex; gap: 26px; align-items: flex-end; }
.minimap { position: relative; width: 132px; flex: none; border-radius: 3px; transition: transform .4s var(--e-out); }
.minimap:hover { transform: translateY(-3px); }
.minimap img { width: 100%; height: auto; mix-blend-mode: multiply; }
.minimap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.minimap .mm-route { fill: none; stroke: var(--route); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.minimap .mm-pin { fill: var(--ivory); stroke: var(--route); stroke-width: 6; }
.minimap .mm-pin.v { fill: var(--route); }
.minimap .mm-cur { fill: var(--forest-900); stroke: var(--ivory); stroke-width: 7; }
.minimap .mm-pulse { fill: none; stroke: var(--forest-900); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: mmp 1.8s ease-out infinite; }
@keyframes mmp { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }
.navs { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.nav { display: flex; align-items: center; gap: 14px; padding: 12px 0; text-align: left; color: var(--forest-900); transition: color .3s; min-width: 0; }
.nav.next { justify-content: flex-end; text-align: right; }
.nav span { min-width: 0; }
.nav small { display: block; font: 500 11px var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.nav em { display: block; font: 600 22px/1.15 var(--f-display); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav svg { flex: none; transition: transform .4s var(--e-out); }
.nav:hover { color: var(--route); }
.nav.prev:hover svg { transform: translateX(-4px); }
.nav.next:hover svg { transform: translateX(4px); }
.nav[disabled] { visibility: hidden; }
.progress { grid-column: 1 / -1; display: flex; gap: 5px; }
.progress i { flex: 1; height: 3px; border-radius: 2px; background: rgba(39, 48, 42, .13); cursor: pointer; position: relative; transition: background .5s; }
.progress i.v { background: rgba(194, 65, 43, .45); }
.progress i.on { background: var(--route); }
.progress i::after { content: ''; position: absolute; inset: -8px 0; }

#sc-lugar .info [data-a] { --d0: 450ms; }

/* lightbox */
#lightbox {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(242, 235, 223, .97);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s;
  cursor: zoom-out;
}
#lightbox.on { opacity: 1; visibility: visible; transition: opacity .5s; }
#lightbox img { max-width: 1800px; max-height: 1010px; mix-blend-mode: multiply; transform: scale(.97); transition: transform .8s var(--e-out); }
#lightbox.on img { transform: none; }
#lightbox small { position: absolute; bottom: 22px; font: 400 13px var(--f-ui); color: var(--ink-3); letter-spacing: .1em; }

/* ==========================================================================
   INTERFACE
   ========================================================================== */
#ui { position: absolute; right: 36px; top: 30px; display: flex; gap: 10px; z-index: 40; }
#ui button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(250, 246, 243, .75); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(39, 48, 42, .12);
  color: var(--forest-900); transition: background .3s, opacity .5s;
}
#ui button:hover { background: var(--ivory); }
#ui svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#btn-map { opacity: 0; pointer-events: none; }
.show-map-btn #btn-map { opacity: 1; pointer-events: auto; }
body.idle #ui, body.idle #hint { opacity: 0; }
#ui, #hint { transition: opacity .8s; }

/* explorar e desenhar */
#ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#ink { filter: drop-shadow(0 0 1.2px rgba(24, 51, 39, .45)); }
#btn-draw { opacity: 0; pointer-events: none; }
.mode-hub #btn-draw, .mode-lugar #btn-draw, .mode-travel #btn-draw, .mode-final #btn-draw, .mode-intro #btn-draw, .mode-explore #btn-draw { opacity: 1; pointer-events: auto; }
.mode-explore #btn-draw { background: var(--forest-900); color: var(--ivory); }
.mode-explore #hint, .mode-explore #travel-caption { opacity: 0 !important; }
.mode-explore #map-view { cursor: grab; touch-action: none; }
.mode-explore.panning #map-view, .mode-explore.panning #map-view * { cursor: grabbing !important; }
.mode-explore.tool-pen #map-view { cursor: crosshair; }
.mode-explore.tool-erase #map-view { cursor: cell; }
.mode-explore.tool-pen .pin, .mode-explore.tool-pen .pin *, .mode-explore.tool-erase .pin, .mode-explore.tool-erase .pin * { pointer-events: none; }

#explore-bar {
  position: absolute; left: 50%; bottom: 26px; z-index: 40;
  display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 22px;
  border-radius: 999px; background: rgba(250, 246, 243, .9); backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(24, 51, 39, .22), 0 0 0 1px rgba(39, 48, 42, .1);
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  transition: opacity .45s var(--e-out), transform .6s var(--e-out);
}
.mode-explore #explore-bar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#explore-bar .ex-k { font: 500 12px var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--clay-600); margin-right: 8px; white-space: nowrap; }
#explore-bar .sep { width: 1px; height: 26px; background: var(--hair); margin: 0 6px; }
#explore-bar button { height: 44px; min-width: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--forest-900); transition: background .25s, color .25s, transform .3s var(--e-out); }
#explore-bar button:hover { background: rgba(39, 48, 42, .08); }
#explore-bar button.on { background: var(--forest-900); color: var(--ivory); }
#explore-bar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#explore-bar .sw { min-width: 34px; width: 34px; height: 34px; margin: 0 1px; }
#explore-bar .sw::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); transition: transform .3s var(--e-out); }
#explore-bar .sw:hover { background: none; }
#explore-bar .sw:hover::before { transform: scale(1.12); }
#explore-bar .sw.on { background: none; box-shadow: 0 0 0 2px var(--c), 0 0 0 4px rgba(39, 48, 42, .25); }
#explore-bar .sw.on::before { transform: scale(.82); }
#explore-bar .txt { display: flex; gap: 9px; padding: 0 16px 0 13px; font: 500 13px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
#explore-bar .txt span { min-width: 86px; text-align: left; }
#explore-bar .exit { background: var(--forest-900); color: var(--ivory); padding: 0 16px 0 20px; }
#explore-bar .exit span { min-width: 0; }
#explore-bar .exit:hover { background: var(--green-600); }

#hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40;
  font: 400 13px var(--f-ui); color: var(--ink-3); letter-spacing: .06em;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
#hint kbd { font: 500 12px var(--f-ui); padding: 3px 7px; border-radius: 4px; border: 1px solid rgba(39, 48, 42, .2); color: var(--ink-2); }
#hint span { opacity: .5; }
.mode-capa #hint { color: rgba(250, 246, 243, .85); }
.mode-capa #hint kbd { color: rgba(250, 246, 243, .9); border-color: rgba(250, 246, 243, .4); }

#loader { position: absolute; inset: 0; z-index: 50; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; transition: opacity 1s, visibility 0s 1s; }
#loader img { height: 84px; width: auto; }
#loader i { width: 260px; height: 1px; background: var(--hair); }
#loader b { display: block; height: 100%; width: 0; background: var(--forest-900); transition: width .3s; }
#loader.done { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}

/* o atalho "font:" reinicia os algarismos — garante algarismos alinhados nos números */
.info .num b, .stops button b, .numbers b, .sheet .fig b, #final-panel .after, .pin .p, #travel-caption .tc-k, .epi-src, #micro-svg text, .ln-items .tx strong, .ln-head .title { font-variant-numeric: lining-nums; }