*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --roxo:#540E68;
  --lilas:#B580C4;
  --carvao:#373435;
  --azul:#71A1E2;
  --azul-claro:#71C8E2;
  --off-white:#F0F3F5;
}
html{scroll-behavior:smooth;}
body{font-family:'Libre Franklin',sans-serif;background:var(--off-white);color:var(--carvao);overflow-x:hidden;}

/* NAVBAR */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 5rem;
  transition:background 0.4s,backdrop-filter 0.4s,box-shadow 0.4s;
}
/* BARRA COM EFEITO DE VIDRO (GLASSMORPHISM) */
nav.scrolled{
  /* Mudamos de 0.88 para 0.65 para a água aparecer no fundo */
  background:rgba(10,30,55,0.65);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 20px rgba(0,0,0,0.25);
}
/* Páginas internas (carrinho, produto, pagamento): fundo sólido para logo ficar visível */
nav.nav-interna{
  background:rgba(10,30,55,0.95);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 20px rgba(0,0,0,0.25);
}
.nav-logo a{display:inline-flex;align-items:center;}
.nav-logo img{height:45px;width:auto;}
.nav-links{display:flex;gap:2rem;}
.nav-links a{font-size:14px;color:rgba(255,255,255,0.82);text-decoration:none;font-weight:400;transition:color 0.2s;}
.nav-links a:hover{color:#fff;}
.nav-cta{
  padding:10px 24px;border-radius:25px;
  background:linear-gradient(90deg,var(--azul),var(--azul-claro));
  color:#fff;font-size:14px;font-weight:600;border:none;cursor:pointer;
  font-family:'Libre Franklin',sans-serif;
  transition:transform 0.2s,box-shadow 0.2s;
  box-shadow:0 4px 15px rgba(113,200,226,0.3);
  text-decoration:none;
  display:inline-block;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(113,200,226,0.45);}
.nav-acoes{display:flex;align-items:center;gap:0.6rem;}
.nav-conta{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.4);color:#fff;text-decoration:none;transition:background 0.2s,border-color 0.2s;flex-shrink:0;}
.nav-conta:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.7);}
.nav-interna .nav-conta{border-color:rgba(255,255,255,0.5);}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* O PARALLAX NO DESKTOP: fixed ativado e posição focada ao centro direito */
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('images/hero-garrafa-acqua.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: right center;
}

.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(5,20,50,0.75) 0%,
    rgba(5,20,50,0.70) 30%,
    rgba(5,20,50,0.40) 55%,
    rgba(5,20,50,0.05) 80%,
    rgba(5,20,50,0.0) 100%);
}
.hero-content{
  position:relative;
  z-index:3;
  /* Aumentamos o espaçamento esquerdo (último valor) para 32rem */
  padding:8rem 4rem 6rem 32rem; 
  /* Aumentamos a largura para o texto não encolher */
  width:60%; 
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:0.06em;
  padding:6px 16px;border-radius:25px;
  background:rgba(113,200,226,0.15);
  border:1px solid rgba(113,200,226,0.35);
  color:var(--azul-claro);margin-bottom:1.6rem;
  opacity:0;animation:fadeUp 0.8s 0.1s ease forwards;
  width:fit-content;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--azul-claro);}
.hero h1{
  font-size:clamp(40px,4vw,56px);
  font-weight:800;
  color:#fff;
  line-height:1.15;
  margin-bottom:1.2rem;
  opacity:0;animation:fadeUp 0.8s 0.25s ease forwards;
}
.hero h1 span{color:var(--azul-claro);}
.hero-sub{
  font-size:17px;color:rgba(255,255,255,0.75);
  line-height:1.75;margin-bottom:2.2rem;
  font-weight:400;max-width:440px;
  opacity:0;animation:fadeUp 0.8s 0.4s ease forwards;
}
.cta-hero{
  display:inline-block;padding:16px 36px;border-radius:35px;
  background:linear-gradient(90deg,var(--azul),var(--azul-claro));
  color:#fff;font-size:16px;font-weight:700;
  border:none;cursor:pointer;font-family:'Libre Franklin',sans-serif;
  text-decoration:none;
  box-shadow:0 8px 30px rgba(113,200,226,0.4);
  transition:transform 0.25s,box-shadow 0.25s;
  opacity:0;animation:fadeUp 0.8s 0.55s ease forwards;
  width:auto;
}
.cta-hero:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(113,200,226,0.55);}
.selos{
  display:flex;gap:1.5rem;margin-top:2rem;flex-wrap:wrap;
  opacity:0;animation:fadeUp 0.8s 0.7s ease forwards;
}
.selo{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,0.55);}
.selo-check{
  width:18px;height:18px;border-radius:50%;
  background:rgba(113,161,226,0.2);border:1px solid rgba(113,161,226,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--azul);flex-shrink:0;
}
.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,0.35);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  animation:bounce 2.5s infinite;
  pointer-events:none;
}
.scroll-arrow{
  width:18px;height:18px;
  border-right:1.5px solid rgba(255,255,255,0.3);
  border-bottom:1.5px solid rgba(255,255,255,0.3);
  transform:rotate(45deg);
}

