/* Meu espaço — rota /membros do handoff V3.2, na linguagem do site (tokens de
   start.css, vidro, tema claro/escuro). Dados só do navegador. */
.esp { --mc-gutter: 16px; overflow-x: clip; padding-bottom: 40px; }
.esp section { padding-block: 0; }
.esp-env { max-width: var(--largura); margin-inline: auto; padding-inline: var(--mc-gutter); }
@media (min-width: 640px) { .esp { --mc-gutter: 24px; } }
.esp :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.esp .btn { min-height: 44px; }
:root[data-tema="escuro"] .esp .btn:not(.vazado):not(.calmo) { color: #06140a; }

.esp-cabeca { padding-block: 24px 6px; }
.esp-cabeca h1 { font-size: clamp(1.9rem, 6.4vw, 3.4rem); margin-top: 8px; max-width: 18ch; }
.esp-cabeca p { margin-top: 10px; max-width: 60ch; font-size: .98rem; }

.esp .esp-passo { display: grid; gap: 20px; margin-top: 20px; padding: 22px 18px; border-radius: var(--raio-g);
  background: var(--vidro); box-shadow: var(--vidro-sombra), inset 0 0 0 1px var(--linha);
  border-top: 4px solid var(--sage, #8FAE9D);
  -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); }
.esp-passo h2 { font-size: clamp(1.5rem, 4.6vw, 2.3rem); margin: 8px 0 12px; }
.esp-passo p { font-size: .95rem; }
.esp-passo .acoes { margin-top: 18px; }
.esp-estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 11px; border-radius: 980px;
  font-size: .78rem; font-weight: 700; background: var(--fundo-2); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linha); }
.esp-estado.ok { color: var(--acento); }
.esp-estado.ok::before { content: "✓"; }
.esp-prog { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 20px 16px; border-radius: var(--raio);
  background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--linha); align-content: center; }
.esp-anel { --p: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; font-weight: 700;
  color: var(--tinta); background: conic-gradient(var(--acento) calc(var(--p) * 1%), color-mix(in srgb, var(--acento) 18%, transparent) 0); position: relative; }
.esp-anel::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--fundo-2); }
.esp-anel span { position: relative; }
.esp-prog h3 { font-size: 1.1rem; margin: 4px 0 0; }
.esp-prog p { font-size: .84rem; }

.esp-baixo { display: grid; gap: 16px; margin-top: 24px; }
.esp h2.esp-titulo { font-size: 1.4rem; margin: 26px 0 0; letter-spacing: -.02em; }
.esp-caminho { list-style: none; padding: 6px 18px; border-radius: var(--raio-g); background: var(--vidro);
  box-shadow: var(--vidro-sombra), inset 0 0 0 1px var(--linha);
  -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); }
.esp-caminho li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px;
  padding-block: 10px; border-bottom: 1px solid var(--linha); }
.esp-caminho li:last-child { border-bottom: 0; }
.esp-caminho .n { font-size: .78rem; font-weight: 800; color: var(--acento); letter-spacing: .04em; }
.esp-caminho b { font-size: 1rem; color: var(--tinta); }
.esp-caminho .s { font-size: .8rem; color: var(--tinta-2); text-align: right; }
.esp-caminho li[data-feito="1"] .s { color: var(--acento); font-weight: 700; }
.esp-radar { padding: 20px 18px; border-radius: var(--raio-g); background: var(--vidro);
  box-shadow: var(--vidro-sombra), inset 0 0 0 1px var(--linha); align-content: start; display: grid; gap: 8px;
  -webkit-backdrop-filter: var(--vidro-blur); backdrop-filter: var(--vidro-blur); }
.esp-radar h3 { font-size: 1.3rem; }
.esp-radar p { font-size: .9rem; }
.esp-radar .btn { justify-self: start; margin-top: 8px; }

@media (min-width: 900px) {
  .esp .esp-passo { grid-template-columns: minmax(0, 1fr) 280px; padding: 30px 32px; }
  .esp-baixo { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}