@font-face {
  font-family: 'Acumin Pro';
  src: url('/assets/fonts/Acumin-RPro.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/assets/fonts/Acumin-BdPro.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Popsies';
  src: url('/assets/fonts/Popsies.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --marinho: #1D283D;
  --ceu: #27576D;
  --esperanca: #BCC8DB;
  --marfim: #FBECD7;
  --marfim-100: #FFFAF3;
  --cura: #805221;
  --tulipa: #C4A16B;
  --canario: #E0D080;
  --marsala: #693D22;

  --bg: var(--marfim-100);
  --surface: #FFFFFF;
  --text: var(--marinho);
  --text-soft: #55607A;
  --border: #E7DCC9;
  --accent: var(--cura);
  --radius-lg: 24px;
  --radius-md: 14px;
  --shadow: 0 16px 40px -20px rgba(29, 40, 61, 0.28);
}

* { box-sizing: border-box; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ceu);
  outline-offset: 2px;
  border-radius: 4px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Acumin Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Camada do padrão "dente-de-leão" da marca — fixa na tela, andando mais
   devagar que o conteúdo (parallax de verdade), como sementes soltas no ar.
   Levemente maior que o viewport pra sobrar margem de sobra pro translateY
   sem revelar borda. Velocidade/posição controladas via JS (ver Layout.astro). */
.watermark {
  position: fixed;
  inset: -15% -10%;
  background-image: url('pattern.png');
  background-repeat: no-repeat;
  background-position: center 20%;
  background-size: 1600px auto;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ---- Reveal on scroll ---- */
.reveal, .reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible, .reveal-stagger > *.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.09s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.27s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.45s; }
.reveal-stagger > *:nth-child(7) { transition-delay: 0.54s; }
.reveal-stagger > *:nth-child(8) { transition-delay: 0.63s; }

@media (prefers-reduced-motion: reduce) {
  .watermark { transform: none !important; }
  .reveal, .reveal-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

h1, h2, h3 { font-family: 'Acumin Pro', sans-serif; font-weight: 700; margin: 0; }
p { margin: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ---- Nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 250, 243, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-inner img { height: 36px; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 600;
}
.nav-links a:hover { color: var(--ceu); }
.nav-cta {
  background: var(--marinho); color: var(--marfim-100); text-decoration: none;
  padding: 9px 18px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
}
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 0;
  background: none; border: none; cursor: pointer; box-shadow: none;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--marinho); border-radius: 999px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--marfim-100); border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
  }
  .nav-links.aberto { display: flex; }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 14px 4px; }
  .nav-toggle { display: flex; }
}

/* ---- Hero ----
   Abertura dramática: fundo marinho sólido que se dissolve pro claro da
   página logo abaixo (pseudo-elemento em gradiente, não JS — mais barato e
   sem risco de contraste de texto piscando durante o scroll). O padrão de
   sementes (.watermark) atravessa essa costura por cima, suavizando ainda
   mais a transição. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 90px 24px 140px;
  text-align: center;
  background: var(--marinho);
  color: var(--marfim-100);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 30vh;
  /* Precisa ser a cor de DESTINO (o creme da próxima seção) com alpha
     indo de 0 a 1 — não a cor de origem, nem o keyword "transparent"
     (que é preto-com-alpha-0 e suja o meio do degradê com cinza). Assim
     dissolve suave do navy pro creme, sem faixa cinza no meio. */
  background: linear-gradient(to bottom, rgba(255, 250, 243, 0), rgba(255, 250, 243, 1));
  pointer-events: none;
}
.hero .wrap { width: 100%; }
.hero img.logo {
  height: 110px; margin-bottom: 26px;
  /* logo-negativo.png é preto sólido (só sem fundo) — não uma versão clara
     de verdade. Converte pra branco na hora via filtro, sem precisar de
     gerar um arquivo novo. */
  filter: brightness(0) invert(1);
}

/* ---- Momento de assinatura: logo com relevo (ver brief "Direção Visual e
   Movimento"). A logo completa (símbolo+wordmark) fica nítida na frente;
   atrás, duas cópias desfocadas só do símbolo (único pedaço que temos em
   SVG de verdade) criam o brilho/profundidade, ocupando a metade de cima
   do quadro — onde o símbolo fica dentro da composição da logo completa.
   Luz vem de cima-esquerda: as camadas de trás deslocam pra baixo-direita,
   mesma direção da sombra projetada da camada da frente. ---- */
