/* base · Dr. Marcos Paulo Vanzin — sistema em 02-conceito/sistema.md */
:root {
  /* noite (do hero) */
  --noite-0: #121411;
  --noite-1: #1a1d18;
  --noite-2: #23271f;
  --mel: #c99a62;
  --mel-claro: #e7c493;
  --mel-fundo: #8a6641;
  --malva: #81726f;
  --porcelana: #efe7dc;
  --texto: #efe6d8;
  --texto-2: #c8bead;
  --texto-3: #978d7e;
  --linha: rgb(231 196 147 / .22);

  /* porcelana (seções claras) */
  --porc-0: #f3ede4;
  --porc-1: #e9e0d3;
  --porc-2: #dccfbd;
  --tinta: #1a1d18;
  --tinta-2: #47443b;
  --tinta-3: #625b50;
  --mel-tinta: #765430;
  --linha-clara: rgb(26 29 24 / .14);

  /* tipografia */
  --f-titulo: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --f-texto: "Funnel Sans", system-ui, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, monospace;
  --t-titulo: clamp(2.55rem, 1.2rem + 3.9vw, 5.6rem);
  --t-hero: var(--t-titulo);
  --t-h2: clamp(2.2rem, 1.2rem + 3.2vw, 4.6rem);
  --t-h3: clamp(1.35rem, 1.1rem + .9vw, 1.9rem);
  --t-num: clamp(3.2rem, 1.4rem + 4.2vw, 7.2rem);
  --t-corpo: clamp(1.08rem, 1rem + .3vw, 1.2rem);
  --t-apoio: clamp(1rem, .93rem + .3vw, 1.18rem);
  --t-rot: .875rem;
  --t-mini: .78rem;

  /* espaço e movimento */
  --pad: clamp(1.25rem, 5.2vw, 6.5rem);
  --sec: clamp(5rem, 12vh, 10rem);
  --nav-h: clamp(4.5rem, 9svh, 6.5rem);
  --larg: 1440px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--noite-0); scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--noite-0);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* granulado único, fixo */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--mel-claro); outline-offset: 4px; }
.wf-clara :focus-visible { outline-color: var(--mel-tinta); }
.wf-so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- seções ---------- */
.wf-sec {
  position: relative;
  padding: var(--sec) var(--pad);
  overflow: clip;
  isolation: isolate;
}
.wf-noite { background: var(--noite-0); color: var(--texto); }
.wf-clara { background: var(--porc-0); color: var(--tinta); }
.wf-dentro { max-width: var(--larg); margin: 0 auto; position: relative; z-index: 1; }

/* malha da seção (cada seção põe as suas manchas com .wf-mancha + posição) */
.wf-malha { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.wf-mancha { position: absolute; border-radius: 50%; animation: wf-respira 34s ease-in-out infinite alternate; }
@keyframes wf-respira {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2vw, -1.5vh, 0) scale(1.05); }
  100% { transform: translate3d(-1.5vw, 2vh, 0) scale(.97); }
}

/* rótulo de seção: "01 — A consulta" em mono */
.wf-rot {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.6rem;
  font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mel-claro);
}
.wf-rot::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.wf-clara .wf-rot { color: var(--mel-tinta); }

.wf-h2 {
  margin: 0;
  font-family: var(--f-titulo); font-weight: 500;
  font-size: var(--t-h2); line-height: 1; letter-spacing: -.028em;
  text-wrap: balance;
}
.wf-h2 em { font-style: normal; font-weight: 300; color: var(--mel-claro); }
.wf-clara .wf-h2 em { color: var(--mel-tinta); }
.wf-h3 { margin: 0; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.015em; }
.wf-corpo { max-width: 62ch; color: var(--texto-2); text-wrap: pretty; }
.wf-clara .wf-corpo { color: var(--tinta-2); }
.wf-corpo p { margin: 0 0 1em; }

/* leitura grande em mono (graus, números) */
.wf-num {
  font-family: var(--f-mono); font-weight: 300;
  font-size: var(--t-num); line-height: .9; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  color: var(--mel-claro);
}
.wf-clara .wf-num { color: var(--mel-tinta); }
/* legenda técnica "fig." */
.wf-fig {
  font-family: var(--f-mono); font-size: var(--t-rot); line-height: 1.45; letter-spacing: .02em;
  color: var(--texto-3);
}
.wf-clara .wf-fig { color: var(--tinta-3); }

/* citação de paciente */
.wf-fala { margin: 0; }
.wf-fala p { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); line-height: 1.3; letter-spacing: -.012em; text-wrap: pretty; }
.wf-fala cite { display: block; margin-top: .8rem; font-style: normal; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .04em; color: var(--texto-3); }
.wf-clara .wf-fala cite { color: var(--tinta-3); }

/* botões (o mesmo do hero) */
.wf-botao {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 52px;
  padding: 1rem 1.45rem 1rem 1.6rem;
  border-radius: 3px;
  background: linear-gradient(180deg in oklab, #efd3a8, var(--mel-claro) 45%, #d8ae78);
  color: #1a1d18;
  font-family: var(--f-texto); font-weight: 650; font-size: 1.02rem; letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgb(201 154 98 / .6), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wf-botao svg { width: 1rem; height: 1rem; flex: none; }
.wf-botao:hover { transform: translateY(-2px); }
.wf-clara .wf-botao { background: var(--tinta); color: var(--porc-0); box-shadow: 0 10px 30px -14px rgb(26 29 24 / .5); }
.wf-link {
  display: inline-flex; align-items: center; min-height: 48px; gap: .5rem;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
}
.wf-link:hover { text-decoration-color: currentColor; }

/* entrada por rolagem: um gesto por elemento */
.js [data-rev] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--atraso, 0ms); }
.js [data-rev].wf-visto { opacity: 1; transform: none; }

/* barra fixa (aparece depois do hero) */
.wf-barra {
  position: fixed; z-index: 40; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--pad);
  background: color-mix(in oklab, var(--noite-0) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
  transform: translateY(-110%); transition: transform .5s var(--ease);
}
.wf-barra.wf-aberta { transform: none; }
.wf-barra-nome { font-family: var(--f-titulo); font-weight: 600; font-size: 1rem; text-decoration: none; display: grid; line-height: 1.2; }
.wf-barra-nome small { font-family: var(--f-mono); font-weight: 400; font-size: .72rem; letter-spacing: .04em; color: var(--texto-3); }
.wf-barra nav { display: flex; gap: 1.6rem; font-size: .95rem; }
.wf-barra nav a { text-decoration: none; color: var(--texto-2); min-height: 44px; display: inline-flex; align-items: center; }
.wf-barra nav a:hover, .wf-barra nav a[aria-current="true"] { color: var(--mel-claro); }
.wf-barra .wf-botao { min-height: 44px; padding: .65rem 1.1rem; font-size: .95rem; }
@media (max-width: 980px) {
  .wf-barra nav { display: none; }
}
/* no celular a ação vai para baixo, sempre ao alcance do polegar */
@media (max-width: 700px) {
  .wf-barra { inset: auto 0 0 0; border-bottom: 0; border-top: 1px solid var(--linha); transform: translateY(110%); padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); }
  .wf-barra-nome { display: none; }
  .wf-barra .wf-botao { flex: 1; justify-content: center; min-height: 50px; }
  .wf-barra .wf-barra-tel { display: inline-flex; }
}
.wf-barra-tel { display: none; align-items: center; justify-content: center; min-width: 50px; min-height: 50px; border: 1px solid var(--linha); border-radius: 3px; color: var(--mel-claro); }
.wf-barra-tel svg { width: 20px; height: 20px; }

/* ==== hero ==== */
/* hero · Grau por grau (aprovado, sem ajustes) */
/* ---------- hero ---------- */
.b-hero {
  --rw: min(40vw, calc(min(94svh, 1040px) * .6667));
  --tw: min(35vw, 640px);
  position: relative;
  min-height: max(100svh, 640px);
  overflow: clip;
  isolation: isolate;
  background: linear-gradient(180deg in oklab, var(--noite-1), var(--noite-0) 70%);
}

/* malha de luz */
.b-fundo { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.b-mancha {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: b-respira 32s ease-in-out infinite alternate;
}
.b-m1 { /* mel atrás do retrato */
  width: 78vmax; height: 78vmax; right: -24vmax; top: -30vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(201 154 98 / .42), rgb(138 102 65 / .2) 52%, transparent);
  animation-duration: 28s;
}
.b-m2 { /* mel claro, luz sobre a cena */
  width: 62vmax; height: 62vmax; left: 16vw; top: 6vh;
  background: radial-gradient(circle closest-side in oklab, rgb(231 196 147 / .17), rgb(201 154 98 / .07) 55%, transparent);
  animation-duration: 36s; animation-delay: -9s;
}
.b-m3 { /* sopro do malva do estúdio */
  width: 70vmax; height: 70vmax; left: -28vmax; bottom: -38vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(129 114 111 / .34), rgb(129 114 111 / .1) 55%, transparent);
  animation-duration: 40s; animation-delay: -16s;
}
.b-m4 { /* musgo profundo no alto à esquerda */
  width: 60vmax; height: 60vmax; left: -18vmax; top: -30vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(52 60 44 / .7), transparent);
  animation-duration: 34s; animation-delay: -4s;
}
.b-m5 { /* âmbar baixo, chão da cena */
  width: 50vmax; height: 34vmax; left: 30vw; bottom: -18vmax;
  background: radial-gradient(closest-side in oklab, rgb(201 154 98 / .16), transparent);
  animation-duration: 30s; animation-delay: -20s;
}
@keyframes b-respira {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5vw, -1.5vh, 0) scale(1.06); }
  100% { transform: translate3d(-1.5vw, 2vh, 0) scale(.97); }
}

