/* ===== ArqBase — a página inicial no período da Black (rascunho de 26/10/2026) =====
   Carregado depois de style.css, na prévia home-black.html (montada por montar-home-black.js). A página fica escura,
   na identidade da Black 2026 — a mesma da página dos combos (black-november.css): o fundo azul-marinho com as luzes
   nos cantos, o degradê do BLACK (#9CDCEC → #53D6DD → #23D3CC → #86D2BA) na faixa, na etiqueta e nos selos, botões
   turquesa. A logo da Black fica só na página dos combos (Victor, 26/10). O botão «Área do aluno» do cabeçalho continua
   no rosa da marca, como nas outras páginas. */
/* a fonte dos preços: a Outfit (Google Fonts, licença livre), carregada pelo <link> da página. A do bloco de preço da
   Black de 2025 é a Stolzl (lida no código da página antiga, www.arqbase.com/combos-original, no Wix: o preço em Stolzl
   Medium, o resto em Stolzl Regular, com 0,1 em entre as letras), que é paga; o Victor não sabe se tem a licença e pediu
   «uma parecida» (26/10). A Outfit foi a mais parecida entre 16 gratuitas, medida nos textos de preço (a área de tinta
   em comum com a Stolzl, empatada com a Jost, que é mais fina); no peso 600 ela tem a mesma quantidade de tinta da Stolzl
   Medium (×0,97). Sem ela, cai na Saira. */
body.black-home {
  --black-preco: 'Outfit', 'Saira', system-ui, sans-serif;
  --preco-verde: #006C3D;     /* o verde do preço na página de 2025 (o código dela) */
  --preco-vermelho: #D5203F;  /* o vermelho da marca, o do botão «Área do aluno» — para o preço cheio riscado */
  --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;
  background: var(--black-fundo); color: #EDEDF2;
}

