/* ============================================================
   INNAP · páginas internas
   Carrega depois de home.css e só acrescenta o que a Home não
   tinha: migalhas, hero de página, prosa, tabela, formulário,
   filtros e a ficha de professor com biografia.
   Os tokens são os mesmos de home.css.
   ============================================================ */

/* ---------------------------------------------------------- migalhas */
.migalhas{padding:calc(96px + env(safe-area-inset-top,0px)) 0 0}
.migalhas .wrap{display:flex;align-items:center;gap:10px;font-family:var(--label);
  font-size:.7rem;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted)}
.migalhas a{color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px}
.migalhas a:hover{color:var(--green);border-bottom-color:var(--green)}
.migalhas i{font-style:normal;opacity:.45}
.migalhas b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------- hero da página
   Mais baixo que o da Home: aqui a tela já é de leitura. */
.phero{position:relative;overflow:hidden;background:var(--petrol);color:var(--ivory);
  padding-block:clamp(120px,13vw,180px) clamp(56px,6vw,84px)}
.migalhas + .phero{padding-top:clamp(40px,5vw,68px)}
.phero > .wrap{position:relative;z-index:2}
.phero__fundo{position:absolute;inset:0;z-index:0}
.phero__fundo-img{width:100%;height:100%;object-fit:cover}
.phero::before,.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.phero--foto::before{background:linear-gradient(100deg,rgba(0,54,64,.97) 0%,rgba(0,54,64,.9) 34%,rgba(0,54,64,.62) 66%,rgba(0,54,64,.4) 100%)}
.phero--foto::after{background:linear-gradient(180deg,rgba(0,54,64,.5) 0%,rgba(0,54,64,.06) 34%,rgba(0,54,64,.14) 60%,rgba(0,54,64,.68) 100%)}
.phero:not(.phero--foto)::before{background:var(--pattern);opacity:.5}
.phero:not(.phero--foto)::after{display:none}
.phero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);max-width:17ch;color:var(--ivory)}
.phero h1 + p{margin-top:20px;max-width:58ch;font-size:var(--fs-lead);line-height:1.6}
.phero p{color:rgba(242,238,231,.84)}
.phero .eyebrow{color:var(--rose);margin-bottom:16px}
.phero .acoes{margin-top:30px}
.phero .bloco{display:contents}

.phero__grade{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,4vw,64px);align-items:center}
.phero__retrato{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.phero__img{width:100%;height:auto;display:block}
@media (max-width:860px){
  .phero__grade{grid-template-columns:1fr}
  .phero__retrato{max-width:320px}
}

/* ---------------------------------------------------------- seções */
.sec--claro{background:var(--paper)}
.sec--prosa > .wrap{max-width:720px}
.sec--prosa p{margin-top:18px}
.sec--prosa h2{margin-top:40px}
.sec--prosa h3,.sec--prosa h4{margin-top:30px}
.sec > .wrap > .bloco{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,32px)}
.sec .head + .bloco,.sec .head-row + .bloco{margin-top:clamp(30px,3.4vw,44px)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.rotulo{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted)}
.on-dark .rotulo{color:var(--rose)}
.mono{font-family:var(--display);font-weight:600}
ul.marcas{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:9px}
ul.marcas li{color:var(--muted);line-height:1.6}
ul.marcas li::marker{color:var(--green)}
.on-dark ul.marcas li{color:rgba(242,238,231,.82)}

/* barra de números reaproveitada dentro da página */
.instglass--pagina{position:static;margin:0;box-shadow:none;background:var(--paper);border:1px solid var(--line)}

/* ---------------------------------------------------------- filtros */
.pilulas{display:flex;flex-wrap:wrap;gap:9px}
.pilula{padding:.6em 1.15em;border-radius:999px;border:1px solid var(--line);background:transparent;
  font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--ink);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.pilula:hover{border-color:var(--green);color:var(--green);background:rgba(12,107,94,.06)}
.pilula.is-on{background:var(--green);border-color:var(--green);color:var(--ivory)}
.on-dark .pilula{border-color:rgba(242,238,231,.3);color:var(--ivory)}
.on-dark .pilula:hover{border-color:var(--ivory);background:rgba(255,255,255,.12);color:var(--ivory)}

