/* Adriano Carrazza Academy — base das landing pages */

:root{
  --preto:#0A0A0A; --preto2:#121212; --card:#181818; --borda:#262626;
  --texto:#EDEDED; --texto2:#A0A0A0;
  --vermelho:#FF1E1E; --lima:#C6FF00; --lima-esc:#9ECC00;
  --fonte-display:'Rajdhani',system-ui,sans-serif;
  --fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fonte-mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1120px;

  /* ---------- escala de largura útil ----------
     Quatro degraus, e nada fora deles.

     Antes havia treze larguras espalhadas, a maioria em style="" inline. O
     anuncios.html sozinho usava cinco medidas de prosa (62/64/66/70/78ch), e
     "seção estreita" era 760px em dois lugares e 820px em outro. Nenhuma dessas
     diferenças significava nada, mas o canto direito do texto mudava de lugar a
     cada seção — o olho percebe o desalinhamento sem ler o número.

     Use as CLASSES, não `style="max-width:…"`. Largura inline vence a folha E a
     media query: foi assim que a coluna deixou de colapsar no celular e a imagem
     da telemetria estourou a tela do iPhone. */
  --medida:66ch;      /* PROSA. Todo parágrafo. Acima de ~75ch o olho perde a linha */
  --coluna:520px;     /* formulário, cartão de uma coluna */
  --estreita:780px;   /* seção deliberadamente mais estreita que o quadro */
  --midia:880px;      /* figura limitada pela RESOLUÇÃO da origem, não pelo desenho:
                         a telemetria tem 867px nativos e passar disso borra.
                         Mídia com resolução sobrando preenche a seção. */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* nenhuma pagina pode rolar na horizontal */
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--preto);color:var(--texto);
  font-family:var(--fonte);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
/* Os degraus como classe. É o que evita voltar a escrever largura inline. */
.wrap.estreita{max-width:var(--estreita)}
.medida{max-width:var(--medida)}
.coluna{max-width:var(--coluna)}
.midia{max-width:var(--midia)}
section{padding:64px 0;border-bottom:1px solid var(--borda)}
section.sem-borda{border-bottom:0}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--fonte-display);font-weight:700;line-height:1.08;
  letter-spacing:-.01em;margin:0 0 18px;text-transform:uppercase;font-style:italic}
h1{font-size:clamp(2.1rem,6vw,3.9rem)}
h2{font-size:clamp(1.7rem,4.2vw,2.7rem)}
h3{font-size:clamp(1.2rem,2.6vw,1.5rem);text-transform:none;font-style:normal}
p{margin:0 0 18px}
.sub{color:var(--texto2);font-size:1.06rem;max-width:var(--medida)}
.destaque{color:var(--vermelho)}
.lima{color:var(--lima)}
.olho{font-family:var(--fonte-mono);font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--texto2);margin-bottom:14px}
.grande{font-size:clamp(1.15rem,2.6vw,1.45rem);line-height:1.5}

/* ---------- botões ---------- */
.btn{display:inline-block;background:var(--lima);color:#111;font-family:var(--fonte-display);
  font-weight:700;font-style:italic;text-transform:uppercase;font-size:1.12rem;
  letter-spacing:.02em;padding:17px 34px;border:0;border-radius:8px;cursor:pointer;
  text-decoration:none;transition:transform .12s,background .12s;
  box-shadow:0 0 28px rgba(198,255,0,.22)}
.btn:hover{background:var(--lima-esc);transform:translateY(-2px)}
.btn-bloco{display:block;width:100%;text-align:center}
.sob-btn{font-size:.9rem;color:var(--texto2);margin-top:10px}

/* ---------- cartões ---------- */
.card{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:24px}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Duas colunas que PRECISAM colapsar no celular.
   Ficam aqui e não em style="" inline: estilo inline vence media query,
   e a coluna nunca colapsaria. */
.duas{grid-template-columns:1.3fr .8fr;align-items:center;gap:34px}
.captura{grid-template-columns:1.35fr .95fr;align-items:start;gap:26px}
@media(max-width:860px){
  .duas,.captura{grid-template-columns:1fr!important;gap:26px}
  .duas .garantia{max-width:200px;margin:0 auto}
}

