/* The Market Anatomy · página de vendas
   Conceito: um atlas de anatomia do mercado. O gráfico é o espécime; o dourado é a anotação.
   Verde e vermelho só aparecem nos candles (dado), nunca como decoração. */

@font-face{font-family:"Cormorant";src:url(/fontes/CormorantGaramond-Light.woff) format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fontes/CormorantGaramond-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fontes/CormorantGaramond-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fontes/CormorantGaramond-LightItalic.woff) format("woff");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url(/fontes/CormorantGaramond-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(/fontes/IBMPlexSans-Regular-Latin1.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/fontes/IBMPlexSans-Italic-Latin1.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(/fontes/IBMPlexSans-Medium-Latin1.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(/fontes/IBMPlexSans-SemiBold-Latin1.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#050b0f;        /* página */
  --plate:#08141a;      /* fundo da prancha */
  --rule:#1b2a31;       /* linhas de grade e divisórias */
  --rule-2:#2b3d45;
  --bone:#edf2f4;       /* texto */
  --mute:#93a1a8;       /* texto secundário */
  --gold:#e8b650;       /* anotação e ação principal */
  --gold-soft:#e9cf92;  /* rótulos das anotações */
  --bull:#79d36a;       /* candle de alta */
  --bear:#e3675a;       /* candle de baixa */
  --serif:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Plex","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --measure:34rem;
  --gutter:clamp(16px,4vw,40px);
  --section:clamp(88px,12vw,168px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font:400 1.0625rem/1.65 var(--sans);font-feature-settings:"kern";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;color:var(--bone);font-feature-settings:"kern","liga","lnum"}
h1{font-size:clamp(2.9rem,1.6rem + 4.6vw,5.4rem);line-height:.98;letter-spacing:-.012em;max-width:12em;text-wrap:balance}
h2{font-size:clamp(2.1rem,1.35rem + 3vw,3.75rem);line-height:1.04;letter-spacing:-.008em;max-width:15em;text-wrap:balance}
h3{font-size:clamp(1.65rem,1.3rem + 1.3vw,2.35rem);line-height:1.1;font-weight:400;text-wrap:balance}
.lede{font-size:clamp(1.125rem,1.04rem + .35vw,1.3rem);line-height:1.55;color:#d6dde0;max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose p{color:#cfd7da}
.cap{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.2rem;line-height:1.3;color:var(--gold-soft);margin:0 0 .5rem}
.fine{font-size:.9375rem;color:var(--mute)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:.85em 1.55em;border-radius:6px;background:var(--gold);color:#0a0d0f;font:600 1.0625rem/1.2 var(--sans);text-decoration:none;border:1px solid var(--gold);cursor:pointer;transition:background-color .2s,transform .2s}
.btn:hover{background:#f1c76a}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"]{background:transparent;color:var(--gold);cursor:default}
.btn.sm{min-height:40px;padding:.55em 1.05em;font-size:.9375rem}
.link{font:500 1.0625rem/1.2 var(--sans);color:var(--bone);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.3em;text-decoration-thickness:1px;padding:.6em 0}
.link:hover{text-decoration-color:var(--gold)}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:2rem}

/* ---------- topo ---------- */
.topo{position:relative;z-index:5}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.marca{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:.01em;text-decoration:none;color:var(--bone);white-space:nowrap}
.marca small{display:block;font-family:var(--sans);font-size:.75rem;letter-spacing:.02em;color:var(--mute);margin-top:-2px}
.topo nav{display:flex;align-items:center;gap:22px}
.topo nav a.link{font-size:.9375rem;padding:.4em 0}

/* ---------- abertura ---------- */
.abertura{padding:clamp(28px,6vw,72px) 0 var(--section)}
.abertura .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center}
.abertura .lede{margin-top:1.6rem}
.abertura .fine{margin-top:1.4rem;max-width:30rem}
.especime{position:relative;margin:0}
.especime svg{width:100%;height:auto;overflow:visible}
.especime figcaption{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--mute);margin-top:.75rem;text-align:center}
.especime .ln{fill:none;stroke:var(--gold);stroke-width:1}
.especime .dot{fill:var(--gold)}
.especime .rot{font-family:var(--serif);font-style:italic;font-size:30px;fill:var(--gold-soft)}
.especime .val{font-family:var(--sans);font-size:15px;fill:var(--mute);font-variant-numeric:tabular-nums}
.especime .grid{stroke:var(--rule);stroke-width:1}

/* animação única da página: o candle é dissecado ao carregar */
@media (prefers-reduced-motion:no-preference){
  .js .especime .corpo,.js .especime .pavio{transform-box:fill-box;transform-origin:center;animation:cresce .9s cubic-bezier(.2,.7,.2,1) both}
  .js .especime .pavio{animation-delay:.05s}
  .js .especime .corpo{animation-delay:.25s}
  .js .especime .ln{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:traca .7s ease-out forwards;animation-delay:calc(1s + var(--i) * .16s)}
  .js .especime .dot,.js .especime .rot,.js .especime .val{opacity:0;animation:surge .5s ease-out forwards;animation-delay:calc(1.25s + var(--i) * .16s)}
}
@keyframes cresce{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes surge{to{opacity:1}}

/* ---------- a história no scroll ---------- */
.atlas{position:relative;border-top:1px solid var(--rule)}
.atlas .wrap{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:clamp(24px,4vw,64px)}
.atlas .passos{grid-column:1;grid-row:1}
.atlas .palco{grid-column:2;grid-row:1}
.passos{padding:12vh 0 24vh}
.passo{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:4vh 0}
.passo h2{margin-bottom:1.5rem}
.passo h3{margin-bottom:1.1rem}
.passo .prose{transition:opacity .4s}
.palco{position:sticky;top:max(12vh,calc((100vh - 700px) / 2));height:min(76vh,700px);align-self:start;margin-top:12vh}
.prancha{position:relative;height:100%;background:var(--plate);border:1px solid var(--rule-2);border-radius:3px}
/* marcas de registro nos cantos, como numa prancha impressa */
.prancha::before,.prancha::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;opacity:.7;pointer-events:none}
.prancha::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.prancha::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.prancha canvas{position:absolute;inset:0;width:100%;height:100%}
.legenda{position:absolute;left:20px;top:16px;right:20px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;z-index:2}
.legenda .t{font-family:var(--serif);line-height:1.15}
.legenda .t i{display:block;font-size:1.05rem;color:var(--gold-soft)}
.legenda .t b{display:block;font-weight:400;font-size:1.65rem;color:var(--bone)}
.legenda .ativo{font-size:.8125rem;color:var(--mute);text-align:right;max-width:16em;line-height:1.35;padding-top:4px}
.ficha{position:absolute;left:20px;bottom:20px;z-index:2;width:min(340px,calc(100% - 40px));background:rgba(5,11,15,.92);border:1px solid var(--rule-2);border-radius:4px;padding:14px 16px 12px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;pointer-events:none}
.ficha.on{opacity:1;transform:none}
.ficha .cap{font-size:1.1rem;margin-bottom:.4rem}
.ficha dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:.875rem}
.ficha dt{color:var(--mute)}
.ficha dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ficha .res{border-top:1px solid var(--rule-2);padding-top:6px;margin-top:4px;color:var(--gold)}
.ficha .no{color:var(--mute);text-decoration:line-through}
.ficha.inline{position:static;opacity:1;transform:none;width:auto;max-width:22rem;margin-top:1.4rem;display:none}

/* ---------- experimente ---------- */
.teste{padding:var(--section) 0;border-top:1px solid var(--rule)}
.teste .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.teste .lede{margin-top:1.25rem}
.quiz{background:var(--plate);border:1px solid var(--rule-2);border-radius:3px;padding:clamp(16px,3vw,28px)}
.quiz canvas{width:100%;height:220px}
.quiz .ativo{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--mute);margin-bottom:10px}
.quiz fieldset{border:0;margin:18px 0 0;padding:0}
.quiz legend{font-family:var(--serif);font-size:1.6rem;line-height:1.2;margin-bottom:12px;padding:0}
.opcoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opcao{position:relative}
.opcao input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opcao span{display:block;height:100%;text-align:center;padding:14px 10px;border:1px solid var(--rule-2);border-radius:6px;font-weight:500;transition:border-color .15s,background-color .15s}
.opcao input:hover+span{border-color:#52636b}
.opcao input:checked+span{border-color:var(--gold);background:rgba(232,182,80,.08);color:#fff}
.opcao input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.opcao input:disabled+span{opacity:.55}
.opcao input:checked:disabled+span{opacity:1}
.quiz .btn{margin-top:16px;width:100%}
.resposta{margin-top:14px;padding:12px 14px;border-radius:6px;font-size:.98rem}
.resposta.ok{background:rgba(121,211,106,.09);border:1px solid rgba(121,211,106,.35)}
.resposta.erro{background:rgba(227,103,90,.08);border:1px solid rgba(227,103,90,.35)}
.resposta a{color:var(--gold)}

/* ---------- como é uma aula ---------- */
.aula{padding:var(--section) 0;border-top:1px solid var(--rule)}
.aula .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,6vw,96px);align-items:center}
.etapas{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:e;max-width:var(--measure)}
.etapas li{counter-increment:e;display:grid;grid-template-columns:3.2rem 1fr;gap:4px 12px;padding:18px 0;border-top:1px solid var(--rule)}
.etapas li::before{content:counter(e);grid-row:span 2;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--gold);font-variant-numeric:lining-nums}
.etapas b{font-weight:600;font-size:1.0625rem}
.etapas span{color:#cfd7da}
.celular{justify-self:center;width:min(320px,82vw);aspect-ratio:390/760;border:1px solid var(--rule-2);border-radius:34px;padding:10px;background:#03080b;position:relative}
.celular img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:25px}
.celular figcaption{position:absolute;left:0;right:0;bottom:-2.4rem;text-align:center;font-family:var(--serif);font-style:italic;color:var(--mute);font-size:1.02rem}

/* ---------- conteúdo ---------- */
.conteudo{padding:var(--section) 0;border-top:1px solid var(--rule)}
.conteudo .lede{margin-top:1.25rem}
.modulos{margin-top:3rem;border-bottom:1px solid var(--rule)}
.modulo{border-top:1px solid var(--rule)}
.modulo summary{list-style:none;display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:26px 0;cursor:pointer}
.modulo summary::-webkit-details-marker{display:none}
.modulo .n{font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--gold-soft)}
.modulo h3{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}
.modulo .d{grid-column:2;color:var(--mute);max-width:40rem}
.modulo .q{grid-row:1;grid-column:3;font-size:.9375rem;color:var(--mute);white-space:nowrap}
.modulo .q::after{content:"+";display:inline-block;margin-left:14px;font-size:1.3rem;line-height:1;color:var(--gold);transition:transform .2s}
.modulo[open] .q::after{transform:rotate(45deg)}
.modulo summary:hover h3{color:#fff}
.aulas{columns:2;column-gap:48px;margin:0 0 28px 7rem;padding:0;list-style:none;counter-reset:a}
.aulas li{break-inside:avoid;counter-increment:a;padding:5px 0 5px 2.4rem;position:relative;color:#cfd7da;font-size:.98rem;line-height:1.45}
.aulas li::before{content:counter(a);position:absolute;left:0;top:5px;width:1.8rem;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums;font-size:.875rem}

/* ---------- para quem ---------- */
.quem{padding:var(--section) 0;border-top:1px solid var(--rule)}
.quem .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:2.5rem}
.quem h3{font-size:1.75rem;margin-bottom:1rem}
.quem ul{margin:0;padding:0;list-style:none}
.quem li{padding:12px 0 12px 1.6rem;border-top:1px solid var(--rule);position:relative;color:#cfd7da}
.quem li::before{content:"";position:absolute;left:0;top:1.15em;width:.6rem;height:1px;background:var(--gold)}
.quem .nao li::before{background:var(--mute)}

/* ---------- oferta ---------- */
.oferta{padding:var(--section) 0;border-top:1px solid var(--rule)}
.oferta .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(28px,6vw,96px);align-items:start}
.inclui{list-style:none;margin:2rem 0 0;padding:0;max-width:var(--measure)}
.inclui li{padding:14px 0 14px 2rem;border-top:1px solid var(--rule);position:relative}
.inclui li::before{content:"";position:absolute;left:2px;top:1.2em;width:12px;height:7px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}

/* quadro de preço com cara de terminal de trading */
.preco{position:relative;overflow:hidden;border-radius:16px;padding:clamp(22px,3vw,32px);background:linear-gradient(180deg,#0c1c24 0%,#071117 100%);border:1px solid rgba(232,182,80,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 40px 90px -40px rgba(232,182,80,.35),0 0 0 6px rgba(232,182,80,.035)}
.preco::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(147,161,168,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(147,161,168,.07) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 55%);mask-image:linear-gradient(180deg,#000 0%,transparent 55%)}
.preco::after{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#e8b650,transparent);opacity:.9}
.preco>*{position:relative}
.preco p{margin:0}
.preco-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin-bottom:18px}
.status{display:inline-flex;align-items:center;gap:9px;font:600 .8125rem/1 var(--sans);color:#f3d48a;background:rgba(232,182,80,.1);border:1px solid rgba(232,182,80,.35);border-radius:999px;padding:8px 12px 8px 10px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#e8b650;box-shadow:0 0 0 0 rgba(232,182,80,.6);animation:pulso 1.8s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(232,182,80,.55)}70%{box-shadow:0 0 0 9px rgba(232,182,80,0)}100%{box-shadow:0 0 0 0 rgba(232,182,80,0)}}
.desconto{font:600 .875rem/1 var(--sans);color:#9be58d;background:rgba(121,211,106,.12);border:1px solid rgba(121,211,106,.35);border-radius:6px;padding:7px 9px}
.preco .de{font:400 1rem/1.2 var(--sans);color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(227,103,90,.8)}
.preco .valor{display:flex;align-items:flex-start;gap:4px;margin-top:4px;font:600 clamp(3.6rem,2.9rem + 2.6vw,4.9rem)/1 var(--sans);letter-spacing:-.035em;color:#fff;text-shadow:0 0 34px rgba(232,182,80,.18)}
.preco .valor .moeda{font-size:.34em;font-weight:500;letter-spacing:0;color:var(--mute);margin-top:.32em;margin-right:4px}
.preco .valor .cent{font-size:.34em;font-weight:500;letter-spacing:0;color:#cfd7da;margin-top:.32em}
.preco .parc{margin-top:10px;color:#cfd7da;font-size:.98rem}
.boleta{margin:22px 0 0;padding:4px 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.boleta div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:.9375rem}
.boleta div+div{border-top:1px dashed rgba(43,61,69,.9)}
.boleta dt{color:var(--mute)}
.boleta dd{margin:0;font-weight:500;color:var(--bone);text-align:right}
.preco .btn{width:100%;margin-top:22px;min-height:56px;font-size:1.0625rem;box-shadow:0 14px 34px -14px rgba(232,182,80,.75)}
.preco .btn[aria-disabled="true"]{box-shadow:none}
.preco .aviso{margin-top:10px;text-align:center;font-size:.9375rem}
.garantia{display:flex;gap:12px;align-items:flex-start;margin-top:20px;color:var(--gold)}
.garantia svg{flex:0 0 auto;margin-top:1px}
.garantia p{font-size:.9rem;line-height:1.5;color:#cfd7da}
.garantia b{color:var(--bone);font-weight:600}
@media (prefers-reduced-motion:reduce){.status::before{animation:none}}

/* ---------- perguntas ---------- */
.faq{padding:var(--section) 0;border-top:1px solid var(--rule)}
.faq .lista{margin-top:2.5rem;max-width:48rem;border-bottom:1px solid var(--rule)}
.faq details{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-family:var(--serif);font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-family:var(--sans);font-size:1.4rem;line-height:1.1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:var(--measure);color:#cfd7da;margin:-4px 0 24px}

/* ---------- fechamento ---------- */
.fim{padding:var(--section) 0;border-top:1px solid var(--rule);text-align:center}
.fim h2{margin:0 auto;max-width:14em}
.fim .lede{margin:1.4rem auto 0}
.fim .acoes{justify-content:center}

.rodape{border-top:1px solid var(--rule);padding:48px 0 calc(48px + env(safe-area-inset-bottom))}
.rodape .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px}
.rodape p{font-size:.875rem;color:var(--mute);max-width:46rem;margin:0}
.rodape nav{display:flex;gap:22px;flex-wrap:wrap;font-size:.9375rem}
.rodape nav a{color:#cfd7da;text-decoration:none}
.rodape nav a:hover{color:var(--gold)}

/* barra de compra no celular */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(5,11,15,.96);border-top:1px solid var(--rule-2);transform:translateY(110%);transition:transform .3s}
.barra.on{transform:none}
.barra .v{font-family:var(--serif);font-size:1.5rem;line-height:1}
.barra .v small{display:block;font-family:var(--sans);font-size:.75rem;color:var(--mute);margin-top:3px}

/* ---------- celular ---------- */
@media (max-width:900px){
  .abertura .wrap,.teste .wrap,.aula .wrap,.oferta .wrap{grid-template-columns:minmax(0,1fr)}
  .especime{max-width:430px;width:100%;justify-self:center}
  .atlas .wrap{display:block}
  .palco{top:0;height:52svh;margin:0 calc(-1 * var(--gutter));z-index:3;background:var(--ink);padding:8px var(--gutter) 10px;box-shadow:0 18px 22px -10px var(--ink)}
  .prancha{border-radius:2px}
  .passos{padding:2vh 0 18vh;position:relative;z-index:1}
  .passo{min-height:70svh;justify-content:flex-start;padding:4vh 0 6vh}
  .passo h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,2.6rem);margin-bottom:1rem}
  .passo h3{font-size:1.6rem}
  .legenda{left:12px;right:12px;top:10px}
  .legenda .t b{font-size:1.35rem}
  .legenda .ativo{font-size:.75rem;max-width:12em}
  .prancha .ficha{display:none}
  .ficha.inline{display:block}
  .ficha dl{font-size:.8125rem}
  .aula .celular{margin-bottom:2.4rem}
  .aulas{columns:1;margin-left:0}
  .modulo summary{grid-template-columns:minmax(0,1fr) auto}
  .modulo .n{grid-column:1/-1}
  .modulo h3{grid-column:1}
  .modulo .q{grid-row:2;grid-column:2}
  .modulo .d{grid-column:1/-1}
  .quem .cols{grid-template-columns:minmax(0,1fr)}
  .rodape .wrap{grid-template-columns:minmax(0,1fr)}
  .barra{display:flex}
  body.tem-barra{padding-bottom:76px}
}
@media (max-width:520px){
  .topo nav .btn{display:none}
  .opcoes{grid-template-columns:1fr}
  .quiz canvas{height:190px}
  h1{letter-spacing:-.01em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ficha,.btn,.barra{transition:none}
}