/* ===== Sistema visual — Dra. Sueleny Vinson · "Os rios que chegam ao coração" ===== */
:root {
  /* noite de açaí (superfícies escuras) */
  --acai-0: #120914;
  --acai-1: #1d0e22;
  --ameixa: #3a1a3b;
  --violeta: #2b1745;
  /* luz de fim de tarde no rio */
  --tarde: #d99a5e;
  --tarde-clara: #f0c58e;
  --tarde-funda: #8a4f1c;      /* texto de acento sobre claro (AA) */
  --ouro: #cfbc87;
  --ouro-fundo: #7a6531;       /* ouro legível sobre claro */
  /* contraponto: o blazer */
  --folha: #c6d9ae;
  --folha-funda: #3c4a33;
  /* superfícies claras (o dia no rio) */
  --perola: #f3ede4;
  --linho: #ece3d4;
  --areia: #e4d6c1;
  --tinta: #1f1420;            /* texto sobre claro */
  --tinta-2: #4f3f4d;          /* apoio sobre claro */
  --perola-70: rgb(243 237 228 / .74);
  --perola-50: rgb(243 237 228 / .52);
  /* acento: o coraçãozinho bordado */
  --coracao: #e0364c;
  --magenta: #8f043a;

  /* os quatro rios */
  --rio-pressao: #f0b979;
  --rio-colesterol: #efe2cf;
  --rio-glicose: #c6d9ae;
  --rio-peso: #e3a6bd;
  /* versões legíveis sobre claro */
  --rio-pressao-f: #a8611f;
  --rio-colesterol-f: #7d6a52;
  --rio-glicose-f: #4d6a35;
  --rio-peso-f: #a24a6d;

  --serif: "Hedvig Letters Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Hedvig Letters Sans", "Segoe UI", system-ui, sans-serif;

  /* escala */
  --t-corpo: 1.125rem;                          /* 18 px */
  --t-apoio: clamp(1.125rem, 1.2vw, 1.25rem);   /* 18–20 px */
  --t-sobre: .82rem;                            /* sobretítulo em caixa alta */
  --t-h2: clamp(2.3rem, 4.4vw, 4.2rem);
  --t-h3: clamp(1.45rem, 2vw, 1.9rem);
  --t-gigante: clamp(4rem, 11vw, 10rem);

  --margem: clamp(1.25rem, 5vw, 5.5rem);
  --largura: 82rem;
  --esp-1: .5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.25rem;
  --esp-5: 3.5rem;
  --esp-6: 5rem;
  --secao: clamp(5rem, 11vw, 9.5rem);           /* respiro vertical entre seções */
  --raio: 999px;
  --raio-2: 18px;

  --curva: cubic-bezier(.2, .7, .2, 1);
  --dur: 1.2s;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--acai-0);
  color: var(--perola);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--tarde-clara); outline-offset: 4px; }
.claro :focus-visible { outline-color: var(--tarde-funda); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* superfícies: cada seção declara se é noite ou dia */
.noite { background: var(--acai-0); color: var(--perola); }
.claro { background: var(--perola); color: var(--tinta); }

/* granulado único fixo sobre a página inteira */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  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>");
}
.hero::after { display: none; } /* o hero usava o próprio; na página vale o global */

/* revelação na rolagem: as coisas chegam desfocadas e ficam nítidas (o gesto do hero) */
.js [data-rev] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  transition: opacity 1.1s ease, filter 1.3s ease, transform 1.3s var(--curva);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js [data-rev].visto { opacity: 1; filter: none; transform: none; }

/* botão de agendar que acompanha a rolagem */
.fixo {
  position: fixed;
  z-index: 50;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.4rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklab, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 12px 34px -10px rgb(18 9 20 / .55);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .5s ease, transform .6s var(--curva);
}
.fixo.ativo { opacity: 1; transform: none; pointer-events: auto; }
.fixo::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--coracao); box-shadow: 0 0 10px rgb(224 54 76 / .7);
}
@media (max-width: 760px) {
  .fixo { left: 1rem; right: 1rem; justify-content: center; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-rev] { opacity: 1; filter: none; transform: none; }
}

/* ===== hero ===== */
/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: max(100svh, 640px);
  overflow: clip;
  isolation: isolate;
  background: var(--acai-0);
}

/* malha: manchas radiais sem filtro, interpoladas em oklch */
.hero-malha {
  position: absolute;
  inset: -12%;
  z-index: -3;
  background:
    radial-gradient(closest-side at 74% 60% in oklch, rgb(217 154 94 / .46), rgb(217 154 94 / 0)) ,
    radial-gradient(closest-side at 86% 18% in oklch, rgb(143 4 58 / .30), rgb(143 4 58 / 0)),
    radial-gradient(closest-side at 18% 88% in oklch, rgb(60 74 51 / .55), rgb(60 74 51 / 0)),
    radial-gradient(closest-side at 22% 22% in oklch, rgb(58 26 59 / .95), rgb(58 26 59 / 0)),
    radial-gradient(closest-side at 58% 96% in oklch, rgb(43 23 69 / .95), rgb(43 23 69 / 0)),
    linear-gradient(160deg in oklch, var(--acai-1), var(--acai-0) 70%);
  background-size: 120% 120%, 90% 90%, 110% 110%, 130% 130%, 120% 120%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%, 100% 0%, 0% 100%, 0% 0%, 50% 100%, 0 0;
  animation: hero-respira 34s ease-in-out infinite alternate;
}
@keyframes hero-respira {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(1%, -1.2%, 0) scale(1.02); }
}

/* granulado fino fixo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  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>");
}

.hero-rios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
}

/* nav */
.hero-nav {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--esp-3) var(--margem) 0;
}
.hero-marca {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: .01em;
}
.hero-marca small {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--perola-50);
}
.hero-marca-ponto {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--coracao);
  align-self: center;
  box-shadow: 0 0 12px rgb(224 54 76 / .6);
}
.hero-nav-link {
  font-size: .85rem;
  letter-spacing: .08em;
  text-decoration: none;
  padding: .55rem 1.1rem;
  border: 1px solid rgb(243 237 228 / .28);
  border-radius: var(--raio);
  transition: background .3s, border-color .3s;
}
.hero-nav-link:hover { background: rgb(243 237 228 / .08); border-color: rgb(243 237 228 / .5); }

/* retrato */
.hero-retrato {
  position: absolute;
  z-index: 1;
  margin: 0;
  right: max(2vw, calc(50vw - 46rem));
  bottom: 0;
  height: min(90%, 1180px);
  aspect-ratio: 715 / 934;
}
.hero-foto {
  position: relative;
  width: 100%;
  height: 100%;
  /* o brilho fica no invólucro: a máscara da foto não corta a luz */
  filter: drop-shadow(0 0 26px rgb(240 185 121 / .26));
}
.hero-retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18%), linear-gradient(to right, transparent 0%, #000 13%, #000 84%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0%, #000 18%), linear-gradient(to right, transparent 0%, #000 13%, #000 84%, transparent 99%);
  mask-composite: intersect;
}
/* luz morna que integra o retrato à noite */
.hero-luz {
  position: absolute;
  left: -30%; right: -30%;
  top: 6%; bottom: -10%;
  background:
    radial-gradient(closest-side at 50% 42% in oklch, rgb(240 197 142 / .42), rgb(217 154 94 / .14) 55%, rgb(217 154 94 / 0)),
    radial-gradient(closest-side at 62% 64% in oklch, rgb(224 54 76 / .16), rgb(224 54 76 / 0));
  pointer-events: none;
}