/* ---------- ranking (prova) ---------- */
.ranking{background:linear-gradient(180deg,#101820,#0d0d0d);
  border:1px solid #1d3040;border-radius:14px;padding:22px;margin:26px 0}
.ranking .linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid #1a1a1a}
.ranking .linha:last-child{border-bottom:0}
.ranking .linha.eu{background:rgba(255,30,30,.07);margin:0 -12px;padding:11px 12px;
  border-radius:8px;border-bottom:0}
.pos{font-family:var(--fonte-mono);font-size:.95rem;color:var(--texto2);min-width:32px}
.piloto{font-weight:600;flex:1;min-width:130px}
.tempo{font-family:var(--fonte-mono);font-size:1.02rem}
.delta{font-family:var(--fonte-mono);font-size:.88rem;color:var(--texto2)}
.selo{display:inline-block;font-family:var(--fonte-mono);font-size:.7rem;
  border:1px solid var(--lima);color:var(--lima);padding:2px 8px;border-radius:4px;
  letter-spacing:.08em}

/* ---------- vídeo (fachada: player só carrega no clique) ---------- */
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;
  overflow:hidden;border:1px solid var(--borda);cursor:pointer}
.video img{width:100%;height:100%;object-fit:cover;opacity:.82}
.video iframe{width:100%;height:100%;border:0;display:block}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play::after{content:"";width:78px;height:78px;border-radius:50%;
  background:var(--vermelho);box-shadow:0 6px 30px rgba(0,0,0,.6);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.play span{position:absolute;width:0;height:0;border-left:24px solid #fff;
  border-top:15px solid transparent;border-bottom:15px solid transparent;
  margin-left:7px;z-index:2}

/* ---------- formulário ---------- */
.form{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:26px}
.form label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--texto2);margin:0 0 6px;font-family:var(--fonte-mono)}
.form input{width:100%;background:#0d0d0d;border:1px solid #303030;border-radius:8px;
  color:var(--texto);padding:13px 15px;font-size:16px;font-family:var(--fonte);margin-bottom:16px}
.form input:focus{outline:0;border-color:var(--lima)}
/* O consentimento é um <label> dentro do .form, então herdava o
   text-transform:uppercase e a fonte mono que existem para NOME e E-MAIL.
   Texto jurídico em CAIXA ALTA lê como advertência e assusta na hora exata em
   que a pessoa decide entregar o contato. Aqui a herança é desfeita. */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--texto2);
  margin:4px 0 18px;line-height:1.45}
/* Seletor com `.form label.consent` e não só `.consent`: `.form label`
   (classe + elemento) é MAIS específico que `.consent` (só classe), então a
   caixa alta dos rótulos continuava vencendo. Já perdi uma rodada aqui. */
.form label.consent{text-transform:none;letter-spacing:normal;
  font-family:var(--fonte);font-size:.86rem}
.consent input{width:auto;margin:3px 0 0}
.erro{color:var(--vermelho);font-size:.88rem;min-height:20px;margin-top:8px}
/* Campos em --coluna dentro de uma caixa larga ficam CENTRALIZADOS. Encostados
   à esquerda sobrava um vão só de um lado, e a caixa parecia desalinhada em
   relação ao resto da página. */
.form > form.coluna{margin-inline:auto}

/* ---------- listas ---------- */
.checks{list-style:none;padding:0;margin:0}
.checks li{padding:9px 0 9px 30px;position:relative;color:var(--texto)}
.checks li::before{content:"➜";position:absolute;left:0;color:var(--lima)}
.dores li{padding:14px 18px;background:var(--card);border:1px solid var(--borda);
  border-left:3px solid var(--vermelho);border-radius:8px;margin-bottom:10px;list-style:none}
.dores{padding:0;margin:0}

/* ---------- módulos ---------- */
.mod{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--borda)}
.mod:last-child{border-bottom:0}
.mod b{font-family:var(--fonte-mono);color:var(--vermelho);min-width:34px;font-size:.95rem}
.mod .t{font-weight:600;margin-bottom:2px}
.mod .d{color:var(--texto2);font-size:.94rem}

