/* ==========================================================================
   Kit de peças
   Tudo que aparece nas telas sai daqui. Se uma tela nova precisar de uma peça
   que não está nesta página, ela vira peça aqui primeiro.
   A página é montada com os MESMOS componentes das telas — não com cópias.
   ========================================================================== */

.kit__secao { border-top: 1rem solid var(--line); padding-top: 24rem; margin-top: 24rem; }
.kit__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20rem; margin-bottom: 14rem; }
.kit__cabeca h2 {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11rem;
  letter-spacing: .14em;
  width: 180rem;
  flex: none;
}
.kit__cabeca p { font-size: 13rem; color: var(--ink-3); max-width: 600rem; line-height: 1.55; }

.kit__cores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tablet .kit__cores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mobile:not(.tablet) .kit__cores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit__cor { padding: 12rem 14rem; }
.kit__amostra { height: 34rem; }
.kit__cor .dado { font-size: 10rem; letter-spacing: .1em; margin-top: 8rem; }
.kit__cor .apoio { font-size: 12rem; margin-top: 2rem; }

.kit__tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile .kit__tipos { grid-template-columns: minmax(0, 1fr); }
.kit__tipo { padding: 16rem 18rem; display: flex; flex-wrap: wrap; align-items: center; gap: 20rem; }
.kit__tipo .rotulo { width: 96rem; flex: none; font-size: 10rem; letter-spacing: .1em; }

.kit__medidores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tablet .kit__medidores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mobile:not(.tablet) .kit__medidores { grid-template-columns: minmax(0, 1fr); }
.kit__medidor { padding: 18rem 18rem 16rem; }
.kit__medidor .apoio { margin-top: 6rem; }

.kit__auth { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mobile .kit__auth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kit__auth > div { padding: 16rem 18rem; }

.kit__prontidao { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10rem; }
.mobile .kit__prontidao { grid-template-columns: minmax(0, 1fr); }
.kit__prontidao > div { padding: 18rem 20rem; }
.kit__estados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tablet .kit__estados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile:not(.tablet) .kit__estados { grid-template-columns: minmax(0, 1fr); }
.kit__estados > div { padding: 16rem 18rem; }

.kit__exemplo-linha {
  display: flex;
  align-items: center;
  gap: 12rem;
  padding: 8rem 10rem;
  background: var(--bg);
  border: 1rem solid var(--line);
}