/* ============================================================
   Blue Growth — página de captura (Telegram)
   Construída sobre os tokens do design system (css/tokens.css).
   Regra de ouro: nenhuma cor, espaçamento, raio ou sombra literal
   aqui — tudo sai de var(--…). Assim a página acompanha o design
   system se ele mudar.
   ============================================================ */

/* ---------- Componentes reaproveitados do design system ---------- */

/* Button — espelha components/core/Button.jsx */
.bg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-ui);font-weight:var(--fw-semibold);letter-spacing:-.01em;
  height:var(--control-md);padding:0 var(--sp-5);font-size:var(--fs-body);
  border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:var(--t-color),var(--t-elevate);
}
.bg-btn:active{transform:scale(.985)}
.bg-btn i{font-size:1.15em}

.bg-btn--sm{height:var(--control-sm);padding:0 var(--sp-4);font-size:var(--fs-sm)}
.bg-btn--lg{height:var(--control-lg);padding:0 var(--sp-6);font-size:var(--fs-body-lg)}
.bg-btn--xl{height:var(--control-xl);padding:0 var(--sp-8);font-size:var(--fs-body-lg)}

.bg-btn--primary{background:var(--blue-500);color:var(--text-on-accent);box-shadow:var(--glow-blue-sm)}
.bg-btn--primary:hover{background:var(--blue-400);box-shadow:var(--glow-blue-sm),var(--glow-blue-md);color:var(--text-on-accent)}

.bg-btn--secondary{background:var(--surface-raised);color:var(--text-hi);border-color:var(--stroke-strong)}
.bg-btn--secondary:hover{background:var(--surface-overlay);color:var(--text-hi)}

/* conversion: a pílula verde-neon — só para o CTA principal */
.bg-btn--conversion{
  background:var(--grad-cta);color:var(--text-on-green);
  box-shadow:var(--glow-green);font-style:italic;
  border-color:rgba(255,255,255,.25);
}
.bg-btn--conversion:hover{box-shadow:var(--glow-green-strong);filter:brightness(1.06);color:var(--text-on-green)}

/* Card — espelha components/surfaces/Card.jsx (tons default/glow/accent/inverted/quiet) */
.bg-card{
  position:relative;border-radius:var(--r-lg);padding:var(--card-pad);
  background:var(--surface-card);color:var(--text-body);
  border:1px solid var(--stroke);box-shadow:var(--shadow-sm),var(--inner-top-light);
  transition:var(--t-elevate),var(--t-color);
}
.bg-card--glow{box-shadow:var(--shadow-sm),var(--inner-top-light),var(--glow-blue-inset)}
.bg-card--accent{
  background:var(--grad-blue-card);color:#fff;
  border-color:rgba(255,255,255,.22);
  box-shadow:var(--shadow-md),var(--inner-top-light-strong),0 0 48px rgba(2,61,253,.35);
}
.bg-card--inverted{
  background:var(--grad-silver-card);color:var(--text-on-inverted);
  border-color:rgba(255,255,255,.5);box-shadow:var(--shadow-md);
}
.bg-card--quiet{background:rgba(255,255,255,.03);border-color:var(--stroke-subtle);box-shadow:none}

/* ---------- Layout ---------- */

