/* ESTILOS GERAIS */
:root {
  /* === MUDANÇA: TEMA BRANCO E LIMPO === */
  --cor-primaria: #007BFF; /* Azul primário */
  --cor-secundaria: #0056b3; /* Azul escuro (hover) */
  --cor-destaque: #E83E8C; /* Rosa/Roxo para destaques (opcional) */
  --cor-fundo: #ffffff; /* Fundo branco */
  
  --cor-fundo-card: #f9f9f9; /* Fundo de card cinza bem claro */
  --cor-fundo-transparente: #f9f9f9; /* Mesma cor dos cards */
  --cor-borda-card: #dee2e6; /* Borda cinza sutil */
  --largura-borda-card: 1px; /* Espessura da borda */
  
  --cor-texto: #212529; /* Preto/Cinza bem escuro para textos */
  --cor-texto-secundario: #6c757d; /* Cinza secundário para parágrafos */
  
  --cor-verde-cta: #25D366;
  --cor-verde-cta-hover: #128C7E;

  /* === NOVA COR: VERMELHO VINHO === */
  --cor-vermelho-vinho: #9B111E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  /* === NOVA FONTE === */
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cor-texto);
  line-height: 1.6;
  padding-top: 70px;
  background-color: var(--cor-fundo);
  font-weight: 400; /* Peso padrão */
}
a { color: var(--cor-primaria); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--cor-secundaria); }
.container {  
  width: 90%;  
  max-width: 1100px;  
  margin: 0 auto;  
  padding: 60px 0; /* Espaçamento entre seções */
}

/* SEÇÕES COM FUNDO E BORDA CLAROS */
section.container {
  background: var(--cor-fundo-transparente);
  border: var(--largura-borda-card) solid var(--cor-borda-card);
  border-radius: 10px;
  padding: 40px; /* Padding interno do card */
  margin-top: 30px;
}

section:not(#section-hero) {
  border-top: var(--largura-borda-card) solid var(--cor-borda-card); /* Ajuste para manter a borda */
}

h1, h2, h3, h4 { 
  color: var(--cor-texto); 
  margin-bottom: 20px; 
  line-height: 1.3; 
  font-weight: 700; /* Títulos em negrito */
}
h1 { font-size: 2.8rem; color: var(--cor-texto); }
h2 {  
  font-size: 2.2rem;  
  text-align: center;  
  margin-bottom: 40px;  
  color: var(--cor-texto);
}
h2 span { /* Destaque no H2 */
  color: var(--cor-primaria);
}
h4 {
  color: var(--cor-texto);
  font-size: 1.5rem;
  margin-bottom: 10px;
}
p { margin-bottom: 15px; color: var(--cor-texto-secundario); font-size: 1.1rem; }
.subtitle {
  font-size: 1.2rem;
  color: var(--cor-texto-secundario);
  max-width: 700px;
  margin: 0 auto 30px auto;
}

/* NAVBAR */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  background-color: rgba(255, 255, 255, 0.85); /* Navbar branca translúcida */
  z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #dee2e6; /* Borda cinza sutil */
  transition: background-color 0.3s, box-shadow 0.3s; /* ADICIONADO para efeito de scroll */
}
/* === LOGO ATUALIZADO (VERMELHO VINHO) === */
.nav-logo {  
  font-size: 32px;  
  font-weight: 900; /* Super-negrito */
  background: linear-gradient(45deg, var(--cor-vermelho-vinho), #C62828); /* Gradiente Vinho */
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Sombra sutil */
}
.nav-links { list-style: none; display: flex; gap: 25px; }
.nav-links li a { font-size: 16px; color: var(--cor-texto); font-weight: 500; transition: color 0.2s; }
.nav-links li a:hover { color: var(--cor-primaria); }
.menu-toggle { display: none; font-size: 28px; color: var(--cor-primaria); cursor: pointer; background: none; border: none; }

/* HERO */
#section-hero {
    text-align: center;
    padding-top: 80px;  
    padding-bottom: 80px;
    margin-top: 0;
    background: none;  
    border: none;
    backdrop-filter: none;
}
#section-hero h1 {
  font-size: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* === H1 SPAN ATUALIZADO (VERMELHO VINHO E MENOR) === */
