*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--fundo);color:var(--texto);
  font-family:var(--fonte-corpo);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fonte-titulo);margin:0;font-weight:600}
p{margin:0}
.miolo{max-width:var(--largura);margin-inline:auto;padding-inline:var(--margem)}

/* ═══ Botão · a semente da casa ═══ */
.botao{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--botao-altura);padding-inline:var(--botao-respiro);
  border:1px solid transparent;border-radius:var(--raio-pilula);
  font:inherit;font-size:var(--botao-corpo);font-weight:600;letter-spacing:.01em;
  cursor:pointer;background:none;
  transition:color .45s var(--curva-mola),border-color .45s var(--curva-mola),transform .12s ease-out;
}
.botao:active{transform:scale(.97)}
.botao--pequeno{min-height:var(--botao-altura-pequeno);padding-inline:1.5rem;font-size:.8125rem;letter-spacing:.03em}
.botao__semente{position:absolute;inset:0;z-index:-1;clip-path:circle(var(--botao-semente-pequena) at var(--botao-nascente-pequena) 50%);transition:clip-path .5s var(--curva-mola)}
.botao__rotulo{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;transition:transform .45s var(--curva-mola),opacity .28s var(--curva-mola)}
.botao__rotulo--chegando{position:absolute;inset:0;justify-content:center;opacity:0;transform:translateX(var(--botao-desliza))}
.botao:focus-visible .botao__semente{clip-path:circle(150% at var(--botao-nascente-pequena) 50%)}
.botao:focus-visible .botao__rotulo{opacity:0;transform:translateX(var(--botao-desliza))}
.botao:focus-visible .botao__rotulo--chegando{opacity:1;transform:translateX(0)}
@media (hover:hover){
  .botao:hover .botao__semente{clip-path:circle(150% at var(--botao-nascente-pequena) 50%)}
  .botao:hover .botao__rotulo{opacity:0;transform:translateX(var(--botao-desliza))}
  .botao:hover .botao__rotulo--chegando{opacity:1;transform:translateX(0)}
}
.botao--contorno{border-color:var(--linha-forte);color:var(--texto)}
.botao--contorno .botao__semente{background:var(--destaque)}
.botao--contorno:focus-visible{border-color:var(--destaque);color:var(--sobre-destaque)}
@media (hover:hover){.botao--contorno:hover{border-color:var(--destaque);color:var(--sobre-destaque)}}
.botao[aria-busy="true"]{opacity:var(--opacidade-desativado);pointer-events:none}
.icone-girar{width:1rem;height:1rem;flex:none}

/* ═══ Abertura: saudação e o painel de luzes ═══ */
.abertura{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem)}
.abertura__saudacao{
  font-size:clamp(2.5rem,6.2vw,4.25rem);line-height:.98;letter-spacing:-.025em;font-weight:600;
}
.abertura__saudacao span{color:var(--texto-3);font-weight:400}
.abertura__linha{
  margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  padding-top:1.25rem;border-top:1px solid var(--linha);
}
.resumo{font-size:1.0625rem;color:var(--texto-2)}
.resumo strong{color:var(--texto);font-weight:600}

/* Uma luz por sistema, na mesma ordem das capinhas. Uma olhada e você sabe se está tudo de pé. */
.luzes{display:flex;gap:.4rem;align-items:center;list-style:none;margin:0;padding:0}
.luz{
  width:.75rem;height:.75rem;border-radius:var(--raio-pilula);
  background:var(--linha-forte);transition:background-color var(--tempo-estado) var(--curva-saida);
}
.luz[data-situacao="no-ar"]{background:var(--concluido)}
.luz[data-situacao="fora"]{background:var(--atrasado)}
.luz[data-situacao="construcao"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--esperando)}
.luz[data-situacao="conferindo"]{animation:piscar 1.1s ease-in-out infinite}
@keyframes piscar{50%{opacity:.35}}
.conferido{margin-left:auto;font-size:.8125rem;color:var(--texto-3);font-variant-numeric:tabular-nums}

/* ═══ Grupos ═══ */
.grupo{padding-block:1.25rem 2.25rem}
.grupo__topo{display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.1rem}
.grupo__titulo{font-size:1.375rem;letter-spacing:-.01em}
.grupo__conta{font-size:.8125rem;color:var(--texto-3);font-variant-numeric:tabular-nums}
.grupo__topo::after{content:"";flex:1;height:1px;background:var(--linha);align-self:center}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}