/* navegação */
.b-nav {
  position: absolute; inset: 0 0 auto 0; z-index: 6;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--pad);
}
.b-marca { display: grid; gap: .15rem; text-decoration: none; }
.b-marca-nome { font-family: var(--f-titulo); font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em; }
.b-marca-linha, .b-nav-local {
  font-family: var(--f-mono); font-size: var(--t-mini); letter-spacing: .04em;
  color: var(--texto-3);
}
.b-nav-local { margin: 0; text-align: right; line-height: 1.5; color: var(--texto-2); }
.b-nav-local span { color: var(--texto-3); }

/* retrato */
.b-retrato {
  position: absolute; z-index: 2; margin: 0;
  right: 2vw; bottom: 0;
  width: var(--rw);
  aspect-ratio: 2 / 3;
}
.b-retrato img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  filter: drop-shadow(-1px 0 0 rgb(231 196 147 / .35)) drop-shadow(-14px -6px 30px rgb(201 154 98 / .22));
}
.b-halo {
  position: absolute; z-index: 0;
  left: 2%; top: -10%;
  width: 100%; aspect-ratio: 1;
  background: radial-gradient(circle closest-side in oklab, rgb(240 206 156 / .5), rgb(201 154 98 / .26) 42%, rgb(138 102 65 / .08) 72%, transparent);
  animation: b-halo 18s ease-in-out infinite alternate;
}
@keyframes b-halo { from { opacity: .82; transform: scale(.98); } to { opacity: 1; transform: scale(1.04); } }

/* texto */
.b-texto {
  position: absolute; z-index: 4;
  left: var(--pad);
  top: var(--nav-h); bottom: 4svh;
  width: var(--tw);
  display: flex; flex-direction: column; justify-content: center;
}
.b-olho {
  margin: 0 0 1.4rem;
  font-family: var(--f-mono); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase;
  color: var(--mel-claro);
}
.b-olho i { font-style: normal; color: var(--texto-3); padding: 0 .3em; }
.b-titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 500;
  font-size: var(--t-titulo);
  line-height: .98;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.b-linha { display: block; }
.b-titulo em {
  font-style: normal; font-weight: 300;
  color: var(--mel-claro);
}
.b-apoio {
  margin: 1.6rem 0 0;
  max-width: 34rem;
  font-size: var(--t-apoio);
  line-height: 1.55;
  color: var(--texto-2);
  text-wrap: pretty;
}
.b-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }
.b-botao {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.02rem 1.45rem 1.02rem 1.6rem;
  border-radius: 3px;
  background: linear-gradient(180deg in oklab, #efd3a8, var(--mel-claro) 45%, #d8ae78);
  color: #1a1d18;
  font-family: var(--f-texto); font-weight: 650; font-size: 1.02rem; letter-spacing: .005em;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgb(201 154 98 / .6), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.b-botao svg { width: 1rem; height: 1rem; }
.b-botao:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgb(201 154 98 / .75), inset 0 1px 0 rgb(255 255 255 / .45); }
.b-botao:focus-visible, .b-fone:focus-visible, .b-marca:focus-visible { outline: 2px solid var(--mel-claro); outline-offset: 4px; }
.b-fone {
  display: grid; gap: .1rem;
  padding-left: 1.4rem; border-left: 1px solid var(--linha);
  text-decoration: none;
}
.b-fone-num { font-family: var(--f-mono); font-size: 1.02rem; font-variant-numeric: tabular-nums; color: var(--texto); }
.b-fone-rot { font-size: .8rem; color: var(--texto-3); }
.b-fone:hover .b-fone-num { color: var(--mel-claro); }

.b-prova {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.4rem 0 0; padding-top: 1.3rem;
  border-top: 1px solid var(--linha);
  max-width: 30rem;
  font-size: .95rem; line-height: 1.4; color: var(--texto-2);
}
.b-prova strong {
  font-family: var(--f-mono); font-weight: 300; font-size: 2.6rem; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.04em;
  color: var(--mel-claro);
}
.b-prova em { font-style: normal; color: var(--texto-3); }
.b-registro {
  margin: 1.1rem 0 0;
  font-family: var(--f-mono); font-size: var(--t-mini); letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}
.b-registro i { font-style: normal; opacity: .6; padding: 0 .2em; }
.b-registro span { white-space: nowrap; }

/* cena 3D */
.b-cena {
  position: absolute; z-index: 1; margin: 0;
  left: calc(var(--pad) + var(--tw) - 1.5vw);
  right: calc(2vw + var(--rw) * .84);
  top: calc(var(--nav-h) * .5); bottom: 0;
}
.b-palco { position: absolute; inset: 0; }
.b-palco canvas {
  display: block; width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.b-palco.pronto canvas { opacity: 1; }
.b-reserva {
  display: none;
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.sem-webgl .b-reserva, .no-js .b-reserva { display: block; }
.b-leitura {
  position: absolute; z-index: 3;
  left: 0; bottom: calc(3% + 3.4rem);
  display: grid; gap: .2rem;
  pointer-events: none;
  opacity: 0; transition: opacity 1s var(--ease) .4s;
}
.b-palco.pronto ~ .b-leitura, .sem-webgl .b-leitura, .no-js .b-leitura { opacity: 1; }
.b-leitura-rot {
  font-family: var(--f-mono); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3);
}
.b-grau {
  display: block;
  min-width: 4ch;
  font-family: var(--f-mono); font-weight: 300;
  font-size: clamp(3.2rem, 1.4rem + 4.2vw, 7.2rem);
  line-height: .9; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
  color: var(--mel-claro);
  text-shadow: 0 0 40px rgb(201 154 98 / .35);
}
.b-legenda {
  position: absolute; left: 0; bottom: 3.2%;
  max-width: min(36ch, 100%); margin: 0;
  font-family: var(--f-mono); font-size: .7rem; line-height: 1.45; letter-spacing: .02em;
  color: var(--texto-3);
}

/* entrada: conteúdo primeiro, cena depois */
.js .b-entra { opacity: 0; animation: b-entra 1s var(--ease) forwards; animation-delay: calc(var(--i) * 95ms + 80ms); }
@keyframes b-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .b-retrato { animation: b-retrato 1.6s var(--ease) both .15s; }
@keyframes b-retrato { from { opacity: 0; transform: translateY(2.5%); } to { opacity: 1; transform: none; } }

/* notebook estreito: texto e cena mais compactos */
@media (min-width: 981px) and (max-width: 1240px) {
  .b-hero { --tw: 38vw; --rw: min(37vw, calc(94svh * .6667)); }
  .b-nav-local span { display: none; }
  .b-olho-2 { display: none; }
  .b-titulo { font-size: clamp(2.5rem, 4.4vw, 3.6rem); }
  .b-apoio { font-size: 1rem; }
  .b-prova { margin-top: 1.8rem; }
}
@media (min-width: 981px) and (max-height: 760px) {
  .b-olho { margin-bottom: 1rem; }
  .b-apoio { margin-top: 1.1rem; }
  .b-acoes { margin-top: 1.4rem; }
  .b-prova { margin-top: 1.5rem; padding-top: 1rem; }
  .b-prova strong { font-size: 2.1rem; }
}

/* celular e tablet: retrato em cima, texto, cena abaixo */
@media (max-width: 980px) {
  .b-hero { min-height: 0; display: flex; flex-direction: column; padding-bottom: 2.5rem; }
  .b-nav { position: relative; height: auto; padding-top: 1.1rem; padding-bottom: .4rem; align-items: flex-start; }
  .b-nav-local { display: none; }
  .b-retrato {
    position: relative; right: auto; bottom: auto;
    width: min(86vw, 450px);
    aspect-ratio: auto;
    height: calc(min(86vw, 450px) * 1.12);
    margin: .4rem auto 0;
    overflow: clip;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 94%);
  }
  .b-halo { left: -4%; top: -8%; width: 108%; }
  .b-texto {
    position: relative; left: auto; top: auto; bottom: auto;
    width: auto; margin-top: -7vw;
    padding: 0 var(--pad);
  }
  .b-olho { margin-bottom: 1rem; font-size: .7rem; letter-spacing: .1em; }
  .b-olho-2 { display: none; }
  .b-titulo { font-size: clamp(2.45rem, 9.6vw, 4.4rem); }
  .b-apoio { margin-top: 1.2rem; }
  .b-acoes { margin-top: 1.6rem; gap: 1rem 1.3rem; }
  .b-cena {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    height: calc(min(112vw, 600px) + 5.4rem);
    margin: 1.4rem var(--pad) 0;
    order: 5;
  }
  .b-leitura { top: 0; bottom: auto; }
  .b-palco { top: 5.4rem; }
  .b-legenda { bottom: 0; }
  .b-prova { margin-top: 2rem; }
}
@media (min-width: 700px) and (max-width: 980px) {
  .b-texto { margin-top: -5rem; max-width: 46rem; }
  .b-cena { height: min(80vw, 640px); }
}
@media (max-width: 380px) {
  .b-botao { padding: .95rem 1.2rem; }
  .b-fone { padding-left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .b-entra, .js .b-retrato { animation: none; opacity: 1; transform: none; }
  .b-mancha, .b-halo { animation: none; }
  .b-palco canvas, .b-leitura { transition: none; }
}

/* ==== consulta ==== */
/* 1 · consulta — clara (porcelana) — prefixo cs- */
.cs { padding-bottom: clamp(4rem, 10vh, 8rem); }

/* malha clara: mel e malva diluídos */
.cs-m1 { width: 62vw; height: 62vw; left: -18vw; top: 4%;
  background: radial-gradient(circle closest-side in oklab, rgb(231 196 147 / .34), transparent); }
.cs-m2 { width: 48vw; height: 48vw; right: -12vw; top: 40%; animation-duration: 38s; animation-delay: -9s;
  background: radial-gradient(circle closest-side in oklab, rgb(129 114 111 / .14), transparent); }
.cs-m3 { width: 54vw; height: 54vw; left: 8vw; top: 62%; animation-duration: 30s; animation-delay: -17s;
  background: radial-gradient(circle closest-side in oklab, rgb(231 196 147 / .28), transparent); }

/* ---------- topo: título gigante + retrato sangrando ---------- */
.cs-topo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  align-items: center;
  gap: 0 clamp(1rem, 2vw, 2rem);
}
.cs-topo-texto { position: relative; z-index: 2; padding-bottom: clamp(3rem, 12vh, 9rem); }
.cs-titulo { font-size: clamp(2.8rem, 1rem + 6.2vw, 7.8rem); line-height: .94; letter-spacing: -.04em; }
.cs-titulo span { display: block; }
.cs-titulo em { display: block; }
.cs-apoio { margin-top: clamp(1.8rem, 4vh, 2.8rem); max-width: 36ch; font-size: var(--t-apoio); }
.cs-apoio p:last-child { margin-bottom: 0; }
.cs-indice { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin-top: 1.6rem; }
.cs-indice a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .3s, color .3s;
}
.cs-indice a span { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid var(--mel-tinta); border-radius: 50%; color: var(--mel-tinta); letter-spacing: 0; font-size: var(--t-rot); }
.cs-indice a:hover { color: var(--mel-tinta); border-bottom-color: currentColor; }

