/* ===== ArqBase — o CTA da Black nas páginas de produto (26/10/2026) =====
   Carregado depois de curso.css e do CSS da página, nas prévias produto-black-<chave>.html (montadas por
   montar-produto-black.js). Nasceu como sugestão na página do SketchUp; o Victor aprovou e mandou estender às outras
   onze («pode aplicar o visual»). Só o CTA muda; o resto da página fica como está. A identidade é a da Black 2026, a mesma
   da página dos combos e da página inicial: o fundo azul-marinho com as luzes turquesa, a faixa preta BLACK OFERTA com o
   ícone do chapéu e as letras BLACK, a pílula turquesa nos botões; e o preço no estilo dos cartões da página inicial
   (Victor, 26/10: «aplique o mesmo estilo de preço e a mesma tarja de BLACK OFERTA na página de produto»): o «DE R$…»
   riscado em vermelho, o desconto «% OFF» na caixinha verde ao lado, o preço em verde, na Outfit (a gratuita mais parecida
   com a Stolzl da Black de 2025 — ver home-black.css). Sem cronômetro («não precisa de cronômetro agora»).
   O cartão da oferta é sempre BRANCO, como o da página do SketchUp e os da página inicial (o verde e o vermelho do preço
   só leem no branco): o da Formação era dourado, os da IA e do AutoCAD escuros. Os combos e o «leve também» ficam
   ESCUROS, como o combo do SketchUp: os dourados (AutoCAD, Packs, Checklist) passam ao escuro, com as letras claras.
   As regras começam por «body.black-produto» para empatar com as do CSS de cada página («body.template-autocad …») e
   ganhar pela ordem (este arquivo vem depois). (A faixa BLACK OFERTA e o preço repetem regras de home-black.css; na
   hora de publicar, viram uma regra só.) */
