/* ===== base ===== */
/* Base do site — Dr. Alexandre de Tarso Machado (a partir do hero C · Contraste aprovado) */

:root {
  /* cor (amostrada do retrato: pijama #1C2947, pele, cinza do estúdio; bordô da marca dele) */
  --c-fundo: #0a0f19;          /* grafite-azul profundo */
  --c-noite: #111a2b;          /* noite */
  --c-marinho: #1c2947;        /* pijama cirúrgico (amostra) */
  --c-aco: #5e7391;            /* aço azulado */
  --c-prata: #c9d4e2;          /* prata do raio-X */
  --c-bordo-sombra: #3a1822;   /* bordô em sombra */
  --c-bordo: #a3192b;          /* bordô da marca */
  --c-bordo-vivo: #e0566a;     /* ponta do cateter */
  --c-texto: #eef2f7;
  --c-texto-2: #b4c0d0;
  --c-texto-3: #8c9bb0;

  /* tipo */
  --c-f-titulo: "Unbounded", "Arial Black", system-ui, sans-serif;
  --c-f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --c-t-titulo: clamp(3.3rem, min(7.3vw, 12svh), 8.4rem);
  --c-t-fala: clamp(1.12rem, 0.95rem + 0.55vw, 1.45rem);
  --c-t-texto: clamp(1rem, 0.94rem + 0.2vw, 1.0625rem);
  --c-t-mini: 0.875rem;

  /* espaço */
  --c-margem: clamp(1.25rem, 4.4vw, 5rem);
  --c-e-1: 0.5rem;
  --c-e-2: 1rem;
  --c-e-3: 1.5rem;
  --c-e-4: clamp(1.75rem, 3.6svh, 2.5rem);
  --c-nav-h: 4.75rem;

  /* retrato (desktop) */
  --c-rh: min(88svh, 64vw, 1000px);
  --c-rw: calc(var(--c-rh) * 0.7467);

  /* movimento */
  --c-ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--c-fundo); }
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-texto);
  font-family: var(--c-f-texto);
  font-size: var(--c-t-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
p, figure, blockquote { margin: 0; }

/* granulado fino, um só, fixo */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ---------- navegação ---------- */
.c-nav {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--c-nav-h);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 var(--c-margem);
}
.c-nav__marca { display: grid; text-decoration: none; line-height: 1.15; margin-right: auto; }
.c-nav__nome { font-family: var(--c-f-titulo); font-weight: 500; font-size: .95rem; letter-spacing: -.01em; }
.c-nav__sub { font-size: .8125rem; color: var(--c-texto-3); letter-spacing: .06em; text-transform: uppercase; margin-top: .2rem; }
.c-nav__links { display: flex; gap: 1.75rem; }
.c-nav__links a, .c-nav__zap {
  text-decoration: none; font-size: .9375rem; color: var(--c-texto-2);
  padding: .75rem 0; transition: color .25s;
}
.c-nav__links a:hover, .c-nav__zap:hover { color: var(--c-texto); }
.c-nav__zap {
  padding: .6rem 1.1rem; border: 1px solid color-mix(in oklab, var(--c-prata) 30%, transparent);
  border-radius: 999px; color: var(--c-texto);
}
.c-nav__zap:hover { border-color: color-mix(in oklab, var(--c-prata) 60%, transparent); }

/* ---------- hero ---------- */
.c-hero {
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 640px);
  overflow: hidden;
  background: var(--c-fundo);
}

/* malha: manchas radiais grandes, cores vizinhas (grafite, noite, marinho do pijama, bordô em sombra, prata fria) */
.c-hero__malha, .c-hero__malha::before, .c-hero__malha::after {
  position: absolute; pointer-events: none;
}
.c-hero__malha {
  inset: 0; z-index: 0;
  background:
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, var(--c-marinho) 92%, var(--c-prata)) , color-mix(in oklch, var(--c-marinho) 45%, transparent) 50%, transparent) 108% 4% / 78vmax 78vmax no-repeat,
    radial-gradient(circle closest-side at 50% 50% in oklch, var(--c-noite), color-mix(in oklch, var(--c-noite) 50%, transparent) 45%, transparent) -8% -6% / 70vmax 70vmax no-repeat,
    var(--c-fundo);
}
.c-hero__malha::before {
  content: ""; inset: -20%;
  background:
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, var(--c-bordo-sombra) 95%, var(--c-bordo)), color-mix(in oklch, var(--c-bordo-sombra) 50%, transparent) 45%, transparent) 4% 96% / 62vmax 62vmax no-repeat,
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, var(--c-aco) 34%, transparent), color-mix(in oklch, var(--c-aco) 14%, transparent) 45%, transparent) 72% 30% / 54vmax 54vmax no-repeat;
  animation: c-deriva-a 34s ease-in-out infinite alternate;
}
.c-hero__malha::after {
  content: ""; inset: -20%;
  background:
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, var(--c-marinho) 70%, transparent), color-mix(in oklch, var(--c-marinho) 30%, transparent) 45%, transparent) 40% 70% / 66vmax 66vmax no-repeat,
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, #2a2140 70%, transparent), transparent) 30% 10% / 50vmax 50vmax no-repeat;
  animation: c-deriva-b 27s ease-in-out infinite alternate;
}
@keyframes c-deriva-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -3%, 0) scale(1.06); }
}
@keyframes c-deriva-b {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-5%, 3%, 0) rotate(6deg); }
}

/* cena 3D */
.c-hero__cena { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.c-hero__cena canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.4s ease;
}
.c-hero.cena-pronta .c-hero__cena canvas { opacity: 1; }
@media (min-width: 981px) {
  /* a árvore se dissolve antes da coluna de texto */
  .c-hero__cena {
    -webkit-mask-image: linear-gradient(to right, transparent 16%, rgb(0 0 0 / .35) 30%, #000 50%);
            mask-image: linear-gradient(to right, transparent 16%, rgb(0 0 0 / .35) 30%, #000 50%);
  }
}
.c-hero__poster { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.c-hero.sem-webgl .c-hero__poster { display: block; }
.c-hero.sem-webgl canvas, .c-hero.sem-webgl .c-leitura__ang { display: none; }

/* palco */
.c-hero__palco {
  position: relative; z-index: 3;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: calc(var(--c-nav-h) + 1rem) var(--c-margem) clamp(2rem, 6svh, 4rem);
}

/* coluna de texto (desktop) */
.c-topo, .c-corpo { width: min(46vw, 40rem); position: relative; z-index: 3; }

.c-sobre {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: baseline;
  font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--c-prata);
  margin-bottom: var(--c-e-3);
}
.c-sobre span:first-child::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--c-bordo-vivo); margin-right: .65rem; vertical-align: .08em;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-bordo-vivo) 22%, transparent), 0 0 18px var(--c-bordo-vivo);
}
.c-sobre__onde { color: var(--c-texto-3); }

.c-titulo {
  margin: 0;
  font-family: var(--c-f-titulo);
  font-weight: 700;
  font-size: var(--c-t-titulo);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--c-texto);
  text-wrap: balance;
}
.c-titulo__l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.c-titulo__l > span { display: inline-block; }
.c-titulo__l:last-child > span {
  background: linear-gradient(100deg in oklch, var(--c-texto) 30%, color-mix(in oklch, var(--c-prata) 85%, #8fb0dd) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.c-corpo { margin-top: var(--c-e-4); }

.c-fala { position: relative; padding-left: 1.25rem; border-left: 1px solid color-mix(in oklab, var(--c-bordo-vivo) 70%, transparent); }
.c-fala blockquote p {
  font-size: var(--c-t-fala); line-height: 1.38; font-weight: 400; font-style: italic;
  color: var(--c-texto); max-width: 30ch; text-wrap: pretty;
}
.c-fala figcaption {
  margin-top: .5rem; font-size: var(--c-t-mini); color: var(--c-texto-3); letter-spacing: .02em;
}
.c-fala figcaption::before { content: "— "; }

.c-apoio { margin-top: var(--c-e-3); max-width: 44ch; color: var(--c-texto-2); text-wrap: pretty; }
.c-areas {
  margin-top: var(--c-e-2); font-size: var(--c-t-mini); color: var(--c-texto-3); letter-spacing: .02em; max-width: 52ch;
}
.c-areas i, .c-prova i { font-style: normal; color: var(--c-bordo-vivo); padding: 0 .2em; }

.c-acoes { margin-top: var(--c-e-4); display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; }
.c-botao {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 3.25rem; padding: .85rem 1.5rem .85rem 1.25rem;
  border-radius: 999px;
  background: var(--c-bordo);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; letter-spacing: .005em;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--c-bordo) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .14);
  transition: background .25s, transform .25s var(--c-ease), box-shadow .25s;
}
.c-botao:hover { background: color-mix(in oklch, var(--c-bordo) 86%, white); transform: translateY(-1px); }
.c-botao:focus-visible, .c-link:focus-visible, .c-nav a:focus-visible { outline: 2px solid var(--c-prata); outline-offset: 3px; }
.c-link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem;
  color: var(--c-texto); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid color-mix(in oklab, var(--c-prata) 35%, transparent);
  padding: .1rem 0; min-height: 0; line-height: 1.6;
  transition: border-color .25s;
}
.c-link:hover { border-color: var(--c-prata); }

.c-prova { margin-top: var(--c-e-4); display: grid; gap: .35rem; font-size: var(--c-t-mini); }
.c-prova__nota { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; color: var(--c-texto-2); }
.c-prova__nota strong { font-family: var(--c-f-titulo); font-weight: 600; font-size: 1.125rem; color: var(--c-texto); }
.c-estrelas { color: #e8c37a; letter-spacing: .1em; font-size: .8rem; }
.c-prova__registro { color: var(--c-texto-3); letter-spacing: .02em; }

/* retrato: grande, ancorado à direita (o braço direito sai pela borda da tela) */
.c-retrato {
  position: absolute; z-index: 2;
  bottom: 0;
  right: calc(var(--c-rw) * -0.035);
  width: var(--c-rw);
  height: var(--c-rh);
  pointer-events: none;
}
.c-retrato img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgb(0 0 0 / .55) 84%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 66%, rgb(0 0 0 / .55) 84%, transparent 99%);
}
/* halo frio atrás da cabeça e dos ombros, para separar o pijama do fundo */
.c-retrato::before {
  content: ""; position: absolute; z-index: -1;
  left: -12%; right: -12%; top: -6%; height: 80%;
  background: radial-gradient(closest-side at 50% 42% in oklch, color-mix(in oklch, var(--c-aco) 42%, transparent), color-mix(in oklch, var(--c-marinho) 25%, transparent) 55%, transparent);
}