.cs-foto {
  position: relative; z-index: 1;
  margin: calc(var(--sec) * -.7) min(calc(var(--pad) * -1), calc((var(--larg) - 100vw) / 2)) -9vw 0;
}
.cs-foto img { display: block; width: 100%; height: auto; }
.cs-foto figcaption { position: absolute; right: calc(var(--pad) + 1rem); top: 38%; writing-mode: vertical-rl; }

/* ---------- os três tempos ---------- */
.cs-passos {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 clamp(2rem, 5vw, 6rem);
}
.cs-palco {
  position: sticky; top: 0;
  height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  padding-block: calc(var(--nav-h) + 1.5rem) 2.5rem;
}
.cs-leitura { display: grid; gap: .9rem; }
.cs-trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 15rem; }
.cs-trilho i { height: 2px; background: var(--linha-clara); transition: background .5s var(--ease); }
.cs-trilho i.cs-cheio { background: var(--mel-tinta); }
.cs-grau {
  font-family: var(--f-mono); font-weight: 300; font-size: 84px; letter-spacing: -.07em;
  font-variant-numeric: tabular-nums; fill: var(--mel-tinta);
}
.cs-leitura-rot { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.cs-leitura-rot b { font-weight: 500; color: var(--tinta); }
.cs-leitura-rot i { font-style: normal; opacity: .6; }
.cs-arco { width: 100%; height: 100%; min-height: 0; max-height: 60svh; overflow: visible; margin-top: 1.4rem; align-self: center; }
.cs-guia { fill: none; stroke: var(--tinta); stroke-width: 1; opacity: .22; }
.cs-escala line { stroke: var(--tinta); stroke-width: 1; opacity: .3; }
.cs-escala line.cs-tq-10 { opacity: .55; }
.cs-traco { fill: none; stroke: var(--mel-tinta); stroke-width: 3; stroke-linecap: round; }
.cs-paradas circle { fill: var(--porc-0); stroke: var(--tinta-3); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.cs-paradas text { font-family: var(--f-mono); font-size: 21px; letter-spacing: .12em; text-transform: uppercase; fill: var(--tinta-3); transition: fill .4s; }
.cs-paradas .cs-ativo circle { fill: var(--mel-tinta); stroke: var(--mel-tinta); }
.cs-paradas .cs-ativo text { fill: var(--mel-tinta); }
.cs-braco-fixo { stroke: var(--tinta); stroke-width: 1.5; opacity: .6; }
.cs-braco line { stroke: var(--mel-tinta); stroke-width: 3; stroke-linecap: round; }
.cs-braco circle { fill: var(--porc-0); stroke: var(--mel-tinta); stroke-width: 2.5; }
.cs-eixo { fill: var(--porc-0); stroke: var(--tinta); stroke-width: 1.5; }
.cs-eixo-2 { fill: var(--tinta); }
.cs-palco-fig { margin-top: 1.2rem; }

.cs-lista { list-style: none; margin: 0; padding: 0; }
.cs-passo {
  min-height: 96svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  transition: opacity .6s var(--ease);
}
.cs-passo-n { margin: 0 0 1.2rem; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--mel-tinta); font-variant-numeric: tabular-nums; }
.cs-passo-n i { font-style: normal; opacity: .6; }
.cs-verbo {
  margin: 0 0 0 -.05em;
  font-family: var(--f-titulo); font-weight: 500;
  font-size: clamp(3.6rem, 1.4rem + 7vw, 9.6rem); line-height: .9; letter-spacing: -.045em;
}
.cs-verbo span { color: var(--mel-tinta); }
.cs-passo-texto { margin-top: clamp(1.4rem, 3vh, 2.2rem); max-width: 42ch; }
.cs-passo-texto p:last-child { margin: 0; }
.cs-fala { margin-top: clamp(2rem, 4.5vh, 3rem); max-width: 30ch; }
.cs-fala p { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.2rem); text-indent: -.42em; }
.cs-fala cite { display: flex; align-items: center; gap: .8rem; }
.cs-fala cite::before { content: ""; width: 2.4rem; height: 1px; background: var(--mel-tinta); }
.cs-fala-2 { margin-top: 1.8rem; padding-left: 1.2rem; border-left: 1px solid var(--linha-clara); max-width: 40ch; }
.cs-fala-2 p { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); color: var(--tinta-2); text-indent: 0; }
.cs-fala-2 cite::before { display: none; }

/* um tempo de cada vez: os outros ficam em segundo plano (só com o arco preso na tela) */
@media (min-width: 981px) {
  .js .cs-lista.cs-vivo .cs-passo { opacity: .3; }
  .js .cs-lista.cs-vivo .cs-passo.cs-agora { opacity: 1; }
}

/* mini-arco (celular): gerado pelo JS no topo de cada tempo */
.cs-mini { display: none; }
.cs-mini-tq { stroke: var(--tinta); stroke-width: 6; opacity: .35; }
.cs-mini-setor { fill: rgb(201 154 98 / .3); opacity: 0; transition: opacity .9s var(--ease) .3s; }
.cs-mini-fixo { stroke: var(--tinta); stroke-width: 8; opacity: .5; }
.cs-mini-braco { stroke: var(--mel-tinta); stroke-width: 12; stroke-linecap: round;
  transform-box: view-box; transform-origin: 200px 160px; transform: rotate(0deg);
  transition: transform 1.3s var(--ease) .15s; }
.cs-mini-eixo { fill: var(--porc-0); stroke: var(--tinta); stroke-width: 6; }
.cs-mini-ok .cs-mini-braco { transform: rotate(var(--g)); }
.cs-mini-ok .cs-mini-setor { opacity: 1; }