.simbolo-camadas {
  position: relative;
  width: 168px; height: 118px;
  margin: 0 auto 22px;
}
.simbolo-camadas svg.camada {
  position: absolute; top: 2%; left: 22%;
  width: 56%; height: auto;
}
.simbolo-camadas .camada-3 {
  fill: var(--tulipa);
  opacity: 0.25;
  filter: blur(13px);
  transform: translate(9px, 12px);
}
.simbolo-camadas .camada-2 {
  fill: var(--esperanca);
  opacity: 0.4;
  filter: blur(5px);
  transform: translate(4px, 6px);
}
.simbolo-camadas img.camada-1 {
  position: relative;
  width: 100%; height: auto; display: block;
  filter: brightness(0) invert(1) drop-shadow(5px 8px 10px rgba(9, 13, 22, 0.45));
}

/* Dissolução ao rolar: o conjunto (as 3 camadas juntas) perde presença
   conforme o hero sai de vista, até sobrar só a marca d'água fixa (.watermark)
   por trás do resto do site — o mesmo símbolo, então a costura é contínua.
   Feito em JS (Layout.astro, RAF + interpolação, nunca listener de scroll
   cru) em vez de animation-timeline: view() — essa API ainda tem suporte
   inconsistente o bastante pra não arriscar num site clínico. Curva
   assimétrica de propósito: perde relevo devagar no começo, acelera no
   final — transição linear denunciaria que é um efeito. */
.hero .kicker {
  font-family: 'Popsies', cursive; color: var(--tulipa);
  font-size: 1.4rem; margin-bottom: 14px;
  position: relative; display: inline-block;
}
/* o sublinhado "desenha" a si mesmo ao carregar — eco visual do "flui" */
.hero .kicker::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--tulipa), var(--canario));
  border-radius: 999px;
  transform-origin: left;
  animation: flui-in 1.4s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes flui-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero h1 { font-size: 2.6rem; max-width: 700px; margin: 0 auto 20px; line-height: 1.2; color: var(--marfim-100); }
.hero p.lede { max-width: 560px; margin: 0 auto 34px; color: var(--esperanca); font-size: 1.05rem; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .btn-secondary { color: var(--marfim-100); border-color: var(--esperanca); }

@media (prefers-reduced-motion: reduce) {
  .hero .kicker::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .hero { min-height: auto; padding: 120px 24px 120px; }
}

button.primary, a.btn-primary, button.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--marinho); color: var(--marfim-100); text-decoration: none;
  font-family: 'Acumin Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; font-size: 0.98rem; padding: 14px 30px; border-radius: 999px;
  border: none; cursor: pointer; box-shadow: var(--shadow);
}
a.btn-secondary, button.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--marinho); text-decoration: none;
  font-family: 'Acumin Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600; font-size: 0.98rem; padding: 13px 28px; border-radius: 999px;
  border: 1.5px solid var(--marinho); cursor: pointer;
}

/* ---- Sections ---- */
section { padding: 80px 0; }
section.alt { background: var(--marfim); }
.section-kicker {
  font-family: 'Popsies', cursive; color: var(--ceu);
  font-size: 1.2rem; margin-bottom: 10px; display: block;
}
.section-title { font-size: 2rem; margin-bottom: 18px; max-width: 640px; }
.section-lede { color: var(--text-soft); max-width: 640px; font-size: 1.02rem; margin-bottom: 44px; }

.manifesto-block {
  background: var(--marinho); color: var(--marfim-100);
  border-radius: var(--radius-lg); padding: 56px 48px;
}
.manifesto-block p {
  font-family: 'Popsies', cursive; font-size: 1.3rem; font-weight: 400;
  line-height: 1.55; max-width: 780px;
}
.manifesto-block p + p { margin-top: 22px; }
.manifesto-block .signature {
  margin-top: 30px; font-style: italic; color: var(--esperanca); font-size: 1.05rem;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 800px) { .grid-3 { grid-template-columns: 1fr; } }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

.pillar-card, .service-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 30px 26px; box-shadow: var(--shadow);
}
.pillar-card .num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--marfim);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
/* Nó da sempre-viva: substitui a numeração 01/02/03 — os pilares são
   simultâneos, não uma sequência. Leve gradiente radial pra sugerir o
   mesmo relevo/volume das esferas da identidade visual, não um círculo chapado. */
