/* ============================================================
   WEBINARIO MENTORIA — FRANCISCO GALARRETA
   Base visual das duas paginas.

   Tipografia medida na referencia (siberiatreinamentos.com/live-secreta-lp1):
     titulos  Public Sans 500, caixa de frase, line-height ~1.0,
              com <b>/<strong> 700 so na frase de enfase
     corpo    Public Sans 300 (light)
     CTA      Bebas Neue, caixa alta
   Nada de caixa alta 900 com letter-spacing negativo, nada de emoji:
   os icones sao SVG de traco fino (sprite no topo do <body>).
   ============================================================ */

:root{
  --preto:       #0d0d0d;   /* fundo das secoes escuras */
  --preto-2:     #141414;   /* cards e campos */
  --branco:      #ffffff;
  --branco-2:    #f4f4f4;   /* cards na secao clara */
  --tinta:       #2e2e2e;   /* texto escuro — o mesmo da referencia */
  --tinta-2:     #5a5a5a;
  --claro:       #f2f2f2;
  --claro-2:     #b5b5b5;   /* corpo sobre fundo escuro */
  --vermelho:    #ff3a3a;   /* acento de texto: le melhor que o #f00 no preto */
  --vermelho-2:  #e02020;
  /* CTA — medidos na referencia: pilula vermelha viva dentro de uma
     capsula quase preta de borda vinho, com o cadeado do lado */
  --cta-1:       #ff0000;
  --cta-2:       #990000;
  --cta-caixa-1: #0c0000;
  --cta-caixa-2: #120505;
  --cta-borda:   #7a3b3a;
  --verde-zap:   #44ad1e;   /* botoes de WhatsApp (pedido do documento) */
  --verde-zap-2: #3a9619;
  --azul-topo:   #0065f5;   /* faixa fixa do topo do quiz */
  --linha:       rgba(255,255,255,.12);
  --linha-escura:rgba(0,0,0,.1);

  --fonte:     "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-cta: "Bebas Neue", "Public Sans", Impact, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--preto);color:var(--claro);
  font-family:var(--fonte);font-weight:300;font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}

/* ------------------------------------------------------------
   TIPOGRAFIA
   O peso 500 no titulo e o 700 so na enfase sao o coracao do
   visual da referencia. Mexer aqui muda a pagina inteira.
   ------------------------------------------------------------ */
h1,h2,h3{
  font-weight:500;line-height:1.03;letter-spacing:-.005em;
  text-transform:none;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2rem,3.5vw,2.95rem)}
h2{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.12}
h3{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:600}
h1 b,h1 strong,h2 b,h2 strong,h3 b,h3 strong{font-weight:700}
p{margin:0 0 16px}
p strong,li strong{font-weight:600;color:#fff}
.fx-branco p strong,.fx-branco li strong{color:var(--tinta)}
.destaque{color:var(--vermelho);font-weight:700}

/* ------------------------------------------------------------
   ICONES — sprite SVG, traco fino de 1.5
   ------------------------------------------------------------ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* traco de marcador sob a palavra de enfase dos titulos */
.sublinhado{
  display:inline;padding-bottom:.14em;white-space:nowrap;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.4c33-3.3 67-4.9 101-5.1 30-.2 62 .6 93 2.8' fill='none' stroke='%23ff3a3a' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M7 9.6c34-2.6 70-3.6 106-3.4 26 .1 52 .6 78 1.5' fill='none' stroke='%23ff3a3a' stroke-width='2.4' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .3em;
}

/* ------------------------------------------------------------
   ESTRUTURA
   ------------------------------------------------------------ */
.fx{padding:64px 20px;position:relative}
.fx-preto{background:var(--preto)}
.fx-branco{background:var(--branco);color:var(--tinta)}
.fx-branco h2,.fx-branco h3{color:var(--tinta)}
.fx-branco p{color:var(--tinta-2)}
.dentro{max-width:1120px;margin:0 auto}
.estreito{max-width:820px;margin:0 auto}

/* ------------------------------------------------------------
   BLOCO 1 — HERO
   A arte ja vem com o enquadramento e o escurecimento do lado
   do texto; o CSS so posiciona o conteudo por cima.
   ------------------------------------------------------------ */
#hero{
  position:relative;
  background:var(--preto) url("../img/hero-mobile.webp") no-repeat top center;
  background-size:100% auto;
  /* a arte e 900x640: ocupa 71vw de altura. O padding empurra o conteudo
     para DEPOIS dela — no mobile a foto fica acima do texto, nunca atras. */
  padding:66vw 20px 44px;
}
.hero-dentro{position:relative;z-index:1;width:100%;max-width:1120px;margin:0 auto}
.hero-texto{max-width:545px}
.hero-texto h1{margin-bottom:26px}
.hero-sub{font-size:clamp(1.02rem,2.4vw,1.2rem);font-weight:500;color:var(--claro);margin:18px 0 26px}