#section-hero h1 span {
  color: var(--cor-vermelho-vinho);
  /* === MODIFICAÇÃO AQUI === */
  font-size: 0.8em; /* 80% do tamanho do H1 */
  font-weight: 500; /* Fonte de peso médio, em vez de 700 (negrito) */
}
#section-hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 20px auto 30px auto;
}
/* Botão CTA Principal */
.btn-cta {  
  display: inline-block;  
  padding: 18px 40px;  
  background: var(--cor-verde-cta); /* Verde WhatsApp */
  color: #ffffff !important;  
  border: none;  
  border-radius: 50px;  
  text-decoration: none;  
  transition: all 0.3s ease;  
  font-weight: 700; /* Negrito */
  font-size: 1.2rem;
  animation: pulse-green 2s infinite;
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
}
.btn-cta:hover {  
  background: var(--cor-verde-cta-hover);  
  transform: translateY(-3px) scale(1.05);  
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
  animation: none;
}
@keyframes pulse-green {
  0% { box-shadow: 0 0 20px rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 35px rgba(37, 211, 102, 0.8); }
  100% { box-shadow: 0 0 20px rgba(37, 211, 102, 0.5); }
}
.btn-whatsapp {  
  display: inline-block;  
  padding: 12px 25px;  
  background: var(--cor-verde-cta); /* Verde WhatsApp */
  color: #ffffff !important;  
  border: none;  
  border-radius: 50px;  
  text-decoration: none;  
  transition: all 0.3s ease;  
  font-weight: 700; /* Negrito */
}
.btn-whatsapp:hover {  
  background: var(--cor-verde-cta-hover);  
  transform: translateY(-3px);  
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2);  
}

/* === NOVA SEÇÃO "SOBRE" === */
#section-sobre {
  background: none;
  border: none;
}
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.sobre-imagem img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.sobre-texto h2 {
  text-align: left;
  margin-bottom: 20px;
}
.sobre-texto p {
  font-size: 1.1rem;
}