.shell{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

.section{
  display:flex;flex-direction:column;gap:var(--sp-10);
  padding-block:var(--section-y-mobile);
}
@media (min-width:900px){ .section{padding-block:var(--section-y)} }

.section-head{
  display:flex;flex-direction:column;gap:var(--sp-3);
  text-align:center;align-items:center;max-width:720px;margin:0 auto;
}
.section-head .bg-display-md{font-size:clamp(24px,3vw,36px)}
.hi{color:var(--text-hi);font-weight:var(--fw-bold)}

.grid-2,.grid-3,.grid-4{display:grid;gap:var(--card-gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ---------- Hero ---------- */

.hero{
  position:relative;overflow:hidden;
  background:var(--surface-sunken);
  min-height:min(86vh,720px);display:flex;align-items:center;
}
/* Arte do hero fundida ao fundo.
   Esta imagem já nasce 16:9 com o lado esquerdo vazio para o texto, então
   ocupa o hero inteiro — não é um retrato em coluna lateral. Só as bordas
   são dissolvidas na cor do canvas (--void): esquerda, topo e base. O azul
   da imagem é da mesma família do azul da marca, por isso não é lavado. */
/* A camada da arte é travada na largura natural da imagem (1600px) e
   centralizada. Antes ela ocupava 100% da largura e o "cover" precisava
   AMPLIAR o arquivo para preencher — em monitor de 2469px isso dava 54%
   de zoom e o rosto virava um close. Agora a imagem nunca passa do tamanho
   original: em telas menores ela encolhe, em telas maiores sobra canvas dos
   dois lados, e as bordas do próprio elemento são dissolvidas no fundo. */
.hero__art{
  position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);
  width:min(100%,1600px);
  overflow:hidden;
}
/* A imagem mora no ::before para que o filtro atinja só ela. Aplicado no
   elemento inteiro, o filtro também cairia sobre os degradês do ::after:
   a cor do canvas ficaria diferente da cor ao redor e apareceria uma emenda. */
.hero__art::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/img/hero.jpg") center 26%/cover no-repeat;
  background-image:image-set(url("../assets/img/hero.webp") type("image/webp"),url("../assets/img/hero.jpg") type("image/jpeg"));
  filter:brightness(.86) saturate(1.05);
}
.hero__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--void) 0%,rgba(5,7,12,.88) 22%,rgba(5,7,12,.5) 44%,rgba(5,7,12,.12) 66%,rgba(5,7,12,0) 80%,rgba(5,7,12,0) 93%,var(--void) 100%),
    linear-gradient(180deg,rgba(5,7,12,.5) 0%,rgba(5,7,12,0) 16%,rgba(5,7,12,0) 62%,var(--void) 100%);
}
/* O brilho azul da marca passa por cima da foto: é ele que costura
   o preto neutro do estúdio com o preto azulado do site. */
.hero__glow{position:absolute;inset:0;background:var(--grad-canvas-glow)}
/* O texto do hero usa o mesmo contêiner centralizado das outras seções
   (1180px + o mesmo respiro lateral do .shell). Sem isso, em telas largas
   a copy grudava na borda esquerda enquanto o resto da página ficava
   centralizado — o desalinhamento aparecia forte em monitor ultrawide. */
.hero__inner{
  position:relative;
  width:100%;
  max-width:calc(1180px + clamp(16px,4vw,40px) * 2);
  margin-inline:auto;
  padding:clamp(32px,6vw,72px) clamp(16px,4vw,40px);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);
}
/* A coluna de texto continua estreita dentro do contêiner largo,
   para a leitura não atravessar a imagem. */
.hero__inner > *{max-width:min(100%,620px)}
.hero__title{font-size:clamp(30px,4.4vw,48px)}
.hero__lead{max-width:var(--prose-max)}
.hero__lead em{color:var(--text-hi);font-style:italic}
.hero__cta{align-self:flex-start}

/* Quanto mais larga a tela, mais o cover corta a imagem na vertical: em
   ultrawide o recorte passa de 700px e decepava o topo da cabeça. A âncora
   sobe e o hero ganha altura para reduzir o corte. */
@media (min-width:1700px){
  .hero{min-height:min(86vh,820px)}
}
@media (max-width:1100px){
  .hero__art::before{background-position:56% 34%}
}
@media (max-width:760px){
  /* A arte do celular é quadrada e foi composta para isto: o rosto ocupa a
     metade de cima e a metade de baixo é praticamente preta. Então o hero
     ganha altura fixa, a imagem entra inteira no topo e a copy desce para a
     área escura — sem véu por cima do rosto. */
  /* A imagem aparece INTEIRA: a camada da arte vira um quadrado do tamanho
     da largura da tela (100vw), encostado no topo. Como a caixa é quadrada e
     o arquivo também, o cover não corta nada. O hero reserva esse espaço com
     padding-top e a copy desce para baixo da foto. */
  .hero{min-height:0;align-items:flex-end;padding-top:132.8vw}
  /* Em telas curtas o hero fechava exatamente na dobra, e nada indicava
     que havia página abaixo. Encurtando as bordas, uma faixa da próxima
     seção aparece e a rolagem fica óbvia. */
  .hero__inner{padding-block:24px 28px}
  .hero__art{
    top:0;bottom:auto;left:0;
    width:100%;height:132.8vw;
    transform:none;
  }
  .hero__inner{align-items:center;text-align:center;gap:0}
  .hero__inner > *{max-width:100%}

  /* A quebra manual do título é boa no desktop e ruim aqui: ela deixa
     "mercado financeiro" sozinho numa linha curta. No celular o navegador
     distribui melhor sozinho. */
  .quebra-desk{display:none}
  /* Sem a quebra manual, o navegador precisa equilibrar sozinho — senão
     em telas estreitas o título do CTA final abre em quatro linhas. */
  .final-cta__card h2{text-wrap:balance}
  .final-cta__card p{text-wrap:pretty}
  .hero__title{
    font-size:clamp(27px,7.6vw,32px);
    line-height:1.14;
    text-wrap:balance;
  }

  /* O subtítulo pertence ao título: fica perto dele. O botão é outra
     coisa — ganha respiro antes para o toque não ser por acidente. */
  .hero__lead{margin-top:12px;font-size:17px;line-height:1.5;text-wrap:balance}
  .hero__cta{align-self:stretch;margin-top:28px}
  /* No celular a arte 16:9 é recortada com força pelo cover, então a âncora
     vai para 70% da largura, onde está a pessoa. Fica como fundo apagado sob
     um véu vertical, para o texto continuar legível. */
  .hero__art::before{
    background-image:url("../assets/img/hero-mobile.jpg");
    background-image:image-set(url("../assets/img/hero-mobile.webp") type("image/webp"),url("../assets/img/hero-mobile.jpg") type("image/jpeg"));
    background-position:center;
    background-size:cover;
    opacity:1;
    filter:brightness(.95) saturate(1.05);
  }
  .hero__art::after{
    /* Só a base da foto se dissolve no fundo, para ela não terminar
       num corte reto em cima do texto. */
    background:linear-gradient(180deg,rgba(5,7,12,0) 48%,rgba(5,7,12,.35) 74%,rgba(5,7,12,.8) 90%,var(--void) 100%);
  }
}