/* leitura técnica no canto, como nas telas da sala de hemodinâmica */
.c-leitura {
  position: absolute; z-index: 4; right: var(--c-margem); bottom: 1.1rem;
  display: flex; gap: 1rem; align-items: baseline;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-texto-3);
  font-variant-numeric: tabular-nums;
}
.c-leitura b { font-weight: 500; color: var(--c-prata); }

/* ---------- entrada (CSS puro: o título aparece antes da cena) ---------- */
@keyframes c-sobe { from { transform: translateY(105%); } to { transform: none; } }
@keyframes c-surge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes c-retrato { from { opacity: 0; transform: translateY(18px) scale(1.015); } to { opacity: 1; transform: none; } }

.c-sobre { animation: c-surge .8s var(--c-ease) .05s both; }
.c-titulo__l > span { animation: c-sobe 1s var(--c-ease) both; }
.c-titulo__l:first-child > span { animation-delay: .12s; }
.c-titulo__l:last-child > span { animation-delay: .26s; }
.c-retrato { animation: c-retrato 1.3s var(--c-ease) .2s both; }
.c-fala { animation: c-surge .9s var(--c-ease) .62s both; }
.c-apoio, .c-areas { animation: c-surge .9s var(--c-ease) .78s both; }
.c-acoes { animation: c-surge .9s var(--c-ease) .92s both; }
.c-prova { animation: c-surge .9s var(--c-ease) 1.05s both; }
.c-nav { animation: c-surge .8s var(--c-ease) .3s both; }
.c-leitura { animation: c-surge 1s var(--c-ease) 1.6s both; }

/* ---------- notebook baixo ---------- */
@media (min-width: 981px) and (max-height: 920px) {
  :root { --c-e-4: 1.5rem; }
  .c-apoio { margin-top: 1.1rem; }
}
@media (min-width: 981px) and (max-height: 780px) {
  :root { --c-e-4: 1.4rem; --c-t-fala: 1.1rem; }
  .c-areas { display: none; }
}

/* ---------- celular e tablet ---------- */
@media (max-width: 980px) {
  :root {
    --c-nav-h: 4rem;
    --c-t-titulo: clamp(3.1rem, 16.5vw, 6rem);
    --c-mw: 112vw;               /* largura do retrato */
    --c-mh: calc(var(--c-mw) * 1.3393);
  }
  .c-nav__links { display: none; }
  .c-nav__nome { font-size: .875rem; }
  .c-nav__sub { font-size: .75rem; }
  .c-nav__zap { padding: .55rem .95rem; font-size: .875rem; }

  .c-hero { min-height: 0; }
  .c-hero__palco {
    align-content: start;
    padding: calc(var(--c-nav-h) + .9rem) var(--c-margem) 2.75rem;
  }
  .c-topo, .c-corpo { width: auto; }
  .c-sobre { margin-bottom: .9rem; font-size: .8125rem; }

  .c-retrato {
    position: relative; right: auto; bottom: auto;
    width: var(--c-mw); height: var(--c-mh);
    margin: -.4rem 0 0 calc(50% - var(--c-mw) / 2);
    justify-self: start;
  }
  .c-retrato img {
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / .5) 72%, transparent 86%);
            mask-image: linear-gradient(to bottom, #000 58%, rgb(0 0 0 / .5) 72%, transparent 86%);
  }
  /* o texto sobe sobre o peito (abaixo do queixo: o rosto vai até 42% da altura do retrato) */
  .c-corpo { margin-top: calc(var(--c-mh) * -0.42); display: flex; flex-direction: column; }
  /* no celular a ação vem logo depois da fala dele, ainda na primeira tela */
  .c-fala { order: 1; }
  .c-acoes { order: 2; margin-top: 1.4rem; }
  .c-apoio { order: 3; margin-top: 1.6rem; }
  .c-areas { order: 4; }
  .c-prova { order: 5; margin-top: 1.4rem; }
  .c-sobre__onde { display: none; }
  .c-fala blockquote p { max-width: 26ch; }
  .c-leitura { display: none; }
  .c-hero__cena { bottom: auto; height: calc(var(--c-nav-h) + 12rem + var(--c-mh) * .7); }
}

@media (max-width: 980px) and (min-width: 600px) {
  :root { --c-mw: min(84vw, 640px); }
  .c-retrato { margin-left: auto; margin-right: auto; justify-self: center; }
  .c-corpo { max-width: 36rem; }
}

@media (max-width: 380px) {
  .c-nav__sub { display: none; }
  .c-botao { padding-inline: 1.1rem 1.25rem; }
}


/* =====================================================================
   SISTEMA DAS SEÇÕES (comum a todas as partes)
   ===================================================================== */
:root {
  /* superfície "chapa": o filme radiográfico visto contra a luz (claro, prata-azulado) */
  --s-chapa: #e7ecf2;
  --s-chapa-2: #d9e1ea;
  --s-chapa-3: #c7d2de;
  --s-tinta: #111c30;          /* texto sobre chapa */
  --s-tinta-2: #3c4a62;        /* apoio sobre chapa (AA) */
  --s-tinta-3: #56647b;        /* legenda sobre chapa (AA em 14px+) */
  --s-linha-clara: color-mix(in oklab, var(--s-tinta) 16%, transparent);
  --s-linha-escura: color-mix(in oklab, var(--c-prata) 16%, transparent);

  --s-larg: min(100% - 2 * var(--c-margem), 80rem);   /* largura útil */
  --s-estreita: min(100% - 2 * var(--c-margem), 46rem);
  --s-respiro: clamp(5rem, 11vw, 10rem);               /* topo/base de seção */
  --s-t-sec: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);    /* título de seção (Unbounded) */
  --s-t-sub: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);     /* subtítulo (Unbounded 500) */
  --s-t-lead: clamp(1.08rem, 1rem + .35vw, 1.28rem);   /* texto de abertura */
  --s-raio: 14px;
}

.s { position: relative; isolation: isolate; padding: var(--s-respiro) 0; scroll-margin-top: 1rem; }
.s-noite { background: var(--c-fundo); color: var(--c-texto); }
.s-noite-2 { background: var(--c-noite); color: var(--c-texto); }
.s-chapa { background: var(--s-chapa); color: var(--s-tinta); }
.s__dentro { width: var(--s-larg); margin-inline: auto; position: relative; z-index: 2; }

/* leitura técnica: rótulo de abertura de seção, como as telas da sala de hemodinâmica */
.s-leitura {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-prata);
  margin: 0 0 1.4rem;
}
.s-chapa .s-leitura { color: var(--s-tinta-2); }
.s-leitura__seq { color: var(--c-texto-3); }
.s-chapa .s-leitura__seq { color: var(--s-tinta-3); }
/* a ponta do cateter: ponto bordô com o fio-guia de 1px chegando */
.s-ponta { position: relative; display: inline-block; width: 2.6rem; height: .5rem; flex: none; }
.s-ponta::before { content: ""; position: absolute; left: 0; right: .5rem; top: 50%; height: 1px; background: linear-gradient(to right, transparent, color-mix(in oklab, var(--c-prata) 70%, transparent)); }
.s-chapa .s-ponta::before { background: linear-gradient(to right, transparent, color-mix(in oklab, var(--s-tinta) 55%, transparent)); }
.s-ponta::after { content: ""; position: absolute; right: 0; top: 0; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-bordo-vivo) 20%, transparent), 0 0 16px var(--c-bordo-vivo); }
.s-chapa .s-ponta::after { background: var(--c-bordo); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-bordo) 16%, transparent); }

.s-titulo { margin: 0; font-family: var(--c-f-titulo); font-weight: 700; font-size: var(--s-t-sec); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.s-titulo em { font-style: normal; color: var(--c-bordo-vivo); }
.s-chapa .s-titulo em { color: var(--c-bordo); }
.s-sub { margin: 0; font-family: var(--c-f-titulo); font-weight: 500; font-size: var(--s-t-sub); line-height: 1.15; letter-spacing: -.02em; }
.s-lead { font-size: var(--s-t-lead); line-height: 1.55; color: var(--c-texto-2); max-width: 46ch; text-wrap: pretty; }
.s-chapa .s-lead { color: var(--s-tinta-2); }
.s-texto { color: var(--c-texto-2); max-width: 62ch; }
.s-chapa .s-texto { color: var(--s-tinta-2); }
.s-mini { font-size: var(--c-t-mini); color: var(--c-texto-3); }
.s-chapa .s-mini { color: var(--s-tinta-3); }

/* botões fora do hero */
.s-botao { /* mesmo botão do hero */
  display: inline-flex; align-items: center; gap: .65rem; min-height: 3.25rem; padding: .85rem 1.5rem .85rem 1.25rem;
  border-radius: 999px; background: var(--c-bordo); color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--c-bordo) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .14);
  transition: background .25s, transform .25s var(--c-ease);
}
.s-botao:hover { background: color-mix(in oklch, var(--c-bordo) 86%, white); transform: translateY(-1px); }
.s-botao svg { width: 20px; height: 20px; flex: none; }
.s-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem; color: inherit; text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in oklab, currentColor 35%, transparent); padding: .1rem 0; transition: border-color .25s; }
.s-link:hover { border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--c-prata); outline-offset: 3px; border-radius: 4px; }
.s-chapa a:focus-visible, .s-chapa button:focus-visible { outline-color: var(--s-tinta); }

/* revelação na rolagem: só com JS (sem JS tudo aparece) */
.js [data-rev] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--c-ease), transform .9s var(--c-ease); transition-delay: var(--rev-atraso, 0s); }
.js [data-rev].visto { opacity: 1; transform: none; }

/* barra fixa de ação no celular */
.barra-acao { display: none; }
@media (max-width: 980px) {
  .barra-acao {
    position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .45rem;
    border-radius: 999px; background: color-mix(in oklab, var(--c-fundo) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--s-linha-escura); box-shadow: 0 14px 40px -12px rgb(0 0 0 / .6);
    transform: translateY(160%); transition: transform .5s var(--c-ease);
  }
  .barra-acao.ativa { transform: none; }
  .barra-acao a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; }
  .barra-acao__zap { background: var(--c-bordo); color: #fff; }
  .barra-acao__agenda { padding: 0 1.1rem; color: var(--c-texto); border: 1px solid var(--s-linha-escura); }
  .barra-acao svg { width: 18px; height: 18px; }
}

