/* =====================================================================
   Site principal do Quarks (www.quarksedu.com.br): base da página.
   O visual da vitrine vem de site/vitrine.css (a mesma da loja, desenho aprovado em 18/10/2026).
   ===================================================================== */
@font-face{font-family:"Bricolage Grotesque";src:url(fontes/BricolageGrotesque-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fontes/BricolageGrotesque-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fontes/BricolageGrotesque-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fontes/Figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(fontes/Figtree-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Figtree";src:url(fontes/Figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(fontes/Figtree-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--roxo:#6551D1;--carvao:#292B2C;--amarelo:#FFD10C;--branco:#FFFFFF;--pilula:999px;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0}
img,video,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p{margin:0;text-wrap:balance}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px;border-radius:8px}
.wrap{max-width:1280px;margin:0 auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* cabeçalho */
.topo{position:sticky;top:0;z-index:40}
.topo .wrap{display:flex;align-items:center;gap:28px;height:72px}
.topo .marca img{height:30px;width:auto}
.topo nav{display:flex;gap:6px;margin-left:auto}
.topo nav a{text-decoration:none;font-weight:600;font-size:16px;padding:9px 14px;border-radius:var(--pilula)}
.topo .acoes{display:flex;gap:10px;align-items:center}
.entrar{text-decoration:none;font-weight:700;font-size:15px;padding:9px 16px;border-radius:var(--pilula);white-space:nowrap}
.loja-bt{text-decoration:none;font-weight:800;font-size:15px;padding:9px 18px;border-radius:var(--pilula);background:var(--amarelo);color:var(--carvao)!important;white-space:nowrap}
.hamb{display:none;border:0;width:46px;height:46px;border-radius:50%;cursor:pointer;place-items:center}
.hamb i{display:block;width:18px;height:2px;border-radius:2px}
.topo nav .entrar-m{display:none}
@media (max-width:900px){
  .topo .wrap{height:64px;gap:12px}
  .topo .marca img{height:24px}
  .topo nav{display:none;position:absolute;left:0;right:0;top:64px;padding:10px 18px 18px;flex-direction:column;gap:2px}
  .topo nav.aberto{display:flex}
  .topo nav a{padding:13px 14px;font-size:17px}
  .topo .acoes{margin-left:auto}
  .entrar{display:none}
  .topo nav .entrar-m{display:block}
  .hamb{display:grid}
}
@media (max-width:420px){ .loja-bt{padding:8px 12px;font-size:14px} }

/* detalhes do site */
.d-g .visite a.btn{text-decoration:none}
.d-g .visite dd a{color:inherit}
.d-g .pp a.pp-bt{text-decoration:none}
.d-g a.oc{text-decoration:none;color:inherit}
.d-g .oc .oc-ir{font-weight:800;color:var(--roxo)}
.d-g .aprov-trilho .apf[aria-hidden="true"]{pointer-events:none}
.d-g .a2-link{color:var(--amarelo);font-weight:700}
.d-g .visite .dl-l{display:contents}
.d-g .apf figcaption span{display:block}
.d-g .orb-no .fo.fo-sim{display:grid;place-items:center;background:var(--branco)}
.d-g .orb-no .fo.fo-sim img{width:70%;height:auto;object-fit:contain}
.whats{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:45;width:56px;height:56px;border-radius:50%;background:#1FA855;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.whats svg{width:28px;height:28px}
.pg-site .branca{background:var(--branco);border-radius:48px 48px 0 0}
.pg-site main{overflow-x:clip}