.no-flor {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--tulipa), var(--cura) 75%);
  display: block;
}
.pillar-card h3, .service-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.pillar-card p, .service-card p { color: var(--text-soft); font-size: 0.94rem; }
.service-card .service-for { color: var(--cura); font-weight: 600; font-size: 0.88rem; margin-bottom: 10px; }
.service-link {
  display: inline-block; margin-top: 14px; color: var(--ceu); text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
}

.about-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }
.about-symbol { display: flex; justify-content: center; }
.about-symbol img { width: 100%; max-width: 280px; opacity: 0.92; }
.about-grid .credential {
  display: inline-block; margin-top: 18px; font-size: 0.86rem; color: var(--text-soft);
  border-top: 1px solid var(--border); padding-top: 14px;
}

.substack-card {
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
  padding: 50px; text-align: center;
}
.substack-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.substack-card p { color: var(--text-soft); max-width: 480px; margin: 0 auto 22px; }

.patient-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
@media (max-width: 800px) { .patient-steps { grid-template-columns: 1fr; } }
.patient-steps .step {
  background: var(--surface); border-radius: var(--radius-md); padding: 26px;
  border: 1px solid var(--border);
}
.patient-steps .step .n {
  font-family: 'Popsies', cursive; font-size: 1.6rem; color: var(--cura); margin-bottom: 10px;
}
.patient-links { display: flex; gap: 16px; flex-wrap: wrap; }

.contact-block {
  background: var(--marinho); border-radius: var(--radius-lg); padding: 56px 48px;
  color: var(--marfim-100); text-align: center;
}
.contact-block h2 { color: var(--marfim-100); }
.contact-block p { color: var(--esperanca); max-width: 480px; margin: 16px auto 30px; }
.contact-block a.btn-primary { background: var(--marfim-100); color: var(--marinho); }

footer.site-footer {
  padding: 40px 24px; text-align: center; color: var(--text-soft); font-size: 0.85rem;
}
footer.site-footer img { height: 56px; opacity: 0.7; margin-bottom: 10px; }

/* ---- O que te trouxe aqui (grade de sintomas) ---- */
.sintomas-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 700px) { .sintomas-grid { grid-template-columns: 1fr; } }
.sintoma-card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 22px 24px; text-decoration: none;
  color: var(--text); font-size: 1.02rem; font-weight: 600;
  box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease;
}
.sintoma-card:hover { border-color: var(--ceu); transform: translateY(-2px); }

/* ---- Página de sintoma ---- */
.sintoma-page { padding: 60px 0 80px; }
.back-link {
  color: var(--ceu); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  display: inline-block; margin-bottom: 28px;
}
.sintoma-title {
  font-size: 2.2rem; max-width: 680px; margin-bottom: 40px; line-height: 1.25;
}
.sintoma-body {
  max-width: 65ch; font-size: 1.0625rem; line-height: 1.7; color: var(--text);
}
.sintoma-body h2 {
  font-family: 'Acumin Pro', sans-serif; font-weight: 700; font-size: 1.15rem;
  color: var(--marinho); margin: 44px 0 14px;
}
.sintoma-body h2:first-child { margin-top: 0; }
.sintoma-body p { margin: 0 0 16px; color: var(--text); }

/* elemento de assinatura: filete bicolor, aparece só uma vez por página,
   imediatamente antes do bloco "quando é neurologia, psiquiatria, ou os dois" */
.sig-divider {
  height: 3px; max-width: 220px; margin: 40px 0 -10px;
  background: linear-gradient(90deg, var(--ceu), var(--cura));
  border-radius: 999px;
}

.sintoma-cta { margin: 48px 0; }
.sintoma-relacionados { margin: 40px 0; padding-top: 28px; border-top: 1px solid var(--border); }
.sintoma-relacionados ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sintoma-relacionados a {
  display: inline-block; background: var(--marfim); border-radius: 999px;
  padding: 8px 16px; color: var(--ceu); text-decoration: none; font-size: 0.88rem; font-weight: 600;
}
.sintoma-disclaimer {
  max-width: 65ch; font-size: 0.82rem; color: var(--text-soft);
  border-top: 1px solid var(--border); padding-top: 20px; margin-top: 40px;
}

