/* componentes.css — Componentes reutilizáveis com prefixo dc- */

body.dc-pagina {
  font-family: var(--dc-fonte-base);
  background: var(--dc-fundo);
  color: var(--dc-texto);
}

.dc-conteudo-principal { min-height: 60vh; }

/* ====================== Cabeçalho / Rodapé ====================== */
.dc-cabecalho {
  background: var(--dc-branco);
  box-shadow: var(--dc-sombra-suave);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.dc-logo {
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--dc-azul);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.dc-logo .bi { color: var(--dc-coral); }
.dc-logo span.dc-logo-2 { color: var(--dc-coral); }

/* Logo do topo: ícone redondo + nome */
.dc-logo-topo { gap: .5rem; }
.dc-logo-icone { height: 46px; width: 46px; border-radius: 50%; display: inline-block; vertical-align: middle; }
/* Logo maior no desktop (busca foi para a linha de cima, sobrou espaço) */
@media (min-width: 1200px) {
  .dc-logo-topo { font-size: 1.9rem; }
  .dc-logo-topo .dc-logo-icone { height: 68px; width: 68px; }
}
/* Itens do menu do topo não quebram em duas linhas */
.navbar .nav-link { white-space: nowrap; }
/* Cabeçalho em duas faixas: topo (logo + busca) e menu abaixo, menor */
.dc-cabecalho .navbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.dc-faixa-menu { border-top: 1px solid #cde9d3; background: #e4f6e9; }
.dc-faixa-menu .navbar-nav { padding: .55rem 0; }
.dc-faixa-menu .nav-link { font-size: .95rem; padding: .5rem .7rem; color: var(--dc-texto); border-radius: 8px; line-height: 1.2; }
.dc-faixa-menu .nav-link:hover, .dc-faixa-menu .nav-link:focus { background: #cfeed8; color: #14562e; }
.dc-faixa-menu .nav-link .bi { color: #1b8a4b; }
/* Posts do blog: usam a largura toda do container (sem a trava de 70ch) */
body[data-secao="blog"] .dc-texto-seo { max-width: none; }
/* Links de categorias populares na home (estáticos, rastreáveis pelo Google) */
.dc-home-populares { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dc-home-populares h2 { width: 100%; margin-bottom: .25rem; color: var(--dc-texto-suave); }
/* Brincadeiras */
body[data-secao="brincadeiras"] .dc-texto-seo { max-width: none; }
/* Apoio às Famílias (inclusão) */
body[data-secao="inclusao"] .dc-texto-seo { max-width: none; }
/* Cartões do hub de Apoio às Famílias */
.dc-inclusao-card { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; height: 100%; text-decoration: none; color: var(--dc-texto); background: #fff; border: 1px solid var(--dc-borda); border-radius: 16px; padding: 1.15rem 1.2rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dc-inclusao-card:hover, .dc-inclusao-card:focus { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(27,138,75,.15); border-color: #bfe3cb; }
.dc-inclusao-icone { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #e4f6e9; border-radius: 50%; }
.dc-inclusao-icone .bi { color: #1b8a4b; font-size: 1.45rem; }
.dc-inclusao-nome { font-weight: 700; font-size: 1.05rem; color: var(--dc-texto); }
.dc-inclusao-card:hover .dc-inclusao-nome { color: #1b8a4b; }
.dc-inclusao-desc { font-size: .9rem; color: var(--dc-texto-suave); line-height: 1.5; }
/* Esporte e Música: texto ocupa todo o container (alinhado ao cabeçalho) */
body[data-secao="esporte"] .dc-texto-seo { max-width: none; }
body[data-secao="musica"] .dc-texto-seo { max-width: none; }
/* Cartões da vitrine de Esporte */
.dc-esporte-card { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: var(--dc-texto); background: #fff; border: 1px solid var(--dc-borda); border-radius: 16px; padding: 1.1rem .6rem; height: 100%; text-align: center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dc-esporte-card:hover, .dc-esporte-card:focus { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(51,103,214,.15); border-color: #c9d6f5; }
.dc-esporte-emoji { font-size: 2.3rem; line-height: 1; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; background: #eef3ff; border-radius: 50%; }
.dc-esporte-emoji .bi { color: var(--dc-azul); }
.dc-esporte-nome { font-weight: 700; font-size: .98rem; color: var(--dc-texto); }
.dc-esporte-card:hover .dc-esporte-nome { color: var(--dc-azul); }
.dc-aviso { display: flex; gap: .6rem; align-items: flex-start; background: #fff8e1; border: 1px solid #ffe08a; border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.25rem; font-size: .92rem; color: #6b5900; }
.dc-aviso .bi { font-size: 1.1rem; flex: 0 0 auto; margin-top: 1px; }
.dc-direitos li { margin-bottom: .5rem; line-height: 1.6; }
.dc-beneficios li { margin-bottom: .8rem; line-height: 1.6; }
.dc-onde { display: block; font-size: .9rem; color: var(--dc-texto-suave); margin-top: .15rem; }
.dc-onde .bi { color: #ec407a; }
.dc-btn-sm { min-height: 34px; padding: .3rem .7rem; font-size: .9rem; }
.dc-brinc-acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.dc-brinc-info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem; background: #f6f4fb; border: 1px solid var(--dc-borda);
  border-radius: 14px; padding: 1rem; margin: 0 0 1.25rem;
}
.dc-brinc-info-item { display: flex; align-items: center; gap: .55rem; }
.dc-brinc-info-item .bi { font-size: 1.2rem; color: #8357c5; flex: 0 0 auto; }
.dc-brinc-info-rot { display: block; font-size: .72rem; color: var(--dc-texto-suave); text-transform: uppercase; letter-spacing: .3px; }
.dc-brinc-info-val { display: block; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.dc-brincadeira ol, .dc-brincadeira ul { line-height: 1.6; }
.dc-brinc-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dc-select { border: 1px solid var(--dc-borda); border-radius: 8px; padding: .4rem .6rem; font-size: .9rem; background: #fff; color: var(--dc-texto); }
.dc-brinc-busca .dc-campo-busca { max-width: 460px; }
.dc-brinc-dodia-box { display: flex; flex-direction: column; gap: .15rem; background: linear-gradient(120deg,#efe7fb,#e7eeff); border-radius: 14px; padding: .8rem 1rem; }
.dc-brinc-dodia-sel { font-weight: 700; color: #8357c5; font-size: .85rem; }
.dc-brinc-dodia-box a { font-size: 1.05rem; color: var(--dc-azul-escuro); text-decoration: none; }
.dc-brinc-card h2 a { text-decoration: none; color: var(--dc-texto); }
.dc-brinc-card h2 a:hover { color: var(--dc-azul); }
/* Blog: busca, filtros e favoritos no índice */
.dc-blog-busca .dc-campo-busca { max-width: 380px; }
.dc-blog-chips .dc-chip { border: 0; cursor: pointer; background: #eef2fb; color: var(--dc-azul-escuro); }
.dc-blog-chips .dc-chip.ativo { background: var(--dc-azul); color: #fff; }
.dc-blog-chips .dc-chip-fav.ativo { background: var(--dc-coral); color: #fff; }
.dc-post-card { position: relative; }
.dc-blog-fav {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--dc-coral);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--dc-sombra-suave);
}
.dc-blog-fav.ativo { background: var(--dc-coral); color: #fff; }
.dc-blog-fav:hover { color: var(--dc-coral); box-shadow: var(--dc-sombra-card); }
.dc-blog-fav.ativo:hover { color: #fff; }
/* Cards do blog com visual mais bonito */
#dc-blog-grade .dc-post-card { background: #fff; border: 1px solid var(--dc-borda); border-radius: 16px; padding: 1.2rem 1.25rem; box-shadow: 0 1px 3px rgba(20,30,60,.04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
#dc-blog-grade .dc-post-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(51,103,214,.13); border-color: #c9d6f5; }
#dc-blog-grade .dc-post-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem !important; }
#dc-blog-grade .dc-post-card .dc-chip { display: inline-block; padding: .18rem .65rem; border-radius: 20px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; }
#dc-blog-grade .dc-post-card h2 { margin: .1rem 0 .45rem; line-height: 1.3; }
#dc-blog-grade .dc-post-card h2 a { text-decoration: none; color: var(--dc-texto); font-weight: 700; }
#dc-blog-grade .dc-post-card h2 a:hover, #dc-blog-grade .dc-post-card h2 a:focus { color: var(--dc-azul); }
#dc-blog-grade .dc-post-card .text-secondary { line-height: 1.55; font-size: .93rem; }
.dc-logo-texto { line-height: 1; }
.dc-btn-busca { white-space: nowrap; flex: 0 0 auto; }

/* Galeria estática de desenhos (páginas de categoria) */
.dc-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.dc-galeria-item { background: #fff; border: 1px solid var(--dc-borda); border-radius: 10px; overflow: hidden; }
.dc-galeria-item a { text-decoration: none; color: var(--dc-texto); display: block; }
.dc-galeria-item img { width: 100%; aspect-ratio: 3/4; object-fit: contain; background: #fff; display: block; }
.dc-galeria-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.dc-galeria-titulo { display: block; font-size: .8rem; padding: .4rem .5rem; text-align: center; color: var(--dc-texto-suave); }
.dc-conteudo-intro { max-width: 70ch; margin-bottom: 1rem; line-height: 1.6; }
.dc-faq-item { margin-bottom: .75rem; }
.dc-faq-item h3 { color: var(--dc-azul); margin-bottom: .15rem; }
.dc-logo-wordmark { font-weight: 800; line-height: 1; white-space: nowrap; }
.dc-logo-wordmark .dc-logo-e { color: var(--dc-texto); font-size: .82em; }
/* Logo completo grande (home) */
.dc-logo-hero { max-width: 420px; width: 62%; min-width: 240px; height: auto; display: block; margin: 0 0 1rem; }
/* Logo completo (rodapé) */
.dc-logo-rodape { max-width: 240px; width: 80%; height: auto; display: block; }

.dc-rodape {
  background: var(--dc-azul-escuro);
  color: #eaf0ff;
  margin-top: 3rem;
}
.dc-rodape a { color: #cfe0ff; text-decoration: none; }
.dc-rodape a:hover { color: #ffffff; text-decoration: underline; }

/* ====================== Botões ====================== */
.dc-btn-primario,
.dc-btn-secundario,
.dc-btn-sucesso,
.dc-btn-perigo,
.dc-btn-neutro,
.dc-btn-icone,
.dc-btn-flutuante {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 0;
  border-radius: var(--dc-raio-pequeno);
  font-weight: 600;
  cursor: pointer;
  padding: .5rem 1rem;
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.dc-btn-primario { background: var(--dc-azul); color: #fff; }
.dc-btn-primario:hover { background: var(--dc-azul-escuro); color: #fff; }
.dc-btn-secundario { background: #eef2fb; color: var(--dc-azul-escuro); }
.dc-btn-secundario:hover { background: #e2e9f7; color: var(--dc-azul-escuro); }
.dc-btn-sucesso { background: var(--dc-verde); color: #fff; }
.dc-btn-sucesso:hover { background: #369c63; color: #fff; }
.dc-btn-perigo { background: var(--dc-coral); color: #fff; }
.dc-btn-perigo:hover { background: #e85c3c; color: #fff; }
.dc-btn-neutro { background: #fff; color: var(--dc-texto); border: 1px solid var(--dc-borda); }
.dc-btn-neutro:hover { background: #f2f5fa; }
.dc-btn-icone { background: transparent; color: var(--dc-texto); padding: .4rem; }
.dc-btn-icone:hover { background: #eef2fb; }
.dc-btn-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--dc-coral); color: #fff; box-shadow: var(--dc-sombra-card);
}
.dc-btn-primario:active,
.dc-btn-secundario:active,
.dc-btn-sucesso:active,
.dc-btn-perigo:active { transform: translateY(1px); }
[disabled].dc-btn-primario, .dc-btn-primario:disabled,
[disabled].dc-btn-secundario, .dc-btn-secundario:disabled { opacity: .55; cursor: not-allowed; }
.dc-btn-carregando { pointer-events: none; opacity: .8; }
.dc-btn-carregando::after {
  content: ""; width: 1em; height: 1em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; display: inline-block;
  animation: dc-girar .6s linear infinite; margin-left: .3rem;
}
@keyframes dc-girar { to { transform: rotate(360deg); } }

/* ====================== Card de desenho ====================== */
.dc-card-desenho {
  border: 1px solid var(--dc-borda);
  border-radius: var(--dc-raio-medio);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--dc-sombra-suave);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dc-card-desenho:hover { transform: translateY(-4px); box-shadow: var(--dc-sombra-card); }
.dc-card-imagem {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dc-card-imagem img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  transition: opacity .3s ease;
}
.dc-card-imagem img.dc-img-carregando { opacity: 0; }
.dc-card-favorito {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,.92);
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; color: var(--dc-coral); font-size: 1.15rem; cursor: pointer;
  box-shadow: var(--dc-sombra-suave);
}
.dc-card-favorito.ativo { color: #fff; background: var(--dc-coral); }
.dc-card-caderno {
  position: absolute; top: 54px; right: 8px;
  background: rgba(255,255,255,.92);
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; color: var(--dc-azul); font-size: 1.05rem; cursor: pointer;
  box-shadow: var(--dc-sombra-suave);
}
.dc-card-caderno.ativo { color: #fff; background: var(--dc-azul); }
.dc-card-categoria {
  display: inline-block; font-size: .72rem; font-weight: 700;
  color: var(--dc-azul); text-transform: uppercase; letter-spacing: .02em;
}
.dc-card-titulo {
  font-size: .95rem; font-weight: 700; margin: .15rem 0 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dc-card-desenho .card-footer { background: #fff; border-top: 1px solid var(--dc-borda); display: flex; gap: .4rem; }
.dc-card-desenho .card-footer .dc-btn-primario,
.dc-card-desenho .card-footer .dc-btn-secundario { flex: 1; padding: .45rem .5rem; font-size: .85rem; }

/* ====================== Card de categoria ====================== */
.dc-card-categoria-item {
  border: 1px solid var(--dc-borda);
  border-radius: var(--dc-raio-medio);
  background: #fff; overflow: hidden; height: 100%;
  box-shadow: var(--dc-sombra-suave);
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none; color: inherit; display: block;
}
.dc-card-categoria-item:hover { transform: translateY(-4px); box-shadow: var(--dc-sombra-card); color: inherit; }
.dc-card-categoria-capa {
  aspect-ratio: 4 / 3; background: #eef2fb; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dc-card-categoria-capa img { width: 100%; height: 100%; object-fit: contain; }
.dc-card-categoria-icone {
  position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem;
}
.dc-card-categoria-corpo { padding: .75rem .9rem; }
.dc-card-categoria-nome { font-weight: 800; font-size: 1rem; margin: 0; }
.dc-card-categoria-qtd { color: var(--dc-texto-suave); font-size: .82rem; }

/* ====================== Chips / badges ====================== */
.dc-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #eef2fb; color: var(--dc-azul-escuro);
  border-radius: 999px; padding: .35rem .8rem; font-weight: 600; font-size: .85rem;
  text-decoration: none; border: 0; cursor: pointer;
}
.dc-chip:hover { background: #e2e9f7; color: var(--dc-azul-escuro); }
.dc-chip.ativo { background: var(--dc-azul); color: #fff; }

/* ====================== Campos ====================== */
.dc-campo { margin-bottom: 1rem; }
.dc-campo label { font-weight: 600; margin-bottom: .25rem; display: block; }
.dc-campo .dc-ajuda { font-size: .8rem; color: var(--dc-texto-suave); }
.dc-campo .dc-erro { font-size: .82rem; color: var(--dc-coral); display: none; }
.dc-campo.invalido .dc-erro { display: block; }
.dc-campo-busca-wrap { position: relative; }
.dc-campo-busca-wrap .bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dc-texto-suave); }
.dc-campo-busca {
  border: 1px solid var(--dc-borda); border-radius: 999px; padding: .7rem 1rem .7rem 2.6rem;
  width: 100%; font-size: 1rem; background: #fff;
}
.dc-campo-busca:focus { outline: 3px solid rgba(51,103,214,.25); border-color: var(--dc-azul); }
/* Busca do topo: caixa e botão mais baixos e menos arredondados */
.dc-form-busca-topo .dc-campo-busca { padding: .3rem .75rem .3rem 2.1rem; font-size: .9rem; border-radius: 8px; }
.dc-form-busca-topo .dc-campo-busca-wrap .bi-search { left: 10px; }
.dc-form-busca-topo .dc-btn-busca { min-height: 34px; min-width: 34px; height: 34px; padding: .2rem .6rem; border-radius: 8px; }

/* ====================== Sugestões de busca ====================== */
.dc-sugestoes {
  position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--dc-borda); border-radius: var(--dc-raio-medio);
  box-shadow: var(--dc-sombra-card); overflow: hidden; display: none;
}
.dc-sugestoes.aberto { display: block; }
.dc-sugestao {
  display: flex; gap: .6rem; align-items: center; padding: .5rem .8rem; cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
}
.dc-sugestao:hover, .dc-sugestao.focado { background: #eef2fb; }
.dc-sugestao img { width: 38px; height: 38px; object-fit: contain; }

/* ====================== Breadcrumb / cabeçalho página ====================== */
.dc-breadcrumb { padding: .75rem 0; }
.dc-breadcrumb ol { --bs-breadcrumb-divider: '›'; margin: 0; }
.dc-cabecalho-pagina h1 { font-weight: 800; }
.dc-cabecalho-pagina .dc-subtitulo { color: var(--dc-texto-suave); }

/* ====================== Skeleton ====================== */
.dc-skeleton {
  border-radius: var(--dc-raio-medio); overflow: hidden;
  background: #fff; border: 1px solid var(--dc-borda);
}
.dc-skeleton-bloco {
  background: linear-gradient(90deg,#eef2fb 25%,#e2e9f7 37%,#eef2fb 63%);
  background-size: 400% 100%; animation: dc-brilho 1.2s ease infinite;
}
.dc-skeleton .dc-skeleton-img { aspect-ratio: 1/1; }
.dc-skeleton .dc-skeleton-linha { height: 12px; border-radius: 6px; margin: .5rem .75rem; }
@keyframes dc-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ====================== Estados ====================== */
.dc-estado {
  text-align: center; padding: 3rem 1rem; color: var(--dc-texto-suave);
}
.dc-estado .bi { font-size: 3rem; color: var(--dc-azul); display: block; margin-bottom: .5rem; }
.dc-estado.erro .bi { color: var(--dc-coral); }

/* ====================== Toast ====================== */
.dc-toast-area { position: fixed; z-index: 1080; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: .5rem; }
.dc-toast {
  background: var(--dc-texto); color: #fff; padding: .7rem 1rem; border-radius: var(--dc-raio-pequeno);
  box-shadow: var(--dc-sombra-card); display: flex; gap: .5rem; align-items: center; font-weight: 600;
  animation: dc-subir .2s ease;
}
.dc-toast.sucesso { background: var(--dc-verde); }
.dc-toast.erro { background: var(--dc-coral); }
@keyframes dc-subir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ====================== Banner ====================== */
.dc-banner {
  border-radius: var(--dc-raio-grande);
  background: linear-gradient(120deg, #cfe0ff, #eaf1ff);
  color: var(--dc-texto); padding: 2.2rem 1.6rem; position: relative; overflow: hidden;
}
.dc-banner h1 { font-weight: 800; color: var(--dc-azul); }
.dc-banner .lead { color: var(--dc-texto-suave); }
.dc-banner .dc-banner-bolha { position: absolute; border-radius: 50%; opacity: .4; background: #b9d1ff; }
.dc-banner .b1 { width: 160px; height: 160px; right: -30px; top: -40px; }
.dc-banner .b2 { width: 90px; height: 90px; right: 120px; bottom: -30px; background: var(--dc-amarelo); opacity: .45; }
.dc-banner .position-relative { position: relative; z-index: 1; }
.dc-banner-criancas {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  height: 100%; width: auto; max-width: 48%;
  object-fit: contain; object-position: bottom right; pointer-events: none;
}
@media (min-width: 992px) { .dc-banner .position-relative { max-width: 58%; } }

/* ====================== Seção ====================== */
.dc-secao-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dc-secao-titulo h2 { font-weight: 800; font-size: 1.4rem; margin: 0; }
.dc-navegacao-letras { display: flex; flex-wrap: wrap; gap: .3rem; }
.dc-letra { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--dc-borda);
  background: #fff; font-weight: 700; color: var(--dc-azul); cursor: pointer; }
.dc-letra.ativo { background: var(--dc-azul); color: #fff; }
.dc-letra:disabled { opacity: .4; cursor: default; }

/* ====================== Manual "Como usar" ====================== */
.dc-manual {
  border: 2px solid var(--dc-amarelo); border-radius: var(--dc-raio-medio);
  background: linear-gradient(180deg, #fff6d6, #fff9e8);
  box-shadow: 0 2px 10px rgba(255,201,40,.25);
}
.dc-manual > summary {
  cursor: pointer; font-weight: 800; color: #7a5a00; list-style: none;
  display: flex; align-items: center; gap: .5rem;
}

/* Cabeçalho com ilustração (categorias, desenhos, atividades, favoritos) — igual ao Espaço do Professor */
.dc-pagina-hero { background: linear-gradient(120deg,#e7eeff,#f3e9ff); border-radius:16px; padding:1.1rem 1.4rem; margin-bottom:1.1rem; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.dc-pagina-hero-texto { flex:1 1 300px; min-width:0; margin:0; }
.dc-pagina-hero-texto h1 { margin-bottom:.35rem; font-weight:500; }
.dc-pagina-hero-img { flex:0 0 auto; width:200px; height:200px; object-fit:cover; border-radius:50%; margin-left:auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.2)); }
.dc-pagina-hero--banner .dc-pagina-hero-img { width:auto; height:auto; max-width:52%; border-radius:16px; }
@media (max-width:640px){ .dc-pagina-hero { justify-content:center; text-align:center; } .dc-pagina-hero-img { width:150px; height:150px; margin:0 auto; } .dc-pagina-hero--banner .dc-pagina-hero-img { max-width:100%; } }

/* Título do cabeçalho (páginas de listagem) — igual ao Espaço do Professor: ícone + texto */
.dc-pagina-hero-texto h1::before {
  font-family: "bootstrap-icons"; font-weight: normal; font-style: normal;
  margin-right: .45rem; vertical-align: -2px; color: inherit;
}
body[data-tela="tela-desenhos"]   .dc-pagina-hero-texto h1::before { content: "\f42b"; } /* imagens */
body[data-tela="tela-categorias"] .dc-pagina-hero-texto h1::before { content: "\f3fc"; } /* grade */
body[data-tela="tela-atividades"] .dc-pagina-hero-texto h1::before { content: "\f503"; } /* quebra-cabeça */
body[data-tela="tela-favoritos"]  .dc-pagina-hero-texto h1::before { content: "\f415"; } /* coração */
/* Fundo transparente do banner e texto no topo (páginas de listagem) */
body[data-tela="tela-desenhos"] .dc-pagina-hero,
body[data-tela="tela-categorias"] .dc-pagina-hero,
body[data-tela="tela-atividades"] .dc-pagina-hero,
body[data-tela="tela-favoritos"] .dc-pagina-hero { background: transparent; align-items: flex-start; }