/* texto */
.hero-texto {
  position: relative;
  z-index: 3;
  width: min(39rem, 47vw);
  padding: clamp(3rem, 11vh, 8rem) 0 var(--esp-5) var(--margem);
}
.hero-sobre {
  margin: 0 0 var(--esp-3);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.hero-sobre span { color: var(--coracao); }
.hero-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(2.5rem, 4.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.hero-titulo span { display: block; }
.hero-l1 { color: var(--perola-70); font-size: .7em; line-height: 1.15; margin-bottom: .2em; }
.hero-l2 { color: var(--perola); }
.hero-l2 em {
  font-style: normal;
  color: var(--tarde-clara);
  background: linear-gradient(90deg, var(--tarde-clara), var(--rio-peso));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-apoio {
  margin: var(--esp-4) 0 0;
  max-width: 33rem;
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.6;
  color: var(--perola-70);
}
.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-4);
}
.hero-botao {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.6rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklch, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 34px -8px rgb(217 154 94 / .55);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.hero-botao span { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hero-botao:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgb(217 154 94 / .7); }
.hero-botao:hover span { transform: translateX(4px); }
.hero-tel {
  font-size: .98rem;
  color: var(--perola-70);
  text-decoration: none;
  border-bottom: 1px solid rgb(243 237 228 / .3);
  padding-bottom: 2px;
}
.hero-tel:hover { color: var(--perola); border-color: var(--perola); }
.hero-botao:focus-visible, .hero-tel:focus-visible, .hero-nav-link:focus-visible, .hero-marca:focus-visible {
  outline: 2px solid var(--tarde-clara);
  outline-offset: 4px;
}
.hero-prova {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid rgb(243 237 228 / .14);
  font-size: .9rem;
  color: var(--perola-70);
}
.hero-prova p { margin: 0; }
.hero-estrelas { color: var(--tarde-clara); letter-spacing: .12em; font-size: .8rem; }
.hero-nota strong { color: var(--perola); font-weight: 400; }
.hero-registro { letter-spacing: .08em; }

.hero-citacao {
  position: absolute;
  z-index: 3;
  margin: 0;
  left: calc(100% - max(2vw, calc(50vw - 46rem)) - min(90svh, 1180px) * .766 - 2.5rem);
  bottom: 13%;
  max-width: 15rem;
  padding: 1rem 1.2rem 1rem 1.25rem;
  border-left: 2px solid var(--coracao);
  background: rgb(29 14 34 / .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0 14px 14px 0;
}
.hero-citacao p { margin: 0; font-family: var(--serif); font-size: 1.22rem; line-height: 1.25; }
.hero-citacao footer { margin-top: .4rem; font-size: .76rem; letter-spacing: .1em; color: var(--perola-50); }

/* entrada: as coisas chegam desfocadas e ficam nítidas */
.js .hero-sobre, .js .hero-l1, .js .hero-l2, .js .hero-apoio, .js .hero-acoes, .js .hero-prova, .js .hero-citacao {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
  transition: opacity 1.1s ease, filter 1.3s ease, transform 1.3s cubic-bezier(.2,.7,.2,1);
}
.js .hero-retrato { opacity: 0; transform: translateY(18px); transition: opacity 1.6s ease, transform 2s cubic-bezier(.2,.7,.2,1); }
.js .hero-rios { opacity: 0; transition: opacity 1.6s ease; }
.js .hero.entrou .hero-rios { opacity: 1; }
.js .hero.entrou .hero-retrato { opacity: 1; transform: none; }
.js .hero.entrou :is(.hero-sobre, .hero-l1, .hero-l2, .hero-apoio, .hero-acoes, .hero-prova, .hero-citacao) { opacity: 1; filter: none; transform: none; }
.js .hero.entrou .hero-sobre { transition-delay: .15s; }
.js .hero.entrou .hero-l1 { transition-delay: .35s; }
.js .hero.entrou .hero-l2 { transition-delay: .7s; }
.js .hero.entrou .hero-apoio { transition-delay: 1.05s; }
.js .hero.entrou .hero-acoes { transition-delay: 1.25s; }
.js .hero.entrou .hero-prova { transition-delay: 1.4s; }
.js .hero.entrou .hero-citacao { transition-delay: 2.2s; }

/* ---------- notebook baixo ---------- */
@media (max-height: 760px) and (min-width: 761px) {
  .hero-texto { padding-top: 2.2rem; }
  .hero-apoio { margin-top: var(--esp-3); }
  .hero-acoes, .hero-prova { margin-top: var(--esp-3); }
}

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-texto { width: 52vw; }
  .hero-retrato { right: -4vw; height: min(80%, 900px); }
  .hero-citacao { display: none; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-nav { padding-top: 1rem; }
  .hero-marca { font-size: 1.05rem; }
  .hero-marca small { display: none; }
  .hero-nav-link { padding: .45rem .95rem; font-size: .8rem; }
  .hero-retrato {
    position: relative;
    right: auto; bottom: auto;
    height: auto;
    width: min(86vw, 420px);
    margin: .5rem auto 0;
    align-self: center;
  }
  .hero-retrato img {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%), linear-gradient(to right, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 30%), linear-gradient(to right, transparent 0%, #000 12%, #000 86%, transparent 100%);
  }
  .hero-texto {
    width: auto;
    margin-top: -9vw;
    padding: 0 var(--margem) 1.5rem;
  }
  .hero-sobre { font-size: .72rem; letter-spacing: .14em; margin-bottom: 1rem; }
  .hero-titulo { font-size: clamp(2.05rem, 9.6vw, 2.7rem); }
  .hero-l1 { font-size: .62em; }
  .hero-apoio { margin-top: 1.1rem; font-size: 1rem; }
  .hero-acoes { margin-top: 1.4rem; }
  .hero-botao { flex: 1 1 100%; justify-content: center; }
  .hero-tel { margin: 0 auto; }
  .hero-prova { margin-top: 1.4rem; justify-content: center; text-align: center; font-size: .86rem; }
  .hero-citacao {
    position: relative;
    left: auto; bottom: auto;
    max-width: none;
    margin: 0 var(--margem) 2.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-malha { animation: none; }
  .js .hero-sobre, .js .hero-l1, .js .hero-l2, .js .hero-apoio, .js .hero-acoes, .js .hero-prova, .js .hero-citacao,
  .js .hero-retrato, .js .hero-rios {
    opacity: 1; filter: none; transform: none; transition: none;
  }
}

/* tablet: o telefone desce para baixo do botão, longe do retrato (ajuste da montagem) */
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-acoes { flex-direction: column; align-items: flex-start; }
}

/* ===== so ===== */
/* ---------- so · sobre / trajetória (dia no rio) ---------- */
.so {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--secao) var(--margem);
  background: linear-gradient(180deg in oklab, var(--perola), var(--linho));
}
.so-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 82% 12% in oklab, rgb(240 197 142 / .38), rgb(240 197 142 / 0)),
    radial-gradient(closest-side at 10% 70% in oklab, rgb(198 217 174 / .35), rgb(198 217 174 / 0));
  background-size: 70% 70%, 60% 60%;
  background-repeat: no-repeat;
  background-position: 100% 0, 0 80%;
}

.so-topo {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

/* retrato num arco de folha: a cabeça sai do arco */
.so-retrato { position: relative; margin: 0 0 0 calc(var(--margem) * -.35); }
.so-moldura { position: relative; }
.so-halo {
  position: absolute;
  inset: -12% -18% 0 -18%;
  background: radial-gradient(closest-side at 50% 42% in oklab, rgb(240 197 142 / .55), rgb(240 197 142 / 0));
}
.so-arco, .so-fio {
  position: absolute;
  left: 2%; right: 2%; bottom: 0;
  height: 74%;
  border-radius: 999px 999px 0 0;
}
.so-arco {
  background:
    radial-gradient(closest-side at 50% 30% in oklab, rgb(243 237 228 / .55), rgb(243 237 228 / 0)),
    linear-gradient(180deg in oklab, var(--folha), color-mix(in oklab, var(--folha) 55%, var(--areia)));
}
.so-fio {
  left: -2.5%; right: -2.5%;
  height: calc(74% + 4.4%);
  border: 1px solid rgb(122 101 49 / .45);
  border-bottom: 0;
}
.so-retrato img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.so-selo {
  position: absolute;
  z-index: 2;
  right: -1.5rem;
  bottom: 12%;
  margin: 0;
  width: clamp(8.5rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  background: var(--perola);
  box-shadow: 0 18px 40px -22px rgb(31 20 32 / .45), inset 0 0 0 1px rgb(122 101 49 / .35), inset 0 0 0 7px var(--perola), inset 0 0 0 8px rgb(122 101 49 / .2);
}
.so-selo-n {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(3rem, 4.6vw, 4rem);
  line-height: .9;
  color: var(--tarde-funda);
}
.so-selo-t { max-width: 7.5em; margin-top: .3rem; font-size: .9rem; line-height: 1.25; color: var(--tinta-2); }
.so-legenda {
  position: relative;
  margin: 0;
  padding-top: 1rem;
  font-size: 1rem;
  color: var(--tinta-2);
  letter-spacing: .02em;
}
.so-legenda span { color: var(--coracao); }
/* a margem do rio: a linha em que o retrato se apoia corre até a borda */
.so-legenda::before {
  content: "";
  position: absolute;
  top: 0; right: -2.5%;
  width: 100vw;
  height: 1px;
  background: linear-gradient(90deg in oklab, rgb(122 101 49 / 0), rgb(122 101 49 / .45) 40%);
}

/* texto */
.so-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
}
.so-sobre span { color: var(--coracao); }
.so-titulo {
  margin: 0 0 var(--esp-4);
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.so-titulo span { display: block; }
.so-l1 { font-size: .7em; line-height: 1.15; color: var(--tinta-2); margin-bottom: .2em; }
.so-l2 em {
  font-style: normal;
  color: var(--tarde-funda);
  background: linear-gradient(90deg in oklab, var(--tarde-funda), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.so-p {
  margin: 0 0 var(--esp-3);
  max-width: 36rem;
  font-size: var(--t-apoio);
  color: var(--tinta-2);
}
.so-citacao {
  position: relative;
  margin: var(--esp-4) 0 0;
  max-width: 34rem;
  padding: var(--esp-3) 0 0 0;
  border-top: 1px solid rgb(31 20 32 / .12);
}
.so-citacao::before {
  content: "“";
  position: absolute;
  top: -.08em; left: -.04em;
  font-family: var(--serif);
  font-size: 7rem;
  line-height: 1;
  color: var(--tarde);
  opacity: .5;
  pointer-events: none;
}
.so-citacao p {
  position: relative;
  margin: 0 0 .7rem;
  padding-left: 3.2rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--tinta);
}
.so-citacao footer { padding-left: 3.2rem; font-size: 1rem; color: var(--tinta-2); }
.so-citacao footer::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .6rem; border-radius: 50%; background: var(--coracao); vertical-align: .1em; }

/* caminho: o rio numa faixa própria */
.so-caminho {
  position: relative;
  max-width: var(--largura);
  margin: var(--secao) auto 0;
  padding-top: var(--esp-6);
}
.so-caminho::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: calc(var(--secao) * -1);
  left: 50%; width: 100vw; margin-left: -50vw;
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--areia) 55%, var(--linho)), var(--linho) 70%);
  border-top: 1px solid rgb(31 20 32 / .08);
}
.so-caminho-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
}
.so-caminho-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.so-caminho-titulo em { font-style: normal; color: var(--tarde-funda); }
.so-caminho-apoio { margin: 0; max-width: 34rem; font-size: var(--t-apoio); color: var(--tinta-2); }
.so-rio-area { position: relative; }
.so-rio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.so-rio-nascente circle { fill: none; stroke: rgb(122 101 49 / .5); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.so-rio-nascente.so-vivo circle { animation: so-onda 4.5s ease-out infinite; }
.so-rio-nascente circle:nth-child(2) { animation-delay: 1.5s; }
.so-rio-nascente circle:nth-child(3) { animation-delay: 3s; }
@keyframes so-onda { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.so-rio path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.so-rio-guia { stroke: rgb(31 20 32 / .22); stroke-width: 1.2; stroke-dasharray: 1 7; }
.so-rio-agua { stroke: rgb(198 217 174 / .32); stroke-width: 26; }
.so-rio-margem { stroke: rgb(198 217 174 / .95); stroke-width: 9; }
.so-rio-traco { stroke: var(--tarde-funda); stroke-width: 1.8; }

.so-marcos {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: minmax(9rem, auto) 7rem minmax(9rem, auto);
}
.so-marco {
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
}
.so-ponto {
  grid-row: 2;
  align-self: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--perola);
  border: 1.5px solid rgb(31 20 32 / .3);
  transform: translateY(var(--y, 0));
  transition: background .5s, border-color .5s, box-shadow .5s;
}
.so-marco.so-on .so-ponto { background: var(--tarde-funda); border-color: var(--tarde-funda); box-shadow: 0 0 0 5px rgb(240 197 142 / .45); }
.so-marco-hoje .so-ponto { width: 22px; height: 22px; }
.so-marco-hoje.so-on .so-ponto { background: var(--coracao); border-color: var(--coracao); box-shadow: 0 0 0 6px rgb(224 54 76 / .18); animation: so-pulso 2.6s ease-out infinite; }
@keyframes so-pulso {
  0% { box-shadow: 0 0 0 0 rgb(224 54 76 / .45), 0 0 0 6px rgb(224 54 76 / .18); }
  70%, 100% { box-shadow: 0 0 0 18px rgb(224 54 76 / 0), 0 0 0 6px rgb(224 54 76 / .18); }
}
.so-marco-hoje .so-ano { font-size: clamp(2.4rem, 3.2vw, 3rem); }
.so-marco-hoje .so-marco-titulo { font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: 1.35rem; }

.so-marco-texto {
  width: 190%;
  max-width: 17rem;
  text-align: center;
  transition: opacity .7s ease, transform .9s var(--curva);
}
.so-marco:nth-child(odd) .so-marco-texto { grid-row: 1; align-self: end; padding-bottom: 1rem; }
.so-marco:nth-child(even) .so-marco-texto { grid-row: 3; align-self: start; padding-top: 1rem; }
.so-marco:first-child { justify-items: start; }
.so-marco:first-child .so-marco-texto { text-align: left; }
.so-marco:last-child { justify-items: end; }
.so-marco:last-child .so-marco-texto { text-align: right; }
.js .so-marco:not(.so-on) .so-marco-texto { opacity: .25; transform: translateY(6px); }

.so-ano {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--tarde-funda);
  margin-bottom: .35rem;
}
.so-marco-hoje .so-ano { color: var(--magenta); }
.so-marco-titulo {
  margin: 0 0 .3rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--tinta);
}
.so-marco-texto p { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--tinta-2); }