/* ---------- rodapé ---------- */
.rp { background: #070b13; color: var(--c-texto-2); padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(2rem + env(safe-area-inset-bottom)); font-size: .95rem; position: relative; overflow: hidden; }
.rp__dentro { width: var(--s-larg); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem 3rem; position: relative; z-index: 2; }
.rp__nome { font-family: var(--c-f-titulo); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; color: var(--c-texto); margin: 0 0 .5rem; }
.rp__reg { color: var(--c-texto-3); margin: 0 0 1.2rem; letter-spacing: .02em; }
.rp h2 { font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-prata); margin: 0 0 .9rem; font-family: var(--c-f-texto); }
.rp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.rp a { color: var(--c-texto-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.rp a:hover { color: var(--c-texto); border-bottom-color: currentColor; }
.rp address { font-style: normal; line-height: 1.6; }
.rp__fim { width: var(--s-larg); margin: 3rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--s-linha-escura); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; font-size: var(--c-t-mini); color: var(--c-texto-3); position: relative; z-index: 2; }
.rp__fim a { color: var(--c-texto-2); border-bottom: 1px solid color-mix(in oklab, var(--c-prata) 40%, transparent); }
.rp__arvore { position: absolute; right: -6%; bottom: -30%; width: min(56vw, 760px); opacity: .16; pointer-events: none; z-index: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
@media (max-width: 860px) {
  .rp__dentro { grid-template-columns: 1fr; }
  .rp { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-delay: 0s !important;
    transition-duration: 0s !important; transition-delay: 0s !important;
  }
  .js [data-rev] { opacity: 1; transform: none; }
}

/* ===== metodo ===== */
/* metodo · prefixo pd- · superfície chapa */
.pd { overflow-x: clip; }
.pd-malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side in oklab, color-mix(in oklab, var(--s-chapa-3) 70%, transparent), transparent) 88% 12% / 60vmax 60vmax no-repeat,
    radial-gradient(closest-side in oklab, color-mix(in oklab, #fff 70%, transparent), transparent) 8% 55% / 55vmax 55vmax no-repeat;
}

/* cabeça: título em largura cheia, texto e fala lado a lado embaixo */
.pd-titulo { max-width: 18ch; }
.pd-cab__lado { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.6rem clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3.2rem); align-items: start; }
.pd-cab__lado .s-lead { max-width: 50ch; }
.pd-fala { border-left: 1px solid var(--c-bordo); padding-left: 1.4rem; }
.pd-fala blockquote p { font-style: italic; font-size: var(--c-t-fala); line-height: 1.35; color: var(--s-tinta); }
.pd-fala figcaption { margin-top: .5rem; font-size: var(--c-t-mini); color: var(--s-tinta-3); letter-spacing: .02em; }

/* corpo: passos + tela */
.pd-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(4rem, 8vw, 7rem); align-items: start; }
.pd-trilha { position: relative; padding-left: clamp(2.5rem, 4vw, 3.5rem); }
.pd-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3.5rem, 16svh, 10rem); padding-block: 1rem 2rem; }
.pd-passo { position: relative; min-height: 34svh; }
.pd-passo:last-child { min-height: 0; }
.pd-passo::before { /* marca do passo sobre o trilho */
  content: ""; position: absolute; left: calc(-1 * clamp(2.5rem, 4vw, 3.5rem) + 5px); top: .35rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--s-chapa); border: 1px solid var(--s-tinta-3); transition: background .4s, border-color .4s, box-shadow .4s;
}
.pd-passo.pd-ativo::before { background: var(--c-bordo); border-color: var(--c-bordo); box-shadow: 0 0 0 5px color-mix(in oklab, var(--c-bordo) 14%, transparent); }
.pd-passo__n { display: flex; gap: .8rem; align-items: baseline; font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--s-tinta-2); margin-bottom: .8rem; font-variant-numeric: tabular-nums; }
.pd-passo__n span { color: var(--c-bordo); font-weight: 600; }
.pd-passo__t { margin-bottom: .9rem; max-width: 18ch; }
.pd-passo__img { display: none; }

/* o fio-guia: avança com a rolagem, em velocidade constante */
.pd-fio { position: absolute; left: 10px; top: 1.4rem; bottom: 2rem; width: 1px; }
.pd-fio__trilho { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--s-linha-clara) 0 6px, transparent 6px 12px); }
.pd-fio__linha { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--s-tinta); transform-origin: top; transform: scaleY(var(--pd-p, 1)); }
.pd-fio__ponta { position: absolute; left: -4px; top: calc(var(--pd-p, 1) * 100%); width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--c-bordo); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-bordo) 18%, transparent), 0 0 14px color-mix(in oklab, var(--c-bordo) 60%, transparent); }

/* a tela: troca de canal a cada passo, com o "contraste" enchendo de baixo para cima */
.pd-tela { position: sticky; top: 5.5rem; justify-self: end; width: min(100%, calc((100svh - 11rem) * .8)); }
.pd-tela__vidro {
  position: relative; overflow: hidden; border-radius: var(--s-raio); background: #0a0f19;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -40px rgb(17 28 48 / .55), 0 0 0 1px rgb(17 28 48 / .2);
}
.pd-tela__img { position: absolute; inset: clamp(.6rem, 1vw, .9rem); width: calc(100% - 2 * clamp(.6rem, 1vw, .9rem)); height: calc(100% - 2 * clamp(.6rem, 1vw, .9rem)); border-radius: calc(var(--s-raio) - 6px); object-fit: cover; }
.pd-tela__img[data-canal="0"] { object-position: 50% 40%; filter: saturate(.6) contrast(1.03); }
.pd-tela__img[data-canal="1"] { object-position: 62% 50%; filter: saturate(.6) contrast(1.03); }
.pd-tela__img[data-canal="2"] { object-position: 50% 0; }
.pd-tela [data-canal] { display: none; }
.pd-tela[data-pd-canal="0"] [data-canal="0"], .pd-tela[data-pd-canal="1"] [data-canal="1"], .pd-tela[data-pd-canal="2"] [data-canal="2"] { display: block; }
.pd-tela__hud [data-canal] { display: none !important; }
.pd-tela[data-pd-canal="0"] .pd-tela__hud [data-canal="0"], .pd-tela[data-pd-canal="1"] .pd-tela__hud [data-canal="1"], .pd-tela[data-pd-canal="2"] .pd-tela__hud [data-canal="2"] { display: inline !important; }
/* com JS: as três imagens empilhadas; a do canal ativo entra por cima, de baixo para cima */
.pd-tela.pd-js .pd-tela__img { display: block; clip-path: inset(100% 0 0 0 round 8px); z-index: 1; transition: none; }
.pd-tela.pd-js[data-pd-ant="0"] .pd-tela__img[data-canal="0"], .pd-tela.pd-js[data-pd-ant="1"] .pd-tela__img[data-canal="1"], .pd-tela.pd-js[data-pd-ant="2"] .pd-tela__img[data-canal="2"] { clip-path: inset(0 0 0 0 round 8px); z-index: 1; }
.pd-tela.pd-js[data-pd-canal="0"] .pd-tela__img[data-canal="0"], .pd-tela.pd-js[data-pd-canal="1"] .pd-tela__img[data-canal="1"], .pd-tela.pd-js[data-pd-canal="2"] .pd-tela__img[data-canal="2"] { clip-path: inset(0 0 0 0 round 8px); z-index: 2; transition: clip-path 1.1s linear; }

.pd-tela__hud { position: absolute; z-index: 3; margin: 0; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: #eef2f7; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: .5rem; background: rgb(10 15 25 / .66); padding: .35rem .65rem; border-radius: 4px; }
.pd-tela__hud--a { left: 1.6rem; top: 1.5rem; }
.pd-tela__hud--b { right: 1.6rem; bottom: 1.5rem; }
.pd-tela__hud b { font-weight: 600; color: #fff; }
.pd-tela__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 8px var(--c-bordo-vivo); }
.pd-tela__alvo { position: absolute; z-index: 3; left: 47%; top: 11%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%;
  border: 1.5px solid var(--c-bordo-vivo); box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-bordo-vivo) 16%, transparent);
  opacity: 0; transform: scale(.7); transition: opacity .6s .9s, transform .6s .9s var(--c-ease); }
.pd-tela[data-pd-canal="2"] .pd-tela__alvo { opacity: 1; transform: none; }
.pd-tela figcaption { margin-top: 1rem; max-width: 46ch; min-height: 3.2em; }
/* o mesmo fio-guia, dentro da tela */
.pd-tela__fio { position: absolute; z-index: 3; left: 1.6rem; right: 10rem; bottom: 2.35rem; height: 1px; background: rgb(238 242 247 / .28); }
.pd-tela__fio span { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--pd-p, 1) * 100%); background: #eef2f7; }
.pd-tela__fio span::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 10px var(--c-bordo-vivo); }
/* foco: a ponta acende o passo que você está lendo */
.pd-vivo .pd-passo { opacity: .78; transition: opacity .6s var(--c-ease); }
.pd-vivo .pd-passo.pd-atual { opacity: 1; }

/* fotos dentro dos passos (celular) */
.pd-passo__img img { width: 100%; height: auto; border-radius: var(--s-raio); aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.6) contrast(1.03); }
.pd-passo[data-pd-passo="1"] .pd-passo__img img { aspect-ratio: 1; object-position: 62% 50%; }
.pd-passo[data-pd-passo="2"] .pd-passo__img img { filter: none; object-position: 50% 0; }
.pd-passo__img figcaption { margin-top: .7rem; }
.pd-passo[data-pd-passo="0"] .pd-passo__img img { object-position: 50% 12%; }
.pd-passo__img figcaption span, .pd-busca__lista span { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--c-bordo); }
.pd-passo__img figcaption span { margin-right: .5rem; }

/* o que a técnica busca: faixa de leitura técnica */
.pd-busca { margin-top: clamp(5rem, 10vw, 8rem); }
.pd-busca__t { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.2rem; font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--s-tinta-2); }
.pd-busca__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--s-linha-clara); border-bottom: 1px solid var(--s-linha-clara); }
.pd-busca__lista li { padding: 1.3rem 1.4rem 1.4rem 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 500; line-height: 1.3; color: var(--s-tinta); }
.pd-busca__lista li + li { padding-left: 1.4rem; border-left: 1px solid var(--s-linha-clara); }
.pd-busca__lista span { display: block; margin-bottom: .55rem; font-size: var(--c-t-mini); font-variant-numeric: tabular-nums; }
.pd-busca__nota { margin-top: 1rem; }

/* indicação honesta: o ponto final da seção */
.pd-indica { margin: clamp(5rem, 10vw, 8.5rem) auto 0; max-width: 52rem; text-align: center; }
.pd-indica__aspa { display: block; font-family: var(--c-f-titulo); font-weight: 700; font-size: clamp(5rem, 4rem + 4vw, 8rem); line-height: .7; height: .42em; color: var(--c-bordo); }
.pd-indica blockquote p { font-style: italic; text-wrap: balance; }
.pd-indica__marsh blockquote p { font-size: clamp(1.3rem, 1rem + 1.25vw, 2.15rem); line-height: 1.32; color: var(--s-tinta); letter-spacing: -.01em; }
.pd-indica__marsh figcaption { margin-top: 1.1rem; font-size: var(--c-t-mini); color: var(--s-tinta-3); }
.pd-indica__marsh figcaption i { font-style: normal; margin-inline: .35rem; }
.pd-indica__pac { margin: 2.6rem auto 0; max-width: 34rem; padding-top: 2rem; position: relative; }
.pd-indica__pac::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 1.4rem; background: var(--c-bordo); }
.pd-indica__pac blockquote p { font-size: var(--c-t-fala); line-height: 1.4; color: var(--s-tinta-2); }
.pd-indica__pac figcaption { margin-top: .7rem; font-size: var(--c-t-mini); color: var(--s-tinta-3); }