/* ═══ Capinha ═══ */
.capinha{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-card);
  color:inherit;text-decoration:none;overflow:hidden;
  transition:border-color var(--tempo-estado) var(--curva-saida),transform var(--tempo-estado) var(--curva-saida),box-shadow var(--tempo-estado) var(--curva-saida);
}
.capinha__capa{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:2/1;background:var(--fundo-2);
  display:grid;place-items:center;color:var(--grafite-700);
}
/* A semente do botão, aqui na capa: a lima nasce no canto e toma a capinha inteira. */
.capinha__semente{
  position:absolute;inset:0;z-index:-1;background:var(--destaque);
  clip-path:circle(0 at 1.4rem 1.4rem);transition:clip-path .6s var(--curva-mola);
}
.capinha__desenho{
  width:clamp(3.5rem,24%,5rem);height:auto;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--curva-mola),color var(--tempo-estado) var(--curva-saida);
}
.capinha__corpo{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.15rem 1.05rem;flex:1}
.capinha__nome{font-size:1.25rem;letter-spacing:-.01em;line-height:1.15}
.capinha__frase{font-size:.9375rem;color:var(--texto-2);line-height:1.4}
.capinha__pe{
  margin-top:auto;padding-top:.85rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  font-size:.8125rem;
}
.capinha__endereco{color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.capinha__abrir{
  position:relative;overflow:hidden;flex:none;display:inline-flex;
  font-weight:600;color:var(--destaque-tinta);
}
.capinha__abrir span{display:inline-flex;align-items:center;gap:.35rem;transition:transform .45s var(--curva-mola),opacity .28s var(--curva-mola)}
.capinha__abrir span + span{position:absolute;inset:0;opacity:0;transform:translateX(1.75rem)}
.capinha__abrir svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (hover:hover){
  a.capinha:hover{border-color:var(--linha-forte);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(13,15,11,.28)}
  a.capinha:hover .capinha__semente{clip-path:circle(150% at 1.4rem 1.4rem)}
  a.capinha:hover .capinha__desenho{transform:scale(1.06);color:var(--sobre-destaque)}
  a.capinha:hover .capinha__abrir span:first-child{opacity:0;transform:translateX(1.75rem)}
  a.capinha:hover .capinha__abrir span + span{opacity:1;transform:translateX(0)}
}
a.capinha:focus-visible{outline:none;border-color:var(--destaque);box-shadow:0 0 0 4px var(--destaque-lavado)}
a.capinha:focus-visible .capinha__semente{clip-path:circle(150% at 1.4rem 1.4rem)}
a.capinha:active{transform:scale(.985)}

/* Situação de cada sistema, no canto da capa */
.situacao{
  position:absolute;top:.75rem;right:.75rem;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .65rem .28rem .55rem;border-radius:var(--raio-pilula);
  background:var(--card);border:1px solid var(--linha);
  font-size:.75rem;font-weight:600;color:var(--texto-2);white-space:nowrap;
}
.situacao i{width:.5rem;height:.5rem;border-radius:var(--raio-pilula);background:var(--linha-forte);flex:none}
.situacao[data-situacao="no-ar"] i{background:var(--concluido)}
.situacao[data-situacao="fora"]{color:var(--atrasado);border-color:currentColor}
.situacao[data-situacao="fora"] i{background:var(--atrasado)}
.situacao[data-situacao="construcao"] i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--esperando)}
.situacao[data-situacao="conferindo"] i{animation:piscar 1.1s ease-in-out infinite}

/* Ainda não está no ar: a capinha fica, para lembrar que existe, mas não abre nada */
.capinha--construcao{border-style:dashed;border-color:var(--linha-forte)}
.capinha--construcao .capinha__capa{background:repeating-linear-gradient(-45deg,var(--fundo-2) 0 10px,var(--fundo) 10px 20px);color:var(--texto-3)}
.capinha--construcao .capinha__nome{color:var(--texto-2)}

/* ═══ Rodapé ═══ */
.rodape{
  margin-top:1rem;padding-block:1.75rem 3rem;border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;justify-content:space-between;
  font-size:.875rem;color:var(--texto-3);
}
.rodape p{max-width:62ch}
.cadeado{display:inline-flex;align-items:center;gap:.5rem}
.cadeado svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ═══ Cursor próprio ═══ */
.cursor-proprio,.cursor-proprio *{cursor:none}
.cursor{position:fixed;inset:0;z-index:var(--nivel-cursor);pointer-events:none;transition:opacity .25s var(--curva-saida)}
.cursor--fora{opacity:0}
.cursor__anel,.cursor__ponto{position:absolute;top:0;left:0;display:block;border-radius:999px;will-change:transform}
.cursor__anel{width:var(--cursor-anel);height:var(--cursor-anel);border:1px solid var(--cursor-sobre-claro);transition:width .32s var(--curva-saida),height .32s var(--curva-saida),background-color .32s var(--curva-saida)}
.cursor__ponto{width:var(--cursor-ponto);height:var(--cursor-ponto);background:var(--cursor-sobre-claro);transition:opacity .2s var(--curva-saida)}
.cursor--acionavel .cursor__anel{width:var(--cursor-anel-acionavel);height:var(--cursor-anel-acionavel);background:color-mix(in oklab,var(--cursor-sobre-claro) 10%,transparent)}
.cursor--acionavel .cursor__ponto{opacity:0}
.cursor--apertado .cursor__anel{width:var(--cursor-anel-apertado);height:var(--cursor-anel-apertado)}

