/* ===== ArqBase — o combo dos 3 produtos nas páginas de produto do site internacional (29/10/2026) =====
   Carregado depois de produto-black.css, só nas prévias produto-black-<en|es>-<chave>.html (montar-produto-black-int.js).
   O Victor, 29/10: «no caso do site INT não teremos uma página de combos, mas quero oferecer para os visitantes um combo
   contendo os 3 produtos. Não precisa criar uma página, pode criar um CTA debaixo do CTA de cada produto das páginas
   internas contendo a promoção do combo». O cartão fica embaixo do cartão da oferta, na mesma seção e com a mesma largura
   (980 px), no desenho dos cartões da página dos combos do Brasil (combos-black.html e black-november.css): escuro, com a
   faixa BLACK BUNDLE / BLACK COMBO no alto, a imagem das caixas (img/combo-int-<língua>.webp, de fazer-combo-int.js), o
   «de» riscado em vermelho claro com o «% OFF» na caixinha verde, o preço em verde claro, a economia na pílula turquesa e
   o botão em pílula (o .btn--black de produto-black.css). No computador, duas colunas como o cartão da oferta (a imagem e
   a lista | o preço); a partir de 900 px, uma (como o cartão da oferta, em curso.css). */
body.black-produto .combo-int {
  max-width: 980px; margin: 36px auto 0; text-align: left; overflow: hidden; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.16); color: #EDEDF2; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  background: linear-gradient(180deg, rgba(0,148,156,0.18) 0%, rgba(0,44,54,0.42) 45%, rgba(0,12,18,0.75) 100%);
}
body.black-produto .combo-int__corpo { display: grid; grid-template-columns: 1.05fr 1fr; }
body.black-produto .combo-int__detalhes { padding: 22px 40px 36px; }
body.black-produto .combo-int__cena { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto 10px; }
body.black-produto .combo-int__etiqueta {
  font-family: var(--black-fonte); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--black-agua);
}
body.black-produto .combo-int h3 {
  font-family: var(--black-titulo); font-weight: 800; font-size: 26px; line-height: 1.15; color: #FFFFFF; margin: 8px 0 10px; text-wrap: balance;
}
body.black-produto .combo-int__texto { font-size: 15px; line-height: 1.6; color: #C6CAD6; margin: 0 0 14px; }
body.black-produto .combo-int ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body.black-produto .combo-int li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: #E4E6EE; }
body.black-produto .combo-int li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 16px; height: 16px; background-color: var(--black-agua);
  -webkit-mask: var(--check) no-repeat center / contain; mask: var(--check) no-repeat center / contain;
}
/* a comparação com os 3 comprados separados na Black (como a frase dos combos do AutoCAD no Brasil: «Separado sairia…») */
body.black-produto .combo-int__ancora { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: #C6CAD6; }
body.black-produto .combo-int__ancora strong { color: #FFFFFF; }
/* o preço */
body.black-produto .combo-int__preco {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 44px; text-align: center;
  border-left: 1px solid rgba(255,255,255,0.12);
}
body.black-produto .combo-int__de { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
body.black-produto .combo-int__de s {
  font-family: var(--black-preco); font-weight: 400; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--preco-vermelho-claro); text-decoration: line-through; text-decoration-thickness: 2px;
}
body.black-produto .combo-int__off {
  padding: 3px 8px 2px; border-radius: 3px; background: #0B7F44; color: #FFFFFF; white-space: nowrap;
  font-family: var(--black-preco); font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0.1em;
}
body.black-produto .combo-int__parcela {
  font-family: var(--black-preco); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #C6CAD6; margin-top: 12px;
}
body.black-produto .combo-int__valor { font-family: var(--black-preco); font-weight: 600; font-size: clamp(44px, 5vw, 58px); line-height: 1.05; color: var(--preco-verde-claro); }
body.black-produto .combo-int__economia {
  display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(35,211,204,0.12); border: 1px solid rgba(35,211,204,0.4); color: #7FE9E2;
  font-family: var(--black-fonte); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
body.black-produto .combo-int__preco .btn--black { display: block; width: 100%; margin-top: 22px; font-size: 17px; padding: 19px 24px; text-align: center; white-space: normal; }
body.black-produto .combo-int__nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #A6A8B0; }

@media (max-width: 900px) {
  body.black-produto .combo-int__corpo { grid-template-columns: 1fr; }
  body.black-produto .combo-int__preco { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
}
@media (max-width: 640px) {
  body.black-produto .combo-int { margin-top: 28px; }
  body.black-produto .combo-int__detalhes { padding: 16px 20px 26px; }
  body.black-produto .combo-int__preco { padding: 26px 20px 30px; }
  body.black-produto .combo-int h3 { font-size: 22px; }
  body.black-produto .combo-int li { font-size: 14px; }
  body.black-produto .combo-int__de s { font-size: 19px; }
}