/* ===== ArqBase — Black November (rascunho; a página dos combos) =====
   Carregado depois de curso.css. A identidade é a da Black 2026 (Victor, 23/10: as imagens de «14_ARQBASE/00_SITE/
   07_CAMPANHAS/00_BLACK FRIDAY 2026/01_ID VISUAL», em originais/2026/): o fundo azul-marinho com as luzes nos cantos de
   baixo, a logo do chapéu de vidro com o BLACK e a pílula do ARQBASE, e a animação da logo do anúncio 05.mp4. As cores
   da página saem da logo (medidas por processar-2026.html): o BLACK vai do azul-claro #9CDCEC ao verde-água #86D2BA
   passando pelo turquesa #23D3CC; o chapéu é #00949C. Por decisão dele (23/10), o título fica branco, a faixa e os selos (até 26/10)
   no degradê do BLACK, os botões e os «+» em turquesa. A fonte Saira foi escolhida em 19/10 por parecer com a do anúncio
   de 2025. (Antes, de 19 a 22/10: as cores e a logo do anúncio da Black de 2025 — creme, dourado e verde.) */

body.black-november {
  --creme: #010A10;
  --creme-escuro: #001827;
  --branco: #0b1c28;
  --texto: #EDEDF2;
  --texto-2: #E4E6EE;
  --texto-suave: #C6CAD6;
  --texto-apagado: #A9AEBC;
  --borda: rgba(255,255,255,0.12);
  --borda-2: rgba(255,255,255,0.18);
  --borda-3: rgba(255,255,255,0.28);
  --azul: #53D6DD;
  --black-agua: #53D6DD;
  --black-turquesa: #23D3CC;
  /* o degradê do BLACK: a cor média de cada letra no meio dela (B, L, A, C, K) */
  --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-fonte: 'Saira', 'Instrument Sans', system-ui, sans-serif;
  --black-fonte-titulo: 'Saira Semi Condensed', 'Saira', system-ui, sans-serif;
  /* o preço no estilo dos cartões da página inicial e das páginas de produto (26/10): a Outfit (a gratuita mais parecida
     com a Stolzl da Black de 2025 — ver home-black.css) e, nos cartões escuros, o verde e o vermelho claros */
  --black-preco: 'Outfit', 'Saira', system-ui, sans-serif;
  --preco-verde-claro: #3FD17F;
  --preco-vermelho-claro: #FF6B7D;
  background: var(--creme);
}

/* o item da Black no menu */
.menu a.menu__black { color: var(--black-agua); font-weight: 700; letter-spacing: 1px; }
.menu a.menu__black:hover { color: #FFFFFF; }

/* ---- hero ---- */
/* o fundo da identidade, esticado na hero inteira (é todo desfocado: esticar não aparece), e no pé uma passagem curta
   para a cor da página, onde começam os combos */
.black-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: 56px var(--recuo) 64px;
  background:
    linear-gradient(180deg, rgba(1,10,16,0) 90%, var(--creme) 100%),
    url(/assets/img/black/fundo-2026.webp?v=1) center / 100% 100% no-repeat,
    #04212B;
}
/* uma luz turquesa atrás das caixas: separada do fundo para poder acender na animação */
.black-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 30% at 50% 76%, rgba(0,148,156,0.45) 0%, rgba(0,110,120,0.22) 45%, rgba(0,40,52,0) 100%);
}
.black-hero > * { position: relative; }

/* a logo: a caixa tem a largura do chapéu (a parte mais larga) e a altura da logo inteira — 1063 × 1524 na logo cheia de
   2199 × 1524; os brilhos passam para fora dela. Dentro, em %: a logo inteira (o estado final) e as partes da animação —
   o chapéu com o reflexo, as cinco letras do BLACK (a mesma imagem, cada uma recortada nas suas colunas), a pílula vazia
   e o texto ARQBASE —, recortadas da logo pronta por processar-2026.html, que mediu as posições e o contorno do chapéu
   (o caminho da faísca, no SVG). */
