:root{--bg:#CFCCC3;--tx:#151513;--cz:#5F5C55;--li:#A8A59D;--ac:#FF3B12}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--tx);font-family:"Roboto Flex",sans-serif;font-variation-settings:"opsz" 24,"wdth" 100,"wght" 360;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a,button,input,select,textarea,[tabindex]{outline:none;-webkit-tap-highlight-color:transparent}
:focus,:focus-visible{outline:none;box-shadow:none}
.mono{font-family:Recursive,monospace;font-variation-settings:"MONO" 1,"wght" 500;font-size:14px;line-height:1}
.peq{font-family:Recursive,monospace;font-variation-settings:"MONO" 1,"wght" 420;font-size:13px;line-height:1.35;letter-spacing:.01em}
.cz{color:var(--cz)}
.ac{color:var(--ac)}
.pad{padding:0 24px}
/* topo */
header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--li);height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.logo{display:flex;align-items:baseline;gap:8px;font-size:21px;line-height:1}
.logo b{font-variation-settings:"opsz" 24,"wdth" 100,"wght" 800;font-weight:400}
.logo i{font-style:normal;font-variation-settings:"opsz" 24,"wdth" 100,"wght" 300}
.logo small{font-family:Recursive,monospace;font-variation-settings:"MONO" 1,"wght" 500;font-size:11px;letter-spacing:.02em;color:var(--ac)}
nav.menu{display:flex;gap:32px;position:absolute;left:50%;transform:translateX(-50%)}
nav.menu a:hover{color:var(--ac)}
.botao{background:var(--tx);color:var(--bg);height:48px;display:flex;align-items:center;gap:14px;padding:0 24px;font-variation-settings:"MONO" 1,"wght" 600}
.abre{display:none;background:none;border:0;color:var(--tx);cursor:pointer}
.gaveta{display:none}
/* nomes grandes */
.nome{display:block;white-space:nowrap;font-size:14.25vw;line-height:.93;font-weight:400}
.e1{font-family:"Roboto Flex",sans-serif;font-variation-settings:"opsz" 144,"wdth" 143.4,"wght" 820}
.e2{font-family:"Science Gothic",sans-serif;font-variation-settings:"wdth" 63.3,"wght" 700}
.e3{font-family:Anybody,sans-serif;font-variation-settings:"wdth" 118,"wght" 220}
.e4{font-family:Recursive,sans-serif;font-variation-settings:"MONO" 1,"wght" 790}
/* lista */
.hero{padding:120px 24px 56px}
.hero h1{font-size:clamp(44px,7.78vw,112px);line-height:.92;letter-spacing:-.02em;font-weight:400;font-variation-settings:"opsz" 144,"wdth" 62,"wght" 820;max-width:1100px}
.hero p{margin-top:28px;font-size:24px;line-height:1.36;letter-spacing:-.005em;max-width:640px}
.grupo{padding:0 24px}
.grupo>h2{padding:72px 0 20px}
.tema{display:block;border-top:1px solid var(--li);padding:28px 0 36px}
.tema .nome{margin-bottom:34px}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grade .d{grid-column:span 2;font-size:24px;line-height:1.36;letter-spacing:-.005em;padding-right:24px}
.grade .c b{display:block;font-weight:400;color:var(--tx);margin-top:6px}
.grade .c span{display:block}
.grade .ab{display:block;margin-top:8px}
.tema:hover .ab{text-decoration:underline}
/* página do tema */
.volta{display:inline-flex;gap:8px;margin:78px 24px 52px}
.titulo{padding:0 24px}
.cab{padding:62px 24px 64px}
.cab .c span{display:block;margin-bottom:6px}
.sec{border-top:1px solid var(--li)}
.sec h2,.grupo>h2,.numeros h2{font-size:28px;line-height:1.1;font-weight:400;font-variation-settings:"opsz" 28,"wdth" 85,"wght" 720;letter-spacing:-.01em}
.frase{padding:56px 24px 96px}
.frase .linha{border-top:1px solid var(--li);margin-top:28px;padding-top:36px;font-size:clamp(40px,6.67vw,96px);line-height:1.04;letter-spacing:-.01em;font-variation-settings:"opsz" 72,"wdth" 100,"wght" 640}
.frase .pe{display:flex;justify-content:space-between;gap:24px;margin-top:40px}
.glifo{display:grid;grid-template-columns:896px 1fr;gap:56px;padding:96px 24px 120px}
.letra{position:relative;height:440px;border-bottom:1px solid var(--tx);overflow:hidden}
.letra:before,.letra:after{content:"";position:absolute;left:0;right:0;border-top:1px solid var(--li)}
.letra:before{top:18px}.letra:after{top:124px}
.letra span{position:absolute;left:54px;bottom:-18px;font-size:560px;line-height:.8}
.letra em{position:absolute;right:0;top:-2px;font-style:normal}
.letra em.n{left:auto;right:auto;left:596px}
.textos h3{font-size:28px;line-height:1.1;font-weight:400;font-variation-settings:"opsz" 28,"wdth" 85,"wght" 720;margin:0 0 20px}
.textos p{font-size:18px;line-height:1.46;margin-bottom:52px;font-variation-settings:"opsz" 18,"wdth" 100,"wght" 380}
.numeros{padding:72px 24px 96px}
.numeros h2{margin-bottom:24px}
.num{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:end;border-top:1px solid var(--li);padding:14px 0 10px}
.num .r b{display:block;font-weight:400;font-variation-settings:"MONO" 1,"wght" 600;color:var(--tx);font-size:13px}
.num .t{font-variation-settings:"opsz" 72,"wdth" 92,"wght" 300;letter-spacing:-.01em;line-height:1.08}
.passos{padding:120px 24px 64px}
.passos .g{font-size:clamp(40px,4vw,58px);line-height:1;letter-spacing:-.02em;font-weight:400;font-variation-settings:"opsz" 144,"wdth" 62,"wght" 820}
.passos>p{margin:26px 0 56px;font-size:18px;line-height:1.46;max-width:560px}
.passo{display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:end;border-top:1px solid var(--li);padding:32px 16px 30px}
.passo h3{font-size:28px;line-height:1.1;font-weight:400;font-variation-settings:"opsz" 28,"wdth" 85,"wght" 720;margin-bottom:14px}
.passo p{font-size:18px;line-height:1.46;max-width:460px}
.passo .n{font-family:Anybody,sans-serif;font-variation-settings:"wdth" 50,"wght" 200;font-size:120px;line-height:.8}
.passo .b{border:1px solid var(--tx);display:inline-flex;gap:14px;align-items:center;padding:16px 26px;white-space:nowrap}
.passo .b:hover{background:var(--tx);color:var(--bg)}
.prox{display:block;padding:56px 24px 104px}
.prox .nm{display:inline-flex;align-items:center;gap:20px;font-size:clamp(40px,4.4vw,64px);line-height:1.1;margin-top:20px}
/* rodapé */
footer{border-top:1px solid var(--li);padding:48px 24px 28px}
footer .grade{gap:24px}
footer .col .peq.cz{margin-bottom:14px}
footer .col a,footer .col .l{display:block;margin-bottom:12px}
footer .col a:hover{color:var(--ac)}
.marca{display:block;white-space:nowrap;margin:56px 0 24px;line-height:.8;font-size:20vw}
.marca b{font-weight:400;font-family:"Roboto Flex",sans-serif;font-variation-settings:"opsz" 144,"wdth" 151,"wght" 1000}
.marca i{font-style:normal;font-family:Anybody,sans-serif;font-variation-settings:"wdth" 150,"wght" 100}
.fim{display:flex;justify-content:space-between;gap:24px}
@media (max-width:1100px){.glifo{grid-template-columns:1fr}.letra span{font-size:420px}}
@media (max-width:809px){
 nav.menu,.botao{display:none}.abre{display:block}
 .gaveta.on{display:block;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--bg);z-index:4;padding:40px 24px}
 .gaveta a{display:block;font-size:32px;line-height:1.1;margin-bottom:20px;font-variation-settings:"opsz" 32,"wdth" 85,"wght" 720}
 .hero{padding:72px 24px 40px}.hero p{font-size:20px}
 .grade{grid-template-columns:1fr;gap:18px}.grade .d{grid-column:auto;font-size:20px;padding-right:0}
 .tema .nome{margin-bottom:24px}
 .volta{margin:48px 24px 36px}
 .cab{padding:40px 24px 48px}
 .frase{padding:48px 24px 64px}.frase .pe{flex-direction:column}
 .glifo{padding:64px 24px 72px}.letra{height:300px}.letra span{font-size:300px;left:24px}.letra em.n{display:none}
 .num{grid-template-columns:88px 1fr}
 .passos{padding:72px 24px 40px}
 .passo{grid-template-columns:1fr;gap:20px;padding:28px 0}
 .passo .n{font-size:88px}
 .passo .b{justify-self:start}
 .fim{flex-direction:column}
}