@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

:root{
  --teal:#0b5663;
  --teal-2:#0a4c57;
  --dark:#0f1722;
  --dark-2:#1a2433;
  --yellow:#f5c400;
  --cream:#f3e7c6;
  /* alias kept for older styles */
  --beige:var(--cream);
  --green:#1aa64a;
  --green-2:#13883c;
  --text:#0b1220;
  --white:#ffffff;
}

.highlight-yellow{color:var(--yellow);}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
}

img{max-width:100%;height:auto;display:block}

.container{
  width:min(1200px, 92vw);
  margin:0 auto;
}

a{color:inherit;text-decoration:none}
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border-radius:14px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:14px;
  border:0;
  cursor:pointer;
  transition:transform .08s ease, filter .2s ease, background .2s ease;
  user-select:none;
}

.wa-img{
  display:inline-block;
  background: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  line-height: 0;
}
.wa-img img{
  display:block;
  height: auto;
  width: auto;
  max-width: 100%;
}
.btn:active{transform:translateY(1px)}
.btn--wa:hover{background:var(--green-2)}
.btn__icon{
  width:34px;height:34px;border-radius:999px;
  background:rgba(255,255,255,.18);
  display:grid;place-items:center;
  flex:0 0 auto;
}

.top-wa{
  /* Na LP original, o CTA após os depoimentos fica no mesmo fundo escuro da seção */
  background:var(--dark-2);
  padding:14px 0;
}
.top-wa .container{
  display:flex;
  justify-content:center;
}
.top-wa a.wa-img{
  display:inline-block;
  padding:0;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.top-wa a.wa-img img{
  /* CTA do WhatsApp maior (como no original) */
  width:640px;
  max-width:100%;
  height:auto;
  display:block;
}

/* ===== Ajustes finos conforme a LP original (prints do inspector) =====
   Nas seções de depoimentos (quote-section), o espaçamento vertical é bem menor.
   Mantemos o fundo e o card, apenas reduzindo o padding do bloco. */
.dark.quote-section{
  padding-top:10px !important;
  padding-bottom:10px !important;
}
.dark.quote-section > .container{
  padding-top:10px !important;
  padding-bottom:10px !important;
}

.hero{
  position:relative;
  /* fundo no tom creme, como na LP original */
  background-color:var(--cream);
  background-image:url('../images/hero/hero-group-fishing.png');
  background-size:cover;
  background-position: 80% 42%;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero::before{display:none}
.hero__inner{position:relative;z-index:1;min-height:640px;display:flex;gap:40px;align-items:center;padding:56px 0 34px}
.hero__copy{max-width:560px}
.hero__copy p{width:400px; max-width:100%}
.hero__cta img{width:400px; max-width:100%; height:auto; display:block}


.logo{margin-bottom:18px}
.logo img{width:170px;max-width:100%;height:auto;display:block}

.hero h1{
  margin:0 0 18px;
  color:var(--teal);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height:1.02;
  letter-spacing:.3px;
  font-weight:900;
  text-transform:uppercase;
}
.hero p{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.45;
  color:#174b54;
}
.hero p strong{font-weight:900}
.hero__cta{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.hero__min{
  font-size:14px;
  color:#2d5560;
}
.hero__min strong{font-weight:900}
.hero__art{
  position:relative;
}
.hero__art img{
  width:100%;
  max-width:640px;
  margin-left:auto;
}

.section-title{
  text-align:center;
  margin:0 0 26px;
  font-weight:900;
  text-transform:uppercase;
  color:var(--teal);
  letter-spacing:.6px;
  font-size: clamp(26px, 3.3vw, 48px);
  line-height:1.05;
}

.benefits{
  background: var(--yellow) url("../images/patterns/pattern-honeycomb-yellow.png") repeat;
  padding:56px 0 64px;
}
.benefits .section-title{color:var(--teal-2)}
.benefits__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  align-items:start;
  margin-top:22px;
}
.benefits__grid img{
  width:100%;
  height:140px;
  object-fit:contain;
  border-radius:14px;
}

.benefits__grid--row2{
  align-items:start;
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
  width:min(820px, 100%);
  margin-left:auto;
  margin-right:auto;
}

.dark{
  /* fundo escuro igual ao original */
  background:var(--dark-2);
  color:#d8e7ea;
}
.dark--teal{
  /* Apenas a seção "Da represa" usa o fundo azul/teal do original */
  background: var(--teal);
}
.dark .container{padding:64px 0}
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:42px;
  align-items:center;
}

/* Mantém o texto e o botão com a mesma “largura” do bloco do título
   (igual na LP original), evitando que o parágrafo passe da lateral do título. */
.split__copy{
  max-width: 560px;
}
.split__copy > *{
  max-width: 560px;
}

/* garante que texto e botões fiquem alinhados no mesmo eixo do título */
.split > div:not(.card-img){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.split > div:not(.card-img) .inline-wa{
  align-self:flex-start;
}
.card-img{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.h2-yellow{
  margin:0 0 14px;
  font-weight:900;
  text-transform:uppercase;
  color:var(--yellow);
  letter-spacing:.6px;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height:1.05;
}
.dark p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.55;
  color:#d8e7ea;
}
.dark p strong{font-weight:900;color:#fff}
.dark p strong.highlight-yellow{color:var(--yellow);}
.inline-wa{margin-top:18px}
.inline-wa .wa-img{align-self:flex-start;}

.section-divider{
  height:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.18) 100%);
}

.quote{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:30px;
}
.quote__title{
  font-weight:900;
  text-transform:uppercase;
  color:var(--yellow);
  letter-spacing:.6px;
  font-size: clamp(26px, 3vw, 46px);
  margin:0 0 14px;
  line-height:1.05;
}
.quote__text{
  color:#e7f0f2;
  font-size:16px;
  line-height:1.65;
  margin:0;
  max-width:400px;
  width:400px;
}
.quote__text strong{font-weight:900;color:#fff;}
.quote__author{white-space:nowrap;}
.quote__by{
  margin:0;
  color:#cfe3e7;
  font-style:italic;
  font-size:13px;
}

.process{
  background:var(--yellow);
  padding:70px 0 78px;
}
.process .section-title{color:var(--teal-2)}
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:26px;
  margin-top:26px;
}
.step{
  text-align:center;
  color:#153b44;
}
.step__n{
  width:70px;height:70px;border-radius:14px;
  background:var(--teal-2);
  color:#fff;
  display:grid;place-items:center;
  font-weight:900;
  font-size:26px;
  margin:0 auto 14px;
}
.step__h{
  margin:0 0 10px;
  font-weight:900;
  /* LP original: títulos pretos e centralizados */
  color:var(--teal-2);
  text-align:center;
  font-size:22px;
}
.step__p{
  /* LP original: texto mais “fechado” e centralizado embaixo do título */
  margin:0 auto;
  text-align:center;
  max-width:280px;
  font-size:16px;
  line-height:1.6;
  color:#111;
}

.final{
  background:linear-gradient(180deg, #121b28 0%, #0c121c 100%);
  padding:70px 0 80px;
  color:#fff;
}
.final__card{
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:36px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:26px;
  align-items:center;
}
.final__big{
  margin:0;
  font-weight:900;
  text-transform:uppercase;
  color:var(--yellow);
  letter-spacing:.6px;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height:1.05;
}
.final__right{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  justify-content:center;
}
.final__small{
  margin:0;
  color:#d7e3e6;
  line-height:1.5;
  font-size:14px;
}

.footer{
  background:#0c121c;
  padding:22px 0;
  color:#b7c6cb;
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
}
Vpx;
  width:auto;
  /* deixa o texto do logo branco no rodapé */
  filter: brightness(0) invert(1);
  }
.footer__copy{
  font-size:12px;
  color:#9db2b9;
}

/* --- Fix final CTA (igual original) --- */
.final__right{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-left:32px;
  border-left:2px solid var(--yellow);
}
.final__btn{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  background: var(--green);
  color:#fff;
  padding:18px 28px;
  border-radius:14px;
  font-weight:800;
  font-size:16px;
  letter-spacing:.3px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.final__btn:hover{ background: var(--green-2); }

/* --- Footer igual original (ícones esquerda, logo centro, copyright direita) --- */
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.footer__social{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:120px;
}
.social__link{
  border:0;
  background:transparent;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:#fff;
  transition: opacity .2s ease;
}
.social__icon{
  width: 21px;
  height: 21px;
  display:block;
  border:0;
  outline:0;
  filter: brightness(0) invert(1);
}

.social__link:hover{
  opacity:.9;
  transform:none;
}

.footer__brand{
  flex:1;
  display:flex;
  justify-content:center;
}
.footer__brand img{
  height:32px;
  width:auto;
  filter:none;
}

.footer__copy{
  min-width:320px;
  text-align:right;
}

/* Responsive */

/* === Inspector-matched widths (desktop) === */
.dark.dark--teal.story .split__copy p{
  width:450px;
  max-width:450px;
}
.dark.quote-section .quote__text{
  width:400px;
  max-width:400px;
}

@media (max-width: 980px){
  /* Reset fixed widths on mobile */
  .dark.dark--teal.story .split__copy p,
  .dark.quote-section .quote__text{
    width:100%;
    max-width:100%;
  }

  .hero__inner{flex-direction:column; align-items:flex-start; padding:40px 0 26px}
  .hero__art img{max-width:560px;margin:0 auto}
  .benefits__grid{grid-template-columns:1fr; max-width:400px;
  width:400px; margin-left:auto; margin-right:auto}
  .benefits__grid--row2{
  align-items:start;grid-template-columns:1fr; max-width:520px}
  .split{grid-template-columns:1fr}
  .dark .container{padding:46px 0}
  .steps{grid-template-columns:1fr; max-width:400px;
  width:400px; margin-left:auto; margin-right:auto}
  .final__card{grid-template-columns:1fr}
  .footer__inner{flex-direction:column; text-align:center}

/* Mobile adjustments for final/footers */
.final__right{
  border-left:none;
  padding-left:0;
  padding-top:24px;
}
.footer__inner{
  flex-direction:column;
  gap:16px;
  text-align:center;
}
.footer__brand{order:1;}
.footer__social{order:2; justify-content:center; min-width:unset;}
.footer__copy{order:3; min-width:unset; text-align:center;}
}
.benefits__grid--row2 img{width:100%; height:140px; object-fit:contain; border-radius:14px;}

.btn__icon img{width:22px; height:22px; display:block;}

.headline-dark{
  /* Na LP original, o título desta área faz parte do mesmo bloco escuro dos depoimentos
     (sem “faixa”/quebra de cor entre o título e os containers). */
  background:var(--dark-2);
  padding:56px 0 18px;
}
.headline-dark h2{
  margin:0;
  text-align:center;
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size: clamp(28px, 3.6vw, 54px);
  line-height:1.06;
}

@media (max-width: 768px){
  /* HERO mobile - match LP original */
  .hero{
    background-position: 80% 42%;
  text-align: center;}
  .hero::before{content:none !important; display:none !important; background:none !important; opacity:0 !important;}
  .hero__inner{
    min-height: 100vh;
    padding: 26px 0 22px;
    align-items: center;
    justify-content: flex-start;
  }
  .hero__copy{
    max-width:100%;
    width:100%;
    text-align:center;
    padding: 0 10px;
  }
  .logo{display:flex; justify-content:center; margin-bottom:14px;}
  .logo img{width:150px; height:auto; margin:0 auto;}
  .hero h1{
    margin:0 0 14px;
    font-size: 34px;
    line-height: 1.08;
  }
  .hero__copy p{
    margin: 0 auto 14px;
    width: min(420px, 92%);
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 16px;
    line-height: 1.35;
  }
  .hero__copy p strong{color:#fff;}
  .hero__cta{display:flex; flex-direction:column; align-items:center;}
  .hero__cta img{width: min(360px, 92%); margin: 0 auto; height:auto; display:block;}
  .hero__min{color:#fff; font-size:14px; margin-top:6px;}

  /* FIX: centralizar somente os titulos amarelos (mobile) */
  .h2-yellow,
  .quote__title,
  .final__big{
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

}


/* Footer social icons (SVG/img) */
Ppx;
  height: 28px;
  display: block;
}
.footer__social .social__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:#fff;
  transition: opacity .2s ease;
}
.social__icon{
  width: 21px;
  height: 21px;
  display:block;
  border:0;
  outline:0;
  filter: brightness(0) invert(1);
}



/* Mid CTA (botão verde antes do processo) */
.midcta{
  padding: 10px 0 26px;
}
.midcta__container{
  display:flex;
  justify-content:center;
}
.midcta__btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background: var(--green);
  color:#fff;
  padding:14px 26px;
  border-radius:999px;
  font-weight:800;
  font-size:16px;
  letter-spacing:.3px;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.midcta__btn img{
  width:28px;
  height:28px;
  flex:0 0 auto;
}
@media (max-width: 480px){
  .midcta__btn{
    font-size:14px;
    padding:12px 18px;
  }
  .midcta__btn img{
    width:24px;
    height:24px;
  }
}

/* CTA dentro do bloco de depoimentos */
.dark.quote-section .midcta__container{margin-top:18px; padding-bottom:10px;}


/* Override: Mid CTA uses image button (no faixa branca, dentro do bloco cinza) */
.midcta__btn{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.midcta__btn .midcta__imgbtn{
  width: 527px;
  max-width: min(527px, 92vw);
  height: auto;
  display: block;
}
@media (max-width: 480px){
  .midcta__btn .midcta__imgbtn{
    max-width: 92vw;
  }
}

/* Hover efeito botões WhatsApp */
a:hover img,
.btn:hover,
.button:hover,
a.whatsapp:hover,
a[href*="wa.me"]:hover {
    filter: brightness(1.15);
    transition: all 0.25s ease;
}


/* === MOBILE HERO (match original) === */
@media (max-width: 768px){
  .hero{
    background-position: 80% 42%;
  text-align: center;}
  .hero::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:55%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.85) 100%);
    pointer-events:none;
    z-index:1;
  }
  .hero__inner{ position:relative; z-index:2; }
  .hero__copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    align-items:center !important;
    text-align:center !important;
    padding: 18px 16px 22px !important;
    min-height: 720px;
  }
  .hero .logo img{ width: 150px !important; height:auto; margin: 0 auto; }
  .hero h1{
    margin: 14px 0 0 !important;
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: .5px;
  }
  .hero p{
    margin: 0 auto 12px !important;
    max-width: 360px;
    background: rgba(0,0,0,0.70);
    border-radius: 18px;
    padding: 18px 16px;
    color:#fff !important;
  }
  .hero__cta{
    margin-top:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap: 10px !important;
  }
  .hero__min{ color:#fff !important; opacity:.95; }
  .hero .wa-img img{ width: 320px !important; max-width: 100% !important; height:auto !important; }
}


/* === MOBILE HERO FIX: sem luminosidade no topo + centralizado (igual original) === */
@media (max-width: 768px){
  /* garante imagem limpa (sem filtro/opacity) */
  .hero, .hero-section, .hero-bg, .hero-banner{
    filter: none !important;
  text-align: center;}

  /* Se o hero usa IMG */
  .hero img, .hero-section img, .hero-bg img, img.hero-mobile-img{
    filter: none !important;
    opacity: 1 !important;
    object-fit: cover !important;
    object-position: center 45% !important; /* centraliza o grupo */
  }

  /* Se o hero usa background-image */
  .hero, .hero-section, .hero-bg, .hero-banner{
    background-position: 80% 42%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* remove qualquer overlay claro no topo */
  .hero:before, .hero::before,
  .hero:after, .hero::after,
  .hero-section:before, .hero-section::before,
  .hero-section:after, .hero-section::after,
  .hero-bg:before, .hero-bg::before,
  .hero-bg:after, .hero-bg::after,
  .hero-banner:before, .hero-banner::before,
  .hero-banner:after, .hero-banner::after{
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  /* aplica SOMENTE o degradê escuro na base (para leitura do texto) */
  .hero, .hero-section, .hero-bg, .hero-banner{
    position: relative !important;
    overflow: hidden !important;
  }
  .hero .hero-bottom-gradient,
  .hero-section .hero-bottom-gradient,
  .hero-bg .hero-bottom-gradient,
  .hero-banner .hero-bottom-gradient{
    display: none !important;
  }
  .hero .hero__bottom-fade,
  .hero-section .hero__bottom-fade,
  .hero-bg .hero__bottom-fade,
  .hero-banner .hero__bottom-fade{
    display:none !important;
  }

  .hero .mobile-bottom-fade,
  .hero-section .mobile-bottom-fade,
  .hero-bg .mobile-bottom-fade,
  .hero-banner .mobile-bottom-fade{
    display:none !important;
  }

  .hero::after,
  .hero-section::after,
  .hero-bg::after,
  .hero-banner::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.0) 70%) !important;
  }

  /* garante que o conteúdo (texto/botão) fique acima do degradê */
  .hero * , .hero-section * , .hero-bg * , .hero-banner *{
    position: relative;
    z-index: 2;
  }
}


@media (max-width: 768px){
  .hero-overlay, .hero__overlay, .overlay, .bg-overlay, .hero-overlay-light{
    background: none !important;
    opacity: 1 !important;
  text-align: center;}
}

/* Ajuste MOBILE: descer somente o bloco de texto (p) do hero */
@media (max-width: 768px){
  .hero .hero__copy > p{
    top: 270px !important;
  text-align: center;}
}