/* ================================================================== Trilha da Inovação — sistema visual ------------------------------------------------------------------ Grade suíça: filete no lugar de caixa, hierarquia por tipografia. A personalidade mora na face utilitária (IBM Plex Mono), que é onde vive toda a estrutura do método — códigos, datas, rótulos, gates. O texto de leitura fica em Inter, neutro de propósito. Semântica de cor, uma coisa por cor: vermelho = agora / atenção (semana atual, checkpoint) tinta = feito / fechado cinza = ainda não começou ================================================================== */ /* ------------------------------------------------------------ fontes */ @font-face{ font-family:'Inter';src:url('fontes/inter.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:'Plex Mono';src:url('fontes/plex-mono-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Plex Mono';src:url('fontes/plex-mono-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap; } /* ------------------------------------------------------------ tokens */ :root{ --tinta:#111110; --suave:#55554F; --fraco:#6E6E68; --filete:#E2E2DC; --filete-medio:#C8C8C0; --filete-forte:#111110; --papel:#FFFFFF; --areia:#F6F6F3; --marca:#D6270F; --marca-fraca:#FDF0ED; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --mono:'Plex Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --t-rotulo:10.5px; --t-mono:11px; --t-micro:13px; --t-menor:15px; --t-base:17px; --t-lede:20px; --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:96px; --medida:36rem; --foco:0 0 0 2px var(--papel),0 0 0 4px var(--marca); --tempo:.18s; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} @supports not (overflow-x:clip){html{overflow-x:hidden}} body{ margin:0;background:var(--papel);color:var(--tinta); font:400 var(--t-base)/1.6 var(--sans); font-feature-settings:'kern' 1,'liga' 1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,summary:focus-visible{ outline:0;box-shadow:var(--foco);border-radius:1px; } ::selection{background:var(--marca);color:#fff} /* o conteúdo só fica escondido se o motion realmente vai rodar; o script no tem prazo de validade, então nada some para sempre */ .motion [data-anim="bloco"]{opacity:0} .motion [data-anim="regua"] .rg-barra{transform:scaleY(0);transform-origin:bottom center} /* ------------------------------------------------------- utilitários */ .mono{font:500 var(--t-mono)/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase} .folha{max-width:1240px;margin:0 auto;padding:0 var(--e4)} .leitura{max-width:var(--medida)} .pular{ position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff; padding:12px 18px;z-index:100;font:500 var(--t-mono)/1 var(--mono); letter-spacing:.09em;text-transform:uppercase; } .pular:focus{left:0} /* --------------------------------------------------------- cabeçalho */ .topo{position:sticky;top:0;z-index:40;background:var(--papel);border-bottom:1px solid var(--filete-forte)} .topo .folha{display:flex;align-items:center;gap:var(--e3);min-height:56px} .topo .marca{ font:500 var(--t-micro)/1 var(--sans);letter-spacing:-.005em;text-decoration:none; color:var(--tinta);white-space:nowrap;padding:var(--e1) 0; } .topo .marca b{font-weight:600} .topo .marca span{color:var(--fraco);font-weight:400} .topo nav{display:flex;gap:var(--e1);margin-left:auto} .topo nav a{ font:500 var(--t-mono)/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--fraco);text-decoration:none;padding:19px var(--e1);position:relative; transition:color var(--tempo); } .topo nav a::after{ content:'';position:absolute;left:var(--e1);right:var(--e1);bottom:14px;height:1.5px; background:var(--marca);transform:scaleX(0);transform-origin:left; transition:transform var(--tempo) ease-out; } .topo nav a:hover{color:var(--tinta)} .topo nav a:hover::after{transform:scaleX(1)} .topo nav a.on{color:var(--tinta)} .topo nav a.on::after{transform:scaleX(1)} .quem{ font:500 var(--t-mono)/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--fraco);white-space:nowrap;padding-left:var(--e2); border-left:1px solid var(--filete);margin-left:var(--e1); } .quem b{color:var(--tinta);font-weight:500} .sair{color:var(--fraco);text-decoration:none;border-bottom:1px solid transparent;padding:6px 2px} .sair:hover{color:var(--marca);border-bottom-color:var(--marca)} /* ================================================================= RÉGUA DO ANO — as 21 semanas como escala Não é enfeite: é o "onde a gente está" que a dupla move toda semana no quadro, virando navegação. ================================================================= */ .regua{border-bottom:1px solid var(--filete);background:var(--papel)} .regua ol{display:flex;list-style:none;margin:0;padding:0;gap:2px} .regua li{flex:1;display:flex} .regua a{ flex:1;display:flex;flex-direction:column;justify-content:flex-end; text-decoration:none;color:inherit;padding-top:var(--e3);position:relative; } .rg-barra{ display:block;height:10px;background:var(--filete-medio); transition:background var(--tempo),height var(--tempo); } .regua a:hover .rg-barra{background:var(--suave)} .regua .feito .rg-barra{background:var(--tinta)} .regua .cp .rg-barra{height:19px} .regua .agora .rg-barra{background:var(--marca);height:24px} .rg-cod{ display:block;font:500 9.5px/1 var(--mono);letter-spacing:.05em;color:var(--fraco); padding:6px 0 var(--e2);text-align:center;font-variant-numeric:tabular-nums; } .regua .agora .rg-cod{color:var(--marca)} .regua .feito .rg-cod{color:var(--suave)} /* semana de checkpoint: barra mais alta com um portão vermelho no topo */ .regua .cp .rg-barra{position:relative} .regua .cp .rg-barra::after{ content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--marca); } /* a semana que você está lendo agora */ .regua .aqui .rg-barra{box-shadow:0 0 0 1px var(--tinta)} .regua .aqui .rg-cod{color:var(--tinta);text-decoration:underline;text-underline-offset:3px} .regua .agora a::before{ content:'AGORA';position:absolute;top:2px;left:50%;transform:translateX(-50%); font:500 8.5px/1 var(--mono);letter-spacing:.12em;color:var(--marca);white-space:nowrap; } .regua.fina .rg-cod{display:none} .regua.fina a{padding-top:var(--e2);padding-bottom:var(--e1)} .regua.fina .rg-barra{height:6px} .regua.fina .cp .rg-barra{height:11px} .regua.fina .agora .rg-barra{height:15px} .regua.fina .agora a::before{display:none} /* --------------------------------------------------------- masthead */ .masthead{padding:var(--e7) 0 0;border-bottom:1px solid var(--filete-forte)} .masthead h1{ font:500 clamp(38px,6.6vw,76px)/1.0 var(--sans); letter-spacing:-.038em;margin:0 0 var(--e3);max-width:15em;text-wrap:balance; } .masthead .dek{ font-size:var(--t-lede);line-height:1.45;color:var(--suave); max-width:33rem;margin:0 0 var(--e6);text-wrap:pretty; } .fichadados{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--filete)} .fichadados div{padding:var(--e2) 0 var(--e3);border-left:1px solid var(--filete);padding-left:var(--e2)} .fichadados div:first-child{border-left:0;padding-left:0} .fichadados dt{ font:500 var(--t-rotulo)/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--fraco);margin:0 0 6px; } .fichadados dd{margin:0;font-size:var(--t-menor);font-weight:500;font-variant-numeric:tabular-nums} /* ---------------------------------------------------------- destaque */ .agora-cx{ display:block;text-decoration:none;color:inherit;position:relative; border-bottom:1px solid var(--filete-forte);padding:var(--e5) 0; } .agora-cx::before{ content:'';position:absolute;left:calc(var(--e3) * -1);top:0;bottom:0;width:3px;background:var(--marca); transform:scaleY(0);transform-origin:top;transition:transform .3s ease-out; } .agora-cx:hover::before{transform:scaleY(1)} .agora-tag{display:flex;align-items:center;gap:10px;margin-bottom:var(--e3)} .agora-tag i{width:7px;height:7px;background:var(--marca);display:block;font-style:normal;flex:none} .agora-tag span{ font:500 var(--t-mono)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--marca); } .agora-grade{display:grid;grid-template-columns:1fr auto;gap:var(--e5);align-items:end} .agora-t{ font:500 clamp(28px,4.2vw,44px)/1.05 var(--sans);letter-spacing:-.032em; margin:0 0 var(--e2);max-width:14em; } .agora-cx:hover .agora-t{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px} .agora-d{color:var(--suave);font-size:var(--t-menor);margin:0;max-width:34rem} .agora-ir{ font:500 var(--t-mono)/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; white-space:nowrap;padding-bottom:6px;display:flex;align-items:center;gap:var(--e1); } .agora-ir svg{transition:transform var(--tempo) ease-out} .agora-cx:hover .agora-ir svg{transform:translateX(4px)} /* ----------------------------------------------------------- cartões */ .secao-bloco{border-bottom:1px solid var(--filete)} .secao-cab{display:flex;align-items:baseline;gap:var(--e2);padding:var(--e4) 0 var(--e2)} .secao-cab h2{ font:500 var(--t-micro)/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;margin:0; } .secao-cab .conta{ font:400 var(--t-mono)/1.3 var(--mono);letter-spacing:.06em;color:var(--fraco); margin-left:auto;font-variant-numeric:tabular-nums; } .cartoes{display:grid;grid-template-columns:repeat(var(--colunas,4),1fr);border-top:1px solid var(--filete)} .cartao{ display:flex;flex-direction:column;min-height:184px;padding:var(--e2) var(--e2) 14px; border-left:1px solid var(--filete);text-decoration:none;color:inherit;position:relative; transition:background var(--tempo); } .cartao:nth-child(4n+1){border-left:0;padding-left:0} .cartao:nth-child(n+5){border-top:1px solid var(--filete)} .cartao:hover{background:var(--areia)} .cartao .cod{ display:flex;align-items:center;gap:7px; font:500 var(--t-mono)/1 var(--mono);letter-spacing:.08em;color:var(--fraco); margin-bottom:var(--e2);font-variant-numeric:tabular-nums; } .cartao .tit{ font-size:var(--t-lede);line-height:1.18;font-weight:500;letter-spacing:-.022em; margin:0 0 7px;text-wrap:balance; } .cartao:hover .tit{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .cartao .dt{ font:400 var(--t-mono)/1.35 var(--mono);letter-spacing:.02em;color:var(--fraco); text-transform:uppercase;font-variant-numeric:tabular-nums; } .cartao .rodape{ margin-top:auto;padding-top:var(--e2);border-top:1px solid var(--filete); display:flex;justify-content:space-between;align-items:center;gap:var(--e1); font:500 var(--t-rotulo)/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--fraco); } .cartao .rodape b{color:var(--tinta);font-weight:500} .selo-cp{ display:inline-flex;align-items:center;gap:5px;color:var(--marca); font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; } .selo-cp::before{content:'';width:5px;height:5px;background:var(--marca);flex:none} .cartao.atual{background:var(--marca-fraca)} .cartao.atual:hover{background:#FAE4DF} .filete-feito{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tinta)} /* --------------------------------------------------- página de sprint */ .abre{padding:var(--e6) 0 0} .kicker{display:flex;gap:var(--e2);align-items:center;margin-bottom:var(--e3);flex-wrap:wrap} .kicker .k{ font:500 var(--t-mono)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--fraco);font-variant-numeric:tabular-nums; } .kicker .k.b{color:var(--tinta)} .kicker .cp{background:var(--marca);color:#fff;padding:6px 9px;letter-spacing:.11em} h1.tit{ font:500 clamp(32px,5.2vw,56px)/1.03 var(--sans);letter-spacing:-.036em; margin:0 0 var(--e3);max-width:14em;text-wrap:balance; } .dek{ font-size:var(--t-lede);line-height:1.45;color:var(--suave);max-width:31rem; margin:0 0 var(--e5);font-weight:400;text-wrap:pretty; } .dek b,.dek strong{color:var(--tinta);font-weight:500} .barra{ display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,19rem));justify-content:start; border-top:1px solid var(--filete-forte);border-bottom:1px solid var(--filete); margin-bottom:var(--e6); } .barra div{padding:var(--e2) 0 var(--e3);border-left:1px solid var(--filete);padding-left:var(--e2)} .barra div:first-child{border-left:0;padding-left:0} .barra dt{ font:500 var(--t-rotulo)/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--fraco);margin-bottom:6px; } .barra dd{margin:0;font-size:var(--t-menor);line-height:1.4} .barra dd.aviso-cp{color:var(--marca);font-weight:500} /* ------------------------------------------------------- ferramentas */ .ferramentas{border:1px solid var(--filete-forte);margin:0 0 var(--e6);max-width:46rem} .ferramentas > h2{ font:500 var(--t-mono)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; margin:0;padding:13px var(--e3);background:var(--tinta);color:#fff; } .ferramentas .linha{display:grid;grid-template-columns:124px 1fr;border-top:1px solid var(--filete)} .ferramentas .linha:first-of-type{border-top:0} .ferramentas .rot{ font:500 var(--t-rotulo)/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--fraco);padding:15px var(--e2) 15px var(--e3);border-right:1px solid var(--filete); } .ferramentas .val{padding:14px var(--e3);font-size:var(--t-menor);line-height:1.5} .ferramentas .val a{ color:var(--tinta);text-decoration:underline;text-decoration-color:var(--filete-medio); text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color var(--tempo); } .ferramentas .val a:hover{text-decoration-color:var(--marca);color:var(--marca)} .ferramentas .nota{ padding:14px var(--e3);font-size:14.5px;line-height:1.5;background:var(--areia);color:var(--suave); } .ferramentas .nota strong{color:var(--tinta)} .chip{ display:inline-flex;align-items:center;gap:7px; font:400 14px/1 var(--sans);letter-spacing:0; border:1px solid var(--filete-medio);background:#fff;color:var(--tinta); padding:9px 12px;margin:0 6px 6px 0;cursor:pointer;border-radius:0; transition:background var(--tempo),border-color var(--tempo),color var(--tempo); } .chip::before{ content:'';width:9px;height:9px;flex:none; border-left:1px solid currentColor;border-bottom:1px solid currentColor; transform:translateY(-2px); } .chip:hover{background:var(--tinta);border-color:var(--tinta);color:#fff} /* ------------------------------------------------------------- prosa */ .prosa{max-width:var(--medida)} .prosa > *:first-child{margin-top:0} .prosa h2{font:500 26px/1.2 var(--sans);letter-spacing:-.026em;margin:var(--e6) 0 var(--e2)} .prosa h3{font:500 20px/1.3 var(--sans);letter-spacing:-.02em;margin:var(--e5) 0 var(--e2)} .prosa h3.cp{ background:var(--tinta);color:#fff;padding:17px var(--e3);margin:var(--e6) 0 var(--e3); font:500 var(--t-micro)/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase; display:flex;align-items:center;gap:11px; } .prosa h3.cp::before{content:'';width:7px;height:7px;background:var(--marca);flex:none} .prosa p{margin:0 0 var(--e2)} .prosa strong{font-weight:600} .prosa em{font-style:italic;color:var(--suave)} .prosa a{ color:var(--tinta);text-decoration:underline;text-decoration-color:var(--filete-medio); text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color var(--tempo); } .prosa a:hover{text-decoration-color:var(--marca);color:var(--marca)} .prosa ul,.prosa ol{padding-left:0;margin:0 0 var(--e3);list-style:none} .prosa li{margin-bottom:10px} .prosa ol{counter-reset:li} .prosa ol > li{counter-increment:li;padding-left:2.4em;position:relative} .prosa ol > li::before{ content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.35em; font:500 var(--t-mono)/1 var(--mono);letter-spacing:.04em;color:var(--marca); font-variant-numeric:tabular-nums; } .prosa ul > li{padding-left:1.6em;position:relative} .prosa ul > li::before{ content:'';position:absolute;left:0;top:.75em;width:10px;height:1px;background:var(--filete-forte); } .prosa code{ font:400 14px/1 var(--mono);background:var(--areia);padding:3px 6px; border:1px solid var(--filete); } .prosa table{border-collapse:collapse;width:100%;margin:var(--e3) 0;font-size:var(--t-menor)} .prosa th,.prosa td{ border-bottom:1px solid var(--filete);padding:12px var(--e2) 12px 0;text-align:left;vertical-align:top; } .prosa th{ font:500 var(--t-rotulo)/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--fraco);border-bottom:1px solid var(--filete-forte);padding-bottom:10px; } .prosa blockquote{ margin:var(--e3) 0;padding:0 0 0 var(--e3);border-left:1px solid var(--filete-forte); font-size:var(--t-base);color:var(--suave); } .prosa blockquote p:last-child{margin-bottom:0} .prosa blockquote.pilula{ border:0;border-top:1px solid var(--filete-forte);border-bottom:1px solid var(--filete); padding:var(--e3) 0;margin:var(--e5) 0;color:var(--tinta); } .prosa blockquote.pilula > p.rot-pilula{ font:500 var(--t-rotulo)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--marca);margin:0 0 11px; } .prosa blockquote.pilula p{font-size:16px;line-height:1.6} .prosa blockquote.ana{ border-left:2px solid var(--marca);background:var(--areia); padding:var(--e2) var(--e3);margin:var(--e3) 0;color:var(--tinta);font-size:var(--t-menor); } .prosa blockquote.ana > p.rot-ana{ font:500 var(--t-rotulo)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--marca);margin:0 0 8px; } .prosa blockquote.ana > p.cap1::first-letter{text-transform:uppercase} .ia{ border-top:1px solid var(--filete-forte);border-bottom:1px solid var(--filete-forte); padding:var(--e3) 0;margin:var(--e5) 0; display:grid;grid-template-columns:72px 1fr;gap:var(--e3);align-items:start; } .ia .et{ font:500 var(--t-rotulo)/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fraco); } .ia p{margin:0;font-size:16px;line-height:1.55} /* ------------------------------------------------- caixas de marcar */ .prosa li.chk{padding-left:0;margin-bottom:13px} .prosa li.chk::before{display:none} .prosa li.chk label{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;cursor:pointer} .prosa li.chk input,.fecho-cx input{ appearance:none;-webkit-appearance:none;margin:.22em 0 0;width:17px;height:17px; border:1.5px solid var(--tinta);background:#fff;cursor:pointer;position:relative; border-radius:0;flex:none;transition:background var(--tempo),border-color var(--tempo); } .prosa li.chk input::after,.fecho-cx input::after{ content:'';position:absolute;left:4.5px;top:1px;width:5px;height:9px; border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg) scale(0); transition:transform .16s cubic-bezier(.2,1.4,.4,1); } .prosa li.chk input:checked,.fecho-cx input:checked{background:var(--tinta)} .prosa li.chk input:checked::after,.fecho-cx input:checked::after{transform:rotate(42deg) scale(1)} .fecho-cx input:checked{background:var(--marca);border-color:var(--marca)} .prosa li.chk input:checked + .txt{color:var(--fraco)} .quem-marcou{ display:block;font:500 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--marca);margin-top:5px; } .quem-marcou:empty{display:none} /* --------------------------------------------------- fecho do sprint */ .fecho{ border-top:1px solid var(--filete-forte);border-bottom:1px solid var(--filete-forte); margin:var(--e7) 0 0;padding:var(--e3) 0;max-width:46rem; } .fecho-rot{ font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; color:var(--fraco);margin-bottom:var(--e2); } .fecho-cx{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;cursor:pointer} .fecho-cx .txt{font-size:var(--t-base);font-weight:500;line-height:1.45} .fecho-obs{margin:11px 0 0 33px;font-size:13.5px;color:var(--fraco)} /* --------------------------------------------------------- navegação */ .pe{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--filete-forte);margin-top:var(--e7)} .pe a{padding:var(--e3) 0;text-decoration:none;color:inherit;display:block;transition:background var(--tempo)} .pe a:hover{background:var(--areia)} .pe a:last-child{border-left:1px solid var(--filete);padding-left:var(--e3);text-align:right} .pe .r{ font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; color:var(--fraco);display:block;margin-bottom:10px; } .pe .n{font-size:19px;font-weight:500;letter-spacing:-.022em;line-height:1.2} .pe a:hover .n{text-decoration:underline;text-underline-offset:4px} .pe .vazio{padding:var(--e3) 0} /* --------------------------------------------------------- conceitos */ .painel-conc{display:grid;grid-template-columns:210px 1fr;gap:var(--e6);align-items:start;padding-top:var(--e3)} .indice{position:sticky;top:76px} .indice a{ display:block;font:500 var(--t-mono)/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--fraco);text-decoration:none;padding:9px 0;border-bottom:1px solid var(--filete); transition:color var(--tempo),padding-left var(--tempo); } .indice a:hover{color:var(--tinta);padding-left:5px} .busca{ width:100%;border:0;border-bottom:1px solid var(--filete-forte);padding:11px 0 13px; font:400 19px/1.3 var(--sans);background:transparent;margin-bottom:7px;color:var(--tinta); } .busca:focus{outline:0;border-bottom-color:var(--marca);box-shadow:none} .busca::placeholder{color:var(--fraco)} .contagem{ font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--fraco);margin-bottom:var(--e5);display:block; } .grupo-tit{ font:500 var(--t-micro)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; border-top:1px solid var(--filete-forte);padding:var(--e3) 0 0;margin:var(--e5) 0 0; } .verbete{border-bottom:1px solid var(--filete);padding:var(--e3) 0} .verbete > h3{font:500 20px/1.25 var(--sans);letter-spacing:-.022em;margin:0 0 11px} .verbete .prosa{max-width:38rem} .verbete .prosa p{font-size:16px;margin-bottom:var(--e2)} .vazio-busca{padding:var(--e5) 0;color:var(--suave);font-size:var(--t-menor);display:none} .vazio-busca.on{display:block} /* ------------------------------------------------------------ gaveta */ .termo{ background:none;border:0;padding:0 1px;font:inherit;color:inherit;cursor:pointer; border-bottom:1px dashed var(--filete-medio);transition:border-color var(--tempo),color var(--tempo); } .termo:hover{border-bottom-style:solid;border-bottom-color:var(--marca);color:var(--marca)} .gaveta{ position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);background:#fff; border-left:1px solid var(--filete-forte);z-index:60;transform:translateX(101%); display:flex;flex-direction:column;visibility:hidden; } .gaveta.on{transform:none;visibility:visible;box-shadow:-28px 0 70px rgba(0,0,0,.08)} .gaveta-cab{ display:flex;align-items:center;justify-content:space-between;gap:var(--e2); padding:var(--e2) var(--e3);border-bottom:1px solid var(--filete-forte);flex:none; } .gaveta-cab span{ font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fraco); } .gaveta-cab button{ background:none;border:0;font:500 var(--t-mono)/1 var(--mono);letter-spacing:.09em; text-transform:uppercase;cursor:pointer;padding:10px;color:var(--tinta);margin:-10px; } .gaveta-cab button:hover{color:var(--marca)} .gaveta-corpo{padding:var(--e4) var(--e3) var(--e7);overflow:auto;overscroll-behavior:contain} .gaveta-corpo h3{font:500 25px/1.15 var(--sans);letter-spacing:-.028em;margin:0 0 7px} .gaveta-corpo .g{ font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--fraco);margin-bottom:var(--e3);display:block; } .gaveta-corpo .prosa p{font-size:16px} .gaveta-corpo .verlista{ display:block;margin-top:var(--e4);padding-top:var(--e2);border-top:1px solid var(--filete); font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--suave);text-decoration:none; } .gaveta-corpo .verlista:hover{color:var(--marca)} .veu{position:fixed;inset:0;background:rgba(17,17,16,.16);z-index:55;opacity:0;pointer-events:none} .veu.on{opacity:1;pointer-events:auto} /* ------------------------------------------------------------ rodapé */ .rodape-pagina{border-top:1px solid var(--filete-forte);margin-top:var(--e7);padding:var(--e4) 0 var(--e7)} .rodape-pagina .folha{ display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap; font:500 var(--t-rotulo)/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fraco); } .rodape-pagina a{color:var(--suave);text-decoration:none;display:inline-block;padding:6px 0} .rodape-pagina a:hover{color:var(--marca)} /* ------------------------------------------------------------ avisos */ .aviso-off{ position:fixed;left:0;right:0;bottom:0;background:var(--tinta);color:#fff; padding:13px var(--e4);font:500 var(--t-rotulo)/1.5 var(--mono);letter-spacing:.1em; text-transform:uppercase;z-index:70;display:none; } .aviso-off.on{display:block} /* ------------------------------------------------------------- login */ body.pagina-entrar{background:var(--areia)} .entrar{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--e4) var(--e3)} .entrar-caixa{ width:100%;max-width:880px;background:var(--papel); border:1px solid var(--filete-forte);display:grid;grid-template-columns:1fr 1fr; } .entrar-marca{ padding:var(--e6) var(--e5);border-right:1px solid var(--filete-forte); display:flex;flex-direction:column;justify-content:center; } .entrar-marca .mono{color:var(--fraco);display:block;margin-bottom:var(--e3)} .entrar-marca h1{font:500 42px/1.02 var(--sans);letter-spacing:-.038em;margin:0 0 var(--e3)} .entrar-marca p{margin:0;color:var(--suave);font-size:var(--t-menor);line-height:1.5;max-width:20em} .entrar-form{ padding:var(--e6) var(--e5);display:flex;flex-direction:column;justify-content:center;gap:var(--e3); } .campo span{ display:block;font:500 var(--t-rotulo)/1 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--fraco);margin-bottom:10px; } .campo input{ width:100%;border:0;border-bottom:1px solid var(--filete-forte);background:transparent; font:400 19px/1.3 var(--sans);padding:7px 0 12px;color:var(--tinta);border-radius:0; transition:border-color var(--tempo); } .campo input:focus{outline:0;border-bottom-color:var(--marca);box-shadow:none} .campo input:disabled{color:var(--fraco);border-bottom-color:var(--filete)} .lembrar{display:grid;grid-template-columns:18px 1fr;gap:13px;align-items:start;cursor:pointer} .lembrar input{ appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:.2em 0 0; border:1.5px solid var(--tinta);background:#fff;cursor:pointer;position:relative;border-radius:0; } .lembrar input:checked{background:var(--tinta)} .lembrar input:checked::after{ content:'';position:absolute;left:4.5px;top:1px;width:5px;height:9px; border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg); } .lembrar span{font-size:14.5px;line-height:1.45;color:var(--suave)} .entrar-form button{ background:var(--tinta);color:#fff;border:0;padding:17px var(--e3);cursor:pointer; font:500 var(--t-mono)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; border-radius:0;transition:background var(--tempo); } .entrar-form button:hover{background:var(--marca)} .entrar-form button:disabled{background:var(--fraco);cursor:not-allowed} .entrar-erro{ margin:0;background:var(--marca);color:#fff;padding:13px var(--e2); font:500 var(--t-mono)/1.5 var(--mono);letter-spacing:.04em; } .entrar-nota{ margin:0;border-left:2px solid var(--tinta);padding:11px var(--e2);background:var(--areia); font:500 var(--t-mono)/1.5 var(--mono);letter-spacing:.04em;color:var(--suave); } .entrar-rodape{margin:7px 0 0;font-size:13px;color:var(--fraco);line-height:1.5} /* -------------------------------------------------------- responsivo */ @media (max-width:1080px){ .cartoes{grid-template-columns:repeat(min(var(--colunas,2),2),1fr)} .cartao{border-left:1px solid var(--filete);padding-left:var(--e2)} .cartao:nth-child(4n+1){border-left:1px solid var(--filete);padding-left:var(--e2)} .cartao:nth-child(2n+1){border-left:0;padding-left:0} .cartao:nth-child(n+3){border-top:1px solid var(--filete)} .fichadados{grid-template-columns:repeat(3,1fr)} .fichadados div:nth-child(3n+1){border-left:0;padding-left:0} .fichadados div:nth-child(n+4){border-top:1px solid var(--filete)} .painel-conc{grid-template-columns:1fr;gap:0} .indice{position:static;display:flex;flex-wrap:wrap;gap:0 var(--e3);margin-bottom:var(--e4)} .indice a{border-bottom:0;padding:6px 0;min-height:24px} .indice a:hover{padding-left:0} .rg-cod{display:none} } @media (max-width:700px){ body{font-size:16px} .folha{padding:0 var(--e3)} .topo .folha{gap:10px;min-height:52px} .topo .marca{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:14px 0} .topo .marca span{display:none} .topo nav{gap:0;flex:none} .topo nav a{padding:17px 7px;font-size:10px;letter-spacing:.06em} .topo nav a::after{left:7px;right:7px;bottom:12px} .quem{display:none} .kicker{gap:9px;margin-bottom:var(--e2)} .kicker .k{font-size:10px;letter-spacing:.08em} .kicker .cp{padding:5px 8px} /* a régua vira alvo de 18px no celular: pequeno demais para o dedo. A orientação continua no kicker ("S05 / 20") e na barra de dados. */ .regua{display:none} .masthead{padding-top:var(--e5)} .fichadados{grid-template-columns:repeat(2,1fr)} .fichadados div:nth-child(3n+1){border-left:1px solid var(--filete);padding-left:var(--e2)} .fichadados div:nth-child(2n+1){border-left:0;padding-left:0} .fichadados div:nth-child(n+3){border-top:1px solid var(--filete)} .agora-grade{grid-template-columns:1fr;gap:var(--e3);align-items:start} .agora-cx::before{left:calc(var(--e3) * -1)} .cartoes{grid-template-columns:1fr} .cartao,.cartao:nth-child(2n+1),.cartao:nth-child(4n+1){border-left:0;padding-left:0;min-height:0} .cartao + .cartao{border-top:1px solid var(--filete)} .barra{grid-template-columns:1fr} .barra div{border-left:0;padding-left:0;border-top:1px solid var(--filete);padding-top:14px} .barra div:first-child{border-top:0} .ferramentas .linha{grid-template-columns:1fr} .ferramentas .rot{border-right:0;border-bottom:1px solid var(--filete);padding:13px var(--e3) 9px} .pe{grid-template-columns:1fr} .pe a:last-child{border-left:0;border-top:1px solid var(--filete);padding-left:0;text-align:left} .ia{grid-template-columns:1fr;gap:9px} .entrar{padding:0;align-items:stretch} .entrar-caixa{grid-template-columns:1fr;border:0;max-width:none} .entrar-marca{border-right:0;border-bottom:1px solid var(--filete-forte);padding:var(--e5) var(--e3) var(--e4)} .entrar-marca h1{font-size:34px} .entrar-form{padding:var(--e4) var(--e3) var(--e6)} } /* ------------------------------------------------------- menos motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ---------------------------------------------------------- impressão */ @media print{ .topo,.pe,.gaveta,.veu,.aviso-off,.rodape-pagina,.regua,.pular{display:none} body{font-size:11pt;color:#000} .prosa a{text-decoration:none} .ferramentas{break-inside:avoid} } /* alvos confortáveis para o dedo, só onde o toque é o meio principal */ @media (pointer:coarse){ .chip{padding:13px 15px;font-size:15px} .indice a{padding:13px 0} .gaveta-cab button{padding:14px;margin:-14px} .topo .marca{padding-top:14px;padding-bottom:14px} .sair{padding:12px 4px} .prosa li.chk label,.fecho-cx{padding:3px 0} }