/* Landing pages do Roger Belisario — complementa css/estilo.css (copiado do site) */
:root{--dourado:#C9A227}
.lp-topo{padding:24px 0;background:rgba(20,20,20,.92)}
.lp-topo .logo img{width:170px}
.centro-txt{text-align:center;margin-left:auto;margin-right:auto}
.acao-esq{margin-top:32px}
.sub{font-size:19px;line-height:1.6;color:var(--cinza);text-align:left;margin-bottom:24px}

/* Topo das LPs de serviço */
.hero-lp{padding:56px 0 72px;background:#0a0a0a url("../imagens/hero-fundo.png") center/cover no-repeat}
.hero-lp .container{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.hero-lp h1{font-size:44px;margin-bottom:24px}
.hero-lp .foto{width:100%;max-width:460px;justify-self:end}

/* Seções claras */
.claro{background:#f4f4f4;color:#1c1c1c}
.claro .sobrancelha{color:#555}
.claro .lista li::before{color:var(--vermelho)}
.claro .cartao{background:var(--branco);border-color:#e2e2e2}
.texto-lp .container{max-width:820px}
.texto-lp .lista{margin:24px 0}

/* Benefícios em barras vermelhas */
.barras{max-width:760px;margin:32px auto 0;display:grid;gap:6px}
.barras li{background:linear-gradient(90deg,var(--vermelho) 0%,#6d0020 100%);color:var(--branco);border-radius:10px;padding:16px 24px;font-weight:600;text-align:center}
.barras li::before{content:"» ";opacity:.8}

/* Famosos */
.famosos .cartao{padding:0;overflow:hidden}
.famosos img{width:100%;aspect-ratio:4/3;object-fit:cover}
.famosos h3,.famosos p{padding:0 24px}
.famosos h3{margin:20px 0 12px}
.famosos h3 span{display:block;font-weight:300;font-size:12px;color:var(--cinza)}
.famosos p{padding-bottom:24px}

/* Números */
.numeros{display:flex;gap:40px;margin:32px 0 0}
.numeros p{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;line-height:1.4}
.numeros strong{display:block;font-size:52px;line-height:1;color:var(--vermelho);margin-bottom:6px}
.numeros p+p{margin-top:0}

/* Etapas numeradas */
.etapas{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:etapa}
.etapas.quatro{grid-template-columns:repeat(4,1fr)}
.etapas li{counter-increment:etapa;border:1px solid var(--linha);border-radius:12px;padding:28px 24px}
.etapas li::before{content:counter(etapa,decimal-leading-zero);display:block;font-size:12px;font-weight:300;border-left:2px solid var(--vermelho);padding-left:6px;line-height:1.2;margin-bottom:16px}
.etapas h3{font-size:16px;margin-bottom:10px}
.etapas p{font-size:13px;line-height:1.9;text-align:left}

.duas-listas{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.duas-listas h3{font-size:20px;margin-bottom:16px;color:var(--vermelho)}

/* Formulário: ancoragem com folga */
#formulario{scroll-margin-top:24px}

/* LP da palestra: foto do Roger à esquerda, título e formulário à direita, destaque dourado.
   Desktop usa hero_desk.png; o degradê #000 → #333 (o mesmo das outras seções) completa telas mais largas que a foto */
.hero-palestra{background:url("../imagens/hero_desk.png") left center/auto 100% no-repeat,linear-gradient(90deg,#000 0%,#000 30%,#111 60%,#222 100%);padding:48px 0 72px}
.hero-palestra .conteudo{max-width:560px;margin-left:auto;text-align:center}
.hero-palestra h1 img{width:100%;max-width:520px;margin:0 auto}
.hero-palestra .sub{text-align:center;margin:8px 0 24px}
.hero-palestra p{text-align:center}
.contagem{display:flex;justify-content:center;gap:28px;margin:8px 0 28px}
.contagem p{font-size:12px;text-transform:uppercase;color:var(--dourado);font-weight:500;line-height:1.3}
.contagem p+p{margin-top:0}
.contagem strong{display:block;font-size:56px;line-height:1.1;color:var(--branco);font-weight:600}
.hero-palestra .quando{margin:20px 0 4px;font-weight:500}
/* topo e rodapé acompanham o degradê do banner */
/* mesma curva do hero_desk.png: preto até ~30% e clareia até ~#222 na direita */
.lp-palestra,.lp-palestra .lp-topo,.lp-palestra .rodape{background:linear-gradient(90deg,#000 0%,#000 30%,#111 60%,#222 100%)}
.lp-palestra .formulario .botao{background:var(--dourado);color:#111;font-weight:600}
.lp-palestra .formulario .botao:hover,.lp-palestra .formulario .botao:focus-visible{background:#b08b1c}

/* LP de cadastro pós-palestra */
/* topo sem faixa própria: mostra o mesmo degradê do fundo da seção principal */
.lp-cadastro .lp-topo{background:transparent}
.cadastro .container{max-width:680px}
.cadastro h1{margin-bottom:24px}
.confirmacao .botao{margin:16px auto 24px}
.lp-palestra .confirmacao .botao{background:var(--dourado);color:#111}
.lp-palestra .confirmacao .botao:hover,.lp-palestra .confirmacao .botao:focus-visible{background:#b08b1c}

@media(max-width:900px){
  .hero-lp .container,.duas-listas{grid-template-columns:1fr}
  .hero-lp h1{font-size:30px}
  .hero-lp .foto{justify-self:center;max-width:320px;order:-1}
  .etapas,.etapas.quatro{grid-template-columns:1fr}
  /* mobile: hero_mobile.png já traz o título, então o h1 fica só para leitores de tela e Google */
  .hero-palestra{background:url("../imagens/hero_mobile.png") center top/100% auto no-repeat,linear-gradient(90deg,#000 0%,#333 100%);padding-top:calc(100vw * 850 / 1080)}
  .hero-palestra h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hero-palestra .conteudo{margin:0 auto;padding-top:24px}
  .contagem{gap:16px}
  .contagem strong{font-size:40px}
}