/* ---- Como funciona ---- */
.como-funciona { padding: 60px 0 80px; }
.page-title { font-size: 2.2rem; margin-bottom: 14px; }
.cf-service {
  margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--border);
}
.cf-service:first-of-type { margin-top: 48px; }
.cf-service h2 { font-size: 1.4rem; margin-bottom: 6px; }
.cf-scope { color: var(--ceu); font-weight: 600; font-size: 0.9rem; margin-bottom: 14px; }
.cf-price {
  font-family: 'Popsies', cursive; font-size: 1.8rem; color: var(--cura); margin-bottom: 24px;
}
.cf-scope-note {
  max-width: 65ch; font-size: 0.86rem; color: var(--text-soft); margin-top: 40px;
}
.cf-facts { display: grid; gap: 18px; max-width: 640px; }
.cf-facts dt { font-weight: 700; font-size: 0.92rem; color: var(--marinho); margin-bottom: 3px; }
.cf-facts dd { margin: 0; color: var(--text-soft); font-size: 0.96rem; line-height: 1.55; }
.cf-practical { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--border); }
.cf-practical h2 { font-size: 1.4rem; margin-bottom: 24px; }
.cf-cta { margin-top: 48px; }

/* ---- Artigos ---- */
.artigos-index, .artigo-page { padding: 60px 0 80px; }
.artigos-empty { color: var(--text-soft); margin-top: 20px; }
.artigos-list { margin-top: 40px; display: grid; gap: 18px; }
.artigo-card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px 26px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease;
}
.artigo-card:hover { border-color: var(--ceu); transform: translateY(-2px); }
.artigo-date { display: block; font-size: 0.8rem; color: var(--ceu); font-weight: 600; margin-bottom: 6px; }
.artigo-card h2 { font-size: 1.2rem; margin-bottom: 6px; }
.artigo-card p { color: var(--text-soft); font-size: 0.94rem; margin: 0; }
.artigos-substack-note {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 0.88rem; color: var(--text-soft);
}
.artigos-substack-note a { color: var(--ceu); font-weight: 600; }

.artigo-title { font-size: 2.1rem; max-width: 700px; margin: 10px 0 36px; line-height: 1.25; }
.artigo-body {
  max-width: 65ch; font-size: 1.0625rem; line-height: 1.7; color: var(--text);
}
.artigo-body h1, .artigo-body h2, .artigo-body h3 {
  font-family: 'Acumin Pro', sans-serif; font-weight: 700; color: var(--marinho); margin: 36px 0 12px;
}
.artigo-body p { margin: 0 0 16px; }
.artigo-body img { max-width: 100%; border-radius: var(--radius-sm); margin: 20px 0; }
.artigo-body a { color: var(--ceu); }
.artigo-body blockquote {
  margin: 20px 0; padding: 4px 20px; border-left: 3px solid var(--cura); color: var(--text-soft);
}

/* ---- Pré-consulta em destaque ---- */
.pre-consulta-destaque {
  background: var(--marinho); color: var(--marfim-100); border-radius: var(--radius-lg);
  padding: 48px 44px; margin-top: 30px;
}
.pre-consulta-destaque h3 { color: var(--marfim-100); font-size: 1.7rem; margin-bottom: 16px; max-width: 560px; }
.pre-consulta-destaque p { color: var(--esperanca); max-width: 620px; margin-bottom: 26px; }
.pre-consulta-destaque a.btn-primary { background: var(--marfim-100); color: var(--marinho); }

/* ---- Para colegas / Traduzindo seu laudo ---- */
.para-colegas, .laudo-page { padding: 60px 0 80px; }
.pc-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); max-width: 65ch; }
.pc-block:first-of-type { margin-top: 44px; }
.pc-block h2 { font-size: 1.2rem; margin-bottom: 10px; }
.pc-block p { color: var(--text-soft); font-size: 1rem; line-height: 1.65; margin: 0; }

.laudo-lista { margin-top: 40px; display: grid; gap: 28px; max-width: 700px; }
.laudo-item { padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.laudo-item:last-child { border-bottom: none; }
.laudo-item h2 { font-size: 1.08rem; color: var(--marinho); margin-bottom: 8px; }
.laudo-item p { color: var(--text-soft); font-size: 0.98rem; line-height: 1.6; margin: 0; }

/* ---- Escalas autoaplicáveis ---- */
.wrap-narrow { max-width: 720px; }
.escalas-index, .escala-page, .escala-sobre-page { padding: 60px 0 80px; }

.escalas-grupo { margin-top: 44px; }
.escalas-grupo:first-of-type { margin-top: 48px; }
.escalas-grupo h2 { font-size: 1.2rem; margin-bottom: 18px; color: var(--marinho); }
.escalas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .escalas-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .escalas-grid { grid-template-columns: 1fr; } }
.escala-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px 20px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease;
}
.escala-card:hover { border-color: var(--ceu); transform: translateY(-2px); }
.escala-card-nome { font-family: 'Acumin Pro', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--marinho); }
.escala-card-completo { font-size: 0.86rem; color: var(--text-soft); }
.escala-card-itens { font-size: 0.8rem; color: var(--ceu); font-weight: 600; margin-top: 8px; }

