/* Identidade Evinho: cores tiradas do mascote */
:root {
  --azul: #0a52e0;
  --azul-escuro: #0b2a7a;
  --noite: #071a4f;
  --verde: #7cd521;
  --verde-claro: #9bee37;
  --verde-escuro: #2f7a0c;
  --menta: #eaf6e3;
  --lavanda: #9ebae8;
  --vermelho: #d7263d;
  --contorno: #13204a;
  --texto: #13204a;
  --texto-suave: #4a5578;
  --fundo: #f4f9f0;
  --cartao: #ffffff;
  --raio: 22px;
  --cor: var(--azul); /* cor da categoria, trocada por página/cartão */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Baloo 2", "Trebuchet MS", sans-serif; margin: 0; line-height: 1.05; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

/* ---------- Barra do topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: #fff; border-bottom: 2.5px solid var(--contorno);
}
.topo-inner {
  max-width: 1120px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { width: 38px; }
.logo strong { font-family: "Baloo 2", sans-serif; font-size: 26px; font-weight: 800; color: var(--azul-escuro); line-height: 1; }
.logo small { display: block; font-size: 12px; font-weight: 800; color: var(--verde-escuro); letter-spacing: .06em; text-transform: uppercase; }
.menu { display: flex; gap: 6px; }
.menu a {
  text-decoration: none; font-weight: 800; font-size: 14px; color: var(--contorno);
  padding: 7px 13px; border-radius: 999px; border: 2px solid transparent;
}
.menu a:hover { border-color: var(--contorno); }
.menu a.destaque, .menu button.destaque { background: var(--verde); border-color: var(--contorno); box-shadow: 2px 2px 0 var(--contorno); }
.menu button.destaque { font-weight: 800; font-size: 14px; color: var(--contorno); padding: 7px 14px; border-radius: 999px; border: 2px solid var(--contorno); }
.menu .curto { display: none; }

/* ---------- Mascote ---------- */
.mascote { position: relative; isolation: isolate; animation: flutuar 3.6s ease-in-out infinite; }
.mascote > img { width: 100%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.3)); }
.gorro { position: absolute; width: 79.5%; left: 10.75%; top: -23.2%; overflow: visible; }
@keyframes flutuar { 50% { transform: translateY(-14px); } }
.balao {
  position: absolute; z-index: 3; top: 6%; left: -40%;
  background: #fff; color: var(--contorno);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; line-height: 1.1;
  border: 2.5px solid var(--contorno); border-radius: 18px; padding: 10px 14px;
  box-shadow: 4px 4px 0 var(--cor);
  transform: rotate(-6deg);
}
.balao::after {
  content: ""; position: absolute; right: -14px; bottom: 10px;
  border: 9px solid transparent; border-left: 14px solid var(--contorno);
}

/* ---------- Pílulas ---------- */
.chips-hero { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-hero {
  background: #fff; color: var(--contorno);
  border: 2.5px solid var(--contorno); box-shadow: 3px 3px 0 var(--verde);
  border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: 15px;
}
.chip-hero.cor { background: var(--cor); color: #fff; box-shadow: 3px 3px 0 #fff; }

.onda { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; width: 100%; }

/* ---------- Topo da página inicial (verde Evinho) ---------- */
.hero-home {
  position: relative; overflow: hidden;
  background-color: var(--verde);
  /* ponto de tricô (V) sobre o verde Evinho */
  background-image:
    radial-gradient(800px 420px at 72% 45%, rgba(255,255,255,.28), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='26'%3E%3Cg fill='%23ffffff' fill-opacity='.17'%3E%3Cellipse cx='9' cy='13' rx='5' ry='10.5' transform='rotate(-28 9 13)'/%3E%3Cellipse cx='23' cy='13' rx='5' ry='10.5' transform='rotate(28 23 13)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 32px 26px;
  padding: 22px 16px 82px;
}
.hero-home .hero-inner { --cor: var(--azul); }
.hero-inner {
  position: relative;
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 24px;
}
.hero-home h1 { font-size: clamp(42px, 5.2vw, 64px); font-weight: 800; color: var(--contorno); }
.hero-home h1 span { color: #fff; text-shadow: 3px 3px 0 var(--contorno), -1px -1px 0 var(--contorno), 1px -1px 0 var(--contorno), -1px 1px 0 var(--contorno); }
.hero-home p.sub { font-size: clamp(16px, 1.8vw, 19px); font-weight: 700; max-width: 32ch; margin: 8px 0 18px; line-height: 1.4; }
/* barra de busca fina */
.busca { position: relative; max-width: 420px; }
.busca svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--contorno); pointer-events: none; }
.busca input {
  width: 100%; padding: 10px 40px 10px 42px;
  border: 2px solid var(--contorno); border-radius: 999px; background: #fff; color: var(--contorno);
  font-size: 15px; font-weight: 700; box-shadow: 2px 2px 0 var(--contorno);
}
.busca input::placeholder { color: #7d86a3; font-weight: 600; }
.busca input:focus { outline: none; box-shadow: 2px 2px 0 var(--azul); }
.busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.busca .limpar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--menta); color: var(--contorno); font-size: 12px; font-weight: 800;
}
.hero-home .mascote-area {
  --mw: min(210px, 52vw);
  position: relative; display: grid; place-items: center;
  padding-top: calc(var(--mw) * 1.4528 * var(--acima, 0) + 30px);
}
.hero-home .mascote { width: var(--mw); }
.hero-home .mascote::before {
  content: ""; position: absolute; z-index: -2; width: 168%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 58%, rgba(255,255,255,.35) 59% 70%, transparent 71%);
  top: 52%; left: 50%; transform: translate(-50%, -50%);
}

/* Atalhos redondos de categoria */
.atalhos { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 6px 4px 12px; margin-bottom: 28px; }
.atalho {
  position: relative; flex: 0 0 86px; display: grid; justify-items: center; align-content: start; gap: 7px;
  text-decoration: none; color: var(--contorno); text-align: center;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
}
.atalho-foto.todas { display: grid; place-items: center; background: var(--verde); }
.atalho-foto.todas svg { width: 100%; height: 100%; padding: 18px; border-radius: 50%; background: #fff; border: 2.5px solid #fff; fill: var(--contorno); }

/* Painel com todas as categorias */
.painel-fundo { position: fixed; inset: 0; z-index: 62; background: rgba(7,26,79,.55); display: none; }
.painel-fundo.aberto { display: block; }
.painel {
  position: fixed; z-index: 63; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 32px); overflow: auto; display: none;
  background: #fff; border: 3px solid var(--contorno); border-radius: 24px; box-shadow: 8px 8px 0 var(--verde);
}
.painel.aberto { display: block; }
.painel-topo { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 2.5px solid var(--contorno); }
.painel-topo h2 { font-size: 26px; color: var(--azul-escuro); }
.painel-corpo { padding: 6px 18px 20px; }
.painel-corpo h3 { font-size: 18px; color: var(--azul-escuro); margin: 14px 0 10px; }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 10px; justify-items: center; }
.atalho-foto {
  width: 76px; height: 76px; border-radius: 50%; padding: 3px; background: var(--cor);
  box-shadow: 3px 3px 0 var(--contorno); transition: transform .15s;
}
.atalho-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid #fff; background: #eef0f3; }
@media (hover: hover) { .atalho:hover .atalho-foto { transform: translateY(-3px) rotate(-4deg); } }
.atalho-nome { font-weight: 800; font-size: 13px; line-height: 1.15; }
.atalho small {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: var(--cor); color: #fff; border: 2px solid #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; padding: 1px 7px; white-space: nowrap;
}

