/* Desplugadinhos — Design System Lúdico Inspirado na Estética Livro Infantil */
:root {
  /* Cores Base da Imagem de Referência */
  --creme: #FAF7EF;
  --creme-claro: #FFFDF7;
  --areia: #F5EEDB;
  --borda: #E8DECA;
  --branco: #FFFFFF;
  --texto: #262626;
  --texto2: #595959;
  --link: #0369A1;
  --foco: #F59E0B;

  /* Céu e Azul */
  --ceu-azul: #D4EFFC;
  --ceu-azul-claro: #EBF7FE;
  --azul-c: #E0F2FE;
  --azul-m: #0284C7;
  --azul-e: #0369A1;

  /* Natureza e Grama */
  --grama-verde: #76BF39;
  --grama-escura: #4E8B38;
  --grama-clara: #DDF3C8;
  --verde-c: #DCFCE7;
  --verde-m: #16A34A;
  --verde-e: #14532D;

  /* Sol e Dourado */
  --sol-amarelo: #FFBE1A;
  --sol-dourado: #F59E0B;
  --sol-claro: #FFF5CC;
  --amarelo-c: #FEF9C3;
  --amarelo-m: #EAB308;
  --amarelo-e: #713F12;

  /* Laranja e Coral */
  --laranja-coral: #F26D38;
  --laranja-claro: #FFEDD5;
  --laranja-c: #FFEDD5;
  --laranja-m: #EA580C;
  --laranja-e: #9A3412;

  /* Madeira e Rústico */
  --madeira-tom: #C18748;
  --madeira-escura: #8D5325;
  --madeira-clara: #F4E2C7;

  /* Rosa e Roxo */
  --rosa-c: #FCE7F3;
  --rosa-m: #DB2777;
  --rosa-e: #831843;
  --roxo-c: #EDE9FE;
  --roxo-m: #7C3AED;
  --roxo-e: #4C1D95;

  /* Raios e Espaçamentos */
  --r-s: 12px;
  --r-m: 20px;
  --r-g: 28px;
  --r-pilula: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --sombra-suave: 0 4px 14px rgba(60, 50, 30, 0.08);
  --sombra-card: 0 6px 18px rgba(60, 50, 30, 0.09);
  --sombra-btn: 0 4px 0 rgba(180, 110, 20, 0.35);

  --fonte-titulo: 'Fredoka', 'Quicksand', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --fonte: 'Nunito', 'Atkinson Hyperlegible', system-ui, sans-serif;

  --fs-h1: 2rem;
  --fs-h2: 1.45rem;
  --fs-h3: 1.25rem;
  --fs-lead: 1.15rem;
  --fs-body: 1.05rem;
  --fs-small: 0.92rem;
  --fs-chip: 0.85rem;

  --lh-h1: 1.2;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.6;
  --lh-compacto: 1.45;

  --pad: 20px;
  --medida: 70ch;
  --h-topo: 76px;
  --h-controle: 68px;
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 2.75rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.4rem;
    --fs-lead: 1.25rem;
    --pad: 28px;
  }
}

