:root {
  --rosa: #e85aa6;
  --rosa-escuro: #cb3e8b;
  --escuro: #232228;
  --cinza: #66636f;
  --cinza-claro: #f6f6f9;
  --branco: #ffffff;
  --borda: #e9e8ef;
  --verde: #25d366;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  --radius-lg: 24px;
  --max: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--escuro); background: var(--branco); line-height: 1.5; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.container { width: min(100% - 32px, var(--max)); margin: 0 auto; }
.topo { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid #efeff3; }
.topo-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; }
.logo { width: 110px; height: auto; object-fit: contain; }
.logo-link { display: inline-flex; align-items: center; }
.menu { display: flex; gap: 24px; flex-wrap: wrap; }
.menu a { color: var(--escuro); text-decoration: none; font-weight: 700; }
.menu a:hover { color: var(--rosa); }
.topo-acoes { display: flex; align-items: center; gap: 12px; }
.btn-whats-topo, .btn, button { transition: .25s ease; }
.btn-whats-topo { text-decoration: none; background: var(--verde); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; }
.menu-mobile-btn { display: none; border: none; background: var(--escuro); color: #fff; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; font-size: 22px; }
.hero { padding: 54px 0 30px; background: linear-gradient(180deg, #ffffff 0%, #fff7fb 100%); }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 36px; align-items: center; }
.tag { display: inline-block; background: #ffe4f1; color: var(--rosa-escuro); padding: 8px 14px; border-radius: 999px; font-size: .92rem; font-weight: 700; }
.hero-texto h1, .secao-topo h2, .destaques h2, .como-funciona h2, .contato h2, .avaliacoes h2, .redes h2 { line-height: 1.1; }
.hero-texto h1 { font-size: 3rem; margin: 14px 0; }
.hero-texto p { color: var(--cinza); font-size: 1.08rem; max-width: 620px; }
.hero-botoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.hero-imagem img { border-radius: 30px; box-shadow: var(--shadow); width: 100%; max-height: 460px; object-fit: cover; }
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 999px; font-weight: 700; border: none; cursor: pointer; }
.btn-primario { background: var(--rosa); color: #fff; }
.btn-primario:hover, .btn-whats-topo:hover, .whatsapp-float:hover { transform: translateY(-2px); }
.btn-primario:hover { background: var(--rosa-escuro); }
.btn-secundario { background: #fff; color: var(--escuro); border: 1px solid var(--borda); }
.btn-secundario:hover, .btn-light:hover { background: #fafafa; }
.btn-light { background: #f2f2f5; color: var(--escuro); }
.btn-full { width: 100%; }
.como-funciona, .catalogo, .destaques, .contato, .avaliacoes, .redes { padding: 52px 0; }
.passos-grid, .destaques-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.passo-card, .destaque-card { background: #fff; border: 1px solid var(--borda); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.passo-card { padding: 24px; }
.secao-topo { margin-bottom: 24px; }
.secao-topo h2, .destaques h2, .como-funciona h2, .contato h2, .avaliacoes h2, .redes h2 { font-size: 2rem; margin-top: 10px; }
.secao-subtitulo { margin-top: 8px; color: var(--cinza); }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.filtros input, .filtros select, .orcamento-form input, .orcamento-form textarea, .orcamento-form select { width: 100%; border: 1px solid var(--borda); border-radius: 16px; padding: 14px 16px; outline: none; background: #fff; }
.filtros input { flex: 1 1 320px; }
.filtros select { flex: 0 1 250px; }
.layout-catalogo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.grid-produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card-produto { background: #fff; border: 1px solid var(--borda); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); transition: .25s ease; }
.card-produto:hover { transform: translateY(-4px); }

/* CORREÇÃO DOS CARDS */
.imagem-botao {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: #fafafc;
  cursor: pointer;
}
.card-produto img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #fafafc;
}
.card-produto img.placeholder-logo {
  height: 150px;
  object-fit: contain;
  padding: 16px 22px;
  background: #fafafc;
}

.card-produto-conteudo { padding: 18px; }
.categoria-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #f4f3f8; color: #56525f; font-size: .85rem; font-weight: 700; margin-bottom: 10px; }
.card-produto h3 { margin-bottom: 8px; font-size: 1.12rem; }
.card-produto p { color: var(--cinza); margin-bottom: 12px; min-height: 48px; }
.preco { margin-bottom: 14px; font-size: 1.1rem; font-weight: 800; color: var(--rosa-escuro); }
.btn-add { width: 100%; border: none; background: var(--escuro); color: #fff; padding: 12px 14px; border-radius: 14px; font-weight: 700; cursor: pointer; }
.btn-add:hover { background: #121116; }
.orcamento-box { position: sticky; top: 100px; background: #fff; border: 1px solid var(--borda); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.orcamento-header, .orcamento-footer { padding: 18px; }
.orcamento-header { background: #fff7fb; border-bottom: 1px solid #f0eef4; }
.orcamento-header h3 { margin-bottom: 4px; }
.orcamento-lista { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; max-height: 280px; overflow-y: auto; }
.item-orcamento { border-bottom: 1px solid #f2f1f5; padding-bottom: 12px; }
.item-orcamento:last-child { border-bottom: none; padding-bottom: 0; }
.item-orcamento h4 { font-size: 1rem; margin-bottom: 4px; }
.item-orcamento p { color: var(--cinza); font-size: .93rem; }
.item-orcamento-acoes { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.item-orcamento-acoes button { border: none; background: #efeff5; color: var(--escuro); padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.item-orcamento-acoes .remover { background: #ffe5e4; color: #b3261e; }
.vazio { color: var(--cinza); }
.orcamento-form { padding: 0 18px 18px; display: grid; gap: 10px; }
.orcamento-form textarea { min-height: 96px; resize: vertical; }
.orcamento-footer { border-top: 1px solid #f1f0f4; }
.orcamento-total { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 1rem; }
.destaque-card { overflow: hidden; }
.destaque-imagem-wrap { height: 220px; display: flex; align-items: center; justify-content: center; background: #fafafc; border: none; width: 100%; cursor: pointer; }
.destaque-card img { width: 100%; height: 100%; object-fit: cover; }
.destaque-card div { padding: 18px; }
.avaliacao-cta { margin-top: 22px; }
.centralizado { display: flex; justify-content: center; }
.contato-box { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 28px; border-radius: 24px; background: #fff8fc; border: 1px solid #ffd5ea; }
.redes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 24px; }
.rede-card { text-decoration: none; color: var(--escuro); background: #fff; border: 1px solid var(--borda); border-radius: 18px; padding: 18px; text-align: center; font-weight: 700; box-shadow: var(--shadow); }
.rede-card:hover { transform: translateY(-2px); }
.destaque-linktree { background: #fff7fb; color: var(--rosa-escuro); }
.passo-card span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--rosa); color: #fff; font-weight: 800; margin-bottom: 14px; }
.rodape { padding: 30px 0; border-top: 1px solid #efeff3; }
.rodape-conteudo { text-align: center; }
.logo-rodape { width: 95px; height: auto; margin: 0 auto 10px; object-fit: contain; }
.whatsapp-float { position: fixed; right: 18px; bottom: 18px; background: var(--verde); color: #fff; text-decoration: none; font-weight: 700; padding: 14px 18px; border-radius: 999px; box-shadow: var(--shadow); }
.modal-imagem { position: fixed; inset: 0; display: none; z-index: 9999; }
.modal-imagem.ativo { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.modal-conteudo { position: relative; z-index: 2; width: min(92vw, 900px); margin: 4vh auto; background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--shadow); }
.modal-conteudo img { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 16px; background: #fafafc; }
.modal-conteudo p { margin-top: 12px; font-weight: 700; text-align: center; }
.modal-fechar { position: absolute; top: 8px; right: 8px; width: 42px; height: 42px; border: none; border-radius: 50%; background: #fff; box-shadow: var(--shadow); font-size: 28px; cursor: pointer; }
@media (max-width: 1100px) { .layout-catalogo { grid-template-columns: 1fr; } .orcamento-box { position: static; } .redes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .passos-grid, .destaques-grid, .contato-box, .hero-grid { grid-template-columns: 1fr; display: grid; }
  .grid-produtos { grid-template-columns: 1fr 1fr; }
  .menu { display: none; position: absolute; top: 86px; left: 0; width: 100%; background: #fff; border-bottom: 1px solid #efeff3; padding: 16px; flex-direction: column; gap: 12px; }
  .menu.ativo { display: flex; }
  .menu-mobile-btn { display: inline-flex; align-items: center; justify-content: center; }
  .btn-whats-topo { display: none; }
  .hero-texto h1 { font-size: 2.3rem; }
}
@media (max-width: 640px) {
  .grid-produtos, .redes-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 30px; }
  .hero-texto h1 { font-size: 2rem; }
  .contato-box { padding: 22px; }
  .whatsapp-float { left: 16px; right: 16px; text-align: center; }
  .card-produto img { height: 190px; }
  .card-produto img.placeholder-logo { height: 140px; }
}


.redes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.rede-card {
  text-decoration: none;
  color: var(--escuro);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  min-height: 88px;
}

.rede-card:hover {
  transform: translateY(-2px);
}

.rede-icone {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f7f7fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rede-icone svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.rede-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.rede-texto strong {
  font-size: 1rem;
}

.rede-texto small {
  color: var(--cinza);
  margin-top: 4px;
}

.destaque-whatsapp {
  background: #f0fff5;
  border-color: #bce5cb;
}

.destaque-whatsapp .rede-icone {
  background: #dcfce7;
  color: #15803d;
}

.destaque-linktree {
  background: #fff7fb;
  border-color: #ffd5ea;
  color: var(--rosa-escuro);
}

.destaque-linktree .rede-icone {
  background: #ffe4f1;
}

@media (max-width: 1100px) {
  .redes-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .redes-grid { grid-template-columns: 1fr; }
}


/* Ajuste automático dos cards das redes */
.redes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.rede-card {
  text-decoration: none;
  color: var(--escuro);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  min-height: 88px;
}

.rede-card:hover {
  transform: translateY(-2px);
}

.rede-icone {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #f7f7fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rede-icone svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.rede-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.rede-texto strong {
  font-size: 1rem;
}

.rede-texto small {
  color: var(--cinza);
  margin-top: 4px;
}

/* Cores por plataforma */
.plataforma-whatsapp {
  background: #f0fff5;
  border-color: #bce5cb;
}
.plataforma-whatsapp .rede-icone {
  background: #dcfce7;
  color: #15803d;
}

.plataforma-instagram {
  background: #fff4fa;
  border-color: #f8c6df;
}
.plataforma-instagram .rede-icone {
  background: #ffe4f1;
  color: #c13584;
}

.plataforma-facebook {
  background: #f4f8ff;
  border-color: #cfe0ff;
}
.plataforma-facebook .rede-icone {
  background: #e7f0ff;
  color: #1877f2;
}

.plataforma-tiktok {
  background: #f8f8f8;
  border-color: #dedede;
}
.plataforma-tiktok .rede-icone {
  background: #eeeeee;
  color: #111111;
}

.plataforma-youtube {
  background: #fff5f5;
  border-color: #ffd1d1;
}
.plataforma-youtube .rede-icone {
  background: #ffe5e5;
  color: #ff0000;
}


/* Centralização real da última linha das redes */
.redes-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.redes-grid .rede-card {
  flex: 0 1 240px;
  max-width: 320px;
  width: 100%;
}

@media (max-width: 640px) {
  .redes-grid .rede-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}