/* SEÇÃO DE PLANOS */
.plano-cards {  
  display: grid;  
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));  
  gap: 25px;  
  align-items: center; /* Alinha os cards na vertical */
}
.plano-card {  
    background: var(--cor-fundo); /* Fundo branco nos cards */
    border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
    border-radius: 10px;  
    padding: 30px;  
    text-align: center;  
    transition: transform 0.3s, box-shadow 0.3s;  
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra sutil */
}
.plano-card:hover {  
  transform: scale(1.05);  
  border-color: var(--cor-primaria); /* Borda de destaque no hover */
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.plano-card.popular {  
    transform: scale(1.05); /* Ligeiramente maior */
    border: 2px solid transparent; 
    background-image: linear-gradient(var(--cor-fundo), var(--cor-fundo)),  
                      linear-gradient(120deg, var(--cor-primaria), var(--cor-secundaria)); /* Borda com gradient */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.plano-card.popular:hover {  
  transform: scale(1.1);  
}
.preco { font-size:2.2rem; font-weight:700; color:var(--cor-primaria); margin:10px 0; }
.selo {  
  display:inline-block;  
  background: linear-gradient(120deg, var(--cor-primaria), var(--cor-secundaria));
  color:#ffffff; /* Texto branco no selo */
  padding: 6px 15px;  
  border-radius:50px;  
  font-size:14px;  
  font-weight: 700;
  margin-bottom:15px;
}
.plano-card.popular .selo {
  background: linear-gradient(120deg, var(--cor-verde-cta), var(--cor-primaria)); /* Selo popular com verde/azul */
  color: #ffffff;
}

/* SEÇÃO CONTEÚDO (SEO) */
.conteudo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.conteudo-box {
  background: var(--cor-fundo); /* Fundo branco */
  border-radius: 8px;
  padding: 25px;
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
  border-top: 3px solid var(--cor-primaria); /* Borda superior de destaque */
  transition: transform 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.conteudo-box:hover {
  transform: translateY(-5px);
}
.conteudo-box h4 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.conteudo-box p {
  font-size: 1rem;
  margin-bottom: 0;
}

/* === SEÇÃO: RECURSOS (ANTI-TRAVAMENTOS) === */
.recursos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.recurso-box {
  background: var(--cor-fundo); /* Fundo branco */
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
  transition: transform 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.recurso-box:hover {
  transform: translateY(-5px);
  border-color: var(--cor-primaria);
}
.recurso-box .check-icon {
  font-size: 2.5rem;
  color: var(--cor-verde-cta); /* Check verde para destaque */
  display: block;
  margin-bottom: 10px;
}
.recurso-box h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.recurso-box p {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: var(--cor-texto-secundario);
}

/* SEÇÃO COMO INSTALAR (COM VÍDEO/IMAGEM) */
.instalacao-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.step-card {  
  background: var(--cor-fundo); /* Fundo branco */
  border-radius: 10px;  
  padding: 20px;  
  position: relative;  
  border: var(--largura-borda-card) solid var(--cor-borda-card);
  border-left: 3px solid var(--cor-primaria); /* Destaque azul na esquerda */
}
.step-number {  
  position: absolute;  
  top: 20px;  
  left: -18px;  
  background: var(--cor-primaria); /* Número do passo com destaque */
  color: #ffffff; /* Texto branco */
  width: 36px;  
  height: 36px;  
  border-radius: 50%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 1.2rem;  
  font-weight: 700;  
  border: 2px solid var(--cor-fundo); /* Borda do número */
}
.step-card h4 { color: var(--cor-texto); margin-top: 0; margin-left: 25px; }
.step-card p { margin-bottom: 0; margin-left: 25px; font-size: 1rem;}

/* VÍDEO TUTORIAL (AGORA CARD DE IMAGEM) */
.video-card {
  background: var(--cor-fundo); /* Fundo branco */
  border-radius: 10px;
  overflow: hidden;  
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.video-card h4 {
  font-size: 1.2rem;
  color: var(--cor-primaria);
  padding: 20px 20px 0 20px;  
  margin-bottom: 15px;
  text-align: center;
}
.video-responsive {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* FAQ */
.faq-item {
  background: var(--cor-fundo); /* Fundo branco */
  border-radius: 8px;
  margin-bottom: 10px;
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
}
.faq-item h4 {  
  cursor:pointer;  
  padding: 20px;
  display:flex;  
  justify-content:space-between;  
  align-items:center;  
  color:var(--cor-texto);  
  margin-bottom: 0;
  font-size: 1.2rem; /* Ajuste de tamanho para FAQ */
  font-weight: 500; /* Peso médio para FAQ */
}
.faq-item p {  
  display: none;  
  padding: 0 20px 20px 20px;  
  background: var(--cor-fundo); /* Fundo branco */
  border-top: 1px solid #eee; /* Linha divisória interna sutil */
  margin-bottom: 0;  
  font-size: 1rem;
  border-radius: 0 0 8px 8px;
}
.faq-item.open p { display: block; }
.faq-item h4::after { content: "+"; font-size: 28px; color: var(--cor-primaria); transition: transform 0.3s; }
.faq-item.open h4::after { content: "–"; transform: rotate(180deg); }

/* FOOTER */
footer {  
  text-align:center;  
  padding: 40px 0 20px 0; /* Ajustado */
  margin-top: 40px;  
  border-top: 1px solid #dee2e6; /* Borda cinza */
}
footer .container {
  padding: 0; /* Remove padding do container do footer */
  margin-top: 0;
  background: none; /* Footer não tem fundo de card */
  border: none;
  backdrop-filter: none;
}

/* SEÇÃO DEPOIMENTOS */
.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.depoimento-card {
  background: var(--cor-fundo-transparente); /* Fundo cinza claro */
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
  border-radius: 8px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.depoimento-card p {
  font-style: italic;
  color: var(--cor-texto-secundario);
  flex-grow: 1;
  margin-bottom: 0;  
  font-size: 1rem;
}
.depoimento-header {
  display: flex;
  align-items: center;
  margin-top: 15px;  
}
/* === ESTILO PARA EMOJI NO LUGAR DO AVATAR === */
.depoimento-emoji {
  font-size: 2.5rem; /* Tamanho do emoji */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}
/* Estilo antigo do avatar removido */
.depoimento-info {
  display: flex;
  flex-direction: column;
}
.depoimento-card h4 {
  color: var(--cor-texto); /* Cor do texto principal */
  margin-bottom: 0;  
  font-size: 1.1rem;
}
.depoimento-card span {
  font-size: 0.9rem;
  color: var(--cor-texto-secundario);
}

/* === SEÇÃO: DISPOSITIVOS (imagem) === */
.section-image {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 40px auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--cor-borda-card);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* === SEÇÃO: DISPOSITIVOS (GRID) === */
.dispositivo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.dispositivo-card {
  background: var(--cor-fundo); /* Fundo branco */
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.dispositivo-card:hover {
  transform: translateY(-5px);
  border-color: var(--cor-primaria);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.dispositivo-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
  line-height: 1;
  color: var(--cor-primaria); /* Ícones com a cor primária */
}
.dispositivo-card h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.dispositivo-card p {
  font-size: 0.95rem;
  margin-bottom: 0;
  color: var(--cor-texto-secundario);
}

/* SEÇÃO CTA FINAL */
#section-cta-final {
  background: var(--cor-fundo-transparente); /* Fundo cinza claro */
  border: var(--largura-borda-card) solid var(--cor-borda-card); /* Borda cinza */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  text-align: center; /* === BOTÃO CENTRALIZADO === */
}
#section-cta-final h2 {
  font-size: 2rem;
  color: var(--cor-texto);
  margin-bottom: 15px;
}
#section-cta-final p {
  font-size: 1.1rem;
  color: var(--cor-texto-secundario);
  max-width: 600px;
  margin: 0 auto 30px auto;
}


/* RESPONSIVIDADE */
@media (max-width:768px) {
  h1, #section-hero h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }

  .container {
    padding: 40px 0;
  }
  section.container {
    padding: 30px 20px;
    margin-top: 20px;
  }
  
  /* Grid de "Sobre" e "Instalação" para coluna única */
  .sobre-grid,
  .instalacao-grid {
    grid-template-columns: 1fr; /* Coluna única no mobile */
  }
  
  .sobre-imagem {
    order: -1; /* Coloca a imagem acima do texto no mobile */
    margin-bottom: 30px;
  }
  
  .sobre-texto h2 {
    text-align: center;
  }

  .video-card {
    margin-top: 30px; /* Espaço entre os passos e o vídeo */
  }

  .menu-toggle { display:block; }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    background-color: rgba(255, 255, 255, 0.98); /* Fundo branco no mobile */
    padding: 20px 0;
    border-bottom: 1px solid #dee2e6;
  }
  .nav-links.active { display: flex; }
  .nav-links li { text-align: center; padding: 10px 0; }
}
/* === FIM DA CORREÇÃO (CHAVE '}' REMOVIDA DAQUI) === */


/* === CÓDIGO ADICIONADO: EFEITO SCROLL NAVBAR === */
.navbar.scrolled {
  /* Fundo 100% branco e sombra quando rolar */
  background-color: rgba(255, 255, 255, 0.98); 
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* === CÓDIGO ATUALIZADO: BOTÃO FLUTUANTE (PRETO/VERDE) === */
.floating-btn {
  position: fixed; 
  bottom: 20px;
  right: 20px;
  
  padding: 12px 20px; 
  
  /* MUDANÇA: Fundo preto */
  background-color: var(--cor-texto); 
  
  /* MUDANÇA: Cor do texto verde */
  color: var(--cor-verde-cta); 
  
  border-radius: 50px; 
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
  z-index: 1000;
  transition: all 0.3s ease;
  
  /* MUDANÇA: Fonte em itálico */
  font-style: italic;
  font-weight: 700; 
  
  /* MUDANÇA: Fonte menor */
  font-size: 0.9rem; 
  text-decoration: none; 
  border: none;
}

/* Efeito ao passar o mouse */
.floating-btn:hover {
  /* MUDANÇA: Um preto mais claro no hover */
  background-color: #333333; 
  /* MUDANÇA: Um verde mais escuro no hover */
  color: var(--cor-verde-cta-hover);
  transform: scale(1.05) translateY(-2px); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}