/* Medidas copiadas do site WordPress (Elementor) em 24/10/2026: cabeçalho #7a7a7a 124px, cartões 262x435 com sombra,
   títulos Poppins 800 em #54595f, rodapé Poppins 800 32px #7a7a7a. */
/* as mesmas duas fontes do site antigo (Elementor "fonte personalizada"): a regular e a extra negrito registrada como
   bold; todo título (600 ou 800) cai na extra negrito, como lá */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2025/01/poppins-regular-webfont.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/uploads/2025/01/poppins-extrabold-webfont.woff2) format("woff2"); }
:root {
  --cinza: #7a7a7a;
  --texto: #54595f;
  --corpo: #333;
  --link: #cc3366;
  --borda-busca: #e1e5eb;
  --sombra: 0 0 10px 0 rgba(0, 0, 0, .5);
  --largura: 1140px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--corpo);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 10px; top: 10px; z-index: 100; background: #fff; padding: 8px 12px; }

/* ---------- cabeçalho ---------- */
.topo { background: var(--cinza); padding: 0 10px; }
.topo-dentro {
  max-width: var(--largura); margin: 0 auto; min-height: 124px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
}
.abrir-menu {
  justify-self: start; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #fff; font: 600 22px/1.2 Poppins, sans-serif;
}
.abrir-menu svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.logo { justify-self: center; }
.logo img { width: 210px; height: 60px; }
.busca { justify-self: end; position: relative; width: 330px; max-width: 100%; margin: 15px 0; }
.busca input {
  width: 100%; height: 54px; padding: 10px 15px 10px 8px;
  border: 1px solid var(--borda-busca); border-radius: 20px; background: #fff; color: #000;
  font: 400 18px Poppins, sans-serif; outline: none; -webkit-appearance: none; appearance: none;
}
.busca input::placeholder { color: #000; opacity: 1; }
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca input:focus { border-color: #b9bec6; }
.busca-resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  max-height: 70vh; overflow: auto; padding: 6px 0;
}
.busca-resultados a { display: flex; align-items: center; gap: 12px; padding: 6px 14px; color: var(--texto); font: 600 15px Poppins, sans-serif; }
.busca-resultados a:hover, .busca-resultados a.ativo { background: #f2f3f5; }
.busca-resultados img { width: 36px; height: 48px; object-fit: cover; border-radius: 6px; }
.busca-resultados .vazio { padding: 10px 14px; color: #777; font: 400 15px Poppins, sans-serif; }
.busca-resultados .todos { display: block; text-align: center; color: var(--link); font-weight: 600; border-top: 1px solid #eee; margin-top: 4px; padding-top: 10px; }

/* ---------- menu lateral "Mais Categorias" ---------- */
.menu-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .8); z-index: 40; }
.menu {
  position: fixed; top: 0; left: 0; bottom: 0; width: 324px; max-width: 88vw; z-index: 50;
  background: #fff; overflow-y: auto; padding: 14px 10px 30px;
}
.menu ul { list-style: none; margin: 34px 0 0; padding: 0; }
.menu li a { display: block; padding: 4px 0; color: var(--cinza); font: 600 17px/1.45 Poppins, sans-serif; }
.menu li a:hover { color: var(--texto); }
.fechar-menu { position: absolute; top: 14px; right: 14px; background: none; border: 0; padding: 4px; cursor: pointer; }
.fechar-menu svg { width: 20px; height: 20px; fill: #000; }
body.menu-aberto { overflow: hidden; }

/* ---------- listas de cartões (início e todas as categorias) ---------- */
.lista { max-width: var(--largura); margin: 0 auto; padding: 60px 0 20px; }
.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.cartao {
  display: flex; flex-direction: column; align-items: center;
  border-radius: 20px; box-shadow: var(--sombra); padding: 10px 20px; min-height: 435px; background: #fff;
}
.cartao-capa { display: block; margin: 20px 0; }
/* faixa de destaque sobre a capa (categoria Aniversário: "Personalizado com a foto da criança") */
.cartao.com-faixa { position: relative; }
.faixa {
  position: absolute; top: 22px; left: -8px; right: -8px; z-index: 2;
  background: #cc3366; color: #fff; text-align: center; padding: 8px 10px;
  font: 700 15px/1.25 Poppins, sans-serif; border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.chamada { text-align: center; color: var(--texto); font-size: 18px; max-width: 760px; margin: -20px auto 30px; padding: 0 20px; }
.cartao-img { width: 202px; height: 270px; object-fit: cover; border-radius: 20px; }
.cartao-nome { margin: 0; padding: 10px 0; text-align: center; font: 800 25px/1.5 Poppins, sans-serif; }
.cartao-nome a { color: var(--texto); }
.ver-todas { text-align: center; margin: 60px 0 40px; font: 800 32px/1 Poppins, sans-serif; }
.ver-todas a { color: var(--cinza); }
.lista .titulo { margin-top: 0; }
.resultado-busca { text-align: center; color: var(--texto); font: 600 20px Poppins, sans-serif; margin: 0 0 30px; }

/* ---------- página da categoria ---------- */
.titulo { text-align: center; color: var(--texto); font: 800 60px/1.2 Poppins, sans-serif; margin: 50px 10px 40px; }
.galeria { max-width: 1100px; margin: 0 auto 50px; padding: 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.desenho { display: block; }
.desenho img { width: 100%; height: auto; }
/* Etapa 3 (painel): h1 "Desenhos do X para colorir", texto curto embaixo dele e legenda discreta sob cada desenho */
.titulo.longo { font-size: 46px; margin-bottom: 24px; }
.texto-categoria { text-align: center; color: var(--texto); font-size: 17px; line-height: 1.6; max-width: 780px; margin: 0 auto 36px; padding: 0 20px; }
.texto-categoria.texto-depois { margin: 36px auto 0; }
.desenho .legenda { display: block; margin-top: 6px; text-align: center; color: var(--cinza); font-size: 13px; line-height: 1.35; }

/* ---------- arquivos do WordPress (/colorir/, /blog/ ...) ---------- */
.arquivo main { max-width: var(--largura); margin: 0 auto; padding: 20px; }
.arquivo-titulo { color: var(--corpo); font-size: 28px; font-weight: 500; margin: 10px 0; }
.post { margin-bottom: 30px; }
.entry-title { font-size: 18px; margin: 0 0 6px; font-weight: 500; }
.post img { max-width: 600px; width: 100%; }
.descricao { font-size: 12px; margin: 0 0 10px; }
.paginas { display: flex; gap: 20px; margin: 20px 0; }

/* ---------- rodapé ---------- */
.rodape { text-align: center; padding: 10px 10px 20px; }
.rodape h2 { margin: 0; color: var(--cinza); font: 800 32px/1 Poppins, sans-serif; }
.rodape p { margin: 8px 0 0; font-size: 14px; } .rodape a { color: var(--cinza); }
.texto-pagina { max-width: 780px; margin: 0 auto; padding: 0 20px 30px; line-height: 1.6; color: var(--texto); }
.texto-pagina h2 { font-size: 20px; margin: 26px 0 6px; color: var(--corpo); }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .lista { padding: 40px 20px 20px; }
  .grade { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- celular ---------- */
/* medidas do site antigo num celular de 390px: cabeçalho 299 de altura, ícone 30, logo 210x60, busca 320x54,
   cartão 350 de largura com imagem 290x387 */
@media (max-width: 767px) {
  .topo { padding: 20px 20px 35px; }
  .topo-dentro { min-height: 0; grid-template-columns: 1fr; justify-items: start; gap: 0; }
  .abrir-menu { flex-direction: column; align-items: flex-start; gap: 11px; font-size: 22px; }
  .abrir-menu svg { width: 30px; height: 30px; }
  .logo { justify-self: center; margin-top: 23px; }
  .busca { justify-self: center; width: 320px; margin: 35px 0 0; }
  .lista { padding: 20px; }
  .grade { grid-template-columns: 1fr; gap: 20px; }
  .cartao { min-height: 0; padding: 10px 30px; }
  .cartao-capa { margin: 39px 0 20px; }
  .cartao-img { width: 290px; height: 387px; }
  .titulo, .titulo.longo { font-size: 26px; margin: 20px 10px 24px; }
  .texto-categoria { font-size: 15px; margin-bottom: 24px; padding: 0 16px; }
  .texto-categoria.texto-depois { margin: 24px auto 0; }
  .desenho .legenda { font-size: 12px; }
  /* no site antigo eram 4 por linha, minúsculos; 2 por linha dá para ver o desenho */
  .galeria { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 16px; }
  .ver-todas { font-size: 24px; margin: 40px 0 30px; }
  .rodape h2 { font-size: 26px; line-height: 1.1; }
}