.black-logo { position: relative; width: min(300px, 62%); aspect-ratio: 1063 / 1524; margin: 0 auto; }
.black-logo > * { position: absolute; max-width: none; }
.black-logo__inteira { left: -53.340%; top: 0; width: 206.867%; height: 100%; }
.black-logo__risco { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(190,245,255,0.9)) drop-shadow(0 0 10px rgba(35,211,204,0.6)); }
.black-logo__risco path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.black-logo__traco { stroke: rgba(170,235,245,0.6); stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.black-logo__faisca { stroke: #FFFFFF; stroke-width: 9; stroke-dasharray: 0.045 1.2; stroke-dashoffset: 0.045; }
.black-logo__chapeu { left: 0; top: 0.787%; width: 100.376%; height: 62.664%; }
.black-logo__letra {
  left: 1.599%; top: 64.961%; width: 95.861%; height: 16.667%;
  background: url(/assets/img/black/logo-2026-black.webp?v=1) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 var(--r) 0 var(--l));
}
.black-logo__pilula { left: 1.693%; top: 83.727%; width: 96.802%; height: 16.273%; }
.black-logo__arqbase { left: 11.383%; top: 85.564%; width: 77.422%; height: 11.417%; }
/* sem animação (menos movimento pedido no sistema, ou sem JavaScript) fica só a logo inteira */
.black-logo__risco, .black-logo__chapeu, .black-logo__letra, .black-logo__pilula, .black-logo__arqbase { opacity: 0; }

.black-hero h1 {
  font-family: var(--black-fonte-titulo); font-weight: 800; color: #FFFFFF;
  font-size: clamp(26px, 4.2vw, 54px); line-height: 1.05; letter-spacing: 0.5px; text-transform: uppercase;
  margin: 18px auto 0; text-wrap: balance;
}
.black-hero__faixa {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  margin: 22px auto 0; padding: 0 36px; height: 66px; min-width: min(585px, 100%);
  border-radius: 12px; color: #04131A;
  background: var(--black-degrade);
  font-family: var(--black-fonte); font-size: 28px; letter-spacing: 0.5px; text-transform: uppercase;
}
.black-hero__faixa strong { font-weight: 700; }
.black-hero__faixa svg { width: 30px; height: 30px; flex-shrink: 0; }
/* o brilho que passa pela faixa uma vez, no fim da animação */
.black-hero__faixa::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); opacity: 0;
}

/* as 15 caixas: cada uma com o centro (--x), a base (--b), a altura (--h) e a ordem (--z) no computador, e
   --xm/--bm/--hm/--zm no celular. Alturas e bases em % da altura do quadro, centros em % da largura.
   Para a animação: de que lado vem (--de, --dem), a inclinação na chegada (--giro, --girom) e quando sai (--t, --tm). */
.black-hero__caixas {
  position: relative; max-width: 1240px; margin: 26px auto 0; aspect-ratio: 1240 / 440;
}
.black-hero__caixas img {
  position: absolute; left: var(--x); bottom: var(--b); height: var(--h); width: auto; z-index: var(--z);
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,0.45));
  --desloc: var(--de); --inclina: var(--giro); --espera: var(--t);
}