/* ---------------------------------------------------------- formulário */
.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 20px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo > span{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted)}
.campo select,.campo input{font:inherit;font-size:.98rem;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:.72em .9em;width:100%}
.opcao{display:flex;align-items:flex-start;gap:10px;padding:.85em 1em;border:1px solid var(--line);
  border-radius:12px;background:var(--paper);font-size:.95rem;line-height:1.45;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.opcao:hover{border-color:rgba(12,107,94,.35);background:var(--white)}
.opcao input{margin-top:3px;accent-color:var(--green);flex:0 0 auto}
.on-dark .campo > span{color:var(--rose)}
.on-dark .opcao{border-color:rgba(242,238,231,.22);background:rgba(242,238,231,.06);color:var(--ivory)}

/* ---------------------------------------------------------- tabela */
.tabela-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tabela th,.tabela td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tabela thead th{font-family:var(--label);font-size:.84rem;font-weight:500;letter-spacing:normal;
  text-transform:none;color:var(--muted)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr{transition:background .3s var(--ease)}
.tabela tbody tr:hover{background:rgba(12,107,94,.045)}
.tabela td:first-child{font-weight:600;color:var(--ink)}
.on-dark .tabela th,.on-dark .tabela td{border-bottom-color:rgba(242,238,231,.2);color:rgba(242,238,231,.88)}
.on-dark .tabela thead th{color:var(--rose)}
@media (max-width:620px){
  .tabela,.tabela tbody,.tabela tr,.tabela td{display:block;min-width:0}
  .tabela thead{display:none}
  .tabela tr{border:1px solid var(--line);border-radius:var(--radius);padding:6px 0;margin-bottom:14px}
  .tabela td{border-bottom:0;display:flex;justify-content:space-between;gap:18px;padding:8px 16px}
  .tabela td::before{content:attr(data-rotulo);font-family:var(--label);font-size:.84rem;font-weight:400;
    letter-spacing:normal;text-transform:none;color:var(--muted);flex:0 0 auto}
}

/* ---------------------------------------------------------- ficha de professor */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
  margin-top:clamp(30px,3.4vw,44px)}
.ficha{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.ficha:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(12,107,94,.3)}
.ficha__foto{position:relative;aspect-ratio:3/2.1;overflow:hidden;background:var(--rose)}
.ficha__img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.ficha__foto--vazia{display:flex;align-items:center;justify-content:center;background:rgba(12,107,94,.1)}
.ficha__foto--vazia .mono{font-size:2rem;color:var(--green)}
.ficha__texto{padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:9px;flex:1}
.ficha__texto .area{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--ochre)}
.ficha__texto h3{font-size:1.2rem;line-height:1.2}
.ficha__texto p{font-size:.93rem;line-height:1.6;color:var(--muted)}
.ficha__texto .tlink{margin-top:auto;padding-top:8px}

/* ---------------------------------------------------------- ajustes de grade */
.flist--2{grid-template-columns:repeat(2,1fr)}
.flist--3{grid-template-columns:repeat(3,1fr)}
.flist--2 .fitem:nth-child(2n+1),.flist--3 .fitem:nth-child(3n+1){border-left:0;padding-left:0}
.flist--2 .fitem:nth-child(n+3),.flist--3 .fitem:nth-child(n+4){border-top:1px solid var(--line)}
@media (max-width:900px){
  .flist--2,.flist--3{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .flist--2,.flist--3{grid-template-columns:1fr}
}

/* ---------------------------------------------------------- fatos e catálogo */
.fatos{display:flex;flex-wrap:wrap;gap:10px 28px;padding-top:4px}
.fatos > div{display:flex;flex-direction:column;gap:2px}
.fatos b{font-family:var(--display);font-size:1.12rem;font-weight:600;color:var(--ink);line-height:1.15}
.fatos span{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted)}
.on-dark .fatos b{color:var(--ivory)}
.on-dark .fatos span{color:rgba(242,238,231,.66)}

.cursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;
  margin-top:clamp(28px,3vw,40px)}
.curso{display:flex;flex-direction:column;gap:13px;padding:clamp(26px,2.8vw,34px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.curso:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(12,107,94,.3)}
.curso__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.curso .tag{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--green)}
.curso__comparar{display:flex;align-items:center;gap:6px;flex:0 0 auto;
  font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted)}
.curso__comparar input{accent-color:var(--green);width:14px;height:14px}
.curso h3{font-size:1.32rem}
.curso .desc{font-size:.94rem;line-height:1.6;color:var(--muted);flex:1}
.curso .fatos{margin-top:2px;padding-top:14px;border-top:1px solid var(--line)}
.curso .fatos b{font-size:1rem}
.curso .tlink{margin-top:4px}
.on-dark .curso{background:rgba(242,238,231,.06);border-color:rgba(242,238,231,.2)}
.on-dark .curso h3{color:var(--ivory)}
.on-dark .curso .desc{color:rgba(242,238,231,.78)}
.on-dark .curso .tag{color:var(--rose)}
.on-dark .curso .fatos{border-top-color:rgba(242,238,231,.2)}

/* ---------------------------------------------------------- painel de investimento */
.painel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:16px}
.painel .eyebrow{margin-bottom:2px}
.painel h3{font-size:1.45rem}
.painel__linha{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.painel__linha:last-of-type{border-bottom:0}
.painel__linha .mono,.painel__linha span{font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--muted)}
.painel__linha h4{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--green)}
.painel__linha p{font-size:.92rem;color:var(--muted)}
.painel .tabela-rolo{margin-top:4px}
.on-dark .painel{background:rgba(242,238,231,.06);border-color:rgba(242,238,231,.2)}
.on-dark .painel h3{color:var(--ivory)}
.on-dark .painel__linha{border-bottom-color:rgba(242,238,231,.2)}
.on-dark .painel__linha h4{color:var(--rose)}

/* nuvem de professores e links de documento */
.pilulas a.pilula{text-decoration:none}

/* perfil do professor: texto de um lado, retrato do outro */
.phero--retrato{padding-block:clamp(110px,12vw,160px) clamp(50px,5.5vw,76px)}
.phero__texto{display:flex;flex-direction:column;align-items:flex-start}
.phero__texto h1{max-width:14ch}
.phero__texto .rotulo{color:var(--rose)}

/* ============================================================
   REVISÃO DO MIOLO
   ============================================================ */

/* a migalha agora vive dentro do hero */
.phero .migalhas{padding:0;margin-bottom:clamp(22px,2.6vw,34px);display:flex;
  align-items:center;gap:10px;font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:rgba(242,238,231,.68)}
.phero .migalhas a{color:rgba(242,238,231,.68);border-bottom:1px solid transparent;padding-bottom:2px}
.phero .migalhas a:hover{color:var(--ivory);border-bottom-color:rgba(242,238,231,.5)}
.phero .migalhas i{opacity:.4}
.phero .migalhas b{color:var(--ivory);font-weight:600}
.migalhas--soltas{padding:calc(104px + env(safe-area-inset-top,0px)) 0 0}

/* contagem do catálogo */
.contagem{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:6px}
.contagem b{font-family:var(--display);font-size:1.28rem;font-weight:600;color:var(--green)}
.contagem span{font-size:.92rem;color:var(--muted)}

/* ferramentas do catálogo: filtros, explicação e contagem numa faixa só */
.sec > .wrap > .pilulas{margin-bottom:16px}
.sec > .wrap > .pilulas + .lead{max-width:62ch}

.cursos{margin-top:clamp(34px,3.6vw,48px)}

/* espaço de respiro entre os blocos irmãos de uma seção */
.sec > .wrap > * + *{margin-top:clamp(18px,2vw,26px)}
.sec > .wrap > .head + *,.sec > .wrap > .head-row + *{margin-top:clamp(30px,3.4vw,44px)}

/* ---------------------------------------------------------- linha do tempo no claro
   A da Home foi desenhada para o fundo petróleo. Fora dele o texto
   ficava marfim sobre marfim, ilegível. Aqui vai a versão clara, e a
   escura fica presa ao .on-dark. */
.sec:not(.on-dark) .tempo__lista::before{background:var(--line)}
.sec:not(.on-dark) .tempo__item::before{background:var(--paper);border-color:rgba(12,107,94,.35)}
.sec:not(.on-dark) .tempo__item.on::before{background:var(--green);border-color:var(--green)}
.sec:not(.on-dark) .tempo__lista .tempo__prog{background:var(--green)}
.sec:not(.on-dark) .tempo__ano{color:var(--ochre)}
.sec:not(.on-dark) .tempo__item h4{color:var(--ink)}
.sec:not(.on-dark) .tempo__item p{color:var(--muted)}

/* a lista respira melhor em duas colunas quando a seção é larga */
.sec:not(.on-dark) .tempo__lista{max-width:none}
.sec:not(.on-dark) .tempo__item p{max-width:58ch}

/* links para documentos que ainda não existem como arquivo */
.tlink:not([href]){color:var(--muted);cursor:default}
.tlink:not([href]):hover{gap:.5em;color:var(--muted)}
.tlink:not([href])::after{content:"a anexar";margin-left:.6em;padding:.2em .6em;border-radius:999px;
  border:1px solid var(--line);font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none}
.on-dark .tlink:not([href]){color:rgba(242,238,231,.6)}
.on-dark .tlink:not([href])::after{border-color:rgba(242,238,231,.3)}

/* a grade da linha do tempo fora do fundo petróleo */
.sec:not(.on-dark) .tempo{margin-top:0}
.sec:not(.on-dark) .tempo__texto{position:sticky;top:110px}
.sec:not(.on-dark) .tempo__texto h2{color:var(--ink);max-width:16ch}
.sec:not(.on-dark) .tempo__texto p{color:var(--muted)}
.sec:not(.on-dark) .tempo__item p{max-width:46ch}
@media (max-width:900px){.sec:not(.on-dark) .tempo__texto{position:static}}

/* ============================================================
   SEGUNDA REVISÃO DO MIOLO
   ============================================================ */

/* RAIZ DO APERTO: o bloco genérico só ganhava espaçamento quando era
   filho direto do .wrap. Aninhado, que é o caso da maioria, os filhos
   encostavam uns nos outros. */
.bloco{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}
.sec > .wrap > .bloco{gap:clamp(26px,2.8vw,36px)}
.bloco .bloco{gap:clamp(12px,1.3vw,16px)}
.bloco > h2,.bloco > h3{margin-top:clamp(6px,.8vw,10px)}
.bloco > p{max-width:64ch}
.on-dark .bloco > p:not(.eyebrow):not(.rotulo){color:rgba(242,238,231,.84)}


/* definições: rótulo curto em cima, texto corrido embaixo */
.definicoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,2vw,26px);padding-top:6px}
.definicoes > div{display:flex;flex-direction:column;gap:6px}
.definicoes span{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--green)}
.definicoes p{font-size:.95rem;line-height:1.55;color:var(--muted)}
.on-dark .definicoes span{color:var(--rose)}
.on-dark .definicoes p{color:rgba(242,238,231,.84)}

/* ofertas de um mesmo curso */
.ofertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;
  margin-top:clamp(26px,3vw,38px);align-items:start}
.oferta{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,2.8vw,34px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.oferta:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(12,107,94,.3)}
.oferta .tag{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--green)}
.oferta h3{font-size:1.28rem}
.oferta .desc{font-size:.94rem;line-height:1.6;color:var(--muted)}
.oferta__estado{align-self:flex-start;padding:.4em .85em;border-radius:999px;
  background:rgba(12,107,94,.09);color:var(--green);
  font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;text-transform:none}