/* Temas por cor de bloco */
[data-cor=azul]    { --c: var(--azul-c);    --m: var(--azul-m);    --e: var(--azul-e);    --txt-m: #ffffff; }
[data-cor=verde]   { --c: var(--verde-c);   --m: var(--verde-m);   --e: var(--verde-e);   --txt-m: #ffffff; }
[data-cor=laranja] { --c: var(--laranja-c); --m: var(--laranja-m); --e: var(--laranja-e); --txt-m: #ffffff; }
[data-cor=rosa]    { --c: var(--rosa-c);    --m: var(--rosa-m);    --e: var(--rosa-e);    --txt-m: #ffffff; }
[data-cor=roxo]    { --c: var(--roxo-c);    --m: var(--roxo-m);    --e: var(--roxo-e);    --txt-m: #ffffff; }
[data-cor=amarelo] { --c: var(--amarelo-c); --m: var(--amarelo-m); --e: var(--amarelo-e); --txt-m: #262626; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 17px; scroll-behavior: smooth; }
@media (min-width: 1024px) { html { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--texto);
  background-color: var(--creme);
}

h1, h2, h3 { margin: 0 0 0.4em; font-family: var(--fonte-titulo); font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--azul-e); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--e, var(--texto)); }
p { margin: 0 0 0.85em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: var(--medida); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, Consolas, monospace; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 12px; background: var(--branco); padding: 10px 18px; border-radius: var(--r-s); z-index: 100; font-weight: 700; box-shadow: var(--sombra-card); }
.skip:focus { left: 16px; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }

/* ==========================================================================
   TOPO / HEADER ESTILIZADO
   ========================================================================== */
.topo {
  background-color: var(--creme-claro);
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.topo__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--h-topo);
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
}
@media (min-width: 960px) { .topo__in { flex-wrap: nowrap; } }
.marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.marca:hover { transform: scale(1.02); }
.marca__logo {
  width: clamp(170px, 50vw, 250px);
  height: auto;
  display: block;
}
@media (min-width: 768px) {
  .marca__logo { width: 300px; }
}
.menu-btn__barras {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--branco);
  border: 2px solid var(--sol-dourado);
  border-radius: var(--r-pilula);
  padding: 8px 18px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  box-shadow: var(--sombra-suave);
}
@media (min-width: 960px) {
  .menu-btn { display: none; }
}

.nav {
  display: none;
  width: 100%;
  flex-direction: column;
  padding: 12px 0 16px;
  gap: 8px;
}
.nav.aberto { display: flex; }
@media (min-width: 960px) {
  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 0;
  }
}

.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pilula);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  color: #334155;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s, color 0.2s;
}
.nav__item:hover {
  background-color: var(--sol-claro);
  color: #1E293B;
  text-decoration: none;
}
.nav__item.ativo {
  color: #0F172A;
  font-weight: 700;
}
.nav__item.ativo::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 14px;
  right: 14px;
  height: 4px;
  background: #FBBF24;
  border-radius: 999px;
}
.nav__item--busca {
  padding: 8px 12px;
  border-radius: 50%;
  color: #475569;
}
.nav__item--busca:hover {
  background-color: var(--azul-c);
  color: var(--azul-e);
}
@media (min-width: 960px) { .nav__busca-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.nav__dropdown {
  position: relative;
}
.nav__submenu {
  display: none;
  flex-direction: column;
  background: var(--branco);
  border: 2px solid var(--borda);
  border-radius: var(--r-m);
  padding: 8px;
  box-shadow: var(--sombra-card);
}
@media (min-width: 960px) {
  .nav__dropdown:hover .nav__submenu,
  .nav__dropdown:focus-within .nav__submenu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    z-index: 70;
  }
  .nav__submenu a { white-space: nowrap; }
}
@media (max-width: 959px) {
  .nav__submenu { display: flex; padding-left: 24px; border: none; box-shadow: none; background: transparent; }
}
.nav__submenu a {
  padding: 8px 14px;
  font-family: var(--fonte);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--texto);
  border-radius: var(--r-s);
}
.nav__submenu a:hover {
  background-color: var(--sol-claro);
  text-decoration: none;
}

/* Onda divisória na base do topo */
.topo__onda {
  height: 18px;
  background: url('../ondas/onda-topo.svg') repeat-x bottom center;
  background-size: 1440px 18px;
  margin-bottom: -18px;
  position: relative;
  z-index: 55;
}

/* ==========================================================================
   HERO SECTION IDÊNTICA À IMAGEM DE REFERÊNCIA
   ========================================================================== */
.hero-estilizada {
  position: relative;
  background: linear-gradient(180deg, #E0F4FD 0%, #C9EBFA 45%, #B3E3F7 100%);
  overflow: hidden;
  padding-top: 36px;
  border-bottom: 6px solid var(--grama-escura);
}

.hero-estilizada__ceu {
  position: relative;
  z-index: 10;
  padding-bottom: 20px;
}

.hero-estilizada__nuvem {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  pointer-events: none;
}
.hero-estilizada__nuvem--1 {
  width: 140px;
  height: 48px;
  top: 40px;
  right: 18%;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
}
.hero-estilizada__nuvem--2 {
  width: 90px;
  height: 32px;
  top: 90px;
  right: 8%;
}

.hero-estilizada__pipa {
  position: absolute;
  top: 15px;
  right: 3%;
  z-index: 12;
  animation: flutuarPipa 6s ease-in-out infinite alternate;
}
@keyframes flutuarPipa {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(4deg); }
}

.hero-estilizada__in {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
  position: relative;
}
@media (min-width: 900px) {
  .hero-estilizada__in {
    grid-template-columns: 240px 1fr;
    gap: var(--sp-6);
  }
}

/* Placa de madeira à esquerda */
.hero-estilizada__lateral {
  display: flex;
  justify-content: center;
}
.placa-madeira {
  background: #F3C377;
  background: linear-gradient(135deg, #F8CD8A 0%, #EBB669 100%);
  border: 4px solid #B87333;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 8px 16px rgba(80, 40, 10, 0.18), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  text-align: center;
  position: relative;
  max-width: 230px;
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}
.placa-madeira:hover {
  transform: rotate(-1deg) scale(1.02);
}
.placa-madeira::before, .placa-madeira::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #78350F;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
}
.placa-madeira::before { top: 10px; left: 12px; }
.placa-madeira::after  { bottom: 10px; right: 12px; }
.placa-madeira__texto {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: #713F12;
  margin: 0;
}
.placa-madeira__simbolo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  color: #B45309;
  margin: 6px 0 0;
}