@media (max-width: 900px) {
  .pd-cab__lado { grid-template-columns: 1fr; }
  .pd-corpo { grid-template-columns: 1fr; }
  .pd-tela { display: none; }
  .pd-passo { min-height: 0; }
  .pd-passos { gap: 4rem; }
  .pd-passo__img { display: block; margin-top: 1.6rem; }
  .pd-busca__lista { grid-template-columns: 1fr 1fr; }
  .pd-busca__lista li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pd-busca__lista li:nth-child(n+3) { border-top: 1px solid var(--s-linha-clara); }
  .pd-passo__img img, .pd-passo[data-pd-passo] .pd-passo__img img { aspect-ratio: 5 / 4; }
}
@media (max-width: 520px) {
  .pd-busca__lista { grid-template-columns: 1fr; }
  .pd-busca__lista li, .pd-busca__lista li + li { padding: .95rem 0; border-left: 0; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; }
  .pd-busca__lista li + li { border-top: 1px solid var(--s-linha-clara); }
  .pd-busca__lista span { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pd { --pd-p: 1 !important; }
}

/* ===== tratamentos ===== */
/* tratamentos · prefixo tr- · superfície noite */
.tr { overflow-x: clip; }
.tr-malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side in oklch, color-mix(in oklch, var(--c-marinho) 75%, transparent), transparent) 92% 8% / 70vmax 70vmax no-repeat,
    radial-gradient(closest-side in oklch, color-mix(in oklch, var(--c-bordo-sombra) 70%, transparent), transparent) 4% 96% / 60vmax 60vmax no-repeat;
}

/* cabeça */
.tr-cab { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; }
.tr-cab .s-leitura { grid-column: 1 / -1; }
.tr-titulo { max-width: 15ch; }
.tr-cab .s-lead { max-width: 40ch; }
.tr-cab .s-lead { padding-bottom: .5rem; }

/* corpo: mapa + lista */
.tr-corpo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(3.5rem, 7vw, 6rem); align-items: start; }

.tr-mapa { position: sticky; top: 4rem; height: calc(100svh - 8rem); max-height: 56rem; min-height: 30rem; display: grid; grid-template-rows: 1fr auto; }
.tr-mapa__palco { position: relative; min-height: 0; }
.tr-mapa__textura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .09; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.tr-mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-mapa__leitura { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--s-linha-escura);
  font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-texto-3); font-variant-numeric: tabular-nums; }
.tr-mapa__ter { color: var(--c-prata); text-align: right; }

/* o desenho */
.tr-sil { fill: color-mix(in oklab, var(--c-prata) 3%, transparent); stroke: color-mix(in oklab, var(--c-prata) 38%, transparent); stroke-width: 1; }
.tr-org { fill: color-mix(in oklab, var(--c-prata) 5%, transparent); stroke: color-mix(in oklab, var(--c-prata) 34%, transparent); stroke-width: 1; }
.tr-art { fill: none; stroke: color-mix(in oklab, var(--c-prata) 62%, transparent); stroke-width: 2; stroke-linecap: round; }
.tr-base .tr-art:first-child { stroke-width: 4.5; }
.tr-vei { fill: none; stroke: color-mix(in oklab, var(--c-aco) 85%, transparent); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; }
.tr-ter { opacity: 0; transition: opacity .5s var(--c-ease); filter: drop-shadow(0 0 5px color-mix(in oklab, var(--c-bordo-vivo) 70%, transparent)); }
.tr-luz { fill: none; stroke: var(--c-bordo-vivo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s linear; }
.tr-luz--grossa { stroke-width: 6; }
.tr-luz--vei { stroke-width: 2.4; }
.tr-luz--org { fill: color-mix(in oklab, var(--c-bordo-vivo) 26%, transparent); stroke-width: 1.6; }
.tr-anel { fill: none; stroke: var(--c-bordo-vivo); stroke-width: 1.6; }
.tr-anel--zona { fill: color-mix(in oklab, var(--c-bordo-vivo) 22%, transparent); stroke-dasharray: 2 3; }
.tr-sonda rect { fill: var(--c-prata); }
.tr-sonda path { stroke: var(--c-prata); stroke-width: 1.5; fill: none; }
.tr-mapa[data-ter-ativo="aorta"] [data-ter="aorta"], .tr-mapa[data-ter-ativo="pernas"] [data-ter="pernas"], .tr-mapa[data-ter-ativo="veias"] [data-ter="veias"],
.tr-mapa[data-ter-ativo="utero"] [data-ter="utero"], .tr-mapa[data-ter-ativo="figado"] [data-ter="figado"], .tr-mapa[data-ter-ativo="feridas"] [data-ter="feridas"],
.tr-mapa[data-ter-ativo="doppler"] [data-ter="doppler"] { opacity: 1; }
.tr-mapa[data-ter-ativo="aorta"] [data-ter="aorta"] .tr-luz, .tr-mapa[data-ter-ativo="pernas"] [data-ter="pernas"] .tr-luz, .tr-mapa[data-ter-ativo="veias"] [data-ter="veias"] .tr-luz,
.tr-mapa[data-ter-ativo="utero"] [data-ter="utero"] .tr-luz, .tr-mapa[data-ter-ativo="figado"] [data-ter="figado"] .tr-luz, .tr-mapa[data-ter-ativo="feridas"] [data-ter="feridas"] .tr-luz,
.tr-mapa[data-ter-ativo="doppler"] [data-ter="doppler"] .tr-luz { stroke-dashoffset: 0; }

/* anotações em volta da figura */
.tr-rot { cursor: pointer; }
.tr-rot path { fill: none; stroke: color-mix(in oklab, var(--c-prata) 32%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .4s; }
.tr-rot circle { fill: color-mix(in oklab, var(--c-prata) 60%, transparent); transition: fill .4s; }
.tr-rot text { font-family: var(--c-f-texto); font-size: 16px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; fill: var(--c-texto-3); transition: fill .4s; }
.tr-rot:hover text { fill: var(--c-texto); }
.tr-mapa[data-ter-ativo="aorta"] .tr-rot[data-ter="aorta"] path, .tr-mapa[data-ter-ativo="pernas"] .tr-rot[data-ter="pernas"] path, .tr-mapa[data-ter-ativo="veias"] .tr-rot[data-ter="veias"] path, .tr-mapa[data-ter-ativo="utero"] .tr-rot[data-ter="utero"] path, .tr-mapa[data-ter-ativo="figado"] .tr-rot[data-ter="figado"] path, .tr-mapa[data-ter-ativo="feridas"] .tr-rot[data-ter="feridas"] path, .tr-mapa[data-ter-ativo="doppler"] .tr-rot[data-ter="doppler"] path { stroke: var(--c-bordo-vivo); }
.tr-mapa[data-ter-ativo="aorta"] .tr-rot[data-ter="aorta"] circle, .tr-mapa[data-ter-ativo="pernas"] .tr-rot[data-ter="pernas"] circle, .tr-mapa[data-ter-ativo="veias"] .tr-rot[data-ter="veias"] circle, .tr-mapa[data-ter-ativo="utero"] .tr-rot[data-ter="utero"] circle, .tr-mapa[data-ter-ativo="figado"] .tr-rot[data-ter="figado"] circle, .tr-mapa[data-ter-ativo="feridas"] .tr-rot[data-ter="feridas"] circle, .tr-mapa[data-ter-ativo="doppler"] .tr-rot[data-ter="doppler"] circle { fill: var(--c-bordo-vivo); }
.tr-mapa[data-ter-ativo="aorta"] .tr-rot[data-ter="aorta"] text, .tr-mapa[data-ter-ativo="pernas"] .tr-rot[data-ter="pernas"] text, .tr-mapa[data-ter-ativo="veias"] .tr-rot[data-ter="veias"] text, .tr-mapa[data-ter-ativo="utero"] .tr-rot[data-ter="utero"] text, .tr-mapa[data-ter-ativo="figado"] .tr-rot[data-ter="figado"] text, .tr-mapa[data-ter-ativo="feridas"] .tr-rot[data-ter="feridas"] text, .tr-mapa[data-ter-ativo="doppler"] .tr-rot[data-ter="doppler"] text { fill: var(--c-texto); }

/* sem JS o mapa não fica preso (mostraria só o primeiro território) */
.tr:not(.tr-js) .tr-mapa { position: relative; top: auto; }

/* a ponta do cateter vai até o território escolhido, em velocidade constante */
.tr-ponta { fill: var(--c-bordo-vivo); stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: transform .9s linear; filter: drop-shadow(0 0 6px var(--c-bordo-vivo)); }
.tr-mapa__tags { display: none; }

/* lista */
.tr-lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--s-linha-escura); }
.tr-item { border-top: 1px solid var(--s-linha-escura); position: relative; }
.tr-item::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--c-bordo-vivo); transition: width .9s linear; }
.tr-item.tr-ativo::before { width: 100%; }
.tr-item__cab { margin: 0; }
.tr-item__bt { all: unset; box-sizing: border-box; width: 100%; min-height: 3.5rem; display: grid; grid-template-columns: 2.8rem 1fr auto; align-items: baseline; gap: .5rem; padding: 1.25rem 0 .75rem; cursor: pointer; }
.tr-item__bt:focus-visible { outline: 2px solid var(--c-prata); outline-offset: 3px; border-radius: 4px; }
.tr-item__n { font-size: var(--c-t-mini); letter-spacing: .14em; color: var(--c-texto-3); font-variant-numeric: tabular-nums; font-weight: 500; transition: color .3s; }
.tr-item__nome { font-family: var(--c-f-titulo); font-weight: 500; font-size: var(--s-t-sub); line-height: 1.15; letter-spacing: -.02em; color: var(--c-texto); }
.tr-item__mais { display: none; }
.tr-item.tr-ativo .tr-item__n { color: var(--c-bordo-vivo); }
.tr-item__corpo { padding: 0 0 1.6rem 3.3rem; color: var(--c-texto-2); max-width: 38rem; font-size: .98rem; }
.tr-item__corpo > p + p, .tr-item__corpo > p + blockquote, .tr-item__corpo > blockquote + p { margin-top: .9rem; }
.tr-item__tags { font-size: var(--c-t-mini); letter-spacing: .04em; color: var(--c-texto-3); margin-bottom: .8rem; }
.tr-item__fala { margin: 0; padding-left: 1.1rem; border-left: 1px solid var(--c-bordo-vivo); }
.tr-item__fala p { font-style: italic; color: var(--c-texto); }
.tr-item__fala footer { margin-top: .35rem; font-size: var(--c-t-mini); color: var(--c-texto-3); }
.tr-item__quando { font-size: .95rem; display: grid; grid-template-columns: 11.5rem 1fr; gap: .2rem 1rem; padding-top: .9rem; border-top: 1px dashed var(--s-linha-escura); }
.tr-item__quando span { font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-bordo-vivo); padding-top: .1rem; }
.tr-item__link { color: var(--c-texto); }
/* com JS, no computador: os itens fora de foco ficam mais baixos */
.tr-js .tr-item .tr-item__corpo { transition: opacity .5s var(--c-ease); }
@media (min-width: 901px) {
  .tr-js .tr-item:not(.tr-ativo) .tr-item__corpo { opacity: .8; }
  .tr-js .tr-item:not(.tr-ativo) .tr-item__nome { color: var(--c-texto-2); }
}