.oferta .fatos,.oferta .definicoes{margin-top:4px;padding-top:16px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.oferta .fatos b{font-size:1rem}

/* contraste no fundo petróleo: a olhada e as pastilhas de professor
   estavam escuras demais sobre escuro */
.on-dark .eyebrow,.tempo-sec .eyebrow,.phero .eyebrow{color:var(--rose);opacity:1}
.on-dark .pilula{border-color:rgba(242,238,231,.42);color:var(--ivory);background:rgba(242,238,231,.07)}
.on-dark .pilula:hover{border-color:var(--ivory);background:rgba(242,238,231,.16)}
.on-dark .bloco > p:not(.eyebrow):not(.rotulo),.on-dark .lead{color:rgba(242,238,231,.88)}

/* hero de curso: as pastilhas e o painel de fatos estavam colados no CTA */
.phero .chips{margin-top:clamp(26px,3vw,36px);gap:10px}
.phero .chip{border-color:rgba(242,238,231,.34);color:var(--ivory);background:rgba(242,238,231,.08)}
.phero .instglass--pagina{margin-top:clamp(28px,3.2vw,40px)}
.phero .acoes + .chips{margin-top:clamp(30px,3.4vw,42px)}

/* painel de investimento com cara de oferta, não de planilha */
.painel{background:var(--white);box-shadow:var(--shadow-sm)}
.painel__linha:first-of-type{padding:18px 22px;margin-top:4px;border:0;border-radius:var(--radius);
  background:rgba(12,107,94,.07);align-items:center}
.painel__linha:first-of-type h4{font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--green)}
.painel .tabela{min-width:0}
.painel .tabela thead th{padding-top:6px}
.painel .tabela td:first-child{color:var(--ink)}
.painel .tabela tbody td:nth-child(2){font-family:var(--display);font-size:1.05rem;color:var(--green)}

/* ficha de professor: a área vira a cor de destaque do cartão */
.ficha__texto .area{color:var(--green)}
.ficha:hover .ficha__texto .area{color:var(--ochre)}
.flist--4{grid-template-columns:repeat(4,1fr)}
.flist--4 .fitem:nth-child(4n+1){border-left:0;padding-left:0}
.flist--4 .fitem:nth-child(n+5){border-top:1px solid var(--line)}
@media (max-width:900px){.flist--4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.flist--4{grid-template-columns:1fr}}

/* o hero de curso usava display:contents nos blocos, e com isso perdia
   todo o espaçamento entre título, botões, pastilhas e painel de fatos */
.phero > .wrap{display:flex;flex-direction:column;align-items:flex-start}
.phero .bloco{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(14px,1.6vw,20px);width:100%}
.phero .bloco > .bloco{gap:clamp(12px,1.4vw,18px)}
.phero .bloco > p{max-width:56ch}
.phero .acoes{margin-top:clamp(16px,1.8vw,24px)}
.phero .chips{margin-top:clamp(28px,3.2vw,40px)}
.phero .instglass--pagina{margin-top:clamp(28px,3.2vw,40px);width:100%}

/* respiro entre seções: 152px em cima e embaixo de cada uma era demais
   para telas de leitura, onde as seções são curtas */
.sec{padding-block:clamp(70px,8vw,116px)}
.sec + .sec{padding-top:clamp(56px,6.4vw,92px)}
.sec--claro + .sec,.sec + .sec--claro{padding-top:clamp(70px,8vw,116px)}

/* a barra de números encosta no hero em vez de flutuar sozinha */
.sec--barra{padding-block:0;margin-top:clamp(-72px,-5vw,-48px);position:relative;z-index:3}
.sec--barra + .sec{padding-top:clamp(64px,7vw,104px)}
.sec--barra .instglass--pagina{background:var(--white);box-shadow:var(--shadow)}

/* ============================================================
   TERCEIRA REVISÃO DO MIOLO
   ============================================================ */

/* GRADES: as regras de três colunas estavam vazando para as variantes
   de duas e quatro. O quarto cartão perdia o fio e encostava no terceiro. */
.flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{
  border-left:1px solid var(--line);border-top:0;
  padding-left:clamp(22px,2vw,30px);padding-right:clamp(22px,2vw,30px)}
.flist--2 .fitem:nth-child(2n+1){border-left:0;padding-left:0}
.flist--2 .fitem:nth-child(2n){padding-right:0}
.flist--2 .fitem:nth-child(n+3){border-top:1px solid var(--line)}
.flist--3 .fitem:nth-child(3n+1){border-left:0;padding-left:0}
.flist--3 .fitem:nth-child(3n){padding-right:0}
.flist--3 .fitem:nth-child(n+4){border-top:1px solid var(--line)}
.flist--4 .fitem:nth-child(4n+1){border-left:0;padding-left:0}
.flist--4 .fitem:nth-child(4n){padding-right:0}
.flist--4 .fitem:nth-child(n+5){border-top:1px solid var(--line)}
@media (max-width:900px){
  .flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .flist--2 .fitem:nth-child(even),.flist--3 .fitem:nth-child(even),.flist--4 .fitem:nth-child(even){
    border-left:1px solid var(--line);padding-left:28px}
}
@media (max-width:620px){
  .flist--2 .fitem:nth-child(even),.flist--3 .fitem:nth-child(even),.flist--4 .fitem:nth-child(even){
    border-left:0;padding-left:0}
}