/* ---------- Problema ---------- */

.problem{
  display:grid;gap:var(--sp-8);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  padding:clamp(24px,4vw,56px);border-radius:var(--r-2xl);
}
.problem__title{font-size:clamp(22px,2.6vw,32px)}
.problem__body{display:flex;flex-direction:column;gap:var(--sp-5)}
.problem__body em{font-style:italic}

/* ---------- Cards de feature ---------- */

.feature{
  display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-6);border-radius:var(--r-xl);min-height:230px;
}
.feature > i{font-size:30px;color:var(--text-hi)}
.feature h3{margin-top:auto}
.feature--sm{min-height:190px;gap:var(--sp-3);padding:var(--sp-5)}
.feature--sm > i{font-size:26px}

/* No celular os cartões ficam um embaixo do outro, e aí o min-height com o
   título empurrado para a base (que no desktop alinha os quatro títulos na
   mesma linha) só abre um buraco de 70px entre o ícone e o título.
   Aqui o ícone vai para o lado do título e o cartão encolhe para o conteúdo. */
@media (max-width:760px){
  .feature{
    min-height:0;
    display:grid;grid-template-columns:auto 1fr;
    align-items:center;
    column-gap:12px;row-gap:6px;
    padding:var(--sp-5);
  }
  .feature > i{font-size:24px;grid-column:1;line-height:1}
  .feature h3{margin-top:0;grid-column:2}
  .feature p{grid-column:1 / -1}
}

/* ---------- Qualificação (ChecklistCard) ---------- */

.qualify{display:grid;gap:var(--sp-6);grid-template-columns:1fr;max-width:900px;margin:0 auto;width:100%}
@media (min-width:900px){ .qualify{grid-template-columns:1fr 1fr} }

.checklist{
  display:flex;flex-direction:column;gap:var(--sp-5);
  padding:var(--sp-6);border-radius:var(--r-xl);
}
.checklist__title{
  font:var(--fw-bold) var(--fs-h3)/1.25 var(--font-display);
  letter-spacing:var(--ls-h3);text-align:center;
}
.bg-card--accent .checklist__title{color:#fff}
.bg-card--inverted .checklist__title{color:var(--text-on-inverted)}
.checklist ul{display:flex;flex-direction:column;gap:var(--sp-4);list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:var(--sp-3);align-items:flex-start}
.checklist li i{font-size:16px;margin-top:3px;flex:none}
.checklist li span{font:var(--fw-medium) var(--fs-body)/1.45 var(--font-ui);text-wrap:pretty}
.bg-card--accent .checklist li i,.bg-card--accent .checklist li span{color:#fff}
.bg-card--inverted .checklist li i{color:var(--ink-900)}
.bg-card--inverted .checklist li span{color:var(--ink-850)}

/* ---------- Passos ---------- */

.steps{
  display:grid;gap:var(--card-gap);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:step;
}
.steps li{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border-radius:var(--r-xl)}
.steps__n{font-size:var(--fs-metric-md);color:var(--blue-300)}

/* ---------- CTA final ---------- */

.final-cta__card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);
  padding:clamp(32px,5vw,64px);border-radius:var(--r-2xl);
}
.final-cta__card .bg-display-md{font-size:clamp(24px,3vw,36px)}
.final-cta__card .bg-xs{color:var(--text-dim)}

