:root{
  --green:#008a4c;
  --green-bright:#70ff9c;
  --green-soft:#c2f7d8;
  --green-dark:#0d2e29;
  --green-black:#091713;

  --red:#e22d21;
  --red-hover:#bd251b;

  --text:#181818;
  --muted:#626767;

  --white:#ffffff;
  --bg:#ffffff;
  --bg-alt:#f6f7f6;

  --border:#e7e9e7;

  --radius-sm:14px;
  --radius:18px;
  --radius-lg:26px;

  --shadow:
    0 16px 38px rgba(0,0,0,.09);

  --shadow-soft:
    0 8px 24px rgba(0,0,0,.06);
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  min-height:100%;
}

body{
  font-family:
    'Montserrat',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;

  color:var(--text);
  background:var(--bg);

  line-height:1.5;

  overflow-x:hidden;
}

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

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

button{
  border:0;
}

[hidden]{
  display:none !important;
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;

  width:1px;
  height:1px;

  overflow:hidden;
}

.skip-link:focus{
  position:fixed;
  z-index:9999;

  top:1rem;
  left:1rem;

  width:auto;
  height:auto;

  padding:.7rem 1rem;

  background:#111;
  color:#fff;

  border-radius:8px;
}


/* =========================================================
   CONTAINER
========================================================= */

.wrap{
  width:min(100% - 2rem, 1120px);
  margin-inline:auto;
}


/* =========================================================
   ANIMAÇÃO INICIAL
========================================================= */

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.strip,
.grid,
.instagram-section,
.footer{
  opacity:0;
}

body.loaded .strip,
body.loaded .grid,
body.loaded .instagram-section,
body.loaded .footer{
  animation:
    fadeIn
    .55s
    ease-out
    forwards;
}

body.loaded .grid{
  animation-delay:.08s;
}

body.loaded .instagram-section{
  animation-delay:.14s;
}

body.loaded .footer{
  animation-delay:.2s;
}


/* =========================================================
   BOTÕES
========================================================= */

.btn{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:54px;

  padding:.95rem 1.65rem;

  border:2px solid transparent;
  border-radius:999px;

  cursor:pointer;

  font-size:.86rem;
  font-weight:800;

  letter-spacing:.045em;

  text-align:center;
  text-transform:uppercase;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);

  box-shadow:
    0 8px 24px rgba(0,0,0,.14);
}

.btn:active{
  transform:translateY(0);
}

.btn--solid{
  background:var(--red);
  color:#fff;

  border-color:var(--red);
}

.btn--solid:hover,
.btn--solid:focus-visible{
  background:var(--red-hover);
  border-color:var(--red-hover);
}

.btn--ghost{
  background:#fff;
  color:var(--green);

  border-color:var(--green);
}

.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:var(--green);
  color:#fff;
}

.btn--instagram{
  background:#fff;
  color:var(--green-dark);

  border-color:#d8ddd9;
}

.btn--instagram:hover,
.btn--instagram:focus-visible{
  border-color:var(--green);
}


/* =========================================================
   LOADING DO BOTÃO
========================================================= */

.btn.loading{
  pointer-events:none;
}

.btn.loading .btn__text{
  visibility:hidden;
  opacity:0;
}

.btn.loading::after{
  content:"";

  position:absolute;

  width:22px;
  height:22px;

  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;

  border-radius:50%;

  animation:spinner .6s linear infinite;
}

@keyframes spinner{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   HERO — MOBILE FIRST
========================================================= */

.strip--split{
  background:
    linear-gradient(
      180deg,
      #080b09 0%,
      #0d1813 100%
    );

  color:#fff;

  overflow:hidden;
}

.strip--split .strip__grid{
  min-height:100svh;

  display:grid;

  grid-template-rows:
    auto
    minmax(280px, 1fr);

  width:100%;
}

.strip__copy{
  position:relative;

  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding:
    1.35rem
    1.1rem
    1.55rem;

  text-align:center;
}

.hero__logo{
  display:inline-flex;

  margin-bottom:1.1rem;
}

.hero__logo img{
  width:118px;
  height:auto;
}

.h1{
  max-width:12ch;

  font-size:
    clamp(
      2rem,
      9.4vw,
      2.65rem
    );

  font-weight:900;

  line-height:1.06;

  letter-spacing:-.035em;
}

.brand-kicker{
  color:var(--green-bright);
}

.sub{
  max-width:34rem;

  margin-top:1rem;

  color:#e7ebe8;

  font-size:
    clamp(
      .95rem,
      4vw,
      1.07rem
    );

  line-height:1.55;
}

.strip__actions{
  width:100%;

  margin-top:1.25rem;
}

.hero-cta{
  width:100%;
  max-width:350px;
}

.strip__media{
  position:relative;

  min-height:280px;

  overflow:hidden;
}

.strip__media::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(8,14,10,.36) 0%,
      rgba(8,14,10,0) 24%
    );
}