/* ═══ Celular: capinha deitada, capa pequena à esquerda ═══ */
@media screen and (max-width:40rem){
  .abertura__linha{gap:.85rem 1.25rem}
  .conferido{margin-left:0;width:100%}
  .grade{grid-template-columns:1fr;gap:.7rem}
  .capinha{flex-direction:row}
  .capinha__capa{aspect-ratio:auto;width:5.75rem;flex:none}
  .capinha__desenho{width:2.9rem}
  .capinha__corpo{padding:.85rem 1rem .9rem;gap:.25rem;min-width:0}
  .capinha__nome{font-size:1.125rem;padding-right:0}
  .capinha__frase{font-size:.875rem}
  .capinha__pe{padding-top:.55rem}
  .situacao{position:static;padding:.18rem .55rem .18rem .45rem;font-size:.6875rem}
  .capinha__endereco{display:none}
  .barra-sistema .botao__texto-longo{display:none}
}
@media (prefers-reduced-motion: reduce){
  .cursor{display:none}
  .cursor-proprio,.cursor-proprio *{cursor:auto}
  .luz[data-situacao="conferindo"],.situacao[data-situacao="conferindo"] i{animation:none}
}

.resumo__fora{color:var(--atrasado)}

/* Sair: discreto, mas com alvo de toque inteiro */
.botao-sair{
  min-height:var(--alvo-minimo);padding-inline:.9rem;border:0;background:none;border-radius:var(--raio-pilula);
  font:inherit;font-size:.8125rem;font-weight:600;color:var(--texto-3);cursor:pointer;
  transition:color var(--tempo-estado) var(--curva-saida);
}
@media (hover:hover){.botao-sair:hover{color:var(--texto)}}

/* ═══ Tela de entrar ═══ */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:2rem var(--margem)}
.entrada__cartao{
  width:100%;max-width:26rem;display:flex;flex-direction:column;gap:2rem;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:clamp(1.75rem,5vw,2.5rem);
}
.entrada__cartao .logotipo{width:8.5rem;color:var(--texto)}
.entrada__titulo{font-size:clamp(2rem,6vw,2.5rem);line-height:1;letter-spacing:-.02em}
.entrada__titulo span{display:block;color:var(--texto-3);font-weight:400}
.entrada__formulario{display:flex;flex-direction:column;gap:.6rem}
.entrada__formulario label{font-size:.875rem;font-weight:600;color:var(--texto-2)}
.campo-texto{
  min-height:3.25rem;padding:0 1rem;border:1px solid var(--linha-forte);border-radius:.7rem;
  background:var(--fundo);color:var(--texto);font:inherit;font-size:1rem;
  transition:border-color var(--tempo-estado) var(--curva-saida),box-shadow var(--tempo-estado) var(--curva-saida);
}
.campo-texto:focus{outline:none;border-color:var(--destaque-tinta);box-shadow:0 0 0 4px var(--destaque-lavado)}
.entrada__erro{min-height:1.4rem;font-size:.875rem;color:var(--atrasado);font-weight:600}
.entrada__formulario .botao{width:100%;margin-top:.25rem}
.botao--principal{background:var(--destaque);color:var(--sobre-destaque)}
.botao--principal .botao__semente{background:var(--texto)}
.botao--principal .botao__semente{clip-path:circle(var(--botao-semente) at var(--botao-nascente) 50%)}
.botao--principal:focus-visible{color:var(--destaque)}
.botao--principal:focus-visible .botao__semente{clip-path:circle(150% at var(--botao-nascente) 50%)}
@media (hover:hover){
  .botao--principal:hover{color:var(--destaque)}
  .botao--principal:hover .botao__semente{clip-path:circle(150% at var(--botao-nascente) 50%)}
}
.botao__seta{flex:none;width:1.05rem;height:1.05rem}