/* ---------- CTA fixo no mobile ---------- */

/* ---------- Marcadores de conteúdo a preencher ----------
   Apague esta regra (ou a classe is-placeholder no HTML)
   quando trocar os textos pelos reais. */
.is-placeholder{
  color:var(--text-warning);
  border:1px dashed rgba(255,176,32,.45);border-radius:var(--r-xs);
  padding:2px 6px;display:inline-block;
}

/* ---------- Depoimentos ---------- */

.depo{position:relative}

.depo__trilho{
  display:flex;gap:var(--card-gap);
  list-style:none;margin:0;padding:6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
/* Com a esteira ligada o encaixe atrapalha: ele briga com a rolagem
   contínua e faz a faixa tremer a cada quadro. */
.depo__trilho.is-esteira{
  scroll-snap-type:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
@media (max-width:760px){
  .depo__trilho.is-esteira{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
}
.depo__trilho::-webkit-scrollbar{display:none}

.depo__item{flex:0 0 auto;scroll-snap-align:start}

.depo__card{
  position:relative;display:block;padding:0;
  width:clamp(230px,70vw,272px);height:392px;
  border:1px solid var(--border-card);border-radius:var(--r-xl);
  background:var(--surface-card);overflow:hidden;cursor:pointer;
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.depo__card img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.depo__card:hover,
.depo__card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--border-accent);
  box-shadow:var(--glow-blue-md);
}

.depo__seta{
  position:absolute;top:calc(50% - 22px);z-index:2;
  width:44px;height:44px;border-radius:var(--r-circle);
  display:none;place-items:center;
  background:var(--surface-raised);color:var(--text-hi);
  border:1px solid var(--border-card);cursor:pointer;
  box-shadow:var(--glow-blue-sm);
  transition:opacity var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.depo__seta:hover{border-color:var(--border-accent)}
.depo__seta i{font-size:18px}
.depo__seta--ant{left:-20px}
.depo__seta--ant i{transform:rotate(180deg)}
.depo__seta--prox{right:-20px}
.depo__seta[disabled]{opacity:.3;cursor:default}
@media (min-width:980px){ .depo__seta{display:grid} }

/* No celular o carrossel sangra até a borda da tela. */
@media (max-width:760px){
  .depo__trilho{
    margin-inline:calc(clamp(16px,4vw,40px) * -1);
    padding-inline:clamp(16px,4vw,40px);
    scroll-padding-left:clamp(16px,4vw,40px);
  }
}

/* ---------- Lightbox dos depoimentos ---------- */

.lupa{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  padding:clamp(12px,4vw,48px);
  background:rgba(5,7,12,.93);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:bg-fade-up var(--dur-base) var(--ease-out);
}
.lupa__figura{margin:0;display:grid;place-items:center;gap:var(--sp-3)}
.lupa__img{
  display:block;width:auto;height:auto;
  max-width:min(100%,520px);max-height:calc(100dvh - 148px);
  border-radius:var(--r-lg);border:1px solid var(--border-card);
  background:var(--surface-card);
}
.lupa__legenda{
  max-width:440px;text-align:center;
  color:var(--text-dim);font-size:12px;line-height:1.5;
}
.lupa__btn{
  position:absolute;z-index:1;
  width:46px;height:46px;border-radius:var(--r-circle);
  display:grid;place-items:center;
  background:var(--surface-raised);color:var(--text-hi);
  border:1px solid var(--border-card);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}
.lupa__btn:hover{border-color:var(--border-accent)}
.lupa__btn[disabled]{opacity:.25;cursor:default}
.lupa__btn i{font-size:19px}
.lupa__fechar{top:16px;right:16px}
.lupa__ant{left:16px;top:calc(50% - 23px)}
.lupa__ant i{transform:rotate(180deg)}
.lupa__prox{right:16px;top:calc(50% - 23px)}

@media (max-width:760px){
  .lupa__ant,.lupa__prox{top:auto;bottom:16px}
  .lupa__ant{left:calc(50% - 60px)}
  .lupa__prox{right:calc(50% - 60px)}
  .lupa__img{max-height:calc(100dvh - 190px)}
}