/* Página de vendas do Achadinhos Pró — recriada a partir do layout do Elementor (mesmas cores, fontes e imagens). */
:root {
  --dourado: #F5D7A1;
  --botao-a: #EAD086;
  --botao-b: #E2B862;
  --vinho: #5C0F22;
  --vinho-garantia: #5C203B;
  --grafite: #2E343C;
  --cartao: #222427;
  --faq: #202325;
  --rodape: #161214;
  --branco: #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--rodape); color: var(--branco); font-family: 'Poppins', Arial, sans-serif; line-height: 1.4; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
.serif { font-family: 'Marcellus', Georgia, serif; font-weight: 400; }
.dourado { color: var(--dourado); }

.botao {
  display: block; width: 100%; max-width: 520px; margin: 0 auto; text-align: center; text-decoration: none;
  font-family: 'Poppins', Arial, sans-serif; font-weight: 500; font-size: 19px; color: #000;
  background: linear-gradient(170deg, var(--botao-a) 12%, var(--botao-b) 100%);
  border-radius: 30px; padding: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s;
}
.botao:hover { transform: translateY(-2px); }

/* ---------- 1. topo ---------- */
.topo {
  min-height: 650px; padding: 50px; display: flex; align-items: center;
  background: #5a0b13 url(img/banner-camisa-grafite.webp) bottom center / cover no-repeat;
}
.topo .coluna { width: 50%; display: flex; flex-direction: column; gap: 20px; text-align: center; }
.topo h1 { font-size: 40px; }
.topo .sub { font-size: 19px; text-transform: capitalize; }
.topo .chamada { font-family: 'Marcellus', Georgia, serif; font-size: 40px; text-transform: capitalize; }
.topo .bonus { font-size: 19px; text-transform: capitalize; }
.topo .vitalicio { font-size: 19px; font-weight: 700; }

/* ---------- 2. pra quem é ---------- */
.praquem {
  min-height: 650px; padding: 50px; display: flex; align-items: center;
  background: #1d2024 url(img/banner-2-grafite.webp) bottom center / cover no-repeat;
}
.praquem .coluna { width: 50%; margin-left: auto; }
.praquem h2 { font-size: 43px; margin-bottom: 24px; }
.praquem ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.praquem li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.praquem li svg { flex: 0 0 22px; height: 22px; fill: var(--dourado); margin-top: 1px; }

/* ---------- 3. telegram ---------- */
.telegram { background: var(--vinho); padding: 70px 50px; text-align: center; }
.telegram h2 { font-size: 28px; text-transform: capitalize; margin-bottom: 18px; }
.telegram .texto { font-family: 'Marcellus', Georgia, serif; font-size: 34px; max-width: 900px; margin: 0 auto 40px; }
.telegram .icones { display: flex; justify-content: center; gap: 60px; margin-bottom: 40px; }
.telegram .icone { display: flex; flex-direction: column; align-items: center; gap: 14px; font-family: 'Marcellus', Georgia, serif; font-size: 26px; }
.telegram .icone img { width: 60px; height: 60px; }

/* ---------- 4. oferta ---------- */
.oferta { background: var(--grafite); padding: 90px 50px; display: flex; justify-content: center; }
.cartao {
  width: 47%; min-width: 320px; background: var(--cartao); border: 1px solid rgba(255,255,255,.22); border-radius: 10px;
  padding: 50px 30px; text-align: center; display: flex; flex-direction: column; gap: 14px;
}
.cartao h2 { font-size: 37px; text-transform: capitalize; }
.cartao .pacote { font-size: 26px; color: var(--dourado); }
.cartao .aproveite { font-size: 19px; padding: 13px; }
.cartao .de { font-size: 18px; }
.cartao .parcela { font-family: 'Montserrat', Arial, sans-serif; font-size: 37px; font-weight: 700; }
.cartao .vista { font-family: 'Montserrat', Arial, sans-serif; font-size: 15px; }
.cartao ul { list-style: none; margin: 10px 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.cartao li { display: flex; gap: 12px; align-items: center; font-size: 17px; }
.cartao li img { width: 26px; height: 26px; flex: 0 0 26px; }

/* ---------- 5. garantia ---------- */
.garantia { background: var(--vinho-garantia); padding: 50px 90px; min-height: 440px; display: flex; align-items: center; }
.garantia .caixa { max-width: 974px; margin: 0 auto; display: flex; align-items: center; gap: 21px; }
.garantia img { width: 35%; flex: 0 0 35%; }
.garantia h2 { font-family: 'Marcellus', Georgia, serif; font-size: 25px; font-weight: 700; margin-bottom: 12px; }
.garantia p { font-size: 15px; }

/* ---------- 6. perguntas ---------- */
.faq { background: var(--faq); padding: 90px 50px; }
.faq .caixa { max-width: 1239px; margin: 0 auto; }
.faq h2 { font-family: 'Marcellus', Georgia, serif; font-size: 40px; text-align: center; margin-bottom: 30px; }
.faq details { border-bottom: 1px solid rgba(255,255,255,.15); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 15px; display: flex; gap: 12px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 14px; transition: transform .2s; }
.faq details[open] summary { color: var(--dourado); }
.faq details[open] summary svg { transform: rotate(90deg); }
.faq details p { font-size: 17px; padding: 0 0 18px 26px; }

/* ---------- 7. rodapé ---------- */
.rodape { background: var(--rodape); padding: 50px; text-align: center; }
.rodape h2 { font-family: 'Marcellus', Georgia, serif; font-size: 33px; }
.rodape .redes { display: flex; justify-content: center; gap: 14px; margin: 22px 0; }
.rodape .redes a { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rodape .redes svg { width: 22px; height: 22px; fill: #fff; }
.rodape .yt { background: #cd201f; }
.rodape .ig { background: #A8B62F; }
.rodape .marca { font-size: 33px; }
.rodape .legal { margin-top: 26px; font-size: 13px; opacity: .7; }
.rodape .legal a { color: inherit; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .topo { min-height: 377px; background-image: url(img/banner-1-tablet-2.webp); background-position: bottom right; }
  .topo .coluna { width: 62%; }
  .topo h1 { font-size: 38px; }
  .topo .chamada { font-size: 36px; }
  .praquem { background-image: url(img/banner-2-tablet-3.webp); }
  .praquem h2 { font-size: 38px; }
  .oferta { padding: 21px; }
  .cartao { width: 674px; max-width: 100%; }
  .garantia { padding: 60px 50px 20px; }
  .faq h2 { font-size: 36px; }
}

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .topo {
    min-height: 726px; padding: 20px 20px 50px; align-items: flex-start;
    background-image: url(img/celular-baner-1.webp); background-position: bottom center;
  }
  .topo .coluna { width: 100%; gap: 14px; }
  .topo h1 { font-size: 32px; }
  .topo .sub { font-size: 18px; }
  .topo .chamada { font-size: 23px; }
  .topo .bonus, .topo .vitalicio { font-size: 16px; }
  .botao { font-size: 14px; }
  .praquem {
    min-height: 673px; padding: 20px 20px 48px; align-items: flex-start;
    background-image: url(img/banner-2-celular-1.webp); background-position: bottom center;
  }
  .praquem .coluna { width: 100%; padding: 25px 0; }
  .praquem h2 { font-size: 22px; text-align: center; }
  .praquem li { font-size: 13px; }
  .praquem li svg { flex-basis: 18px; height: 18px; }
  .telegram { padding: 21px 21px 50px; }
  .telegram h2, .telegram .texto { font-size: 23px; }
  .telegram .icones { flex-direction: column; gap: 30px; }
  .telegram .icone { font-size: 24px; }
  .telegram .botao { font-size: 16px; }
  .oferta { padding: 20px; }
  .cartao { min-width: 0; width: 100%; padding: 40px 18px; }
  .cartao .botao { font-size: 12px; }
  .garantia { padding: 20px; min-height: 509px; }
  .garantia .caixa { flex-direction: column; text-align: center; }
  .garantia img { width: 60%; flex-basis: auto; }
  .faq { padding: 20px; }
  .faq h2 { font-size: 31px; }
  .rodape { padding: 20px; }
  .rodape h2 { font-size: 22px; }
  .rodape .marca { font-size: 27px; }
}