/* ==========================================================================
   doc.css · páginas internas (jornadas, memorandos, números)
   cabeçalho do documento + os três módulos de conteúdo
   ========================================================================== */

/* --------------------------------------------------------------------------
   Escala
   Todo clamp() tem como mínimo o valor que a página já usava — num notebook
   (~1280px) nada muda. A partir daí texto e largura crescem com a tela, para
   o documento não encolher num monitor grande.
   -------------------------------------------------------------------------- */
body { padding: 38px clamp(34px, 3vw, 64px) 30px; }

.sheet { max-width: clamp(940px, 62vw, 1240px); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Cabeçalho do documento
   -------------------------------------------------------------------------- */
.kicker {
  font-size: clamp(11px, 0.72vw, 14px); letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700; text-align: center;
}
h1 {
  font-size: clamp(30px, 2.1vw, 44px); line-height: 1.15; margin-top: 10px;
  letter-spacing: -0.3px; text-align: center;
}
.subtitle {
  font-size: clamp(14px, 1vw, 18px); color: var(--ink-3); margin: 12px auto 0; line-height: 1.55;
  max-width: clamp(700px, 46vw, 920px); text-align: center;
}
.header-rule { margin: 20px auto 8px; }
.legend {
  display: flex; gap: 14px 22px; flex-wrap: wrap; justify-content: center;
  margin: 16px auto 4px; max-width: clamp(780px, 50vw, 1000px);
  font-size: clamp(12.5px, 0.8vw, 15px); color: var(--ink-3); text-align: center;
}
.legend b { color: var(--ink); }
.notes { margin-top: 18px; font-size: 11.5px; color: var(--ink-4); line-height: 1.6; text-align: center; }
.footer {
  margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--ink-4); line-height: 1.55; text-align: center;
}

/* --------------------------------------------------------------------------
   Brilho sob a caixa · a receita mora em base.css
   Aqui só a altura: estas caixas são densas de texto, então a subida é mais
   curta que a dos cards do hub para não lavar a leitura.
   -------------------------------------------------------------------------- */
.bubble  { --glow-h: 50px; }
.section { --glow-h: 50px; }
.stat    { --glow-h: 44px; }

/* --------------------------------------------------------------------------
   Módulo: trilha de jornada  ·  keiko.html, marcelo.html
   Grid de 3 colunas: clínica | marco | sistema, sobre um trilho vertical.
   -------------------------------------------------------------------------- */
.steps { position: relative; margin-top: 26px; }
/* linha da trilha vertical · nós e rótulos a cobrem por completo */
.steps::before {
  content: ''; position: absolute; left: 50%; top: 30px; bottom: 30px;
  width: 3px; transform: translateX(-50%);
  background: var(--jc); border-radius: 2px; opacity: 0.4; z-index: 0;
}
.step {
  display: grid; grid-template-columns: 1fr clamp(176px, 13vw, 232px) 1fr; gap: 0 18px;
  align-items: stretch; margin-bottom: 26px; break-inside: avoid; page-break-inside: avoid;
  position: relative; z-index: 1;
}
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.node {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--jc); color: var(--jon); font-size: 19px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px var(--jc), 0 0 24px 2px var(--jc);
}
.step-title {
  font-size: clamp(15.5px, 1vw, 19px); font-weight: 800; margin-top: 12px; line-height: 1.25;
  background: var(--bg); border-radius: 9px; padding: 4px 8px;
}
.phase-chip {
  margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; padding: 3px 11px; border-radius: 20px;
  border: 1.5px solid var(--jc); color: var(--jt); background: var(--bg);
}
.phase-chip.filled { background: var(--jc); color: var(--jon); border-color: var(--jc); }
.key-note {
  grid-column: 1 / -1; justify-self: center; margin-top: 14px;
  background: var(--bg); border: 1.5px solid var(--jc); border-radius: 10px;
  color: var(--jt); font-size: 13px; font-weight: 700; line-height: 1.45;
  padding: 8px 20px; text-align: center; max-width: 620px;
}
.bubble {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 16px 17px 13px;
}
.bubble.right { background: var(--js); border-color: var(--jb); }
.bubble-head {
  font-size: clamp(11px, 0.72vw, 13.5px); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--jt); margin-bottom: 8px;
}
.bubble ul { list-style: none; }
.bubble li {
  font-size: clamp(15px, 0.95vw, 18px); line-height: 1.5; color: #DCE2DD; padding-left: 15px;
  position: relative; margin-bottom: 6px;
}
.bubble li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--jt); opacity: 0.85;
  filter: none;
}
.bubble li:last-child { margin-bottom: 0; }
.clinical-note {
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.22);
  font-size: clamp(13px, 0.85vw, 16px); line-height: 1.5; color: var(--ink-3);
}
.clinical-note b { color: var(--ink-2); font-weight: 700; }

/* --------------------------------------------------------------------------
   Âmbar · tudo que ainda não foi confirmado nunca se mistura ao texto vigente
   -------------------------------------------------------------------------- */