/* Centro do Hero */
.hero-estilizada__centro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-estilizada__sol-wrap {
  margin-bottom: -15px;
  animation: girarSol 20s linear infinite;
}
@keyframes girarSol {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.hero-estilizada__titulo {
  font-family: var(--fonte-titulo);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  line-height: 1.1;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) {
  .hero-estilizada__titulo { font-size: 4.2rem; }
}
.titulo-spark { color: #16A34A; font-weight: 600; opacity: 0.8; margin: 0 6px; }
.letra-d1 { color: #0284C7; }
.letra-e1 { color: #0EA5E9; }
.letra-s1 { color: #0369A1; }
.letra-p1 { color: #F97316; }
.letra-l1 { color: #EAB308; }
.letra-u1 { color: #16A34A; }
.letra-g1 { color: #EC4899; }
.letra-a1 { color: #F97316; }
.letra-d2 { color: #0284C7; }
.letra-i1 { color: #0D9488; }
.letra-n1 { color: #EAB308; }
.letra-h1 { color: #EA580C; }
.letra-o1 { color: #16A34A; }
.letra-s2 { color: #0D9488; }

.hero-estilizada__faixa-slogan {
  display: inline-block;
  background: #5A9E32;
  background: linear-gradient(90deg, #65A30D 0%, #4D7C0F 100%);
  color: #FFFFFF;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  padding: 8px 24px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(40, 80, 10, 0.25);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .hero-estilizada__faixa-slogan { font-size: 1.55rem; padding: 10px 36px; }
}
.hero-estilizada__coracao-slogan {
  color: #E11D48;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 6px 0 10px;
}

.hero-estilizada__descricao {
  font-family: var(--fonte);
  font-size: 1.15rem;
  font-weight: 600;
  color: #1E293B;
  max-width: 640px;
  line-height: 1.5;
  margin: 0 auto 18px;
}

.btn-vamos-brincar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFC000;
  background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%);
  border: 3px solid #D97706;
  border-radius: 999px;
  padding: 12px 32px;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: #78350F;
  text-decoration: none;
  box-shadow: 0 6px 0 #B45309, 0 10px 20px rgba(180, 83, 9, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.btn-vamos-brincar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #B45309, 0 12px 24px rgba(180, 83, 9, 0.25);
  text-decoration: none;
}
.btn-vamos-brincar:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #B45309;
}
.btn-vamos-brincar__coracao {
  font-size: 1.4rem;
}

/* Gramado e Crianças da Ilustração */
.hero-estilizada__chao {
  position: relative;
  z-index: 15;
  margin-top: 10px;
  line-height: 0;
  overflow: hidden;
}
.hero-estilizada__arte-criancas {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Manifesto Pedagógico */
.hero-estilizada__manifesto-wrap {
  position: relative;
  z-index: 20;
  margin-top: -30px;
  margin-bottom: var(--sp-6);
}
.hero-estilizada__manifesto {
  background: var(--branco);
  border: 3px solid var(--borda);
  border-radius: var(--r-g);
  padding: var(--sp-5);
  box-shadow: var(--sombra-card);
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 800px) {
  .hero-estilizada__manifesto {
    grid-template-columns: 1fr auto;
    padding: var(--sp-5) var(--sp-6);
  }
}
.manifesto__texto .lead {
  margin: 0;
  font-size: 1.15rem;
  color: #334155;
}
.manifesto__botoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   BOTÕES E CHIPS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: var(--r-pilula);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--branco);
  color: var(--azul-e);
  border: 2px solid var(--azul-m);
  box-shadow: 0 3px 0 var(--azul-e);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s;
}
.btn:hover { text-decoration: none; }
.btn--primario {
  background: var(--azul-m);
  color: #ffffff;
  box-shadow: 0 4px 0 var(--azul-e);
}
.btn--primario:hover {
  background: #0284C7;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--azul-e);
  text-decoration: none;
}
.btn--suave {
  background: var(--areia);
  border-color: var(--borda);
  color: var(--texto);
  box-shadow: 0 3px 0 #D4C3A3;
}
.btn--suave:hover {
  background: var(--branco);
  text-decoration: none;
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.btn--texto {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--azul-e);
  padding: 0 var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-chip);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--r-pilula);
  background: var(--areia);
  color: var(--texto);
  line-height: 1.3;
  white-space: nowrap;
}
.chip--faixa {
  background: var(--branco);
  border: 2px solid var(--m, var(--borda));
  color: var(--e, var(--texto));
}
.chip--campo {
  background: var(--c, var(--areia));
  color: var(--e, var(--texto));
}
.chip--desplugada {
  background: var(--roxo-c);
  color: var(--roxo-e);
  border: 1.5px solid var(--roxo-m);
}
.chip--btn {
  min-height: 42px;
  font: inherit;
  font-size: var(--fs-chip);
  font-weight: 700;
  border: 2px solid var(--borda);
  background: var(--branco);
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--borda);
}
.chip--btn:hover {
  background: var(--sol-claro);
  border-color: var(--sol-dourado);
  text-decoration: none;
}
.chip--btn.is-ativo {
  border-color: var(--azul-m);
  background: var(--azul-c);
  color: var(--azul-e);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   RIBBONS E SEÇÕES
   ========================================================================== */
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--m, var(--azul-m));
  color: var(--txt-m, #ffffff);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: var(--r-pilula);
  margin: 0 0 var(--sp-4);
  max-width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.ribbon span { min-width: 0; }
@media (max-width: 599px) {
  .ribbon { font-size: 1.15rem; padding: 8px 16px; gap: 8px; }
  .ribbon .ico { width: 20px; height: 20px; }
}
.ribbon .ico { width: 24px; height: 24px; }
.ribbon--inclinada { transform: rotate(-1.5deg); }

.secao {
  margin-top: var(--sp-7);
}
@media (min-width: 1024px) {
  .secao { margin-top: var(--sp-8); }
}

/* Faixas Etárias */
.faixas {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.faixa-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 210px;
  background: var(--c);
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-g);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--texto);
  box-shadow: var(--sombra-card);
  transition: transform 0.2s ease, box-shadow 0.2s;
}
.faixa-card:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.faixa-card__ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--m);
  color: var(--txt-m);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-2);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
}
.faixa-card__ico .ico { width: 34px; height: 34px; }
.faixa-card__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-h3);
  color: var(--e);
}
.faixa-card__idade { color: var(--texto2); font-size: var(--fs-small); font-weight: 600; }
.faixa-card__n { color: var(--e); font-weight: 700; margin-top: auto; padding-top: 8px; font-family: var(--fonte-titulo); }
.faixa-card__nota { font-size: var(--fs-chip); color: var(--texto2); line-height: 1.4; }
.secao__nota { color: var(--texto2); font-size: var(--fs-small); margin-top: var(--sp-3); max-width: var(--medida); }

/* Grade de Cards de Brincadeiras */
.grade-cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card-brinc {
  background: var(--branco);
  border: 2px solid var(--borda);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s;
}
.card-brinc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.card-brinc__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-bottom: var(--pad);
}
.card-brinc__img {
  aspect-ratio: 16 / 9;
  background: var(--areia);
  overflow: hidden;
  border-bottom: 2px solid var(--borda);
}
.card-brinc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.card-brinc:hover .card-brinc__img img {
  transform: scale(1.04);
}
.card-brinc__faixa {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--m);
  color: var(--txt-m);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-chip);
  padding: 6px var(--pad);
  margin: 0;
}
.card-brinc__titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-h3);
  color: var(--texto);
  margin: var(--sp-3) var(--pad) var(--sp-1);
}
.card-brinc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin: 0 var(--pad);
  color: var(--texto2);
  font-size: var(--fs-small);
  font-weight: 600;
}
.card-brinc__meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-brinc__campos { margin: var(--sp-3) var(--pad) 0; }