/* fecho */
.tr-fim { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.tr-fim__tambem span { display: block; font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-prata); margin-bottom: .3rem; }
.tr-fim { padding-top: 2.2rem; border-top: 1px solid var(--s-linha-escura); }
.tr-fim__acoes { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; justify-content: flex-end; }
.tr-fim__chamada { flex-basis: 100%; text-align: right; font-family: var(--c-f-titulo); font-weight: 500; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -.015em; color: var(--c-texto); margin-bottom: .3rem; }

@media (max-width: 900px) {
  .tr-cab { grid-template-columns: 1fr; }
  .tr-corpo { grid-template-columns: 1fr; gap: 0; }
  /* o mapa vira um painel fixo no alto enquanto a lista passa */
  .tr-mapa__tags { display: block; font-size: var(--c-t-mini); letter-spacing: .02em; text-transform: none; color: var(--c-texto-2); line-height: 1.45; }
  .tr-fim__acoes { justify-content: flex-start; }
  .tr-fim__chamada { text-align: left; }
  .tr-mapa { top: 0; z-index: 3; height: 34svh; min-height: 15rem; max-height: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; gap: 1rem;
    margin-inline: calc(-1 * var(--c-margem)); padding: .8rem var(--c-margem); background: var(--c-fundo); border-bottom: 1px solid var(--s-linha-escura); box-shadow: 0 18px 24px -18px rgb(0 0 0 / .8); }
  .tr-rots { display: none; }
  .tr-item__quando { grid-template-columns: 1fr; }
  .tr-mapa__palco { height: 100%; }
  .tr-mapa__leitura { flex-direction: column; justify-content: center; border-top: 0; margin: 0; padding: 0; gap: .6rem; }
  .tr-mapa__ter { text-align: left; font-family: var(--c-f-titulo); text-transform: none; letter-spacing: -.01em; font-size: 1.25rem; line-height: 1.2; color: var(--c-texto); font-weight: 500; }
  .tr-item__bt { grid-template-columns: 2.4rem 1fr 1.5rem; padding: 1rem 0; align-items: center; }
  .tr-item__nome { font-size: 1.2rem; }
  .tr-item__mais { display: block; position: relative; width: 1.5rem; height: 1.5rem; }
  .tr-item__mais::before, .tr-item__mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--c-prata); transition: transform .35s var(--c-ease); }
  .tr-item__mais::after { transform: rotate(90deg); }
  .tr-item__bt[aria-expanded="true"] .tr-item__mais::after { transform: rotate(0deg); }
  .tr-item__corpo { padding: 0 0 1.6rem 2.9rem; }
  .tr-js .tr-item__corpo[hidden] { display: none; }
  .tr-fim { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .tr-item__corpo { padding-left: 0; }
}

/* ===== consulta ===== */
/* consulta (cs-) — chapa: o médico que mostra e explica, com a ilustração de Doppler do hero B */
.cs { overflow: clip; }
.cs-malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle closest-side at 50% 50% in oklab, rgb(255 255 255 / .75), rgb(255 255 255 / 0)) 72% 18% / 70vmax 70vmax no-repeat,
    radial-gradient(circle closest-side at 50% 50% in oklab, color-mix(in oklab, var(--s-chapa-3) 80%, transparent), transparent) -10% 100% / 60vmax 60vmax no-repeat;
}

.cs-grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.cs-titulo { max-width: none; }
.cs-titulo__l { display: block; }
@media (min-width: 1200px) { .cs-titulo__l { white-space: nowrap; } }
.cs-lead { margin-top: 1.5rem; }

.cs-fala { margin-top: 2rem; padding-left: 1.25rem; border-left: 1px solid var(--c-bordo); max-width: 30rem; }
.cs-fala blockquote p { font-style: italic; font-size: var(--c-t-fala); line-height: 1.4; color: var(--s-tinta); text-wrap: pretty; }
.cs-fala figcaption, .cs-passo__fala figcaption, .cs-tele__fala figcaption { margin-top: .45rem; font-size: var(--c-t-mini); color: var(--s-tinta-3); }
.cs-fala figcaption::before, .cs-passo__fala figcaption::before, .cs-tele__fala figcaption::before { content: "— "; }

/* ---------- palco: retrato + painel + anotações ---------- */
.cs-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  --cs-ret-x: -2%;
  --cs-pain-x: 43%; --cs-pain-y: 45%; --cs-pain-w: 58%;
}
/* luz fria atrás da cabeça e dos ombros: o negatoscópio aceso */
.cs-palco::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -14%; top: -4%; width: 104%; height: 86%;
  background: radial-gradient(closest-side at 50% 45% in oklab, rgb(255 255 255 / .95), rgb(255 255 255 / .4) 55%, rgb(255 255 255 / 0));
}
.cs-retrato {
  position: absolute; z-index: 1; left: var(--cs-ret-x); bottom: 0;
  height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  user-select: none;
}
.cs-painel {
  position: absolute; z-index: 2;
  left: var(--cs-pain-x); top: var(--cs-pain-y); width: var(--cs-pain-w);
  aspect-ratio: 4 / 3.25;
  border-radius: var(--s-raio);
  background: #10151d;
  padding: 2.4%;
  display: grid; grid-template-rows: auto 1fr;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .06) inset,
    0 1px 0 rgb(255 255 255 / .08) inset,
    0 40px 70px -30px rgb(16 21 29 / .6),
    0 14px 28px -18px rgb(16 21 29 / .45);
}
.cs-painel__barra {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(214 222 232 / .8);
  padding: 0 .2rem .55rem;
}
.cs-painel__pulso { width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-bordo-vivo); }
.cs-painel__pulso.cs-bate { animation: cs-bate .5s ease-out; }
@keyframes cs-bate { 0% { box-shadow: 0 0 0 0 rgb(224 86 106 / .55); } 100% { box-shadow: 0 0 0 7px rgb(224 86 106 / 0); } }
.cs-painel__tela { width: 100%; height: 100%; display: block; border-radius: 6px; background: #0b0e13 url("../img/cs-doppler.webp") center / 100% 100% no-repeat; }

.cs-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.cs-fios path { fill: none; stroke: var(--c-marinho); stroke-width: 1.15; stroke-linecap: round; }
.cs-fios circle.cs-alvo { fill: #fff; stroke: var(--c-bordo); stroke-width: 1.5; }
.cs-fios circle.cs-base { fill: var(--c-marinho); }

.cs-nota {
  position: absolute; z-index: 4; margin: 0;
  font-style: italic; font-weight: 500;
  font-size: clamp(.9375rem, .7rem + .4vw, 1.125rem); line-height: 1.25;
  color: var(--s-tinta);
  white-space: nowrap;
}
.cs-nota span {
  display: inline-block;
  padding: .4em .85em .44em;
  border-radius: 999px;
  background: rgb(247 249 252 / .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgb(17 28 48 / .09), 0 8px 18px -12px rgb(17 28 48 / .4);
}
.cs-nota--1 { left: 52%; bottom: calc(100% - 36%); }
.cs-nota--2 { right: -2%; bottom: calc(100% - 42.4%); }
.cs-nota--3 { left: 50%; top: 88.5%; }

.cs-legenda {
  grid-column: 2; margin: -1.2rem 0 0 40%;
  font-size: var(--c-t-mini); line-height: 1.6; color: var(--s-tinta-2);
  max-width: 30rem; text-wrap: pretty;
}
.cs-legenda { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.cs-legenda__i { white-space: nowrap; }
.cs-legenda__cor { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin: 0 .4rem 0 .15rem; vertical-align: -.05em; }
.cs-legenda__cor--a { background: #b4263a; }
.cs-legenda__cor--v { background: #3b6fb8; }
.cs-legenda__cor--e { background: linear-gradient(to top, #8c97a8, #eef2f6); border-radius: 2px; width: .55rem; }
.cs-legenda__aviso { flex-basis: 100%; color: var(--s-tinta-3); }

/* escrita das notas (só com JS e com movimento) */
.js .cs-nota { opacity: 0; }
.js .cs-nota span { clip-path: inset(-20% 100% -20% 0); }
.js .cs-nota.cs-escrita { opacity: 1; transition: opacity .3s ease; }
.js .cs-nota.cs-escrita span { clip-path: inset(-20% -2% -20% 0); transition: clip-path 1s cubic-bezier(.45,.05,.3,1) .35s; }
.js .cs-palco .cs-painel, .js .cs-palco .cs-retrato { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--c-ease), transform 1.2s var(--c-ease); }
.js .cs-palco.cs-visto .cs-retrato { opacity: 1; transform: none; }
.js .cs-palco.cs-visto .cs-painel { opacity: 1; transform: none; transition-delay: .35s; }

/* ---------- passos: quatro linhas, cada uma com a fala de um paciente ---------- */
.cs-passos { margin-top: clamp(4.5rem, 9vw, 8rem); }
.cs-passos__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--s-tinta); }
.cs-passos__intro { margin: 0; }
.cs-passos__lista { list-style: none; margin: 0; padding: 0; }
.cs-passo {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--s-linha-clara);
}
.cs-passo__n {
  font-family: var(--c-f-titulo); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px var(--c-bordo);
  background: linear-gradient(to top, var(--c-bordo) 50%, transparent 50%) 0 0 / 100% 200% no-repeat;
  background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  padding-bottom: .08em;
  font-variant-numeric: tabular-nums;
}
/* o contraste enche o número quando a linha entra (como no vaso do hero) */
.cs-passo.visto .cs-passo__n { background-position: 0 100%; transition: background-position 1.4s linear calc(var(--rev-atraso, 0s) + .45s); }
html:not(.js) .cs-passo__n { background-position: 0 100%; }
.cs-passo__t { margin: 0 0 .55rem; font-family: var(--c-f-titulo); font-weight: 500; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.2; letter-spacing: -.02em; }
.cs-passo__x { color: var(--s-tinta-2); max-width: 40ch; }
.cs-passo__fala { padding-left: 1.2rem; border-left: 1px solid color-mix(in oklab, var(--c-bordo) 60%, transparent); }
.cs-passo__fala blockquote p { font-style: italic; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.45; color: var(--s-tinta); text-wrap: pretty; }

/* ---------- teleconsulta: a outra tela ---------- */
.cs-tele {
  margin-top: clamp(4.5rem, 9vw, 8rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 4.5vw, 4rem);
  border-radius: var(--s-raio);
  color: var(--c-texto);
  background:
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, var(--c-marinho) 85%, transparent), transparent) 100% 0% / 70% 140% no-repeat,
    radial-gradient(circle closest-side at 50% 50% in oklch, color-mix(in oklch, var(--c-bordo-sombra) 80%, transparent), transparent) 0% 110% / 60% 120% no-repeat,
    var(--c-noite);
  box-shadow: 0 40px 80px -40px rgb(10 15 25 / .55), 0 0 0 1px rgb(255 255 255 / .05) inset;
}
.cs-tele .s-leitura { color: var(--c-prata); margin-bottom: 1.1rem; }
.cs-tele .s-leitura__seq { color: var(--c-texto-3); }
.cs-tele .s-ponta::before { background: linear-gradient(to right, transparent, color-mix(in oklab, var(--c-prata) 70%, transparent)); }
.cs-tele .s-ponta::after { background: var(--c-bordo-vivo); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-bordo-vivo) 20%, transparent), 0 0 16px var(--c-bordo-vivo); }
.cs-tele__titulo { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); max-width: 14ch; }
.cs-tele .cs-tele__fonte { margin-top: .6rem; color: var(--c-texto-3); }
.cs-tele .cs-tele__apoio { margin-top: 1.4rem; color: var(--c-texto-2); max-width: 44ch; }
.cs-tele .cs-tele__nota { margin-top: .8rem; color: var(--c-texto-3); }
.cs-tele__link { margin-top: 1rem; color: var(--c-texto); }
.cs-tele__prazo { margin-top: 1.6rem; display: flex; align-items: center; gap: 1.1rem; max-width: 26rem; padding: 1rem 0; border-top: 1px solid var(--s-linha-escura); border-bottom: 1px solid var(--s-linha-escura); }
.cs-tele__num { font-family: var(--c-f-titulo); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.04em; color: var(--c-texto); font-variant-numeric: tabular-nums; flex: none; }
.cs-tele__num small { font-size: .38em; font-weight: 500; letter-spacing: 0; margin-left: .2em; color: var(--c-bordo-vivo); }
.cs-tele__prazo-x { font-size: .95rem; line-height: 1.45; color: var(--c-texto-2); }
.cs-tele a:focus-visible { outline-color: var(--c-prata); }
.cs-tele__falas { display: grid; gap: 2.2rem; align-content: center; }
.cs-tele__fala { padding-left: 1.25rem; border-left: 1px solid color-mix(in oklab, var(--c-bordo-vivo) 70%, transparent); }
.cs-tele__fala blockquote p { font-style: italic; font-size: var(--c-t-fala); line-height: 1.4; color: var(--c-texto); text-wrap: pretty; }
.cs-tele__fala figcaption { color: var(--c-texto-3); }