/* ---- os combos (20/10): cartões de vidro, com as caixas num palco e o preço embaixo ---- */
.black-combos { padding: 64px var(--recuo) 96px; }
.black-combos__cabecalho { text-align: center; margin-bottom: 40px; }
.black-combos__cabecalho h2 {
  font-family: var(--black-fonte-titulo); font-weight: 800; color: #FFFFFF; text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: 0.5px;
}
.black-combos__cabecalho p { color: var(--texto-suave); font-size: 17px; margin-top: 10px; }
.combos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1240px; margin: 0 auto; }
.combo-black {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(0,148,156,0.16) 0%, rgba(0,58,68,0.32) 46%, rgba(0,12,18,0.62) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* a faixa BLACK COMBO no alto de cada cartão: a mesma dos cartões da página inicial e das páginas de produto (46 px; o
   ícone do chapéu com 30 px e as letras BLACK com 21 px, no mesmo elemento de 127 × 30) — no cartão deitado, ela ocupa as
   duas colunas */
.card__faixa-black { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; flex-shrink: 0; 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-fonte-titulo); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: 0.5px; color: #FFFFFF; }
.combo-black > .card__faixa-black { grid-column: 1 / -1; }
/* o palco: a cena com as caixas, sempre 16 × 10. (De 20 a 26/10 o palco tinha em cima uma faixa para o selo do desconto,
   que crescia quando o cartão estreitava — medir-selos.html; desde 26/10 o desconto «% OFF» fica ao lado do «de», como
   nos cartões da página inicial, e o selo saiu.) */
.combo-black__palco { position: relative; }
.combo-black__cena {
  position: relative; aspect-ratio: 16 / 10;
  background: radial-gradient(ellipse 58% 52% at 50% 64%, rgba(0,148,156,0.5) 0%, rgba(0,110,120,0.18) 55%, rgba(0,110,120,0) 78%);
}
.combo-black__palco img {
  position: absolute; left: var(--x); bottom: var(--b); height: var(--h); width: auto; z-index: var(--z);
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.5));
  transition: translate .35s ease;
}
/* o «+» turquesa entre os produtos */
.combo-black__mais {
  position: absolute; left: var(--x); bottom: var(--b); z-index: 30; width: 38px; height: 38px;
  transform: translate(-50%, 50%); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}
.combo-black__mais::before, .combo-black__mais::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 4px;
  background: linear-gradient(180deg, #7FEDE6 0%, #23D3CC 55%, #0F9E9A 100%);
  box-shadow: 0 0 0 2px rgba(0,30,34,0.75);
}
.combo-black__mais::before { width: 38px; height: 10px; transform: translate(-50%, -50%); }
.combo-black__mais::after { width: 10px; height: 38px; transform: translate(-50%, -50%); }
.combo-black__corpo { display: flex; flex-direction: column; flex: 1; padding: 24px 30px 30px; }
.combo-black__etiqueta { font-family: var(--black-fonte); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--black-agua); }
.combo-black h3 { font-family: var(--black-fonte-titulo); font-weight: 800; font-size: 27px; line-height: 1.15; color: #FFFFFF; margin: 8px 0 10px; text-wrap: balance; }
.combo-black__texto { font-size: 15px; line-height: 1.6; color: var(--texto-suave); margin-bottom: 14px; }
.combo-black ul { display: grid; gap: 7px; margin-bottom: 4px; }
.combo-black li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.combo-black 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;
}
/* o aviso do combo com todos os produtos (30/10): os lançamentos futuros não entram — um quadrinho com o «i», abaixo da lista */
.combo-black__aviso {
  position: relative; margin-top: 16px; padding: 11px 14px 11px 42px; border-radius: 10px;
  background: rgba(83,214,221,0.07); border: 1px solid rgba(83,214,221,0.32);
  font-size: 13.5px; line-height: 1.5; color: var(--texto-suave);
}
.combo-black__aviso::before {
  content: "i"; position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--black-agua); color: var(--black-agua);
  font-family: var(--black-fonte); font-weight: 800; font-size: 11.5px; line-height: 1;
}
.combo-black__preco { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); text-align: center; }
/* o preço no estilo dos cartões (26/10): o «DE R$…» riscado em vermelho claro com o desconto «% OFF» na caixinha verde ao
   lado, a parcela e o à vista em verde claro, na Outfit */