/* ---------- fecho: faixa elevada com a foto do consultório ---------- */
.cs-leve {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 0 clamp(2rem, 5vw, 6rem);
  margin-top: clamp(2rem, 6vh, 5rem);
}
.cs-leve::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 min(calc(var(--pad) * -1), calc((var(--larg) - 100vw) / 2));
  background: var(--porc-1);
  border-block: 1px solid var(--linha-clara);
}
.cs-sala { position: relative; margin: 0 0 0 min(calc(var(--pad) * -1), calc((var(--larg) - 100vw) / 2)); min-height: 100%; }
.cs-sala::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(180deg in oklab, transparent, rgb(26 29 24 / .72)); }
.cs-sala img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
.cs .cs-sala figcaption { position: absolute; z-index: 1; left: max(var(--pad), calc((100vw - var(--larg)) / 2)); right: 1rem; bottom: 1rem; color: var(--porc-0); }
.cs-leve-texto { padding-block: clamp(3rem, 8vh, 6rem); }
.cs-leve-tit { margin: 0; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.cs-leve-tit em { font-style: normal; font-weight: 300; color: var(--mel-tinta); }
.cs-dicas { list-style: none; margin: clamp(2rem, 4vh, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); color: var(--tinta-2); }
.cs-dicas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.cs-dicas p { margin: 0; }
.cs-dicas b { display: block; margin-bottom: .35rem; color: var(--tinta); font-weight: 600; }
.cs-dica-n { font-family: var(--f-mono); font-weight: 300; font-size: 2.4rem; line-height: .8; color: var(--mel-tinta); }
.cs-acao { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-top: clamp(2.4rem, 5vh, 3.4rem); padding-top: 2rem; border-top: 1px solid var(--linha-clara); }
.cs-acao-nota { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.cs-acao-nota .wf-link { min-height: 44px; }

/* ---------- tablet e celular ---------- */
@media (max-width: 980px) {
  .cs-topo { grid-template-columns: minmax(0, 1fr); }
  .cs-topo-texto { padding-bottom: 0; }
  .cs-titulo { font-size: clamp(3rem, 13.4vw, 5.6rem); }
  .cs-foto { margin: 1.5rem calc(var(--pad) * -1) 0; }
  .cs-foto img { width: min(100%, 640px); margin-inline: auto; }
  .cs-foto figcaption { position: static; margin: -1.4rem var(--pad) 0; writing-mode: horizontal-tb; }
  .cs-passos { grid-template-columns: minmax(0, 1fr); margin-top: -1rem; }
  .cs-palco { display: none; }
  .cs-passo { min-height: 0; padding-block: 2.6rem 3rem; border-top: 1px solid var(--linha-clara); }
  .cs-mini { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
  .cs-mini svg { width: 104px; height: auto; overflow: visible; }
  .cs-mini-v { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); align-self: flex-end; padding-bottom: .5rem; }
  .cs-mini .cs-mini-g { font-family: var(--f-mono); font-weight: 300; font-size: 2.8rem; line-height: 1; letter-spacing: -.06em; color: var(--mel-tinta); font-variant-numeric: tabular-nums; }
  .cs-passo-n { display: none; }
  .cs-verbo { font-size: clamp(3.4rem, 15vw, 6rem); }
  .cs-leve { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .cs-leve::before { inset: 0 calc(var(--pad) * -1); }
  .cs-sala { margin-inline: calc(var(--pad) * -1); height: 300px; min-height: 0; }
  .cs-sala figcaption { left: var(--pad); }
  .cs-sala img { object-position: 30% 62%; }
  .cs-dicas { grid-template-columns: minmax(0, 1fr); }
  .cs-leve-texto { padding-block: 2.6rem 3rem; }
}
@media (max-width: 420px) {
  .cs-indice { gap: 0 .8rem; }
  .cs-indice a { letter-spacing: .06em; gap: .4rem; }
}
.no-js .cs-passo-n { display: block; }

@media (prefers-reduced-motion: reduce) {
  .cs .wf-mancha { animation: none; }
  .cs-passo, .cs-mini-braco, .cs-mini-setor, .cs-paradas circle, .cs-paradas text { transition: none; }
}

/* ==== joelho ==== */
/* 2 · joelho — a cena presa na tela, uma estrutura por vez */
.jo { padding-bottom: clamp(4rem, 10vh, 8rem); }
.jo-m1 { width: 70vmax; height: 70vmax; left: -26vmax; top: 10%;
  background: radial-gradient(circle closest-side in oklab, rgb(201 154 98 / .2), rgb(138 102 65 / .08) 55%, transparent); }
.jo-m2 { width: 60vmax; height: 60vmax; right: -24vmax; top: -12vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(52 60 44 / .75), transparent); animation-duration: 38s; animation-delay: -12s; }
.jo-m3 { width: 64vmax; height: 64vmax; right: -20vmax; bottom: -10vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(129 114 111 / .26), transparent); animation-duration: 30s; animation-delay: -6s; }

.jo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem);
}
.jo-cab { grid-column: 2; grid-row: 1; padding-top: 6vh; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; }
.jo-h2 { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 6.2rem); line-height: .96; }
.jo-h2 em { display: block; }
.jo-abre { margin: 1.6rem 0 0; max-width: 34rem; font-size: var(--t-apoio); color: var(--texto-2); text-wrap: pretty; }

/* a cena */
.jo-cena {
  grid-column: 1; grid-row: 1 / span 3;
  align-self: start;
  position: sticky; top: 0;
  height: 100svh;
  margin: 0 0 0 calc(-1 * var(--pad));
}
.jo-palco { position: absolute; inset: 0; }
.jo-palco canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s var(--ease); }
.jo-palco.pronto canvas { opacity: 1; }
.jo-reserva { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.no-js .jo-reserva, .jo-sem3d .jo-reserva { display: block; }
.jo-leitura {
  position: absolute; left: var(--pad); top: 12svh;
  display: grid; gap: .2rem; pointer-events: none;
}
.jo-leitura-rot { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.jo-grau {
  display: block; min-width: 4ch;
  font-family: var(--f-mono); font-weight: 300;
  font-size: var(--t-num); line-height: .9; letter-spacing: -.06em;
  font-variant-numeric: tabular-nums; color: var(--mel-claro);
  text-shadow: 0 0 40px rgb(201 154 98 / .3);
}
.jo-legenda { position: absolute; left: var(--pad); bottom: 6svh; max-width: 34ch; margin: 0; }

/* pino: ponto na peça acesa, fio até o nome */
.jo-pino { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); --l: 120px; }
.jo-pino-ponto { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--mel-claro); box-shadow: 0 0 0 5px rgb(231 196 147 / .16), 0 0 18px rgb(231 196 147 / .6); }
.jo-pino-linha { position: absolute; left: 6px; top: 0; width: var(--l); height: 1px; background: linear-gradient(90deg in oklab, var(--mel-claro), rgb(231 196 147 / .25)); }
.jo-pino-nome { position: absolute; left: calc(var(--l) + 6px); top: -1.75rem; transform: translateX(-100%); padding: .1rem 0 .1rem .6rem; background: linear-gradient(90deg, rgb(18 20 17 / 0), var(--noite-0) .6rem); white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .1em; text-transform: uppercase; color: var(--mel-claro); }

/* índice das cinco partes, no pé da cena */
.jo-indice { position: absolute; left: var(--pad); bottom: calc(6svh + 3.4rem); display: flex; gap: .2rem; }
.jo-indice a { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; min-width: 44px; padding: 0 .55rem 0 0;
  text-decoration: none; font-family: var(--f-mono); font-size: var(--t-rot); color: var(--texto-3); border-top: 1px solid var(--linha); transition: color .4s var(--ease), border-color .4s var(--ease); }
.jo-indice a span { display: none; letter-spacing: .04em; }
.jo-indice a[aria-current] { color: var(--mel-claro); border-top-color: var(--mel-claro); }
.jo-indice a[aria-current] span { display: inline; }
.jo-indice a:hover { color: var(--texto); }

/* os itens */
.jo-itens { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0; }
.jo-item {
  min-height: 84svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vh 0;
  border-top: 1px solid var(--linha);
}
.jo-num { margin: 0 0 1rem; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; color: var(--texto-3); }
.jo-h3 {
  margin: 0;
  font-family: var(--f-titulo); font-weight: 500;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -.025em;
  text-wrap: balance;
  transition: color .6s var(--ease);
}
.jo-texto { margin: 1.4rem 0 0; max-width: 36rem; color: var(--texto-2); text-wrap: pretty; }
.jo-trata { margin: 1.4rem 0 0; max-width: 36rem; font-family: var(--f-mono); font-size: var(--t-rot); line-height: 1.6; letter-spacing: .02em; color: var(--mel-claro); }
.jo-fala { margin-top: 2.4rem; padding-left: 1.4rem; border-left: 1px solid var(--mel); max-width: 34rem; }
.jo-fala p { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); color: var(--texto); }
.jo-item { position: relative; }
.jo-item::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--mel-claro); transition: width .9s var(--ease); }
.jo-item.jo-agora::before { width: 4.8rem; }
.jo-item.jo-agora .jo-h3 { color: var(--mel-claro); }
.jo-item.jo-agora .jo-num { color: var(--mel-claro); }