body.black-produto {
  --black-fundo: #010A10;
  --black-agua: #53D6DD;
  --black-degrade: linear-gradient(90deg, #9CDCEC 9.7%, #98DCEC 27.8%, #53D6DD 47%, #23D3CC 68.6%, #86D2BA 89.7%);
  --black-botao: linear-gradient(90deg, #5FE3DC 0%, #23D3CC 50%, #13B4AF 100%);
  --black-titulo: 'Saira Semi Condensed', 'Saira', system-ui, sans-serif;
  --black-fonte: 'Saira', 'Instrument Sans', system-ui, sans-serif;
  --black-preco: 'Outfit', 'Saira', system-ui, sans-serif;
  --preco-verde: #006C3D;           /* o verde do preço na página da Black de 2025 */
  --preco-vermelho: #D5203F;        /* o vermelho da marca, para o preço cheio riscado */
  --preco-verde-claro: #3FD17F;     /* os dois claros: os mesmos tons nos cartões escuros, onde os escuros não leem */
  --preco-vermelho-claro: #FF6B7D;
}

/* o item da Black no menu (como na página inicial e na dos combos) */
.menu a.menu__black { color: var(--black-agua); font-weight: 700; letter-spacing: 1px; }
.menu a.menu__black:hover { color: #FFFFFF; }

/* ---- os botões: a pílula turquesa da Black (a cor de cada página — azul, vermelho, ouro, escuro — sai) ---- */
body.black-produto .btn--black, body.black-produto .btn--black:hover {
  background: var(--black-botao); color: #00161A; border: 0; border-radius: 999px;
  font-family: var(--black-fonte); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}
body.black-produto .btn--black:hover { filter: brightness(1.06); }

/* ---- a faixa BLACK OFERTA / BLACK COMBO: a mesma dos cartões da página inicial (46 px; o ícone com 30 px = 35,6 px, as
   letras com 21 px = 84,3 px) ---- */
.card__faixa-black { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; background: #000000; }
.card__faixa-logo {
  width: 127px; height: 30px; flex-shrink: 0;
  background: url(/assets/img/black/logo-2026-icone.webp?v=1) left center / auto 30px no-repeat, url(/assets/img/black/logo-2026-black.webp?v=1) right center / auto 21px no-repeat;
}
.card__faixa-oferta { font-family: var(--black-titulo); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: 0.5px; color: #FFFFFF; }
/* nos cartões em grade (a oferta, o combo do SketchUp, o do Checklist, o «leve também») a faixa ocupa a linha toda */
.oferta__card > .card__faixa-black, .combo__card > .card__faixa-black { grid-column: 1 / -1; }

/* ---- a oferta («Seu investimento»): o fundo da Black, os títulos claros, o cartão branco com a faixa BLACK OFERTA no
   alto e o preço no estilo dos cartões — maior, porque a caixa é maior ---- */
body.black-produto .oferta {
  background:
    linear-gradient(180deg, rgba(1,10,16,0) 78%, var(--black-fundo) 100%),
    url(/assets/img/black/fundo-2026.webp?v=1) center / 100% 100% no-repeat,
    #04212B;
}
/* o respiro de cima e de baixo o de curso.css (80/64 px; no celular, 44): várias páginas o zeram (Vistoria, Levantamento,
   Contrato, Precificação, Revit), porque lá a oferta continua o fundo creme da seção de cima — no fundo escuro, o título
   ficava colado na borda (medido na foto da Vistoria, 26/10) */
body.black-produto .oferta { padding-top: 80px; padding-bottom: 64px; }
body.black-produto .oferta .rotulo { color: var(--black-agua); }
body.black-produto .oferta h2 { color: #FFFFFF; }
body.black-produto .oferta__sub { color: #C6CAD6; }
/* o cartão branco: dentro dele, as cores do tema claro de curso.css (as páginas escuras trocam esses tons) */
body.black-produto .oferta__card {
  --branco: #FFFFFF; --creme: #FAF8F3; --creme-escuro: #F1EDE2;
  --texto: #201E19; --texto-2: #4A463D; --texto-suave: #5A564C; --texto-apagado: #6F6957;
  --borda: #E6E1D4; --borda-2: #DCD5C2; --borda-3: #C9C2B0;
  background: #FFFFFF; color: var(--texto); overflow: hidden; border: 0; box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
/* o destaque ciano da IA quase some no branco: um ciano mais fundo, só dentro do cartão */
body.black-produto.render-ia .oferta__card { --azul: #0891B2; }
body.black-produto .oferta__card .oferta__lista { border-color: var(--borda); }
body.black-produto .oferta__card .oferta__lista h3, body.black-produto .oferta__curso > span { color: var(--texto); }
body.black-produto .oferta__card .oferta__lista li { color: var(--texto-2); border-bottom-color: var(--creme-escuro); }
body.black-produto .oferta__card .oferta__lista li::before { color: var(--azul); }
body.black-produto .oferta__mais { color: var(--texto-suave); }
/* as caixas de texto do cartão (o idioma, a frase do combo da Formação) no bege claro, como na página do SketchUp */
body.black-produto .oferta__card .oferta__idioma, body.black-produto .oferta__card .oferta__combo, body.black-produto .plano .oferta__idioma { background: #F1EDE2; color: #5A564C; }
body.black-produto .oferta__card .oferta__idioma strong, body.black-produto .oferta__card .oferta__combo strong, body.black-produto .plano .oferta__idioma strong { color: #201E19; }
/* o preço da Black dentro das frases (a Formação, os Packs) no verde do preço */
body.black-produto .oferta__card .oferta__combo .destaque, body.black-produto .oferta__conta .oferta__conta-destaque { color: var(--preco-verde); }
body.black-produto .oferta__card .oferta__garantia { color: var(--texto-apagado); }
/* o preço */
body.black-produto .oferta__de { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; text-decoration: none; }
body.black-produto .oferta__de s {
  font-family: var(--black-preco); font-weight: 400; font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--preco-vermelho); text-decoration: line-through; text-decoration-thickness: 2px;
}
body.black-produto .oferta__off {
  padding: 4px 9px 3px; border: 0; border-radius: 3px; background: var(--preco-verde); color: #FFFFFF; white-space: nowrap;
  font-family: var(--black-preco); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: 0.1em;
}
body.black-produto .oferta__parcela { font-family: var(--black-preco); font-weight: 400; letter-spacing: 0.1em; color: #8D8D8D; }
body.black-produto .oferta__valor { font-family: var(--black-preco); font-weight: 600; color: var(--preco-verde); font-size: clamp(50px, 5.4vw, 66px); line-height: 1.05; }
body.black-produto .oferta__avista {
  font-family: var(--black-preco); font-weight: 400; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--preco-verde);
}
body.black-produto .oferta__preco .btn--black { font-size: 17px; padding: 19px 24px; }
/* as formas de pagamento: a imagem tem os logos em BRANCO (feita para fundo escuro) e no cartão branco não aparecia — já
   hoje, no site, na página do SketchUp (medido em 26/10). Aqui os logos ficam em cinza-escuro. */
body.black-produto .oferta__pagamentos { filter: brightness(0); opacity: .5; }

/* ---- os avulsos da Formação («Adquira somente um dos cursos»): no fundo da Black, cartões brancos com a faixa BLACK
   OFERTA de ponta a ponta no alto (ela desfaz o padding do cartão: 32 × 34 px; no celular, 22 px) e o mesmo preço ---- */
body.black-produto .separados { background: var(--black-fundo); }
body.black-produto .separados h2 { color: #FFFFFF; }
body.black-produto .plano { overflow: hidden; border: 0; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
body.black-produto .plano > .card__faixa-black { margin: -32px -34px 22px; }
body.black-produto .plano__de { margin-bottom: 10px; }
body.black-produto .plano__de s { font-size: 19px; }
body.black-produto .plano__parcela { font-family: var(--black-preco); font-weight: 400; letter-spacing: 0.1em; color: #8D8D8D; }
body.black-produto .plano__valor { font-family: var(--black-preco); font-weight: 600; color: var(--preco-verde); font-size: 46px; line-height: 1.05; }
body.black-produto .plano__avista {
  font-family: var(--black-preco); font-weight: 400; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--preco-verde);
}

/* ---- os combos e o «leve também»: escuros, como os cartões da página dos combos, com a faixa BLACK COMBO (ou BLACK
   OFERTA) de ponta a ponta no alto, as letras claras e o preço no estilo dos cartões, nos tons claros ---- */
body.black-produto .combo { background: var(--black-fundo); padding-bottom: 80px; }
body.black-produto .combo__card {
  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%);
  border: 1px solid rgba(255,255,255,0.16); color: #EDEDF2; box-shadow: 0 24px 60px rgba(0,0,0,0.45); overflow: hidden;
}
/* o combo do SketchUp tem padding no cartão (44 × 48 px; no celular, 24 px): a faixa o desfaz. Os outros não têm. */
body.black-produto.pg-sketchup .combo__card > .card__faixa-black { margin: -44px -48px 0; }
body.black-produto .combo__etiqueta, body.black-produto .combo__selo, body.black-produto .combo__num {
  background: rgba(35,211,204,0.12); border: 1px solid rgba(83,214,221,0.45); color: #7FEDE6;
}
body.black-produto .combo__num { border: 0; }
/* os ícones do SketchUp e da IA são dourado-escuros (feitos para o cartão amarelo de hoje): no escuro, ficam brancos */
body.black-produto .combo__icones img { filter: brightness(0) invert(1); }
/* as letras dos combos que eram dourados (AutoCAD, Packs, Checklist): claras no escuro */
body.black-produto .combo__card h3, body.black-produto .combo__card h4, body.black-produto .combo__rotulo, body.black-produto .combo__ancora strong { color: #FFFFFF; }
body.black-produto .combo__card li, body.black-produto .combo__sub, body.black-produto .combo__papel, body.black-produto .combo__rotulo2,
body.black-produto .combo__ancora, body.black-produto .combo__card .oferta__parcela, body.black-produto .combo__parcela { color: #C6CAD6; }
body.black-produto .combo__card li::before { color: var(--black-agua); }
body.black-produto .combo__mais { color: var(--black-agua); }
body.black-produto .combo__card li, body.black-produto .combo__item, body.black-produto .combo__ancora, body.black-produto .combo__lista,
body.black-produto .combo__preco { border-color: rgba(255,255,255,0.12); }
body.black-produto .combo__card .oferta__garantia { color: #A6A8B0; }
body.black-produto .combo__card .oferta__idioma { background: rgba(255,255,255,0.07); color: #C9CBD8; }
body.black-produto .combo__card .oferta__idioma strong { color: #FFFFFF; }
/* o preço do combo */
body.black-produto .combo__card .combo__de { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; text-decoration: none; }
body.black-produto .combo__card .combo__de s {
  font-family: var(--black-preco); font-weight: 400; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--preco-vermelho-claro); text-decoration: line-through; text-decoration-thickness: 2px;
}
/* a caixinha do desconto um verde mais aceso que a do cartão branco (#0B7F44: branco em cima com 5:1), para aparecer no
   fundo escuro */
body.black-produto .combo__off {
  padding: 3px 8px 2px; border: 0; border-radius: 3px; background: #0B7F44; color: #FFFFFF; white-space: nowrap;
  font-family: var(--black-preco); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: 0.1em;
}
body.black-produto .combo__valor { font-family: var(--black-preco); font-weight: 600; color: var(--preco-verde-claro); }
body.black-produto .combo__card .combo__avista {
  font-family: var(--black-preco); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--preco-verde-claro); opacity: 1;
}
body.black-produto .combo__nota, body.black-produto .combo__parcela { color: #C6CAD6; opacity: 1; }

/* ---- a garantia: no fundo escuro, logo abaixo dos CTAs (o Victor, 29/10: «verifique o quadro da garantia nas páginas,
   percebi que ele está grudado na parte de cima. prefiro que ele fique na faixa de cima logo abaixo dos CTA aproveitando o
   fundo escuro»). Na página normal, a seção da garantia é da cor da página e começa sem espaço em cima (o espaço vem da
   seção de antes, da mesma cor); na Black, as seções dos CTAs (a oferta, os combos, os avulsos) ficaram escuras e o quadro
   colava na divisa. Aqui a seção da garantia fica escura como elas (a mesma cor do fim da oferta e dos combos), o quadro de
   vidro escuro com as letras claras (o selo dourado lê bem no escuro; a garantia com selo, sem quadro no computador, fica
   só com as letras claras), o respiro embaixo, e a seção seguinte ganha o espaço em cima (várias começavam sem ele). Os 6
   desenhos de garantia das páginas: .garantia (__card, __caixa, __cartao, __bloco), .garantia-card (__caixa, __inner) e
   .garantia-v (__card). ---- */
body.black-produto :is(.garantia, .garantia-card, .garantia-v) { background: var(--black-fundo); padding-top: 0; padding-bottom: 80px; }
body.black-produto :is(.garantia__card, .garantia__caixa, .garantia__cartao, .garantia-card__caixa, .garantia-card__inner, .garantia-v__card) {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); box-shadow: none;
}
body.black-produto :is(.garantia, .garantia-card, .garantia-v) :is(h2, h3) { color: #FFFFFF; }
body.black-produto :is(.garantia, .garantia-card, .garantia-v) p { color: #C6CAD6; }
body.black-produto :is(.garantia, .garantia-card, .garantia-v) + section { padding-top: 72px; }

@media (max-width: 640px) {
  body.black-produto .oferta { padding-top: 44px; padding-bottom: 44px; }
  body.black-produto .separados { padding-bottom: 44px; }
  body.black-produto .oferta__de s { font-size: 21px; }
  body.black-produto .plano > .card__faixa-black { margin: -22px -22px 16px; }
  body.black-produto .plano__de s { font-size: 17px; }
  body.black-produto .plano__valor { font-size: 38px; }
  body.black-produto.pg-sketchup .combo__card > .card__faixa-black { margin: -24px -24px 0; }
  body.black-produto .combo__card .combo__de s { font-size: 18px; }
  /* a garantia no celular: logo abaixo dos CTAs, o respiro embaixo; a garantia com selo ganha o quadro (como nas páginas) */
  body.black-produto :is(.garantia, .garantia-card, .garantia-v) { padding: 0 24px 44px; }
  body.black-produto .garantia__bloco { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); }
  body.black-produto :is(.garantia, .garantia-card, .garantia-v) + section { padding-top: 44px; }
}

/* a faixa da Black no alto, com o link para a página dos combos, como na página inicial: no computador, no alto da página
   (sobe com ela); no celular e no tablet (até 900 px, onde o menu fica escondido no botão ☰), presa no topo — o Victor,
   30/10: «na versão mobile o menu fica escondido e o visitante não consegue ver que existe uma página de combos sem apertar
   no menu antes». De 30/10 a 04/11, só no celular e no tablet («na versão desktop não precisa alterar nada», 30/10); em
   04/11, o Victor: «percebi que a faixa nao aparece dentro dos cursos e templates do site brasil, mas quero que apareça sim».
   As regras da faixa da página inicial (home-black.css), com as mesmas do topo preso: desde 04/11, o letreiro do anúncio do
   Reels, rolando, com «Apenas esta semana» (o Victor; antes, «BLACK ARQBASE · Por tempo limitado · Ver os combos →»
   parado, no degradê turquesa). Nas 6 páginas de produto do site internacional (04/11), a mesma faixa traduzida, SEM link
   e sem o «Ver os combos →» — uma div, não um link (faixa-black.js): estas regras valem para as duas */
.faixa-black {
  position: relative; display: block; height: 40px; overflow: hidden; color: #FFFFFF; text-decoration: none;
  background: linear-gradient(180deg, #0D161D 0%, #060A0E 55%, #020405 100%);
  font-family: 'Saira', 'Instrument Sans', system-ui, sans-serif; font-size: 14px; line-height: 1; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.faixa-black::before, .faixa-black::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 2px;
  background: linear-gradient(90deg, #0F9E9A, #23D3CC 30%, #7FEDE6 50%, #23D3CC 70%, #0F9E9A);
}
.faixa-black::before { top: 0; }
.faixa-black::after { bottom: 0; }
.faixa-black__trilho { display: flex; width: max-content; height: 100%; animation: faixa-black-rola 80s linear infinite; }
.faixa-black:hover .faixa-black__trilho, .faixa-black:focus-visible .faixa-black__trilho { animation-play-state: paused; }
@keyframes faixa-black-rola { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .faixa-black__trilho { animation: none; } }
.faixa-black__grupo { display: flex; flex: none; align-items: center; }
.faixa-black__marca {
  --h: 28px; flex: none; width: calc(var(--h) * 3.0446); height: var(--h);
  background:
    url(/assets/img/black/logo-2026-arqbase.webp?v=1) calc(var(--h) * 1.4182) calc(var(--h) * 0.5817) / calc(var(--h) * 1.4457) calc(var(--h) * 0.3054) no-repeat,
    url(/assets/img/black/logo-2026-pilula.webp?v=1) calc(var(--h) * 1.2375) calc(var(--h) * 0.5325) / calc(var(--h) * 1.8071) calc(var(--h) * 0.4351) no-repeat,
    url(/assets/img/black/logo-2026-black.webp?v=1) calc(var(--h) * 1.2375) calc(var(--h) * 0.0325) / calc(var(--h) * 1.8071) calc(var(--h) * 0.45) no-repeat,
    url(/assets/img/black/logo-2026-icone.webp?v=1) 0 0 / calc(var(--h) * 1.1875) var(--h) no-repeat;
}
.faixa-black__estrela {
  flex: none; width: 11px; height: 11px; margin: 0 18px; background: #23D3CC;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faixa-black__prazo { display: inline-flex; flex: none; align-items: center; white-space: nowrap; }
.faixa-black__prazo b { margin-left: 0.28em; font-family: 'Saira Semi Condensed', 'Saira', system-ui, sans-serif; font-weight: 800; }
.faixa-black__relogio {
  flex: none; width: 15px; height: 15px; margin-right: 8px; background: #7FEDE6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.8V12l3.4 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.8V12l3.4 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faixa-black__cta { flex: none; white-space: nowrap; font-weight: 700; color: #7FEDE6; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .faixa-black--fixa { position: sticky; top: 0; z-index: 41; }
  .faixa-black--fixa + .topo { top: 40px; }
  body:has(.faixa-black--fixa) [id] { scroll-margin-top: 56px; }
}
@media (max-width: 640px) {
  .faixa-black { font-size: 12.5px; }
  .faixa-black__marca { --h: 26px; }
  .faixa-black__estrela { width: 10px; height: 10px; margin: 0 14px; }
  .faixa-black__relogio { width: 14px; height: 14px; margin-right: 7px; }
}