/* PROBLEMA */
.secao-problema{
  background:#fff;padding:6rem 5rem;
  display:flex;align-items:center;justify-content:center;gap:4rem;flex-wrap:wrap;
}
.problema-texto{max-width:520px;}
.secao-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--azul);margin-bottom:1rem;}
.problema-texto h2{font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--carvao);line-height:1.2;margin-bottom:1.2rem;}
.problema-texto p{font-size:16px;line-height:1.8;color:#555;}
.problema-stats{display:flex;flex-direction:column;gap:1.2rem;min-width:260px;}
.stat-card{background:var(--off-white);border-radius:16px;padding:1.2rem 1.5rem;border-left:3px solid var(--azul-claro);}
.stat-numero{font-size:28px;font-weight:800;color:var(--azul);}
.stat-desc{font-size:13px;color:#777;margin-top:2px;line-height:1.4;}

/* SOLUCAO */
.secao-solucao{background:var(--off-white);padding:6rem 5rem;text-align:center;}
.secao-solucao h2{font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--carvao);margin-bottom:1rem;max-width:600px;margin-left:auto;margin-right:auto;}
.secao-solucao .sub{font-size:16px;color:#666;line-height:1.75;max-width:520px;margin:0 auto 3rem;}
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:1000px;margin:0 auto;}
.pilar{background:#fff;border-radius:20px;padding:2rem 1.5rem;text-align:left;box-shadow:0 2px 20px rgba(0,0,0,0.06);transition:transform 0.25s,box-shadow 0.25s;border-top:3px solid var(--azul-claro);display:flex;flex-direction:column;justify-content:space-between;}
.pilar:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.1);}
.pilar-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--azul),var(--azul-claro));display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:20px;}
.pilar h3{font-size:16px;font-weight:700;color:var(--carvao);margin-bottom:0.6rem;}
.pilar p{font-size:14px;color:#666;line-height:1.65;}
.pilar-dado{margin-top:0.8rem;font-size:13px;font-weight:600;color:var(--azul);background:rgba(113,161,226,0.1);display:inline-block;padding:3px 10px;border-radius:20px;}

/* PROVA */
.secao-prova{
  background:linear-gradient(90deg,rgba(10,30,61,0.80) 0%,rgba(10,48,85,0.55) 60%,rgba(10,48,85,0.20) 100%),
  url('images/hero-garrafa-acqua.jpg') !important;
  background-attachment:fixed !important;
  background-size:cover !important;
  background-position:right center !important;
  
  /* Mantemos o respiro e a organização que fizemos antes */
  padding: 8rem 5rem; 
  text-align: center; 
}
.secao-prova h2{font-size:clamp(24px,3vw,36px);font-weight:700;color:#fff;margin-bottom:1rem;}
.secao-prova .sub{font-size:16px;color:rgba(255,255,255,0.7);line-height:1.75;max-width:560px;margin:0 auto 2.5rem;}
.prova-cards{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;max-width:900px;margin:0 auto 2.5rem;}
.prova-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:1.5rem;min-width:180px;}
.prova-card-titulo{font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.5rem;}
.prova-card-valor{font-size:22px;font-weight:800;color:var(--azul-claro);}
.prova-card-sub{font-size:12px;color:rgba(255,255,255,0.45);margin-top:3px;}
.btn-laudo{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:25px;border:1.5px solid rgba(113,200,226,0.5);color:var(--azul-claro);font-size:14px;font-weight:600;font-family:'Libre Franklin',sans-serif;cursor:pointer;background:transparent;text-decoration:none;transition:background 0.2s,border-color 0.2s;}
.btn-laudo:hover{background:rgba(113,200,226,0.1);border-color:var(--azul-claro);}
.selos-cert{display:flex;justify-content:center;gap:2rem;margin-top:2.5rem;flex-wrap:wrap;}
.selo-cert{font-size:12px;color:rgba(255,255,255,0.45);display:flex;align-items:center;gap:6px;}
.selo-cert-icon{width:8px;height:8px;border-radius:50%;background:var(--azul-claro);}

/* COMO USAR */
.secao-usar{background:#fff;padding:6rem 5rem;text-align:center;}
.secao-usar h2{font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--carvao);margin-bottom:0.8rem;}
.secao-usar .sub{font-size:16px;color:#666;margin-bottom:3rem;}
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;max-width:900px;margin:0 auto;}
.passo{background:var(--off-white);border-radius:20px;padding:2rem 1.5rem;transition:transform 0.25s;}
.passo:hover{transform:translateY(-3px);}
.passo-num{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--azul-claro));color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.passo h3{font-size:15px;font-weight:700;color:var(--carvao);margin-bottom:0.5rem;}
.passo p{font-size:14px;color:#777;line-height:1.6;}

/* DEPOIMENTOS */
.secao-depoimentos{background:var(--off-white);padding:6rem 5rem;text-align:center;}
.secao-depoimentos h2{font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--carvao);margin-bottom:3rem;}
.depoimentos-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  max-width:900px;
  margin:0 auto;
}
.depoimento-card{
  background:#fff;border-radius:20px;padding:2rem;
  text-align:left;box-shadow:0 2px 15px rgba(0,0,0,0.06);
  display:flex;flex-direction:column;gap:1rem;
}
.depo-estrelas{font-size:14px;letter-spacing:2px;}
.depo-texto{
  font-size:14px;color:#555;line-height:1.75;
  font-style:italic;flex:1;
}
.depo-autor{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--off-white);padding-top:1rem;
}
.depo-inicial{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--azul),var(--azul-claro));
  color:#fff;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.depo-autor strong{display:block;font-size:14px;color:var(--carvao);}