.combo-black__de { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.combo-black__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-thickness: 2px;
}
/* a caixinha do desconto: #0B7F44, com o branco em cima a 5:1 (a mesma das páginas de produto) */
.combo-black__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: 13px; line-height: 1.2; letter-spacing: 0.1em;
}
.combo-black__parcela { font-family: var(--black-preco); font-weight: 400; font-size: 13px; letter-spacing: 0.1em; color: var(--texto-suave); margin-top: 10px; }
.combo-black__valor { font-family: var(--black-preco); font-weight: 600; font-size: clamp(42px, 4.2vw, 54px); line-height: 1.05; color: var(--preco-verde-claro); }
.combo-black__avista {
  font-family: var(--black-preco); font-weight: 400; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--preco-verde-claro); margin-top: 4px;
}
.combo-black__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;
}
.combo-black__botao {
  display: block; margin-top: 18px; padding: 18px 20px; border-radius: 14px; text-align: center;
  background: var(--black-botao); color: #00161A;
  font-family: var(--black-fonte); font-weight: 800; font-size: 16px; letter-spacing: 2.5px; text-transform: uppercase;
  transition: transform .15s ease, filter .15s ease;
}
.combo-black__botao:hover { transform: translateY(-1px); filter: brightness(1.05); }
.combo-black__nota { font-size: 12.5px; color: var(--texto-apagado); margin-top: 10px; }
/* com o mouse em cima (computador): a borda acende e as caixas sobem um pouco */
@media (hover: hover) {
  .combo-black:hover { border-color: rgba(35,211,204,0.55); box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(35,211,204,0.25), 0 0 40px rgba(35,211,204,0.18); }
  .combo-black:hover .combo-black__palco img { translate: 0 -8px; }
}