.jo-fecho { grid-column: 2; grid-row: 3; padding: 3rem 0 0; border-top: 1px solid var(--linha); }
.jo-fecho p { margin: 0 0 .6rem; max-width: 36rem; color: var(--texto-2); }
.jo-fecho strong { color: var(--texto); font-weight: 600; }
.jo-fecho .wf-link { color: var(--mel-claro); }

/* celular e tablet: a cena presa no topo, os itens passando embaixo */
@media (max-width: 980px) {
  .jo-grade { display: block; }
  .jo-cab { min-height: 0; padding: 0 0 2rem; }
  .jo-cena {
    z-index: 2;
    height: 46svh;
    margin: 0 calc(-1 * var(--pad));
    background: linear-gradient(180deg, var(--noite-0) 78%, rgb(18 20 17 / 0));
  }
  .jo-cena { height: 46svh; background: var(--noite-0); }
  .jo-cena::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.2rem; pointer-events: none; background: linear-gradient(180deg, var(--noite-0), rgb(18 20 17 / 0)); }
  .jo-palco { bottom: 3.2rem; }
  .jo-leitura { left: var(--pad); top: .9rem; }
  .jo-leitura-rot { font-size: .75rem; }
  .jo-grau { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); }
  .jo-legenda { left: var(--pad); right: var(--pad); bottom: .5rem; max-width: none; line-height: 1.35; }
  .jo-indice, .jo-pino { display: none; }
  .jo-item { min-height: 62svh; padding: 3rem 0; justify-content: flex-start; }
  .jo-fecho { padding-top: 2.4rem; }
}

/* tablet: a barra fixa fica em cima (no celular ela vai para baixo) */
@media (min-width: 701px) and (max-width: 980px) {
  .jo-cena { top: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jo-palco canvas, .jo-h3, .jo-item::before, .jo-pino { transition: none; }
}

/* ==== trajetoria ==== */
/* 3 · trajetoria — clara, com a foto do Coritiba sangrando */
.tr { --tr-sangra: calc((100vw - min(100vw - 2 * var(--pad), var(--larg))) / 2); }
.tr-m1 { width: 70vmax; height: 70vmax; left: -26vmax; top: 10%;
  background: radial-gradient(circle closest-side in oklab, rgb(231 196 147 / .3), rgb(231 196 147 / .1) 55%, transparent); }
.tr-m2 { width: 60vmax; height: 60vmax; right: -20vmax; bottom: -10vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(129 114 111 / .18), transparent);
  animation-duration: 38s; animation-delay: -12s; }

/* cabeça */
.tr-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: end; }
.tr-cabeca .wf-rot, .tr-cabeca .wf-h2 { grid-column: 1 / span 7; }
.tr-cabeca .wf-h2 { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 6rem); }
.tr-lead { grid-column: 8 / -1; grid-row: 2; margin: 0 0 .4rem; }

/* bloco escuro: a foto sangrando à direita, a voz dele à esquerda */
.tr-bloco {
  position: relative; margin: clamp(3.5rem, 8vh, 6rem) calc(-1 * var(--pad)) 0;
  min-height: min(92vh, 880px);
  background: var(--noite-1); color: var(--texto);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center;
  overflow: clip; isolation: isolate;
}
.tr-foto { position: absolute; inset: 0 0 0 auto; width: 64vw; margin: 0; z-index: 0; }
.tr-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
          mask-image: linear-gradient(90deg, transparent, #000 22%); }
.tr-bloco .wf-fig { color: var(--texto-2); }
.tr-foto figcaption { position: absolute; left: calc(-36vw + var(--pad)); bottom: 1.6rem; display: flex; align-items: center; gap: .8rem; }
.tr-foto figcaption::before { content: ""; width: 2.4rem; height: 1px; background: var(--mel-claro); opacity: .6; }
.tr-voz { position: relative; z-index: 1; grid-column: 1 / span 6; margin: 0; padding: 4rem 0 4rem var(--pad); }
.tr-voz p { margin: 0; max-width: 13ch; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.2rem, 1rem + 3.6vw, 4.8rem); line-height: 1.02; letter-spacing: -.028em; text-wrap: balance; }
.tr-voz em { font-style: normal; font-weight: 300; color: var(--mel-claro); }
.tr-voz-quem { margin-top: 1.8rem; color: var(--mel-claro) !important; letter-spacing: .06em; text-transform: uppercase; }

/* percurso */
.tr-percurso { margin-top: clamp(5rem, 12vh, 9rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
.tr-rota { grid-column: 1 / span 8; }
.tr-empe { grid-column: 9 / -1; margin: 0; align-self: end; position: relative; text-align: center; padding-bottom: 2.4rem; }
.tr-empe::before { content: ""; position: absolute; left: 50%; bottom: 20%; width: 300px; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle closest-side in oklab, rgb(231 196 147 / .55), rgb(231 196 147 / .15) 60%, transparent); z-index: -1; }
.tr-empe img { display: block; height: 380px; width: auto; margin: 0 auto; }
.tr-empe figcaption { margin-top: .6rem; }
.tr-rota-tit { margin-bottom: 3rem; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.9rem); line-height: 1.05; letter-spacing: -.022em; text-wrap: balance; }
.tr-rota-tit span { font-weight: 300; color: var(--mel-tinta); }
.tr-lista { --tr-col: 12.5rem; --tr-x: calc(var(--tr-col) + 1.4rem); list-style: none; margin: 0; padding: 0; position: relative; }
.tr-lista::before { content: ""; position: absolute; left: var(--tr-x); top: .5rem; bottom: .5rem; width: 1px; background: var(--linha-clara); }
.tr-lista::after { content: ""; position: absolute; left: var(--tr-x); top: .5rem; bottom: .5rem; width: 1px; background: var(--mel-tinta);
  transform-origin: top; transform: scaleY(var(--tr-p, 1)); }
.tr-passo { position: relative; padding: 0 0 2.6rem calc(var(--tr-x) + 2.2rem); }
.tr-passo::before { content: ""; position: absolute; left: calc(var(--tr-x) - 5px); top: .55rem; width: 11px; height: 11px; border-radius: 50%; background: var(--porc-0); border: 1px solid var(--mel-tinta); z-index: 1; }
.tr-passo::before { transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.tr-passo.tr-aceso::before { background: var(--mel-tinta); box-shadow: 0 0 0 5px rgb(118 84 48 / .12); }
.tr-onde { position: absolute; left: 0; top: .35rem; width: var(--tr-col); text-align: right; line-height: 1.45; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .08em; text-transform: uppercase; color: var(--mel-tinta); }
.tr-o-que { margin: .3rem 0 0; font-family: var(--f-titulo); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.015em; }
.tr-det { margin: .4rem 0 0; color: var(--tinta-2); max-width: 52ch; }

/* esporte + falas */
.tr-esporte { margin-top: clamp(4rem, 10vh, 7rem); padding-top: clamp(3rem, 8vh, 5rem); border-top: 1px solid var(--linha-clara);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 3rem; }
.tr-esporte-txt { grid-column: 1 / span 5; }
.tr-esporte-txt .wf-corpo { margin-top: 1.2rem; }
.tr-live { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.4rem; min-height: 64px; text-decoration: none; color: var(--tinta); }
.tr-live-play { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--mel-tinta); color: var(--mel-tinta); transition: background .3s var(--ease), color .3s var(--ease); }
.tr-live-play svg { width: 22px; height: 22px; }
.tr-live:hover .tr-live-play { background: var(--mel-tinta); color: var(--porc-0); }
.tr-live-txt { display: grid; gap: .15rem; }
.tr-live-rot { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .04em; color: var(--tinta-3); }
.tr-live-tit { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.tr-falas { grid-column: 7 / -1; display: grid; gap: 3.4rem; }
.tr-falas .wf-fala { position: relative; padding-left: 2.6rem; }
.tr-falas .wf-fala p { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); }
.tr-falas .wf-fala::before { content: "“"; position: absolute; left: 0; top: -.35em; font-family: var(--f-titulo); font-weight: 300; font-size: 4.6rem; line-height: 1; color: var(--mel-tinta); }