/* Como comprar */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passo {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2.5px solid var(--contorno); border-radius: 18px; padding: 14px 16px;
}
.passo .num {
  flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--verde); border: 2.5px solid var(--contorno);
  display: grid; place-items: center; font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 21px;
}
.passo strong { display: block; font-family: "Baloo 2", sans-serif; font-size: 20px; line-height: 1.1; color: var(--contorno); }
.passo div span { font-size: 14px; font-weight: 600; color: var(--texto-suave); }

/* Carrossel de destaques (página inicial) */
.carrossel { position: relative; }
.carrossel-trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border: 2.5px solid var(--contorno); border-radius: var(--raio); box-shadow: 6px 6px 0 var(--contorno);
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px; min-height: 280px;
  padding: 28px 76px; color: #fff; text-decoration: none;
  background: var(--hero-fundo, linear-gradient(160deg, var(--azul-escuro), var(--noite) 75%));
}
.slide-texto { display: grid; gap: 8px; justify-items: start; }
.slide-texto small {
  background: var(--cor); color: #fff; border: 2px solid #fff; border-radius: 999px;
  padding: 2px 11px; font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.slide-texto strong { font-family: "Baloo 2", sans-serif; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; }
.slide-texto .frase { color: #e6ecff; font-weight: 600; font-size: 17px; }
.slide-texto .btn { margin-top: 6px; }
.slide-fotos { position: relative; height: 230px; }
.slide-fotos img {
  position: absolute; width: 40%; aspect-ratio: 1; object-fit: cover; background: #eef0f3;
  border-radius: 22px; border: 3px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.slide-fotos img:nth-child(1) { left: 27%; top: 0; width: 46%; z-index: 2; transform: rotate(-3deg); }
.slide-fotos img:nth-child(2) { left: 0; top: 22%; transform: rotate(-9deg); }
.slide-fotos img:nth-child(3) { right: 0; top: 24%; transform: rotate(8deg); }
.carrossel-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--contorno); background: #fff;
  font-size: 22px; font-weight: 800; color: var(--contorno); display: grid; place-items: center;
  box-shadow: 2px 2px 0 var(--contorno);
}
.carrossel-seta.ant { left: 14px; }
.carrossel-seta.prox { right: 20px; }
.carrossel-pontos { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.carrossel-pontos button {
  width: 11px; height: 11px; padding: 0; border-radius: 999px;
  border: 2px solid var(--contorno); background: #fff; transition: width .2s, background .2s;
}
.carrossel-pontos button[aria-current="true"] { width: 30px; background: var(--verde); }

/* Top 10 (página inicial): carrossel, 5 cartões por vez no computador */
.top-caixa { position: relative; }
.grade.top5 {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 6px 14px; margin: 0 -6px;
}
.grade.top5::-webkit-scrollbar { display: none; }
.top5 .cartao { flex: 0 0 calc((100% - 4 * 18px) / 5); scroll-snap-align: start; }
.top-seta {
  position: absolute; top: 42%; z-index: 3; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid var(--contorno); background: #fff; box-shadow: 3px 3px 0 var(--contorno);
  font-size: 26px; font-weight: 800; line-height: 1; color: var(--contorno); display: grid; place-items: center;
  transition: opacity .2s, transform .15s;
}
.top-seta.ant { left: -20px; }
.top-seta.prox { right: -20px; }
.top-seta:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) { .top-seta:hover { transform: scale(1.08); background: var(--verde); } }
@media (max-width: 760px) { .top-seta { display: none; } }   /* no celular, desliza com o dedo */
.top5 .add { padding: 0; width: 36px; height: 36px; justify-content: center; }
.top5 .add span { display: none; }
.posicao {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde); border: 2.5px solid var(--contorno); box-shadow: 2px 2px 0 var(--contorno);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 17px; color: var(--contorno);
}
.top5 .cartao:first-child .posicao { background: #ffd23f; }       /* ouro */
.top5 .cartao:nth-child(2) .posicao { background: #e3e8f2; }      /* prata */
.top5 .cartao:nth-child(3) .posicao { background: #f0a868; }      /* bronze */
.hero-home .balao { left: -44%; top: 4%; }

/* ---------- Topo da categoria (azul-noite) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: var(--hero-fundo,
    radial-gradient(1200px 500px at 80% -10%, rgba(124,213,33,.18), transparent 60%),
    radial-gradient(900px 600px at 0% 120%, rgba(10,82,224,.55), transparent 60%),
    linear-gradient(160deg, var(--azul-escuro), var(--noite) 70%));
  padding: 14px 16px 64px;
}
.hero .hero-inner { z-index: 1; }

/* Enfeites do tema */
.decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.decor .p { position: absolute; height: auto; opacity: var(--opac); transform: rotate(var(--giro)); }
.decor .p.flutua { animation: p-flutua ease-in-out infinite alternate; }
.decor .p.sobe { animation: p-sobe linear infinite; }
@keyframes p-flutua {
  from { transform: translateY(0) rotate(var(--giro)); }
  to { transform: translateY(-22px) rotate(calc(var(--giro) * -1)); }
}
@keyframes p-sobe {
  0% { transform: translateY(60px) rotate(var(--giro)); opacity: 0; }
  15%, 80% { opacity: var(--opac); }
  100% { transform: translateY(-180px) rotate(calc(var(--giro) * -1)); opacity: 0; }
}
.lua {
  position: absolute; top: 30px; right: 6%; width: 150px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe08a 60%, #f5c451);
  box-shadow: 0 0 70px 24px rgba(255,214,110,.32);
}
.lua::before, .lua::after { content: ""; position: absolute; border-radius: 50%; background: rgba(214,160,40,.35); }
.lua::before { width: 26%; height: 26%; top: 22%; left: 54%; }
.lua::after { width: 16%; height: 16%; top: 60%; left: 28%; }
.lua[hidden], .neve[hidden] { display: none; }

/* Acessório do mascote, desenhado nas coordenadas da imagem (848 × 1232) */
.acessorio { position: absolute; left: 0; top: -34.09%; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.acessorio.atras { z-index: -1; }
.giro-helice { transform-box: fill-box; transform-origin: center; animation: helice .9s linear infinite; }
@keyframes helice { 50% { transform: scaleX(-1); } }
.neve, .neve::after {
  position: absolute; inset: -200px 0 0 0; pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 120px 90px, #fff 50%, transparent 51%),
    radial-gradient(4px 4px at 200px 160px, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 60px 200px, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 260px 40px, rgba(255,255,255,.8) 50%, transparent 51%);
  background-size: 300px 240px;
  opacity: .55;
  animation: nevar 14s linear infinite;
}
.neve::after { content: ""; inset: 0; background-size: 210px 190px; opacity: .6; animation-duration: 9s; }
.neve.parada, .neve.parada::after { animation: none; opacity: .3; }
@keyframes nevar { to { transform: translateY(240px); } }
/* Trilha: Voltar · Início › Grupo › Categoria */
.trilha {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-bottom: 12px; font-weight: 700; font-size: 14px; color: #dbe6ff;
}
.trilha a { color: #dbe6ff; text-decoration: none; }
.trilha a:hover { color: #fff; text-decoration: underline; }
.trilha span { opacity: .5; }
.trilha strong { color: var(--destaque, var(--verde)); }
.btn-voltar {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 7px 15px;
  border: 2px solid var(--contorno); border-radius: 999px; background: #fff; color: var(--contorno);
  font-weight: 800; font-size: 14px; box-shadow: 2px 2px 0 var(--contorno); transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) { .btn-voltar:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--contorno); } }
.hero h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; letter-spacing: -.01em; }
.hero h1 span { color: var(--destaque, var(--verde)); display: block; }
.hero p.sub { font-size: clamp(16px, 1.6vw, 18px); color: #dbe6ff; max-width: 34ch; margin: 8px 0 16px; line-height: 1.4; }
/* --acima vem do tema: espaço para o acessório que passa da cabeça */
.hero .mascote-area {
  --mw: min(170px, 50vw);
  position: relative; display: grid; place-items: center;
  padding-top: calc(var(--mw) * 1.4528 * var(--acima, 0) + 20px);
}
.hero .mascote { width: var(--mw); }
.hero .balao { left: -92%; top: 12%; font-size: 16px; }

/* ---------- Conteúdo ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 8px 16px 64px; }
.secao { margin-bottom: 48px; scroll-margin-top: 80px; }
.secao-topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; margin-bottom: 22px; }
.secao-topo h2 { font-size: 32px; color: var(--azul-escuro); }
.secao-topo p { margin: 4px 0 0; color: var(--texto-suave); font-weight: 600; }
.barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 26px;
}
.barra h2 { font-size: 30px; color: var(--azul-escuro); }
.barra-dir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro {
  border: 2px solid var(--contorno); background: #fff; color: var(--contorno);
  border-radius: 999px; padding: 7px 15px; font-weight: 800; font-size: 14px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.filtro small { opacity: .6; font-weight: 700; margin-left: 4px; }
@media (hover: hover) { .filtro:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--contorno); } }
.filtro[aria-pressed="true"] { background: var(--azul); color: #fff; box-shadow: 3px 3px 0 var(--verde); }
.busca-mini { position: relative; }
.busca-mini input {
  width: 230px; padding: 8px 14px 8px 36px; border: 2px solid var(--contorno); border-radius: 999px;
  font-weight: 700; color: var(--contorno); background: #fff;
}
.busca-mini input:focus { outline: none; box-shadow: 3px 3px 0 var(--verde); }
.busca-mini svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--contorno); }
.vazio { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: var(--texto-suave); font-weight: 700; }

/* ---------- Cartões de categoria ---------- */
.grade-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; }
.cat-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 2.5px solid var(--contorno); border-radius: var(--raio);
  box-shadow: 5px 5px 0 var(--cor); overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
@media (hover: hover) { .cat-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--cor); } }
.cat-fotos {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2.5px;
  aspect-ratio: 16 / 10; background: var(--contorno);
}
.cat-fotos img { width: 100%; height: 100%; object-fit: cover; background: #eef0f3; }
.cat-fotos img:first-child { grid-row: 1 / 3; }
.cat-info { padding: 14px 16px 16px; border-top: 2.5px solid var(--contorno); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cat-info h3 { font-size: 24px; color: var(--contorno); }
.cat-info p {
  margin: 0; color: var(--texto-suave); font-size: 14px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; font-weight: 800; }
.cat-rodape .cat-qtd { font-size: 14px; color: var(--contorno); }
.cat-rodape .ir { font-size: 14px; color: var(--cor); }
.badge-data {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--cor); color: #fff; border: 2px solid var(--contorno); border-radius: 999px;
  font-weight: 800; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; padding: 3px 10px;
}

/* ---------- Cartões de peça ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.cartao {
  position: relative;
  background: var(--cartao); border: 2.5px solid var(--contorno); border-radius: var(--raio);
  box-shadow: 5px 5px 0 var(--azul);
  overflow: hidden; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
/* foto + nome: abre a janela da peça */
.cartao-abrir {
  display: flex; flex-direction: column; flex: 1;
  background: none; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; cursor: pointer;
}
@media (hover: hover) { .cartao:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--verde); } }
.foto { position: relative; aspect-ratio: 4 / 3; background: #eef0f3; overflow: hidden; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .5s; }
.foto img.alt { opacity: 0; }
@media (hover: hover) { .cartao:hover .foto img.alt { opacity: 1; } }
@media (hover: hover) { .cartao:hover .foto img { transform: scale(1.04); } }
.selo {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--cor); color: #fff; font-weight: 800; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border: 2px solid var(--contorno); border-radius: 999px; padding: 3px 10px;
}
.qtd-fotos {
  position: absolute; right: 10px; bottom: 10px; z-index: 1;
  background: rgba(19,32,74,.82); color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 3px 9px;
}
.info { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 1px; flex: 1; width: 100%; border-top: 2.5px solid var(--contorno); }
.meta {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--azul);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.info h3 {
  font-size: 18px; font-weight: 700; color: var(--contorno); line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; background: var(--menta); color: #2f6b06; border: 1.5px solid #b9e19a; }
.tag.cat { background: #e7eeff; color: var(--azul); border-color: #c3d3fb; }
.rodape-cartao { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 12px; }
/* preço em verde escuro: chama atenção e continua fácil de ler no branco (o verde da marca fica claro demais para texto) */
.preco { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 21px; color: var(--verde-escuro); line-height: 1; }
.preco.grande { font-size: 34px; }
.add {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 2px solid var(--contorno); border-radius: 999px; padding: 5px 12px 5px 9px;
  background: var(--verde); color: var(--contorno); font-weight: 800; font-size: 13px;
  box-shadow: 2px 2px 0 var(--contorno); transition: transform .12s, box-shadow .12s, background .2s;
}
.add svg { width: 16px; height: 16px; }
@media (hover: hover) { .add:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--contorno); } }
.add:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--contorno); }
.add.ok { background: #fff; }
/* "+" vira "✓" por um instante depois de adicionar (no celular não há aviso por cima da tela) */
.add.ok svg { display: none; }
.add.ok::before { content: "✓"; color: var(--verde-escuro); font-size: 18px; font-weight: 800; line-height: 1; }
.comprar .btn.ok { background: #fff; }
/* Toque: um leve "aperto" no lugar do efeito de passar o mouse */
@media (hover: none) {
  .cartao:active, .cat-card:active { transform: scale(.98); }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  border: 2.5px solid var(--contorno); border-radius: 999px; padding: 9px 18px;
  font-weight: 800; font-size: 15px; background: var(--verde); color: var(--contorno);
  box-shadow: 3px 3px 0 var(--contorno); transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) { .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--contorno); } }