.so-marco:first-child .so-marco-texto, .so-marco:last-child .so-marco-texto { width: 150%; }

/* telas médias e celular: rio vertical à esquerda */
@media (max-width: 1100px) {
  .so-marcos { display: block; padding-left: 3.4rem; }
  .so-marco { display: block; position: relative; padding: 0 0 2.2rem; }
  .so-marcos .so-marco { justify-items: stretch; }
  .so-ponto { position: absolute; left: calc(-3.4rem + 1.1rem); top: .55rem; transform: none; }
  .so-marco-texto, .so-marco:first-child .so-marco-texto, .so-marco:last-child .so-marco-texto { width: auto; max-width: 30rem; text-align: left; padding: 0; }
}
@media (max-width: 980px) {
  .so-topo { grid-template-columns: 1fr; }
  .so-retrato { max-width: 34rem; margin-left: 0; }
  .so-marcos { display: block; padding-left: 3.4rem; }
  .so-marco { display: block; position: relative; padding: 0 0 2.2rem; }
  .so-ponto { position: absolute; left: calc(-3.4rem + 1.1rem); top: .55rem; transform: none; }
  .so-marco-texto, .so-marco:first-child .so-marco-texto, .so-marco:last-child .so-marco-texto { width: auto; max-width: 30rem; text-align: left; padding: 0; }
}
@media (max-width: 760px) {
  .so-texto { display: contents; }
  .so-topo { gap: 0; }
  .so-sobre { order: -2; }
  .so-titulo { order: -1; font-size: clamp(2.05rem, 9vw, 2.6rem); margin-bottom: var(--esp-4); }
  .so-retrato { margin-bottom: var(--esp-5); }
  .so-selo { right: -.4rem; bottom: 6%; width: 7.4rem; }
  .so-selo-n { font-size: 2.7rem; }
  .so-selo-t { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .so-marco:not(.so-on) .so-marco-texto { opacity: 1; transform: none; }
}

/* ===== ri ===== */
/* ---------- os quatro rios: áreas de atuação ---------- */
.ri {
  position: relative;
  isolation: isolate;
  padding: var(--secao) 0 calc(var(--secao) * .8);
  background: linear-gradient(180deg in oklab, var(--acai-0), var(--acai-1) 45%, var(--acai-0));
}

.ri-cabeca {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}
.ri-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.ri-sobre span { color: var(--coracao); }
.ri-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.ri-titulo span { display: block; }
.ri-l1 { color: var(--perola-70); font-size: .7em; line-height: 1.15; margin-bottom: .2em; }
.ri-l2 em {
  font-style: normal;
  color: var(--tarde-clara);
  background: linear-gradient(90deg in oklab, var(--tarde-clara), var(--rio-peso));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ri-intro {
  margin: var(--esp-4) 0 0;
  max-width: 36rem;
  font-size: var(--t-apoio);
  color: var(--perola-70);
}

/* corpo: palco das correntes (fixo na rolagem) + capítulos */
.ri-corpo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  max-width: var(--largura);
  margin: var(--esp-5) auto 0;
  padding: 0 var(--margem);
}
.ri-palco {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100svh;
}
.ri-tela { display: block; width: 100%; height: 100%; }

.ri-capitulos { list-style: none; margin: 0; padding: 0; }
.ri-cap {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--esp-5) 0 var(--esp-5) clamp(1rem, 3vw, 3rem);
  border-left: 1px solid rgb(243 237 228 / .14);
}
.ri-num {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 var(--esp-2);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rio);
}
.ri-num span {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: 0;
}
.ri-h3 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ri-texto {
  margin: var(--esp-3) 0 0;
  max-width: 34rem;
  font-size: var(--t-apoio);
  color: var(--perola-70);
}
.ri-termos {
  margin: var(--esp-3) 0 0;
  font-size: 1rem;
  color: var(--perola);
}
.ri-termos i { font-style: normal; color: var(--rio); padding: 0 .3em; }

/* a foz */
.ri-foz { min-height: 100vh; }
.ri-h3-foz { font-size: var(--t-gigante); line-height: .95; color: var(--perola); }
.ri-sinais {
  list-style: none;
  margin: var(--esp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
}
.ri-sinais li { padding-top: var(--esp-2); border-top: 1px solid rgb(243 237 228 / .14); }
.ri-sinais h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
}
.ri-sinais p { margin: .35rem 0 0; font-size: var(--t-corpo); color: var(--perola-70); }

.ri-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-5); }
.ri-botao {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.6rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklab, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 34px -8px rgb(217 154 94 / .55);
  transition: transform .35s var(--curva), box-shadow .35s;
}
.ri-botao span { transition: transform .35s var(--curva); }
.ri-botao:hover { transform: translateY(-2px); }
.ri-botao:hover span { transform: translateX(4px); }
.ri-nota { margin: 0; font-size: 1rem; color: var(--perola-50); }

