/* ══ Pele da Black (22/10/2026) ════════════════════════════════════════════════════════════════════════════════════
   Por cima do pagina.css, sem mexer nele: noite estrelada que passa valor, na língua das capas da Vitalícia no checkout
   (Cinzel prata fininha, infinito, céu das 6h07). Neon só em botão e na identidade de cada plano; nada de âmbar nem
   amarelo; brilho em menta, azul-claro e violeta, só no respiro entre as dobras. */
@font-face{font-family:'Cinzel';src:url('/produtos/black-do-un-vendas/pele/Cinzel.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Museo';src:url('/produtos/_comum/fontes/Museo700-Regular.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--amber:#DDE3EA;--amber-2:#DDE3EA;--amber-line:rgba(221,227,234,.22);--cyan:#fff;--glow:none;--glow-h:none;
  --bg:transparent;--bg-edge:#02141F;--line:rgba(221,227,234,.14);--line-s:rgba(221,227,234,.12);
  --prata:linear-gradient(180deg,#FDFDFD 0%,#F8F8F8 30%,#E6E7E7 60%,#D2D2D4 82%,#BDBDC1 100%)}

/* céu fixo atrás de tudo: estrela fina em três tamanhos sobre o navy quase preto; o violeta só nasce no fim da página
   (--k vai de 0 a 1 com a rolagem, no pele-black.js) */
body{background:#02141F}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1px 1px at 17% 23%,rgba(255,255,255,.85) 50%,transparent 51%),
    radial-gradient(1px 1px at 71% 61%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 43% 87%,rgba(232,238,245,.9) 50%,transparent 51%),
    radial-gradient(1px 1px at 89% 12%,rgba(255,255,255,.6) 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 29% 54%,rgba(214,222,232,.75) 50%,transparent 51%),
    radial-gradient(1px 1px at 58% 35%,rgba(255,255,255,.55) 50%,transparent 51%),
    linear-gradient(180deg,#02141F 0%,#02141F 45%,#071F40 70%,#1A1A55 88%,#2E1A6A 100%);
  background-size:211px 173px,293px 241px,421px 367px,157px 199px,613px 509px,347px 283px,100% 260%;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 calc(var(--k,0) * 100%)}
.dobra,.hero{background:transparent!important}
.nebula{background:radial-gradient(40% 30% at 78% 4%,rgba(124,86,230,.08),transparent 72%)}
#livro::before,#live::before,#atlas::before,#cursos::before,#provas::before,#oferta::before,#final::before{background:none}
.book-split-media::before{background:radial-gradient(closest-side,rgba(24,240,255,.18),rgba(24,240,255,0) 76%)}
.btn,.destaque,.p2{box-shadow:none!important}

/* letra: títulos em Museo 500, no peso da Cinzel 500 da capa; 700 nos títulos pequenos (cartão, aba). O destaque é o
   VITALÍCIA da capa: Cinzel fininha, prata clara, maiúscula */
.headline,.dh2,.po-title{font-weight:500;letter-spacing:-.012em}
.headline b,.dh2 b,.po-title b{font-weight:500}
.tri-title,.tipo-title,.hub-t,.hub-h3,.curso-nome,.p2 h3,.oc-title,.cs-title{font-weight:700}
.hl-a,.hl-ai,.hl-m,.hl-mi{font-family:'Cinzel',Georgia,serif;font-style:normal;font-weight:500;text-transform:uppercase;
  background:var(--prata);-webkit-background-clip:text;background-clip:text;color:transparent}
/* régua da margem: sai o equilíbrio de linhas e o max-width em ch que escolhiam a quebra */
.headline{max-width:none}
.dh2,.dh3,.lead,.headline,.hero-lead,.hub-h3,.proof-cap,.antigolpe,.po-title,.po-sub{text-wrap:wrap}
/* listas: o ✓ fica pendurado à esquerda e o item é bloco; em flex o negrito virava item à parte e abria vão na frase */
.curso-mini li,.gar-list li,.gpq-check li,.tk li{display:block;position:relative;padding-left:1.35em}
.curso-mini li::before,.gar-list li::before,.gpq-check li::before,.tk li::before{position:absolute;left:0}
/* "Exatas · Fundador" é pílula: fica embaixo do nome do curso, não colada na frase */
.curso-only{display:block;width:fit-content;margin:6px 0 0}
/* no celular o sobretítulo quebra em mais de uma linha: saem os fios dos lados e o texto corre até a margem */
@media(max-width:560px){.eyebrow{display:block;text-align:center}.eyebrow::before,.eyebrow::after{display:none}}
/* no celular "Saber a fórmula é bom, saber" cabe inteira antes da quebra dela; o corpo cede, nada é escolhido */
@media(max-width:560px){#atlas .dh2{font-size:min(2rem,calc((100vw - 40px) / 14.4))}}

/* topo: a dupla some em elipse nas bordas e no pé; embaixo, o selo Universo Infinito no azul-claro */
.hero-media{border-radius:0;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%),radial-gradient(ellipse 64% 92% at 48% 40%,#000 52%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(180deg,#000 84%,transparent 100%),radial-gradient(ellipse 64% 92% at 48% 40%,#000 52%,transparent 100%)}
.hero-selo{display:block;position:relative;width:min(88%,520px);height:auto;margin:-3% auto 0}

/* faixas que correm: escuras, com filete prata */
.mqbar{background:transparent;transform:none;border-top:1px solid rgba(221,227,234,.22);border-bottom:1px solid rgba(221,227,234,.22)}
.mqt span,.mqt .sep{color:#C9D1DA}

/* dobra do Box no escuro; "O Box é seu e o Atlas também!" vira faixa lima inclinada, letra navy em Cinzel */
.preoffer{background:transparent;border-top:0;border-bottom:0}
.preoffer :is(h2,h3,p,figcaption,small,span,div){color:#E8EDF2}
.preoffer .po-hours{display:block;width:fit-content;margin-top:12px;background:#E1FA14;color:#03203D;transform:rotate(-1.5deg);
  padding:6px 18px 8px;border-radius:10px;box-shadow:none;font-family:'Cinzel',Georgia,serif;font-weight:600;text-transform:uppercase}
.cs-thumb,.oc-thumb{background:transparent;object-fit:contain}

/* planos: a arte da capa de cada Vitalícia no topo; a cor dela só em contorno, ✓ e botão; preço em branco */
.p2:has([data-plano="fundador"]){--pc:#E1FA14}
.p2:has([data-plano="exatas"]){--pc:#18F0FF}
.p2:has([data-plano="medicina"]){--pc:#0CF2B5}
#modal-pag[data-pag-plano="fundador"] .modal-pag{--pc:#E1FA14}
#modal-pag[data-pag-plano="exatas"] .modal-pag{--pc:#18F0FF}
#modal-pag[data-pag-plano="medicina"] .modal-pag{--pc:#0CF2B5}
.p2{border:1px solid var(--pc)!important;background:rgba(2,20,31,.82)!important}
.p2-logo{border-radius:10px}
.p2 .btn{background:var(--pc)!important;color:#03203D!important}
.p2 .valor{color:#fff!important}
.p2-base b,.p2-base::before,.p2-list li::before,.p2-adds{color:var(--pc)!important}
.combo-strip{background:rgba(2,20,31,.9)}

/* aurora: camada de nuvens gigantes ao longo da página inteira (montada no pele-black.js), uma por tela, alternando as
   quatro formas (a cortina menta, b fita em S azul→violeta, c violeta de borda menta, d véu baixo), lado, giro e
   espelho. Bem desfocadas e fracas: passam por trás de tudo sem atrapalhar a leitura */
body{position:relative}
.auroras{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.auroras i{position:absolute;display:block;background-repeat:no-repeat;background-size:100% 100%;filter:blur(6px);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
/* aurora da hero sem as manchas da esquerda: com a dupla ao lado do texto, ela some na coluna do texto (a nuvem vai de
   -20vw a 130vw, então 33% e 45% dela são 30vw e 47,5vw da tela) */
@media(min-width:901px){
  .auroras i:first-child{
    -webkit-mask-image:linear-gradient(90deg,transparent 33%,#000 45%),radial-gradient(closest-side,#000 55%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 33%,#000 45%),radial-gradient(closest-side,#000 55%,transparent 100%);
    mask-composite:intersect}
}
/* foto do combo do GFE: maior, no céu das artes dos planos (azul-noite que vai pro violeta, com estrelas), brilho no
   verde da aurora e sem o selo de ampliar */
.cs-thumb-btn{width:clamp(230px,22vw,280px);justify-self:center;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(180,191,206,.22);
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.85) 50%,transparent 70%),
    radial-gradient(1px 1px at 63% 9%,rgba(255,255,255,.7) 50%,transparent 70%),
    radial-gradient(1.4px 1.4px at 38% 41%,rgba(255,255,255,.75) 50%,transparent 70%),
    radial-gradient(1px 1px at 86% 33%,rgba(255,255,255,.6) 50%,transparent 70%),
    radial-gradient(1px 1px at 24% 72%,rgba(255,255,255,.55) 50%,transparent 70%),
    radial-gradient(1.2px 1.2px at 77% 81%,rgba(255,255,255,.6) 50%,transparent 70%),
    linear-gradient(180deg,#021420 0%,#051D35 20%,#0A264C 40%,#192661 60%,#2E1E73 75%,#4A1F7F 88%,#61288B 100%);
  background-size:90px 64px,110px 80px,70px 90px,130px 70px,80px 100px,120px 110px,100% 100%}
.cs-thumb{width:76%;margin:14px auto;height:auto;border:0;border-radius:0;
  filter:drop-shadow(0 0 1px rgba(175,255,232,.4)) drop-shadow(0 0 8px rgba(14,226,180,.22))}
.cs-thumb-btn:hover .cs-thumb{filter:drop-shadow(0 0 1px rgba(175,255,232,.4)) drop-shadow(0 0 8px rgba(14,226,180,.22)) brightness(1.08)}
/* Box com os 2 livros (23/10, o Box vai junto com o GFE sozinho): foto larga, ocupa a largura do céu */
.cs-thumb--box{width:100%}
.cs-zoom{display:none}
/* Box do "O Box é seu" recortado da foto de fundo claro (o creme sumia no fundo): direto no céu, sem moldura, com o
   brilho verde da dobra do livro */
.po-box-img{--m:calc(min(100%,280px) * 1.2604 * -.1033);
  border:0;border-radius:0;box-shadow:none;width:calc(min(100%,280px) * 1.2604);max-width:none;margin:var(--m);
  filter:contrast(1.2) drop-shadow(0 0 22px rgba(11,195,158,.6))}
/* o arquivo traz 72 px de vão transparente em volta do Box (697 de largura pra 553 de Box): sem ele o brilho batia na
   borda de cima da imagem e saía reto. Largura x1,2604 e margem negativa de 10,33% deixam o Box no mesmo tamanho e lugar */
/* dobra do livro numa coluna só: a foto do Box com os 2 livros vem primeiro, grande e centrada (como no celular), e o
   texto embaixo */
#livro .book-split--rev{grid-template-columns:minmax(0,1fr);max-width:820px}
#livro .book-split--rev .book-split-media{order:-1}
#livro .book-split--rev .book-split-media img{width:84%;margin-inline:auto}
/* sem filete entre as dobras: o céu e a aurora correm direto de uma pra outra */
.dobra{border-top:0!important;border-bottom:0!important}
/* colagem do Atlas sem a sombra da caixa: a caixa corta a sombra em cantos retos e, com a aurora atrás, aparece um
   retângulo em volta das telas (a imagem já traz a sombra dela) */
#atlas .plat-hero{box-shadow:none}
/* os cartões dos planos ficam fechados pra aurora não passar pelo texto deles */
.planos2 .p2{background:rgba(2,20,31,.93)!important}
/* título da aba: o tamanho mora na caixa dele, pra o corpo cede conseguir mexer (no próprio .hub-t ficava preso) */
.hub-tab>span:not(.hub-n):not(.hub-arrow){font-size:clamp(.96rem,1.4vw,1.12rem)}
.hub-t{font-size:1em}
/* coluna em rem, não em ch: em ch ela cresce junto com o corpo e o corpo cede nunca muda a linha (mesma largura de antes) */
.lead{max-width:38rem}
.hero-lead{max-width:31rem}
.proof-cap{max-width:28rem}
.antigolpe{max-width:23rem}
.po-sub{max-width:31rem}
/* subtítulo do plano: espaçamento entre letras menor, pra a quebra da margem e a régua concordarem */
.p2-foco{letter-spacing:.05em}
/* brilho no verde da aurora contornando a dupla (segue o recorte da foto; a máscara de baixo apaga ele no pé) */
.hero-media{filter:drop-shadow(0 0 1.5px rgba(175,255,232,.95)) drop-shadow(0 0 12px rgba(14,226,180,.55))}
/* arte do plano no modal de escolha: a moldura abraça a arte (com largura 100% a altura máxima deixava vão dos lados) */
.m-logo{width:auto;max-width:100%}

/* dobra ao vivo (22/10): LF e LM inteiros, ao vivo, da unidade de BH, o ano todo em 2027.
   Os dois cursos vêm logo abaixo do título, sem caixa (nome em Cinzel prata, quem dá, valor e "já incluso"); depois o
   mural de 4 fotos da aula, cada uma com um post-it pequeno colado no canto ("menores e mais na estética": papel claro
   em tom frio, letra à mão, fita); fecha com a turma de borda a borda */
@font-face{font-family:'Kalam';font-weight:400;font-display:swap;
  src:url(/produtos/_comum/fontes/Kalam400-latin.woff2) format('woff2'),url(/produtos/_comum/fontes/Kalam400-latin-ext.woff2) format('woff2')}
/* FAQ do golpe: os números oficiais, cada um na sua linha (o número nunca parte no meio) e a função embaixo */
.fa-nums{list-style:none;display:grid;gap:10px;margin:12px 0 14px;padding:0}
.fa-nums li{padding:10px 14px;border-radius:10px;border:1px solid rgba(14,226,180,.35);background:rgba(14,226,180,.06)}
.fa-nums b{display:block;font-family:var(--font-d);font-weight:700;color:#fff;letter-spacing:.02em}
.fa-nums span{display:block;margin-top:2px;font-size:.92em;color:var(--text-2)}
/* selo igual ao dos canais oficiais da /links: os números que podem mandar link de pagamento */
.fa-tag{display:block;width:fit-content;margin-top:8px;padding:3px 11px;border-radius:999px;background:#B6F5D8;color:#0B2A22;font-style:normal;font-size:.8em;font-weight:600;white-space:nowrap}
/* fatos do ao vivo: faixa larga logo abaixo do título, no lugar do texto apertado embaixo dele (23/10) */
.av-fatos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:1080px;margin:clamp(26px,3.6vw,46px) auto 0;text-align:center}
.av-fato{padding:4px clamp(12px,1.8vw,26px)}
.av-fato+.av-fato{border-left:1px solid rgba(230,231,231,.2)}
.av-fato b{display:block;font-family:'Cinzel',Georgia,serif;font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;
  font-size:clamp(1.6rem,2.8vw,2.4rem);background:var(--prata);-webkit-background-clip:text;background-clip:text;color:transparent}
.av-fato span{display:block;margin-top:6px;font-size:clamp(.84rem,1.05vw,.96rem);line-height:1.5;color:var(--text-2)}
@media(max-width:760px){
  .av-fatos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .av-fato:nth-child(3){border-left:0}
}
/* a faixa dos cursos fica sobre o teto da foto da turma (a foto sobe por baixo dela; os rostos começam a ~36% da foto) */
.av-cursos-wrap{position:relative;z-index:2}
/* centrada no vão entre o mural e as cabeças da turma: a turma sobe 17vw por baixo da faixa e as cabeças estão a ~35% da
   altura da foto, então embaixo sobram ~5,2vw (medido); em cima vai o mesmo */
.av-cursos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:5.2vw auto 0;text-align:center}
.av-curso{padding:4px clamp(16px,3vw,44px)}
.av-curso+.av-curso{border-left:1px solid rgba(230,231,231,.2)}
/* entrelinha folgada: com background-clip a Cinzel apertada come o acento do Í */
.av-nome{font-family:'Cinzel',Georgia,serif;font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.35;
  font-size:clamp(1.2rem,2.1vw,1.7rem);background:var(--prata);-webkit-background-clip:text;background-clip:text;color:transparent}
.av-quem{margin-top:4px;font-size:clamp(.92rem,1.15vw,1.02rem);color:var(--text-2)}
.av-preco{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin-top:12px}
.av-vale{font-size:.95rem;color:var(--text-2)}
.av-vale b{font-family:var(--font-d);font-weight:900;font-size:1.3rem;color:#fff}
.av-incluso{padding:4px 11px;border-radius:999px;border:1px solid rgba(14,226,180,.55);background:rgba(14,226,180,.08);
  color:#8FF5DA;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.av-mural{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,clamp(220px,23vw,320px));
  grid-template-areas:"sala sala felipe" "alunos eng eng";gap:clamp(16px,2vw,26px);max-width:1180px;
  margin:clamp(40px,6vh,64px) auto 0}
.av-foto{position:relative;margin:0}
.av-foto img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid rgba(180,191,206,.2);
  box-shadow:0 0 26px 1px rgba(11,195,158,.2),0 26px 50px -26px rgba(0,0,0,.85)}
.av-foto--sala{grid-area:sala}
.av-foto--felipe{grid-area:felipe}
.av-foto--alunos{grid-area:alunos}
.av-foto--eng{grid-area:eng}
.av-foto--sala img{object-position:50% 42%}
.av-foto--felipe img{object-position:40% 50%}
.av-foto--eng img{object-position:50% 45%}
.av-foto--sala::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;border-radius:0 0 12px 12px;
  background:linear-gradient(to top,rgba(2,20,31,.85),rgba(2,20,31,0))}
/* post-it: quadradinho de papel claro em tom frio, colado no canto da foto com um pedaço de fita */
.av-postit{position:absolute;z-index:2;width:clamp(122px,11.5vw,156px);aspect-ratio:1;display:grid;align-content:center;
  padding:clamp(12px,1.2vw,16px);background:var(--pi);color:#0B2233;
  font-family:'Kalam',var(--font-d),cursive;font-weight:400;font-size:clamp(.94rem,1.2vw,1.1rem);line-height:1.22;
  box-shadow:0 12px 20px -10px rgba(0,0,0,.75),inset 0 -12px 16px -14px rgba(11,34,51,.3)}
.av-postit::before{content:"";position:absolute;top:-9px;left:50%;width:48%;height:18px;transform:translateX(-50%) rotate(-4deg);
  background:rgba(255,255,255,.38);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.av-postit--a{--pi:#E6ECD6;top:-20px;right:clamp(14px,3vw,44px);transform:rotate(3deg)}
.av-postit--b{--pi:#CDEBE0;bottom:-22px;right:-12px;transform:rotate(-3.5deg)}
/* o texto da dúvida é o mais longo: o papel dele é um pouco mais largo, pra "ideia" não descer sozinha */
.av-postit--c{--pi:#D0E6EE;top:-22px;right:-88px;transform:rotate(-2.5deg);width:clamp(164px,12.6vw,176px)}
.av-postit--d{--pi:#DDD9EE;bottom:-20px;right:6%;transform:rotate(2.8deg)}
@media(max-width:760px){
  .av-cursos{grid-template-columns:1fr;max-width:28rem;margin-top:56px}
  .av-curso{padding:16px 4px}
  .av-curso+.av-curso{border-left:0;border-top:1px solid rgba(230,231,231,.2)}
  .av-mural{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"sala" "felipe" "alunos" "eng";gap:30px}
  .av-foto{aspect-ratio:16/11}
  .av-postit{width:116px;font-size:.88rem;padding:11px}
  /* no celular as fotos ficam uma embaixo da outra: o da dúvida vai pro canto esquerdo, senão encosta no do Felipe */
  .av-postit--c{right:auto;left:-8px}
}
.av-end{position:absolute;left:clamp(14px,2.4vw,32px);bottom:clamp(12px,2.2vw,28px);z-index:1;max-width:calc(100% - 28px);
  padding:8px 14px;border:1px solid rgba(230,231,231,.35);border-radius:6px;background:rgba(2,20,31,.55);
  font-family:'Cinzel',Georgia,serif;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(.7rem,1.3vw,1rem);line-height:1.4;color:#E6E7E7;text-align:left}
/* a turma fecha a dobra como na página do GFE: sai do padding e encosta nas duas bordas e no pé da dobra; o topo e o pé
   dissolvem no escuro (width:auto, senão a margem negativa da direita é descartada) */
.av-turma{width:auto;max-width:none;margin:-17vw calc(-1 * var(--gutter)) calc(-1 * var(--sy))}
.av-turma img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 12%,#000 26%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 12%,#000 26%,#000 88%,transparent 100%)}
/* entre o pé esfumado da turma e o "Ter todos os nossos cursos" vai um respiro largo (22/10: "espaça bem mais") */
#aovivo + #ferramentas{padding-top:clamp(80px,10vw,140px)}
/* no celular a foto ganha altura; a janela puxa um pouco pra direita pra caber o Engenheiro e o Felipe inteiros */
@media(max-width:620px){.av-turma{margin-top:-80px}.av-turma img{height:clamp(280px,44vh,340px);object-fit:cover;object-position:56% 40%}}
/* no celular a placa do endereço encolhe, pra não cobrir a turma */
@media(max-width:600px){.av-end{padding:6px 10px;font-size:.62rem;letter-spacing:.08em}}

/* no computador a headline volta a quebrar pela margem */
@media(min-width:901px){.headline br[data-quebra-dela]{display:none}}
/* topo no celular (22/10): a dupla logo embaixo da headline e o botão ainda na primeira tela. A coluna do texto se
   desfaz (display:contents) e a ordem vira mundinho, pílula, headline, dupla, texto do Universo Infinito, botão e Hotmart */
@media(max-width:900px){
  .hero{padding-top:clamp(22px,4vh,40px)}
  .hero-grid{display:flex;flex-direction:column;align-items:center;gap:12px}
  .hero-left{display:contents}
  .hero-left>.hero-mundo{order:1;width:38px;margin:0}
  .hero-left>.eyebrow-pill{order:2}
  .hero-left>.headline{order:3;margin-top:0}
  /* headline em duas linhas no celular, quebra desenhada por ela (22/10, "deixe a headline em 2 linhas, diminua a fonte da
     segunda pra caber"): a segunda encolhe só o que precisa pra caber na coluna (393 px de texto pra 38,4 px de corpo) */
  .headline .hl-l2{font-size:min(1em,calc((100vw - 2 * var(--gutter)) / 10.6))}
  .hero-left>.hdiv{display:none}
  .hero-right{order:4;width:min(84%,300px);gap:0}
  .hero-selo{width:min(80%,300px);margin-top:-9%}
  .hero-left>.hero-lead{order:5;margin-top:2px}
  .hero-left>.btn{order:6;margin-top:4px}
  .hero-left>.hero-trust{order:7;margin-top:0}
}

/* barra do topo só depois da hero (22/10, "aparecer só quando rola e desce, na hero já tem botão"): sai do fluxo, fica
   escondida acima da tela e desce quando o botão da hero some (classe .on no pele-black.js) */
.ubar{position:fixed;left:0;right:0;top:0;transform:translateY(-100%);visibility:hidden;
  transition:transform .35s var(--ease),visibility 0s linear .35s}
.ubar.on{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
@media(prefers-reduced-motion:reduce){.ubar,.ubar.on{transition:none}}

/* Fundador (22/10): "100 vagas" não é item; o selo no alto ficou "horrível" e virou faixa diagonal no canto de cima,
   à esquerda (à direita ela cobria o "26" da arte), na cor do plano, chapada (sem brilho). A caixa recorta a faixa no contorno arredondado do cartão.
   26/10: "Faltam 80 vagas" não cabia no canto (saía "ALTAM 80 VAGA"): a faixa afastou do canto e as letras apertaram */
.p2-faixa{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2}
.p2-faixa span{position:absolute;top:41px;left:-56px;width:220px;padding:6px 0;transform:rotate(-45deg);
  background:var(--pc);color:#03203D;text-align:center;white-space:nowrap;
  font-family:var(--font-d);font-weight:900;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
/* o número que desce de 200 até o da página (pagina.js): algarismos de largura igual, pra faixa não tremer */
.p2 .vagas-n{font:inherit;font-variant-numeric:tabular-nums}
/* 26/10, 8h32: "não dá pra entender que de 200 restam 80 vagas". A frase inteira embaixo do logo, e a barra é o 200:
   a parte acesa é o que resta e esvazia junto com a contagem */
.p2-vagas{display:flex;flex-direction:column;gap:6px}
.p2-vagas>span:first-child{font-family:var(--font-d);font-weight:900;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pc)}
.p2-vagas-barra{display:block;height:6px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--pc) 18%,transparent)}
.p2-vagas-barra i{display:block;height:100%;border-radius:inherit;background:var(--pc)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 26/10: Fundador esgotado ("desativar é botar lá esgotado grande"). Usa o .p2--esgotado e o .p2-stamp do pagina.css,
   mas o cartão não apaga inteiro (apagava o carimbo junto): apaga o conteúdo e o carimbo fica aceso, do tamanho do
   logo (12cqi = 12% da largura do logo). O cinza no --pc tira o amarelo da borda, dos ✓ e do botão. */
.p2.fun.p2--esgotado{--pc:#5d6675;opacity:1}
.p2--esgotado>:not(.p2-logo-wrap):not(.btn),.p2--esgotado .p2-logo{opacity:.45}
.p2--esgotado .p2-logo-wrap{container-type:inline-size}
.p2--esgotado .p2-stamp{z-index:3;font-size:2.2rem;font-size:12cqi;padding:.26em .6em;letter-spacing:.12em;border-width:3px;border-radius:10px}
.p2.p2--esgotado .btn{background:rgba(120,124,140,.16)!important;color:var(--text-2)!important}
/* 26/10: o botão do cartão esgotado abre a lista de espera. Contorno no amarelo do Fundador pra não parecer travado
   no cartão apagado. O erro do formulário dela fica embaixo dos campos. */
.p2.p2--esgotado .btn--espera{background:transparent!important;color:#E1FA14!important;border:1px solid #E1FA14;box-shadow:none}
.p2.p2--esgotado .btn--espera:hover{background:rgba(225,250,20,.1)!important}
.modal .m-erro{font-size:.8rem;font-weight:600;color:#ff8a8a}
.modal .m-erro:empty{display:none}

/* prints de nota no celular (22/10, "essa sombra tá grande"): com 2 colunas e 640px de altura, só cabiam 2 prints por
   coluna e sobravam ~200px vazios embaixo do degradê. Fechada, a galeria mostra 6 prints (3 por coluna) sem corte de
   altura, e o degradê cobre só o pé da última fileira */
@media(max-width:680px){
  .nota-gallery:not(.open) .nota-masonry{max-height:none}
  .nota-gallery:not(.open) .nota-card:nth-child(n+7){display:none}
  .nota-fade{height:170px}
}

/* Cursos ao vivo da #vitalicia: foto da aula no topo do cartão, de borda a borda */
.curso-extra .tri-card{--tri-pad:clamp(18px,2.6vh,26px);overflow:hidden}
.curso-extra .tri-foto{width:calc(100% + 2 * var(--tri-pad));max-width:none;margin:calc(-1 * var(--tri-pad)) calc(-1 * var(--tri-pad)) clamp(14px,2vh,20px);
  aspect-ratio:16/9;object-fit:cover;object-position:50% 30%}

/* Kit Fundador: foto do kit no cartão, com o aviso de imagem ilustrativa logo abaixo (no canto cobria a xícara) */
.p2-kit{width:100%;margin:0 0 10px}
.p2-kit img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid color-mix(in srgb,var(--pc) 35%,transparent)}
.p2-kit figcaption{margin-top:6px;text-align:right;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
/* Camiseta de aluno no "Já é do UN?": a mesma foto com aviso do Kit Fundador */
.oc-foto{margin:12px 0 0}
.oc-foto img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line-s)}
.oc-foto figcaption{margin-top:6px;text-align:right;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}