/* ---------- prova social ---------- */
.depo figure{margin:0}
.depo img{border-radius:10px;border:1px solid var(--borda);width:100%}
.depo figcaption{font-family:var(--fonte-mono);font-size:.8rem;color:var(--lima);
  margin-top:9px;line-height:1.4}

/* ---------- barra fixa ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(10,10,10,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--borda);padding:11px 20px}
.barra .in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px}
.barra .preco{font-family:var(--fonte-mono);font-size:.94rem}
.barra .preco small{display:block;color:var(--texto2);font-size:.76rem}
.barra .btn{padding:12px 24px;font-size:.98rem;box-shadow:none}
body.tem-barra{padding-bottom:86px}
@media(max-width:560px){
  header .tag{display:none}
  .barra .preco small{display:none}
  .barra .btn{padding:11px 16px;font-size:.88rem}
}

/* ---------- cabeçalho e rodapé ---------- */
header{padding:18px 0;border-bottom:1px solid var(--borda)}
header .in{max-width:var(--max);margin:0 auto;padding:0 20px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
header img{height:38px;width:auto}
/* O selo tem letter-spacing largo e nao encolhe: sem min-width:0 ele empurra
   a largura da pagina inteira no celular e corta todo o conteudo a direita. */
header .tag{font-family:var(--fonte-mono);font-size:.72rem;letter-spacing:.2em;
  color:var(--texto2);text-transform:uppercase;min-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
footer{padding:34px 0 44px;color:var(--texto2);font-size:.85rem;text-align:center}
footer a{color:var(--texto2)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--borda)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:.4}
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#0A0A0A 0%,rgba(10,10,10,.9) 45%,rgba(10,10,10,.35) 100%)}
.hero .in{position:relative;z-index:1;padding:72px 20px 64px}
.hero .col{max-width:var(--estreita)}

@media(max-width:760px){
  body{font-size:16px}
  section{padding:48px 0}
  .hero .in{padding:48px 20px 44px}
  .hero .bg img{object-position:75% center;opacity:.28}
}

/* ---------- impressão / PDF ---------- */
@media print{
  *,*::before,*::after{
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  @page{size:A4;margin:10mm}
  html,body{background:#0A0A0A!important}
  /* a barra é position:fixed — sem isso ela se repete em TODA folha */
  .barra{display:none!important}
  body.tem-barra{padding-bottom:0}
  /* não corta cartão, depoimento ou módulo no meio da página */
  .card,.depo figure,.mod,.ranking,.form{break-inside:avoid;page-break-inside:avoid}
  /* ...mas o cartão que EMBALA uma lista longa pode quebrar. Com avoid, o
     cartão dos 11 módulos (~1000px) nunca cabia no resto da folha e era
     empurrado inteiro, deixando 90% de uma página em preto no PDF do Didico.
     Cada .mod/.num continua inteiro, que é o que interessa. */
  .card:has(.mod),.card:has(.num){break-inside:auto;page-break-inside:auto}
  section{padding:34px 0}
  a[href^="http"]::after{content:"";}   /* não imprime a URL depois do link */
}

/* ---------- componentes da LP de tráfego v2 ---------- */
.num{display:flex;gap:16px;align-items:flex-start;padding:15px 18px;background:var(--card);
  border:1px solid var(--borda);border-left:3px solid var(--vermelho);border-radius:8px;margin-bottom:10px}
.num b{font-family:var(--fonte-mono);color:var(--vermelho);font-size:.9rem;min-width:26px}
.fluxo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--fonte-display);
  font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.15rem;margin:22px 0}
.fluxo span:nth-child(even){color:var(--vermelho)}
.stat{text-align:center}
.stat b{display:block;font-family:var(--fonte-mono);font-size:1.7rem;color:var(--lima);line-height:1.1}
.stat small{color:var(--texto2);font-size:.82rem}
.cred{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.cred i{color:var(--lima);font-style:normal;font-size:1.1rem;line-height:1.3}
.cred b{display:block}
.cred small{color:var(--texto2)}
.sim li,.nao li{list-style:none;padding:8px 0 8px 26px;position:relative;font-size:.98rem}
.sim,.nao{padding:0;margin:0}
.sim li::before{content:"✓";position:absolute;left:0;color:var(--lima)}
.nao li::before{content:"✕";position:absolute;left:0;color:var(--vermelho)}
.passo{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--borda)}
.passo:last-child{border-bottom:0}
.passo b{font-family:var(--fonte-mono);color:var(--lima);min-width:26px}
.preco-bloco{text-align:center;background:var(--card);border:1px solid var(--borda);
  border-radius:14px;padding:32px 24px}
.preco-antes{color:var(--texto2);text-decoration:line-through;font-family:var(--fonte-mono)}
.preco-agora{font-family:var(--fonte-mono);font-size:clamp(2rem,7vw,3rem);color:var(--lima);
  line-height:1.1;margin:8px 0}
.preco-vista{color:var(--texto);font-family:var(--fonte-mono)}
details.faq{background:var(--card);border:1px solid var(--borda);border-radius:8px;
  padding:14px 18px;margin-bottom:9px}
details.faq summary{cursor:pointer;font-weight:600;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:" ⌄";color:var(--lima)}
details.faq p{margin:12px 0 0;color:var(--texto2)}
.aviso{color:var(--texto2);font-size:.78rem;line-height:1.5;max-width:var(--medida);margin:0 auto}
.citacao{border-left:3px solid var(--lima);padding:4px 0 4px 20px;font-size:1.1rem;
  line-height:1.55;font-style:italic}
.citacao cite{display:block;margin-top:10px;font-style:normal;font-size:.88rem;color:var(--texto2)}
@media print{ details.faq{break-inside:avoid} details.faq[open] summary::after{content:""} }

/* ---------- feedbacks (prints quase quadrados, texto para ler) ---------- */
.fb{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-top:26px}
.fb figure{margin:0}
.fb img{width:100%;border-radius:10px;border:1px solid var(--borda);background:#fff}
@media(max-width:820px){ .fb{grid-template-columns:1fr} }
@media print{ .fb{grid-template-columns:1fr 1fr} .fb figure{break-inside:avoid} }

/* ---------- captura empilhada: vídeo largo, formulário abaixo ----------
   Antes eram duas colunas e o vídeo ficava com ~58% da largura. Sendo ele o
   gancho da página, ganha a largura toda; o formulário vem logo em seguida,
   estreito, para não virar um campo gigante de três linhas. */
/* O vídeo PREENCHE a seção. Estava em --midia (880) e ficava 200px mais estreito
   que o texto acima e abaixo — parecia recuo sem motivo. A miniatura tem 1280px
   de origem, então preencher 1080 não borra nada. */
.empilhado .video-largo{max-width:none}
.empilhado .form{max-width:var(--coluna);margin-top:26px}

/* ---------- formulário com prova social ao lado ----------
   O formulário tem teto de 520px e o wrap é bem mais largo, então sobrava uma
   coluna vazia à direita. O feedback ocupa esse espaço exatamente no ponto em
   que a pessoa decide entregar o contato.

   As colunas ficam AQUI e não em style="" inline: estilo inline vence media
   query, e no celular a coluna nunca colapsaria. Já aconteceu duas vezes. */
.lado-a-lado{display:grid;grid-template-columns:520px 1fr;gap:28px;
  align-items:start;margin-top:26px}
.empilhado .lado-a-lado .form{max-width:none;margin-top:0}
.prova-form{margin:0}
.prova-form img{width:100%;height:auto;border-radius:10px;
  border:1px solid var(--borda);background:#fff}
.prova-form figcaption{margin-top:10px;color:var(--texto2);font-size:.86rem;
  line-height:1.45}
@media(max-width:860px){
  .lado-a-lado{grid-template-columns:1fr}
  .prova-form{max-width:var(--coluna)}
}
/* Na impressão a coluna dupla cabe, e o cartão não deve rachar entre folhas. */
@media print{ .lado-a-lado{grid-template-columns:1fr 1fr} .prova-form{break-inside:avoid} }

/* ---------- imagem larga (telemetria) ----------
   NÃO usar max-width inline: estilo inline vence a folha, então o
   img{max-width:100%} global deixa de valer e a imagem estoura no celular. */
.img-larga{max-width:var(--midia);width:100%;height:auto;margin:24px auto 0;
  border-radius:12px;border:1px solid var(--borda)}