/* Ajuste editorial restrito aos títulos e indicadores de Home e Sites. */
:is(.home-page,.sites-page) main h2[id] {
  text-wrap:balance;
  line-height:1.1;
  letter-spacing:-.04em;
  max-width:23ch;
}

.home-page .work-heading { align-items:center; }
/* O bloco de prova: sobrelinha, esteira das marcas, e a faixa com o numero e a
   chamada. Sem moldura em volta — o que prova sao as marcas, e a caixa so
   competia com elas. Uma regua vertical separa do titulo, como no desenho. */
.home-page .work-heading .editorial-proof {
  position:relative;
  gap:16px;
  padding:0 0 0 40px;
  border:0;
  border-left:1px solid #c5d8ce;
  border-radius:0;
  background:none;
  box-shadow:none;
}

.home-page .work-heading > div:first-child > .eyebrow { margin-bottom:16px; }
.home-page .editorial-proof > .eyebrow { margin:0; }

/* Estrutura obrigatoria da esteira: janela por fora da pista, botao IRMAO da
   janela. A mascara que dissolve as pontas mora na janela — na esteira ela
   cobriria o botao de pausa. */
.marcas-esteira {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-width:0;
}

.marcas-esteira .esteira__pista { animation-duration:38s; }

/* A mascara padrao dissolve as DUAS pontas. Aqui a fileira comeca colada na
   borda esquerda do bloco, entao a primeira marca nascia meio apagada — o
   logotipo da D+ aparecia cortado no primeiro quadro. Dissolve so a direita,
   que e o lado por onde as marcas saem, sob o botao de pausa. */
.marcas-esteira .esteira__janela {
  mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent);
}
/* So o hover pausa. Com `:focus-within` na esteira, o proprio botao de pausa
   mantinha o foco depois do clique e a pista nunca voltava a andar — o
   controle pausava e nao retomava. A pista nao tem nada focavel dentro
   (logotipos com alt vazio), entao o focus-within nao servia a ninguem. */
.marcas-esteira:hover .esteira__pista { animation-play-state:paused; }

.marcas-esteira .esteira__btn {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:13px;
  color:var(--muted);
}

/* A faixa de baixo: numero e chamada. Empilhada por padrao — a coluna do
   cartao tem ~450px: partida em duas, a chamada caia para 27px entre 1000 e
   1100px e estourava a linha, e mesmo a 1440px sobrava so 147px — duas frases
   em seis linhas. Empilhada, ela tem a largura inteira em toda tela. */
.proof-faixa {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding-top:18px;
  border-top:1px solid #c5d8ce;
}

.proof-faixa > p {
  margin:0;
  font-size:13px;
  line-height:1.5;
}

/* Dentro da esteira as marcas sao itens da pista, e a pista tem estilo proprio
   de letreiro de texto: fonte de 13px, respiro de 32px e um asterisco verde
   depois de cada item. Numa marca isso vira um ✳ solto entre logotipos. */
.marcas-esteira .ticker-group span {
  gap:0;
  padding-right:0;
  font-size:inherit;
  font-weight:inherit;
  white-space:normal;
}
.marcas-esteira .ticker-group span::after { content:none; }

/* O numero deixou de ser filho direto de `.editorial-proof` — foi para dentro
   da faixa — e por isso as regras de `.portfolio-proof>strong` pararam de
   alcanca-lo: ele renderizava no tamanho do texto comum. */
.proof-faixa > strong {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:48px;
  line-height:1;
  letter-spacing:-.05em;
  color:var(--green);
}
.proof-faixa > strong span {
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  max-width:13ch;
  letter-spacing:0;
  color:var(--ink);
}
/* As cinco unidades eram placas vazias com duas linhas dentro, desenhando uma
   "janela de sistema". Cinco placas iguais não dizem nada — liam como bloco de
   carregamento. Agora cada uma carrega a marca real do sistema, as mesmas que
   aparecem nos cartões abaixo: o "5" deixa de ser uma alegação solta e passa a
   ter cinco provas do lado. O contêiner segue `aria-hidden`, porque os nomes
   já são lidos nos cartões e repeti-los aqui só atrasaria quem usa leitor. */
/* Dentro da esteira as marcas nao formam mais grade: sao itens em linha que
   correm, cada um numa placa BRANCA — todas iguais. Ja foram cinco fundos
   diferentes, um por marca, e de longe a fileira lia como suja: cinco tons de
   claro quase iguais fazem o olho procurar o padrao que nao existe, e ate o
   vao entre elas parecia irregular. A identidade de cada uma vive na faixa de
   2px em cima e na tinta do rotulo; o chao e o mesmo para as cinco. O branco
   tambem resolve o que motivou aqueles fundos: o dourado da MV, desenhado
   sobre preto, lavava no verde claro do bloco, mas no branco ele le.
   A largura fixa fica, para o passo do letreiro ser regular; sem ela as marcas
   largas passariam mais devagar que as estreitas. */
.system-units { display:flex; align-items:center; gap:14px; }

.marcas-esteira .system-unit {
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  flex:none;
  width:108px;
  height:66px;
  padding:12px 10px 10px;
  overflow:hidden;
  border:1px solid #dde6e0;
  border-radius:13px;
  background:#fff;
  box-shadow:0 1px 1px #18543d10, 0 12px 22px -18px #18543d66;
}