/* ---------- celular: o palco vira uma faixa lateral ---------- */
@media (max-width: 760px) {
  .ri-corpo { grid-template-columns: 2.6rem minmax(0, 1fr); margin-top: var(--esp-4); padding-left: .5rem; }
  .ri-cap { min-height: 0; padding: var(--esp-5) 0 var(--esp-5) 1rem; border-left: 0; }
  .ri-foz { min-height: 0; }
  .ri-h3 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .ri-h3-foz { font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .ri-sinais { grid-template-columns: minmax(0, 1fr); }
  .ri-botao { flex: 1 1 100%; justify-content: center; }
}

.ri-cap { transition: border-color .8s ease; }
.ri-cap.ri-ativo { border-left-color: var(--rio); }

/* ===== rodada 1 ===== */
/* cabeça assimétrica: título largo à esquerda, explicação descendo à direita */
.ri-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--esp-4) var(--esp-5);
  align-items: end;
}
.ri-titulo { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.ri-intro { margin: 0; padding-bottom: .6rem; }

/* a palavra do rio ativo, grande, ao pé do palco */
.ri-palco { pointer-events: none; }
.ri-palavras {
  position: absolute;
  left: 0; right: 0; bottom: 7%;
  margin: 0;
  height: 1.2em;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(3.4rem, 6.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.ri-palco { position: sticky; }
.ri-palavra {
  position: absolute;
  left: 0; bottom: 0;
  color: var(--rio);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px);
  transition: opacity .9s ease, filter 1.1s ease, transform 1.2s var(--curva);
}
.ri-palavra.ri-on { opacity: .92; filter: none; transform: none; }

/* número pendurado, grande, na cor do rio */
.ri-num { gap: 1rem; margin-bottom: var(--esp-3); }
.ri-num span {
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.ri-termos { font-size: var(--t-corpo); color: var(--perola); }
.ri-termos i { padding: 0 .45em; }

@media (max-width: 760px) {
  .ri-cabeca { grid-template-columns: minmax(0, 1fr); }
  .ri-titulo { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .ri-palavras { display: none; }
  .ri-corpo { grid-template-columns: 3rem minmax(0, 1fr); padding-left: .25rem; }
  .ri-cap { border-left: 1px solid rgb(243 237 228 / .1); padding-left: 1.1rem; }
  .ri-num span { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ri-palavra { transition: none; }
}

/* ===== rodada 2 ===== */
/* os capítulos descem em degraus, como o rio indo para a foz */
@media (min-width: 761px) {
  .ri-cap[data-rio="1"] { padding-left: clamp(2rem, 6vw, 6.5rem); }
  .ri-cap[data-rio="2"] { padding-left: clamp(1rem, 3vw, 3rem); }
  .ri-cap[data-rio="3"] { padding-left: clamp(2rem, 6vw, 6.5rem); }
}
/* selo discreto das áreas de experiência declaradas */
.ri-exp {
  display: inline-block;
  margin-left: .2rem;
  padding: .28rem .7rem;
  border: 1px solid rgb(207 188 135 / .45);
  border-radius: var(--raio);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ouro);
  vertical-align: middle;
  white-space: nowrap;
}
.ri-num .ri-exp { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; line-height: 1.2; }

/* a foz: lista em registro, linhas grandes, sem cartões */
.ri-h3-foz { font-size: clamp(2.8rem, 5.4vw, 5.2rem); max-width: 12ch; }
.ri-sinais {
  display: block;
  margin-top: var(--esp-5);
  counter-reset: ri-s;
}
.ri-sinais li {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: .4rem var(--esp-4);
  align-items: baseline;
  padding: 1.15rem 0 1.2rem;
  border-top: 1px solid rgb(243 237 228 / .12);
}
.ri-sinais li:last-child { border-bottom: 1px solid rgb(243 237 228 / .12); }
.ri-sinais h4 {
  position: relative;
  padding-left: 1.4rem;
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
}
.ri-sinais h4::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .42rem; height: .42rem;
  border-radius: 50%;
  background: var(--coracao);
  box-shadow: 0 0 10px rgb(224 54 76 / .6);
}
.ri-sinais h4 .ri-exp { margin: .45rem 0 0; display: table; }
.ri-sinais p { margin: 0; }

.ri-citacao {
  margin: var(--esp-5) 0 0;
  max-width: 34rem;
  padding: 1.3rem 1.6rem;
  border-left: 2px solid var(--coracao);
  border-radius: 0 var(--raio-2) var(--raio-2) 0;
  background: rgb(29 14 34 / .62);
  backdrop-filter: blur(10px);
}
.ri-citacao p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.35;
}
.ri-citacao footer { margin-top: .7rem; font-size: 1rem; color: var(--perola-50); }

@media (max-width: 760px) {
  .ri-corpo { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .ri-sinais li { grid-template-columns: minmax(0, 1fr); }
  .ri-h3-foz { font-size: clamp(2.4rem, 11vw, 3rem); }
  .ri-num { flex-wrap: wrap; row-gap: .5rem; }
}

/* ===== co ===== */
/* Como é a consulta — o rio que se alarga (da pergunta ao entendimento) */
.co {
  position: relative;
  overflow: clip;
  padding: var(--secao) var(--margem);
  background: linear-gradient(172deg in oklab, var(--linho), var(--areia));
  color: var(--tinta);
  isolation: isolate;
}
/* luz morna de fim de tarde entrando de viés */
.co-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgb(240 197 142 / .55), transparent) 92% 8% / 70vw 60vw no-repeat,
    radial-gradient(closest-side, rgb(227 166 189 / .18), transparent) 4% 96% / 50vw 40vw no-repeat,
    linear-gradient(115deg, transparent 38%, rgb(255 244 226 / .38) 44%, transparent 52%, transparent 58%, rgb(255 244 226 / .22) 62%, transparent 68%);
}

.co-cabeca, .co-palco, .co-foz, .co-formatos, .co-fecho { max-width: var(--largura); margin-inline: auto; }
.co-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--esp-4) clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.co-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
}
.co-sobre span { color: var(--coracao); }
.co-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.co-titulo span { display: block; }
.co-l1 { font-size: .7em; line-height: 1.15; color: var(--tinta-2); margin-bottom: .1em; }
.co-l2 { font-size: clamp(3.4rem, 8.4vw, 8rem); line-height: .98; letter-spacing: -.02em; }
.co-l2 em {
  font-style: normal;
  color: var(--tarde-funda);
  background: linear-gradient(90deg in oklab, var(--tarde-funda), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.co-apoio {
  margin: 0 0 .9rem;
  max-width: 36rem;
  font-size: var(--t-apoio);
  color: var(--tinta-2);
}

/* ---------- o palco: etapas e falas em volta do rio ---------- */
.co-palco {
  --co-faixa: 9rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) 4rem;
  grid-template-rows: auto var(--co-faixa) auto;
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  margin-top: var(--esp-6);
}
.co-etapas, .co-falas { display: contents; list-style: none; }
.co-rio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.co-etapa, .co-fala { position: relative; padding-left: 1.25rem; margin: 0; }
.co-e1 { grid-area: 1 / 1; align-self: end; }
.co-f1 { grid-area: 3 / 1; align-self: start; }
.co-e2 { grid-area: 3 / 2; align-self: start; }
.co-f2 { grid-area: 1 / 2; align-self: end; }
.co-e3 { grid-area: 1 / 3; align-self: end; }
.co-f3 { grid-area: 3 / 3; align-self: start; }
.co-e4 { grid-area: 3 / 4; align-self: start; }
.co-f4 { grid-area: 1 / 4; align-self: end; }
.co-e1, .co-e3, .co-f2, .co-f4 { padding-bottom: 1.4rem; }
.co-e2, .co-e4, .co-f1, .co-f3 { padding-top: 1.4rem; }
.co-marco { display: none; }

.co-rot {
  margin: 0 0 .5rem;
  font-size: var(--t-sobre);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
}
.co-rot span { color: var(--coracao); }
.co-h3 {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h3);
  line-height: 1.1;
}
.co-txt { margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-2); }
.co-e1 .co-h3 { font-size: calc(var(--t-h3) * .95); }
.co-e2 .co-h3 { font-size: calc(var(--t-h3) * 1.1); }
.co-e3 .co-h3 { font-size: calc(var(--t-h3) * 1.55); color: var(--magenta); }
.co-e4 .co-h3 { font-size: calc(var(--t-h3) * 1.25); }
.co-etapa .co-rot { transition: color .6s ease; }
.co-etapa.co-acesa .co-rot { color: var(--tarde-funda); }
.co-f3 blockquote p { font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.25; }

.co-fala blockquote { margin: 0; position: relative; }
.co-fala blockquote p { position: relative; text-indent: 0; }
.co-fala blockquote p {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: 1.16rem;
  line-height: 1.4;
  color: var(--tinta-2);
}
.co-f3 blockquote p { color: var(--tinta); }
.co-quem { margin: .6rem 0 0; font-size: .95rem; color: var(--tarde-funda); }

/* ---------- a foz: o que fica da consulta ---------- */
.co-foz {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--esp-4) clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-top: var(--esp-5);
  padding: var(--esp-5) 0 0;
}
.co-foz-corpo { text-align: right; }
.co-fieis { padding: 1.4rem 0 .3rem; border-top: 2px solid var(--coracao); }
.co-fieis-n {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .5rem;
  font-family: var(--serif); font-variation-settings: "opsz" 24;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.1;
}
.co-fieis-txt { margin: 0; font-size: var(--t-corpo); color: var(--tinta-2); line-height: 1.5; }
.co-foz::before {   /* o rio se abre em luz aqui */
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  top: -40%;
  width: 90%;
  height: 170%;
  background: radial-gradient(closest-side, rgb(255 246 232 / .9), rgb(240 197 142 / .35) 55%, transparent);
  pointer-events: none;
}
.co-foz-rot {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
}
.co-foz-n { color: var(--magenta); margin-right: .8em; }
.co-foz-palavras {
  margin: 0 0 0 auto;
  max-width: 62rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.co-foz-palavras i { font-style: normal; color: var(--coracao); padding-inline: .15em; }
.co-selo-ponto { width: .45rem; height: .45rem; border-radius: 50%; background: var(--coracao); flex: none; }

/* ---------- dois jeitos de se consultar ---------- */
.co-formatos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--esp-4) clamp(2rem, 5vw, 5rem);
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(31 20 32 / .14);
}
.co-formatos-titulo {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.05;
}
.co-porta-rot {
  margin: 0 0 var(--esp-2);
  font-size: var(--t-sobre);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
}
.co-bairros { list-style: none; margin: 0; padding: 0; }
.co-bairros li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgb(31 20 32 / .12);
}
.co-bairro { font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; }
.co-casa { font-size: 1rem; color: var(--tinta-2); text-align: right; }
.co-tele-passos { list-style: none; margin: 0; padding: 0; counter-reset: co-t; }
.co-tele-passos li {
  position: relative;
  padding: 0 0 1.1rem 2.6rem;
  font-size: var(--t-corpo);
  color: var(--tinta-2);
  counter-increment: co-t;
}
.co-tele-passos li::before {
  content: counter(co-t);
  position: absolute;
  left: 0; top: .05rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--tarde-funda);
  font-size: .9rem;
  color: var(--tarde-funda);
}
.co-tele-passos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .87rem; top: 2rem; bottom: .2rem;
  width: 1px;
  background: rgb(138 79 28 / .3);
}
.co-tele-passos b { font-weight: 400; color: var(--tinta); }
.co-tambem { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--esp-3) 0 0; }
.co-tambem span {
  padding: .5rem 1.1rem;
  border-radius: var(--raio);
  background: rgb(243 237 228 / .7);
  border: 1px solid rgb(31 20 32 / .1);
  font-size: 1rem;
  color: var(--tinta);
}