/* HIERARQUIA DENTRO DO BLOCO: o espaçamento era uniforme, e por isso
   olhada, título, texto e dados pareciam todos do mesmo nível */
.bloco{gap:0}
.bloco > * + *{margin-top:clamp(16px,1.8vw,22px)}
.bloco > .eyebrow + h2,.bloco > .eyebrow + h3,.bloco > .eyebrow + h4{margin-top:clamp(10px,1.1vw,15px)}
.bloco > h2 + p,.bloco > h3 + p,.bloco > h4 + p{margin-top:clamp(14px,1.5vw,20px)}
.bloco > * + .fatos,.bloco > * + .tabela-rolo{
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--line)}
.on-dark .bloco > * + .fatos{border-top-color:rgba(242,238,231,.22)}

/* faixa escura: com trama por padrão, lisa e centralizada nos professores */
.faixa-escura{position:relative;background:var(--petrol);color:var(--ivory);overflow:hidden}
.faixa-escura::before{content:"";position:absolute;inset:0;background:var(--pattern);opacity:.5;pointer-events:none}
.faixa-escura > .wrap{position:relative;z-index:1}
.faixa-escura--centro::before{display:none}
.faixa-escura--centro > .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:820px}
.faixa-escura--centro .bloco{align-items:center;text-align:center}
.faixa-escura--centro h2{max-width:16ch}
.faixa-escura--centro p{max-width:54ch;margin-inline:auto}
.faixa-escura--centro .pilulas{justify-content:center;margin-top:clamp(24px,2.8vw,34px)}

/* a chamada final ocupava 680px para um título, uma linha e um botão */
.final{padding-block:clamp(64px,7vw,96px)}
.final h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:17ch;margin-top:16px}
.final p{margin-top:16px;max-width:52ch}
.final .row,.final .acoes{margin-top:28px;justify-content:center}

/* ---------------------------------------------------------- comparar */
.curso__comparar{cursor:pointer;transition:color .3s var(--ease),opacity .3s}
.curso__comparar:hover{color:var(--green)}
.curso__comparar.is-off{opacity:.4;cursor:not-allowed}
.curso__comparar input{cursor:pointer}
.curso:has(input[data-comparar]:checked){border-color:var(--green);box-shadow:var(--shadow-sm)}
.curso:has(input[data-comparar]:checked) .curso__comparar{color:var(--green);font-weight:700}

.barra-comparar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--graphite);color:var(--ivory);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -12px 40px -24px rgba(0,54,64,.6)}
.barra-comparar[hidden]{display:none}
.barra-comparar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.barra-comparar p{display:flex;align-items:baseline;gap:8px}
.barra-comparar b{font-family:var(--display);font-size:1.4rem;color:var(--ivory)}
.barra-comparar span{font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:rgba(242,238,231,.7)}
.barra-comparar > .wrap > div{display:flex;gap:10px;flex-wrap:wrap}
.barra-comparar .btn-ghost{border-color:rgba(242,238,231,.36);color:var(--ivory)}
.barra-comparar .btn-ghost:hover{border-color:var(--ivory)}
.barra-comparar .btn-primary{background:var(--ivory);color:var(--graphite)}
.barra-comparar .btn-primary:hover{background:var(--rose)}

dialog.comparar{max-width:min(940px,94vw)}
dialog.comparar .tabela{min-width:0}
dialog.comparar .tabela th[scope=row]{font-family:var(--label);font-size:.84rem;font-weight:400;
  letter-spacing:normal;text-transform:none;color:var(--muted);white-space:nowrap}
dialog.comparar .tabela thead th{font-family:var(--display);font-size:1.05rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink)}
dialog.comparar .tabela td{color:var(--ink)}
@media (max-width:620px){
  dialog.comparar .tabela,dialog.comparar .tabela thead{display:table;min-width:420px}
  dialog.comparar .tabela tr{display:table-row;border:0}
  dialog.comparar .tabela td{display:table-cell}
  dialog.comparar .tabela td::before{content:none}
}

/* paginas.css carrega depois de home.css, então a regra do rosa sobre
   escuro vencia a correção do contraste da chamada final */
.final.on-dark .eyebrow{color:rgba(242,238,231,.92)}

/* ============================================================
   QUARTA REVISÃO DO MIOLO
   ============================================================ */

/* ESPAÇAMENTO DOBRADO: o bloco dentro do wrap mantinha gap de 36px e
   ainda recebia as margens entre irmãos. Toda distância saía somada. */
.sec > .wrap > .bloco,.bloco,.bloco .bloco{gap:0}

/* DADOS: rótulo em caixa alta em cima, valor embaixo. Antes saía ao
   contrário, com a data grande e "inscrições" perdido embaixo. */
.fatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,2.2vw,30px) clamp(24px,2.6vw,36px)}
.fatos > div{display:flex;flex-direction:column;gap:7px}
.fatos span{font-family:var(--label);font-size:.84rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--green-2);order:-1}
.fatos b{font-family:var(--display);font-size:1.18rem;font-weight:600;line-height:1.25;color:var(--ink)}
.fatos--longo{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.fatos--longo b{font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1.5;color:var(--ink)}
.on-dark .fatos span{color:var(--rose)}
.on-dark .fatos b{color:var(--ivory)}
.oferta .fatos,.curso .fatos{grid-template-columns:1fr 1fr;gap:16px 20px}
.oferta .fatos b,.curso .fatos b{font-size:1.02rem}

/* CENTRALIZAÇÃO: as seções centralizadas centravam a caixa, mas o título
   com largura máxima ficava encostado à esquerda dentro dela. */
.faixa-escura--centro > .wrap{max-width:940px}
.faixa-escura--centro .head-row,.faixa-escura--centro .head,
.faixa-escura--centro .bloco{align-items:center;text-align:center;width:100%}
.faixa-escura--centro .wrap > *,.faixa-escura--centro .head > *,
.faixa-escura--centro .bloco > *{margin-inline:auto}
.faixa-escura--centro h2{max-width:24ch}
.faixa-escura--centro .eyebrow{justify-content:center}

.final > div{align-items:center}
.final > div > *,.final .bloco,.final .bloco > *,.final .head,.final .head > *{margin-inline:auto}
.final .bloco,.final .head{align-items:center;text-align:center;width:100%}
.final .eyebrow{justify-content:center}
.final h2{max-width:20ch}

/* o cabeçalho duplo é uma grade de duas colunas; numa seção centralizada
   ele precisa virar coluna única, senão o título fica preso à esquerda */
.faixa-escura--centro .head-row{display:flex;flex-direction:column;align-items:center;
  gap:clamp(18px,2vw,26px);max-width:none}
.faixa-escura--centro .head{max-width:none;align-items:center}
.faixa-escura--centro .head .lead,.faixa-escura--centro .head-row .lead{max-width:56ch;padding-bottom:0}

/* ============================================================
   QUINTA REVISÃO DO MIOLO
   ============================================================ */

/* os dados da próxima turma ganham caixa própria, em vez de flutuarem
   soltos sob um fio */
.bloco > .fatos > div{
  padding:clamp(18px,1.9vw,24px) clamp(18px,1.9vw,24px) clamp(20px,2.1vw,26px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.bloco > .fatos > div:hover{border-color:rgba(12,107,94,.3);background:var(--white)}
.bloco > .fatos{gap:14px}
.bloco > * + .fatos{border-top:0;padding-top:0;margin-top:clamp(24px,2.6vw,34px)}
.on-dark .bloco > .fatos > div{background:rgba(242,238,231,.07);border-color:rgba(242,238,231,.22)}
.on-dark .bloco > .fatos > div:hover{border-color:rgba(242,238,231,.4);background:rgba(242,238,231,.11)}
/* dentro de cartões continua sem caixa, senão vira caixa dentro de caixa */
.oferta .fatos > div,.curso .fatos > div,
.painel .fatos > div,.phero .fatos > div{padding:0;background:none;border:0;border-radius:0}

/* a grade fecha embaixo e as células vazias seguram os fios */
.flist{border-bottom:1px solid var(--line)}
.band .flist{border-bottom-color:rgba(242,238,231,.24)}
.fitem--vazio{min-height:0}
@media (max-width:900px){.fitem--vazio{display:none}}

/* chamada final: mais ar entre o texto e o botão */
.final p + .row,.final p + .acoes,.final .bloco + .acoes,.final .bloco + .btn{
  margin-top:clamp(34px,3.8vw,48px)}
.final .acoes,.final .row{gap:14px}

/* cadastro de novidades: campo na largura do texto e mais respiro */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.news{display:flex;flex-direction:column;align-items:center;gap:clamp(22px,2.4vw,32px);
  width:100%;max-width:580px;margin:clamp(42px,4.6vw,60px) auto 0}
.news input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--white);
  border:1px solid rgba(242,238,231,.4);border-radius:999px;padding:.95em 1.4em;text-align:center}
.news input::placeholder{color:var(--muted)}
.news input:focus-visible{outline:2px solid var(--ivory);outline-offset:2px}
.news .btn{justify-content:center}

/* ============================================================
   SEXTA REVISÃO DO MIOLO
   ============================================================ */

/* as células vazias saíram: a quantidade de colunas passou a ser
   escolhida de modo a fechar as filas */
.fitem--vazio{display:none}

/* o realce recuado também nas caixas de dados e nas ofertas */
.bloco > .fatos > div{transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.bloco > .fatos > div:hover{transform:translateY(-2px)}

/* catálogo numa grade só, cartões do mesmo tamanho lado a lado */
.cursos{grid-template-columns:repeat(3,1fr);align-items:stretch}
.curso{height:100%}
@media (max-width:1000px){.cursos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cursos{grid-template-columns:1fr}}

/* a placa do hover acompanha o recuo de cada variante de grade */
.flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{--placa-e:8px;--placa-d:8px}
.flist--2 .fitem:nth-child(2n+1){--placa-e:-20px}
.flist--2 .fitem:nth-child(2n){--placa-d:-20px}
.flist--3 .fitem:nth-child(3n+1){--placa-e:-20px}
.flist--3 .fitem:nth-child(3n){--placa-d:-20px}
.flist--4 .fitem:nth-child(4n+1){--placa-e:-20px}
.flist--4 .fitem:nth-child(4n){--placa-d:-20px}
@media (max-width:900px){
  .flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{--placa-e:-20px;--placa-d:-20px}
  .flist--2 .fitem:nth-child(even),.flist--3 .fitem:nth-child(even),.flist--4 .fitem:nth-child(even){--placa-e:8px}
}

/* ============================================================
   AJUSTES DO CLIENTE
   ============================================================ */

/* O circuito saiu dos fundos claros: atrás de texto sobre marfim ele
   competia com a leitura. Fica só nos fundos escuros, e mais discreto. */
.faixa-escura::before,.phero:not(.phero--foto)::before{background-size:360px 360px;opacity:.26}
.sec--claro{position:relative;background:var(--paper)}
/* a modalidade do curso vira etiqueta, com mais presença */
.curso .tag,.oferta .tag{align-self:flex-start;padding:.42em .85em;border-radius:999px;
  background:rgba(12,107,94,.09);color:var(--green-2);letter-spacing:normal}
.on-dark .curso .tag,.on-dark .oferta .tag{background:rgba(242,238,231,.14);color:var(--rose)}
.curso:hover .tag,.oferta:hover .tag{background:rgba(12,107,94,.14)}

/* filtro dos conteúdos */
.art[hidden]{display:none}
.arts[data-vazio="true"]::after{content:"Nenhum conteúdo nesta categoria por enquanto.";
  grid-column:1/-1;color:var(--muted);font-size:.95rem}

/* ------------------------------------------------ Encontre sua formação
   Duas colunas, como no protótipo v0.12: o texto de apoio de um lado e,
   do outro, a pergunta com a barra de andamento. No fim a caixa da
   pergunta dá lugar ao resultado, na mesma coluna. As cinco perguntas
   vêm de cromo.js; aqui só o desenho. */
.orientador{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,64px);align-items:start}
.orientador__texto h2{font-size:var(--fs-h2);margin:0 0 18px}
.orientador__texto .intro{color:var(--muted);font-size:var(--fs-lead);line-height:1.62;max-width:44ch}
.orientador__nota{margin-top:16px;max-width:46ch;font-size:.88rem;line-height:1.6;color:var(--muted)}
.orientador__nota a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

.orientador__caixa{scroll-margin-top:96px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3.2vw,44px);box-shadow:var(--shadow-sm)}
.orientador__progresso{height:4px;border-radius:999px;background:var(--line);overflow:hidden;
  margin-bottom:clamp(22px,2.6vw,32px)}