/* selo da data — a elipse vermelha e desenhada a mao, nao e uma pilula */
.selo-data{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:500;letter-spacing:.09em;color:var(--claro);
  margin:0 0 30px;padding:2px 4px;
}
.selo-data .ico{color:var(--vermelho);width:1.05em;height:1.05em}

/* ------------------------------------------------------------
   LISTA DE BENEFICIOS
   ------------------------------------------------------------ */
.checks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.checks li{
  position:relative;padding-left:30px;
  font-size:1.02rem;font-weight:300;line-height:1.45;color:var(--claro);
}
.checks li strong{font-weight:600}
/* o check e absoluto de proposito: com display:flex no li, um <strong>
   no meio da frase viraria item flex e quebraria a linha em colunas */
.checks li .ico{
  position:absolute;left:0;top:.2em;width:19px;height:19px;
  color:var(--vermelho);stroke-width:2;
}
.fx-branco .checks li{color:var(--tinta)}

/* ------------------------------------------------------------
   BOTAO — pilula vermelha chapada + selo de cadeado ao lado
   ------------------------------------------------------------ */
.linha-cta{max-width:520px}

/* O botao e a CAPSULA escura; a pilula vermelha e o cadeado moram dentro
   dela. E o desenho da referencia: o cadeado fica junto do botao, nao solto
   ao lado. Proporcoes (para 59px de altura): pilula 47px, folga 5px em cima
   e embaixo, 9px a esquerda e 22px depois do cadeado. */
.botao{
  display:flex;align-items:center;width:100%;
  background:linear-gradient(180deg,var(--cta-caixa-1) 45%,var(--cta-caixa-2) 100%);
  border:1px solid var(--cta-borda);border-radius:999px;
  box-shadow:inset -2px -2px 6px rgba(255,190,190,.024);
  padding:5px 0 5px 9px;cursor:pointer;text-decoration:none;
  transition:border-color .22s ease,transform .12s ease;
}
.botao:hover{border-color:#a85250}
.botao:active{transform:translateY(1px)}

.botao-pilula{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,var(--cta-1) 0%,var(--cta-2) 100%);
  border-radius:999px;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
  font-family:var(--fonte-cta);font-size:clamp(1.26rem,3.1vw,1.52rem);
  font-weight:400;letter-spacing:.015em;line-height:1;text-transform:uppercase;
  padding:13px 20px 10px;text-align:center;
  transition:filter .22s ease;
}
.botao:hover .botao-pilula{filter:brightness(1.12)}

/* Cadeado do CTA — mesma tecnica da referencia: um <span> vazio onde o
   ::before desenha o arco e o ::after o corpo com o furo da fechadura.
   Cada peca e um gradiente vermelho recortado por uma mascara SVG, e o
   background-size cobre o span inteiro para a luz correr continua entre
   as duas. Nada de imagem externa. */
