/* =========================================================
   Inglês com o Português — Página de Captura
   Mobile-first · slices de fundo + texto vivo sobreposto
   ========================================================= */

:root{
  --red:#CE0F19;
  --navy:#111b38;
  --offwhite:#F1F1F1;
  --yellow:#FFFF00;
  --green:#13A025;
  --page-bg:#080d1a;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--page-bg);
  color:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
}
img{display:block;max-width:100%;}

/* coluna do design (mobile) — escala tipografia proporcional à largura */
.page{
  width:100%;
  max-width:480px;
  margin:0 auto;
  container-type:inline-size;
  background:var(--page-bg);
  overflow:hidden;
}

/* destaques de cor */
.hl-red{color:var(--red);}
.hl-yellow{color:var(--yellow);}          /* "QUE PODEM FALAR MELHOR DO QUE EU" = amarelo */
.hl-yellow-text{color:var(--yellow);font-style:italic;} /* "APRENDER INGLÊS" = amarelo */
.promessa-hl{display:inline-block;margin-top:.4em;font-weight:700;}

/* ---------- estrutura base de seção (layout em FLUXO; altura cresce com o conteúdo) ---------- */
.sec{
  position:relative;
  width:100%;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.desktop-fg{display:none;}               /* foreground só no desktop */
.overlay{position:relative;width:100%;}
.brick-wrap{display:contents;}           /* mobile: sem efeito; desktop: vira contêiner de tijolo único */

/* =========================================================
   SEÇÃO 1 — HERO
   ========================================================= */
.sec-hero{
  position:relative;
  background:#001134;               /* mesma cor da base da imagem */
  padding:0;
}
.hero-img{display:block;width:100%;height:auto;}
/* degradê: base do hero some na cor de costura */
.sec-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14%;
  background:linear-gradient(to bottom,rgba(0,17,52,0),#001134);
  pointer-events:none;z-index:1;
}

/* acessibilidade: título oculto (texto já está embutido na imagem) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =========================================================
   SEÇÃO 2 — PROMESSA + FORMULÁRIO
   ========================================================= */
.sec-form{
  background-image:url('../assets/bg-form-clean.jpg');   /* respingo neon removido */
  background-color:#001134;          /* cor de costura com o hero */
  min-height:97cqw;                /* aproxima a proporção da slice, mas pode crescer */
  justify-content:flex-start;
  padding:0 0 9cqw;
}
/* degradê: topo da seção surge a partir da cor de costura */
.sec-form::before{
  content:"";position:absolute;left:0;right:0;top:0;height:16%;
  background:linear-gradient(to bottom,#001134,rgba(0,17,52,0));
  pointer-events:none;z-index:1;
}
.form-copy{padding:0 9cqw;margin-top:-10cqw;position:relative;z-index:2;}  /* sobe até perto da linha de papel recortado */
.promessa{font-size:2.7cqw;font-weight:600;line-height:1.4;max-width:78cqw;margin:0 auto;}
.preencha{font-size:2cqw;font-weight:600;letter-spacing:.04em;margin:4.5cqw 0 3.5cqw;line-height:1.4;}
.form-box{width:100%;max-width:82cqw;margin:0 auto;}   /* mais estreito: setas neon do fundo emolduram o card */
.form-box iframe,.form-box form{width:100%!important;max-width:100%!important;}

/* =========================================================
   SEÇÃO 3 — BENEFÍCIOS (CARDS)
   ========================================================= */
.sec-cards{
  background-image:url('../assets/bg-cards.jpg');
  background-color:#1a0e16;
  min-height:117cqw;
  padding:9cqw 0 9cqw;
}
.cards-copy{padding:0 6cqw;}
.titulo-3{font-size:3.4cqw;font-weight:700;text-transform:uppercase;line-height:1.3;margin-bottom:5cqw;}
.titulo-3 .box-red{
  display:inline-block;background:var(--red);color:#fff;font-style:italic;
  padding:.1em .45em;border-radius:0;margin-top:.35em;
}

/* =========================================================
   SEÇÃO 4 — PRESENTE + OBJEÇÃO
   ========================================================= */
.sec-objecao{
  background-image:url('../assets/bg-objecao.jpg');
  background-color:#060a14;
  justify-content:flex-start;
  padding:6cqw 0 2cqw;            /* fecha o vão até os depoimentos */
}
.objecao-copy{padding:0 7cqw;margin-top:-16cqw;}  /* puxa o bloco do presente p/ cima sem alterar o espaçamento interno */
.gift-row{display:flex;align-items:center;justify-content:center;gap:2cqw;width:100%;margin-bottom:7cqw;}
.gift-img{width:34cqw;height:auto;}
.gift-text{display:flex;flex-direction:column;gap:.45em;text-align:left;font-size:2.6cqw;font-weight:500;}
.gift-text .emais{font-size:4cqw;font-weight:900;letter-spacing:.02em;margin-bottom:.3em;}

/* bloco 1 — alinhado à ESQUERDA */
.objecao-1{
  text-align:left;
  font-size:4cqw;font-weight:800;text-transform:uppercase;line-height:1.25;
  margin-top:18cqw;margin-bottom:5cqw;
}
.obj-quotes{display:flex;flex-direction:column;align-items:flex-start;gap:3cqw;margin-bottom:9cqw;}
.obj-quote{
  display:inline-block;background:var(--red);color:#fff;
  font-style:italic;font-weight:800;font-size:4cqw;line-height:1.15;
  padding:.2em .55em;border-radius:0;
  box-shadow:0 4px 12px -5px rgba(0,0,0,.55);
}
/* bloco 2 — CENTRALIZADO */
.objecao-2{text-align:center;font-size:3cqw;font-weight:400;line-height:1.5;margin-bottom:5cqw;}
.objecao-2 b{font-weight:800;}
.objecao-3{text-align:center;font-size:2.7cqw;font-weight:400;line-height:1.55;margin-bottom:5cqw;}
/* setas empilhadas na vertical */
.chevrons{display:flex;flex-direction:column;align-items:center;line-height:.62;color:var(--yellow);font-size:3.4cqw;}

/* =========================================================
   SEÇÃO 5 — DEPOIMENTOS + CTA FINAL
   ========================================================= */
.sec-cta{
  background-image:url('../assets/bg-cta.jpg');
  background-color:#0a1124;
  background-size:cover;background-position:center bottom;
  position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:2cqw 7cqw 12cqw;
}
/* ---- card de oferta (sóbrio) ---- */
.offer-card{
  width:100%;max-width:90cqw;margin:5cqw auto 0;
  padding:8cqw 6cqw 7cqw;
  background:rgba(9,13,24,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.8);
}
.cta-titulo{
  display:flex;flex-direction:column;align-items:center;gap:.18em;
  font-size:3.9cqw;font-weight:700;text-transform:uppercase;
  line-height:1.22;margin:0 0 3.5cqw;
}
.cta-titulo span{display:block;}
.cta-titulo .hl-yellow-text{font-weight:800;}
.cta-sticker{display:inline-block;background:var(--red);color:#fff;font-style:italic;font-weight:800;padding:.1em .45em;border-radius:0;margin-top:.25em;}
.cta-sub{
  font-size:2.4cqw;font-weight:400;line-height:1.5;
  max-width:74cqw;margin:0 auto 5cqw;color:#cfd4de;
}
.btn-aluno{
  display:inline-block;background:var(--green);
  color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;
  font-size:3.1cqw;letter-spacing:.03em;
  padding:3.2cqw 10cqw;border-radius:9px;
  box-shadow:0 6px 16px -8px rgba(19,160,37,.7),0 2px 5px rgba(0,0,0,.4);
  transition:transform .15s ease,filter .15s ease;
}
.btn-aluno:hover{filter:brightness(1.07);transform:translateY(-2px);}
.see-you{
  font-size:3.6cqw;font-style:italic;color:var(--yellow);margin-top:5cqw;
}

/* =========================================================
   CARROSSEL (scroll-snap, JS mínimo)
   ========================================================= */
.carousel{position:relative;width:100%;overflow:hidden;}
.carousel-track{
  display:flex;align-items:center;
  will-change:transform;
  padding:3cqw 0;
}
.slide{
  flex:0 0 auto;box-sizing:border-box;
  transform:scale(.8);opacity:.45;
  transition:transform .4s ease,opacity .4s ease;
}
.slide.is-active{transform:scale(1);opacity:1;}
.slide img{width:100%;height:auto;border-radius:6px;}
.carousel-dep .slide img{border-radius:10px;}

.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.35);color:var(--offwhite);border:none;
  width:9cqw;height:9cqw;border-radius:50%;cursor:pointer;
  font-size:4cqw;line-height:1;display:flex;align-items:center;justify-content:center;
  z-index:2;transition:background .2s;
}
.car-arrow:hover{background:rgba(0,0,0,.6);}
.car-arrow.prev{left:-1cqw;}
.car-arrow.next{right:-1cqw;}

/* =========================================================
   MOBILE only (<768px) — ajustes finos de tamanho
   ========================================================= */
@media (max-width:767px){
  .carousel-dep{--slide-pct:.80;}            /* card central dos depoimentos um pouco maior */
  .promessa{font-size:3.2cqw;}
  .preencha{font-size:2.4cqw;}
  .gift-text{font-size:3.1cqw;}
  .objecao-2{font-size:3.6cqw;}
  .objecao-3{font-size:3.2cqw;}
  .cta-sub{font-size:3.5cqw;}                /* "Então clique no botão abaixo..." */
}

/* =========================================================
   TABLET (≥768px) — desencaixotado, largura total
   (o design mobile vertical ocupa a largura inteira; o desktop
   ≥1024px reescreve para o layout horizontal boxed.)
   ========================================================= */
@media (min-width:768px){
  .page{max-width:none;box-shadow:none;}

  /* formulário: remove as setas (usa textura navy), centraliza e fecha o vão abaixo */
  .sec-form{background:url('../assets/tex-navy.jpg') center/cover no-repeat,#001134;min-height:auto;}
  .form-box{max-width:460px;margin:0 auto;position:relative;}
  .form-box form,.form-box iframe{width:100%!important;}

  /* cards de benefício ~1,5x */
  .sec-cards .carousel{--slide-w:470px;}

  /* cards de depoimentos ~2,5x */
  .sec-cta .carousel-dep{--slide-w:800px;}
}

/* =========================================================
   DESKTOP (≥1024px) — LAYOUT HORIZONTAL
   (só afeta o desktop; o mobile vertical fica intacto)
   ========================================================= */
@media (min-width:1024px){
  body{background:#0a1530;}                         /* fundo azul escuro (mais claro que #010205) */
  body::before{display:none;}
  .page{
    max-width:1000px;width:100%;margin:0 auto;     /* sem espaço em cima/embaixo; caixa centralizada nas laterais */
    container-type:normal;
    background:var(--page-bg);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10),       /* borda luminosa sutil: separa do fundo */
      0 0 60px 4px rgba(0,0,0,.8),
      0 44px 120px -18px rgba(0,0,0,.9),
      0 0 130px 14px rgba(40,110,255,.24),   /* luz neon azul atrás da caixa */
      0 0 210px 44px rgba(206,15,25,.15);    /* leve neon vermelho da marca */
  }
  .sec{aspect-ratio:auto!important;background-image:none;min-height:auto;display:block;text-align:center;}
  .overlay{position:static;}

  /* ---- HERO: faixa larga, imagem do feed centralizada ---- */
  .sec-hero{
    background:var(--page-bg) url('../assets/hero-desktop.png') center/cover no-repeat;
    aspect-ratio:1774 / 779 !important;       /* hero preenche a caixa de 1000px */
    min-height:0;
    padding:0;
  }
  .sec-hero .hero-img{display:none;}        /* no desktop usa o banner de fundo */
  .sec-hero::after{display:none;}

  /* ---- FORM: promessa à ESQUERDA; "preencha" + formulário à DIREITA ---- */
  .sec-form{
    background:
      linear-gradient(to bottom, rgba(0,17,52,0) 62%, #001134 100%),   /* rodapé desbota p/ a cor de costura */
      url('../assets/tex-navy.jpg') center/cover no-repeat,#001134;
    padding:8vh 5rem;
  }
  .sec-form::before{                          /* degradê suave vindo do hero */
    content:"";display:block;position:absolute;left:0;right:0;top:0;height:130px;
    background:linear-gradient(to bottom,#001134,rgba(0,17,52,0));
    pointer-events:none;z-index:1;
  }
  .sec-form .form-copy{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;
    align-items:center;max-width:880px;margin:0 auto;padding:0;
  }
  .promessa{grid-column:1;grid-row:1 / span 2;align-self:center;font-size:1.3rem;max-width:none;text-align:left;margin:0;}
  .preencha{grid-column:2;grid-row:1;font-size:.8rem;text-align:center;letter-spacing:.05em;margin:0 0 1rem;}
  .form-box{grid-column:2;grid-row:2;max-width:460px;margin:0;}

  /* ---- CARDS + OBJEÇÃO sobre UM ÚNICO tijolo (sem costura) ---- */
  .brick-wrap{
    display:block;
    background:
      linear-gradient(to bottom,#001134 0,rgba(0,17,52,0) 230px),   /* suaviza a transição vinda do formulário */
      url('../assets/tex-brick-flip.jpg') center/cover no-repeat;
  }
  .sec-cards{
    background:transparent;
    padding:7vh 2rem 7vh;
  }
  .titulo-3{font-size:2rem;margin-bottom:14vh;}   /* empurra os cards p/ baixo (centralizados no vão) */
  .sec-cards .carousel{max-width:none;margin:0 auto;overflow:visible;}
  .sec-cards .carousel-track{transform:none!important;display:flex;justify-content:center;flex-wrap:nowrap;gap:1.2rem;padding:0;}
  .sec-cards .slide{
    transform:none!important;opacity:1!important;flex:0 0 285px!important;width:285px!important;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  }
  .sec-cards .slide:hover{transform:translateY(-8px)!important;box-shadow:0 16px 34px -12px rgba(0,0,0,.7);filter:brightness(1.06);}
  .sec-cards .car-arrow{display:none;}

  /* ---- OBJEÇÃO ---- */
  .sec-objecao{
    background:linear-gradient(to bottom, rgba(4,7,23,0) 42%, #040717 72%);  /* tijolo vem do contêiner; aqui só o fade p/ navy */
    padding:7vh 2rem 0;
  }
  .objecao-copy{max-width:820px;margin:0 auto;padding:0;display:flex;flex-direction:column;min-height:920px;}
  .gift-row{gap:2.2rem;margin-bottom:0;flex-shrink:0;}
  .gift-img{width:220px;}
  .gift-text{font-size:1.35rem;}
  .gift-text .emais{font-size:2.4rem;}
  .objecao-1{font-size:1.9rem;text-align:left;margin:auto 0 3rem;}   /* margin-top:auto empurra o bloco p/ baixo; alinhado à esquerda */
  .obj-quotes{align-items:flex-start;gap:1.4rem;margin-bottom:3.4rem;}
  .obj-quote{font-size:1.6rem;}
  .objecao-2{font-size:1.2rem;line-height:1.6;margin-bottom:3rem;}
  .objecao-2 b{font-weight:800;}
  .objecao-3{font-size:1.1rem;line-height:1.6;margin-bottom:3rem;}
  .chevrons{font-size:1.4rem;}   /* sem auto embaixo: setas ficam perto dos depoimentos */

  /* ---- DEPOIMENTOS (navy sólido) + CTA FINAL (bandeira) ---- */
  .sec-cta{
    background:#040717;            /* navy escuro sólido atrás dos depoimentos */
    padding:0 0 8vh;
    position:relative;
  }
  .sec-cta::after{                 /* a bandeira aparece só atrás do CTA final */
    content:"";position:absolute;left:0;right:0;bottom:0;height:560px;z-index:0;
    background:
      linear-gradient(to bottom,#040717,rgba(4,7,23,0) 90px),
      url('../assets/tex-flag.jpg') center/cover no-repeat;
  }
  .sec-cta > *{position:relative;z-index:1;}
  /* depoimentos: center-mode infinito; corte rente à borda do encaixotado; card central maior */
  .sec-cta .carousel-dep{--slide-w:500px;max-width:none;margin:0 auto 3rem;overflow:hidden;}
  .carousel-dep .car-arrow{display:flex;width:42px;height:42px;font-size:18px;}
  .carousel-dep .car-arrow.prev{left:0;}
  .carousel-dep .car-arrow.next{right:0;}
  .offer-card{max-width:600px;padding:2.6rem 3rem 2.2rem;margin:0 auto;}
  .cta-titulo{font-size:2rem;margin:0 0 1.2rem;}
  .cta-sub{font-size:1.1rem;max-width:460px;margin:0 auto 1.6rem;}
  .btn-aluno{font-size:1.2rem;padding:1rem 3rem;}
  .see-you{font-size:1.6rem;margin-top:1.4rem;}
}