.depo-autor span{font-size:12px;color:#aaa;}

/* ANCORAGEM DE PRECO */
.secao-preco{
  background-image: linear-gradient(90deg, rgba(113,161,226,0.65) 0%, rgba(113,200,226,0.2) 60%, rgba(255,255,255,0) 100%), url('images/hero-garrafa-acqua.jpg') !important;
  background-color: transparent !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: right center !important;
  
  /* Altura da seção e textos empurrados para a esquerda */
  padding: 15rem 5rem 8rem 45rem;
  text-align: left;
}

.secao-preco h2{
  /* Diminuímos o limite máximo da fonte de 36px para 30px */
  font-size:clamp(24px, 2.5vw, 30px);
  font-weight:800;
  color:#0a1e3d;
  margin-bottom:1rem;
  /* Aumentamos a "caixa" de 500px para 600px para a frase caber em uma linha */
  max-width: 600px; 
}

.secao-preco .sub{
  font-size:17px;
  color:#0a1e3d;
  line-height:1.75;
  max-width:500px; 
  margin:0 0 2rem 0; 
}

.preco-destaque{
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:20px;
  padding:1.5rem 2.5rem;
  display:inline-block;
  max-width: 500px; 
}

.preco-destaque p{
  font-size:17px;
  color:#0a1e3d;
  font-weight:500; /* Deixei o texto normal um pouco mais leve para o negrito saltar mais aos olhos */
  line-height:1.7;
}

.preco-destaque strong{
  color:#0a1e3d;
  font-weight:800;
  /* Retiramos a regra de 22px daqui! 
     Agora ele herda o tamanho exato de 17px do parágrafo, mantendo apenas o negrito forte. */
}
/* GARANTIA */
.secao-garantia{background:#fff;padding:5rem;text-align:center;}
.garantia-box{max-width:560px;margin:0 auto;background:var(--off-white);border-radius:24px;padding:3rem;border:2px solid rgba(113,161,226,0.2);}
.garantia-icon{font-size:48px;margin-bottom:1rem;}
.garantia-box h2{font-size:26px;font-weight:700;color:var(--carvao);margin-bottom:1rem;}
.garantia-box p{font-size:15px;color:#666;line-height:1.75;}
.prazo{margin-top:1.2rem;font-size:14px;font-weight:600;color:var(--azul);background:rgba(113,161,226,0.1);display:inline-block;padding:6px 18px;border-radius:20px;}

/* FAQ */
.secao-faq{background:var(--off-white);padding:6rem 5rem;}
.secao-faq h2{font-size:clamp(24px,3vw,36px);font-weight:700;color:var(--carvao);margin-bottom:2.5rem;text-align:center;}
.faq-lista{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}
.faq-item{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.faq-pergunta{width:100%;padding:1.3rem 1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;color:var(--carvao);cursor:pointer;background:none;border:none;font-family:'Libre Franklin',sans-serif;text-align:left;}
.faq-icone{font-size:18px;color:var(--azul);transition:transform 0.3s;flex-shrink:0;}
.faq-resposta{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s;font-size:15px;color:#666;line-height:1.75;padding:0 1.5rem;}
.faq-item.aberto .faq-resposta{max-height:200px;padding:0 1.5rem 1.3rem;}
.faq-item.aberto .faq-icone{transform:rotate(45deg);}

/* CTA FINAL */
.secao-cta-final{background:var(--carvao);padding:6rem 5rem;text-align:center;}
.secao-cta-final h2{font-size:clamp(26px,3.5vw,44px);font-weight:800;color:#fff;margin-bottom:1rem;line-height:1.2;}
.secao-cta-final h2 span{color:var(--azul-claro);}
.secao-cta-final .sub{font-size:17px;color:rgba(255,255,255,0.6);max-width:480px;margin:0 auto 2.5rem;line-height:1.7;}
.cta-final{display:inline-block;padding:18px 44px;border-radius:35px;background:linear-gradient(90deg,var(--azul),var(--azul-claro));color:#fff;font-size:17px;font-weight:700;border:none;cursor:pointer;font-family:'Libre Franklin',sans-serif;text-decoration:none;box-shadow:0 10px 35px rgba(113,200,226,0.4);transition:transform 0.25s,box-shadow 0.25s;}
.cta-final:hover{transform:translateY(-3px);box-shadow:0 16px 45px rgba(113,200,226,0.55);}

/* RODAPE */
footer{background:#1a1a2a;padding:3rem 5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;}
.footer-logo img{height:36px;opacity:0.85;}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap;}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:rgba(255,255,255,0.8);}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.3);}

/* STICKY MOBILE */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;padding:1rem 1.5rem;background:rgba(10,30,55,0.95);backdrop-filter:blur(10px);border-top:1px solid rgba(113,200,226,0.2);}
.sticky-cta a{display:block;width:100%;padding:14px;border-radius:25px;background:linear-gradient(90deg,var(--azul),var(--azul-claro));color:#fff;font-size:16px;font-weight:700;text-align:center;text-decoration:none;font-family:'Libre Franklin',sans-serif;}

/* ANIMACOES */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

/* 📱 MOBILE RESPONSIVE (Até 768px de tela) */
.acqua-bottle-bg { display: none; }

@media(max-width:768px){

  nav { z-index: 100; padding: 1rem 1.5rem; }
  .nav-links { display: none; }
  .sticky-cta { display: block; z-index: 99; }

  /* Hero — garrafa à direita, estática */
  /* Hero bg — mobile */
.hero-bg {
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: 70% center !important;
}

  /* Overlay — escuro à esquerda, garrafa aparece à direita */
  .hero-overlay {
  background: linear-gradient(
    to right,
    rgba(5,20,50,0.65) 0%,
    rgba(5,20,50,0.45) 40%,
    rgba(5,20,50,0.10) 100%
  );
}

.secao-prova {
  background: linear-gradient(
    to right,
    rgba(5,20,50,0.75) 0%,
    rgba(5,20,50,0.75) 100%
  ), url('images/hero-garrafa-acqua.jpg') center center / cover no-repeat !important;
  background-attachment: scroll !important;
  padding: 4rem 1.5rem;
}

.secao-preco {
  background: linear-gradient(
    to right,
    rgba(5,20,50,0.65) 0%,
    rgba(5,20,50,0.45) 40%,
    rgba(5,20,50,0.10) 100%
  ), url('images/hero-garrafa-acqua.jpg') 70% center / cover no-repeat !important;
  background-attachment: scroll !important;
  padding: 4rem 1.5rem;
  text-align: left;
}
/* Textos seção preço mobile */
.secao-preco h2 { max-width: 100%; }
.preco-destaque { max-width: 100%; }
.secao-preco .sub { max-width: 65%; width: 65%; font-size: 14px; }

 /* Textos hero */
.hero h1 {
  font-size: clamp(28px,8vw,40px);
  color: #fff;
  word-break: keep-all;
}
.hero h1 span { color: #fff; }
.hero-sub { color: rgba(255,255,255,0.85); font-size: 15px; }

/* Conteúdo hero */
.hero-content {
  position: relative;
  z-index: 3;
  padding: 6rem 1.5rem 6rem 1.5rem;
  max-width: 60%;
  width: 60%;
}

  /* Grids e layouts */
  .secao-problema { flex-direction: column; padding: 4rem 1.5rem; }
  .secao-solucao, .secao-usar, .secao-depoimentos,
  .secao-garantia, .secao-faq, .secao-cta-final { padding: 4rem 1.5rem; }
  .pilares, .passos, .depoimentos-grid { grid-template-columns: 1fr; }
  .prova-cards { flex-direction: column; align-items: center; }
  .selos { flex-direction: column; gap: 0.8rem; }
  .pilar, .stat-card, .prova-card, .passo { text-align: center; }
  .pilar-icon { margin: 0 auto 1rem; }
  .pilar-dado { display: block; margin: 0.8rem auto 0; }
  footer { padding: 2rem 1.5rem; flex-direction: column; text-align: center; }
}