/* /central — #ct-cenarios, #ct-unidade e #ct-composicoes: as seções com número.

   A tabela de cenários é o objeto mais denso da página. Ela usa grade de seis colunas
   com larguras declaradas, e não `1fr` em todas: os quatro valores numéricos são curtos
   e de largura previsível, e deixá-los crescer roubaria espaço da coluna de prosa, que
   é a única que precisa dele. */

/* ================================================================= 05 · OS CENÁRIOS */
.cen__tabela{margin-top:calc(86 * var(--vhu))}

.cen__hd,
.cen__l{
  display:grid;
  grid-template-columns:
    calc(150 * var(--u))   /* nome + apelido */
    calc(96 * var(--u))    /* memória */
    calc(118 * var(--u))   /* chassis */
    calc(72 * var(--u))    /* consumo */
    calc(180 * var(--u))   /* faixa */
    1fr;                   /* o que muda na prática */
  column-gap:calc(16 * var(--u));
}

.cen__hd{
  padding-bottom:calc(11 * var(--vhu));
  border-bottom:1px solid #fff;
  font-size:calc(8 * var(--u));
  color:#8A8A8A;
}

.cen__l{
  align-items:start;
  padding:calc(22 * var(--vhu)) 0 calc(24 * var(--vhu));
  border-bottom:1px solid #222;
}
/* a linha recomendada: fio à esquerda e fundo um degrau acima. Sem cor nova — o
   destaque é contraste, que sobrevive a impressão em preto e branco. */
.cen__l.is-rec{
  background:#141414;
  border-left:2px solid #fff;
  padding-left:calc(16 * var(--u));
  margin-left:calc(-18 * var(--u));
}

.cen__nome b{
  display:block;
  font-size:calc(24 * var(--u));
  line-height:calc(26 * var(--vhu));
  color:#fff;
}
.cen__nome i{
  display:block;
  font-style:normal;
  font-size:calc(8 * var(--u));
  color:#8A8A8A;
  margin-top:calc(5 * var(--vhu));
}
.cen__rec{
  display:inline-block;
  font-style:normal;
  font-size:calc(8 * var(--u));
  color:#0C0C0C; background:#fff;
  padding:calc(3 * var(--vhu)) calc(6 * var(--u));
  margin-top:calc(9 * var(--vhu));
}