/* Blocos de Artigos Duplo/Triplo */
.duplo { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .duplo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .duplo { grid-template-columns: repeat(3, 1fr); } }
.caixa {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  border-radius: var(--r-g);
  padding: var(--pad);
  background: var(--c);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--sombra-card);
}
.caixa img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--m);
  background: var(--branco);
  object-fit: cover;
}
.caixa h2 {
  font-size: var(--fs-h3);
  color: var(--e);
  margin-top: 0;
}
.caixa a { font-weight: 700; font-family: var(--fonte-titulo); }

/* ==========================================================================
   ACERVO DE BRINCADEIRAS
   ========================================================================== */
.acervo__cab { margin-top: var(--sp-5); }
.acervo__n { color: var(--texto2); font-weight: 700; margin-top: -6px; }
.acervo__controle {
  display: flex;
  gap: 12px;
  align-items: center;
  position: sticky;
  top: var(--h-topo);
  background: var(--creme);
  padding: 12px 0;
  z-index: 40;
}
.busca { flex: 1; }
.busca input {
  width: 100%;
  min-height: 50px;
  border: 2px solid var(--borda);
  border-radius: var(--r-pilula);
  padding: 10px 22px;
  font: inherit;
  font-size: 1.05rem;
  background: var(--branco);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.busca input:focus {
  border-color: var(--azul-m);
  outline: none;
  box-shadow: 0 0 0 4px var(--azul-c);
}
.chips-ativos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; margin: 4px 0 12px; }
.acervo__corpo { display: grid; gap: var(--sp-5); }
.filtros {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 85vh;
  overflow: auto;
  background: var(--branco);
  border-radius: var(--r-g) var(--r-g) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  padding: 20px 20px 90px;
  transform: translateY(105%);
  transition: transform 0.25s ease-out;
  z-index: 65;
}
.filtros.aberto { transform: none; }
.filtros-fundo {
  position: fixed; inset: 0;
  background: rgba(30, 20, 10, 0.4);
  z-index: 60;
  display: none;
}
.filtros-fundo.aberto { display: block; }
.filtros__cab { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 12px; }
.filtros__cab h2 { margin: 0 auto 0 0; color: var(--azul-e); }
.filtros fieldset { border: 0; padding: 0; margin: var(--sp-4) 0 0; }
.filtros legend { font-weight: 700; font-family: var(--fonte-titulo); font-size: var(--fs-small); color: var(--azul-e); margin-bottom: 8px; }
.filtros label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: 600;
  line-height: var(--lh-compacto);
}
.filtros label small { display: block; color: var(--texto2); font-size: var(--fs-chip); font-weight: 600; }
.filtros input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--azul-m); margin: 0; flex: none; }
.filtros .ico { width: 20px; height: 20px; color: var(--azul-m); }
.filtros__pe { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: var(--branco); border-top: 1px solid var(--borda); }
.filtros__pe .btn { width: 100%; }
@media (min-width: 1024px) {
  .acervo__corpo { grid-template-columns: 300px 1fr; align-items: start; }
  .filtros, .filtros.aberto {
    position: sticky;
    top: calc(var(--h-topo) + var(--h-controle) + 8px);
    transform: none;
    max-height: none;
    box-shadow: var(--sombra-card);
    border: 2px solid var(--borda);
    border-radius: var(--r-m);
    padding: var(--pad);
  }
  .filtros-fundo { display: none !important; }
  .filtros__pe, .js-fechar-filtros, .js-abrir-filtros { display: none; }
}