/* ---------- celular e tablet ---------- */
@media (max-width: 980px) {
  .cs-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* no celular a imagem vem logo depois do título; a fala da paciente depois da legenda */
  .cs-texto { display: contents; }
  .cs-texto > .s-leitura { order: 1; }
  .cs-titulo { order: 2; }
  .cs-lead { order: 3; }
  .cs-palco { order: 4; }
  .cs-legenda { order: 5; grid-column: 1; margin: 1.8rem 0 0; }
  .cs-legenda__i { white-space: normal; }
  .cs-fala { order: 6; margin-top: 2.2rem; }
  .cs-titulo__l { white-space: normal; }
  .cs-palco {
    width: auto; margin: 1.4rem calc(var(--c-margem) * -1) 0;
    aspect-ratio: 1 / 1.32;
    --cs-ret-x: -6%;
    --cs-pain-x: 36%; --cs-pain-y: 54%; --cs-pain-w: 61%;
  }
  .cs-painel__barra { font-size: .875rem; letter-spacing: .1em; }
  .cs-so-largo { display: none; }
  .cs-nota { white-space: normal; max-width: 10.5em; text-wrap: balance; font-size: .9375rem; }
  .cs-nota--1 { left: 3%; top: 45%; bottom: auto; max-width: 8em; }
  .cs-nota--2 { right: 3%; bottom: calc(100% - 51.5%); }
  .cs-nota--3 { right: 3%; left: auto; top: 90%; }
  .cs-passo { grid-template-columns: 4.2rem minmax(0, 1fr); padding: 1.8rem 0; }
  .cs-passo__fala { grid-column: 2; margin-top: .4rem; }
  .cs-tele { grid-template-columns: minmax(0, 1fr); margin-inline: auto; }
}
@media (max-width: 600px) {
  .cs-passo { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .cs-passo__fala { grid-column: 1; }
  .cs-passo__n { font-size: 2.2rem; }
}

/* ---------- movimento reduzido: tudo à vista ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .cs-nota, .js .cs-palco .cs-painel, .js .cs-palco .cs-retrato { opacity: 1; transform: none; }
  .js .cs-nota span { clip-path: none; }
}

/* tablet: o palco não cresce além do necessário */
@media (min-width: 600px) and (max-width: 980px) {
  .cs-palco { width: min(100%, 620px); margin-inline: auto; }
  .cs-legenda { max-width: 620px; margin-inline: auto; width: 100%; }
}

/* ===== formacao ===== */
/* ===== formação · prefixo fo- · noite-2 ===== */
.fo { overflow: clip; }
.fo-malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(closest-side in oklch, color-mix(in oklch, var(--c-bordo-sombra) 70%, transparent), transparent) -18% 78% / 70vw 70vw no-repeat,
    radial-gradient(closest-side in oklch, color-mix(in oklch, var(--c-marinho) 85%, transparent), transparent) 110% 6% / 64vw 64vw no-repeat;
  animation: fo-malha 34s ease-in-out infinite alternate;
}
@keyframes fo-malha { to { background-position: -8% 70%, 100% 14%; } }

.fo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 29rem);
  column-gap: clamp(3rem, 6vw, 6.5rem);
}
.fo-cabeca { grid-column: 1; grid-row: 1; }
.fo-titulo { max-width: 12ch; }
.fo-titulo__n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-lead { margin-top: 1.6rem; max-width: 44ch; }

/* ---------- retrato ---------- */
.fo-foto { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 5.5rem; }
.fo-foto__quadro { position: relative; }
.fo-foto__topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin: 0 0 .9rem;
  font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--c-prata);
}
.fo-foto__n::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 10px var(--c-bordo-vivo); margin-right: .6rem; vertical-align: .1em; }
.fo-foto__lugar { color: var(--c-texto-3); }
.fo-foto__arq { display: none; color: var(--c-texto-3); }
/* a tela: marcas de canto do monitor, por fora da foto */
.fo-foto__tela { position: relative; }
.fo-foto__tela::before {
  --k: color-mix(in oklab, var(--c-prata) 60%, transparent);
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  background:
    linear-gradient(var(--k), var(--k)) 0 0 / 16px 1px, linear-gradient(var(--k), var(--k)) 0 0 / 1px 16px,
    linear-gradient(var(--k), var(--k)) 100% 0 / 16px 1px, linear-gradient(var(--k), var(--k)) 100% 0 / 1px 16px,
    linear-gradient(var(--k), var(--k)) 0 100% / 16px 1px, linear-gradient(var(--k), var(--k)) 0 100% / 1px 16px,
    linear-gradient(var(--k), var(--k)) 100% 100% / 16px 1px, linear-gradient(var(--k), var(--k)) 100% 100% / 1px 16px;
  background-repeat: no-repeat;
}
.fo-foto__img {
  width: 100%; height: auto; max-height: 62svh; object-fit: cover; object-position: 50% 18%;
  border-radius: 6px;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8), 0 0 0 1px color-mix(in oklab, var(--c-prata) 14%, transparent);
}
.fo-foto__legenda { display: grid; gap: .55rem; margin-top: 1.3rem; }
.fo-foto__fala { font-style: italic; color: var(--c-texto); font-size: 1.05rem; line-height: 1.5; text-wrap: pretty; }
.fo-foto__quem { font-size: var(--c-t-mini); color: var(--c-texto-3); }
/* trilho do filme: quanto da trajetória o contraste já percorreu */
.fo-foto__trilho { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; font-size: var(--c-t-mini); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--c-texto-3); }
.fo-foto__barra { position: relative; flex: 1; height: 1px; background: var(--s-linha-escura); }
.fo-foto__barra i { position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--fo-p, 1) * 100%); background: linear-gradient(to right, transparent, var(--c-prata)); }
.fo-foto__barra i::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 10px var(--c-bordo-vivo); }

/* ---------- o vaso ---------- */
.fo-vaso { grid-column: 1; grid-row: 2; list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; position: relative; --fo-x: 12rem; }
.fo-vaso__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.fo-vaso__parede { fill: var(--c-prata); opacity: .42; }
.fo-vaso__lumen { fill: var(--c-noite); }
.fo-vaso__contraste { opacity: .82; filter: drop-shadow(0 0 6px rgb(201 212 226 / .4)); }
.fo-vaso__nucleo { fill: #fff; opacity: .9; }
.fo-vaso__alvo { fill: none; stroke: var(--c-bordo-vivo); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .6s var(--c-ease), transform .9s var(--c-ease); }
.fo-vaso__svg--chegou .fo-vaso__alvo { opacity: .8; transform: none; }
.fo-vaso__ramo { transition: stroke-dashoffset .7s linear; }
.fo-vaso__ponta { fill: var(--c-bordo-vivo); transition: opacity .3s; }
.fo-vaso__halo { fill: var(--c-bordo-vivo); opacity: .22; filter: blur(3px); transition: opacity .3s; }
/* sem o desenho (sem JS): um tronco simples */
.fo-vaso:not(.fo-vaso--desenhado)::before {
  content: ""; position: absolute; left: var(--fo-x); top: 2.6rem; bottom: 2rem; width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: linear-gradient(to bottom, var(--c-prata), color-mix(in oklab, var(--c-prata) 30%, transparent));
}
.fo-quadro {
  display: grid; grid-template-columns: 9.5rem 5rem minmax(0, 1fr);
  padding: 2.1rem 0; position: relative; z-index: 1;
}
.fo-quadro__ano {
  grid-column: 1; margin: 0; text-align: right;
  font-family: var(--c-f-titulo); font-weight: 600; font-size: clamp(2.2rem, 1.6rem + 1vw, 2.75rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--c-texto);
  transition: color .6s var(--c-ease);
}
.fo-quadro__ate { display: block; margin-top: .45rem; font-family: var(--c-f-texto); font-weight: 500; font-size: 1rem; letter-spacing: .04em; color: var(--c-texto-3); }
.fo-quadro__no { grid-column: 2; justify-self: center; width: 1px; height: 1px; margin-top: .9rem; }
.fo-quadro__corpo { grid-column: 3; min-width: 0; }
.fo-quadro__frame {
  position: relative; margin: .55rem 0 .65rem;
  font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-prata);
}
.fo-quadro__alvo { position: absolute; left: -.55rem; top: 50%; width: 0; height: 0; }
.fo-quadro__titulo { margin: 0 0 .55rem; font-family: var(--c-f-titulo); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + .55vw, 1.55rem); line-height: 1.18; letter-spacing: -.02em; color: var(--c-texto); text-wrap: balance; }
.fo-quadro__texto { color: var(--c-texto-2); max-width: 52ch; text-wrap: pretty; }

