/* /sistema — #sis-limites (o que o sistema não faz + LGPD), #sis-implantacao (as seis
   fases com critério de saída) e #sis-anexo (a engenharia, recolhida em acordeão). */

/* ================================================================= OS LIMITES */
#sis-limites{background:#F5F5F5}

.lim__acc{
  margin-top:calc(80 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.lim__acc ul{grid-column:2 / span 3}

.acc__item{border-bottom:1px solid #E0E0E0; transition:border-color .28s cubic-bezier(.45,0,.2,1)}
.acc__item:first-child{border-top:1px solid #E0E0E0}
.acc__item.is-open{border-bottom-color:#0C0C0C}
.acc__q{
  position:relative;
  display:block; width:100%; text-align:left;
  padding:calc(17 * var(--vhu)) calc(40 * var(--u)) calc(17 * var(--vhu)) 0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(17 * var(--u)); line-height:calc(20 * var(--vhu));
  text-transform:uppercase;
  color:#6E6E6E;
  transition:color .18s ease;
  cursor:none;
}
.acc__q::after,.acc__q::before{
  content:''; position:absolute; right:calc(4 * var(--u)); top:50%;
  background:#B0B0B0; transition:background-color .22s ease, transform .28s cubic-bezier(.45,0,.2,1);
}
.acc__q::before{width:calc(11 * var(--u)); height:1px; margin-top:-0.5px}
.acc__q::after{width:1px; height:calc(11 * var(--u)); margin-top:calc(-5.5 * var(--u)); margin-right:calc(5 * var(--u))}
.acc__q:hover,.acc__item.is-open .acc__q{color:#0C0C0C}
.acc__q:hover::before,.acc__q:hover::after,
.acc__item.is-open .acc__q::before,.acc__item.is-open .acc__q::after{background:#0C0C0C}
.acc__item.is-open .acc__q::after{transform:scaleY(0)}

.acc__panel{height:0; overflow:hidden; transition:height .28s cubic-bezier(.45,0,.2,1)}
.acc__inner{padding:0 0 calc(22 * var(--vhu))}
.acc__inner p{
  width:calc(620 * var(--u));
  font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu));
  color:#3A3A3A;
}

/* LGPD */
.lim__lgpd{
  margin-top:calc(104 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
  align-items:start;
}
.lim__lgpd__head{grid-column:1}
.lim__lgpd__head b{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-weight:normal;
  font-size:calc(17 * var(--u)); line-height:calc(19 * var(--vhu));
  text-transform:uppercase; color:#0C0C0C;
}
.lim__lgpd__head p{
  margin-top:calc(14 * var(--vhu));
  font-size:calc(11 * var(--u)); line-height:calc(14 * var(--vhu));
  color:#5A5A5A;
}
.lim__lgpd__list{
  grid-column:2 / span 3;
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
  border-top:1px solid #0C0C0C;
}
.lim__lgpd__list li{
  position:relative;
  padding:calc(13 * var(--vhu)) calc(12 * var(--u)) calc(13 * var(--vhu)) calc(22 * var(--u));
  border-bottom:1px solid #E0E0E0;
  font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu));
  color:#3A3A3A;
}
.lim__lgpd__list li::before{
  content:''; position:absolute; left:0; top:calc(18 * var(--vhu));
  width:calc(12 * var(--u)); height:1px; background:var(--c-blue);
}

/* ================================================================= IMPLANTAÇÃO */
#sis-implantacao{background:#fff}

.imp__table{margin-top:calc(80 * var(--vhu))}
.imp__hd,.imp__fase{
  display:grid;
  grid-template-columns:calc(56 * var(--u)) calc(232 * var(--u)) 1fr 1fr;
  column-gap:calc(16 * var(--u));
}
.imp__hd{
  padding-bottom:calc(11 * var(--vhu));
  border-bottom:1px solid #0C0C0C;
  font-size:calc(7.5 * var(--u)); color:#6E6E6E;
}
.imp__fase{
  position:relative;
  align-items:start;
  padding:calc(24 * var(--vhu)) 0 calc(26 * var(--vhu));
  border-bottom:1px solid #E8E8E8;
}
.imp__fase__hair{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:#0C0C0C; transform:scaleX(0); transform-origin:left center;
}
.imp__fase__n{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:calc(15 * var(--u)); line-height:1; color:var(--c-blue);
}
.imp__fase__nome{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(17 * var(--u)); line-height:calc(19 * var(--vhu));
  text-transform:uppercase; color:#0C0C0C;
}
.imp__fase__c{
  font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu)); color:#4A4A4A;
  padding-left:calc(14 * var(--u));
  border-left:1px solid #E8E8E8;
}
/* a coluna do criterio de saida e a que importa: fio azul a marca */
.imp__fase__c--saida{border-left-color:var(--c-blue); color:#0C0C0C}
.imp__hd span:nth-child(3),.imp__hd span:nth-child(4){padding-left:calc(14 * var(--u))}
.imp__hd span:nth-child(4){color:var(--c-blue)}

/* ================================================================= ANEXO */
#sis-anexo{background:#F5F5F5; padding-bottom:calc(140 * var(--vhu))}

.anx__acc{
  margin-top:calc(72 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.anx__acc ul.anx__list{grid-column:2 / span 3}

.anx__intro{
  width:calc(660 * var(--u));
  font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu));
  color:#3A3A3A;
}
.anx__pairs{margin-top:calc(22 * var(--vhu)); border-top:1px solid #D6D6D6}
.anx__pairs > div{
  display:grid; grid-template-columns:calc(232 * var(--u)) 1fr; column-gap:calc(16 * var(--u));
  padding:calc(12 * var(--vhu)) 0;
  border-bottom:1px solid #E0E0E0;
}
.anx__pairs dt{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(12 * var(--u)); line-height:calc(15 * var(--vhu));
  text-transform:uppercase; color:#0C0C0C;
}
.anx__pairs dd{font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu)); color:#4A4A4A}

.anx__grupos{
  margin-top:calc(24 * var(--vhu));
  display:grid; grid-template-columns:repeat(2, 1fr); column-gap:calc(30 * var(--u)); row-gap:calc(30 * var(--vhu));
}
.anx__grupo .onde{
  display:block; padding-bottom:calc(9 * var(--vhu));
  border-bottom:1px solid #0C0C0C;
  font-size:calc(7.5 * var(--u)); color:#0C0C0C;
}
.anx__grupo li{
  padding:calc(10 * var(--vhu)) 0;
  border-bottom:1px solid #E0E0E0;
  font-size:calc(11 * var(--u)); line-height:calc(14 * var(--vhu));
  color:#5A5A5A;
}
.anx__grupo li b{display:block; font-weight:500; color:#0C0C0C}

.anx__remate{
  margin-top:calc(26 * var(--vhu));
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
}
.anx__remate div{border-top:1px solid #0C0C0C; padding-top:calc(12 * var(--vhu))}
.anx__remate b{
  display:block;
  font-family:var(--font-mono); font-size:calc(7.5 * var(--u));
  letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue);
}
.anx__remate p{
  margin-top:calc(10 * var(--vhu));
  font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu));
  color:#4A4A4A;
}

/* ---------------------------------------------------------------- próximo passo */
.imp__proximo{
  margin-top:calc(96 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
  border-top:1px solid #0C0C0C;
  padding-top:calc(26 * var(--vhu));
}
.imp__prox__head{grid-column:1}
.imp__prox__head span{display:block; font-size:calc(8 * var(--u)); color:var(--c-blue)}
.imp__prox__head p{
  margin-top:calc(14 * var(--vhu));
  font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu));
  color:#3A3A3A;
}
.imp__prox__list{grid-column:2 / span 2; counter-reset:pp}
.imp__prox__list li{
  counter-increment:pp;
  position:relative;
  padding:calc(13 * var(--vhu)) 0 calc(13 * var(--vhu)) calc(34 * var(--u));
  border-bottom:1px solid #E8E8E8;
  font-size:calc(13 * var(--u)); line-height:calc(16 * var(--vhu));
  color:#0C0C0C;
}
.imp__prox__list li:first-child{border-top:1px solid #E8E8E8}
.imp__prox__list li::before{
  content:counter(pp, decimal-leading-zero);
  position:absolute; left:0; top:calc(15 * var(--vhu));
  font-family:var(--font-mono); font-size:calc(8 * var(--u)); color:#B0B0B0;
}
.imp__prox__aviso{
  grid-column:4;
  font-size:calc(10 * var(--u)); line-height:calc(13.5 * var(--vhu));
  color:#8A8A8A;
}

/* ================================================================= 08b · A PORTA
   #sis-central — a seção que leva à página /central.

   Mora AQUI, e não num arquivo próprio, por dois motivos. O primeiro: o render dela
   está em js/sistema/limites.js, e arquivo que muda junto vive junto. O segundo é mais
   concreto — `css/sistema/central.css` JÁ EXISTE e é do #sis-ia (a inteligência) e do
   #sis-relatorio. Criar um arquivo com esse nome para a porta apagaria 286 linhas.

   SEM CIFRA nesta seção. A /sistema circula com os sócios antes da reunião de proposta
   e mantém a etiqueta "PROPOSTA · OS NÚMEROS SAEM DO POC". Ver o comentário do bloco
   `central` em js/data/sistema.js. */
.ctr__cards{
  margin-top:calc(86 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  border-top:1px solid #E8E8E8;
}
.ctr__cards li{
  padding:calc(22 * var(--vhu)) calc(20 * var(--u)) 0 0;
}
.ctr__c__n{
  display:block;
  font-size:calc(8 * var(--u));
  line-height:calc(12 * var(--vhu));
  color:#0C0C0C;
  margin-bottom:calc(12 * var(--vhu));
}
.ctr__c__d{
  display:block;
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#5A5A5A;
}
.ctr__pill{
  display:inline-block;
  margin-top:calc(54 * var(--vhu));
}