.orientador__progresso i{display:block;height:100%;width:var(--p);background:var(--green);
  border-radius:inherit;transition:width .45s var(--ease)}
.orientador__titulo{margin:0 0 22px;font-size:clamp(1.45rem,2.3vw,2rem);line-height:1.12;outline:none}
.orientador__opcoes{display:grid;gap:10px}
.orientador__opcao{display:block;width:100%;text-align:left;padding:17px 20px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.4;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.orientador__opcao:hover,.orientador__opcao:focus-visible{border-color:var(--green);background:rgba(12,107,94,.07)}
.orientador__contato{max-width:none}

/* cada pergunta entra com um leve deslize; quem pede menos movimento não vê */
@media (prefers-reduced-motion:no-preference){
  .orientador__passo > *{animation:orientadorEntra .4s var(--ease) both}
  .orientador__resultado > *{animation:orientadorEntra .5s var(--ease) both}
}
@keyframes orientadorEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.orientador__resultado{background:var(--petrol);color:var(--ivory);border-radius:var(--radius-lg);
  padding:clamp(28px,3.6vw,48px);box-shadow:var(--shadow);scroll-margin-top:96px}
.orientador__resultado p{color:rgba(242,238,231,.84);line-height:1.6}
.orientador__resultado p + p{margin-top:12px}
.orientador__resultado strong{color:var(--ivory);font-weight:600}
.orientador__selo{display:inline-flex;margin-bottom:18px;padding:.5em 1em;
  border:1px solid rgba(242,238,231,.28);border-radius:999px;background:rgba(242,238,231,.06);
  font-family:var(--label);font-size:.84rem;font-weight:400;color:var(--rose)}
.orientador__titulo--resultado{margin:0 0 16px;font-size:clamp(2rem,3.8vw,2.9rem);color:var(--ivory)}
.orientador__cta{margin-top:28px}
.orientador__resultado .orientador__nota{margin-top:22px;color:rgba(242,238,231,.62)}

@media (max-width:860px){
  .orientador{grid-template-columns:1fr;gap:28px}
  .orientador__texto .intro,.orientador__nota{max-width:60ch}
}

/* ---------------------------------------------- filtro de perfil */
/* display:flex nos cartões vence o hidden do navegador */
[hidden]{display:none!important}
.pilula[data-perfil-filtro]{cursor:pointer}
.pilula.is-on{border-color:var(--green);background:rgba(12,107,94,.09);color:var(--green-2);font-weight:600}
.on-dark .pilula.is-on{border-color:var(--ivory);background:rgba(242,238,231,.16);color:var(--ivory)}

/* ------------------------------------------- respiro do cartão */
/* a etiqueta de modalidade quebrava em duas linhas dentro da pílula e
   encostava no "Comparar". Agora a linha de cima pode quebrar, e o
   texto do cartão ganha entrelinha. */
.curso{gap:16px;padding:clamp(28px,3vw,36px)}
.curso__topo{flex-wrap:wrap;row-gap:10px}
.curso .tag,.oferta .tag{line-height:1.45;padding:.5em .95em;max-width:100%;text-wrap:balance}
.curso__comparar{margin-left:auto}
.curso h3{line-height:1.18}
.curso .desc{line-height:1.66;color:var(--muted)}
.curso .fatos{margin-top:auto;padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:16px 22px}
.curso .fatos b{font-size:1.06rem}
.curso .tlink{margin-top:clamp(16px,1.8vw,22px)}

/* ------------------------------------ quadro à espera de retrato */
/* sem iniciais: a sigla de duas letras gritava mais que o nome */
.ficha__foto--vazia{background:linear-gradient(160deg,rgba(12,107,94,.09),rgba(229,210,192,.5))}
.prof-vazio{position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(12,107,94,.12),rgba(229,210,192,.55))}