@media (max-width: 900px) {
  .tr-cabeca .wf-rot, .tr-cabeca .wf-h2, .tr-lead, .tr-rota, .tr-empe, .tr-esporte-txt, .tr-falas { grid-column: 1 / -1; }
  .tr-lead { grid-row: auto; margin-top: 1.8rem; }
  .tr-bloco { display: block; min-height: 0; }
  .tr-foto { position: relative; width: 100%; }
  .tr-foto img { height: auto; aspect-ratio: 4 / 3.6; object-position: 54% 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
            mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .tr-foto figcaption { position: static; padding: .2rem var(--pad) 0; text-shadow: none; }
  .tr-voz { padding: 2.4rem var(--pad) 3.6rem; }
  .tr-empe { margin-top: 1rem; }
  .tr-foto figcaption { display: block; }
  .tr-foto figcaption::before { display: none; }
  .tr-lista { --tr-x: .35rem; }
  .tr-passo { padding-left: 2.2rem; }
  .tr-onde { position: static; width: auto; text-align: left; display: block; }
  .tr-falas .wf-fala { padding-left: 1.8rem; }
  .tr-falas .wf-fala::before { font-size: 3.4rem; }
  .tr-empe img { height: 320px; }
}

/* ==== pesquisa ==== */
/* 4 · pesquisa — o mecanismo extensor */
.pq { padding-inline: 0; }
.pq > .wf-dentro { padding-inline: var(--pad); box-sizing: content-box; }
.pq-m1 { width: 64vmax; height: 64vmax; left: -22vmax; top: -18vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(52 60 44 / .7), transparent); }
.pq-m2 { width: 70vmax; height: 70vmax; right: -26vmax; bottom: -20vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(201 154 98 / .16), rgb(138 102 65 / .06) 55%, transparent); animation-duration: 40s; animation-delay: -14s; }

.pq-cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.pq-cab .wf-rot { grid-column: 1 / -1; }
.pq-h2 { font-size: clamp(2.8rem, 1.2rem + 5.6vw, 7.4rem); line-height: .94; }
.pq-h2 em { display: block; }
.pq-abre { max-width: 34rem; color: var(--texto-2); text-wrap: pretty; padding-bottom: .4rem; }
.pq-abre p { margin: 0 0 1em; }
.pq-abre p:last-child { margin-bottom: 0; }

/* a faixa da foto, sangrando */
.pq-faixa { position: relative; margin: clamp(3rem, 8vh, 6rem) 0 0; }
.pq-faixa img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 76%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 76%, transparent); }
.pq-arco {
  position: absolute; right: 6vw; top: 4%;
  height: 88%; width: auto; aspect-ratio: 1;
  overflow: visible;
}
.pq-arco path, .pq-arco line { fill: none; vector-effect: non-scaling-stroke; }
.pq-arco-escala { stroke: rgb(231 196 147 / .28); stroke-width: 1; }
.pq-arco-tiques line { stroke: rgb(231 196 147 / .4); stroke-width: 1; }
.pq-arco-ref { stroke: rgb(231 196 147 / .45); stroke-width: 1; stroke-dasharray: 5 6; }
.pq-arco-traco { stroke: var(--mel-claro); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.pq-arco-braco { stroke: var(--mel-claro); stroke-width: 1.25; }
.pq-arco-eixo, .pq-arco-ponta { fill: #f3d6a8; }
.pq-arco-ponta { filter: drop-shadow(0 0 6px rgb(231 196 147 / .8)); }
.pq-arco-rot { font-family: var(--f-mono); font-size: 15px; letter-spacing: .04em; fill: var(--mel-claro); transition: opacity .4s var(--ease); }
.pq-arco-vivo { font-family: var(--f-mono); font-weight: 300; font-size: 44px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; fill: var(--mel-claro); text-anchor: middle; paint-order: stroke; stroke: rgb(18 20 17 / .55); stroke-width: 6px; }
.pq-legenda {
  display: grid; gap: .3rem;
  margin: 1rem var(--pad) 0; max-width: 60ch;
}

/* o índice dos artigos */
.pq-corpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(2rem, 5vw, 6rem); margin-top: clamp(4rem, 10vh, 7rem); }
.pq-conta { align-self: start; position: sticky; top: 14vh; }
.pq-seis {
  margin: 0;
  font-family: var(--f-titulo); font-weight: 300;
  font-size: clamp(9rem, 4rem + 14vw, 20rem); line-height: .78; letter-spacing: -.06em;
  color: var(--mel-claro);
}
.pq-seis-rot { margin: 1.2rem 0 0; font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.2; color: var(--texto); }
.pq-seis-rot span:not(.wf-so-leitor) { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .06em; color: var(--texto-3); }

.pq-lista, .pq-arts { list-style: none; margin: 0; padding: 0; }
.pq-grupo + .pq-grupo { margin-top: clamp(3rem, 7vh, 5rem); }
.pq-grupo-tit { display: flex; align-items: baseline; gap: .9rem; margin: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--mel); font-family: var(--f-mono); font-weight: 400; font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--mel-claro); }
.pq-grupo-tit b { font-weight: 300; font-size: 2.4rem; line-height: .8; letter-spacing: -.04em; }
.pq-art { padding: 2rem 0 2.2rem; border-bottom: 1px solid var(--linha); }
.pq-fecho { grid-column: 2; margin: 2.4rem 0 0; }
.pq-fecho .wf-link { color: var(--mel-claro); }
.pq-meta { margin: 0; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .03em; color: var(--texto-3); display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline; }
.pq-meta time { color: var(--texto-2); }
.pq-tit { margin: .8rem 0 0; max-width: 40ch; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.45rem, 1rem + 1.3vw, 2.25rem); line-height: 1.14; letter-spacing: -.018em; text-wrap: pretty; }
.pq-tit a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s var(--ease); }
.pq-tit a::after { content: " ↗"; color: var(--mel-claro); }
.pq-tit a:hover { color: var(--mel-claro); background-size: 100% 1px; }
.pq-orig { margin: .8rem 0 0; max-width: 52rem; font-size: var(--t-corpo); font-style: italic; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.pq-temas { list-style: none; margin: 2.4rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--linha); display: grid; }
.pq-temas a { display: flex; gap: .9rem; align-items: baseline; min-height: 44px; padding-top: .55rem; color: var(--texto-2); font-size: var(--t-apoio); text-decoration: none; }
.pq-temas a:hover { color: var(--texto); }
.pq-temas b { min-width: 1.4ch; font-family: var(--f-mono); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--mel-claro); }

@media (max-width: 980px) {
  .pq-cab { grid-template-columns: 1fr; }
  .pq-abre { margin-top: 1.6rem; }
  .pq-faixa { overflow: clip; }
  .pq-faixa img { width: 150%; max-width: none; margin-left: -30%; }
  .pq-arco { right: 9vw; top: 14%; height: 60%; }
  .pq-arco-vivo { font-size: 52px; }
    .pq-legenda { margin-top: 2.2rem; }
  .pq-corpo { grid-template-columns: 1fr; margin-top: 3rem; }
  .pq-conta { position: static; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 1.2rem; margin-bottom: 2.4rem; }
  .pq-seis { font-size: clamp(7rem, 30vw, 10rem); }
  .pq-seis-rot { margin: 0 0 .6rem; }
  .pq-temas { grid-column: 1 / -1; margin-top: 1.6rem; }
  .pq-fecho { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-arco-rot, .pq-tit a { transition: none; }
}

/* ==== vozes ==== */
/* 5 · vozes — clara (porcelana) — prefixo vz- */
.vz-m1 { width: 70vw; height: 70vw; right: -20vw; top: 6%;
  background: radial-gradient(circle closest-side in oklab, rgb(231 196 147 / .32), transparent); }
.vz-m2 { width: 56vw; height: 56vw; left: -16vw; bottom: 4%; animation-duration: 36s; animation-delay: -12s;
  background: radial-gradient(circle closest-side in oklab, rgb(129 114 111 / .14), transparent); }

.vz-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 2rem clamp(2rem, 5vw, 6rem); }
.vz-titulo { max-width: 11ch; }
.vz-apoio { max-width: 34ch; font-size: var(--t-apoio); }
.vz-apoio p { margin: 0; }
.vz-selos { display: grid; gap: .3rem; margin-top: 1.4rem !important; padding-top: 1.2rem; border-top: 1px solid var(--linha-clara); font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .03em; line-height: 1.5; color: var(--tinta-3); }

/* ---------- palco: uma fala grande por vez ---------- */
.vz-palco { display: grid; grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); grid-template-rows: auto auto; gap: 0 clamp(2rem, 4vw, 4rem); position: relative; margin-top: clamp(4rem, 10vh, 7rem); padding-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--linha-clara); }
.vz-falas { grid-column: 1; grid-row: 1; display: grid; align-items: center; min-height: clamp(18rem, 44vh, 30rem); }
.vz-fala { grid-area: 1 / 1; padding-left: clamp(0rem, 6vw, 8rem); }
.vz-fala p { font-size: clamp(2rem, 1rem + 3.6vw, 5.2rem); line-height: 1.06; letter-spacing: -.034em; font-weight: 400; max-width: 21ch; text-indent: -.4em; }
.vz-fala.vz-c p { font-size: clamp(2.4rem, 1rem + 4.8vw, 6.6rem); max-width: 17ch; }
.vz-fala.vz-l p { font-size: clamp(1.8rem, 1rem + 2.8vw, 4.2rem); max-width: 25ch; }
.vz-fala p em { font-style: normal; color: var(--mel-tinta); }
.vz-fala cite { margin-top: 1.6rem; font-size: var(--t-rot); }

