/* Paleta: azul e branco (cores da loja). Modo claro por padrão; modo noturno com data-tema="escuro". */
:root {
  --azul-escuro: #0b2e6b;
  --azul: #1e6fd9;
  --azul-claro: #8fc1f5;
  --azul-bebe: #cfe6fb;
  --branco: #ffffff;

  --fundo: #ffffff;
  --superficie: #eef6fe;
  --texto: #0b1f3a;
  --suave: #3b5573;
  --destaque: #1e6fd9;
  --sobre-destaque: #ffffff;
  --faixa: #0b2e6b;
  --borda: #cfe6fb;
}

[data-tema="escuro"] {
  --fundo: #071a36;
  --superficie: #0e2a55;
  --texto: #eaf3ff;
  --suave: #b7cde9;
  --destaque: #8fc1f5;
  --sobre-destaque: #071a36;
  --faixa: #04122a;
  --borda: #17407a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

a { color: inherit; }

.faixa-topo {
  background: var(--faixa);
  color: var(--branco);
  text-align: center;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 5vw;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.marca {
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--destaque);
}

.menu { display: flex; gap: 1.2rem; flex-wrap: wrap; }

.menu a {
  text-decoration: none;
  color: var(--suave);
  font-size: 0.95rem;
}

.menu a:hover { color: var(--destaque); }

.botao-tema {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--destaque);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.botao-tema:hover { background: var(--destaque); color: var(--sobre-destaque); }

.banner {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul) 60%, var(--azul-claro));
  color: var(--branco);
  padding: 5rem 5vw;
}

.banner-texto { max-width: 680px; }

.etiqueta {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  opacity: 0.85;
  margin-bottom: 0.8rem;
}

.banner h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.banner p { font-size: 1.1rem; margin-bottom: 1.8rem; }

.bloco { padding: 4rem 5vw; }

.fundo-claro { background: var(--superficie); }

.fundo-azul { background: var(--azul-escuro); color: var(--branco); }

.fundo-azul p { color: var(--azul-bebe); }

h2 { font-size: 1.7rem; margin-bottom: 1.5rem; }

.grade-categorias {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.categoria {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: var(--azul-bebe);
  color: var(--azul-escuro);
  text-decoration: none;
  transition: transform 0.15s;
}

[data-tema="escuro"] .categoria { background: var(--superficie); color: var(--texto); }

.categoria:hover { transform: translateY(-3px); }

.categoria-titulo { font-weight: 700; font-size: 1.1rem; }

.categoria-texto { font-size: 0.9rem; color: var(--suave); }

.grade-produtos {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.produto {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.imagem {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--azul-bebe);
  color: var(--azul-escuro);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

[data-tema="escuro"] .imagem { background: #17407a; color: var(--azul-bebe); }

.produto h3 { font-size: 1.05rem; }

.produto p { color: var(--suave); font-size: 0.92rem; }

.preco { font-weight: 700; color: var(--texto) !important; margin-top: auto; }

.botao {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  transition: filter 0.15s;
}

.botao:hover { filter: brightness(1.08); }

.botao.primario { background: var(--branco); color: var(--azul-escuro); }

.fundo-azul .botao.primario { background: var(--azul-claro); color: var(--azul-escuro); }

.botao.secundario { background: var(--azul); color: var(--branco); }

[data-tema="escuro"] .botao.secundario { background: var(--azul-claro); color: var(--azul-escuro); }

.banner .botao.primario { background: var(--branco); color: var(--azul-escuro); }

.produto .botao { margin-top: 0.4rem; }

.passos { list-style: none; display: grid; gap: 1rem; max-width: 640px; }

.passos li { display: flex; gap: 1rem; align-items: center; color: var(--suave); }

.passos span {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  font-weight: 800;
  display: grid;
  place-items: center;
}

.passo-icone {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pequeno { font-size: 0.9rem; margin-top: 1rem; }

.rodape {
  padding: 2rem 5vw;
  text-align: center;
  background: var(--faixa);
  color: var(--azul-bebe);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .cabecalho { flex-wrap: wrap; }
  .menu { order: 3; width: 100%; justify-content: center; }
}

.grade-instagram {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: start;
}

.ig-item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--azul-bebe);
}

.ig-item img { width: 100%; height: auto; display: block; transition: transform 0.2s; }

.ig-item:hover img { transform: scale(1.04); }

.linha-destaques { display: flex; gap: 1.1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.destaque-ig { flex: 0 0 auto; width: 96px; text-align: center; text-decoration: none; color: var(--texto); font-size: 0.8rem; }
.destaque-ig img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--destaque); display: block; margin-bottom: 0.4rem; }
.destaque-ig span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fotos: quadrado com corte. Vídeos: tamanho original (sem corte). */
.grade-instagram .ig-item { aspect-ratio: 1 / 1; }
.grade-instagram .ig-item img { width: 100%; height: 100%; object-fit: cover; }
.grade-videos .ig-item { aspect-ratio: auto; }
.grade-videos .ig-item img { width: 100%; height: auto; object-fit: contain; }

.marca { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo-marca { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }