/* 03 · CADÊNCIA · rodada 4 · prefixo .cad
   Dois painéis sobre o mesmo ano de 52 colunas, com as mesmas nove mudanças na mesma coluna.
   Marca branca cheia = teste; marca laranja = mudança que foi ao ar sem teste. À direita, o número que resume.
   Movimento: js/03-cadencia.js escreve --d (0 → 1) na figura; tudo aqui deriva de --d.
   Sem o script, --d vale 1 e a figura está completa. */
.cad{--secao-y:clamp(4rem,6.6vw,6rem);--cad-b:clamp(36px,4.6vw,64px);
  /* borda superior: sobe por cima da seção 02 com um degrau de espelho a 15° (o lado direito começa mais baixo) */
  margin-top:calc(-1*var(--cad-b));padding-top:calc(var(--secao-y) + var(--cad-b)*.75);
  clip-path:polygon(0 0,calc(36% + var(--cad-b)*var(--tan15)) 0,36% var(--cad-b),100% var(--cad-b),100% 100%,0 100%)}
.cad .secao-cab{margin-bottom:clamp(32px,4vw,56px)}
.cad .secao-cab .t-lead{margin-top:var(--e-4);max-width:none;text-wrap:balance}

.cad-figura{--cad-quem:232px;--cad-num:264px;--cad-px:clamp(20px,2.4vw,32px);--cad-mh:48px;--d:1}
.cad-linha{display:grid;grid-template-columns:var(--cad-quem) minmax(0,1fr) var(--cad-num);align-items:center;padding-inline:var(--cad-px)}
.cad-sem{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));min-width:0}
.cad-sem>*{grid-row:1;grid-column:var(--s)}

/* eixo dos meses */
.cad-eixo{padding-bottom:var(--e-3)}
.cad-eixo .cad-sem{grid-column:2}
.cad-mes{grid-column:var(--s)/span 4;font:400 var(--t-rotulo)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}

/* painéis */
.cad-faixa{position:relative;padding-block:clamp(24px,2.6vw,36px);border:1px solid var(--linha);border-radius:var(--r-superficie);background:var(--c-sup-1)}
.cad-faixa+.cad-faixa{margin-top:var(--e-3)}
.cad-hify{border-color:color-mix(in srgb,var(--c-laranja) 55%,transparent);background:var(--c-sup-2)}
.cad-nome{font:700 var(--t-h3)/1.2 var(--f-sans);letter-spacing:-.03em;color:var(--texto)}
.cad-anual .cad-nome{color:var(--texto-2)}
.cad-sub{margin-top:4px;font-size:var(--t-pequeno);line-height:1.4;color:var(--texto-3)}

/* pista: o trilho de 52 semanas e as marcas */
.cad-pista{position:relative;min-width:0}
.cad-trilho{position:relative;height:var(--cad-mh)}
.cad-c{position:relative;display:block;height:100%;margin-inline:12%;border:1px solid color-mix(in srgb,var(--c-branco) 20%,transparent);border-radius:1.5px;transform:skewX(calc(-1*var(--inclinacao)))}
.cad-on{--v:clamp(0,calc((var(--d)*52 - var(--s,0) + 1)*1.6),1)}
.cad-on::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--c-branco);opacity:var(--v)}
/* a linha do tempo que atravessa os painéis enquanto o ano corre */
.cad-pista::after{content:"";position:absolute;top:calc(-1*var(--e-4));left:calc(var(--d)*100%);width:1px;height:calc(var(--cad-mh) + 2*var(--e-4));
  background:var(--c-branco);transform:skewX(calc(-1*var(--inclinacao)));opacity:0;transition:opacity 300ms linear}
.cad-rodando .cad-pista::after{opacity:.75}

/* cota: as 49 semanas sem teste */
.cad-sem-cota{margin-top:var(--e-3)}
.cad-cota{--q:clamp(0,calc((var(--d)*52 - 3)/49),1);grid-column:4/-1;min-width:0}
.cad-cota i{display:block;height:7px;border-inline:1px solid var(--texto-3);background:linear-gradient(var(--texto-3),var(--texto-3)) 0 50%/100% 1px no-repeat;
  transform-origin:0 50%;transform:scaleX(var(--q))}
.cad-cota b{display:block;margin-top:8px;font:400 var(--t-pequeno)/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2);white-space:nowrap}
.cad-cota b span{font-weight:700;color:var(--texto)}

/* número que resume o painel */
.cad-num{display:flex;align-items:center;justify-content:flex-end;gap:var(--e-3)}
.cad-num b{font:700 clamp(3.5rem,6.2vw,5.5rem)/.9 var(--f-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--texto)}
.cad-num span{font-size:var(--t-pequeno);line-height:1.3;color:var(--texto-2)}
.cad-num-a b{color:var(--texto-2)}
.cad-hify .cad-num b{color:var(--c-laranja)}
.cad-hify .cad-on::before{background:var(--c-laranja)}

/* pé */
.cad-pe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-2) var(--e-8);margin-top:var(--e-4);padding-inline:var(--cad-px)}
.cad-chaves{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-8);font-size:var(--t-pequeno);line-height:1.4;color:var(--texto-2)}
.cad-chaves li{display:flex;align-items:center;gap:var(--e-3)}
.cad-chaves .cad-c{--v:1;width:9px;height:20px;margin:0}
.cad-pe-d{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-6)}
.cad-de-novo{min-height:32px;padding:0 12px;border:1px solid var(--borda-controle);border-radius:var(--r-etiqueta);background:none;font:400 var(--t-pequeno)/1 var(--f-sans);color:var(--texto);cursor:pointer;
  transition:background-color 200ms linear,opacity 200ms linear}
.cad-de-novo:hover{background:color-mix(in srgb,var(--c-branco) 10%,transparent)}
.cad-rodando .cad-de-novo{opacity:.4;pointer-events:none}
.cad-norma{margin-top:clamp(32px,3.4vw,48px);max-width:62em;font-size:var(--t-pequeno);line-height:1.5;color:var(--texto-3)}

/* telas médias e pequenas: nome e número em cima, o ano embaixo, de ponta a ponta */
@media (max-width:999px){
  .cad-figura{--cad-mh:36px}
  .cad-linha{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--e-6)}
  .cad-eixo .cad-sem{grid-column:1/-1}
  .cad-pista{grid-column:1/-1;grid-row:2}
  .cad-num b{font-size:3.25rem}
}
@media (max-width:599px){
  .cad-mes-x{display:none}
  .cad-c{margin-inline:7%}
  .cad-num{gap:var(--e-2)}
}