@media (max-width: 1024px) {
  .black-hero { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 640px) {
  .black-hero { padding: 32px 18px 44px; }
  .black-logo { width: min(230px, 60%); }
  .black-hero h1 { margin-top: 12px; }
  .black-hero__faixa { height: 48px; padding: 0 18px; gap: 10px; font-size: 17px; min-width: 0; width: 100%; border-radius: 10px; }
  .black-hero__faixa svg { width: 20px; height: 20px; }
  .black-hero__caixas { aspect-ratio: 375 / 480; margin-top: 18px; }
  .black-hero__caixas img { left: var(--xm); bottom: var(--bm); height: var(--hm); z-index: var(--zm); --desloc: var(--dem); --inclina: var(--girom); --espera: var(--tm); }
  .black-combos { padding: 40px 18px 64px; }
  .black-combos__cabecalho { margin-bottom: 26px; }
  .black-combos__cabecalho p { font-size: 15px; }
  .combos-grade { grid-template-columns: 1fr; gap: 22px; }
  .combo-black__corpo { padding: 20px 20px 24px; }
  .combo-black h3 { font-size: 23px; }
  .combo-black li { font-size: 14px; }
  .combo-black__de s { font-size: 18px; }
  .combo-black__mais { width: 30px; height: 30px; }
  .combo-black__mais::before { width: 30px; height: 8px; }
  .combo-black__mais::after { width: 8px; height: 30px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .combos-grade { grid-template-columns: 1fr; max-width: 620px; }
}
/* os cartões deitados no computador (Victor, 20/10: «ao invés de deixar a imagem no topo e os elementos logo abaixo na
   vertical, tente fazer na horizontal, com a imagem na esquerda e as informações do lado direito» — para caberem mais
   combos na tela): de 1280 px para cima, um cartão por linha, com o palco à esquerda, os detalhes no meio e o preço à
   direita. Abaixo disso continuam em pé, como no celular (em 1200 a coluna dos detalhes ficava com menos de 300 px). */
@media (min-width: 1280px) {
  .combos-grade { grid-template-columns: 1fr; gap: 24px; }
  .combo-black { display: grid; grid-template-columns: 38% minmax(0, 1fr); }
  /* a cena fica no meio da altura do cartão */
  .combo-black__palco { display: flex; flex-direction: column; justify-content: center; }
  .combo-black__corpo { flex-direction: row; gap: 24px; padding: 28px; }
  .combo-black__detalhes { flex: 1; min-width: 0; align-self: center; }
  .combo-black__preco {
    flex: 0 0 280px; margin-top: 0; padding: 0 0 0 28px;
    border-top: 0; border-left: 1px solid rgba(255,255,255,0.12);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
  }
  .combo-black__botao { align-self: stretch; }
}

/* ===== a animação de abertura (uma vez, ao abrir a página) =====
   A da logo é a do começo do anúncio 05.mp4 (medida quadro a quadro, 23/10). Começa quando a logo chegou (a classe
   «pronta», posta pelo script da página; sem resposta em 2,5 s, começa assim mesmo). Antes disso a logo, os textos e
   as caixas ficam escondidos — só com JavaScript ligado (classe «js» no <html>) e só para quem não pediu menos
   movimento no sistema.
     0,18 s  uma faísca risca o contorno do chapéu, do vértice de cima até o canto direito, deixando o traço
     0,80 s  o chapéu de vidro aparece sobre o traço (que some até 1,3 s)
     1,02 s  as letras do BLACK surgem uma a uma, com falhas de sinal (B, L, A, C, K, a cada 0,14 s)
     1,65 s  o título sobe; 1,9 s a faixa sobe; 2,0 s as caixas começam a entrar pelos lados (o SketchUp por último)
     2,05 s  a pílula nasce no meio e se estica; 2,24 s o ARQBASE é digitado, letra a letra
     2,95 s  a logo inteira, com os brilhos, toma o lugar das partes
     3,35 s  um brilho passa pela faixa */
@media (prefers-reduced-motion: no-preference) {
  .js .black-hero:not(.pronta) .black-logo > *,
  .js .black-hero:not(.pronta) h1,
  .js .black-hero:not(.pronta) .black-hero__faixa,
  .js .black-hero:not(.pronta) .black-hero__caixas img,
  .js .black-hero:not(.pronta)::before { opacity: 0; }

  .black-hero.pronta::before { animation: black-palco 1s ease-out 1.8s both; }
  /* a faísca começa devagar e acelera, como no anúncio (lá: o canto esquerdo em 0,45 s, o fundo do «V» em 0,65 s, o
     canto direito em ~0,78 s) */
  .black-hero.pronta .black-logo__risco { animation: black-aparece 0.1s linear 0.15s both, black-some 0.3s ease-in 1s forwards; }
  .black-hero.pronta .black-logo__traco { animation: black-risca 0.6s cubic-bezier(.35,0,.8,.75) 0.18s both; }
  .black-hero.pronta .black-logo__faisca { animation: black-faisca 0.6s cubic-bezier(.35,0,.8,.75) 0.18s both, black-some 0.12s linear 0.78s forwards; }
  .black-hero.pronta .black-logo__chapeu { animation: black-vidro 0.3s ease-out 0.8s both, black-some 0.01s linear 3.3s forwards; }
  .black-hero.pronta .black-logo__letra { animation: black-falha 0.45s steps(1, end) var(--t) both, black-some 0.01s linear 3.3s forwards; }
  .black-hero.pronta .black-logo__pilula { animation: black-pilula 0.32s cubic-bezier(.3,.6,.4,1) 2.05s both, black-some 0.01s linear 3.3s forwards; }
  .black-hero.pronta .black-logo__arqbase { animation: black-digita 0.5s steps(1, end) 2.24s both, black-some 0.01s linear 3.3s forwards; }
  .black-hero.pronta .black-logo__inteira { animation: black-final 0.45s ease-out 2.95s both; }
  .black-hero.pronta h1 { animation: black-sobe 0.55s ease-out 1.65s both; }
  .black-hero.pronta .black-hero__faixa { animation: black-sobe 0.55s ease-out 1.9s both; }
  .black-hero.pronta .black-hero__faixa::after { animation: black-brilho 0.9s ease-in-out 3.35s both; }
  .black-hero.pronta .black-hero__caixas img { animation: black-entra 0.8s cubic-bezier(.18,.82,.26,1.06) calc(var(--espera) + 1s) both; }
  .black-hero.pronta .black-hero__caixas img.caixa--centro { animation-name: black-sobe-caixa; }

  /* cada cartão de combo, quando entra na tela (a classe «visto», posta pelo script da página): o cartão sobe, as
     caixas chegam de lado, de cima ou de baixo e se juntam, o «+» aparece com um pulo. «backwards»: no fim a caixa volta
     ao estilo normal — assim o «subir» com o mouse em cima continua funcionando. */
  .js .combo-black:not(.visto),
  .js .combo-black:not(.visto) .combo-black__palco img,
  .js .combo-black:not(.visto) .combo-black__mais { opacity: 0; }
  .combo-black.visto { animation: black-sobe 0.6s ease-out backwards; }
  .combo-black.visto .combo-black__palco img { animation: black-junta 0.7s cubic-bezier(.2,.8,.25,1.06) calc(0.15s + var(--t)) backwards; }
  .combo-black.visto .combo-black__mais { animation: black-pulo 0.4s cubic-bezier(.3,1.6,.5,1) calc(0.15s + var(--t)) backwards; }
}
@keyframes black-junta { from { opacity: 0; translate: var(--de) var(--sobe); } to { opacity: 1; translate: 0 0; } }
@keyframes black-pulo { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes black-palco { from { opacity: 0; } to { opacity: 1; } }
/* a faísca: o traço fraco cresce do começo do caminho (pathLength = 1) até o fim, e a cabeça clara (um traço de 4,5% do
   caminho) corre na frente dele, com a mesma curva de tempo */
@keyframes black-risca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes black-faisca { from { stroke-dashoffset: 0.045; } to { stroke-dashoffset: -0.955; } }
@keyframes black-vidro { from { opacity: 0; filter: brightness(1.8); } 60% { opacity: .9; } to { opacity: 1; filter: brightness(1); } }
/* cada letra: lascas da letra piscando fora do lugar (as faixas do recorte), o vulto da letra inteira e a letra firme
   — «steps(1, end)»: cada quadro fica parado até o próximo, como no anúncio */
@keyframes black-falha {
  0% { opacity: 0; }
  16% { opacity: .9; clip-path: inset(58% var(--r) 30% var(--l)); translate: 7px 0; filter: brightness(2); }
  28% { opacity: 0; }
  40% { opacity: .7; clip-path: inset(8% var(--r) 66% var(--l)); translate: -6px 0; filter: brightness(1.7); }
  52% { opacity: .85; clip-path: inset(30% var(--r) 18% var(--l)); translate: 3px 0; filter: brightness(1.4); }
  66% { opacity: .4; clip-path: inset(0 var(--r) 0 var(--l)); translate: -2px 0; filter: none; }
  80%, 100% { opacity: 1; clip-path: inset(0 var(--r) 0 var(--l)); translate: 0 0; filter: none; }
}
/* a pílula nasce pequena no meio e se estica até as pontas */
@keyframes black-pilula { from { opacity: 0; clip-path: inset(0 46% 0 46% round 999px); } 20% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0 round 999px); } }
/* o ARQBASE letra a letra: o recorte da direita para em cada fim de letra (medidos por processar-2026.html) */
@keyframes black-digita {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  14.29% { opacity: 1; clip-path: inset(0 86.88% 0 0); }
  28.57% { opacity: 1; clip-path: inset(0 72.66% 0 0); }
  42.86% { opacity: 1; clip-path: inset(0 58.57% 0 0); }
  57.14% { opacity: 1; clip-path: inset(0 43.74% 0 0); }
  71.43% { opacity: 1; clip-path: inset(0 29.16% 0 0); }
  85.71% { opacity: 1; clip-path: inset(0 15.43% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes black-final { from { opacity: 0; filter: brightness(1.35); } to { opacity: 1; filter: brightness(1); } }
@keyframes black-some { to { opacity: 0; } }
@keyframes black-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes black-sobe { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes black-brilho { from { opacity: 1; translate: 0 0; } to { opacity: 1; translate: 400% 0; } }
@keyframes black-entra {
  from { opacity: 0; translate: var(--desloc) 40px; rotate: var(--inclina); }
  35% { opacity: 1; }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes black-sobe-caixa {
  from { opacity: 0; translate: 0 70%; scale: 0.85; }
  40% { opacity: 1; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}