/* ficha de professor ainda sem página própria: mesma grade, sem link */
.ficha--curta .ficha__texto{gap:7px}
.ficha--curta{cursor:default}
.ficha--curta:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* rodapé do cartão de curso: link e "comparar" na mesma linha */
.curso__acoes{margin-top:clamp(16px,1.8vw,22px);display:flex;align-items:center;
  justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.curso__acoes .tlink{margin-top:0}
.curso__acoes .curso__comparar{margin-left:0}
.curso__topo{display:block}
.curso .tag{display:inline-block}

/* ------------------------------------------- fileira de botões
   "Formações relacionadas" eram três links de seta empilhados, com
   alvo de clique do tamanho da palavra. Viraram botões numa linha. */
.botoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn-mini{font-size:.93rem;padding:.6em 1.05em;border-radius:999px}
.botoes .btn-ghost{background:var(--paper)}
.botoes .btn-ghost .arw{transition:transform .35s var(--ease)}
.botoes .btn-ghost:hover .arw{transform:translateX(3px)}
.on-dark .botoes .btn-ghost{background:rgba(242,238,231,.06);border-color:rgba(242,238,231,.26);color:var(--ivory)}
.on-dark .botoes .btn-ghost:hover{border-color:var(--ivory);color:var(--ivory)}

/* o aceite do formulário: caixa à esquerda, texto à direita, sempre */
.lead__aceite{flex-direction:row!important;align-items:flex-start;gap:11px;
  font-family:var(--sans);font-size:.94rem;font-weight:400;color:var(--ink);line-height:1.5}
.lead__aceite input{width:19px;height:19px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--green)}
.lead__aceite span{flex:1 1 auto}

/* o circuito é um sistema só, definido em home.css; aqui só se garante
   que as regras desta folha não voltem a fixar opacidade por conta */
.faixa-escura::before,.phero:not(.phero--foto)::before{opacity:var(--circ)}
.tem-circuito::before{opacity:0;transition:opacity 1.1s var(--ease)}
.tem-circuito.circuito-on::before{opacity:var(--circ)}
@media (prefers-reduced-motion:reduce){
  .tem-circuito::before{transition:none;opacity:var(--circ)}
}

/* ------------------------------------- retrato da ficha com mais ar
   A janela 3:2.1 sobre um retrato 3:3.8 cortava a testa de quem está
   mais alto no quadro. A janela ficou mais alta e o ponto de leitura
   subiu, então sobra ar acima da cabeça em vez de faltar. */
.ficha__foto{aspect-ratio:3/2.7}
.ficha__img{object-position:center 16%}

/* as variantes da grade seguem a regra única do home.css; as regras
   antigas de recuo por coluna saem de cena aqui também */
.flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{
  --placa-e:8px;--placa-d:8px;
  padding-left:var(--pad-f);padding-right:var(--pad-f)}
.flist--2 .fitem:nth-child(2n+1),.flist--3 .fitem:nth-child(3n+1),
.flist--4 .fitem:nth-child(4n+1){padding-left:var(--pad-f)}
.flist--2 .fitem:nth-child(2n),.flist--3 .fitem:nth-child(3n),
.flist--4 .fitem:nth-child(4n){padding-right:var(--pad-f)}
@media (max-width:900px){
  .flist--2 .fitem,.flist--3 .fitem,.flist--4 .fitem{--placa-e:8px;--placa-d:8px}
  .flist--2 .fitem:nth-child(even),.flist--3 .fitem:nth-child(even),
  .flist--4 .fitem:nth-child(even){--placa-e:8px}
}

/* celular: mesmo respiro das seções da Home nas páginas internas */
@media (max-width:640px){
  .phero{padding-block:clamp(86px,15vh,120px) clamp(34px,7vw,48px)}
  .orientador__caixa{padding:22px 18px}
  .orientador__resultado{padding:26px 20px}
  .orientador__opcao{padding:15px 16px}
  .fichas,.cursos,.turmas,.tabela-rolo{margin-top:clamp(26px,6vw,36px)}
  .ficha__texto{padding:22px}
  .curso{padding:24px 22px}
  .botoes .btn-mini{padding:.62em 1em}
  .migalhas{margin-bottom:18px}
}
.flist > .fitem:nth-child(n),
.flist--2 > .fitem:nth-child(n),.flist--3 > .fitem:nth-child(n),.flist--4 > .fitem:nth-child(n){
  padding-left:var(--pad-f);padding-right:var(--pad-f)}

/* no celular as internas seguem o mesmo respiro da Home: a regra de
   paginas.css fixava 70px direto no .sec e passava por cima de --sec */
@media (max-width:640px){
  .sec{padding-block:var(--sec)}
  .sec + .sec{padding-top:var(--sec)}
}