.btn-lock{
  position:relative;display:block;flex:none;align-self:center;
  width:30px;height:41px;margin:0 22px 0 11px;
}
.btn-lock::before,
.btn-lock::after{
  content:"";position:absolute;left:0;right:0;display:block;
  background-image:linear-gradient(180deg,#b02222 0%,#fb2d2d 100%);
  background-repeat:no-repeat;background-size:100% 41px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* arco — no hover ele gira sobre a perna direita e o cadeado "abre".
   Puro enfeite: nada da pagina depende disso. */
.btn-lock::before{
  top:0;bottom:13.5px;background-position:0 0;
  transform-origin:100% 100%;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.35);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44'%3E%3Cpath d='M14.5 44V17.4a12.5 12.5 0 0 1 25 0V31' fill='none' stroke='black' stroke-width='7.4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44'%3E%3Cpath d='M14.5 44V17.4a12.5 12.5 0 0 1 25 0V31' fill='none' stroke='black' stroke-width='7.4'/%3E%3C/svg%3E");
}
.botao:hover .btn-lock::before,
.botao:focus-visible .btn-lock::before{transform:translateY(-2px) rotate(30deg)}

/* corpo, com o furo da fechadura recortado pelo fill-rule */
.btn-lock::after{
  top:14.5px;bottom:0;background-position:0 -14.5px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 48'%3E%3Cpath fill-rule='evenodd' d='M7 0h40a7 7 0 0 1 7 7v31a10 10 0 0 1-10 10H10A10 10 0 0 1 0 38V7a7 7 0 0 1 7-7Zm17.8 24.5a6.4 6.4 0 1 1 4.4 0V32a2.2 2.2 0 0 1-4.4 0Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 48'%3E%3Cpath fill-rule='evenodd' d='M7 0h40a7 7 0 0 1 7 7v31a10 10 0 0 1-10 10H10A10 10 0 0 1 0 38V7a7 7 0 0 1 7-7Zm17.8 24.5a6.4 6.4 0 1 1 4.4 0V32a2.2 2.2 0 0 1-4.4 0Z'/%3E%3C/svg%3E");
}

.botao-nota{
  display:flex;align-items:center;gap:7px;
  font-size:.8rem;font-weight:300;color:var(--claro-2);margin:14px 0 0;
}
.botao-nota .ico{width:14px;height:14px;opacity:.75}
.fx-branco .botao-nota{color:var(--tinta-2)}

/* ------------------------------------------------------------
   FORMULARIO (o unico da pagina — os CTAs rolam ate aqui)
   ------------------------------------------------------------ */
.form-caixa{max-width:520px}
.form-caixa.destacado .campo{border-color:rgba(255,58,58,.75)}
.campo{
  width:100%;background:rgba(10,10,10,.72);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.55);border-radius:12px;
  padding:17px 18px;color:#fff;font:inherit;font-size:16px;font-weight:300;
  outline:none;margin-bottom:11px;transition:border-color .2s,background .2s;
}
.campo::placeholder{color:#8f8f8f}
.campo:focus{border-color:#fff;background:rgba(18,18,18,.92)}
.campo.invalido{border-color:var(--vermelho);background:rgba(255,58,58,.08)}
.erro-campo{color:var(--vermelho);font-size:.78rem;margin:-6px 0 8px;min-height:1em;font-weight:400}
.form-caixa .linha-cta{margin-top:5px}

/* ------------------------------------------------------------
   BLOCO 3 — dois cards "para quem e"
   ------------------------------------------------------------ */
.publico{display:grid;gap:16px;margin:0 0 30px}
.publico-card{
  background:var(--branco-2);border:1px solid var(--linha-escura);
  border-radius:14px;padding:26px 24px;
}
.publico-card h3{
  display:flex;align-items:center;gap:12px;
  color:var(--tinta);margin:0 0 12px;line-height:1.2;
}
.publico-card h3 .ico{width:26px;height:26px;color:var(--vermelho)}
.publico-card p{margin:0;font-size:1rem;font-weight:300;color:var(--tinta-2)}
.fecho-publico{
  font-size:clamp(1.05rem,2.3vw,1.2rem);font-weight:400;color:var(--tinta);
  margin:0 auto 30px;text-align:center;max-width:780px;
}

/* ------------------------------------------------------------
   BLOCO 4 — quem esta por tras
   ------------------------------------------------------------ */
.expert{display:grid;gap:28px;align-items:center}
/* a foto do evento e 2:3; o quadro 3:4 recorta e evita que ela
   estique o bloco inteiro e empurre o texto para baixo */
.expert-foto{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;
  max-width:400px;margin:0 auto;border:1px solid var(--linha);
}
.expert-foto img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.expert p.expert-nome,
.expert-nome{
  font-family:var(--fonte);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.05;letter-spacing:-.01em;margin:0 0 8px;color:#fff;
}
.expert-nome + .papel{color:var(--vermelho);font-weight:500;font-size:.95rem;margin:0 0 20px}
.expert p{font-size:1.02rem;font-weight:300;color:var(--claro-2);margin:0 0 15px}

/* faixa de credibilidade com a foto de palco */
.faixa-palco{position:relative;height:clamp(180px,26vw,320px);overflow:hidden}
.faixa-palco img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.faixa-palco::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--preto),rgba(13,13,13,.3) 42%,var(--preto));
}

