/* Página de afiliados: só o que não existe no style.css */
.intro { color: var(--suave); max-width: 46em; margin-bottom: 1.6rem; font-size: 1.05rem; }
.metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.metas article { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem 1.2rem; }
.metas .qtd { font-size: .85rem; color: var(--suave); }
.metas .qtd strong { display: block; color: var(--texto); font-size: 1.4rem; line-height: 1.2; }
.metas .premio { color: var(--ouro); font-weight: 700; margin-top: .4rem; }
.metas h3 { grid-column: 1 / -1; font-size: 1rem; margin-top: .6rem; color: var(--texto); }
.form .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form .dupla { grid-template-columns: 1fr; } }
.estimativa { background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem 1.3rem; margin-bottom: 1.6rem; }
.estimativa p { color: var(--suave); }
.estimativa strong { color: var(--ouro); }
.premios { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 1.6rem; }
.premios article { background: linear-gradient(160deg, #1d1a10, var(--fundo-2)); border: 1px solid var(--ouro-escuro); border-radius: var(--raio); padding: 1.2rem 1.3rem; }
.premios .qtd { color: var(--suave); font-size: .85rem; }
.premios .premio { color: var(--ouro); font-weight: 800; font-size: 1.15rem; line-height: 1.25; margin-top: .3rem; }
.caminho { list-style: none; display: grid; gap: 8px; margin: .8rem 0 1rem; }
.caminho li { display: flex; justify-content: space-between; gap: 1rem; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: .7rem .9rem; }
.caminho li strong { color: var(--ouro); text-align: right; }
.caminho li.alvo { border-color: var(--ouro); }
.apoio { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.6rem; }
.apoio li { padding-left: 1.6rem; position: relative; color: var(--texto); }
.apoio li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.vitrine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 1rem; }
@media (max-width: 720px) { .vitrine { grid-template-columns: 1fr; } }
.vitrine article { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; background: linear-gradient(160deg, #221d0d, var(--fundo-2) 65%); border: 1px solid var(--ouro-escuro); border-radius: 18px; padding: 1.4rem; position: relative; overflow: hidden; }
@media (max-width: 720px) { .vitrine article { aspect-ratio: auto; min-height: 230px; } }
.icone-premio { position: absolute; top: 1.1rem; right: 1.1rem; width: 46%; max-width: 150px; opacity: .95; }
.icone-premio svg { width: 100%; height: auto; fill: none; stroke: var(--ouro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vitrine .qtd { color: var(--suave); font-size: .9rem; font-weight: 600; }
.vitrine .titulo { color: var(--ouro); font-weight: 800; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; }
.vitrine .detalhe { color: var(--suave); font-size: .9rem; }
.vitrine .qtd, .vitrine .titulo, .vitrine .detalhe { position: relative; }
@media (max-width: 720px) { .icone-premio { width: 26%; max-width: 92px; } .vitrine article { min-height: 200px; } }
/* Quadrados com foto: imagem ocupa o fundo e some num degradê escuro onde fica o texto */
.vitrine article.com-foto { background: #000; }
.foto-premio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.vitrine article.com-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,12,.96) 18%, rgba(11,11,12,.55) 45%, rgba(11,11,12,0) 70%); }
.vitrine article.com-foto > p { z-index: 1; }
/* Tela final: o cadastro vem primeiro e em destaque; história e prêmios logo abaixo */
.cadastro { background: linear-gradient(165deg, #241e0c, var(--fundo-2) 55%); border: 2px solid var(--ouro); border-radius: 20px; padding: clamp(1.2rem, 4vw, 2rem); margin: .4rem 0 2.6rem; box-shadow: 0 0 0 6px rgba(230,179,37,.08), 0 18px 50px rgba(0,0,0,.45); scroll-margin-top: 84px; }
.cadastro h3 { font-size: clamp(1.3rem, 3.6vw, 1.7rem); line-height: 1.2; margin: .3rem 0 .5rem; }
.etapas-cadastro { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 1.3rem; }
.etapas-cadastro li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--suave); border-top: 3px solid var(--linha); padding-top: .55rem; }
.etapas-cadastro span { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: var(--linha); color: var(--texto); }
.etapas-cadastro .feito { border-color: var(--ouro-escuro); }
.etapas-cadastro .feito span { background: var(--ouro-escuro); color: #121212; }
.etapas-cadastro .agora { border-color: var(--ouro); color: var(--ouro); }
.etapas-cadastro .agora span { background: var(--ouro); color: #121212; box-shadow: 0 0 0 4px rgba(230,179,37,.25); }
.selo-passo { display: inline-block; background: var(--ouro); color: #121212; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: .3rem .8rem; }
.ajuda-cadastro { color: var(--suave); margin-bottom: 1.1rem; }
.cadastro .form input[type="text"], .cadastro .form input[type="tel"], .cadastro .form input[type="email"] { background: #0b0b0c; border-color: #3a3424; padding: 1rem 1.05rem; font-size: 1.05rem; }
.cadastro .form label { font-size: .95rem; }
.btn-grande { width: 100%; justify-content: center; padding-top: 1.05rem; padding-bottom: 1.05rem; font-size: 1.1rem; }
.garantia { color: var(--suave); font-size: .82rem; text-align: center; }
.depois > h3 { font-size: 1.3rem; margin: .3rem 0 1rem; }
.historia { list-style: none; counter-reset: h; display: grid; gap: 10px; margin-bottom: 1.6rem; }
.historia li { counter-increment: h; position: relative; padding: 1rem 1.1rem 1rem 3.4rem; background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); color: var(--suave); }
.historia li strong { color: var(--texto); }
.historia li::before { content: counter(h); position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--ouro); color: #121212; font-weight: 800; font-size: .9rem; }
.vitrine-resultado { margin-bottom: 1.8rem; }
.depois .nota { text-align: center; margin-top: .8rem; }
@media (max-width: 560px) { .etapas-cadastro li { flex-direction: column; align-items: flex-start; font-size: .74rem; } }
/* Penúltima tela: aviso de que falta só o cadastro */
.alerta-passo { display: flex; gap: .8rem; align-items: center; background: var(--ouro); color: #121212; border-radius: var(--raio); padding: .9rem 1.1rem; margin-bottom: 1.6rem; box-shadow: 0 0 0 6px rgba(230,179,37,.12); animation: pulso 2.4s ease-in-out infinite; }
.alerta-passo .falta { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: #121212; color: var(--ouro); font-weight: 800; font-size: 1.1rem; }
.alerta-passo p { font-size: .95rem; line-height: 1.35; }
@keyframes pulso { 50% { box-shadow: 0 0 0 10px rgba(230,179,37,.04); } }
@media (prefers-reduced-motion: reduce) { .alerta-passo { animation: none; } }
.resultado > .rotulo + .metas-resultado { margin-top: .7rem; }
.metas-resultado { margin-bottom: 0; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .metas-resultado article { padding: .85rem .75rem; } .metas-resultado .premio { font-size: .88rem; } .metas-resultado .qtd { font-size: .75rem; } }
/* Vídeo do Lucas explicando o programa (no lugar da foto do topo) */
.hero-video { position: relative; border-radius: 20px; overflow: hidden; border: 2px solid var(--ouro); background: #000; aspect-ratio: 9 / 16; max-height: 82vh; width: 100%; max-width: 420px; justify-self: center; box-shadow: 0 0 0 6px rgba(230,179,37,.1), 0 18px 50px rgba(0,0,0,.5); scroll-margin-top: 80px; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1) 55%); border: 0; color: #fff; font: 800 1rem "Manrope", sans-serif; cursor: pointer; padding-top: 30%; }
.video-play span { width: 78px; height: 78px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 10px rgba(230,179,37,.25); position: relative; }
.video-play span::after { content: ""; position: absolute; left: 31px; top: 23px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #121212; }
.video-play:hover span { transform: scale(1.06); }
.video-fim { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem; text-align: center; background: rgba(11,11,12,.88); }
.video-fim p { font-weight: 700; font-size: 1.1rem; }
.video-rever { background: none; border: 0; color: var(--suave); text-decoration: underline; font: 600 .9rem "Manrope", sans-serif; cursor: pointer; }
.link-video { display: inline-block; margin-top: 1rem; color: var(--ouro); font-weight: 700; text-decoration: none; }
/* No celular: título → vídeo → texto e botão */
@media (max-width: 820px) {
  #inicio { display: flex; flex-direction: column; gap: 0; padding-top: 24px; }
  #inicio .hero-texto { display: contents; }
  #inicio .selo { order: 1; margin-bottom: .6rem; }
  #inicio h1 { order: 2; margin-bottom: 1rem; }
  #inicio .hero-video { order: 3; max-height: 72vh; max-width: 340px; margin-bottom: 1.2rem; align-self: center; }
  #inicio .sub { order: 4; margin-bottom: 1.2rem; }
  #inicio .hero-texto > .btn { order: 5; }
  #inicio .hero-texto > .nota { order: 6; }
  #inicio .link-video { display: none; }
}
.video-play[hidden], .video-fim[hidden] { display: none; }
.video-play, .video-fim { z-index: 2; }