/* =============================================================
   BASE — reset, tipografia e o que é comum a todas as páginas.
   ============================================================= */
*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:env(safe-area-inset-top,0px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}
img{display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}

:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* O atributo hidden tem que vencer o display de qualquer componente.
   Sem o !important, uma regra como `.co-lines li{display:flex}` tem
   especificidade maior que o [hidden]{display:none} do navegador — e
   o elemento marcado como oculto continua aparecendo na tela. */
[hidden]{display:none!important}

/* =============================================================
   IMAGENS DOS MATERIAIS
   Usadas na landing e no checkout, por isso ficam aqui.
   ============================================================= */
.capa{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  aspect-ratio:220/316;
  border-radius:6px;
}
.capa--massinha{background-image:var(--capa-massinha)}
.capa--matematica{background-image:var(--capa-matematica)}
.capa--sanduiche{background-image:var(--capa-sanduiche)}
.capa--mercadinho{background-image:var(--capa-mercadinho)}
.capa--tabuada{background-image:var(--capa-tabuada)}
.capa--alfabetizacao{background-image:var(--capa-alfabetizacao)}

.paginas{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.pg--massinha{background-image:var(--paginas-massinha)}
.pg--matematica{background-image:var(--paginas-matematica)}
.pg--sanduiche{background-image:var(--paginas-sanduiche)}
.pg--mercadinho{background-image:var(--paginas-mercadinho)}
.pg--tabuada{background-image:var(--paginas-tabuada)}
.pg--alfabetizacao{background-image:var(--paginas-alfabetizacao)}

/* =============================================================
   ACENTOS POR MATERIAL

   O tema azul usa --c dentro dos componentes (.mat-img, .why .ic,
   .gal figcaption). Cada cartão define o seu --c com uma destas
   classes, em vez de repetir o valor da cor no HTML.
   ============================================================= */
.c-rosa{--c:var(--pink)}
.c-azul{--c:var(--blue)}
.c-laranja{--c:var(--orange)}
.c-verde{--c:var(--green-d)}
.c-roxo{--c:#8B5CD6}
.c-ciano{--c:#20A7B4}

/* =============================================================
   UTILITÁRIOS
   ============================================================= */
.center{text-align:center}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}