/* ------------------------------------------------------------
   RODAPE
   ------------------------------------------------------------ */
footer{background:var(--preto);padding:44px 20px;text-align:center;border-top:1px solid var(--linha)}
footer p{margin:0 0 10px;font-size:.85rem;font-weight:300;color:var(--claro-2)}
footer .disclaimer{font-size:.74rem;opacity:.68;max-width:680px;margin:0 auto;line-height:1.5}

/* ------------------------------------------------------------
   ANIMACAO DE ENTRADA
   ------------------------------------------------------------ */
.sobe{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.sobe.visivel{opacity:1;transform:none}

/* ------------------------------------------------------------
   CELULAR — medidas tiradas da referencia a 390px:
   H1 27px/1.0 centralizado, campos de 48px, botao de 44px.
   Tudo centralizado e compacto para a foto, o formulario e o
   botao caberem na primeira tela, sem rolar.
   ------------------------------------------------------------ */
@media (max-width:699px){
  /* a referencia centraliza TODO o texto no celular, nao so o hero */
  .fx .dentro,
  .fx .estreito{text-align:center}
  .publico-card{text-align:center}
  .publico-card h3{justify-content:center}
  .expert p{text-align:center}
  .expert-foto{margin-inline:auto}
  .botao-nota{justify-content:center}
  .linha-cta{margin-inline:auto}

  .hero-texto{text-align:center;margin-inline:auto;max-width:none}
  .hero-texto h1{font-size:27px;line-height:1.02;margin-bottom:16px}
  .selo-data{margin:0 0 15px;font-size:.72rem}

  /* Cada item vira uma peca inline centralizada, com o check colado no
     texto. Assim a lista fica centralizada como o resto da pagina sem que
     os checks fiquem soltos numa coluna a esquerda; o texto de itens longos
     continua alinhado a esquerda dentro da propria peca, para ler bem. */
  .checks{display:block;width:auto;margin:0 0 20px;text-align:center}
  .checks li{
    display:inline-flex;align-items:flex-start;gap:9px;
    padding-left:0;margin-bottom:9px;font-size:.95rem;text-align:left;
  }
  .checks li:last-child{margin-bottom:0}
  .checks li .ico{position:static;top:auto;margin-top:.2em}
  .checks li > span{flex:1}

  .form-caixa{margin-inline:auto}
  .campo{margin-bottom:10px;padding:14px 16px}   /* 48px de altura */
  /* sem altura reservada: a mensagem de erro so ocupa espaco quando existe */
  .erro-campo{margin:-6px 0 4px;min-height:0;text-align:left}
  .erro-campo:empty{margin:0}

  .linha-cta{margin-inline:auto}
  .botao{padding:4px 0 4px 7px}
  .botao-pilula{padding:12px 14px 9px;font-size:1.22rem}
  .btn-lock{width:24px;height:33px;margin:0 16px 0 9px}
  .btn-lock::before{bottom:11px}
  .btn-lock::after{top:11.6px;background-position:0 -11.6px}
  .btn-lock::before,.btn-lock::after{background-size:100% 33px}
  .botao-nota{justify-content:center;margin-top:12px}
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */
@media (min-width:700px){
  #hero{
    background-image:url("../img/hero-desktop.webp");
    background-size:cover;background-position:center right;
    padding:70px 20px;min-height:600px;display:flex;align-items:center;
  }
  /* no desktop o texto vai por cima do lado escuro da arte */
  #hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,rgba(13,13,13,.74) 0%,rgba(13,13,13,.38) 42%,rgba(13,13,13,0) 68%);
  }
  .publico{grid-template-columns:1fr 1fr}
  .fx{padding:80px 20px}
}

/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */
@media (min-width:1000px){
  #hero{min-height:min(840px,calc(100vh - 40px));padding:80px 20px}
  #hero::after{
    background:linear-gradient(90deg,rgba(13,13,13,.8) 0%,rgba(13,13,13,.52) 34%,rgba(13,13,13,0) 60%);
  }
  .expert{grid-template-columns:.8fr 1.2fr;gap:46px}
  .expert-foto{margin:0}
  .fx{padding:96px 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sobe{opacity:1;transform:none}
  html{scroll-behavior:auto}
}