.cen__v{
  font-size:calc(13 * var(--u));
  line-height:calc(17 * var(--vhu));
  color:#fff;
}
.cen__v i{font-style:normal; font-size:calc(10 * var(--u)); color:#8A8A8A}
.cen__v--faixa{font-size:calc(15 * var(--u)); line-height:calc(19 * var(--vhu))}

.cen__p{
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#B0B0B0;
}
.cen__rede{
  display:block;
  margin-top:calc(9 * var(--vhu));
  font-size:calc(10 * var(--u));
  line-height:calc(13 * var(--vhu));
  color:#6E6E6E;
}

.cen__nota{
  margin-top:calc(26 * var(--vhu));
  width:calc(660 * var(--u));
  font-size:calc(11 * var(--u));
  line-height:calc(14.5 * var(--vhu));
  color:#8A8A8A;
}

/* ---------------------------------------------------------------- sem honorário
   Declaração, não legenda. É o que mantém de pé a regra de ouro do documento mestre:
   o valor do contrato A nunca ao lado do valor do B — e isto não é nem um nem outro. */
.cen__sem{
  margin-top:calc(44 * var(--vhu));
  padding:calc(24 * var(--vhu)) calc(26 * var(--u));
  border:1px solid #333;
  width:calc(900 * var(--u));
  font-size:calc(12.5 * var(--u));
  line-height:calc(16.5 * var(--vhu));
  color:#fff;
}

/* ================================================================= 06 · A CAIXA */
.uni__wrap{
  margin-top:calc(86 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
}
.uni__ficha{grid-column:1 / span 2; padding-right:calc(34 * var(--u))}
.uni__ficha ul{border-top:1px solid #DCDCDC}
.uni__ficha li{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:calc(16 * var(--u));
  padding:calc(10 * var(--vhu)) 0;
  border-bottom:1px solid #DCDCDC;
}
.uni__f__r{font-size:calc(8 * var(--u)); color:#6E6E6E}
.uni__f__v{font-size:calc(12.5 * var(--u)); color:#0C0C0C; text-align:right}

.uni__faixa{
  margin-top:calc(26 * var(--vhu));
  font-size:calc(26 * var(--u));
  line-height:calc(30 * var(--vhu));
  color:#0C0C0C;
}

.uni__roda{grid-column:3 / span 2; border-top:1px solid #DCDCDC}
.uni__roda li{
  padding:calc(14 * var(--vhu)) 0;
  border-bottom:1px solid #DCDCDC;
}
.uni__r__n{
  display:block;
  font-size:calc(8 * var(--u));
  color:#0C0C0C;
  margin-bottom:calc(6 * var(--vhu));
}
.uni__r__d{
  display:block;
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#5A5A5A;
}

/* a frase que vende a arquitetura: o crânio uma vez, a unidade por fração */
.uni__frase{
  margin-top:calc(64 * var(--vhu));
  width:calc(760 * var(--u));
  font-size:calc(22 * var(--u));
  line-height:calc(28 * var(--vhu));
  color:#0C0C0C;
}
.uni__ressalva{
  margin-top:calc(22 * var(--vhu));
  width:calc(660 * var(--u));
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#6E6E6E;
}

/* ================================================================= 07 · AS COMPOSIÇÕES */
.comp__cards{
  margin-top:calc(86 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:calc(16 * var(--u));
}
.comp__c{
  border-top:1px solid #0C0C0C;
  padding-top:calc(22 * var(--vhu));
  padding-right:calc(24 * var(--u));
}
.comp__c__nome{
  font-size:calc(20 * var(--u));
  line-height:calc(23 * var(--vhu));
  color:#0C0C0C;
  margin-bottom:calc(20 * var(--vhu));
}
.comp__par{
  padding:calc(11 * var(--vhu)) 0;
  border-bottom:1px solid #E8E8E8;
}
.comp__par span:first-child{
  display:block;
  font-size:calc(8 * var(--u));
  color:#6E6E6E;
  margin-bottom:calc(5 * var(--vhu));
}
.comp__par span:last-child{
  display:block;
  font-size:calc(12 * var(--u));
  line-height:calc(15.5 * var(--vhu));
  color:#0C0C0C;
}
.comp__par--entrega span:last-child{color:#5A5A5A; font-size:calc(11.5 * var(--u))}
.comp__nota{
  margin-top:calc(16 * var(--vhu));
  font-size:calc(10 * var(--u));
  line-height:calc(13.5 * var(--vhu));
  color:#8A8A8A;
}

/* ---------------------------------------------------------------- a memória disputada */
.cen__mem{
  margin-top:calc(60 * var(--vhu));
  padding-top:calc(34 * var(--vhu));
  border-top:1px solid #333;
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.cen__mem__t{grid-column:1; font-size:calc(8 * var(--u)); color:#fff}
.cen__mem__i{
  grid-column:2 / span 3;
  font-size:calc(12.5 * var(--u)); line-height:calc(16.5 * var(--vhu)); color:#B0B0B0;
}
.cen__mem__tab{grid-column:2 / span 3; margin-top:calc(26 * var(--vhu))}
.cen__m__hd,
.cen__m__l{
  display:grid;
  grid-template-columns:calc(120 * var(--u)) 1fr 1fr 1fr;
  column-gap:calc(16 * var(--u));
  align-items:baseline;
}
.cen__m__hd{
  padding-bottom:calc(9 * var(--vhu));
  border-bottom:1px solid #fff;
  font-size:calc(8 * var(--u)); color:#8A8A8A;
}
.cen__m__l{padding:calc(12 * var(--vhu)) 0; border-bottom:1px solid #222}
.cen__m__l.is-rec{border-left:2px solid #fff; padding-left:calc(12 * var(--u)); margin-left:calc(-14 * var(--u))}
.cen__m__n{font-size:calc(16 * var(--u)); color:#fff}
.cen__m__v{font-size:calc(12.5 * var(--u)); color:#fff}
/* "não cabe" é o dado mais importante desta tabela: é ele que mostra o limite do cenário
   compacto. Cinza para não gritar, e legível para não sumir. */
.cen__m__v.is-zero{color:#8A8A8A}
.cen__mem__r{
  grid-column:2 / span 3;
  margin-top:calc(22 * var(--vhu));
  font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#8A8A8A;
}

/* ---------------------------------------------------------------- o armazenamento */
.uni__arm{
  margin-top:calc(60 * var(--vhu));
  padding-top:calc(30 * var(--vhu));
  border-top:1px solid #DCDCDC;
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.uni__arm__t{grid-column:1; font-size:calc(8 * var(--u)); color:#0C0C0C}
.uni__arm__i{
  grid-column:2 / span 3;
  font-size:calc(12.5 * var(--u)); line-height:calc(16.5 * var(--vhu)); color:#3A3A3A;
}
.uni__arm ul{
  grid-column:2 / span 3; margin-top:calc(24 * var(--vhu));
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
}
.uni__a__n{display:block; font-size:calc(8 * var(--u)); color:#0C0C0C; margin-bottom:calc(7 * var(--vhu))}
.uni__a__d{display:block; font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#5A5A5A}

/* As DUAS linhas da segunda cópia. As duas ficam na página porque a escolha é da TBR:
   paridade protege contra um disco morrer, e a segunda cópia contra a sala se perder. */
.uni__seg{
  margin-top:calc(44 * var(--vhu));
  padding:calc(28 * var(--vhu)) calc(28 * var(--u)) calc(30 * var(--vhu));
  background:#fff; border:1px solid #DCDCDC;
}
.uni__seg__t{font-size:calc(8 * var(--u)); color:#0C0C0C; margin-bottom:calc(12 * var(--vhu))}
.uni__seg__i{
  width:calc(760 * var(--u));
  font-size:calc(12.5 * var(--u)); line-height:calc(16.5 * var(--vhu)); color:#3A3A3A;
}
.uni__seg__linhas{margin-top:calc(22 * var(--vhu)); border-top:1px solid #DCDCDC}
.uni__s__l{
  display:grid; grid-template-columns:calc(300 * var(--u)) calc(180 * var(--u)) 1fr;
  column-gap:calc(16 * var(--u)); align-items:baseline;
  padding:calc(13 * var(--vhu)) 0; border-bottom:1px solid #DCDCDC;
}
.uni__s__n{font-size:calc(8 * var(--u)); color:#0C0C0C}
.uni__s__b{font-size:calc(12 * var(--u)); color:#5A5A5A}
.uni__s__p{font-size:calc(15 * var(--u)); color:#0C0C0C}

/* ---------------------------------------------------------------- a ordem do dinheiro */
.comp__pri{
  margin-top:calc(86 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.comp__pri__t{grid-column:1; font-size:calc(8 * var(--u)); color:#0C0C0C}
.comp__pri ul{
  grid-column:2 / span 3;
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
}
.comp__p__n{display:block; font-size:calc(8 * var(--u)); color:#0C0C0C; margin-bottom:calc(10 * var(--vhu))}
.comp__p__d{display:block; font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#5A5A5A}

.comp__cards{margin-top:calc(64 * var(--vhu)); display:block}
.comp__f__hd,
.comp__f{
  display:grid;
  grid-template-columns:calc(240 * var(--u)) 1fr calc(230 * var(--u));
  column-gap:calc(16 * var(--u));
  align-items:baseline;
}
.comp__f__hd{
  padding-bottom:calc(10 * var(--vhu));
  border-bottom:1px solid #0C0C0C;
  font-size:calc(8 * var(--u)); color:#6E6E6E;
}
.comp__f{padding:calc(16 * var(--vhu)) 0; border-bottom:1px solid #E8E8E8}
/* As duas fases que decidem dinheiro grande ficam marcadas: a 04, onde o sistema inteiro
   já funciona, e a 06, onde o Energy entra. */
.comp__f.is-marco{
  background:#F5F5F5;
  border-left:2px solid #0C0C0C;
  padding-left:calc(16 * var(--u)); padding-right:calc(16 * var(--u));
  margin-left:calc(-18 * var(--u));
}
.comp__f__nome{font-size:calc(15 * var(--u)); line-height:calc(18 * var(--vhu)); color:#0C0C0C}
.comp__f__e{font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#5A5A5A}
.comp__f__o{font-size:calc(13 * var(--u)); line-height:calc(16 * var(--vhu)); color:#0C0C0C}
.comp__f__nota{
  grid-column:2 / span 2;
  margin-top:calc(8 * var(--vhu));
  font-size:calc(10.5 * var(--u)); line-height:calc(14 * var(--vhu)); color:#8A8A8A;
}

.comp__rem{
  margin-top:calc(74 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.comp__rem__t{grid-column:1; font-size:calc(8 * var(--u)); color:#0C0C0C}
.comp__rem ul{grid-column:2 / span 3}
.comp__rem li{
  position:relative;
  padding:calc(11 * var(--vhu)) 0 calc(11 * var(--vhu)) calc(20 * var(--u));
  border-bottom:1px solid #E8E8E8;
  font-size:calc(12 * var(--u)); line-height:calc(16 * var(--vhu)); color:#3A3A3A;
}
.comp__rem li::before{
  content:''; position:absolute; left:calc(3 * var(--u)); top:calc(17 * var(--vhu));
  width:calc(4 * var(--u)); height:calc(4 * var(--u)); border-radius:50%; background:var(--c-blue);
}