/* Paleta */
:root {
  --azul-escuro: #003366;
  --amarelo: #FFD700;
  --cinza-claro: #F5F5F5;
  --azul-claro: #4A90E2;
  --branco: #FFFFFF;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0; padding: 0;
  line-height: 1.5;
  color: #333;
}

section { padding: 60px 20px; text-align: center; }
h1, h2, h3 { margin-bottom: 14px; line-height: 1.2; }
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
p  { font-size: 0.9rem; margin-bottom: 4px; line-height: 1.3; }

/* Cabeçalho */
.header {
  background: var(--azul-escuro);
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 40px;
}
.header img { height: 40px; }
.nav-links { display: flex; gap: 20px; }
.nav-links a {
  color: var(--branco); text-decoration: none; font-weight: 500; transition: 0.3s;
}
.nav-links a:hover { color: var(--amarelo); }

/* Botão */
.button {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 6px;
  background: var(--amarelo);
  color: var(--azul-escuro);
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: 0.3s; cursor: pointer;
}
.button:hover {
  background: var(--azul-escuro); color: var(--amarelo);
  transform: scale(1.05);
}
.button:active { transform: scale(0.95); }

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--azul-escuro), var(--azul-claro));
  color: var(--branco);
  padding: 60px 20px;
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 { font-size: 2.8rem; margin-bottom: 20px; max-width: 800px; }
.hero p  { font-size: 1.1rem; margin-bottom: 30px; max-width: 800px; line-height: 1.5; }

/* Varal de Fotos */
.varal-fotos {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  position: relative;
  flex-wrap: wrap;
}

/* Fotos do varal */
.varal-fotos img {
  width: 120px;
  height: 160px; /* mais vertical */
  object-fit: cover;
  border: 3px solid #fff; /* borda branca */
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 15px;
}

.varal-fotos img:nth-child(even) {
  transform: rotate(3deg);
}

.varal-fotos img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

/* Mobile */
@media (max-width: 639px) {
  .varal-fotos img {
    width: 90px;
    height: 120px; /* mantém retangular */
  }
}

/* Seções */
.oferta   { background: linear-gradient(180deg, var(--cinza-claro), var(--branco)); }
.beneficios { background: linear-gradient(180deg, var(--branco), var(--cinza-claro)); }
.depoimentos { background: linear-gradient(180deg, var(--azul-claro), var(--azul-escuro)); color: var(--branco); }
.garantia { background: linear-gradient(180deg, var(--cinza-claro), var(--branco)); }
.cta-final { background: linear-gradient(180deg, var(--azul-escuro), var(--azul-claro)); color: var(--branco); }

.oferta h2, .beneficios h2, .garantia h2 { color: var(--azul-escuro); }
.depoimentos h2, .cta-final h2 { color: var(--branco); }

/* Grid de produtos */
.produtos-grid {
  display: grid; gap: 20px;
  max-width: 1100px; margin: 0 auto;
}
@media (min-width: 1024px) { .produtos-grid { grid-template-columns: repeat(3, 1fr); row-gap: 50px; } }
@media (min-width: 640px) and (max-width: 1023px) { .produtos-grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }
@media (max-width: 639px) { .produtos-grid { grid-template-columns: 1fr; row-gap: 15px; } }

/* Card produto */
.box {
  background: var(--branco);
  padding: 12px; border: 1px solid #ddd; border-radius: 8px;
  font-size: 0.9rem; text-align: left;
  display: flex; flex-direction: column; align-items: stretch; height: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;
}
.box img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; margin: 0 auto 8px; display: block; }
.box h3 { display: flex; align-items: center; font-size: 1rem; margin: 4px 0 8px; min-height: 36px; }
.box h3 span { font-size: 1.2rem; margin-right: 5px; color: var(--azul-escuro); }
.price { font-weight: bold; color: var(--azul-escuro); margin: 8px 0; }
.produtos-grid .box .button { margin-top: auto; }

