/* Black do Atabaque - comunicados (mobile primeiro) */
:root{
  --preto:#000;
  --cartao:#111;
  --borda:#2a2a2a;
  --laranja:#ffa300;
  --limao:#aaff00;
  --vermelho:#ff4d4d;
  --texto:#fff;
  --texto2:#ddd;
  --cinza:#8a8a8a;
  --fonte:"Ubuntu",Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--preto);color:var(--texto);
  font-family:var(--fonte);font-size:18px;line-height:1.4;position:relative}
p,h1,h2,h3,figure{margin:0}
s{text-decoration-thickness:3px}

/* fundo do topo: couros de atabaque nas laterais (imagem gerada no ChatGPT, 2:3) */
.fundo{position:absolute;top:0;left:0;right:0;height:min(150vw,720px);pointer-events:none;z-index:0;
  background:var(--preto) url("fundo-topo.webp") center top/cover no-repeat}
.fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 70%, #000 100%)}

main{position:relative;z-index:1;flex:1;width:100%;padding:0 0 40px}
/* cada secao ocupa a largura toda (para o fundo/degrade ir de ponta a ponta); o miolo fica em 640px */
.wrap{max-width:640px;margin:0 auto;padding:0 16px}

/* ---- tipografia (um id do wireframe = um estilo) ---- */
.h1{color:var(--laranja);font-size:clamp(38px,11.8vw,60px);line-height:1.08;font-weight:700;text-align:center;margin:0 0 16px}
.h1b{color:var(--laranja);font-size:clamp(25px,7.4vw,36px);line-height:1.2;font-weight:700;margin:0 0 18px;text-align:center}
.h2{color:var(--limao);font-size:clamp(28px,8.4vw,40px);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.h2b{font-size:clamp(34px,10vw,46px);line-height:1.1;font-weight:700}
.h3{font-size:clamp(19px,5.4vw,24px);line-height:1.25;font-weight:700}
.h3b{font-size:clamp(17px,5vw,22px);line-height:1.2;font-weight:700}
.h3c{color:var(--limao);font-size:clamp(18px,5.4vw,24px);line-height:1.25;font-weight:700}
.t1{color:var(--texto);font-size:clamp(17px,4.8vw,21px);line-height:1.4}
.t1 b{font-weight:700}
.t1 .destaque{color:var(--limao)}
.t2{color:var(--texto2);font-size:clamp(15px,4.4vw,19px);line-height:1.35}
.t3{color:var(--texto2);font-size:clamp(14px,4vw,17px);line-height:1.35}
.t2b{color:#000;font-size:clamp(20px,5.8vw,26px);font-weight:700}
.lnk{color:var(--limao);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.centro{text-align:center}

/* ---- espaços reservados para imagens (trocados na etapa 4) ---- */
.img-ph,.media.img-ph{display:flex;align-items:center;justify-content:center;background:#bdbdbd;color:#444;font-weight:700;
  text-align:center;font-size:clamp(13px,3.8vw,16px);padding:8px}

/* ---- hero ---- */
.hero{text-align:center}
.hero .wrap{padding-top:clamp(14px,4vw,24px)}
.logo{display:block;width:min(270px,70%);height:auto;margin:0 auto 14px}
.hero .t1{max-width:34ch;margin:0 auto 22px;font-weight:500}
.card{background:var(--cartao);border:1px solid var(--borda);border-radius:14px;padding:12px}
.relogio{background:rgba(8,8,8,.92);border:3px solid var(--laranja);padding:12px 12px 14px;text-align:center}
.relogio .t1{font-weight:700;margin:0 0 8px;max-width:none;text-align:center}
.caixas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.card2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 2px 8px;
  background:#050505;border:1px solid var(--borda);border-radius:10px}
.card2 .t2{color:#fff;font-weight:500}
.relogio .data{color:var(--limao);font-weight:700;white-space:nowrap}
.aberto{color:var(--limao);font-size:clamp(22px,6.4vw,30px);font-weight:700;padding:14px 4px}
.btn-inscrever{display:block;margin:6px 4px 4px;padding:16px 12px;border-radius:14px;background:var(--limao);color:#000;
  font-size:clamp(18px,5.4vw,24px);font-weight:800;text-align:center;text-decoration:none;letter-spacing:.02em;
  box-shadow:0 0 18px rgba(170,255,0,.45)}
.btn-inscrever:active{transform:translateY(1px)}

/* ---- seções ---- */
/* secoes sem linhas nem cortes; a faixa marrom (cor do couro do topo) nasce do preto e volta ao preto em degrade */
.section{padding:40px 0}
.section.marrom{--faixa:#1f1409;padding:84px 0;
  background:linear-gradient(to bottom,#000 0,var(--faixa) 84px,var(--faixa) calc(100% - 84px),#000 100%)}

/* ---- vídeos ---- */
.card3{display:grid;gap:6px;background:var(--cartao);border:1px solid var(--borda);border-radius:14px;padding:14px;margin-bottom:16px}
.pill{justify-self:start;background:var(--laranja);color:#000;font-weight:700;border-radius:999px;padding:3px 14px}
.media{display:block;position:relative;width:100%;background:#000;border-radius:10px;overflow:hidden}
.video{aspect-ratio:16/9;margin-top:8px;border:1px solid var(--borda)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* video gravado em pe (celular): moldura 9:16 centralizada. Para usar, some a classe "vertical" ao .video no HTML */
.video.vertical{aspect-ratio:9/16;width:min(100%,300px);margin-left:auto;margin-right:auto}
.play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:#000;cursor:pointer}
.play img{display:block;width:100%;height:100%;object-fit:cover;opacity:.9}
.play .icone{position:absolute;left:50%;top:50%;width:clamp(64px,20vw,84px);height:clamp(64px,20vw,84px);transform:translate(-50%,-50%);
  background:var(--laranja);border-radius:50%;box-shadow:0 4px 18px rgba(0,0,0,.6)}
.play .icone::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #000}
.play:focus-visible{outline:3px solid var(--limao);outline-offset:-3px}
.camada{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer}
.trava{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(52px,17vw,84px)}

/* ---- cursos ---- */
.section .card{margin-bottom:14px}
/* capa quadrada da Hotmart no centro, com a propria imagem borrada nas laterais (igual ao catalogo da Hotmart) */
.capa{aspect-ratio:16/9;margin-bottom:12px;background:#000;isolation:isolate}
.capa::before{content:"";position:absolute;inset:-12%;z-index:-1;background-size:cover;background-position:center;
  filter:blur(18px) brightness(.7)}
.capa img{display:block;height:100%;width:auto;aspect-ratio:1/1;margin:0 auto}
.capa-1::before{background-image:url("capa-atabaque-expressao.webp")}
.capa-2::before{background-image:url("capa-agogo-umbanda.webp")}
.capa-3::before{background-image:url("capa-50-repiques.webp")}
.capa-4::before{background-image:url("capa-toque-e-cante.webp")}
.capa-5::before{background-image:url("capa-vozes-do-terreiro.webp")}
.card .h3{margin-bottom:4px}
.check{font-size:.9em}
.card .t1{color:var(--texto2);margin-bottom:6px}
.preco{color:var(--vermelho);font-size:clamp(19px,5.6vw,24px);font-weight:700;text-align:right}
.card4{margin-top:6px;background:#0a0a0a;border:1px solid var(--borda);border-top:5px solid var(--laranja);border-radius:14px;
  padding:16px 12px 18px;text-align:center}
.h3b{margin:0}
.card4 .h3b{font-size:clamp(20px,6vw,26px)}
.card4 .rotulo{margin:0;color:var(--texto2);font-size:clamp(13px,3.9vw,16px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.card4 .h2b{margin:6px 0 0;color:var(--texto2);font-size:clamp(34px,10vw,46px)}
.h2b s{text-decoration-color:var(--vermelho);text-decoration-thickness:.09em}
.card4 .seta{display:block;position:relative;width:1px;height:34px;margin:8px auto 14px;background:var(--cinza)}
.card4 .seta::after{content:"";position:absolute;left:50%;bottom:-1px;width:8px;height:8px;border-right:1px solid var(--cinza);border-bottom:1px solid var(--cinza);transform:translateX(-50%) rotate(45deg)}
.card4 .misterio{margin:6px 0 12px;color:var(--limao);font-size:clamp(52px,16.5vw,84px);line-height:1;font-weight:700;letter-spacing:.02em;text-shadow:0 0 22px rgba(170,255,0,.45),0 0 4px rgba(170,255,0,.35)}
.card4 .selo{display:inline-block;margin:0 0 14px;padding:8px 16px;border:1px solid var(--laranja);border-radius:22px;color:var(--laranja);font-size:clamp(12px,3.5vw,14px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;box-shadow:0 0 14px rgba(255,163,0,.18)}
.card4 .legenda-soma{margin:0;color:var(--texto2)}

/* valor revelado: 12x grande, a vista logo abaixo, formas de pagamento no fim do cartao */
.card4 .parcelas{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 12px;margin:6px 0 6px;color:var(--limao);font-weight:700;line-height:1.05;
  text-shadow:0 0 22px rgba(170,255,0,.45),0 0 4px rgba(170,255,0,.35)}
.card4 .parcelas .de{font-size:clamp(22px,6.6vw,34px)}
.card4 .parcelas .num{font-size:clamp(44px,13.5vw,68px);letter-spacing:.01em;white-space:nowrap}
.card4 .avista{margin:0 0 16px;color:var(--texto2);font-size:clamp(20px,6vw,28px);line-height:1.2}
.card4 .avista b{color:#fff;font-weight:700;white-space:nowrap}
.card4 .pagamento{margin-top:18px;padding-top:14px;border-top:1px solid var(--borda);text-align:left}
.card4 .pagamento .h3b{margin:0 0 8px}
.card4 .pagamento ul{margin:0;padding-left:22px}
.card4 .pagamento li{margin:0 0 4px}

/* ---- instrumentos ---- */
.grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
/* fotos de estudio geradas no ChatGPT (fundo marrom quente, ja combinando com a pagina) */
.card5{border:1px solid #3a2a16;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:#1c130a}
.foto{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:0}
.legenda{background:var(--laranja);color:#000;text-align:center;padding:9px 6px;flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.legenda .nome{display:block;font-size:clamp(16px,4.6vw,20px);font-weight:800}
.legenda .valor{display:block;margin-top:4px;font-size:clamp(12px,3.4vw,15px);font-weight:700}
.card5:last-child{grid-column:1/-1;width:calc(50% - 5px);justify-self:center}

/* ---- bônus embaçados ---- */
.card6{position:relative;display:flex;align-items:center;gap:14px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:14px;padding:18px 14px;margin-bottom:12px;min-height:92px;overflow:hidden}
.card6 .ico{font-size:34px;filter:blur(5px);opacity:.7;flex:none}
.card6 .borrao{filter:blur(6px);opacity:.7;user-select:none;min-width:0}
.card6 .btn{position:absolute;left:68px;right:12px;top:50%;transform:translateY(-50%);
  background:#000;color:#fff;border:2px solid var(--laranja);border-radius:14px;padding:10px 12px;text-align:center;
  font-size:clamp(15px,4.4vw,19px);font-weight:700;line-height:1.2}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- depoimentos (prints empilhados, sem rolagem lateral) ---- */
#depoimentos .intro{max-width:34ch;margin:-4px auto 20px;color:var(--texto2)}
.card7{display:grid;gap:8px;background:var(--cartao);border:1px solid #3a2a16;border-radius:14px;padding:10px;margin-bottom:16px}
.card7 .print{height:auto;background:#fff}
.card7 .autor{color:var(--laranja);font-size:clamp(14px,4vw,17px);font-weight:700;text-align:center}

/* ---- bonus revelados (cartoes legiveis, empilhados) ---- */
#bonus .intro{max-width:34ch;margin:-4px auto 20px;color:var(--texto2)}
.card6.real{align-items:flex-start}
.card6.real .ico{filter:none;opacity:1;line-height:1;width:40px;text-align:center}
.card6.real .corpo{min-width:0;display:grid;gap:8px;flex:1}
.card6.real .h3b{color:var(--limao)}
.card6.real .t3{color:var(--texto2)}
.prazo{justify-self:start;background:var(--laranja);color:#000;font-weight:700;border-radius:999px;padding:3px 14px;font-size:clamp(13px,3.8vw,16px);line-height:1.3}
.card6.real .preco{margin:0}
/* bonus com capa: miniatura quadrada a esquerda, no lugar do icone (um pouco maior que ele) */
.card6.real .miniatura{display:block;flex:none;width:clamp(68px,20vw,88px);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--borda)}
.nota-prazo{margin-top:4px;color:var(--cinza)}

/* ---- regras do sorteio ---- */
.regras{margin-top:6px}
.regras-titulo{margin-bottom:10px;font-weight:700;color:var(--laranja)}
.regras-lista{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.regras-lista li{display:flex;gap:12px;align-items:flex-start;background:var(--cartao);border:1px solid var(--borda);border-radius:12px;padding:12px 14px}
.regras-lista .ico{flex:none;width:34px;text-align:center;font-size:26px;line-height:1.1}
.regras .t1{margin-bottom:10px}
.regras .t1 b{color:var(--limao)}

/* ---- inscrição e professor ---- */
#inscricao .t1{max-width:36ch;margin:0 auto;text-align:center}
.retrato{display:block;aspect-ratio:4/5;width:min(100%,420px);height:auto;margin:0 auto 16px;border-radius:22px;object-fit:cover;object-position:62% 30%}
.retrato img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.nome{text-align:center;margin-bottom:14px}
#professor .t1{margin-bottom:12px;color:var(--texto2)}

/* ---- rodapé ---- */
.footer{position:relative;z-index:1;background:var(--laranja);text-align:center;padding:28px 16px}