/* com JS: só a fala atual aparece; as outras ficam no mesmo lugar, invisíveis */
.js .vz-palco.vz-vivo .vz-fala { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), visibility 0s linear .9s; }
.js .vz-palco.vz-vivo .vz-fala.vz-atual { opacity: 1; visibility: visible; transform: none; transition: opacity 1.1s var(--ease) .25s, transform 1.2s var(--ease) .25s, visibility 0s; }
/* sem JS: as falas em lista */
.no-js .vz-falas { gap: 3rem; }
.no-js .vz-fala { grid-area: auto; }

.vz-controle { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: .6rem; margin-top: clamp(2rem, 5vh, 3rem); padding-left: clamp(0rem, 6vw, 8rem); }
.vz-controle[hidden] { display: none; }
.vz-bt { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--linha-clara); border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; transition: border-color .3s, background .3s; }
.vz-bt:hover { border-color: var(--tinta); }
.vz-bt svg { width: 18px; height: 18px; }
.vz-ic-toca { display: none; }
.vz-pausa[aria-pressed="true"] .vz-ic-pausa { display: none; }
.vz-pausa[aria-pressed="true"] .vz-ic-toca { display: block; }
.vz-conta { min-width: 5.5rem; text-align: center; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .08em; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.vz-conta b { font-weight: 500; color: var(--tinta); }
.vz-tempo { width: 48px; height: 48px; margin-left: .6rem; overflow: visible; }
.vz-tempo path { fill: none; stroke-width: 2; stroke-linecap: round; }
.vz-tempo-guia { stroke: var(--linha-clara); }
.vz-tempo-fio { stroke: var(--mel-tinta); stroke-dashoffset: calc(var(--vz-l, 40) * 1px); }
.vz-tempo.vz-corre .vz-tempo-fio { stroke-dashoffset: 0; transition: stroke-dashoffset var(--vz-dur, 8s) linear; }

/* índice de quem fala (desktop) */
.vz-indice { grid-column: 2; grid-row: 1 / 3; align-self: center; list-style: none; margin: 0; padding: 0 0 0 clamp(1.2rem, 2vw, 2rem); border-left: 1px solid var(--linha-clara); }
.vz-indice[hidden] { display: none; }
.vz-quem {
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 44px; padding: .2rem 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--f-texto); font-size: 1.02rem; color: var(--tinta-3);
  transition: color .4s var(--ease);
}
.vz-quem span { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.vz-quem::after { content: ""; flex: 1; height: 1px; background: var(--mel-tinta); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.vz-quem:hover { color: var(--tinta); }
.vz-quem[aria-current="true"] { color: var(--tinta); font-weight: 600; }
.vz-quem[aria-current="true"] span { color: var(--mel-tinta); }
.vz-quem[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- leituras: contagens com fio proporcional ---------- */
.vz-leituras { margin-top: clamp(4rem, 10vh, 7rem); }
.vz-leituras-tit { margin: 0 0 1.4rem; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--mel-tinta); }
.vz-leituras-tit span { color: var(--tinta-3); }
.vz-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-clara); }
.vz-lista li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); grid-template-rows: auto auto; align-items: end; gap: .9rem clamp(1rem, 2vw, 2rem); padding-block: clamp(1.4rem, 3vh, 2rem); border-bottom: 1px solid var(--linha-clara); }
.vz-lista li .vz-n { grid-row: 1 / 3; align-self: center; }

.vz-base .vz-n { font-weight: 400; }
.vz-base .vz-barra i { background: var(--tinta); }
.vz-n { font-family: var(--f-mono); font-weight: 300; font-size: clamp(2.6rem, 1.4rem + 3vw, 5rem); line-height: 1; letter-spacing: -.06em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.vz-rot { color: var(--tinta-2); }
.vz-rot b { font-weight: 600; color: var(--tinta); }
.vz-base .vz-barra { height: 2px; }
.vz-barra { position: relative; height: 4px; border-radius: 2px; background: var(--linha-clara); overflow: hidden; }
.vz-barra i { position: absolute; inset: 0 auto 0 0; width: calc(var(--n) / 208 * 100%); border-radius: 2px; background: var(--mel-tinta); transform-origin: left; }
.js .vz-lista li .vz-barra i { transform: scaleX(0); transition: transform 1.4s var(--ease) calc(var(--atraso, 0ms) + 300ms); }
.js .vz-lista li.wf-visto .vz-barra i { transform: none; }
.vz-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 3rem; margin-top: 2rem; }
.vz-pe p { margin: 0; max-width: 56ch; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .02em; line-height: 1.5; color: var(--tinta-3); }

@media (max-width: 980px) {
  .vz-topo { grid-template-columns: minmax(0, 1fr); }

  .vz-fala { padding-left: 0; }
  .vz-controle { padding-left: 0; }
  .vz-falas { min-height: 0; }
  .vz-fala p { text-indent: -.36em; padding-left: .36em; }
  .vz-palco { grid-template-columns: minmax(0, 1fr); }
  .js .vz-indice { display: none; }
  .vz-lista li { grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr); gap: .6rem 1rem; }
}
@media (max-width: 420px) {
  .vz-fala p { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
  .vz-fala.vz-c p { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .vz-fala.vz-l p { font-size: clamp(1.5rem, 6.6vw, 1.8rem); }

}
@media (prefers-reduced-motion: reduce) {
  .vz .wf-mancha { animation: none; }
  .js .vz-palco.vz-vivo .vz-fala, .js .vz-palco.vz-vivo .vz-fala.vz-atual { transition: none; transform: none; }
  .js .vz-lista li .vz-barra i { transition: none; transform: none; }
}

/* ==== onde ==== */
/* 6 · onde — noite, mapa grande, dois endereços como leituras */
.on { --on-sangra: calc((100vw - min(100vw - 2 * var(--pad), var(--larg))) / 2); }
.on-m1 { width: 64vmax; height: 64vmax; left: -22vmax; top: 4%;
  background: radial-gradient(circle closest-side in oklab, rgb(52 60 44 / .75), transparent); }
.on-m2 { width: 56vmax; height: 56vmax; right: -18vmax; top: 22%;
  background: radial-gradient(circle closest-side in oklab, rgb(201 154 98 / .16), rgb(138 102 65 / .06) 55%, transparent);
  animation-duration: 30s; animation-delay: -8s; }
.on-m3 { width: 60vmax; height: 60vmax; left: 20vw; bottom: -20vmax;
  background: radial-gradient(circle closest-side in oklab, rgb(129 114 111 / .2), transparent);
  animation-duration: 40s; animation-delay: -18s; }

.on-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: end; }
.on-cabeca .wf-rot, .on-cabeca .wf-h2 { grid-column: 1 / span 7; }
.on-cabeca .wf-h2 { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 6rem); }
.on-lead { grid-column: 8 / -1; grid-row: 2; margin: 0 0 .4rem; }

/* mapa + endereços */
.on-palco { margin-top: clamp(3rem, 8vh, 5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
.on-mapa { grid-column: 1 / span 7; margin: 0 0 0 calc(-1 * var(--on-sangra)); }
.on-janela { position: relative; height: min(84vh, 780px); overflow: hidden; background: var(--noite-2); }
/* o mapa se dissolve na noite pelas bordas de dentro */
.on-janela::after { content: ""; position: absolute; inset: 0 0 26px 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 50% at 0% 100%, rgb(18 20 17 / .97), rgb(18 20 17 / .8) 45%, transparent 80%),
    linear-gradient(90deg in oklab, transparent 64%, rgb(18 20 17 / .92)),
    linear-gradient(180deg in oklab, var(--noite-0), transparent 16%); }
.on-painel { position: absolute; z-index: 2; left: max(var(--on-sangra), 1.5rem); bottom: 3.4rem; display: grid; gap: .1rem; pointer-events: none; }
.on-painel-rot { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin-bottom: .5rem; }
.on-painel-num { font-family: var(--f-mono); font-weight: 300; font-size: clamp(2rem, 1rem + 2.6vw, 3.8rem); line-height: 1; letter-spacing: -.05em; color: var(--mel-claro); font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgb(18 20 17 / .9); }
.on-iframe { position: absolute; left: 0; top: -180px; width: 100%; height: calc(100% + 180px); border: 0;
  filter: grayscale(1) invert(.9) sepia(.35) brightness(.9) contrast(.95); }
.on-ponto { position: absolute; z-index: 1; left: 50%; top: calc(50% - 90px - 21px); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--mel-claro); box-shadow: 0 0 0 4px rgb(18 20 17 / .7); }
.on-ponto i { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--mel-claro); animation: on-pulso 2.8s var(--ease) infinite; }
@keyframes on-pulso { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.on-parado .on-ponto i { animation-play-state: paused; }
.on-mapa figcaption { margin-top: .8rem; padding-left: var(--on-sangra); }
.on-abrir { color: var(--texto-2); text-underline-offset: .25em; display: inline-flex; align-items: center; min-height: 44px; }

.on-lugares { grid-column: 9 / -1; display: grid; gap: 0; padding-top: 1rem; }
.on-lugar-2 { margin-top: 2.8rem; padding-top: 2.4rem; border-top: 1px solid var(--linha); }
.on-lugar-2 .wf-h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); }
.on-lugar-1 .wf-h3 { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); }
.on-idx { margin: 0 0 .7rem; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--mel-claro); }
.on-tipo { margin: .5rem 0 0; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .04em; color: var(--texto-3); }
.on-end { margin: 1rem 0 0; font-style: normal; color: var(--texto-2); }
.on-tels { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.on-tels a { font-family: var(--f-mono); font-size: 1.2rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--linha); }
.on-tels a:hover { color: var(--mel-claro); }
.on-agendar { margin-top: 1.4rem; }
.on-lugar .wf-link { margin-top: .6rem; color: var(--mel-claro); }