/* Badge */
.badge {
  position: absolute; top: -12px; right: -12px;
  background: var(--amarelo); color: var(--azul-escuro);
  font-size: 0.7rem; font-weight: bold;
  padding: 4px 7px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Rodapé */
.footer {
  background: var(--azul-claro);   /* cor final do gradiente */
  color: var(--branco);
  text-align: center;
  padding: 30px 20px;
}
.footer p { margin: 6px 0; }
.footer .rights { font-size: 0.8rem; color: #f0f0f0; }

/* WhatsApp flutuante */
.whatsapp-float {
  position: fixed; width: 60px; height: 60px;
  bottom: 20px; right: 20px;
  background-color: #25d366; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 1000; animation: pulse 1.5s infinite;
}
.whatsapp-float img { width: 32px; height: 32px; }
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Animação de seções */
section.animate { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
section.animate.visible { opacity: 1; transform: translateY(0); }

.logo img { 
  height: 70px;   /* Desktop */
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); /* Destaque contra fundo escuro */
}

@media (max-width: 768px) {
  .logo img { 
    height: 45px;  /* Mobile */
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
  }
}

/* Ícones dos produtos */
.box img { 
  width: 100px; 
  height: 100px; 
  object-fit: contain; 
  margin: 0 auto 8px; 
  display: block; 
}

/* Ajuste automático no mobile */
@media (max-width: 639px) {
  .box img {
    width: 80px;
    height: 80px;
  }
}

/* Divisória sutil entre seções */
.divider {
  border: 0;
  height: 2px;
  width: 80%;
  margin: 20px auto; /* menor espaço */
  background: linear-gradient(to right, transparent, #ccc, transparent);
}

/* Layout da seção Benefícios */
.beneficios-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.beneficios-texto { flex: 1; text-align: left; }
.beneficios-imagem img {
  max-width: 350px; width: 100%; height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Responsivo */
@media (max-width: 768px) {
  .beneficios-grid { flex-direction: column; text-align: center; }
  .beneficios-texto { text-align: center; }
}

/* FAQ */
.faq {
  background: linear-gradient(180deg, var(--branco), var(--cinza-claro));
  padding: 60px 20px;
}
.faq h2 {
  color: var(--azul-escuro);
  margin-bottom: 30px;
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
.faq-item { margin-bottom: 20px; }
.faq-item h3 {
  font-size: 1rem; font-weight: 600; color: var(--azul-escuro); margin-bottom: 5px;
}
.faq-item p {
  font-size: 0.9rem; line-height: 1.4; color: #444;
}

/* Ajuste espaço da divisória e título dos Benefícios */
#beneficios { padding-top: 30px; }   /* reduz só em cima */
#beneficios h2 { margin-top: 10px; }

/* Grid dos depoimentos */
.depoimentos {
  background: linear-gradient(180deg, var(--azul-claro), var(--azul-escuro));
  color: var(--branco);
  padding: 60px 20px;
  text-align: center;
}

.depoimentos h2 {
  margin-bottom: 40px;
}

.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.depoimento-box {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.depoimento-box img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid #fff;
}

.depoimento-box p {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #f0f0f0;
}

.depoimento-box span {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--amarelo);
}

/* Responsivo */
@media (max-width: 1023px) {
  .depoimentos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Rodapé */
.footer {
  background: var(--azul-claro);
  color: var(--branco);
  text-align: center;
  padding: 40px 20px;
}

.footer-logo img {
  height: 70px; /* mesmo tamanho do cabeçalho */
  margin-bottom: 20px;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); /* sombra preta */
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.footer-links a {
  color: var(--branco);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--amarelo);
}

.footer-links img {
  width: 20px;
  height: 20px;
}

.footer .rights {
  font-size: 0.8rem;
  color: #f0f0f0;
  margin-top: 10px;
}

/* Reduz espaçamento dos títulos no topo das seções */

#oferta {
  padding-top: 30px;
}
#oferta h2 {
  margin-top: 10px;
}

#conteudo {
  padding-top: 30px;
}
#conteudo h2 {
  margin-top: 10px;
}

#depoimentos {
  padding-top: 30px;
}
#depoimentos h2 {
  margin-top: 10px;
}

#faq {
  padding-top: 30px;
}
#faq h2 {
  margin-top: 10px;
}

#garantia {
  padding-top: 30px;
}
#garantia h2 {
  margin-top: 10px;
}

#cta-final {
  padding-top: 30px;
}
#cta-final h2 {
  margin-top: 10px;
}

.footer {
  padding-top: 30px;
}
.footer .footer-logo {
  margin-top: 10px;
}

.highlight-yellow {
  color: var(--amarelo);
  font-weight: 700;
}

/* Menu Desktop */
.nav-links {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Botão hamburger (esconde no desktop) */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  color: var(--branco);
  cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
  .nav-links {
    flex-direction: column;
    background: var(--azul-escuro);
    position: absolute;
    top: 70px;
    right: 0;
    width: 220px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

    /* animação */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }

  .nav-links a {
    padding: 10px 0;
    display: block;
    color: var(--branco);
  }

  .menu-toggle {
    display: block;
  }

  .nav-links.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
  }
}

/* Overlay de fundo no mobile */
.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); /* semitransparente */
  z-index: 1500; /* abaixo do menu, acima do conteúdo */
  display: none; /* começa escondido */
}
.menu-overlay.active {
  display: block;
}

/* Logo no cabeçalho */
.logo img {
  height: 90px;         /* aumenta a altura no desktop */
  max-height: 100%;     /* garante que não ultrapasse o header */
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.6));
  object-fit: contain;  /* preserva proporção */
}

/* Ajuste no mobile */
@media (max-width: 768px) {
  .logo img {
    height: 65px;  /* maior que antes para dar mais destaque */
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
  }
}

/* Cabeçalho */
.header {
  background: var(--azul-escuro);
  display: flex;
  justify-content: space-between;
  align-items: center;  /* garante o alinhamento vertical */
  padding: 10px 40px;   /* reduzi um pouco o padding para equilibrar */
  overflow: hidden;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.6));
}

@media (max-width: 768px) {
  .logo img {
    height: 65px;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
  }
}

html, body {
  width: 100%;
  overflow-x: hidden; /* impede rolagem lateral */
}