.escalas-credencial { margin-top: 56px; font-size: 0.86rem; font-weight: 600; color: var(--marinho); }
.escalas-disclaimer-rodape { margin-top: 6px; font-size: 0.82rem; color: var(--text-soft); max-width: 65ch; }

.escala-nome-completo { color: var(--text-soft); font-size: 1rem; margin: 4px 0 24px; }
.escala-privacidade {
  font-size: 0.88rem; color: var(--ceu); background: var(--marfim); border-radius: var(--radius-md);
  padding: 14px 18px; margin-bottom: 32px;
}
.escala-instrucoes { font-size: 1.05rem; margin-bottom: 20px; max-width: 65ch; }

.escala-progresso {
  position: sticky; top: 66px; z-index: 5;
  display: inline-block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 16px; font-size: 0.82rem; font-weight: 600; color: var(--ceu);
  margin-bottom: 24px; box-shadow: var(--shadow);
}

.escala-itens { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.escala-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px 22px 18px;
}
.escala-item-texto { font-size: 1rem; line-height: 1.55; margin-bottom: 16px; }
.escala-item-num { color: var(--ceu); font-weight: 700; }
.escala-opcoes { display: flex; flex-direction: column; gap: 8px; }
.escala-opcao {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-input, var(--border)); border-radius: var(--radius-md);
  padding: 11px 14px; cursor: pointer; font-size: 0.94rem;
  transition: border-color .15s ease, background .15s ease;
}
.escala-opcao:has(input:checked) { border-color: var(--ceu); background: var(--marfim); font-weight: 600; }
.escala-opcao input { accent-color: var(--ceu); width: 18px; height: 18px; flex-shrink: 0; }

.escala-erro {
  color: var(--marsala); background: #FBEAE0; border-radius: var(--radius-md);
  padding: 12px 16px; font-size: 0.9rem; font-weight: 600; margin-bottom: 20px;
}

.escala-resultado { margin-top: 8px; }
.escala-alerta-bloco {
  background: var(--marinho); color: var(--marfim-100); border-radius: var(--radius-lg);
  padding: 32px 28px; margin-bottom: 28px;
}
.escala-alerta-bloco h3 { color: var(--marfim-100); font-size: 1.2rem; margin-bottom: 14px; }
.escala-alerta-bloco p { color: var(--esperanca); margin: 0 0 10px; line-height: 1.6; }
.escala-alerta-bloco p:last-child { margin-bottom: 0; }

.escala-resultado-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px 30px; box-shadow: var(--shadow); text-align: center;
}
.escala-resultado-kicker { font-family: 'Popsies', cursive; color: var(--ceu); font-size: 1.1rem; display: block; margin-bottom: 8px; }
.escala-escore { font-family: 'Acumin Pro', sans-serif; font-weight: 700; font-size: 2.6rem; color: var(--marinho); margin: 0; }
.escala-rotulo { font-size: 1.1rem; font-weight: 700; color: var(--cura); margin: 6px 0 14px; }
.escala-texto-resultado { color: var(--text-soft); max-width: 52ch; margin: 0 auto; }

.escala-aviso-fixo {
  font-size: 0.85rem; color: var(--text-soft); border-top: 1px solid var(--border);
  margin-top: 24px; padding-top: 18px;
}
.escala-limitacoes { font-size: 0.85rem; color: var(--text-soft); margin-top: 10px; }
.escala-referencia { font-size: 0.82rem; color: var(--text-soft); margin-top: 10px; }
.escala-resultado-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* ---- Cena dos nós: a sempre-viva como índice vivo (ver
   docs/brief-animacao-sempre-viva.md). O símbolo NUNCA gira — perde nitidez/
   presença (scale + blur + opacidade) num zoom-out só no início da seção e
   fica parado depois disso. As 6 bolinhas são um overlay de <circle> nas
   coordenadas reais da flor (src/lib/nos-sempre-viva.ts) — por isso caem
   exatamente em cima da terminação certa, sem nenhum ajuste manual aqui.
   Estado nunca "apaga": uma vez visitada, a terminação fica marcada. Sem
   scroll-jack nem pin pra quem prefere menos movimento ou tela estreita —
   vira lista/grade estática com as 6 já acesas. ---- */
