/* Feed de microaulas. Azul escuro e vinho, um item por tela no celular e 9:16 no desktop. */
html.mf-on main{
  display:flex;
  flex-direction:column;
  height:100dvh;
  padding:0!important;
  overflow:hidden;
  background:#071422;
}
@media (max-width:860px){
  html.mf-on main{height:calc(100dvh - 60px - env(safe-area-inset-bottom,0px))}
}
html.mf-on main>.mf-app{flex:1;min-height:0}

.mf-app{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#071422;
  color:#F6F5F2;
  font-family:Inter,system-ui,sans-serif;
}
.mf-app h1,.mf-app h2,.mf-app p{margin:0}
.mf-app h1,.mf-app h2,.mf-kicker,.mf-story,.mf-acoes button,.mf-acoes a,.mf-dip,.mf-fim h2{
  font-family:Inter,system-ui,sans-serif;
}
.mf-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.mf-filtros{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px 0;flex:none}
.mf-filtros button{min-height:36px;padding:0 12px;border-radius:4px;border:1px solid rgba(231,238,246,.45);background:transparent;color:#E7EEF6;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:13px;cursor:pointer}
.mf-filtros button.is-on{background:#1A4480;color:#FFFFFF;border-color:#1A4480}
.mf-filtros button:focus-visible{outline:2px solid #E7EEF6;outline-offset:2px}
.mf-recuperar{flex:none;padding:8px 16px 0;color:#E7EEF6}
.mf-recuperar p{margin:0 0 6px;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:13px}
.mf-recuperar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mf-recuperar li{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;line-height:1.3}
.mf-recuperar button{min-height:36px;padding:0 12px;border-radius:4px;border:0;background:#1A4480;color:#FFFFFF;font-family:Inter,system-ui,sans-serif;font-weight:800;cursor:pointer}
.mf-recuperar button:focus-visible{outline:2px solid #E7EEF6;outline-offset:2px}
.mf-vazio{margin-top:8px;font-size:15px;line-height:1.35;color:#E7EEF6;max-width:26ch}
.mf-fim[data-mf-vazio] .mf-stage{justify-content:flex-start;padding-top:64px}
.mf-fim[data-mf-vazio] h2{font-size:clamp(26px,3.6vh,36px);max-width:14ch}
.mf-stories{
  flex:none;
  display:flex;
  gap:16px;
  padding:10px 16px 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.mf-stories::-webkit-scrollbar{display:none}
.mf-story{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:76px;
  max-width:104px;
  padding:0;
  border:0;
  background:transparent;
  color:#F6F5F2;
  cursor:pointer;
  font-size:11px;
  font-weight:650;
  line-height:1.2;
  text-align:center;
}
.mf-ring{
  width:54px;height:54px;
  border-radius:2px;
  padding:2px;
  background:#1A4480;
}
.mf-ring span{
  display:grid;
  place-items:center;
  width:100%;height:100%;
  border-radius:2px;
  background:#10243F;
  color:#E7EEF6;
  font-weight:800;
  font-size:14px;
  letter-spacing:-.03em;
}
.mf-story.is-on .mf-ring{outline:2px solid #FFFFFF;outline-offset:2px}
.mf-story-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.mf-feed{
  position:relative;
  flex:1;
  min-height:0;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:auto;
  overscroll-behavior:contain;
  outline:none;
}
.mf-item{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  height:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mf-palco{
  height:100%;
  width:min(100%,560px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:8px 16px 16px;
  box-sizing:border-box;
}
.mf-stage{
  position:relative;
  height:100%;
  width:auto;
  max-width:calc(100% - 88px);
  aspect-ratio:9/16;
  background:#071422;
  color:#F6F5F2;
  border-radius:4px;
  border:1px solid #2A4468;
  box-shadow:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.mf-bars{display:flex;gap:3px;padding:12px 12px 0;flex:none}
.mf-bar{flex:1;height:4px;border-radius:2px;background:rgba(246,245,242,.42);overflow:hidden}
.mf-bar i{display:block;height:100%;width:0;background:#1A4480}
.mf-bar.is-done i{width:100%}
.mf-marca{
  margin:10px 14px 0;
  font-family:Inter,system-ui,sans-serif;
  font-weight:800;
  font-size:12px;
  letter-spacing:-.03em;
  color:rgba(246,245,242,.78);
  pointer-events:none;
  user-select:none;
}
.mf-marca i{font-style:normal;color:#F8EBE9}
.mf-stage:fullscreen,.mf-stage:-webkit-full-screen{width:100%;height:100%;max-width:none;border-radius:0;background:#071422}
.mf-stage:fullscreen .mf-marca,.mf-stage:-webkit-full-screen .mf-marca{font-size:16px}
.mf-topo{position:relative;z-index:6;flex:none;padding:8px 16px 0}
.mf-topo-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mf-vel-wrap{position:relative;flex:none}
.mf-vel{min-width:52px;min-height:36px;padding:0 10px;border-radius:4px;border:1px solid rgba(231,238,246,.5);background:rgba(16,36,63,.82);color:#E7EEF6;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:13px;cursor:pointer}
.mf-vel-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:8;display:flex;flex-direction:column;gap:4px;min-width:92px;padding:6px;border-radius:4px;border:1px solid rgba(231,238,246,.35);background:#10243F}
.mf-vel-menu[hidden]{display:none}
.mf-vel-menu button{min-height:36px;border:0;border-radius:4px;background:transparent;color:#F6F5F2;font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:14px;cursor:pointer}
.mf-vel-menu button.is-on{background:#8C1D18;color:#FFFFFF}
.mf-vel:focus-visible,.mf-vel-menu button:focus-visible{outline:2px solid #E7EEF6;outline-offset:2px}
.mf-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#F8EBE9}
.mf-tema{margin-top:2px;font-size:clamp(18px,2.4vh,22px);line-height:1.1;letter-spacing:-.03em;font-weight:800;max-width:18ch}
.mf-topo .mf-legenda{margin-top:6px;color:#E7EEF6;font-size:13.5px;line-height:1.35}
.mf-miolo{flex:1;min-height:0;overflow:auto;padding:8px 16px 8px}
.mf-cena-t{font-size:clamp(22px,3.4vh,30px);line-height:1.05;letter-spacing:-.04em;font-weight:800}
.mf-frase{margin-top:8px;font-size:15px;line-height:1.35;font-weight:500}
.mf-visual{min-height:72px;margin:10px 0;display:flex;align-items:center}
.mf-lei-txt{background:#FFFFFF;color:#0F315F;border-radius:4px;padding:8px 10px;font-weight:700;font-size:13.5px;line-height:1.35}
.mf-fonte{margin-top:6px;font-size:12px;font-weight:600;color:#C5D4E8}
.mf-fala{margin-top:10px;background:#10243F;border-radius:4px;padding:8px 10px;min-height:3.2em}
.mf-fala b{color:#E7EEF6;font-weight:650;font-size:14.5px;line-height:1.35}
.mf-pista{width:100%;height:8px;border-radius:2px;background:rgba(246,245,242,.2);position:relative}
.mf-pista i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;background:#8C1D18}
.mf-marcos{display:flex;justify-content:space-between;width:100%;margin-top:8px;font-size:12px;font-weight:700;text-align:center}
.mf-marcos span{width:30%}
.mf-marcos small{display:block;font-weight:500;color:#C5D4E8}
.mf-pills{display:flex;flex-wrap:wrap;gap:6px}
.mf-pill{background:#10243F;border-radius:4px;padding:6px 10px;font-size:13px;font-weight:700}
.mf-pill.is-on{background:#8C1D18;color:#FFFFFF}
.mf-big{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:.9;color:#F8EBE9;font-family:Inter,system-ui,sans-serif}
.mf-big small{display:block;font-size:13px;letter-spacing:0;color:#F6F5F2;font-weight:650;margin-top:4px}
.mf-casa-box{width:100%}
.mf-casas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mf-casa{border:1px solid rgba(231,238,246,.28);border-radius:4px;padding:6px;min-height:72px;background:#10243F}
.mf-casa.is-on{border-color:#F8EBE9;box-shadow:none}
.mf-casa-k{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#F8EBE9;font-weight:800}
.mf-casa b{display:block;margin-top:4px;font-size:12px;line-height:1.25;font-weight:700}
.mf-ficha{display:inline-block;margin-top:6px;background:#8C1D18;color:#FFFFFF;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:800;font-style:normal}
.mf-casa-nota{margin:8px 0 0;font-size:12px;line-height:1.35;color:#E7EEF6}
.mf-faixa{border:1px solid rgba(231,238,246,.28);border-radius:4px;padding:6px;min-height:72px;background:#10243F}
.mf-faixa.is-on{border-color:#F8EBE9;box-shadow:none}
.mf-faixa b{display:block;margin-top:4px;font-size:12px;line-height:1.25;font-weight:700}
.mf-autor{margin:6px 0 0;font-size:11px;line-height:1.35;color:#C5D4E8}
.mf-stage.is-questao .mf-topo .mf-tema,.mf-stage.is-questao .mf-topo .mf-legenda{display:none}
.mf-stage.is-questao .mf-rodape{display:none}
.mf-stage.is-questao .mf-toque{pointer-events:none}
.mf-stage.is-questao .mf-playic{display:none}
.mf-ops{display:flex;flex-direction:column;gap:6px;margin-top:10px;position:relative;z-index:6}
.mf-opcao{display:block;width:100%;text-align:left;border-radius:4px;border:1.5px solid rgba(246,245,242,.28);background:#10243F;color:#F6F5F2;padding:8px 10px;font-size:14px;font-weight:600;line-height:1.3;cursor:pointer}
.mf-opcao b{color:#F8EBE9;margin-right:6px}
.mf-opcao.is-certa{background:#1A4480;border-color:#1A4480;color:#FFFFFF}
.mf-opcao.is-certa b{color:#FFFFFF}
.mf-opcao.is-errada{background:#8C1D18;border-color:#8C1D18;color:#FFFFFF}
.mf-explica{margin-top:8px;background:#F8EBE9;color:#1A4480;border-radius:4px;padding:8px 10px;font-size:13.5px;line-height:1.35}
.mf-explica strong{display:block;margin-bottom:2px}
.mf-quiz-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;position:relative;z-index:6}
.mf-quiz-acoes button{min-height:40px;border-radius:4px;border:1.5px solid #F8EBE9;background:#071422;color:#F8EBE9;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:14px;padding:0 12px;cursor:pointer}
.mf-opcao:focus-visible,.mf-quiz-acoes button:focus-visible{outline:2px solid #E7EEF6;outline-offset:2px}
.mf-stage{--mf-vel:1}
.mf-sobe{animation:mf-sobe calc(.28s / var(--mf-vel, 1)) ease both}
.mf-pill{animation:mf-sobe calc(.28s / var(--mf-vel, 1)) ease both;animation-delay:calc(var(--i, 0) * .06s / var(--mf-vel, 1))}
@keyframes mf-sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mf-rodape{flex:none;padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:4;background:#071422}
.mf-bloco h2{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#F8EBE9}
.mf-grupo{display:flex;gap:6px;align-items:center;margin-top:4px;min-width:0}
.mf-dip{flex:none;background:#10243F;color:#E7EEF6;border:1px solid #F8EBE9;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:700}
.mf-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding-bottom:2px}
.mf-chips::-webkit-scrollbar{display:none}
.mf-chip{
  flex:none;
  background:#F8EBE9;
  color:#1A4480;
  border-radius:4px;
  padding:4px 8px;
  font-family:Inter,system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.mf-chip:hover,.mf-chip:focus-visible{background:#E7EEF6}

.mf-toque{
  position:absolute;
  left:0;right:0;top:28px;
  bottom:148px;
  display:flex;
  z-index:3;
}
.mf-zona{
  flex:1;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
}
.mf-zona-play{flex:1.5;position:relative}
.mf-playic{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:62px;height:62px;
  border-radius:50%;
  background:rgba(7,20,34,.55);
  border:1.5px solid #E7EEF6;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
}
.mf-stage.is-paused .mf-playic{opacity:1}
.mf-playic svg{width:26px;height:26px;margin-left:3px;fill:#F6F5F2;stroke:none}

.mf-acoes{display:flex;flex-direction:column;gap:12px;flex:none;z-index:5}
.mf-acoes button,.mf-acoes a{
  width:68px;
  min-height:64px;
  border-radius:4px;
  border:1px solid rgba(231,238,246,.4);
  background:#10243F;
  color:#E7EEF6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  line-height:1.15;
  padding:8px 4px;
  cursor:pointer;
  text-align:center;
}
.mf-acoes svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mf-acoes [data-mf-share] .mf-rot{font-size:9px;letter-spacing:-.04em;line-height:1.05}
.mf-acoes button[aria-pressed="true"]{background:#8C1D18;color:#FFFFFF;border-color:#8C1D18}
.mf-acoes button[aria-pressed="true"] svg{fill:#FFFFFF;stroke:#FFFFFF}
.mf-acoes button:focus-visible,.mf-acoes a:focus-visible,.mf-zona:focus-visible,.mf-story:focus-visible,.mf-chip:focus-visible,.mf-feed:focus-visible,.mf-voltar:focus-visible{
  outline:2px solid #E7EEF6;
  outline-offset:2px;
}

.mf-fim .mf-stage{
  align-items:flex-start;
  justify-content:flex-end;
  padding:28px 22px;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(140,29,24,.35),transparent 55%),
    #10243F;
}
.mf-fim h2{font-size:clamp(28px,4vh,40px);line-height:1.05;letter-spacing:-.04em;font-weight:800;max-width:12ch}
.mf-fim .mf-kicker{margin-bottom:8px}
.mf-sheet{position:fixed;inset:0;z-index:80;background:rgba(7,20,34,.62);display:flex;align-items:flex-end;justify-content:center}
.mf-sheet[hidden]{display:none}
.mf-sheet-box{width:min(440px,100%);background:#10243F;color:#F6F5F2;border-radius:4px 4px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
.mf-sheet-box h2{font-size:22px;letter-spacing:-.03em}
.mf-sheet-url{font-size:13px;line-height:1.4;color:#E7EEF6;word-break:break-all}
.mf-sheet-ops{display:flex;flex-direction:column;gap:8px}
.mf-sheet-ops a,.mf-sheet-ops button,.mf-sheet-x{
  min-height:48px;border-radius:4px;border:1px solid rgba(231,238,246,.35);
  background:#071422;color:#F6F5F2;font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:15px;
  text-decoration:none;display:flex;align-items:center;justify-content:center;padding:0 16px;cursor:pointer;
}
.mf-sheet-ops a:first-child,.mf-sheet-ops button[data-mf-copy]{background:#8C1D18;color:#FFFFFF;border-color:#8C1D18}
.mf-sheet-ops a:focus-visible,.mf-sheet-ops button:focus-visible,.mf-sheet-x:focus-visible{outline:2px solid #E7EEF6;outline-offset:2px}
@media (min-width:861px){
  .mf-sheet{align-items:center;padding:24px}
  .mf-sheet-box{border-radius:4px}
}
.mf-voltou{margin-top:16px;display:flex;flex-direction:column;gap:8px;width:100%}
.mf-voltar{
  border:1px solid #F8EBE9;
  background:transparent;
  color:#E7EEF6;
  border-radius:4px;
  min-height:40px;
  padding:8px 12px;
  font-family:Inter,system-ui,sans-serif;
  font-weight:700;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}

@media (max-width:860px){
  .mf-palco{position:relative;width:100%;padding:0;gap:0}
  .mf-stage{
    width:100%;
    max-width:none;
    height:100%;
    aspect-ratio:auto;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .mf-acoes{
    position:absolute;
    right:8px;
    top:42%;
    bottom:auto;
    gap:8px;
  }
  .mf-acoes button,.mf-acoes a{
    width:58px;
    min-height:54px;
    background:rgba(16,36,63,.78);
    font-size:10px;
  }
  .mf-miolo{padding-right:78px}
  .mf-toque{right:62px;bottom:132px}
  .mf-fim .mf-stage{border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .mf-sobe,.mf-pill,.mf-pista i,.mf-ficha{animation:none}
  .mf-feed{scroll-behavior:auto}
  .mf-app *{transition:none}
}