/* foto + convênios + perguntas */
.on-baixo { margin-top: clamp(5rem, 12vh, 8rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
.on-foto { grid-column: 1 / span 5; margin: 0 0 0 calc(-1 * var(--on-sangra)); align-self: stretch; position: relative; }
.on-foto img { display: block; width: 100%; height: min(86vh, 860px); object-fit: cover; object-position: 50% 55%;
  filter: brightness(.82) saturate(.9) sepia(.08);
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, #000 62%, transparent), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-composite: intersect; }
.on-foto figcaption { margin-top: .8rem; padding-left: var(--on-sangra); }
.on-info { grid-column: 7 / -1; display: grid; gap: 4rem; align-content: start; }
.on-rot { margin: 0 0 1rem; font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .12em; text-transform: uppercase; color: var(--mel-claro); }
.on-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem;
  font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.7rem); line-height: 1.2; letter-spacing: -.02em; }
.on-lista li { display: inline-flex; align-items: center; gap: .55em; white-space: nowrap; }
.on-lista li::before { content: ""; width: .32em; height: .32em; border-radius: 50%; background: var(--mel); flex: none; transform: translateY(.04em); }
.on-nota { margin: 1.2rem 0 0; color: var(--texto-2); }
.on-fatos { margin: 0; display: grid; gap: 1.2rem; }
.on-fatos div { display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linha); }
.on-fatos dt { font-family: var(--f-mono); font-size: var(--t-rot); letter-spacing: .08em; text-transform: uppercase; color: var(--mel-claro); padding-top: .25rem; }
.on-fatos dd { margin: 0; color: var(--texto-2); }
.on-perguntas .wf-h3 { margin-bottom: 1.4rem; }
.on-p { border-top: 1px solid var(--linha); }
.on-p:last-child { border-bottom: 1px solid var(--linha); }
.on-p summary { list-style: none; cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); }
.on-p summary::-webkit-details-marker { display: none; }
.on-p summary::after { content: "+"; font-family: var(--f-mono); font-weight: 300; font-size: 1.6rem; color: var(--mel-claro); transition: transform .3s var(--ease); }
.on-p[open] summary::after { transform: rotate(45deg); }
.on-p p { margin: 0 0 1.4rem; max-width: 60ch; color: var(--texto-2); }
.on-p p a { color: var(--mel-claro); }
.on-p summary:hover { color: var(--mel-claro); }
.on-p summary .on-pn { font-family: var(--f-mono); font-weight: 300; font-size: var(--t-rot); color: var(--texto-3); margin-right: 1.2rem; min-width: 1.6rem; }
.on-p summary span:not(.on-pn) { flex: 1; }
.on-p[open] p { animation: on-abre .5s var(--ease); }
@keyframes on-abre { from { opacity: 0; transform: translateY(-6px); } }
/* fecho: a ação no fim da seção */
.on-fecho { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-top: 2.4rem; border-top: 1px solid var(--linha); }
.on-fecho p { margin: 0; flex: 1 1 16rem; font-family: var(--f-titulo); font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; }
.on-fecho p em { font-style: normal; font-weight: 300; color: var(--mel-claro); }

@media (prefers-reduced-motion: reduce) { .on-ponto i { animation: none; opacity: .6; transform: scale(1.4); } .on-p[open] p { animation: none; } }

@media (max-width: 900px) {
  .on-mapa, .on-lugares, .on-foto, .on-info { grid-column: 1 / -1; }
  .on-mapa { margin: 0 calc(-1 * var(--pad)); }
  .on-janela { height: 62vh; max-height: 520px; }
  .on-mapa figcaption { padding: 0 var(--pad); }
  .on-lugares { margin-top: 3rem; }
  .on-foto { margin: 0 calc(-1 * var(--pad)) 3.6rem; }
  .on-foto img { position: static; height: auto; aspect-ratio: 4 / 5; object-position: 50% 60%;
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .on-foto figcaption { padding: 0 var(--pad); }
  .on-cabeca .wf-rot, .on-cabeca .wf-h2, .on-lead { grid-column: 1 / -1; }
  .on-lead { grid-row: auto; margin-top: 1.8rem; }
  .on-painel { left: var(--pad); top: 1.4rem; bottom: auto; }
  .on-painel-num { font-size: clamp(1.7rem, 1rem + 4vw, 2.4rem); }
  .on-janela::after { background: radial-gradient(ellipse 100% 46% at 0% 0%, rgb(18 20 17 / .97), rgb(18 20 17 / .8) 45%, transparent 80%), linear-gradient(0deg in oklab, rgb(18 20 17 / .5), transparent 20%); }
  .on-fatos div { grid-template-columns: 1fr; gap: .3rem; }
}
/* fundo próprio da leitura: as ruas somem atrás dos números */
.on-painel::before { content: ""; position: absolute; z-index: -1; inset: -3rem -5rem -2.4rem -4rem;
  background: radial-gradient(closest-side in oklab, rgb(18 20 17 / .94), rgb(18 20 17 / .75) 60%, transparent); }

/* ==== fim ==== */
.fim { padding: clamp(4.5rem, 10vh, 7.5rem) var(--pad) calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); position: relative; overflow: clip; }
.fim::before { content: ""; position: absolute; width: 70vmax; height: 70vmax; left: -22vmax; top: -42vmax; border-radius: 50%; background: radial-gradient(circle closest-side in oklab, rgb(201 154 98 / .14), transparent); pointer-events: none; }
.fim-dentro { max-width: var(--larg); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; position: relative; }
.fim p { margin: 0 0 .6rem; color: var(--texto-2); font-size: 1rem; line-height: 1.6; }
.fim b { font-weight: 600; color: var(--texto); }
.fim-nw { white-space: nowrap; }
.fim-topo { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.fim-arco { width: 3.6rem; height: 3.6rem; flex: none; color: var(--mel-claro); margin-left: -.6rem; }
.fim-nome { font-family: var(--f-titulo); font-size: clamp(1.7rem, 1.2rem + 1vw, 2.2rem) !important; font-weight: 500; letter-spacing: -.025em; color: var(--texto) !important; line-height: 1.05 !important; margin: 0 !important; white-space: nowrap; }
.fim-linha { max-width: 32ch; }
.fim-reg { font-family: var(--f-mono); font-size: var(--t-rot) !important; letter-spacing: .04em; color: var(--mel-claro) !important; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.fim-reg i { font-style: normal; opacity: .6; }
.fim-reg a { color: var(--texto-2); min-height: 44px; display: inline-flex; align-items: center; margin-left: .4rem; text-underline-offset: .3em; }
.fim-tit { font-family: var(--f-mono); font-size: var(--t-rot) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--mel-claro) !important; margin-bottom: .9rem !important; }
.fim-tel { display: inline-flex; min-height: 44px; align-items: center; font-family: var(--f-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--texto); white-space: nowrap; }
.fim a:hover { color: var(--mel-claro); }
.fim-atalhos { display: flex; flex-direction: column; align-items: flex-start; }
.fim-atalhos a { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; color: var(--texto-2); font-size: 1rem; }
.fim-base { max-width: var(--larg); margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; position: relative; }
.fim-base p { font-size: .9rem; color: var(--texto-3); max-width: 70ch; margin: 0; }
.fim-selo { font-family: var(--f-mono); letter-spacing: .03em; color: var(--texto-2) !important; }
.fim-selo a { color: var(--texto); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--mel); display: inline-flex; min-height: 44px; align-items: center; }
@media (max-width: 980px) { .fim-dentro { grid-template-columns: 1fr 1fr; } .fim-assina { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .fim-dentro { grid-template-columns: 1fr; gap: 2rem; }
  .fim-nome { white-space: normal; }
  .fim-nw { white-space: normal; }
  .fim-atalhos { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
  .fim-atalhos .fim-tit { grid-column: 1 / -1; }
  .fim-col p { font-size: .95rem; }
  .fim { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* ==== ajustes ==== */
/* ajustes da montagem (depois de todas as seções) */
/* joelho: rótulo do pino com folga da coluna de texto */
.jo-pino-nome { margin-left: -1rem; }
/* joelho, celular: degradê sob a cena presa mais longo, para o texto passar por baixo sem "fantasma" */
@media (max-width: 980px) { .jo-cena::after { height: 3.6rem; } }
/* reset geral de movimento reduzido (vence regras de seção) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}