/* estado da rolagem: só quando o JS desenha o vaso */
.fo-vaso--vivo .fo-quadro:not(.fo-quadro--aceso) .fo-quadro__ano { color: var(--c-texto-3); }
.fo-quadro--hoje.fo-quadro--aceso .fo-quadro__ano, .fo-vaso:not(.fo-vaso--vivo) .fo-quadro--hoje .fo-quadro__ano { color: var(--c-bordo-vivo); }

/* ramos finos dentro de cada quadro */
.fo-galhos { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; }
.fo-galhos li { position: relative; padding: 0 0 .85rem 1.7rem; color: var(--c-texto-2); line-height: 1.45; }
.fo-galhos li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid color-mix(in oklab, var(--c-prata) 38%, transparent); }
.fo-galhos li:last-child::before { display: none; }
.fo-galhos li::after { content: ""; position: absolute; left: 0; top: -.1rem; width: 1.15rem; height: .85rem; border-left: 1.5px solid color-mix(in oklab, var(--c-prata) 38%, transparent); border-bottom: 1.5px solid color-mix(in oklab, var(--c-prata) 38%, transparent); border-bottom-left-radius: .7rem; }
.fo-galhos b { display: block; font-weight: 500; font-size: var(--c-t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--c-prata); }

.fo-aluna { margin: 1.4rem 0 0; padding: 1rem 0 0 1.2rem; border-left: 1px solid color-mix(in oklab, var(--c-bordo-vivo) 60%, transparent); }
.fo-aluna p { font-style: italic; color: var(--c-texto); font-size: 1.05rem; }
.fo-aluna footer { margin-top: .4rem; font-size: var(--c-t-mini); color: var(--c-texto-3); }

/* ---------- ficha: o painel de leitura ---------- */
.fo-ficha {
  display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; gap: 2rem clamp(2rem, 4vw, 4rem);
  margin-top: clamp(4rem, 7vw, 6rem); padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--s-linha-escura); border-radius: var(--s-raio);
  background: linear-gradient(160deg, color-mix(in oklab, var(--c-marinho) 55%, transparent), color-mix(in oklab, var(--c-fundo) 70%, transparent));
}
.fo-ficha__leitura {
  grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0 0 .4rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--s-linha-escura);
  font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-texto-3);
}
.fo-ficha__tit { margin: 0 0 1rem; font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--c-prata); font-family: var(--c-f-texto); }
.fo-ficha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; color: var(--c-texto-2); }
.fo-ficha__anos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem !important; }
.fo-ficha__anos b { display: block; font-family: var(--c-f-titulo); font-weight: 600; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; color: var(--c-texto); font-variant-numeric: tabular-nums; }
.fo-ficha__primeiro b { color: var(--c-bordo-vivo); }

/* ---------- celular e tablet ---------- */
@media (max-width: 980px) {
  .fo-grade { grid-template-columns: minmax(0, 1fr); }
  .fo-cabeca, .fo-foto, .fo-vaso { grid-column: 1; grid-row: auto; }
  .fo-foto { position: relative; top: auto; margin-top: 2.4rem; max-width: 34rem; }
  .fo-foto__img { max-height: none; aspect-ratio: 4 / 4.6; }
  .fo-foto__n, .fo-foto__lugar { display: none; }
  .fo-foto__arq { display: inline; }
  .fo-foto__trilho { display: none; }
  .fo-vaso { --fo-x: 1.3rem; }
  .fo-quadro__frame { margin-top: 0; }
  .fo-quadro__alvo { left: -.2rem; }
  .fo-quadro { grid-template-columns: 2.6rem minmax(0, 1fr); padding: 1.6rem 0; }
  .fo-quadro__ano { grid-column: 2; grid-row: 1; text-align: left; font-size: 1.75rem; display: flex; align-items: baseline; gap: .5rem; }
  .fo-quadro__ate { display: inline; margin: 0; }
  .fo-quadro__no { grid-column: 1; grid-row: 1; margin-top: .9rem; }
  .fo-quadro__corpo { grid-column: 2; grid-row: 2; margin-top: .8rem; }
  .fo-ficha { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { .fo-malha { animation: none; } }

/* ===== pacientes ===== */
/* pacientes (pa-) — chapa: as palavras que se repetem, os números e as falas */
.pa { overflow: clip; }
.pa-malha {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle closest-side at 50% 50% in oklab, rgb(255 255 255 / .7), rgb(255 255 255 / 0)) 15% 8% / 64vmax 64vmax no-repeat,
    radial-gradient(circle closest-side at 50% 50% in oklab, color-mix(in oklab, var(--s-chapa-3) 70%, transparent), transparent) 105% 70% / 60vmax 60vmax no-repeat;
}

.pa-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.pa-titulo__l { display: block; }
.pa-lead { margin-top: 1.5rem; }

.pa-notas { display: grid; gap: 1rem; }
.pa-nota {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 1.4rem; align-items: center;
  padding: 1.1rem 0; border-top: 1px solid var(--s-linha-clara); text-decoration: none; color: inherit;
}
.pa-nota__onde { grid-column: 1 / -1; margin-bottom: .5rem; font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--s-tinta-3); }
.pa-nota__num { grid-row: span 2; font-family: var(--c-f-titulo); font-weight: 700; font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pa-nota__estrelas { position: relative; font-size: 1.05rem; letter-spacing: .12em; color: color-mix(in oklab, var(--c-bordo) 22%, transparent); width: max-content; }
.pa-nota__estrelas::before { content: "★★★★★"; }
.pa-nota__estrelas > span { position: absolute; left: 0; top: 0; width: var(--pa-nota); overflow: hidden; white-space: nowrap; color: var(--c-bordo); }
.pa-nota__fonte { color: var(--s-tinta-2); font-size: .95rem; }
.pa-nota__fonte b { color: var(--s-tinta); font-weight: 600; }
.pa-nota:hover .pa-nota__fonte { color: var(--s-tinta); }
.pa-notas__data { margin: 0; }

/* ---------- temas: o contraste enche o vaso até a fração ---------- */
.pa-meio { margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.pa-temas__dica { margin: -.8rem 0 1.2rem; }
html:not(.js) .pa-temas__dica { display: none; }
.pa-temas__titulo { margin: 0 0 1.4rem; font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--s-tinta-2); }
.pa-temas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pa-tema__botao {
  display: grid; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: 0; border-radius: 10px; padding: .9rem 1rem 1rem; margin: 0 -1rem; width: calc(100% + 2rem);
  min-height: 48px; transition: background .25s;
}
.pa-tema__botao:hover { background: color-mix(in oklab, var(--s-chapa-3) 45%, transparent); }
.pa-tema__botao[aria-pressed="true"] { background: color-mix(in oklab, var(--c-bordo) 9%, transparent); }
.pa-tema__botao[aria-pressed="true"] .pa-tema__palavra { color: var(--c-bordo); }
.pa-tema__palavra { display: block; font-family: var(--c-f-titulo); font-weight: 500; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -.02em; margin-bottom: .9rem; }
/* o vaso: tubo com parede fina; o contraste entra em velocidade constante até a fração, com a ponta do cateter à frente */
.pa-tema__vaso {
  position: relative; display: block; height: 14px; border-radius: 999px;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--s-chapa-3) 80%, var(--s-tinta)) , var(--s-chapa-2) 45%, var(--s-chapa-3));
  box-shadow: inset 0 0 0 1px var(--s-linha-clara);
}
.pa-tema__contraste {
  position: absolute; left: 0; top: 2px; bottom: 2px; width: calc(var(--pa-fr) * 100%);
  border-radius: 999px;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--c-bordo) 80%, white), var(--c-bordo) 55%, color-mix(in oklch, var(--c-bordo) 80%, black));
  clip-path: inset(0 0 0 0 round 999px);
}
.pa-tema__ponta { position: absolute; right: 1px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-bordo-vivo) 25%, transparent), 0 0 12px var(--c-bordo-vivo); }
.js .pa-tema .pa-tema__contraste { clip-path: inset(0 100% 0 0 round 999px); }
.js .pa-tema.visto .pa-tema__contraste { clip-path: inset(0 0 0 0 round 999px); transition: clip-path 1.6s linear calc(var(--rev-atraso, 0s) + .3s); }
.pa-tema__contraste { overflow: visible; }
.pa-tema__conta { display: block; margin-top: .7rem; font-size: .95rem; color: var(--s-tinta-2); }
.pa-tema__conta strong { font-family: var(--c-f-titulo); font-weight: 600; color: var(--s-tinta); font-size: 1.1rem; }