/* a faixa da Black acima do cabeçalho (sai ao rolar a página; o cabeçalho continua fixo) */
.faixa-black {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 16px;
  padding: 10px 20px; background: var(--black-degrade); color: #04131A; text-align: center;
  font-family: var(--black-fonte); font-size: 14px; letter-spacing: 0.5px;
}
.faixa-black strong { font-weight: 800; letter-spacing: 1.5px; }
.faixa-black__cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.menu a.menu__black { color: var(--black-agua); font-weight: 700; letter-spacing: 1px; }
.menu a.menu__black:hover { color: #FFFFFF; }

/* a hero: a mesma de hoje — a imagem da plataforma, o título, o texto, os botões e os números (Victor, 26/10: «use a
   mesma imagem de antes e apenas aplique algum design diferente»; a logo da Black fica só na página dos combos) — com o
   desenho da Black: o fundo da identidade (as luzes turquesa nos cantos de baixo) no lugar do roxo e do rosa de hoje,
   as palavras em destaque no degradê do BLACK e o botão turquesa (a etiqueta da Black acima do título saiu em 28/10: o
   Victor, «não precisa existir»). A imagem não muda:
   ela tem fundo próprio (#000019 nas bordas, medido) e o brilho roxo atrás do notebook; para ela não aparecer como um
   retângulo sobre o fundo novo, as bordas esfumam — em cima até 3,5% (a tampa do notebook começa em 3,8%), dos lados
   até 9% (as telas começam em 12%) e embaixo de 76% a 100%, como hoje. */
.hero--black {
  background:
    linear-gradient(180deg, rgba(1,10,16,0) 88%, var(--black-fundo) 100%),
    url(/assets/img/black/fundo-2026.webp?v=1) center / 100% 100% no-repeat,
    #000019;
}
.hero--black .hero__img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3.5%, #000 76%, transparent 100%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 3.5%, #000 76%, transparent 100%), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
/* as palavras em destaque do título: o degradê do BLACK no lugar do rosa */
.hero--black h1 em {
  background: var(--black-degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn--black {
  background: var(--black-botao); color: #00161A;
  font-family: var(--black-fonte); font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.btn--black:hover { filter: brightness(1.05); }
.hero--black .hero__stats { background: rgba(0,148,156,0.08); border-color: rgba(83,214,221,0.22); }
.hero--black .hero__stats span { color: #9FC6CC; }

/* ---- os produtos ---- */
/* o brilho fica com o centro 320 px abaixo do alto da seção: na borda de cima ele já quase sumiu (com o centro na
   borda, fazia uma linha na emenda com a hero) */
.black-home .produtos { background: radial-gradient(900px 520px at 50% 320px, rgba(0,148,156,0.10), transparent 70%), var(--black-fundo); }
.black-home .rotulo { color: var(--black-agua); }
.black-home .secao-cabecalho h2 { color: #FFFFFF; }
.black-home .filtros { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.black-home .filtros button { color: #B8C3CC; }
.black-home .filtros button:hover { color: #FFFFFF; }
.black-home .filtros button[aria-pressed="true"] { background: var(--black-botao); color: #00161A; }

/* os cartões: brancos (Victor, 26/10: «faça um fundo branco nos cards»), como na página da Black de 2025, com a faixa
   «BLACK OFERTA» no topo no lugar da linha da cor do produto, o selo do desconto sobre a capa e o preço da Black
   embaixo. Os textos, o ícone e a etiqueta CURSO/TEMPLATE ficam nas cores do site, feitas para o cartão branco. */
.black-home .card { background: #FFFFFF; border: 0; color: var(--texto); }
.black-home .card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 2px rgba(35,211,204,0.75); }
/* a faixa «BLACK OFERTA» (Victor, 26/10, a partir da página da Black de 2025: «gosto da faixa no topo de cada produto com
   o texto BLACK OFERTA, use o novo logo para fazer parecido agora»): no preto, o ícone do chapéu de vidro e as letras
   BLACK da logo de 2026 (as duas imagens no mesmo elemento: o ícone, 152 × 128, com 30 px de altura = 35,6 px de
   largura; as letras, 510 × 127, com 21 px = 84,3 px; 7 px entre eles) e OFERTA em branco */
.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; }
/* o preço, na Outfit (Victor, 26/10: «use uma cor verde nos valores em promoção e use uma cor avermelhada no preço cheio
   cortado. A porcentagem de desconto colocar junto com os preços, e adicionar OFF no final»):
   - na 1ª linha, o «DE R$…» riscado em vermelho, grande (o pedido de antes: «aumentar o valor original»), e logo ao lado
     o desconto com OFF, na caixinha verde da página de 2025 (Outfit 600, branco no verde);
   - o preço à vista em Outfit 600, verde, e o «à vista» pequeno em cinza;
   - a parcela em verde, em maiúsculas espaçadas, como o «OU R$97 À VISTA» da página de 2025. */
.card__preco {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding-top: 12px; margin-bottom: 14px; border-top: 1px solid var(--borda);
}
.card__a-partir { font-family: var(--black-preco); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8D8D8D; }
.card__linha-de { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.card__de {
  font-family: var(--black-preco); font-weight: 400; font-size: 19px; line-height: 1.2; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--preco-vermelho);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.card__off {
  padding: 3px 7px 2px; border-radius: 3px; background: var(--preco-verde); color: #FFFFFF;
  font-family: var(--black-preco); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: 0.1em;
}
.card__valor { font-family: var(--black-preco); font-weight: 600; font-size: 34px; line-height: 1.05; color: var(--preco-verde); }
.card__valor small { font-family: var(--black-preco); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: #8D8D8D; }
.card__parcela { font-family: var(--black-preco); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--preco-verde); }
/* o botão em pílula (Victor, 26/10: «adicione o botão tipo pill APROVEITAR OFERTA»), na largura do cartão, no turquesa
   da Black. O cartão inteiro já é o link (um link dentro de outro não vale no HTML): o botão é o desenho do clique. */
.card__botao {
  display: block; padding: 14px 18px; border-radius: 999px; text-align: center;
  background: var(--black-botao); color: #00161A;
  font-family: var(--black-fonte); font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: 1.5px;
  transition: filter .15s ease;
}
.black-home .card:hover .card__botao { filter: brightness(1.07); }

/* ---- a faixa dos combos: as caixas lado a lado à esquerda e o convite à direita. Cada caixa fica por cima da vizinha da
   direita e cobre só a lombada dela (as caixas mostram a lateral esquerda), como na hero da página dos combos: o quadro
   tem proporção fixa (3,1 : 1), então a altura das caixas (90% do quadro) e o passo entre elas (19,37% da largura)
   andam juntos em qualquer tela — cada caixa mede 22,5% da largura e cobre 14% da seguinte. (A 1ª versão, com altura em
   px e passo em %, cobria 36% e cortava os nomes: «LIGÊNCIA», «UMINAÇÃO».) ---- */
.combos-banda {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px;
  max-width: 1180px; margin: 0 auto 80px; padding: 36px 44px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(ellipse 55% 70% at 26% 62%, rgba(0,148,156,0.42) 0%, rgba(0,148,156,0) 72%),
    linear-gradient(180deg, rgba(0,148,156,0.12) 0%, rgba(0,12,18,0.6) 100%);
}
.combos-banda__caixas { position: relative; aspect-ratio: 3.1 / 1; }
.combos-banda__caixas img { position: absolute; bottom: 4%; height: 90%; width: auto; max-width: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.5)); }
.combos-banda__caixas img:nth-child(1) { left: 0; z-index: 5; }
.combos-banda__caixas img:nth-child(2) { left: 19.37%; z-index: 4; }
.combos-banda__caixas img:nth-child(3) { left: 38.74%; z-index: 3; }
.combos-banda__caixas img:nth-child(4) { left: 58.11%; z-index: 2; }
.combos-banda__caixas img:nth-child(5) { left: 77.48%; z-index: 1; }
.combos-banda__texto h2 {
  font-family: var(--black-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #FFFFFF;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; margin: 10px 0 22px; text-wrap: balance;
}

/* ---- depoimentos, contato e rodapé no escuro ---- */
.black-home .depoimentos { background: #031119; border-top: 1px solid rgba(255,255,255,0.08); }
.black-home .depoimentos__cabecalho h2 { color: #FFFFFF; }
.black-home .depoimentos__cabecalho p { color: #AEBBC4; }
.black-home .mosaico img { box-shadow: 0 8px 22px rgba(0,0,0,0.45); background: #0B1C24; }
.black-home .contato { border-top: 1px solid rgba(255,255,255,0.08); }
.black-home .contato h2 { color: #FFFFFF; }
.black-home .contato p { color: #AEBBC4; }
.black-home main .btn--primario { background: var(--black-botao); color: #00161A; }
.black-home .rodape { color: #8A9AA4; }
.black-home .rodape__links a:hover { color: #FFFFFF; }

@media (max-width: 900px) {
  .combos-banda { grid-template-columns: 1fr; gap: 20px; margin: 0 18px 64px; padding: 28px 22px; text-align: center; }
  .combos-banda__caixas { max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (max-width: 640px) {
  .faixa-black { font-size: 12.5px; padding: 9px 14px; }
  .card__valor { font-size: 32px; }
}
/* no celular e no tablet (até 900 px, onde o menu fica escondido no botão ☰), a faixa da página inicial brasileira fica
   presa no topo, e o cabeçalho, que some ao descer a página, passa por baixo dela (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»; «na versão
   desktop não precisa alterar nada»). Numa linha, com 36 px: o cabeçalho fica logo abaixo e as âncoras param abaixo dela.
   As mesmas regras em produto-black.css (nas páginas de produto, a faixa só aparece no celular e no tablet) */
@media (max-width: 900px) {
  .faixa-black--fixa { position: sticky; top: 0; z-index: 41; height: 36px; padding: 0 12px; flex-wrap: nowrap; gap: 12px; white-space: nowrap; font-size: 12.5px; }
  .faixa-black--fixa + .topo { top: 36px; }
  body:has(.faixa-black--fixa) [id] { scroll-margin-top: 52px; }
}
/* numa linha só: com as três partes, a faixa pede 392 px (medido no 390, 30/10); até 400 px fica mais compacta (cabe a partir
   de ~365 px) e, abaixo de 371 px, sai o «Por tempo limitado» — fica «BLACK ARQBASE · Ver os combos →» */
@media (max-width: 400px) {
  .faixa-black--fixa { font-size: 12px; gap: 10px; padding: 0 10px; letter-spacing: 0.3px; }
  .faixa-black--fixa strong { letter-spacing: 1px; }
}
@media (max-width: 370px) {
  .faixa-black--fixa > span:not(.faixa-black__cta) { display: none; }
}