/* ---------- fecho: a fala do filho e o convite ---------- */
.co-fecho {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: end;
  gap: var(--esp-4) clamp(2rem, 5vw, 5rem);
  margin-top: var(--esp-6);
}
.co-leandro { margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--coracao); }
.co-leandro p { margin: 0; font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.25; }
.co-leandro footer { margin-top: .7rem; font-size: 1rem; color: var(--tarde-funda); }
.co-acao { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.co-botao {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.1rem 1.8rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklab, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px rgb(138 79 28 / .55);
  transition: transform .35s var(--curva), box-shadow .35s;
}
.co-botao span { transition: transform .35s var(--curva); }
.co-botao:hover { transform: translateY(-2px); }
.co-botao:hover span { transform: translateX(4px); }
.co-tel { color: var(--tinta); font-size: 1rem; text-underline-offset: .25em; }

/* ---------- desenho do rio (SVG montado pelo parte.js) ---------- */
.co-rio-corpo { fill: url(#co-grad); }
.co-rio-borda { fill: none; stroke: url(#co-grad-b); stroke-width: 1; }
.co-rio-veio { fill: none; stroke: rgb(255 248 236 / .85); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 3 22; }
.co-anda .co-rio-veio { animation: co-corre 2.6s linear infinite; }
.co-rio-veio:nth-of-type(2) { animation-duration: 3.4s; opacity: .7; }
.co-rio-veio:nth-of-type(3) { animation-duration: 4.2s; opacity: .55; }
@keyframes co-corre { to { stroke-dashoffset: -25; } }
.co-rio-fio { stroke: rgb(31 20 32 / .2); stroke-width: 1; }
.co-rio-marco { fill: var(--linho); stroke: var(--tarde-funda); stroke-width: 1.5; transition: fill .6s ease, r .6s var(--curva); }
.co-rio-marco.co-aceso { fill: var(--coracao); stroke: var(--coracao); }
.co-rio-onda { fill: none; stroke: var(--coracao); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.co-rio-onda.co-aceso { animation: co-onda 1.6s var(--curva) 1 both; }
@keyframes co-onda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(4); } }
.co-rio-halo { fill: url(#co-halo); opacity: 0; transition: opacity 1.4s ease; }
.co-rio-halo.co-aceso { opacity: 1; }
.co-rio-desenho { clip-path: inset(0 calc((1 - var(--co-p, 0)) * 100%) 0 0); }
.co-vertical .co-rio-desenho { clip-path: inset(0 0 calc((1 - var(--co-p, 0)) * 100%) 0); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 981px) {
  .co-palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) 1.5rem; }
  .co-fala blockquote p { font-size: 1.08rem; }
  .co-cabeca { grid-template-columns: 1fr; }
  .co-foz { grid-template-columns: 1fr; }
  .co-foz-corpo { order: -1; }
  .co-formatos { grid-template-columns: 1fr; }
}

/* ---------- celular: o rio desce pela esquerda ---------- */
@media (max-width: 980px) {
  .co-cabeca { grid-template-columns: 1fr; gap: var(--esp-3); }
  .co-l2 { font-size: clamp(3rem, 15vw, 4rem); }
  .co-palco {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding-left: 2.9rem;
    margin-top: var(--esp-5);
  }
  .co-etapa, .co-fala { padding: 0; }
  .co-e1 { order: 1; } .co-f1 { order: 2; }
  .co-e2 { order: 3; } .co-f2 { order: 4; }
  .co-e3 { order: 5; } .co-f3 { order: 6; }
  .co-e4 { order: 7; } .co-f4 { order: 8; }
  .co-etapa:not(.co-e1) { margin-top: 1.2rem; }
  .co-fala { padding-left: 1rem; border-left: 1px solid rgb(31 20 32 / .16); }
  .co-fala blockquote p { font-size: 1.12rem; }
  .co-f3 blockquote p { font-size: 1.45rem; }
  .co-foz { grid-template-columns: 1fr; padding-top: var(--esp-4); }
  .co-foz-corpo { text-align: left; order: -1; }
  .co-foz::before { right: -40%; top: -30%; width: 160%; height: 120%; }
  .co-foz-n { display: block; margin: 0 0 .4rem; }
  .co-foz-palavras { font-size: 1.9rem; }
  .co-foz-palavras span { display: block; }
  .co-foz-palavras i { display: none; }
  .co-formatos { grid-template-columns: 1fr; }
  .co-casa { font-size: .95rem; }
  .co-fecho { grid-template-columns: 1fr; }
  .co-acao { align-items: stretch; }
  .co-botao { justify-content: center; }
  .co-tel { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .co-anda .co-rio-veio { animation: none; }
  .co-rio-desenho { clip-path: none; }
}

/* foz: a frase do selo "Pacientes fiéis" (ajuste da montagem) */
.co-foz-palavras { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.co-foz-palavras span:last-child { color: var(--magenta); }
@media (max-width: 980px) { .co-foz-palavras { font-size: 2.3rem; } }

/* ===== pa ===== */
/* ---------- pa · o que os pacientes dizem ---------- */
.pa {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--secao) 0;
}
.pa-malha {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* manchas com raio próprio (sem background-size: nada de borda reta) */
  background:
    radial-gradient(58rem 40rem at 6% 64% in oklab, rgb(143 4 58 / .42), rgb(143 4 58 / 0)),
    radial-gradient(44rem 22rem at 72% 0% in oklab, rgb(217 154 94 / .22), rgb(217 154 94 / 0)),
    radial-gradient(40rem 30rem at 98% 94% in oklab, rgb(43 23 69 / .95), rgb(43 23 69 / 0)),
    radial-gradient(50rem 30rem at 34% 12% in oklab, rgb(58 26 59 / .85), rgb(58 26 59 / 0)),
    linear-gradient(200deg in oklab, var(--acai-1), var(--acai-0) 75%);
}

/* topo: título + números */
.pa-topo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--esp-5);
  align-items: end;
}
.pa-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.pa-sobre span { color: var(--coracao); }
.pa-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.pa-titulo span { display: block; }
.pa-l1 { font-size: .7em; line-height: 1.15; color: var(--perola-70); margin-bottom: .2em; }
.pa-l2 em {
  font-style: normal;
  color: var(--tarde-clara);
  background: linear-gradient(90deg in oklab, var(--tarde-clara), var(--rio-peso));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pa-numeros {
  display: flex;
  justify-content: flex-end;
}
.pa-num { margin: 0; display: flex; flex-direction: column; padding: 0 var(--esp-4); }
.pa-num + .pa-num { border-left: 1px solid rgb(243 237 228 / .16); }
.pa-num:last-child { padding-right: 0; }
.pa-num-valor {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: var(--t-gigante);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--perola);
}
.pa-num-rotulo { margin-top: .6rem; font-size: 1rem; color: var(--perola-70); }
.pa-estrelas { display: block; color: var(--tarde-clara); letter-spacing: .14em; font-size: .85rem; }

/* rótulos do Doctoralia */
.pa-rotulos {
  max-width: var(--largura);
  margin: var(--esp-5) auto 0;
  padding: 0 var(--margem);
}
.pa-rotulos-titulo {
  margin: 0 0 var(--esp-3);
  padding-top: var(--esp-4);
  border-top: 1px solid rgb(243 237 228 / .14);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
/* os rótulos do Doctoralia como o dado principal: em tipo, do maior ao menor */
.pa-rotulos-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  line-height: 1.1;
}
.pa-rotulo { display: inline-flex; align-items: baseline; }
.pa-rotulo + .pa-rotulo::before {
  content: "";
  width: .32rem; height: .32rem; border-radius: 50%;
  background: var(--coracao);
  margin: 0 clamp(.9rem, 2vw, 1.6rem);
  align-self: center;
}
.pa-rotulo-1 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  letter-spacing: -.012em;
  background: linear-gradient(90deg in oklab, var(--tarde-clara), var(--rio-peso));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--tarde-clara);
}
.pa-rotulo-1 { flex-basis: 100%; margin-bottom: .15em; }
.pa-rotulo-2::before { display: none; }
.pa-rotulo-2 { font-size: clamp(1.45rem, 2.3vw, 2.1rem); color: var(--perola); }
.pa-rotulo-3 { font-size: clamp(1.45rem, 2.3vw, 2.1rem); color: var(--perola-70); }
.pa-selo { margin: var(--esp-3) 0 0; display: flex; align-items: center; gap: .6rem; color: var(--perola-70); font-size: 1rem; }
.pa-selo-ponto { width: .45rem; height: .45rem; border-radius: 50%; background: var(--coracao); flex: none; }

/* a correnteza */
.pa-correnteza {
  margin-top: var(--esp-6);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  outline-offset: -4px;
  position: relative;
  isolation: isolate;
}
.pa-rios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.pa-faixa {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pa-pressao { --pa-cor: var(--rio-pressao); }
.pa-colesterol { --pa-cor: var(--rio-colesterol); }
.pa-glicose { --pa-cor: var(--rio-glicose); }
.pa-peso { --pa-cor: var(--rio-peso); }
.pa-trilho { display: flex; width: max-content; }
.pa-conjunto { display: flex; align-items: baseline; }
.pa-fala {
  margin: 0;
  padding-right: 4rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  white-space: nowrap;
}
.pa-fala::after {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--coracao);
  margin-left: 2rem;
  align-self: center;
}
.pa-fala blockquote { margin: 0; }
.pa-fala p {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  line-height: 1.3;
  /* a cor do rio um pouco mergulhada na noite, para a palavra acesa sobressair */
  color: color-mix(in oklab, var(--pa-cor) 74%, var(--acai-0));
}
.pa-fala figcaption { font-size: 1rem; color: var(--perola-70); letter-spacing: .02em; }
.pa-chave {
  background: none;
  color: var(--tarde-clara);
  text-decoration: underline;
  text-decoration-color: rgb(240 197 142 / .55);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-shadow: 0 0 22px rgb(240 197 142 / .35);
}
.pa-atento { font-weight: inherit; color: var(--perola); }

/* movimento */
.pa-trilho { animation: pa-corre var(--pa-dur, 60s) linear infinite; }
.pa-faixa[data-sentido="dir"] .pa-trilho { animation-direction: reverse; }
@keyframes pa-corre { from { transform: translateX(0); } to { transform: translateX(calc(var(--pa-w, 50%) * -1)); } }
.pa-correnteza:hover .pa-trilho,
.pa-correnteza:focus-within .pa-trilho,
.pa.pa-fora .pa-trilho { animation-play-state: paused; }

/* destaque fixo */
.pa-destaque {
  position: relative;
  max-width: var(--largura);
  margin: var(--esp-4) auto;
  padding: var(--esp-3) var(--margem);
  text-align: center;
}
/* o remanso: a frase fixa pousa numa luz morna, entre as correntes */
.pa-destaque::before {
  content: "";
  position: absolute;
  inset: -20% 0;
  z-index: -1;
  background:
    radial-gradient(closest-side at 50% 55% in oklab, rgb(217 154 94 / .2), rgb(217 154 94 / 0)),
    radial-gradient(closest-side at 50% 50% in oklab, rgb(18 9 20 / .9), rgb(18 9 20 / 0));
  pointer-events: none;
}
.pa-destaque blockquote { margin: 0; }
.pa-destaque p {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.pa-destaque-l1 { display: block; font-size: .5em; color: var(--perola-70); margin-bottom: .3em; }
.pa-destaque-l2 { color: var(--perola); }
.pa-destaque figcaption { margin-top: var(--esp-3); font-size: 1rem; color: var(--perola-70); letter-spacing: .06em; }

/* pé */
.pa-pe {
  max-width: var(--largura);
  margin: var(--esp-5) auto 0;
  padding: 0 var(--margem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  align-items: center;
}
.pa-link {
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--tarde-clara);
  padding-bottom: 3px;
  color: var(--tarde-clara);
}
.pa-link:hover { color: var(--perola); border-color: var(--perola); }
.pa-pausa {
  font: inherit;
  font-size: .95rem;
  color: var(--perola-70);
  background: none;
  border: 1px solid rgb(243 237 228 / .24);
  border-radius: var(--raio);
  padding: .5rem 1.1rem;
  cursor: pointer;
}
.pa-pausa:hover { color: var(--perola); border-color: rgb(243 237 228 / .5); }

/* parado (botão ou movimento reduzido): as falas viram parágrafos legíveis */
.pa.pa-parado .pa-trilho { animation: none; width: auto; transform: none; }
.pa.pa-parado .pa-faixa { -webkit-mask-image: none; mask-image: none; padding: 0 var(--margem); max-width: var(--largura); margin: 0 auto; width: 100%; }
.pa.pa-parado .pa-conjunto { flex-wrap: wrap; gap: var(--esp-3) var(--esp-5); }
.pa.pa-parado .pa-conjunto[aria-hidden] { display: none; }
.pa.pa-parado .pa-fala { white-space: normal; flex-direction: column; gap: .4rem; padding: 0; flex: 1 1 22rem; }
.pa.pa-parado .pa-fala::after { display: none; }
.pa.pa-parado .pa-fala p { font-size: clamp(1.3rem, 2vw, 1.8rem); }

@media (prefers-reduced-motion: reduce) {
  .pa-trilho { animation: none; width: auto; }
  .pa-faixa { -webkit-mask-image: none; mask-image: none; padding: 0 var(--margem); max-width: var(--largura); margin: 0 auto; width: 100%; }
  .pa-conjunto { flex-wrap: wrap; gap: var(--esp-3) var(--esp-5); }
  .pa-conjunto[aria-hidden] { display: none; }
  .pa-fala { white-space: normal; flex-direction: column; gap: .4rem; padding: 0; flex: 1 1 22rem; }
  .pa-fala::after { display: none; }
  .pa-fala p { font-size: clamp(1.3rem, 2vw, 1.8rem); }
  .pa-pausa { display: none; }
}

/* celular */
@media (max-width: 760px) {
  .pa-sobre { font-size: .72rem; letter-spacing: .14em; }
  .pa-topo { grid-template-columns: 1fr; gap: var(--esp-4); }
  .pa-numeros { justify-content: flex-start; }
  .pa-num:first-child { padding-left: 0; }
  .pa-rotulos-lista { flex-direction: column; align-items: flex-start; }
  .pa-rotulo + .pa-rotulo::before { display: block; margin: 0 .8rem 0 0; }
  .pa-rotulo-1 { font-size: clamp(2rem, 9.5vw, 2.6rem); flex-basis: auto; }
  .pa-rotulo-2, .pa-rotulo-3 { font-size: 1.4rem; }
  .pa-num-valor { font-size: clamp(3.6rem, 18vw, 5rem); }
  .pa-fala p { font-size: 1.5rem; }
  .pa-fala { padding-right: 2.5rem; }
  .pa-fala::after { margin-left: 1.2rem; }
  .pa-fala figcaption { font-size: .95rem; }
  .pa-correnteza { margin-top: var(--esp-5); gap: var(--esp-2); }
}

/* ===== on ===== */
/* ===== Onde atende — o mapa real de Belém e o caminho de luz entre os três consultórios ===== */
.on {
  position: relative;
  padding: 0 0 var(--secao);
  overflow-x: clip;
  background: var(--perola);
}

/* ---------- cabeça ---------- */
.on-cabeca {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--secao) var(--margem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--esp-3) var(--esp-6);
  align-items: end;
}
.on-sobre { grid-column: 1 / -1; }

/* ---------- palco: o mapa ocupa a largura toda; os endereços são a legenda sobre ele ---------- */
.on-palco {
  position: relative;
  height: clamp(780px, 62vw, 960px);
  margin-top: var(--esp-4);
}
.on-mapa {
  position: absolute;
  inset: 0;
  margin: 0;
}
.on-svg {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
}
.on-osm {
  position: absolute;
  left: var(--margem);
  bottom: .9rem;
  font-size: .875rem;
  color: var(--tinta-2);
  white-space: nowrap;
}
.on-osm a { color: inherit; text-underline-offset: .2em; }

.on-agua-rot text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 9px;
  letter-spacing: .14em;
  fill: var(--folha-funda);
  opacity: .62;
}

