/* ============================================================
   TRIAGEM 360° INFANTIL — camada própria sobre triagem.css
   Herda tokens, tipografia, nav, botões, ficha, vinhetas, duel,
   split, report, protocolo, steps, bio, ponte, nots, FAQ, final
   e footer da base. Aqui só o que é EXCLUSIVO do infantil:
   · hero "convergência" (casa × escola → um caso)
   · seção "os dois erros" (tensão âmbar com eixo central)
   · "duas lentes" + leitura cruzada (papel com barras casa/escola)
   · régua de idade interativa (protocolo por faixa)
   Regra do domínio preservada: conteúdo visível por padrão —
   sem JS, as três fichas de faixa aparecem empilhadas e a régua
   nem é exibida.
   ============================================================ */

/* As entradas laterais do GSAP (.erro x:±44, .lente x:±36) deslocam
   elementos pra fora da viewport antes do gatilho de scroll — sem isto,
   a página inteira alarga no mobile (overflow horizontal real). `clip`
   não cria contêiner de rolagem (sticky da nav segue funcionando). */
main { overflow-x: clip; }
@supports not (overflow-x: clip) { main { overflow-x: hidden; } }

/* ---------- Nav: sufixo da marca ---------- */
.brand-sub {
  font-family: var(--font-mono);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-left: 2px;
}

/* ---------- Hero: convergência casa × escola ---------- */
.hero-inf { position: relative; overflow: hidden; }

.converge {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .9;
}
.cv-linha {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  /* comprimento real ~720; o JS anima o offset (desenho). Sem JS: traçada. */
  stroke-dasharray: 6 10;
}
.cv-casa   { stroke: #f5b04855; }
.cv-escola { stroke: #1e90ff55; }
.cv-no circle { fill: var(--blue-soft); }
.cv-halo {
  fill: none; stroke: var(--blue); stroke-width: 1;
  opacity: .35;
}
.cv-rotulo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  fill: var(--text-3);
}
.cv-rotulo--no { fill: var(--blue-soft); }

/* o conteúdo do hero fica acima do desenho */
.hero-inf .hero-grid { position: relative; z-index: 1; }

/* ---------- Os dois erros ---------- */
.erros {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: stretch;
  margin-top: clamp(30px, 5vw, 52px);
}
.erro {
  background: var(--navy-card);
  border: 1px solid #f5b04826;
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
}
.erro-titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
  color: var(--warn);
  margin-bottom: 12px;
}
.erro p:not(.erro-titulo) { color: var(--text-2); font-size: .98rem; }
/* eixo central: a linha onde os dois erros se equilibram */
.erros-eixo {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
  position: relative;
}
.erros-eixo::after {
  content: "×";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-3);
  background: var(--navy-2);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.erros-fecho { margin-top: clamp(26px, 4vw, 40px); max-width: 68ch; }
.erros-fecho strong { color: var(--blue-soft); }

/* ---------- Duas lentes ---------- */
.lentes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(30px, 5vw, 48px);
}
.lente {
  background: var(--navy-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
}
.lente-head {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.06rem;
  display: flex; align-items: center; gap: 10px;
}
.lente-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 4px #f5b04822;
  flex: none;
}
.lente--escola .lente-dot { background: var(--blue); box-shadow: 0 0 0 4px #1e90ff22; }
.lente-desc { color: var(--text-2); font-size: .97rem; }
.lente-meta { margin-top: auto; padding-top: 8px; }

/* ---------- Leitura cruzada (papel, linguagem do report) ---------- */
.cruzamento {
  position: relative;
  margin-top: clamp(30px, 5vw, 48px);
  max-width: 620px;
  margin-inline: auto;
}
.cruz-page {
  background: #f4f1e8;
  color: #23292f;
  border-radius: 10px;
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: 0 30px 60px -30px #00000088, 0 4px 14px -6px #00000055;
  transform: rotate(-.6deg);
}
.cruz-page .mono { color: #6b7280; }
.cruz-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  color: #1a2027;
  margin: 14px 0 18px;
}
.cruz-title em { font-style: italic; color: #0a4d96; }
.cruz-table { display: flex; flex-direction: column; gap: 10px; }
.cruz-row {
  display: grid;
  grid-template-columns: 92px 1fr 1fr;
  gap: 14px;
  align-items: center;
  font-size: .85rem;
}
.cruz-head span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.cruz-row span:first-child { color: #3c434b; font-weight: 500; }
/* barras: âmbar = casa, azul = escola; largura final em --v (JS anima --cw) */
.cruz-row i {
  --cw: 1; /* multiplicador animável: sem JS, barra completa */
  display: block; height: 10px; border-radius: 5px;
  background: #f5b048;
  width: calc(var(--v, .5) * var(--cw) * 100%);
  min-width: 6px;
}
.cruz-row i + i { background: #1e90ff; }
.cruz-nota { margin-top: 18px; font-size: .82rem; color: #57606a; }

/* multiplicador registrado pra interpolar como número */
@property --cw { syntax: "<number>"; inherits: false; initial-value: 1; }

/* ---------- Régua de idade ---------- */
/* Sem JS a régua não aparece (botões sem comportamento são pior que nada)
   e as três fichas ficam empilhadas — conteúdo visível por padrão. */
.regua { display: none; }

body.js-regua-on .regua {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  gap: 0;
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--navy-card);
  padding: 6px;
}
.regua-faixa {
  position: relative; z-index: 1;
  appearance: none; background: none; border: 0;
  font-family: var(--font-body);
  color: var(--text-2);
  padding: 12px 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: color .25s ease;
}
.regua-faixa:hover { color: var(--text); }
.regua-faixa.is-on { color: var(--text); }
.regua-anos {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.01em;
}
.regua-nome {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.regua-faixa.is-on .regua-nome { color: var(--blue-soft); }
/* trilho: pílula que desliza sob a faixa ativa (posição via --pos no JS) */
.regua-trilho {
  position: absolute; z-index: 0;
  top: 6px; bottom: 6px;
  left: calc(6px + var(--pos, 1) * ((100% - 12px) / 3));
  width: calc((100% - 12px) / 3);
  border-radius: 999px;
  background: #1e90ff1c;
  border: 1px solid #1e90ff3d;
  transition: left .45s cubic-bezier(.16, .9, .24, 1);
}

/* fichas de faixa: todas visíveis sem JS; com JS, só a ativa */
.protocolos { position: relative; }
.prot-faixa { margin-top: clamp(24px, 4vw, 40px); }
body.js-regua-on .prot-faixa { display: none; margin-top: clamp(20px, 3vw, 32px); }
body.js-regua-on .prot-faixa.is-on { display: block; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .converge { opacity: .45; }
  .lentes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .erros { grid-template-columns: 1fr; }
  .erros-eixo { display: none; }
  .cruz-row { grid-template-columns: 72px 1fr 1fr; gap: 10px; }
  .regua-nome { display: none; }
}