/* a mesma faixa de gradiente que assina os cartoes da secao */
.marcas-esteira .system-unit::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--marca-1,#43876c),var(--marca-2,#8fbfa6));
}

/* So a faixa de cima e, nas duas que levam nome, a tinta do rotulo. */
.system-unit--dmais   { --marca-1:#f97316; --marca-2:#fb923c; }
.system-unit--lar     { --marca-1:#447fb1; --marca-2:#a6c25b; }
.system-unit--mv      { --marca-1:#b8811f; --marca-2:#f0d58a; }
.system-unit--oikonos { --marca-1:#c75a3b; --marca-2:#e09a2d; --marca-tinta:#864507; }
.system-unit--finance { --marca-1:#2f756a; --marca-2:#c7a35a; --marca-tinta:#1f5b52; }

/* Oikonos e Lar Finance sao simbolos: a marca nao traz o nome desenhado, ao
   contrario das outras tres. Sem rotulo, passam como dois desenhos soltos.
   Mesmo tratamento dos cartoes de marca logo abaixo. */
.system-unit--nome > i {
  font-size:11px;
  font-style:normal;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  color:var(--marca-tinta,var(--muted));
  white-space:nowrap;
}
/* O teto e em pixel, nao em porcentagem: como item de grade, `max-height:100%`
   resolve contra uma altura indefinida e o navegador ignora. Media, o simbolo
   do Lar Finance (retrato) saia com 69px dentro de uma celula de 46 e, no
   tablet, com 163px. */
.system-unit > img {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:30px;
}

.sites-page .prova-site__faixa {
  grid-template-columns:minmax(0,1.1fr) minmax(300px,1fr);
  grid-template-areas:"texto numeros" "teste numeros" "nota nota";
  gap:20px 44px;
}
.sites-page .prova-site__teste { justify-self:start; }
.sites-page .prova-site__numeros { gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.sites-page .prova-site__numeros > .editorial-metric {
  position:relative;
  min-width:0;
  padding:76px 20px 20px;
  border:1px solid #cbded2;
  border-radius:18px;
  background:#f1f6f2;
  gap:12px;
}
.sites-page .prova-site__numeros > .metric-weight { background:#e6eeeb; }
.sites-page .editorial-metric dt { max-width:20ch; }
.metric-symbol { position:absolute; top:20px; left:22px; width:38px; height:38px; color:#2a7157; }
.metric-time .metric-symbol { border:2px solid currentColor; border-radius:50%; }
.metric-time .metric-symbol::after {
  content:""; position:absolute; left:16px; top:6px; width:10px; height:13px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
}
.metric-weight .metric-symbol {
  width:29px; height:34px; border:1px solid #669680; border-radius:4px;
  background:repeating-linear-gradient(0deg,#f9fcfa 0 7px,#c8dbd1 7px 8px);
  box-shadow:5px 5px 0 -1px #e3ede7,5px 5px 0 0 #8db29e,10px 10px 0 -1px #d8e6de,10px 10px 0 0 #8db29e;
}

.sites-page .editorial-terms { background:#edf3ed; align-items:stretch; }
.sites-page .editorial-terms .figs__hero { align-content:center; gap:20px; }
.delivery-calendar { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:340px; margin-bottom:12px; }
.delivery-day {
  display:grid; place-items:center; min-height:54px;
  border:1px solid #b0c9ba; border-top:7px solid #7ba28b;
  border-radius:6px; background:#fafffa; font-size:16px; font-weight:600; color:#235c47;
}
.delivery-day:last-child { background:#126e51; color:#fff; border-color:#126e51; }
.sites-page .editorial-terms .figs__apoio { gap:12px; background:none; border-radius:0; overflow:visible; }
.sites-page .editorial-terms .figs__apoio > div {
  border:1px solid #cadbcf; border-radius:14px; padding:24px 20px;
  background:#fbfdf9;
}
.sites-page .editorial-terms .figs__apoio > div:nth-child(2) { background:#dfede3; }
.sites-page .editorial-terms .figs__apoio > div:nth-child(3) { background:#e6ece9; }

/* O salto alternado das unidades saiu junto com as placas: com marca real, um
   logotipo sim outro nao subindo lia como falha de carregamento. */
@media(max-width:1000px) {
  .sites-page .prova-site__faixa { gap:24px; }
}
@media(max-width:640px) {
  .sites-page .prova-site__faixa { grid-template-columns:minmax(0,1fr); grid-template-areas:"texto" "numeros" "teste" "nota"; }
  .sites-page .prova-site__teste { justify-self:stretch; }
  .sites-page .prova-site__numeros { gap:10px; }
  .sites-page .prova-site__numeros > .editorial-metric { padding:72px 14px 18px; }
  .sites-page .prova-site__numeros dd { font-size:32px; }
  /* Empilhado, a regua vertical vira horizontal e a faixa de baixo deixa de ser
     duas colunas: a 320px a chamada ficava esmagada em 27px de largura. */
  .home-page .work-heading .editorial-proof {
    width:100%;
    padding:22px 0 0;
    border-left:0;
    border-top:1px solid #c5d8ce;
  }
  .proof-faixa { grid-template-columns:minmax(0,1fr); gap:12px; }
  .proof-faixa > p { padding-left:0; border-left:0; }
  .delivery-calendar { gap:6px; }
  .delivery-day { min-height:46px; }
}