.vazio {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  background: var(--roxo-c);
  border-radius: var(--r-g);
  padding: var(--pad);
  margin-top: 16px;
  box-shadow: var(--sombra-card);
}
.vazio img { width: 100px; height: auto; }
.vazio__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--fs-h3); color: var(--roxo-e); }

/* ==========================================================================
   FICHA DE BRINCADEIRA
   ========================================================================== */
.trilha { margin: 20px 0 10px; font-size: var(--fs-small); color: var(--texto2); font-weight: 600; }
.ficha__cab h1 { margin-bottom: 6px; }
.ficha__regionais { color: var(--texto2); font-size: var(--fs-small); margin-top: -4px; }
.ficha__topo { display: grid; gap: 20px; margin-top: var(--sp-4); }
@media (min-width: 900px) {
  .ficha__topo { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.ficha__ilustracao {
  margin: 0;
  background: var(--branco);
  border: 3px solid var(--borda);
  border-radius: var(--r-g);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}
.ficha__ilustracao img { display: block; width: 100%; }
.ficha__ilustracao figcaption { font-size: var(--fs-small); color: var(--texto2); padding: 8px 14px; }

.resumo {
  background: var(--branco);
  border: 2px solid var(--borda);
  border-radius: var(--r-m);
  padding: var(--pad);
  box-shadow: var(--sombra-card);
}
.resumo__grade { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin: 0; }
@media (min-width: 480px) {
  .resumo__grade { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
}
.resumo__grade dt { font-family: var(--fonte-titulo); font-size: var(--fs-chip); font-weight: 700; color: var(--azul-m); text-transform: uppercase; }
.resumo__grade dd { margin: 0; font-weight: 600; }
.resumo__materiais { grid-column: 1 / -1; }

.lista-ico { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-ico li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.lista-ico .circ {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--m, var(--azul-m)); color: var(--txt-m, #ffffff);
  display: grid; place-items: center; box-shadow: var(--sombra-suave);
}
.lista-ico .circ .ico { width: 22px; height: 22px; }

.passos { counter-reset: p; list-style: none; padding: 0; margin: 0; }
.passos li { counter-increment: p; position: relative; padding-left: 56px; margin: var(--sp-3) 0; min-height: 44px; }
.passos li::before {
  content: counter(p); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--m, var(--verde-m)); color: var(--txt-m, #ffffff);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--fs-h3);
  display: grid; place-items: center; box-shadow: var(--sombra-suave);
}

.bloco {
  position: relative;
  margin-top: var(--sp-6);
  max-width: var(--medida);
  background: var(--c, var(--branco));
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--r-m);
  padding: var(--pad);
  box-shadow: var(--sombra-card);
}
.bloco--seguranca { border-left: 8px solid var(--amarelo-m); }
.bloco--casa .frase {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--rosa-e);
  text-align: center;
  margin: var(--sp-4) 0 0;
}

/* Fala do mascote / Speech bubble */
.fala {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin-top: var(--sp-5);
}
.fala__avatar-wrap {
  flex: 0 0 60px;
}
.fala__avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid var(--m);
  background: var(--branco);
  box-shadow: var(--sombra-suave);
  display: block;
}
.fala__balao {
  position: relative;
  background: var(--branco);
  border: 2px solid var(--m);
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: var(--sombra-suave);
  max-width: 540px;
}
.fala__balao p { margin: 0; font-weight: 600; }
.fala__balao strong { color: var(--e); font-family: var(--fonte-titulo); }

/* Ações fixas mobile */
.acoes--fixa {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--branco);
  border-top: 3px solid var(--azul-m);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.1);
  z-index: 50;
  display: flex; gap: 8px;
}
.acoes--fixa .btn { flex: 1; min-height: 44px; padding: 8px 14px; font-size: var(--fs-small); }
@media (min-width: 900px) { .acoes--fixa { display: none; } }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape {
  margin-top: var(--sp-9);
  background: #E0F2FE;
  color: #0369A1;
  position: relative;
}
.rodape__grama-onda {
  height: 28px;
  background: url('../ondas/onda-grama.svg') repeat-x bottom center;
  background-size: 1440px 28px;
  margin-top: -28px;
}
.rodape__corpo {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  text-align: center;
}
.rodape__ilustracao {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.rodape__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
  margin: var(--sp-4) 0;
  font-weight: 700;
  font-family: var(--fonte-titulo);
}
.rodape__nav a { color: var(--azul-e); }
.rodape__nota {
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--fs-small);
  color: #334155;
}
.rodape__fim {
  font-size: var(--fs-small);
  color: #64748B;
  margin-top: var(--sp-4);
}