.page-banner {
  margin: 20px auto 0; max-width: 760px; border: 1.5px dashed var(--warn);
  background: rgba(217,164,65,0.06); border-radius: 12px; padding: 14px 20px 12px;
  font-size: 14px; color: var(--warn-ink); line-height: 1.55; text-align: center;
}
.page-banner-head {
  font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--warn); margin-bottom: 6px;
}
.pending {
  margin-top: 11px; border: 1.5px dashed var(--warn); border-radius: 10px;
  background: rgba(217,164,65,0.07); padding: 10px 13px 8px;
}
.pending-head {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--warn); margin-bottom: 6px;
}
.pending ul { list-style: none; }
.pending li {
  font-size: clamp(13px, 0.85vw, 15.5px); line-height: 1.45; color: var(--warn-ink); padding-left: 13px;
  position: relative; margin-bottom: 4px;
}
.pending li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--warn);
}
.pending li:last-child { margin-bottom: 0; }
.exceptions {
  margin-top: 30px; border: 1.5px dashed var(--warn); border-radius: 14px;
  background: rgba(217,164,65,0.05); padding: 17px 22px 14px;
  break-inside: avoid; page-break-inside: avoid;
}
.exceptions-head {
  font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--warn); margin-bottom: 10px;
}
.exceptions ul { list-style: none; }
.exceptions li {
  font-size: clamp(14px, 0.9vw, 17px); line-height: 1.5; color: #DCE2DD; padding-left: 15px;
  position: relative; margin-bottom: 6px;
}
.exceptions li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn);
}
.exceptions li:last-child { margin-bottom: 0; }
.exc-note {
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed rgba(217,164,65,0.35);
  font-size: 13px; line-height: 1.55; color: var(--warn-ink);
}

/* --------------------------------------------------------------------------
   Módulo: memorando  ·  reuniao.html, reuniao-05-08.html
   -------------------------------------------------------------------------- */
.sections { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.section {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 17px 18px 13px;
  break-inside: avoid; page-break-inside: avoid;
}
.section.wide { grid-column: 1 / -1; }
.section h2 {
  font-size: clamp(12px, 0.78vw, 14.5px); font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--jt); margin-bottom: 10px;
}
.section ul { list-style: none; }
.section li {
  font-size: clamp(12.3px, 0.82vw, 15.5px); line-height: 1.5; color: var(--ink-2); padding-left: 15px;
  position: relative; margin-bottom: 7px;
}
.section li::before {
  content: ''; position: absolute; left: 0; top: 7.5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--jt); opacity: 0.85;
  filter: none;
}
.section li b { color: var(--ink); }
.section .subgroup { margin-top: 12px; }
.section .subgroup:first-of-type { margin-top: 0; }
.section .subgroup-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--jt); margin-bottom: 7px; padding-top: 9px; border-top: 1px dashed rgba(255,255,255,0.18);
}
.section .subgroup:first-of-type .subgroup-head { padding-top: 0; border-top: none; }

/* --------------------------------------------------------------------------
   Módulo: números  ·  funil.html
   -------------------------------------------------------------------------- */
.stats { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.stat {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 23px 18px 16px;
  break-inside: avoid; page-break-inside: avoid; text-align: center;
}
.stat .value { font-size: clamp(38px, 2.6vw, 56px); font-weight: 800; color: var(--jt); letter-spacing: -1px; }
.stat .label { font-size: clamp(13px, 0.85vw, 16px); font-weight: 700; color: var(--ink); margin-top: 8px; line-height: 1.3; }
.stat .note { font-size: 11px; color: #8B948D; margin-top: 6px; }

/* --------------------------------------------------------------------------
   Responsivo · a sidebar segue off-canvas, os grids viram coluna única
   -------------------------------------------------------------------------- */
@media screen and (max-width: 880px) {
  body { padding: 68px 16px 30px; }
  .steps::before { display: none; }
  .step { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; }
  .center { flex-direction: row; gap: 12px; justify-content: flex-start; text-align: left; order: -1; }
  .step-title { margin-top: 0; }
  .phase-chip { margin-top: 0; }
  .sections { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Impressão · o site inteiro é feito para virar PDF apresentável
   -------------------------------------------------------------------------- */
@media print {
  body { padding: 0 34px 0 30px; }
  /* no papel o degradê vira mancha · a caixa recebe um traço nítido no topo */
  .bubble::after, .section::after, .stat::after {
    background: var(--jc); bottom: auto; top: 0; height: 3px;
  }
  .node { box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px var(--jc); }
  .step { margin-bottom: 12px; }
  .bubble { padding: 11px 14px 10px; }
  .bubble li { font-size: 12.5px; margin-bottom: 4px; }
  .bubble li::before { top: 7px; }
  .step-title { font-size: 13.5px; }
  .key-note { font-size: 11.5px; margin-top: 8px; padding: 6px 14px; }
  .clinical-note { font-size: 11px; margin-top: 8px; padding-top: 7px; }
  .pending { margin-top: 8px; padding: 8px 11px 6px; }
  .pending li { font-size: 11px; }
  .exceptions { margin-top: 18px; padding: 13px 18px 11px; }
  .exceptions li { font-size: 12px; }
  .exc-note { font-size: 11.5px; }
}