.strip__media img{
  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center 42%;
}


/* =========================================================
   BENEFÍCIOS
========================================================= */

.grid{
  background:#fff;
}

.grid__inner{
  display:grid;

  grid-template-columns:1fr;

  gap:2.3rem;

  padding-block:
    clamp(
      2.6rem,
      8vw,
      4.4rem
    );
}

.grid__benefits h2{
  margin-bottom:1.15rem;

  color:var(--green);

  font-size:
    clamp(
      1.65rem,
      7vw,
      2.05rem
    );

  font-weight:900;

  line-height:1.15;

  letter-spacing:-.025em;
}

.bullets{
  list-style:none;

  display:grid;

  gap:.65rem;
}

.bullets li{
  display:flex;

  align-items:center;

  gap:.75rem;

  min-height:62px;

  padding:.82rem .95rem;

  background:var(--bg-alt);

  border:1px solid #e9ebe9;
  border-radius:var(--radius-sm);

  font-size:.92rem;

  line-height:1.38;

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.bullets li strong{
  font-weight:800;
}

.bullet-icon{
  width:22px;
  height:22px;

  flex:0 0 auto;

  color:var(--green);
}

.bullets li:hover{
  transform:translateX(3px);

  background:#f1f8f4;

  border-color:
    rgba(0,138,76,.35);
}


/* =========================================================
   INDICADORES
========================================================= */

.highlights{
  display:grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:.5rem;

  margin-top:1.15rem;
}

.hl{
  display:flex;

  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  min-width:0;

  padding:
    .9rem
    .35rem;

  background:#fff;

  border:1px solid var(--border);
  border-radius:var(--radius-sm);

  text-align:center;

  font-size:
    clamp(
      .72rem,
      3vw,
      .84rem
    );

  line-height:1.35;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.hl__big{
  display:block;

  margin-bottom:.25rem;

  color:var(--green);

  font-size:
    clamp(
      1.45rem,
      7vw,
      1.75rem
    );

  font-weight:900;

  line-height:1;
}

.hl:hover{
  transform:translateY(-3px);

  box-shadow:var(--shadow-soft);
}


/* =========================================================
   FORM
========================================================= */

.card{
  background:
    linear-gradient(
      155deg,
      #103a33 0%,
      var(--green-dark) 55%,
      #08231f 100%
    );

  color:#fff;

  border-radius:var(--radius-lg);

  box-shadow:var(--shadow);

  padding:
    1.7rem
    1.25rem;
}

.form-card__intro{
  margin-bottom:1.35rem;
}

.form-card__eyebrow{
  display:block;

  margin-bottom:.35rem;

  color:var(--green-soft);

  font-size:.72rem;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.card__title{
  font-size:
    clamp(
      1.6rem,
      7vw,
      2rem
    );

  font-weight:900;

  line-height:1.1;

  letter-spacing:-.025em;
}

.card__subtitle{
  margin-top:.65rem;

  color:#dceee5;

  font-size:.92rem;

  line-height:1.55;
}

.form-card .field{
  display:grid;

  gap:.38rem;

  margin-top:.9rem;
}

.field label{
  color:#c8eed9;

  font-size:.84rem;

  font-weight:700;
}

input[type="text"],
input[type="tel"]{
  width:100%;

  min-height:52px;

  padding:.82rem .95rem;

  color:#111;

  background:#f2f8f5;

  border:2px solid #355f4b;
  border-radius:11px;

  outline:none;

  font-size:.95rem;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

input::placeholder{
  color:#939b97;
}

input:focus{
  background:#fff;

  border-color:#37c77e;

  box-shadow:
    0 0 0 4px
    rgba(54,199,125,.17);
}

input[aria-invalid="true"]{
  border-color:#ff9b91;
}

.consent{
  display:flex;

  align-items:flex-start;

  gap:.65rem;

  margin:1rem 0 1.05rem;

  color:#daf1e5;

  font-size:.8rem;

  font-weight:500;

  line-height:1.45;
}

.consent input{
  width:18px;
  height:18px;

  flex:0 0 auto;

  margin-top:.1rem;

  accent-color:var(--green);
}

.consent a{
  color:#fff;

  font-weight:700;

  text-decoration:underline;

  text-underline-offset:2px;
}

.form-submit{
  position:relative;

  width:100%;
}

.form-note{
  margin-top:.72rem;

  color:#b9d7c9;

  font-size:.74rem;

  line-height:1.4;

  text-align:center;
}

.feedback{
  min-height:1.3rem;

  margin-top:.55rem;

  color:#fff;

  font-size:.78rem;

  font-weight:700;

  line-height:1.45;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.instagram-section{
  padding-block:
    clamp(
      3rem,
      9vw,
      5.2rem
    );

  background:#f5f7f5;

  border-top:1px solid #e8ebe8;
}

.instagram-header{
  display:flex;

  flex-direction:column;

  gap:1.2rem;

  margin-bottom:1.65rem;
}

.instagram-eyebrow{
  display:block;

  margin-bottom:.35rem;

  color:var(--green);

  font-size:.76rem;

  font-weight:900;

  letter-spacing:.06em;

  text-transform:uppercase;
}

.instagram-header h2{
  max-width:650px;

  color:var(--green-dark);

  font-size:
    clamp(
      1.75rem,
      7vw,
      2.35rem
    );

  font-weight:900;

  line-height:1.12;

  letter-spacing:-.03em;
}

.instagram-header p{
  max-width:570px;

  margin-top:.55rem;

  color:var(--muted);

  font-size:.95rem;

  line-height:1.55;
}

.instagram-header__cta{
  display:none;
}

.instagram-track{
  display:flex;

  gap:.9rem;

  overflow-x:auto;

  padding:
    0
    1rem
    1rem
    0;

  scroll-snap-type:x mandatory;

  scrollbar-width:thin;

  scrollbar-color:
    #aab5ae
    transparent;
}

.instagram-track::-webkit-scrollbar{
  height:6px;
}

.instagram-track::-webkit-scrollbar-thumb{
  background:#aab5ae;

  border-radius:999px;
}

.instagram-item{
  flex:
    0
    0
    min(88vw, 360px);

  min-width:0;

  scroll-snap-align:start;

  overflow:hidden;

  background:#fff;

  border:1px solid #e2e6e3;
  border-radius:18px;

  box-shadow:var(--shadow-soft);
}

.instagram-media{
  width:100% !important;

  min-width:0 !important;

  max-width:100% !important;

  margin:0 !important;

  background:#fff !important;

  border:0 !important;

  box-shadow:none !important;
}

.instagram-media > a{
  display:flex;

  align-items:center;
  justify-content:center;

  min-height:420px;

  padding:2rem;

  color:var(--green);

  font-weight:800;

  text-align:center;
}

.instagram-mobile-cta{
  display:flex;

  justify-content:center;

  margin-top:1.3rem;
}

.instagram-mobile-cta .btn{
  width:100%;
  max-width:360px;
}


/* =========================================================
   THANK YOU
========================================================= */

.thankyou{
  min-height:65vh;

  background:#fff;
}

.thankyou__hero{
  position:relative;

  display:flex;

  align-items:center;
  justify-content:center;

  height:
    clamp(
      250px,
      45vw,
      410px
    );

  overflow:hidden;

  background:#000;
}

.thankyou__hero picture,
.thankyou__hero picture img{
  width:100%;
  height:100%;
}

.thankyou__hero img{
  object-fit:cover;
}

.thankyou__logo{
  position:absolute;

  left:1.2rem;
  bottom:1.2rem;

  width:
    clamp(
      115px,
      24vw,
      160px
    );

  height:auto !important;

  filter:
    drop-shadow(
      0
      4px
      12px
      rgba(0,0,0,.5)
    );
}

.thankyou__content{
  padding-block:
    3rem
    4rem;

  text-align:center;
}

.thankyou__eyebrow{
  display:block;

  margin-bottom:.45rem;

  color:var(--green);

  font-size:.76rem;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}

.thankyou__content .h1{
  max-width:none;

  color:var(--green-dark);

  font-size:
    clamp(
      2rem,
      8vw,
      2.7rem
    );
}

.thankyou__content p{
  max-width:650px;

  margin:
    .9rem
    auto
    1.8rem;

  color:var(--muted);

  font-size:1rem;

  line-height:1.65;
}


/* =========================================================
   CTA FLUTUANTE MOBILE
========================================================= */

.floating-cta{
  position:fixed;

  z-index:200;

  left:12px;
  right:12px;

  bottom:
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  display:flex;

  align-items:center;
  justify-content:center;

  min-height:54px;

  padding:.8rem 1rem;

  color:#fff;

  background:var(--red);

  border-radius:999px;

  box-shadow:
    0
    10px
    30px
    rgba(0,0,0,.25);

  font-size:.86rem;

  font-weight:900;

  letter-spacing:.045em;

  text-align:center;
  text-transform:uppercase;

  opacity:0;

  pointer-events:none;

  transform:
    translateY(
      calc(
        100% +
        30px
      )
    );

  transition:
    transform .25s ease,
    opacity .25s ease;
}

.floating-cta.is-visible{
  opacity:1;

  pointer-events:auto;

  transform:translateY(0);
}


/* =========================================================
   FOOTER
========================================================= */

.footer{
  background:var(--green);

  color:#fff;
}

.footer__inner{
  display:flex;

  flex-direction:column;

  align-items:center;

  gap:1.4rem;

  padding-block:
    2rem
    2.3rem;

  text-align:center;
}

.footer__brand img{
  width:145px;
}

.footer__content{
  display:grid;

  gap:.65rem;

  max-width:720px;
}

.footer p{
  font-size:.84rem;

  line-height:1.55;
}

.footer__instagram{
  width:max-content;

  max-width:100%;

  margin-inline:auto;

  font-size:.84rem;

  font-weight:800;

  text-decoration:underline;

  text-underline-offset:3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width:640px){

  .wrap{
    width:min(100% - 3rem, 1120px);
  }

  .strip__copy{
    padding-inline:2rem;
  }

  .card{
    padding:2rem;
  }

  .instagram-item{
    flex-basis:360px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:900px){

  /* HERO */

  .strip--split .strip__grid{
    min-height:580px;

    display:grid;

    grid-template-columns:
      1.1fr
      .9fr;

    grid-template-rows:1fr;

    align-items:stretch;
  }

  .strip__copy{
    align-items:flex-start;

    justify-content:center;

    padding:
      4rem
      3rem
      4rem
      max(
        3rem,
        calc(
          (100vw - 1120px) / 2 +
          1rem
        )
      );

    text-align:left;
  }

  .hero__logo{
    margin-bottom:2rem;
  }

  .hero__logo img{
    width:155px;
  }

  .h1{
    max-width:12ch;

    font-size:
      clamp(
        2.5rem,
        4vw,
        3.25rem
      );

    line-height:1.08;
  }

  .sub{
    max-width:520px;

    margin-top:1.15rem;

    font-size:1.02rem;
  }

  .strip__actions{
    width:auto;

    margin-top:1.55rem;
  }

  .hero-cta{
    width:auto;

    min-width:230px;
  }

  .strip__media{
    height:100%;

    min-height:580px;
  }

  .strip__media::after{
    background:
      linear-gradient(
        90deg,
        rgba(10,20,14,.22),
        transparent 20%
      );
  }

  .strip__media img{
    height:100%;

    object-fit:cover;

    object-position:center;
  }


  /* INSTAGRAM */

  .instagram-header{
    flex-direction:row;

    align-items:flex-end;
    justify-content:space-between;

    gap:2rem;
  }

  .instagram-header__cta{
    display:inline-flex;

    flex:0 0 auto;
  }

  .instagram-mobile-cta{
    display:none;
  }

}


/* =========================================================
   DESKTOP MAIOR
========================================================= */

@media (min-width:960px){

  .grid__inner{
    grid-template-columns:
      minmax(0, 1.12fr)
      minmax(340px, .88fr);

    align-items:start;

    gap:3.2rem;
  }

  .grid__benefits h2{
    font-size:1.8rem;
  }

  .bullets li{
    min-height:58px;

    padding:.78rem 1rem;

    font-size:.9rem;
  }

  .card{
    position:sticky;

    top:1.5rem;
  }

}


/* =========================================================
   INSTAGRAM 3 COLUNAS
========================================================= */

@media (min-width:1080px){

  .instagram-track{
    display:grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:1rem;

    overflow:visible;

    padding:0;
  }

  .instagram-item{
    width:100%;

    min-width:0;
  }

}


/* =========================================================
   FOOTER DESKTOP
========================================================= */

@media (min-width:768px){

  .footer__inner{
    flex-direction:row;

    justify-content:space-between;

    gap:3rem;

    text-align:left;
  }

  .footer__content{
    justify-items:end;
  }

  .footer p{
    text-align:right;
  }

  .footer__instagram{
    margin:0;
  }

}


/* =========================================================
   CTA FLUTUANTE APENAS MOBILE
========================================================= */

@media (min-width:768px){

  .floating-cta{
    display:none;
  }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

}