/* vias: leito, fio e partículas (as partículas são criadas pelo parte.js) */
.on-via { fill: none; stroke: var(--tarde-funda); stroke-opacity: .32; stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; }
.on-leito { fill: none; stroke: var(--tarde); stroke-opacity: .22; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.on-via-centro { stroke-opacity: .55; stroke-width: .9; }
.on-part { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; opacity: 0; transition: opacity 1.2s ease 1.6s; }
.on-chegou .on-part { opacity: .95; }
.on-part-pressao { stroke: var(--rio-pressao-f); stroke-dasharray: 2.2 13; }
.on-part-colesterol { stroke: var(--rio-colesterol-f); stroke-dasharray: 1.6 10.4; }
.on-part-glicose { stroke: var(--rio-glicose-f); stroke-dasharray: 2.6 15.4; }
.on-part-peso { stroke: var(--rio-peso-f); stroke-dasharray: 1.8 12.2; }
.on-anda .on-part-pressao { animation: on-corre-a 3.1s linear infinite; }
.on-anda .on-part-colesterol { animation: on-corre-b 2.7s linear infinite; }
.on-anda .on-part-glicose { animation: on-corre-c 3.6s linear infinite; }
.on-anda .on-part-peso { animation: on-corre-d 3.3s linear infinite; }
@keyframes on-corre-a { to { stroke-dashoffset: -15.2; } }
@keyframes on-corre-b { to { stroke-dashoffset: -12; } }
@keyframes on-corre-c { to { stroke-dashoffset: -18; } }
@keyframes on-corre-d { to { stroke-dashoffset: -14; } }

/* anel da teleconsulta */
.on-tele-anel circle { fill: none; stroke: var(--magenta); stroke-width: .8; stroke-dasharray: 2 4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .6s ease, transform 1.2s var(--curva); }
.on-tele .on-tele-anel circle { opacity: .6; transform: none; }

/* marcos */
.on-marco circle { transform-box: fill-box; transform-origin: center; }
.on-halo { fill: var(--coracao); opacity: 0; transform: scale(.5); transition: opacity .5s ease, transform .8s var(--curva); }
.on-anel { fill: rgb(243 237 228 / .85); stroke: var(--tinta); stroke-width: .9; transition: stroke .4s ease, transform .6s var(--curva); }
.on-ponto { fill: var(--tinta); transition: fill .4s ease; }
.on-rot { font-family: var(--serif); font-size: 8.5px; fill: var(--tinta); paint-order: stroke; stroke: var(--perola); stroke-width: 3px; stroke-linejoin: round; transition: fill .4s ease; }
.on-rot-n { font-family: var(--sans); font-size: 6px; fill: var(--tarde-funda); }
.on-marco.on-ativo .on-halo { opacity: .16; transform: none; }
.on-marco.on-ativo .on-anel { stroke: var(--coracao); transform: scale(1.18); }
.on-marco.on-ativo .on-ponto { fill: var(--coracao); }
.on-marco.on-ativo .on-rot { fill: var(--magenta); }

/* ---------- legenda ---------- */
.on-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro-fundo);
}
.on-sobre span { color: var(--coracao); }
.on-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.on-l1 { display: block; font-size: .56em; line-height: 1.15; color: var(--tinta-2); margin-bottom: .3em; }
.on-l2 { display: block; }
.on-titulo em {
  font-style: normal;
  color: var(--tarde-funda);
  background: linear-gradient(90deg in oklab, var(--tarde-funda), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.on-apoio { margin: 0 0 .4rem; max-width: 34rem; font-size: var(--t-apoio); color: var(--tinta-2); }

.on-lugares { list-style: none; margin: 0; padding: 0; }
.on-lugar {
  position: absolute;
  z-index: 2;
  width: min(24rem, 27vw);
  padding: var(--esp-3) 0 0 3.4rem;
  border-top: 1px solid rgb(31 20 32 / .16);
  isolation: isolate;
}
.on-lugar[data-k="1"] { left: var(--margem); top: 9%; }
.on-lugar[data-k="4"] { left: var(--margem); bottom: 10%; }
.on-lugar[data-k="2"] { right: var(--margem); top: 9%; }
.on-lugar[data-k="3"] { right: var(--margem); bottom: 10%; }
.on-lugar::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 2px;
  background: var(--coracao);
  transition: width .7s var(--curva);
}
.on-lugar.on-ativo::before { width: 3.4rem; }
.on-num {
  position: absolute;
  left: 0; top: var(--esp-3);
  margin: 0;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border: 1px solid rgb(31 20 32 / .3);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--tarde-funda);
  transition: border-color .4s, color .4s, background-color .4s;
}
.on-lugar.on-ativo .on-num { border-color: var(--coracao); color: var(--magenta); background: rgb(224 54 76 / .08); }
.on-h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.75rem, 2.3vw, 2.25rem);
  line-height: 1.05;
}
.on-casa { display: block; margin-top: .35rem; font-family: var(--sans); font-size: 1rem; letter-spacing: .02em; color: var(--tarde-funda); }
.on-end { margin: var(--esp-2) 0 0; max-width: 30rem; font-size: var(--t-corpo); color: var(--tinta); }
.on-info { margin: .5rem 0 0; font-size: var(--t-corpo); color: var(--tinta-2); }
.on-info span { color: var(--coracao); padding: 0 .2em; }
.on-info a { color: var(--tinta); text-underline-offset: .22em; }
.on-acoes { margin: var(--esp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.on-botao {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.6rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklab, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px rgb(138 79 28 / .55);
  transition: transform .35s var(--curva);
}
.on-botao span { transition: transform .35s var(--curva); }
.on-botao:hover { transform: translateY(-2px); }
.on-botao:hover span { transform: translateX(4px); }
.on-link { color: var(--tinta); font-size: 1.05rem; text-decoration-color: var(--tarde); text-underline-offset: .28em; }
.on-link:hover { color: var(--magenta); }

/* ---------- convênios ---------- */
.on-convenios {
  max-width: var(--largura);
  margin: var(--esp-6) auto 0;
  padding: 0 var(--margem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: var(--esp-5);
}
.on-conv-titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.1; }
.on-aviso { margin: var(--esp-2) 0 0; font-size: var(--t-corpo); color: var(--tinta-2); }
.on-grupo + .on-grupo { margin-top: var(--esp-4); }
.on-grupo-rot { margin: 0 0 .6rem; font-size: var(--t-sobre); letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-fundo); }
.on-grupo-rot b { font-weight: 400; color: var(--magenta); margin-right: .4em; }
.on-nomes { list-style: none; margin: 0; padding: 0; font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.45; color: var(--tinta); }
.on-nomes li { display: inline; }
.on-nomes li:not(:last-child)::after { content: "·"; color: var(--coracao); padding: 0 .45em; }

/* ---------- celular ---------- */
@media (max-width: 1179px) {
  .on-palco { height: auto; }
  .on-mapa { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
  .on-lugares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--esp-5);
    max-width: var(--largura);
    margin: var(--esp-2) auto 0;
    padding: 0 var(--margem);
  }
  .on-lugar { position: relative; inset: auto !important; width: auto; padding-bottom: var(--esp-4); }
}
@media (max-width: 760px) {
  .on-cabeca { grid-template-columns: minmax(0, 1fr); }
  .on-mapa { aspect-ratio: 1 / 1; }
  .on-svg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%); }
  .on-osm { bottom: .8rem; }
  .on-lugares { grid-template-columns: minmax(0, 1fr); }
  .on-convenios { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); margin-top: var(--esp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .on-anda .on-part { animation: none; }
}