/* ==========================================================================
   IMPRESSÃO A4 (PRESERVADA 100%)
   ========================================================================== */
@media print {
  @page { size: A4; margin: 12mm 12mm 18mm; }
  body { background: none; font-size: 10.5pt; line-height: 1.35; color: #000; }
  .topo, .rodape, .trilha, .acoes, .aviso-video, .fala, .ficha__ilustracao figcaption, .skip, video, details, .ficha__chips .chip--campo, [aria-labelledby=h-parecidas], [aria-labelledby=h-casa], [aria-labelledby=h-desplugada], .bloco__sub, .idade-indicada, [aria-labelledby=h-origem] > p, .ribbon::after { display: none !important; }
  a { color: #000; text-decoration: none; }
  .wrap { max-width: none; padding: 0; }
  h1 { font-size: 20pt; margin: 0; }
  h3 { font-size: 10.5pt; margin: 5pt 0 2pt; color: #000; break-after: avoid; }
  .ribbon { display: block; background: none !important; color: #000 !important; border-bottom: 2pt solid #000; border-radius: 0; padding: 0 0 2pt; margin: 8pt 0 3pt; font-size: 12.5pt; letter-spacing: 0.02em; break-after: avoid; }
  .ficha__topo { display: grid; grid-template-columns: 45mm 1fr; gap: 6mm; margin-top: 4pt; break-inside: avoid; }
  .ficha__ilustracao { box-shadow: none; background: none; filter: grayscale(1); border: none; }
  .resumo { padding: 0; box-shadow: none; border: none; }
  .resumo__grade { grid-template-columns: 1fr 1fr; gap: 3pt 8pt; }
  .resumo__grade dt { font-size: 8pt; color: #000; }
  .lista-ico li { grid-template-columns: 1fr; gap: 0; }
  .lista-ico .circ { display: none; }
  .ficha__resumo { font-size: 10.5pt; margin: 4pt 0; }
  .bloco { margin-top: 6pt; max-width: none; break-inside: avoid; padding: 4pt 6pt !important; background: none !important; border: 0.5pt solid #999 !important; box-shadow: none; border-radius: 4pt; }
  .bloco--seguranca { border-left: 3pt solid #000 !important; }
  .todo-mundo, .letra, .na-pratica, .sumario { background: none !important; border-color: #999; padding: 3pt 6pt; }
  [aria-labelledby=h-variacoes], [aria-labelledby=h-mediacao] { columns: 2; column-gap: 8mm; }
  [aria-labelledby=h-bncc] { break-inside: auto; }
  .objetivos { display: block; }
  .objetivo { break-inside: avoid; margin: 2pt 0; border-left: 2pt solid #000; background: none; padding: 2pt 6pt; box-shadow: none; }
  .objetivo code { font-size: 9pt; background: none; color: #000; padding: 0; }
  .objetivo small { display: none; }
  .passos li { min-height: 0; padding-left: 18pt; margin: 2pt 0; line-height: 1.3; }
  .passos li::before { width: 14pt; height: 14pt; font-size: 9pt; background: #eee !important; color: #000; border: 0; box-shadow: none; }
  .referencias { font-size: 8.5pt; }
  .chip { display: inline-block; border: 0.5pt solid #999; background: none !important; color: #000 !important; font-size: 8pt; padding: 0 5pt; line-height: 1.3; margin: 0 2pt 2pt 0; }
  .impressao-rodape { display: block; position: fixed; bottom: 0; left: 0; right: 0; font-size: 8pt; color: #555; border-top: 0.5pt solid #999; padding-top: 2pt; }
}

/* ==========================================================================
   HERO FULL-WIDTH (OCUPA TODA A LARGURA DA TELA DE PONTA A PONTA)
   ========================================================================== */
/* Hero Full-Width 4K com texto perfeitamente centralizado em HTML/CSS */
/* O palco fica dentro do .wrap (mesma largura das outras seções) e, a partir de
   900px, tem proporção fixa e tipografia em cqw: a composição é a mesma em
   qualquer resolução ou zoom. */
.hero-fullwidth {
  position: relative;
  padding: var(--sp-4) 0 0;
}

.hero-fullwidth__stage {
  width: 100%;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-g);
  border: 4px solid var(--branco);
  background: linear-gradient(180deg, #E0F4FD 0%, #C9EBFA 45%, #B3E3F7 100%);
  box-shadow: var(--sombra-card);
  container-type: inline-size;
}

@media (min-width: 900px) {
  .hero-fullwidth__stage {
    min-height: 0;
    aspect-ratio: 3840 / 1912; /* mesma proporção da imagem hero-bg-4k.jpg: sem corte */
  }
}

.hero-fullwidth__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  z-index: 1;
}

.hero-fullwidth__overlay {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

/* Bloco centralizado */
.hero-bloco-central {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  line-height: 1.1;
  text-shadow: 0 3px 0 #FFFFFF, 0 6px 16px rgba(255, 255, 255, 0.95), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.hero-faixa-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.hero-faixa-slogan {
  display: inline-block;
  background: linear-gradient(90deg, #65A30D 0%, #4D7C0F 100%);
  color: #FFFFFF;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  padding: 8px 30px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(40, 80, 10, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hero-faixa-simbolo {
  color: #E11D48;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.hero-subtitulo {
  font-family: var(--fonte);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 700;
  color: #1E293B;
  max-width: 580px;
  line-height: 1.45;
  margin: 0 auto 18px;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.8);
}

.hero-acoes {
  margin-top: 2px;
}

/* Tamanhos proporcionais à largura do palco (cqw): mesma composição em
   qualquer resolução ou zoom. Calibrados pela tela de 1280px do design. */
@media (min-width: 900px) {
  .hero-fullwidth__overlay { padding: 1.4cqw 2cqw 17.4cqw; }
  .hero-titulo { font-size: 5cqw; margin-bottom: 0.2cqw; }
  .hero-faixa-wrap { margin-bottom: 0.4cqw; }
  .hero-faixa-slogan { font-size: 2.1cqw; padding: 0.55cqw 2.4cqw; }
  .hero-faixa-simbolo { font-size: 1.7cqw; margin-top: 0.1cqw; }
  .hero-subtitulo { font-size: 1.5cqw; max-width: 46cqw; margin-bottom: 0.9cqw; }
  .hero-fullwidth__stage .btn-vamos-brincar { font-size: 1.8cqw; padding: 0.75cqw 2.4cqw; }
  .hero-fullwidth__stage .btn-vamos-brincar__coracao { font-size: 2cqw; }
}

.hero-manifesto-wrap {
  margin-top: -36px;
  margin-bottom: var(--sp-6);
  position: relative;
  z-index: 30;
}

.hero-manifesto-card {
  background: var(--branco);
  border: 3px solid var(--borda);
  border-radius: var(--r-g);
  padding: var(--sp-5);
  box-shadow: var(--sombra-card);
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 800px) {
  .hero-manifesto-card {
    grid-template-columns: 1fr auto;
    padding: var(--sp-5) var(--sp-6);
  }
}

/* ==========================================================================
   COMPONENTES DA FICHA E DAS PÁGINAS DE LEITURA
   (regras que o novo design não trouxe; portadas da v0.4 com os tokens novos)
   ========================================================================== */
.secao__mais { margin-top: var(--sp-4); }
.acervo__em-breve { color: var(--texto2); font-size: var(--fs-small); margin-top: var(--sp-5); }
@media (max-width: 599px) { .vazio { flex-direction: column; align-items: flex-start; } }

/* Listas simples e blocos */
.lista { padding-left: 20px; }
.lista li { margin: 6px 0; }
.lista li::marker { color: var(--m, var(--texto2)); }
.bloco p:last-child, .bloco ul:last-child, .bloco dl:last-child { margin-bottom: 0; }
.bloco h3, .leitura h3 { margin-top: 1.25em; }
.bloco .ribbon + h3, .bloco .ribbon + p, .bloco .ribbon + ul, .bloco .ribbon + ol { margin-top: 0; }
.bloco__sub { color: var(--texto2); }
.bloco__nota { font-size: var(--fs-chip); color: var(--texto2); border-left: 3px solid var(--m, var(--borda)); padding-left: var(--sp-3); max-width: var(--medida); }
.bloco .chip, .ficha__chips .chip { white-space: normal; }
.bloco .chip--campo, .bloco .chip--desplugada { background: var(--branco); border: 1.5px solid var(--e); }
.bloco--seguranca .fala { margin-top: var(--sp-4); }
.bloco--casa .frase::before { content: "“ "; color: var(--rosa-m); }
.bloco--casa .frase::after { content: " ”"; color: var(--rosa-m); }
.bloco video { display: block; width: 100%; border-radius: var(--r-s); background: #000; }
.bloco details { margin-top: var(--sp-3); }

/* Cabeçalho e resumo da ficha */
.ficha__chips { margin-top: var(--sp-2); }
.ficha__resumo { margin-top: 18px; }
.resumo__grade dd { line-height: var(--lh-compacto); }
.resumo__materiais .lista-ico { margin-top: 6px; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.acoes--topo { margin-top: var(--sp-4); }
.pag-ficha { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .pag-ficha { padding-bottom: 0; } .acoes--fixa { display: none; } }
.aviso-video { color: var(--texto2); font-size: var(--fs-small); border: 2px dashed var(--borda); border-radius: var(--r-s); padding: var(--sp-2) var(--sp-3); display: inline-block; margin-top: var(--sp-4); }
.idade-indicada { background: var(--amarelo-c); color: var(--amarelo-e); border-left: 8px solid var(--amarelo-m); border-radius: var(--r-s); padding: var(--sp-3) var(--sp-4); max-width: var(--medida); }

/* Letra da cantiga */
.letra { background: var(--branco); border: 2px solid var(--m); border-radius: var(--r-m); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); max-width: 40ch; }
.letra h3 { margin: 0 0 0.3em; color: var(--e); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em; }
.letra__versos { margin: 0; font-family: var(--fonte-titulo); font-weight: 500; font-size: var(--fs-lead); line-height: 1.5; }

/* Objetivos da BNCC */
.objetivos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.objetivo { border-left: 6px solid var(--m, var(--borda)); background: var(--branco); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 10px 14px; box-shadow: var(--sombra-suave); }
.objetivo code { font-weight: 700; font-size: 1rem; color: var(--e); background: var(--c); padding: 2px 8px; border-radius: 6px; }
.objetivo p { margin: 6px 0 4px; }
.objetivo small { color: var(--texto2); }
.referencias { padding-left: 20px; font-size: var(--fs-small); }
.referencias li { margin: 6px 0; }

/* Conceitos de tecnologia desplugada */
.conceitos { display: grid; gap: 10px; margin: 0; }
.conceito { background: var(--branco); border-left: 6px solid var(--roxo-m); border-radius: 0 var(--r-m) var(--r-m) 0; padding: var(--sp-3) var(--sp-4); box-shadow: var(--sombra-suave); }
.conceito dt { font-weight: 700; color: var(--roxo-e); font-family: var(--fonte-titulo); }
.conceito dd { margin: 4px 0 0; }

/* Páginas de leitura (sobre, por que brincar, tela e brincar, desplugada) */
.leitura { max-width: calc(var(--medida) + 2 * var(--sp-4)); padding-top: var(--sp-5); }
.leitura h2:not(.ribbon) { color: var(--azul-e); margin-top: 1.5em; }
.leitura h2.ribbon { color: var(--txt-m, #fff); }
.leitura .bloco { max-width: none; }
.leitura .fala { margin-bottom: var(--sp-4); }
.sumario { background: var(--azul-c); border-radius: var(--r-s); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-small); margin: var(--sp-4) 0; line-height: 1.7; }
.na-pratica { background: var(--verde-c); border-radius: var(--r-s); padding: 8px 12px; }
.mascotes-strip { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-4); }
.mascote-mini { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 140px; text-align: center; font-size: var(--fs-small); color: var(--texto2); }
.mascote-mini img { width: 90px; height: auto; }
.mascote-mini strong { color: var(--e, var(--texto)); }
.impressao-rodape { display: none; }