.cena-nos {
  position: relative;
  height: 700vh;
  background: var(--marinho);
}
.cena-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9vw;
  color: var(--marfim-100);
}
.cena-luz {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 55% 65% at 14vw 50%,
    rgba(39, 87, 109, 0.35),
    rgba(196, 161, 107, 0.12) 45%,
    transparent 72%
  );
  pointer-events: none;
}
.cena-flor {
  position: absolute;
  top: 50%; left: 50%;
  /* Unidade puramente proporcional ao viewport (sem cap fixo em px) de
     propósito: no zoom máximo (escala 2.6, ver Layout.astro) mais o
     deslocamento até ~14vw, um cap fixo faz as terminações mais à esquerda
     (Serviços/A, Pacientes/H) saírem da tela em telas estreitas — testado
     e confirmado. Em vw puro a proporção nó-vs-âncora se mantém igual em
     qualquer largura, sempre com margem. */
  width: 11vw;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
}
/* Opacidade e blur ficam só no path (não no <svg> pai): senão as bolinhas
   .no borrariam/apagariam junto com a flor — o oposto da profundidade de
   campo que o efeito pede (flor desfocada, bolinha ativa em foco nítido). */
.flor-base { fill: var(--tulipa); will-change: opacity, filter; }
/* Estados da terminação: apagada (default, invisível — só a bolinha do path
   base aparece, na opacidade fraca da flor) / ativa (acesa, com glow) /
   visitada (fica marcada, sem glow, nunca volta a apagada). */
.no {
  opacity: 0;
  fill: var(--tulipa);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    fill 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}
.no.ativa {
  opacity: 1;
  fill: var(--canario);
  transform: scale(1.35);
  filter: drop-shadow(0 0 7px rgba(224, 208, 128, 0.75));
}
.no.visitada {
  opacity: 0.55;
  fill: var(--tulipa);
  transform: scale(1);
  filter: none;
}
.cena-linha-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.linha-conexao {
  fill: none;
  stroke: var(--canario);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cena-texto {
  position: relative;
  z-index: 1;
  width: min(520px, 86vw);
  text-align: left;
}
.cena-kicker {
  font-family: 'Popsies', cursive; color: var(--tulipa);
  font-size: 1.3rem; display: block; margin-bottom: 28px;
}
.cena-lista { position: relative; list-style: none; margin: 0; padding: 0; min-height: 200px; }
.cena-item {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cena-item.ativo { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cena-item a { display: block; text-decoration: none; color: inherit; }
.cena-rotulo {
  display: block;
  font-family: 'Popsies', cursive; font-size: 1.8rem; color: var(--marfim-100);
}
.cena-blurb { display: block; margin-top: 12px; color: var(--esperanca); font-size: 1.02rem; max-width: 46ch; }

@media (prefers-reduced-motion: reduce), (max-width: 760px) {
  .cena-nos { height: auto; }
  .cena-pin {
    position: static; height: auto; display: block;
    padding: 64px 24px; opacity: 1 !important;
  }
  .cena-luz { display: none; }
  .cena-flor {
    position: static; transform: none !important;
    width: 150px; height: auto; display: block; margin: 0 auto 32px;
  }
  .flor-base { opacity: 1 !important; filter: none !important; }
  .no {
    opacity: 1 !important; fill: var(--canario) !important;
    transform: none !important; filter: none !important;
  }
  .cena-linha-svg { display: none; }
  .cena-texto { width: 100%; max-width: 980px; margin: 0 auto; }
  .cena-kicker { text-align: center; }
  .cena-lista {
    position: static; min-height: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left;
  }
  .cena-item {
    position: static; opacity: 1 !important; pointer-events: auto;
    transform: none !important;
  }
  .cena-item a {
    display: flex; flex-direction: column; height: 100%;
    background: rgba(255, 250, 243, 0.07); border-radius: var(--radius-md); padding: 22px;
  }
}
@media (max-width: 560px) {
  .cena-lista { grid-template-columns: 1fr; }
}

/* ---- Footer links ---- */
.footer-links {
  margin-top: 22px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.footer-links a.btn-primary { font-size: 0.9rem; padding: 12px 26px; }