/* ==========================================================================
   Laço (bowtie): compartilhado entre Diagnostico.html ("Isso soa familiar?")
   e a home (hero). Mesma geometria (viewBox 0 0 520 384) e o mesmo
   tratamento de destaque: o que não está em foco cai para opacidade .3.
   ========================================================================== */

/* "Isso soa familiar?": texto + laço (bowtie). Cada bullet e o pino de mesmo
   número têm data-n; passar o mouse ou focar um apaga os outros. Só CSS (:has),
   então funciona sem estado no componente. */
.fam { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,520px); gap: 40px 64px; align-items: center; }
.fam-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #111111; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.fam li[data-n] { border-radius: 2px; }
.fam li[data-n]:focus-visible { outline: 2px solid #111111; outline-offset: 4px; }
.fam [data-n] { transition: opacity .15s ease; }
.fam:has([data-n="1"]:hover, li[data-n="1"]:focus-visible) [data-n]:not([data-n="1"]),
.fam:has([data-n="2"]:hover, li[data-n="2"]:focus-visible) [data-n]:not([data-n="2"]),
.fam:has([data-n="3"]:hover, li[data-n="3"]:focus-visible) [data-n]:not([data-n="3"]),
.fam:has([data-n="4"]:hover, li[data-n="4"]:focus-visible) [data-n]:not([data-n="4"]),
.fam:has([data-n="5"]:hover, li[data-n="5"]:focus-visible) [data-n]:not([data-n="5"]) { opacity: .3; }
.bowtie { display: block; width: 100%; height: auto; }
.bowtie .lbl { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; fill: #4B5563; }
.bowtie .pin text { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .fam [data-n] { transition: none; } }
@media (max-width: 782px) { .fam { grid-template-columns: minmax(0,1fr); } }
/* No celular o SVG encolhe ~0,64x: rótulos e números sobem para ficar ≥ 11px. */
@media (max-width: 500px) { .bowtie .lbl { font-size: 18px; } .bowtie .pin text { font-size: 18px; } }

/* ==========================================================================
   Home: o mesmo laço no hero, com as etapas como botões. Mesmo tratamento do
   diagnóstico (o que não está em foco cai para .3), mais a seleção por
   clique, que mostra a legenda. As formas são os controles (role="button");
   os nomes embaixo apontam para a mesma etapa (JS em /script.js, "Laço interativo").
   ========================================================================== */
.bts { display: grid; gap: 14px; width: 100%; max-width: 520px; }
/* Desenho técnico no escuro: o mesmo vocabulário das figuras de "Como eu
   enxergo o crescimento" (.tfig-plot e .tfig-svg em /styles.css), com a grade
   de pontos e a régua em tons claros. Traço de 1px em qualquer escala. */
.bts .bts-plot { --tfig-dot: rgba(255, 255, 255, 0.09); --tfig-muted: var(--dim-dark); padding: 0; }
.bts-fig {
  position: absolute; top: 0; left: 0; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1; color: var(--faint-dark);
}
.bowtie-dark polygon { fill: var(--bg-dark); stroke: var(--dim-dark); stroke-width: 1; }
.bowtie-dark .knot { fill: var(--text-dark); }
.bowtie-dark .bt-stage { cursor: pointer; outline: none; }
.bowtie-dark .bt-stage .hit { fill: transparent; }
.bowtie-dark .bt-stage.on polygon { fill: rgba(255, 255, 255, 0.16); stroke: var(--text-dark); }
/* foco do teclado: contorno na própria forma (outline em SVG falha no Safari) */
.bowtie-dark .bt-stage:focus-visible polygon,
.bowtie-dark .bt-stage:focus-visible .hit { stroke: var(--text-dark); stroke-width: 3; }
/* mesmo tratamento do diagnóstico: o que não é a etapa em destaque cai para .3 */
.bts [data-stage] { transition: opacity .15s ease; }
.bts.has-sel [data-stage]:not(.on) { opacity: .3; }

/* Botões das etapas: colunas na largura de cada parte do laço (20 a 500 no
   viewBox de 520), para cada nome ficar embaixo da sua forma. */
.bts-stages {
  display: grid; grid-template-columns: 105fr 105fr 60fr 70fr 70fr 70fr;
  padding: 0 calc(100% * 20 / 520);
}
.bts-btn {
  min-height: 44px; min-width: 0; padding: 0 2px; margin: 0;
  background: none; border: 0; border-radius: 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.1; color: var(--dim-dark);
}
.bts-btn .n { font-weight: 400; color: var(--faint-dark); }
.bts-btn.on { color: var(--text-dark); }
.bts-btn.on .n { color: var(--text-dark); }

/* Legenda: todas as frases ficam empilhadas e invisíveis na mesma célula da
   grade, então a altura é sempre a da maior e o hero não pula. */
.bts-cap { display: grid; font-size: 15px; line-height: 1.5; color: var(--dim-dark); min-height: 45px; }
.bts-cap > * { grid-area: 1 / 1; margin: 0; }
.bts-cap strong { color: var(--text-dark); font-weight: 600; }
.bts-ghost { visibility: hidden; }
.bts-hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--faint-dark); }

/* Celular: o laço fica estreito demais para seis nomes lado a lado; vira 3 × 2 */
@media (max-width: 559px) {
  .bts-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0; }
  .bts-btn { border: 1px solid var(--line-dark); }
  /* régua simplificada: só as marcas das divisas */
  .bts-plot .rule .minor { display: none; }
  .bts-btn.on { border-color: var(--text-dark); }
}
@media (prefers-reduced-motion: reduce) { .bts [data-stage] { transition: none; } }