.btn.cheio { width: 100%; justify-content: center; font-size: 17px; padding: 12px 18px; }
.btn svg { width: 20px; height: 20px; }

/* Quantidade (menos / número / mais) */
.contador { display: inline-flex; align-items: center; border: 2px solid var(--contorno); border-radius: 999px; background: #fff; flex-shrink: 0; }
.contador button { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; font-weight: 800; color: var(--contorno); border-radius: 50%; }
.contador button:hover { background: var(--menta); }
.contador span { min-width: 24px; text-align: center; font-weight: 800; }
.comprar { display: flex; gap: 10px; align-items: stretch; }
.comprar .contador button { width: 40px; height: 48px; font-size: 20px; }
.comprar .contador span { min-width: 28px; font-size: 17px; }
.comprar .btn { flex: 1; min-width: 0; justify-content: center; gap: 6px; word-spacing: 0; padding: 10px 18px; font-size: 17px; }
.comprar .btn svg { width: 20px; height: 20px; }
/* Informações da peça (janela) */
.vantagens { list-style: none; margin: 0; padding: 18px 2px 0; display: grid; gap: 11px; border-top: 2px dashed #e1e6f0; }
.vantagens li { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.vantagens span:not(.txt) { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--menta); border: 1.5px solid #b9e19a; display: grid; place-items: center; }
.vantagens svg { width: 12px; height: 12px; color: var(--verde-escuro); }
.link-3d { font-weight: 800; font-size: 14px; color: var(--azul); }

/* Botão do carrinho no topo */
.btn-carrinho {
  position: relative; height: 40px; flex-shrink: 0; margin-left: 4px; padding: 0 14px 0 11px;
  border: 2px solid var(--contorno); border-radius: 999px; background: #fff; color: var(--contorno);
  display: inline-flex; align-items: center; gap: 6px; box-shadow: 2px 2px 0 var(--contorno);
  font-weight: 800; font-size: 14px;
}
.btn-carrinho svg { width: 22px; height: 22px; }
.btn-carrinho .badge {
  position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--vermelho); color: #fff; border: 2px solid #fff;
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.btn-carrinho .badge[hidden] { display: none; }
.btn-carrinho.pulo { animation: pulo .45s; }
@keyframes pulo { 40% { transform: scale(1.22) rotate(-8deg); } }
.menu { align-items: center; }

/* Carrinho (gaveta lateral) */
.carrinho-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(7,26,79,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
.carrinho-fundo.aberto { opacity: 1; pointer-events: auto; }
.carrinho {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(420px, 100%);
  background: #fff; border-left: 3px solid var(--contorno);
  display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .28s ease, visibility .28s; visibility: hidden;
}
.carrinho.aberto { transform: none; visibility: visible; }
.carrinho-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 2.5px solid var(--contorno); }
.carrinho-topo h2 { font-size: 26px; color: var(--azul-escuro); }
.fechar-carrinho { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--contorno); background: #fff; font-weight: 800; }
.carrinho-lista { flex: 1; overflow: auto; padding: 8px 20px; }
.item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1.5px dashed #d3d9e8; }
.item img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; border: 2px solid var(--contorno); }
.item-info { display: grid; gap: 2px; min-width: 0; }
.item-info strong { font-size: 15px; line-height: 1.2; }
.item-info small { color: var(--texto-suave); font-weight: 700; }
.remover { justify-self: start; border: 0; background: none; padding: 0; color: var(--vermelho); font-size: 12px; font-weight: 800; text-decoration: underline; }
.carrinho-vazio { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 10px; color: var(--texto-suave); }
.carrinho-vazio img { width: 90px; opacity: .9; }
.carrinho-vazio strong { color: var(--contorno); font-size: 18px; }
.carrinho-rodape { border-top: 2.5px solid var(--contorno); padding: 14px 20px 18px; display: grid; gap: 10px; background: var(--fundo); }
.carrinho-rodape[hidden] { display: none; }
.total-linha { display: flex; justify-content: space-between; align-items: baseline; font-family: "Baloo 2", sans-serif; font-size: 24px; font-weight: 800; color: var(--contorno); }
.total-nota { margin: -6px 0 0; font-size: 13px; font-weight: 700; color: var(--texto-suave); }
.campo { display: grid; gap: 4px; font-size: 13px; font-weight: 800; color: var(--contorno); }
/* Nome e observações do carrinho: fechados até a pessoa tocar */
.campos-extra { display: grid; gap: 10px; }
.campos-extra summary { cursor: pointer; font-size: 14px; font-weight: 800; color: var(--azul); list-style: none; }
.campos-extra summary::-webkit-details-marker { display: none; }
.campos-extra summary small { font-weight: 600; color: var(--texto-suave); }
.campos-extra[open] summary { margin-bottom: 8px; }
.campos-extra .campo + .campo { margin-top: 10px; }
.campo small { font-weight: 600; color: var(--texto-suave); }
.campo input, .campo textarea {
  font: inherit; font-weight: 600; font-size: 15px; color: var(--contorno); resize: vertical;
  border: 2px solid var(--contorno); border-radius: 12px; padding: 9px 12px; background: #fff;
}
.campo input:focus, .campo textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--verde); }
.limpar-carrinho { border: 0; background: none; color: var(--texto-suave); font-weight: 700; font-size: 13px; text-decoration: underline; }