/* ---------- falas ---------- */
.pa-falas { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.pa-fala blockquote p { font-style: italic; color: var(--s-tinta); text-wrap: pretty; }
.pa-fala figcaption { margin-top: .6rem; font-size: var(--c-t-mini); color: var(--s-tinta-3); }
.pa-fala figcaption::before { content: "— "; }
.pa-rota { gap: .7rem; margin-bottom: 1.6rem; }
.pa-rota__fio { position: relative; width: clamp(3rem, 8vw, 7rem); height: .5rem; }
.pa-rota__fio .s-ponta { position: absolute; inset: 0; width: 100%; }
.pa-fala--grande { padding-top: .2rem; }
.pa-fala--grande blockquote p { max-width: 30ch; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.28; letter-spacing: -.01em; text-indent: -.42em; }
.pa-falas__grade { columns: 3 18rem; column-gap: clamp(2rem, 4vw, 3.5rem); }
.pa-falas__grade .pa-fala { break-inside: avoid; padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--s-linha-clara); }
.pa-falas__grade .pa-fala blockquote p { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.5; }
/* o contraste revela os trechos: a marca se enche de bordô claro quando a fala entra */
.pa-fala mark {
  color: inherit; font-weight: 500; padding: .02em .14em; margin: 0 -.14em; border-radius: 4px;
  background: linear-gradient(color-mix(in oklab, var(--c-bordo) 15%, transparent), color-mix(in oklab, var(--c-bordo) 15%, transparent)) 0 0 / 100% 100% no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-color .3s, color .3s;
}
.js .pa-fala[data-rev] mark { background-size: 0% 100%; }
.js .pa-fala[data-rev].visto mark { background-size: 100% 100%; transition: background-size .9s linear calc(var(--rev-atraso, 0s) + .6s), background-color .3s, color .3s; }
/* tema escolhido: as marcas dele acendem, as falas sem ele recuam */
.pa-falas[data-tema] .pa-fala { transition: opacity .4s var(--c-ease); }
.pa-falas[data-tema="a"] .pa-fala:not(:has(mark[data-tema="a"])),
.pa-falas[data-tema="e"] .pa-fala:not(:has(mark[data-tema="e"])),
.pa-falas[data-tema="t"] .pa-fala:not(:has(mark[data-tema="t"])) { opacity: .5; }
.pa-falas[data-tema="a"] mark[data-tema="a"], .pa-falas[data-tema="e"] mark[data-tema="e"], .pa-falas[data-tema="t"] mark[data-tema="t"] { background-color: var(--c-bordo); color: #fff; }
.pa-fim { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }

@media (max-width: 980px) {
  .pa-topo, .pa-meio { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pa-tema .pa-tema__contraste { clip-path: inset(0 0 0 0 round 999px); }
  .js .pa-fala[data-rev] mark { background-size: 100% 38%; }
}

/* ===== agenda ===== */
/* agenda · prefixo ag- · a agenda real do Doctoralia, escolhida pelo lugar */
.ag { overflow: hidden; }
.ag__malha { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle closest-side in oklch, color-mix(in oklch, var(--c-marinho) 85%, var(--c-prata)), transparent) 100% 30% / 70vmax 70vmax no-repeat,
    radial-gradient(circle closest-side in oklch, color-mix(in oklch, var(--c-bordo-sombra) 90%, transparent), transparent) -10% 105% / 60vmax 60vmax no-repeat;
}

.ag__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 452px); grid-template-areas: "cabeca monitor" "locais monitor" "infos monitor"; grid-template-rows: auto auto 1fr; gap: 0 clamp(3rem, 7vw, 7rem); align-items: start; }
.ag__cabeca { grid-area: cabeca; max-width: 40rem; }
.ag__titulo { margin-bottom: 1.4rem; }
.ag__lead { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- os quatro lugares ---------- */
.ag__locais { grid-area: locais; position: relative; display: grid; border-top: 1px solid var(--s-linha-escura); }
.ag-local {
  position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; align-items: start; gap: 0 1rem;
  padding: 1.35rem .25rem 1.35rem 0; text-align: left; font: inherit; color: var(--c-texto-2);
  background: none; border: 0; border-bottom: 1px solid var(--s-linha-escura); cursor: pointer;
  transition: color .3s, background .3s;
}
.ag-local:hover { color: var(--c-texto); }
.ag-local__n { font-family: var(--c-f-titulo); font-weight: 500; font-size: .95rem; color: var(--c-texto-3); padding-top: .2rem; font-variant-numeric: tabular-nums; transition: color .3s; }
.ag-local__corpo { display: grid; gap: .35rem; }
.ag-local__nome { font-family: var(--c-f-titulo); font-weight: 500; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); letter-spacing: -.02em; line-height: 1.2; color: var(--c-texto); }
.ag-local__end { font-size: .95rem; line-height: 1.45; }
.ag-local__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.ag-local__tags span { font-size: .8125rem; letter-spacing: .04em; padding: .22rem .6rem; border-radius: 999px; border: 1px solid var(--s-linha-escura); color: var(--c-texto-2); }
/* o alvo: aceso no lugar escolhido */
.ag-local__alvo { align-self: center; justify-self: end; width: .62rem; height: .62rem; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--c-prata) 45%, transparent); transition: background .3s, border-color .3s, box-shadow .3s; }
.ag-local[aria-selected="true"] { color: var(--c-texto); }
.ag-local[aria-selected="true"] .ag-local__n { color: var(--c-bordo-vivo); }
.ag-local[aria-selected="true"] .ag-local__alvo { background: var(--c-bordo-vivo); border-color: var(--c-bordo-vivo); box-shadow: 0 0 0 5px color-mix(in oklab, var(--c-bordo-vivo) 20%, transparent), 0 0 18px var(--c-bordo-vivo); }
.ag-local[aria-selected="true"]::before { content: ""; position: absolute; left: -1rem; top: 1.2rem; bottom: 1.2rem; width: 2px; border-radius: 2px; background: var(--c-bordo-vivo); }

/* o fio-guia: sai do lugar escolhido e chega à tela da agenda (só desktop) */
.ag__fio { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ag__fio path { fill: none; vector-effect: non-scaling-stroke; }
.ag__fio-rastro { stroke: color-mix(in oklab, var(--c-prata) 22%, transparent); stroke-width: 6; stroke-linecap: round; }
.ag__fio-linha { stroke: var(--c-bordo-vivo); stroke-width: 1.25; opacity: .9; }
.ag__fio-ponta { fill: var(--c-bordo-vivo); filter: drop-shadow(0 0 6px var(--c-bordo-vivo)); }
/* a tela acende quando o fio chega */
.ag__monitor.chegou { animation: ag-acende 1.1s var(--c-ease); }
@keyframes ag-acende { 0% { box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 40px 90px -40px rgb(0 0 0 / .9), 0 0 0 0 color-mix(in oklab, var(--c-bordo-vivo) 60%, transparent); } 100% { box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 40px 90px -40px rgb(0 0 0 / .9), 0 0 0 26px transparent; } }
.ag-monitor__hora { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-texto-3); white-space: nowrap; }

/* ---------- a tela (monitor) com a agenda do Doctoralia ---------- */
.ag__monitor { grid-area: monitor; position: sticky; top: 1.5rem; align-self: start; margin-top: .25rem;
  border-radius: 22px; padding: .7rem; background: linear-gradient(160deg, #1a2438, #0d1320 60%);
  border: 1px solid color-mix(in oklab, var(--c-prata) 18%, transparent);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 40px 90px -40px rgb(0 0 0 / .9), 0 0 120px -30px color-mix(in oklab, var(--c-aco) 55%, transparent); }
.ag-monitor__barra { display: flex; align-items: center; gap: .7rem; padding: .45rem .55rem .8rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texto-3); }
.ag-monitor__barra b { color: var(--c-prata); font-weight: 500; }
.ag-monitor__vivo { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-bordo-vivo); box-shadow: 0 0 10px var(--c-bordo-vivo); animation: ag-pulsa 2.4s ease-in-out infinite; flex: none; }
@keyframes ag-pulsa { 50% { opacity: .35; } }
.ag-monitor__tela { position: relative; display: grid; border-radius: 14px; background: #fff; min-height: 34rem; overflow: hidden; }
.ag-agenda { grid-area: 1 / 1; height: 0; overflow: hidden; visibility: hidden; }
.ag-agenda.ativa { height: auto; overflow: visible; visibility: visible; }
.ag-agenda iframe { display: block; width: 100% !important; min-height: 34rem; }
.ag-agenda .zl-url { display: none; }
.ag-monitor__espera { grid-area: 1 / 1; place-self: center; display: grid; justify-items: center; gap: .9rem; color: #5b6475; font-size: .95rem; text-align: center; padding: 2rem; pointer-events: none; transition: opacity .4s; }
.ag-monitor__espera span { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid #d5dbe4; border-top-color: var(--c-bordo); animation: ag-gira 1s linear infinite; }
@keyframes ag-gira { to { transform: rotate(1turn); } }
.ag.carregou .ag-monitor__espera { opacity: 0; }
.ag-monitor__reserva { grid-area: 1 / 1; place-self: center; display: grid; justify-items: center; gap: 1.2rem; padding: 2rem; text-align: center; color: #2a3346; background: #fff; }
.ag-monitor__reserva[hidden] { display: none; }
.ag-monitor__mapa { display: flex; align-items: center; gap: .4rem; min-height: 48px; margin: .5rem .5rem 0; padding: 0 .2rem; color: var(--c-texto); text-decoration: none; font-weight: 500; font-size: .95rem; border-bottom: 1px solid var(--s-linha-escura); }
.ag-monitor__mapa span { color: var(--c-prata); }
.ag-monitor__mapa i { font-style: normal; margin-left: auto; color: var(--c-bordo-vivo); }
.ag-monitor__mapa:hover { border-bottom-color: var(--c-prata); }
.ag-monitor__mapa[hidden] { display: none; }
.ag-monitor__nota { margin: .9rem .5rem .3rem; font-size: .875rem; line-height: 1.5; color: var(--c-texto-3); }

/* ---------- informações práticas ---------- */
.ag__infos { grid-area: infos; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2.2rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); align-content: start; }
.ag-info p { font-size: .94rem; }
.ag-info p { color: var(--c-texto-2); font-size: .98rem; line-height: 1.6; }
.ag-info .ag-info__rot { font-size: var(--c-t-mini); letter-spacing: .14em; text-transform: uppercase; color: var(--c-prata); font-weight: 500; margin-bottom: .7rem; }
.ag-info .s-link { margin-top: .6rem; color: var(--c-texto); }

/* ---------- celular e tablet ---------- */
@media (min-width: 981px) and (max-width: 1240px) {
  .ag__infos { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .ag__grade { grid-template-columns: 1fr; grid-template-areas: "cabeca" "locais" "monitor" "infos"; grid-template-rows: none; }
  .ag__fio { display: none; }
  .ag__monitor { position: relative; top: auto; margin-top: 1.8rem; justify-self: center; width: min(100%, 452px); }
  .ag-local { padding: 1.1rem 0; grid-template-columns: 2.4rem minmax(0, 1fr) 1.2rem; min-height: 48px; }
  .ag-local[aria-selected="true"]::before { left: -.75rem; }
  .ag__infos { grid-template-columns: 1fr; margin-top: 3rem; }
  .ag-monitor__pre { display: none; }
  .ag-local__end { font-size: .9rem; }
  .ag-local__tags { margin-top: .15rem; }
  .ag-local__tags span { font-size: .8125rem; padding: .15rem .5rem; }
  .ag__lead { margin-bottom: 1.6rem; }
}
@media (max-width: 420px) {
  .ag__monitor { padding: .45rem; border-radius: 18px; margin-inline: calc(-1 * var(--c-margem) + .5rem); width: auto; }
  .ag-monitor__tela { border-radius: 12px; }
}