/* fios-guia entre o marco e a legenda */
.on-guia { fill: none; stroke: var(--tinta); stroke-opacity: .32; stroke-width: .6; stroke-dasharray: 1.5 2.5; transition: stroke .4s ease, stroke-opacity .4s ease; }
.on-guia.on-ativo { stroke: var(--coracao); stroke-opacity: .9; stroke-dasharray: none; }

/* chegada: as correntes saem da água e chegam aos consultórios */
.js .on-via, .js .on-leito { transition: stroke-dashoffset 2.6s var(--curva); }
.on-brilho { opacity: 0; transition: opacity 1.4s ease 1.2s; }
.on-chegou .on-brilho, .on:not(.on-js) .on-brilho { opacity: 1; }
@media (min-width: 1180px) { .on-rot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .on-part { opacity: .95; }
  .on-brilho { opacity: 1; }
}

/* ===== pf ===== */
/* ---------- perguntas frequentes: a noite mais suave (ameixa/violeta com luz de tarde) ---------- */
.pf {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: var(--secao) var(--margem);
  background: var(--ameixa);
  interpolate-size: allow-keywords;
}
.pf-malha {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 45% at 88% 4% in oklab, rgb(217 154 94 / .34), rgb(217 154 94 / 0)),
    radial-gradient(45% 40% at 6% 34% in oklab, rgb(143 4 58 / .2), rgb(143 4 58 / 0)),
    radial-gradient(70% 45% at 30% 100% in oklab, rgb(43 23 69 / .95), rgb(43 23 69 / 0)),
    linear-gradient(172deg in oklab, var(--ameixa), var(--violeta) 62%, var(--acai-1));
}

.pf-grade {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.pf-cabeca { position: sticky; top: 12vh; }
.pf-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.pf-sobre span { color: var(--coracao); }
.pf-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.pf-titulo span { display: block; }
.pf-l1 { color: var(--perola-70); font-size: .7em; line-height: 1.15; margin-bottom: .2em; }
.pf-l2 em {
  font-style: normal;
  color: var(--tarde-clara);
  background: linear-gradient(90deg in oklab, var(--tarde-clara), var(--rio-peso));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-contato { margin: var(--esp-4) 0 0; font-size: var(--t-apoio); color: var(--perola-70); }
.pf-contato a { color: var(--tarde-clara); text-underline-offset: .25em; white-space: nowrap; }
.pf-apoio {
  margin: var(--esp-4) 0 0;
  max-width: 30rem;
  font-size: var(--t-apoio);
  color: var(--perola-70);
}

/* ---------- o rio-mãe e os afluentes ---------- */
.pf-lista { position: relative; --pf-tronco: 3.25rem; --pf-qs: clamp(1.45rem, 2.3vw, 2.15rem); --pf-pad: 1.7rem; }
.pf-lista::before { /* o rio-mãe: nasce na luz de tarde e corre até o coração */
  content: "";
  position: absolute;
  left: 11px;
  top: -2.5rem;
  bottom: 1.4rem;
  width: 1px;
  background: linear-gradient(180deg in oklab, rgb(240 197 142 / 0), rgb(240 197 142 / .7) 8%, rgb(243 237 228 / .22) 45%, rgb(224 54 76 / .55));
  box-shadow: 0 0 10px rgb(240 197 142 / .18);
}
.pf-foz { /* a foz: o coraçãozinho bordado */
  position: absolute;
  left: 7.5px;
  bottom: .5rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coracao);
  box-shadow: 0 0 0 4px rgb(224 54 76 / .14), 0 0 14px rgb(224 54 76 / .7);
}
.pf-item::before { /* luz de tarde sobre a pergunta aberta */
  content: "";
  position: absolute;
  inset: -1rem -2rem -1rem calc(var(--pf-tronco) - 3rem);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(52% 46% at 22% 50% in oklab, color-mix(in oklab, var(--pf-cor) 13%, transparent), transparent);
  opacity: 0;
  transition: opacity .8s ease;
}
.pf-item[open]::before { opacity: 1; }
.pf-lista:has(.pf-item[open]) .pf-item:not([open]) .pf-q { color: rgb(243 237 228 / .78); }
.pf-lista:has(.pf-item[open]) .pf-item:not([open]) .pf-pergunta:hover .pf-q { color: var(--tarde-clara); }
.pf-marcador {
  margin: var(--esp-5) 0 0;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  line-height: .8;
}
.pf-marcador-n {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: var(--t-gigante);
  letter-spacing: -.03em;
  background: linear-gradient(160deg in oklab, var(--pf-atual, var(--coracao)), color-mix(in oklab, var(--pf-atual, var(--coracao)) 25%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--tarde-clara);
}
.pf-marcador.pf-troca .pf-marcador-n { animation: pf-chega .9s var(--curva) both; }
.pf-marcador-de { padding-bottom: .9rem; font-size: var(--t-sobre); letter-spacing: .18em; text-transform: uppercase; color: var(--perola-50); }
.pf-item { position: relative; }
.pf-item + .pf-item .pf-pergunta { border-top: 1px solid rgb(243 237 228 / .12); }
.pf-pergunta {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  margin-left: var(--pf-tronco);
  padding: var(--pf-pad) 0;
}
.pf-pergunta::-webkit-details-marker { display: none; }
.pf-pergunta::before { /* o ponto no rio-mãe */
  content: "";
  position: absolute;
  left: calc(-1 * var(--pf-tronco) + 6px);
  top: calc(var(--pf-pad) + var(--pf-qs) * .58 - 5.5px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ameixa);
  border: 1.5px solid var(--pf-cor);
  transition: background .4s, box-shadow .4s;
}
.pf-item[open] > .pf-pergunta::before {
  background: var(--pf-cor);
  box-shadow: 0 0 0 5px rgb(243 237 228 / .06), 0 0 16px var(--pf-cor);
}
.pf-num {
  padding-top: .6rem;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--perola-50);
}
.pf-q {
  font-family: var(--serif);
  font-variation-settings: "opsz" 24;
  font-size: var(--pf-qs);
  line-height: 1.16;
  letter-spacing: -.008em;
  text-wrap: balance;
  color: var(--perola);
  transition: color .3s;
}
.pf-pergunta:hover .pf-q { color: var(--tarde-clara); }
.pf-pergunta:focus-visible { outline-offset: 2px; border-radius: 4px; }
.pf-sinal {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: -.1rem;
  border-radius: 50%;
  border: 1px solid rgb(243 237 228 / .26);
  transition: transform .5s var(--curva), border-color .4s;
}
.pf-sinal::before, .pf-sinal::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: .9rem; height: 1.5px;
  margin: -.75px 0 0 -.45rem;
  background: var(--perola);
}
.pf-sinal::after { transform: rotate(90deg); }
.pf-item[open] .pf-sinal { transform: rotate(45deg); border-color: var(--pf-cor); }

.pf-resposta { position: relative; padding: 0 0 2.4rem calc(var(--pf-tronco) + 2rem + 1.25rem); }
.pf-afluente {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--pf-cor);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pf-afluente path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pf-afluente circle { fill: var(--pf-cor); stroke: none; opacity: 0; }
.pf-item-tres .pf-f1 { stroke: var(--rio-pressao); }
.pf-item-tres .pf-f2 { stroke: var(--rio-colesterol); }
.pf-item-tres .pf-f3 { stroke: var(--rio-glicose); }
.pf-item[open] .pf-afluente path { animation: pf-desenha 1.2s var(--curva) .05s both; }
.pf-item[open] .pf-afluente .pf-f2 { animation-delay: .14s; }
.pf-item[open] .pf-afluente .pf-f3 { animation-delay: .23s; }
.pf-item[open] .pf-afluente circle { animation: pf-acende .5s ease 1s both; }
@keyframes pf-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pf-acende { from { opacity: 0; } to { opacity: 1; } }