/* Aviso rápido depois de adicionar */
.aviso {
  position: fixed; left: 50%; bottom: 20px; z-index: 70; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px;
  background: var(--contorno); color: #fff; border-radius: 999px; padding: 8px 8px 8px 18px;
  font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .28s ease, visibility .28s;
}
.aviso.mostrar { transform: translate(-50%, 0); visibility: visible; }
.aviso b { color: var(--verde-claro); }
/* sempre 1 linha: nome comprido vira "…" em vez de esticar o aviso */
.aviso span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso button { flex-shrink: 0; border: 0; border-radius: 999px; background: var(--verde); color: var(--contorno); font-weight: 800; padding: 8px 14px; white-space: nowrap; }

/* Outras categorias */
.outras { display: flex; flex-wrap: wrap; gap: 10px; }
.outras a {
  text-decoration: none; font-weight: 800; font-size: 14px; color: var(--contorno);
  background: #fff; border: 2px solid var(--contorno); border-radius: 999px; padding: 7px 15px;
  box-shadow: 3px 3px 0 var(--cor);
}
@media (hover: hover) { .outras a:hover { transform: translateY(-1px); } }

/* ---------- Janela de fotos ---------- */
.janela {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(7,26,79,.78); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 16px;
}
.janela.aberta { display: flex; }
.janela-caixa {
  position: relative; width: min(1120px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: #fff; border: 3px solid var(--contorno); border-radius: 26px;
  box-shadow: 8px 8px 0 var(--verde);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.palco { position: relative; background: #fff; aspect-ratio: 4 / 3; }
.palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid var(--contorno); background: #fff; color: var(--contorno);
  font-size: 22px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 2px 2px 0 var(--contorno);
}
.seta.ant { left: 12px; } .seta.prox { right: 12px; }
.lado { min-width: 0; padding: 34px 32px 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; }
.lado h3 { font-size: 34px; line-height: 1.08; color: var(--contorno); padding-right: 44px; }
.cabeca { display: grid; gap: 6px; }
.cabeca .tags { margin-bottom: 2px; }
/* Tamanho / cores / descrição (preenchidos no editor) */
.detalhes { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.detalhes b { color: var(--contorno); }
.detalhes p { flex-basis: 100%; margin: 2px 0 0; line-height: 1.4; }
/* Fotos da peça: pontinhos em cima da foto (embaixo, no centro) */
.miniaturas {
  position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 1;
  display: flex; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.85);
}
.miniaturas:empty { display: none; }
.miniaturas button {
  width: 9px; height: 9px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--contorno); background: #fff; transition: width .2s, background .2s;
}
.miniaturas button[aria-current="true"] { width: 22px; background: var(--verde); }
/* área de toque maior sem aumentar o ponto */
.miniaturas button { position: relative; }
.miniaturas button::after { content: ""; position: absolute; inset: -9px -4px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.fechar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2.5px solid var(--contorno); background: var(--vermelho); color: #fff; font-size: 20px; font-weight: 800;
  display: grid; place-items: center;
}

/* Parecidas (dentro da janela da peça) */
.parecidas { grid-column: 1 / -1; padding: 12px 20px 16px; border-top: 2.5px solid var(--contorno); background: var(--fundo); }
.parecidas h4 { margin: 0 0 8px; font-family: "Baloo 2", sans-serif; font-size: 17px; color: var(--azul-escuro); }
.parecidas-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mini {
  display: grid; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: #fff; border: 2px solid var(--contorno); border-radius: 12px; color: inherit; font: inherit;
  transition: transform .12s, box-shadow .12s;
}
.mini img { width: 100%; height: 92px; object-fit: contain; background: #fff; border-bottom: 2px solid var(--contorno); }
.mini-txt { display: grid; gap: 1px; min-width: 0; padding: 6px 8px 7px; }
.mini-txt strong { font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--contorno); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-txt b { font-family: "Baloo 2", sans-serif; font-size: 14px; line-height: 1.1; color: var(--verde-escuro); }
@media (hover: hover) { .mini:hover { transform: translateY(-2px); box-shadow: 2px 2px 0 var(--verde); } }

/* ---------- Rodapé ---------- */
footer {
  background: var(--noite); color: #c9d6ff;
  padding: 34px 16px; text-align: center; font-size: 14px;
}
footer .linha { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
footer img { width: 54px; }
footer strong { color: #fff; font-family: "Baloo 2", sans-serif; font-size: 22px; }
footer a { color: var(--verde-claro); }
footer .credito { margin-top: 10px; opacity: .75; font-size: 13px; }

/* ---------- Tablet: topo em uma coluna, mascote em cima ---------- */
@media (max-width: 900px) {
  .hero, .hero-home { padding-bottom: 84px; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .hero p.sub, .hero-home p.sub { margin-left: auto; margin-right: auto; }
  .busca { margin-left: auto; margin-right: auto; }
  .chips-hero { justify-content: center; }
  .hero .mascote-area { order: -1; --mw: min(150px, 40vw); padding-top: calc(var(--mw) * 1.4528 * var(--acima, 0) + 12px); }
  .hero-home .mascote-area { order: -1; --mw: min(180px, 42vw); padding-top: calc(var(--mw) * 1.4528 * var(--acima, 0) + 10px); }
  .lua { width: 110px; top: 20px; right: 5%; }
  .janela-caixa { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .grade.top5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 4px 16px 12px; }
  .top5 .cartao { flex: 0 0 min(220px, 46vw); scroll-snap-align: start; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .menu a:not(.destaque) { display: none; }
  .hero .mascote-area { --mw: min(120px, 34vw); }
  .hero-home .mascote-area { --mw: min(150px, 40vw); }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .passo { flex-direction: column; text-align: center; gap: 6px; padding: 12px 6px; }
  .passo .num { flex-basis: auto; width: 34px; height: 34px; font-size: 17px; }
  .passo strong { font-size: 16px; }
  .passo div span { display: none; }
  .atalhos { gap: 10px 8px; }
  .atalhos .atalho:nth-child(5) { display: none; }
  .slide { grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 18px 18px 22px; }
  .slide-fotos { order: -1; height: 132px; }
  .slide-fotos img { width: 33%; }
  .slide-fotos img:nth-child(1) { width: 39%; left: 30.5%; }
  .slide-fotos img:nth-child(2), .slide-fotos img:nth-child(3) { top: 12%; }
  .slide-texto strong { font-size: 28px; }
  .slide-texto .frase { font-size: 15px; }
  .carrossel-seta { display: none; }
  .balao { font-size: 14px; left: -48%; top: 10%; }
  .hero-home .balao { left: -54%; }
  .hero .balao { left: -112%; font-size: 13px; }
  .lua { width: 80px; top: 14px; right: 4%; }
  .barra, .secao-topo { justify-content: center; text-align: center; }
  .barra-dir, .filtros { justify-content: center; }
  .busca-mini input { width: 100%; }
  .busca-mini { width: 100%; }
  .lado { padding: 18px; }
  .lado h3 { font-size: 24px; }
  .secao-topo h2, .barra h2 { font-size: 26px; }
}

/* ---------- Celular pequeno: peças em 2 colunas, cartão compacto ---------- */
@media (max-width: 520px) {
  .topo-inner { padding: 6px 12px; }
  .logo img { width: 32px; }
  .logo strong { font-size: 22px; }
  .menu .longo { display: none; }
  .menu .curto { display: inline; }
  main { padding-left: 12px; padding-right: 12px; }
  .grade.top5 { margin: 0 -12px; padding-left: 12px; padding-right: 12px; scroll-padding-inline: 12px; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cartao { border-radius: 16px; box-shadow: 3px 3px 0 var(--azul); }
  @media (hover: hover) { .cartao:hover { box-shadow: 5px 5px 0 var(--verde); } }
  .info { padding: 9px 10px 4px; }
  .info h3 { font-size: 16px; }
  .meta { font-size: 10.5px; }
  .preco { font-size: 18px; }
  .rodape-cartao { padding: 4px 10px 10px; }
  .add { padding: 0; width: 36px; height: 36px; justify-content: center; }
  .add span { display: none; }
  .add svg { width: 18px; height: 18px; }
  .btn-carrinho { width: 40px; height: 40px; }
  .selo { font-size: 10px; padding: 2px 7px; top: 8px; left: 8px; }
  .qtd-fotos { font-size: 10.5px; padding: 2px 7px; right: 6px; bottom: 6px; }
  /* categorias: 2 por linha, 1 foto quadrada e texto enxuto (antes era 1 por linha com foto enorme) */
  .grade-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cat-card { border-radius: 16px; box-shadow: 3px 3px 0 var(--cor); }
  .cat-fotos { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 1; }
  .cat-fotos img:not(:first-child) { display: none; }
  .cat-info { padding: 9px 11px 11px; gap: 2px; }
  .cat-info h3 { font-size: 18px; line-height: 1.1; }
  .cat-info p { display: none; }
  .cat-rodape .cat-qtd, .cat-rodape .ir { font-size: 13px; }
  .badge-data { top: 8px; left: 8px; font-size: 10px; padding: 2px 7px; }
  .aviso { bottom: 14px; max-width: calc(100% - 24px); gap: 10px; padding: 6px 6px 6px 14px; font-size: 14px; }
  .aviso button { padding: 7px 12px; font-size: 13px; }
  .chip-hero { font-size: 14px; padding: 6px 13px; }
  .miniaturas { gap: 6px; }
  .seta { width: 38px; height: 38px; }
}

/* ---------- Impressão / PDF ---------- */
@media print {
  body { background: #fff; }
  .topo, .busca, .busca-mini, .filtros, .add, .aviso, .carrinho, .carrinho-fundo, .qtd-fotos, .balao, .janela, .neve, .outras-secao { display: none !important; }
  .hero, .hero-home { padding: 18px 16px 40px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mascote { animation: none; }
  .grade, .grade-cat { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .cartao, .cat-card { break-inside: avoid; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .foto img.alt { display: none; }
  footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- Página inicial no celular: título e mascote lado a lado, busca embaixo ---------- */
@media (max-width: 760px) {
  .hero-home { padding: 18px 16px 76px; }
  .hero-home .hero-inner { grid-template-columns: 1fr 112px; gap: 0 10px; text-align: left; align-items: center; }
  .hero-home .hero-inner > div:first-child { display: contents; }
  .hero-home h1 { grid-column: 1; grid-row: 1; font-size: 44px; }
  .hero-home p.sub { grid-column: 1; grid-row: 2; margin: 6px 0 14px; font-size: 16px; }
  .hero-home .mascote-area { grid-column: 2; grid-row: 1 / 3; order: 0; --mw: 112px; padding-top: 0; }
  .hero-home .balao { display: none; }
  .hero-home .busca { grid-column: 1 / -1; grid-row: 3; width: 100%; max-width: none; margin: 0; }
  .atalho { flex-basis: 74px; }
  .atalho-foto { width: 64px; height: 64px; }
  .atalho small { top: 50px; }
}

@media (max-width: 760px) {
  .hero-home h1 span { display: block; }
}

/* celular: 5 atalhos numa linha e título menor */
@media (max-width: 520px) {
  .atalhos { flex-wrap: nowrap; gap: 6px; justify-content: space-between; }
  .atalho { flex: 0 0 64px; gap: 5px; }
  .atalho-foto { width: 56px; height: 56px; }
  .atalho small { top: 42px; font-size: 9.5px; padding: 0 5px; }
  .atalho-nome { font-size: 11.5px; }
  .atalho-foto.todas svg { padding: 14px; }
  .hero-home h1 { font-size: 36px; }
  .painel-grade { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

@media (max-width: 900px) {
  .trilha { justify-content: center; }
  .parecidas-grade { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .mini { flex: 0 0 140px; scroll-snap-align: start; }
}

/* Topo: busca no centro, Categorias com ícone, Carrinho com nome */
.topo-inner { gap: 16px; }
.busca-topo { position: relative; flex: 1; max-width: 440px; transition: opacity .2s, visibility .2s; }
.busca-topo svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--contorno); pointer-events: none; }
.busca-topo input {
  width: 100%; padding: 8px 14px 8px 36px; border: 2px solid var(--contorno); border-radius: 999px;
  background: var(--fundo); font: inherit; font-weight: 700; font-size: 14px; color: var(--contorno);
}
.busca-topo input::placeholder { color: #7d86a3; }
.busca-topo input:focus { outline: none; background: #fff; box-shadow: 2px 2px 0 var(--verde); }
.busca-topo input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.pagina-inicial .busca-topo { opacity: 0; visibility: hidden; }
.pagina-inicial.busca-rolada .busca-topo { opacity: 1; visibility: visible; }
.menu button.destaque { display: inline-flex; align-items: center; gap: 7px; height: 40px; }
.menu button.destaque svg { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .busca-topo { display: none; }
  .btn-carrinho { width: 40px; padding: 0; justify-content: center; }
  .btn-carrinho .rotulo { display: none; }
}

/* mascote do logo olhando para o outro lado */
.logo img { transform: scaleX(-1); }

/* celular: trilha curta (Voltar · Início › Categoria) */
@media (max-width: 520px) {
  .trilha #trilha-grupo, .trilha #trilha-grupo + span { display: none; }
}

@media (max-width: 520px) {
  .lado h3 { font-size: 26px; }
  .preco.grande { font-size: 28px; }
  .vantagens li { font-size: 13px; }
  .so-largo { display: none; }
}

/* Rodapé com a marca Evinho: uma faixa fina (marca à esquerda, WhatsApp à direita, © embaixo) */
footer {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marca zap" "credito credito";
  align-items: center; gap: 12px 24px; padding: 18px max(16px, calc((100% - 1120px) / 2)) 12px; text-align: left;
}
.rodape-marca { grid-area: marca; display: flex; align-items: center; gap: 12px; }
.rodape-marca img { width: 42px; transform: scaleX(-1); }
.rodape-marca strong { display: block; font-size: 21px; line-height: 1; }
.rodape-marca span { display: block; margin-top: 3px; color: #dbe6ff; font-size: 14px; font-weight: 600; }
.rodape-zap {
  grid-area: zap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  background: var(--verde); color: var(--contorno) !important; font-weight: 800; font-size: 14px;
  border: 2px solid var(--contorno); border-radius: 999px; padding: 7px 15px; box-shadow: 2px 2px 0 #000;
}
.rodape-zap svg { width: 18px; height: 18px; }
.rodape-zap[hidden] { display: none; }
footer .credito { grid-area: credito; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; opacity: .55; font-size: 12px; }
@media (max-width: 640px) {
  footer { grid-template-columns: 1fr; grid-template-areas: "marca" "zap" "credito"; justify-items: center; padding-top: 16px; }
  footer .credito { width: 100%; }
}

/* Cores para o cliente escolher (janela da peça) */
.cores-escolha { display: grid; gap: 8px; }
.cores-rotulo { font-weight: 800; font-size: 14px; color: var(--contorno); }
.cores-rotulo em { font-style: normal; color: var(--vermelho); }
.cores-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cor-op {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 6px; border: 2px solid #d6dcef; border-radius: 999px; background: #fff;
  font: inherit; font-weight: 800; font-size: 14px; color: var(--contorno); cursor: pointer;
}
.cor-op .bolinha { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.25); object-fit: cover; background: #fff; }
.cor-op[aria-pressed="true"] { border-color: var(--contorno); background: var(--verde); box-shadow: 2px 2px 0 var(--contorno); }
.cores-rotulo b { color: var(--azul); }
/* cores só como bolinhas, numa linha própria; 28px + espaço ainda é fácil de tocar com o dedo */
.bolinhas { display: flex; flex-wrap: wrap; gap: 9px; width: 100%; padding: 3px; }
/* com "Igual à foto", as bolinhas só aparecem depois de tocar em "Outra cor" */
.cores-opcoes.fechadas .bolinhas { display: none; }
.cor-outra {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; cursor: pointer;
  border: 2px dashed #b7c0da; border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--contorno);
}
@media (hover: hover) { .cor-outra:hover { border-color: var(--contorno); } }
.cor-bola {
  width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--c); border: 2px solid rgba(0,0,0,.18); transition: transform .12s, box-shadow .12s;
}
.cor-bola[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--contorno); transform: scale(1.06); }
@media (hover: hover) { .cor-bola:hover { transform: scale(1.12); } }
.cores-escolha.falta .cores-opcoes { animation: cor-treme .35s; }
@keyframes cor-treme { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.item-cor b { color: var(--contorno); }

/* ========== Revisão no celular (29/10) ========== */
/* Top 5: cartão um pouco mais estreito, para aparecer um pedaço do 3º e a pessoa ver que desliza */
@media (max-width: 900px) {
  .top5 .cartao { flex-basis: min(200px, 42vw); }
}

/* Topo das categorias: título e mascote lado a lado (antes o mascote ocupava a tela e as peças ficavam lá embaixo) */
@media (max-width: 760px) {
  .hero { padding: 12px 16px 64px; }
  .hero .hero-inner { grid-template-columns: minmax(0, 1fr) 96px; gap: 0 10px; text-align: left; align-items: end; }
  .hero .hero-inner > div:first-child { display: contents; }
  .hero .trilha { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
  .hero h1 { grid-column: 1; grid-row: 2; font-size: 34px; }
  .hero p.sub { grid-column: 1; grid-row: 3; margin: 4px 0 12px; font-size: 15px; }
  .hero .chips-hero { grid-column: 1 / -1; grid-row: 4; justify-content: flex-start; }
  .hero .mascote-area { grid-column: 2; grid-row: 2 / 4; order: 0; align-self: end; --mw: 96px; padding-top: calc(var(--mw) * 1.4528 * var(--acima, 0)); }
  .hero .balao { display: none; }
}

@media (max-width: 520px) {
  /* categorias da página inicial: uma faixa que desliza por grupo, com um pedaço do próximo cartão aparecendo
     (antes eram 19 cartões grandes, quase 5 telas de rolagem) */
  .grade-cat {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -12px; padding: 4px 12px 12px; scroll-padding-inline: 12px;
  }
  .grade-cat::-webkit-scrollbar { display: none; }
  .grade-cat .cat-card { flex: 0 0 40vw; scroll-snap-align: start; }
  .grade-cat .cat-info h3 { font-size: 16px; }
  .grade-cat .cat-rodape .ir { display: none; }

  /* letras pequenas demais para ler no celular */
  .atalho small { font-size: 11px; }
  .atalho-nome { font-size: 12px; }
  .selo, .badge-data { font-size: 11px; }
  .qtd-fotos, .meta { font-size: 11px; }

  /* área de toque maior, sem mudar o visual */
  .remover { padding: 8px 12px 8px 0; margin: -6px 0; }
  .trilha a { padding: 8px 4px; margin: -8px -4px; }
}
.busca .limpar { width: 32px; height: 32px; }
/* pontinhos do carrossel: continuam pequenos, mas o toque pega uma área maior em volta */
.carrossel-pontos button { position: relative; }
.carrossel-pontos button::after { content: ""; position: absolute; inset: -12px -5px; }

/* ========== Celular tão animado quanto o computador ========== */
/* No computador a vida vem do mouse por cima (hover). No celular, o mesmo efeito acontece no toque (:active):
   cartões, atalhos e botões "afundam" e voltam com mola */
@media (hover: none) {
  .cartao, .cat-card, .atalho-foto, .btn, .add, .filtro, .cor-op, .cor-bola, .mini, .btn-voltar {
    -webkit-tap-highlight-color: transparent;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }
  .cartao:active, .cat-card:active { transform: translate(2px, 2px) scale(.98); box-shadow: 1px 1px 0 var(--contorno); }
  .cartao:active .foto img:not(.alt) { transform: scale(1.06); }
  .atalho:active .atalho-foto { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
  .btn:active, .add:active, .filtro:active, .btn-voltar:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--contorno); }
  .cor-bola:active, .cor-op:active, .mini:active { transform: scale(.9); }
}

/* Cartões e passos surgem ao rolar a página (celular e computador). Onde o navegador não sabe fazer, aparecem normais.
   Usa translate/scale separados para não brigar com o transform do hover e do toque */
@supports (animation-timeline: view()) {
  .cartao, .cat-card, .passo {
    animation: surgir linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}
@keyframes surgir { from { opacity: 0; translate: 0 28px; scale: .94; } }

/* ========== Kits ========== */
/* "de R$ 30,00" riscado em cima do preço do kit */
.preco-de { display: block; margin-bottom: 2px; font-family: "Nunito", sans-serif; font-size: 13px; font-weight: 700; color: var(--texto-suave, #6b7391); }
.preco.grande .preco-de { font-size: 16px; }
/* o que vem no kit (janela da peça): cada peça com foto pequena, toca e abre a janela dela */
.kit-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.kit-dentro b { width: 100%; }
.kit-peca {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
  border: 2px solid #d6dcef; border-radius: 999px; background: #fff;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--contorno); cursor: pointer;
}
.kit-peca img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
@media (hover: hover) { .kit-peca:hover { border-color: var(--contorno); } }

/* ========== Janela da peça no celular: painel que sobe de baixo, largura toda ==========
   O ✕ fica sempre à vista e a barra "– 1 + Adicionar" gruda embaixo enquanto a pessoa rola */
@media (max-width: 520px) {
  .janela { padding: 0; align-items: flex-end; }
  .janela-caixa {
    width: 100%; max-width: none; max-height: 94dvh; overscroll-behavior: contain;
    border: 0; border-top: 3px solid var(--contorno); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 0 var(--verde);
  }
  .janela.aberta .janela-caixa { animation: subir .32s cubic-bezier(.2, .9, .3, 1.15); }
  .fechar { position: fixed; top: calc(6dvh + 10px); right: 10px; width: 42px; height: 42px; }
  .lado { padding: 16px 16px 0; gap: 16px; }
  .lado h3 { font-size: 26px; }
  .comprar {
    position: sticky; bottom: 0; z-index: 3; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 2px solid #e1e6f0;
  }
  .parecidas { padding: 12px 16px 18px; }
}
@keyframes subir { from { transform: translateY(40%); opacity: .4; } }

/* ========== Favoritos, compartilhar, personalização, barra do celular, zoom, ordenar ========== */
/* ❤ no canto da foto do cartão e na janela da peça */
.fav {
  position: absolute; top: 9px; right: 9px; z-index: 2; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); border: 2px solid var(--contorno); color: var(--contorno);
}
.fav svg, .j-acao svg { width: 18px; height: 18px; fill: none; }
.fav[aria-pressed="true"], .fav-j[aria-pressed="true"] { color: #e11d48; }
.fav[aria-pressed="true"] svg, .fav-j[aria-pressed="true"] svg { fill: #e11d48; stroke: #e11d48; }
.pulsa { animation: pulsa .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pulsa { 40% { transform: scale(1.35); } }
/* Favoritar e compartilhar: ícones redondos no canto da foto */
.j-botoes { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 8px; }
.j-acao {
  width: 40px; height: 40px; padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 2px solid var(--contorno); border-radius: 50%; background: #fff; color: var(--contorno);
  box-shadow: 2px 2px 0 var(--contorno);
}
.j-acao svg { width: 20px; height: 20px; }
@media (hover: hover) { .j-acao:hover { border-color: var(--contorno); } }
/* personalização (peças marcadas no editor) */
.perso { display: grid; gap: 6px; font-weight: 800; font-size: 14px; color: var(--contorno); }
.perso small { font-weight: 600; color: var(--texto-suave); }
.perso input { padding: 10px 14px; border: 2px solid var(--contorno); border-radius: 12px; font: inherit; font-size: 16px; }
.perso input:focus { outline: none; box-shadow: 2px 2px 0 var(--verde); }
/* ordenar (categorias com 8+ peças) */
.ordenar {
  padding: 8px 12px; border: 2px solid var(--contorno); border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--contorno); cursor: pointer;
}
/* painel de favoritos: os mesmos cartões do site */
.favs-grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding-top: 12px; }
@media (max-width: 520px) { .favs-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.favs-vazio { display: grid; justify-items: center; gap: 6px; padding: 26px 10px 30px; text-align: center; color: var(--texto-suave); }
.favs-vazio img { width: 70px; }
.favs-vazio strong { color: var(--contorno); font-size: 18px; }
/* rodapé: dúvidas e instalar */
.rodape-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.rodape-links a { color: #fff !important; font-weight: 800; font-size: 14px; }
.rodape-instalar { padding: 6px 14px; border: 2px solid #fff; border-radius: 999px; background: none; color: #fff; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.rodape-instalar[hidden] { display: none; }
/* zoom da foto (pinça): sem rolar a página enquanto mexe na foto */
.palco { overflow: hidden; touch-action: pan-y; }
.palco.com-zoom { touch-action: none; }
.palco.com-zoom .seta { opacity: 0; pointer-events: none; }

/* barra de atalhos embaixo: só no celular */
.barra-app { display: none; }
@media (max-width: 760px) {
  .barra-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 2.5px solid var(--contorno);
    box-shadow: 0 -4px 14px rgba(19, 32, 74, .08);
  }
  .ba-item {
    position: relative; display: grid; justify-items: center; gap: 2px; padding: 4px 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 800; color: var(--contorno); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .ba-item svg { width: 23px; height: 23px; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
  .ba-item[data-abrir-favoritos] svg { fill: none; }
  .ba-item:active svg { transform: scale(.8); }
  .ba-item[aria-current="page"] { color: var(--verde-escuro); }
  .ba-item .badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--vermelho); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
  .ba-item .badge[hidden] { display: none; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .aviso { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .aviso-cookies { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ========== Balão do Evinho do js/app.js (convite para instalar, peças novas) ========== */
.app-balao {
  position: fixed; z-index: 72; left: 50%; bottom: 18px; translate: -50% 0; width: min(420px, calc(100% - 20px));
  display: flex; align-items: flex-end; gap: 6px; animation: app-chegar .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes app-chegar { from { transform: translateY(130%); } }
@media (max-width: 760px) { .app-balao { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }   /* acima da barra de baixo */
.app-balao-evinho { flex: 0 0 74px; width: 74px; margin-bottom: -4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); animation: flutuar 3.6s ease-in-out infinite; }
.app-balao-fala {
  position: relative; flex: 1; margin-bottom: 22px; padding: 12px 34px 12px 14px; display: grid; gap: 8px; justify-items: start;
  background: #fff; border: 2.5px solid var(--contorno); border-radius: 18px; box-shadow: 4px 4px 0 var(--verde);
}
.app-balao-fala::before { content: ""; position: absolute; left: -13px; bottom: 14px; border: 10px solid transparent; border-right: 13px solid var(--contorno); border-left: 0; }
.app-balao-fala::after { content: ""; position: absolute; left: -9px; bottom: 17px; border: 7px solid transparent; border-right: 10px solid #fff; border-left: 0; }
.app-balao-fala b { font-family: "Baloo 2", sans-serif; font-size: 17px; line-height: 1.15; color: var(--contorno); }
.app-balao-txt { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--texto-suave); }
.app-balao-fala .btn { padding: 7px 16px; font-size: 15px; }
.app-agora-nao { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: #9aa2b8; cursor: pointer; }
.app-balao-x {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: none; font-size: 16px; font-weight: 800; color: var(--texto-suave); cursor: pointer;
}

/* ---------- Celular bem pequeno (até 360px, ex.: iPhone SE, Galaxy A0x) ---------- */
@media (max-width: 360px) {
  .logo small { font-size: 9.5px; letter-spacing: .03em; white-space: nowrap; }   /* "IMPRESSÃO 3D" numa linha só */
  /* carrinho: o contador vai para baixo do nome (antes espremia o nome em 3 linhas) */
  .item { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; }
  .item img { width: 56px; height: 56px; grid-row: span 2; }
  .item .contador { grid-column: 2; justify-self: start; }
  .btn.cheio { font-size: 15.5px; padding: 11px 12px; }   /* "Enviar pedido pelo WhatsApp" numa linha */
}

/* Card do mini game no carrossel: pixel art nítida (sem borrar ao aumentar) */
.slide-jogo .slide-fotos img { image-rendering: pixelated; background: #fff; }