/* ============================================================
   Black CAP Vitalícia — Lista VIP (reconstrução da bf2 do GreatPages)
   ============================================================ */

@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url(fontes/montserrat-latin.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/roboto-400-latin.woff2) format('woff2')}

/* Medidas copiadas da página original no GreatPages (medidas no navegador em 08/10/2026):
   desktop numa coluna de 960px centralizada, celular (até 800px) numa de 338px.
   A original posiciona tudo em coordenada fixa; aqui o layout é em fluxo, com os
   mesmos tamanhos e espaçamentos. */
:root{
  --laranja:#ff4500;          /* barra e números do contador */
  --verde:#128040;            /* botão, o mesmo da black-bf: branco sobre ele dá 5,0:1 */
  --verde-hover:#0f6d36;
  --fundo:#0a0a0a;
  --rodape:#242424;
  --branco:#fff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--branco);font-family:'Poppins',sans-serif;font-size:16px;line-height:24px}
img{display:block;max-width:100%;height:auto}
p,h1,ul{margin:0}
strong{font-weight:700}
.so-celular{display:none}

/* ---------- barra do contador ---------- */
.barra{background:var(--laranja);height:116px;display:flex;justify-content:center;align-items:flex-start;padding-top:21px}
.barra-txt{font-weight:700;font-size:20px;line-height:28px;margin-top:21px}
.barra-faltam{font-family:'Montserrat',sans-serif;margin-right:31px}
.barra-revelacao{width:210px;margin-left:29px}
.contador{display:flex;gap:19.67px}
.contador-item{position:relative;display:flex;flex-direction:column;align-items:center;width:58px}
.contador-item+.contador-item::before{content:':';position:absolute;left:-14px;top:15px;font-weight:700;font-size:20px;line-height:28px}
.contador-caixa{display:flex;align-items:center;justify-content:center;width:58px;height:58px;background:var(--branco);border-radius:7px}
.contador-num{font-family:'Roboto',sans-serif;font-size:39.6px;line-height:48px;color:var(--laranja);font-variant-numeric:tabular-nums}
.contador-rot{margin-top:4px;font-family:Arial,sans-serif;font-size:9.9px;line-height:9.9px;text-transform:uppercase}

/* ---------- topo ---------- */
.hero{background:var(--fundo) url(fundo-desktop.webp) 50% 50%/cover no-repeat;min-height:862px;padding:31px 0 41px}
.wrap{width:960px;max-width:100%;margin:0 auto}
/* legibilidade sobre a foto: sombra discreta, não muda medida nenhuma */
.hero h1,.hero p,.hero li{text-shadow:0 1px 3px rgba(0,0,0,.55)}
.logo{width:127px;height:110px;margin-left:-1px}
h1{margin-top:9px;font-size:32px;line-height:41.6px;font-weight:400}
.sub{margin-top:16px;margin-left:1px}

.lista{list-style:none;padding:0;margin-top:16px;display:flex;flex-wrap:wrap;column-gap:11px;row-gap:15.5px;width:430px}
.lista li{display:flex;align-items:flex-start;gap:11px;margin-left:-1px}
.lista li::before{content:'';flex:none;width:20px;height:21px;margin-top:1px;background:url(check-verde.svg) center/contain no-repeat}
.lista .l3,.lista .l4{flex-basis:100%;margin-left:0}
.lista .l3{gap:10px}
.lista .l4{gap:12px}

.data{display:flex;align-items:center;gap:15px;margin-top:24px;margin-left:1px;font-size:18px;line-height:27px}
.data img{width:20px;height:21px}
.vip{margin-top:8px}

/* ---------- formulário ---------- */
.form{display:flex;flex-direction:column;gap:24px;width:403px;margin-top:20px;margin-left:1px}
.campo{display:block;width:100%;height:50px;border:1px solid #bcbcbc;border-radius:100px;background:var(--branco);color:#000;font:inherit;font-size:16px;line-height:16px;padding:12px 8px}
.campo::placeholder{color:rgba(0,0,0,.5);opacity:1}
.campo:focus{outline:3px solid var(--laranja);outline-offset:1px}
.campo[aria-invalid="true"]{border-color:#d00;box-shadow:0 0 0 2px #d00}
.campo-zap{position:relative}
.campo-zap .campo{padding-left:52px}
.bandeira{position:absolute;left:9px;top:0;bottom:0;display:flex;align-items:center;gap:6px;pointer-events:none}
.bandeira i{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}
.form-erro{margin:-12px 0;color:#ffb199;font-size:15px;line-height:22px}
.form-erro:empty{display:none}
.botao{display:flex;align-items:center;justify-content:center;width:100%;min-height:51px;border:0;border-radius:100px;background:var(--verde);color:var(--branco);font:inherit;font-weight:600;font-size:15.575px;line-height:20.25px;padding:0 20px;cursor:pointer;transition:background .15s}
.botao:hover{background:var(--verde-hover)}
.botao:disabled{opacity:.7;cursor:wait}

/* ---------- rodapé ---------- */
.rodape{background:var(--rodape);text-align:center;font-size:14px;line-height:21px;padding:22px 16px 22px}
.rodape a{color:inherit;text-decoration:none}
.rodape a:hover{text-decoration:underline}

/* ---------- celular ---------- */
@media (max-width:800px){
  .so-celular{display:inline}
  .so-desktop{display:none}

  .barra{height:72px;padding-top:5px}
  .barra-txt{display:none}
  .contador{gap:16px}
  .contador-item{width:48px}
  .contador-item+.contador-item::before{left:-11px;top:10px;font-size:16px}
  .contador-caixa{width:48px;height:48px}
  .contador-num{font-size:32.56px;line-height:39px}
  .contador-rot{margin-top:3px;font-size:8.14px;line-height:8.14px}

  .hero{background-image:url(fundo-celular.webp);background-position:43.6% 60.1%;min-height:705px;padding:24px 0 25px}
  .wrap{width:338px}
  .logo{width:104px;height:90px;margin-left:5px}
  h1{margin-top:13px;margin-left:2px;font-size:24.97px;line-height:32.46px}
  .sub{margin-top:5px;margin-left:3px}

  .lista{flex-direction:column;flex-wrap:nowrap;row-gap:6px;width:auto;margin-top:12px}
  .lista li,.lista .l3,.lista .l4{gap:10px;margin-left:1px;flex-basis:auto}
  .lista li::before{width:19px;height:19px}
  .lista .l1,.lista .l2{font-size:14.9px;line-height:22.35px}
  .lista .l3{font-size:14.26px;line-height:21.39px}
  .lista .l4{font-size:13.86px;line-height:20.79px}
  .lista .l3::before{width:18px}
  .lista .l4::before{width:17px;height:18px;margin-left:1px}

  /* no celular a data vem depois do botão e a frase da Lista VIP sai, como na original */
  .wrap{display:flex;flex-direction:column}
  .data{order:2;justify-content:center;gap:9px;margin:19px 0 0;font-size:15.47px;line-height:23.2px}
  .data img{width:17px;height:18px}
  .vip{display:none}

  .form{width:333px;gap:24px;margin:16px 0 0}
  .campo{height:49px}
  .botao{min-height:54px}

  .rodape{line-height:19.6px;padding:33px 16px 34px}
}

/* ---------- desktop: tudo numa dobra só (08/10/2026) ----------
   Mesma disposição da original (um campo embaixo do outro, mesma ordem); só os tamanhos
   mudam. A coluna inteira é medida em em, e o tamanho base acompanha a altura da tela:
   16px quando cabe, até 12px num notebook baixo. Assim tudo encolhe junto, na mesma
   proporção, e do contador ao botão cabe na tela. A barra do contador fica com 84px. */
@media (min-width:801px){
  .barra{height:84px;padding-top:0;align-items:center}
  .barra-txt{margin-top:-12px;font-size:18px;line-height:24px}
  .barra-faltam{margin-right:28px}
  .barra-revelacao{width:190px;margin-left:26px}
  .contador{gap:18px}
  .contador-item{width:50px}
  .contador-item+.contador-item::before{left:-13px;top:10px;font-size:18px}
  .contador-caixa{width:50px;height:50px}
  .contador-num{font-size:34px;line-height:40px}
  .contador-rot{margin-top:3px;font-size:9px;line-height:9px}

  .hero{min-height:calc(100vh - 84px);min-height:calc(100svh - 84px);display:flex;align-items:center;padding:0}
  /* 44 = altura da coluna em em (704px a 16px) */
  .wrap{font-size:clamp(12px,calc((100vh - 84px) / 44),16px);line-height:1.5em;padding:1em 0}
  @supports (height:100svh){.wrap{font-size:clamp(12px,calc((100svh - 84px) / 44),16px)}}

  .logo{width:6.33em;height:5.5em}
  h1{margin-top:.5em;font-size:2em;line-height:1.2}
  .sub{margin-top:.375em}
  .lista{width:26.9em;margin-top:.75em;column-gap:.69em;row-gap:.4em}
  .lista li{gap:.69em}
  .lista .l3{gap:.625em}
  .lista .l4{gap:.75em}
  .lista li::before{width:1.25em;height:1.31em;margin-top:.0625em}
  .data{gap:.83em;margin-top:.89em;font-size:1.125em;line-height:1.5}
  .data img{width:1.11em;height:1.17em}
  .vip{margin-top:.25em}

  .form{gap:.6em;width:25.19em;margin-top:1em}
  .campo{height:3.125em;font-size:1em;line-height:1;padding:.75em .5em}
  .campo-zap .campo{padding-left:3.25em}
  .bandeira{left:.56em;gap:.375em}
  .bandeira svg{width:1.25em;height:auto}
  .form-erro{margin:-.3em 0;font-size:.94em}
  .botao{min-height:3.19em;font-size:.973em;line-height:1.3;padding:0 1.25em}
}