.pf-texto { max-width: 36rem; padding-top: .3rem; }
.pf-item[open] .pf-texto { animation: pf-chega 1s var(--curva) .15s both; }
@keyframes pf-chega {
  from { opacity: 0; filter: blur(6px); transform: translateY(8px); }
  to { opacity: 1; filter: none; transform: none; }
}
.pf-texto p { margin: 0 0 1rem; font-size: var(--t-apoio); line-height: 1.62; color: rgb(243 237 228 / .82); }
.pf-lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45em;
  line-height: 1;
  color: var(--pf-cor);
  margin-right: .15em;
}
.pf-texto p:last-child { margin-bottom: 0; }
.pf-link {
  display: inline-flex; gap: .5rem;
  color: var(--tarde-clara);
  text-underline-offset: .25em;
}
.pf-link span { transition: transform .35s var(--curva); }
.pf-link:hover span { transform: translateX(4px); }
.pf-citacao {
  margin: 1.2rem 0 0;
  padding: .2rem 0 .2rem 1.25rem;
  border-left: 2px solid var(--pf-cor);
}
.pf-texto .pf-citacao p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  color: var(--perola);
  margin: 0;
}
.pf-citacao footer { margin-top: .6rem; font-size: .9rem; color: var(--perola-70); }
.pf-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.5rem; }
.pf-botao {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.6rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklab, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 10px 34px -8px rgb(217 154 94 / .5);
  transition: transform .35s var(--curva), box-shadow .35s;
}
.pf-botao span { transition: transform .35s var(--curva); }
.pf-botao:hover { transform: translateY(-2px); }
.pf-botao:hover span { transform: translateX(4px); }
.pf-tel { color: var(--perola); text-underline-offset: .25em; }

/* abertura suave onde o navegador permite */
.pf-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .7s var(--curva), content-visibility .7s allow-discrete;
}
.pf-item[open]::details-content { block-size: auto; }

@media (max-width: 900px) {
  .pf-grade { grid-template-columns: minmax(0, 1fr); }
  .pf-cabeca { position: static; }
  .pf-marcador { display: none; }
}
@media (max-width: 560px) {
  .pf-lista { --pf-tronco: 2.1rem; --pf-qs: clamp(1.32rem, 5.8vw, 1.55rem); --pf-pad: 1.35rem; }
  .pf-pergunta { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "q s"; gap: .35rem .9rem; }
  .pf-num { grid-area: n; padding-top: 0; }
  .pf-q { grid-area: q; }
  .pf-sinal { grid-area: s; width: 2.3rem; height: 2.3rem; margin-top: .9rem; }
  .pf-pergunta::before { top: calc(var(--pf-pad) + 1.6rem + var(--pf-qs) * .58 - 5.5px); }
  .pf-resposta { padding-left: var(--pf-tronco); }
  .pf-acoes .pf-botao { flex: 1 1 100%; justify-content: center; }
}

/* ===== fe ===== */
/* ---------- fecho + rodapé ---------- */
.fe { position: relative; isolation: isolate; overflow: clip; }

.fe-convite {
  position: relative;
  min-height: max(min(100svh, 1000px), 680px);
  display: flex;
  align-items: center;
  padding: var(--secao) max(var(--margem), calc((100% - var(--largura)) / 2));
  overflow: clip;
  isolation: isolate;
}
.fe-malha {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(closest-side at 78% 40% in oklab, rgb(143 4 58 / .22), rgb(143 4 58 / 0)),
    radial-gradient(closest-side at 12% 15% in oklab, rgb(58 26 59 / .95), rgb(58 26 59 / 0)),
    radial-gradient(closest-side at 90% 90% in oklab, rgb(43 23 69 / .9), rgb(43 23 69 / 0)),
    linear-gradient(180deg in oklab, var(--acai-1), var(--acai-0));
}
.fe-rios {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
/* a luz morna mora onde os rios deságuam (posição medida no JS) */
.fe-halo {
  position: absolute; z-index: -2; pointer-events: none;
  left: var(--fe-x, 30%); top: var(--fe-y, 70%);
  width: min(70vw, 900px); aspect-ratio: 1.4; translate: -50% -50%;
  background:
    radial-gradient(closest-side in oklab, rgb(240 197 142 / .26), rgb(217 154 94 / .1) 45%, rgb(217 154 94 / 0)),
    radial-gradient(closest-side in oklab, rgb(224 54 76 / .14), rgb(224 54 76 / 0) 40%);
}

.fe-texto { position: relative; width: min(48rem, 58%); }
.fe-sobre {
  margin: 0 0 var(--esp-3);
  font-size: var(--t-sobre);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ouro);
}
.fe-sobre span { color: var(--coracao); }
.fe-titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.fe-titulo span { display: block; }
.fe-l1 i { font-style: normal; }
.fe-w1 { color: var(--rio-pressao); } .fe-w2 { color: var(--rio-colesterol); } .fe-w3 { color: var(--rio-glicose); } .fe-w4 { color: var(--rio-peso); }
.fe-l1 { color: var(--perola-70); font-size: .5em; line-height: 1.15; margin-bottom: .35em; }
.fe-l2 em {
  font-style: normal;
  color: var(--tarde-clara);
  background: linear-gradient(90deg in oklab, var(--tarde-clara), var(--rio-peso));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fe-apoio { margin: var(--esp-4) 0 0; max-width: 34rem; font-size: var(--t-apoio); color: var(--perola-70); }

.fe-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-5); }
.fe-botao {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 1.9rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg in oklab, var(--tarde-clara), var(--tarde));
  color: var(--acai-0);
  font-size: 1.1rem;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 34px -8px rgb(217 154 94 / .55);
  transition: transform .35s var(--curva), box-shadow .35s;
}
.fe-botao span { transition: transform .35s var(--curva); }
.fe-botao:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgb(217 154 94 / .7); }
.fe-botao:hover span { transform: translateX(4px); }
.fe-coracao {
  position: relative;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--coracao);
  box-shadow: 0 0 16px rgb(224 54 76 / .85);
}
.fe-coracao::after {
  content: ""; position: absolute; inset: -.55rem;
  border: 1px solid rgb(224 54 76 / .6); border-radius: 50%;
  animation: fe-pulso 3.4s var(--curva) infinite;
}
@keyframes fe-pulso {
  0% { transform: scale(.4); opacity: .9; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}
.fe-ligue { margin: var(--esp-3) 0 0; font-size: var(--t-apoio); color: var(--perola-50); }
.fe-tel { color: var(--perola); text-decoration: none; border-bottom: 1px solid rgb(243 237 228 / .3); padding-bottom: 2px; }
.fe-tel:hover { color: var(--perola); border-color: var(--perola); }

/* rodapé */
.fe-rodape {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.9fr) minmax(0, .8fr) minmax(0, .8fr);
  gap: var(--esp-5) var(--esp-5);
  padding: var(--esp-3) max(var(--margem), calc((100% - var(--largura)) / 2)) var(--esp-4);
  background: linear-gradient(180deg in oklab, var(--acai-0), rgb(12 6 14));
  font-size: 1rem;
  line-height: 1.55;
  color: var(--perola-70);
}
.fe-rodape::before {
  content: ""; grid-column: 1 / -1; height: 1px; margin-bottom: var(--esp-1);
  background: linear-gradient(90deg in oklab, var(--coracao), rgb(207 188 135 / .35) 18%, rgb(243 237 228 / .1));
}
.fe-rodape p { margin: 0; }
.fe-nome { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-variation-settings: "opsz" 24; font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1.1; white-space: nowrap; color: var(--perola); }
.fe-ponto { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--coracao); box-shadow: 0 0 10px rgb(224 54 76 / .6); }
.fe-esp { margin-top: .35rem !important; color: var(--ouro); letter-spacing: .04em; }
.fe-completo { margin-top: var(--esp-3) !important; color: var(--perola-50); }
.fe-registro { margin-top: .2rem !important; letter-spacing: .08em; color: var(--perola); }
.fe-rotulo { margin: 0 0 var(--esp-3); font-family: var(--sans); font-weight: 400; font-size: var(--t-sobre); letter-spacing: .18em; text-transform: uppercase; color: var(--ouro); }
.fe-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.fe-enderecos li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgb(243 237 228 / .08); }
.fe-enderecos li:last-child { border-bottom: 0; padding-bottom: 0; }
.fe-enderecos strong { font-weight: 400; color: var(--perola); }
.fe-links a { text-decoration: none; border-bottom: 1px solid rgb(243 237 228 / .22); transition: color .25s, border-color .25s; }
.fe-links a:hover { color: var(--perola); border-color: var(--tarde-clara); }
.fe-base {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-2) var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid rgb(243 237 228 / .1);
  color: var(--perola-50);
}
.fe-selo { color: var(--perola-70); }
.fe-selo a { color: var(--tarde-clara); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .25s, text-decoration-color .25s; }
.fe-selo a:hover { color: var(--perola); text-decoration-color: var(--coracao); }

@media (max-width: 1100px) {
  .fe-rodape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fe-marca, .fe-rodape > .fe-coluna:nth-of-type(2) { grid-column: 1 / -1; }
  .fe-texto { width: min(44rem, 70%); }
}
@media (max-width: 760px) {
  .fe-convite { min-height: 0; align-items: flex-start; padding: var(--esp-6) var(--margem) 14rem; }
  .fe-halo { width: 150vw; }
  .fe-texto { width: 100%; }
  .fe-titulo { font-size: clamp(2.2rem, 10.4vw, 2.9rem); }
  .fe-l1 { font-size: .56em; }
  .fe-apoio { margin-top: var(--esp-3); }
  .fe-acoes { margin-top: var(--esp-4); flex-wrap: nowrap; gap: 1rem; }
  .fe-botao { flex: 0 1 auto; justify-content: center; padding: 1.15rem 1.7rem; min-height: 3.6rem; }
  .fe-rodape { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); padding-top: var(--esp-5); }
  .fe-enderecos li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .fe-base { flex-direction: column; gap: var(--esp-2); }
}
@media (prefers-reduced-motion: reduce) {
  .fe-coracao::after { animation: none; transform: scale(1.3); opacity: .5; }
}