/* ==========================================================================
   Black Friday — /black-friday-consorcio

   Carrega DEPOIS de css/simulador-consorcio.css e só mexe sob `.bf-page`. O
   simulador, o FAQ, o comparativo, o CTA final e o rodapé vêm prontos de lá; o
   que está aqui é o que esta página tem a mais.

   A cor da Black Friday é o preto, e o manual tira o preto puro (§2). O
   `--cc-ink` (#121d26) é o "quase preto" oficial e faz esse papel, com o
   amarelo da marca nos números e nos botões. Nenhum hex novo: tudo sai dos
   tokens de :root da folha do simulador.

   O que esta página corrige em relação à canônica, além do tema:
     - hero com manchete de verdade, argumento e botão (lá o h1 é um rótulo de
       20px e não há o que tocar antes do card);
     - as seis caixas iguais de benefício saem, e entra uma comparação que
       responde à desconfiança típica de novembro;
     - exemplos em reais, para a pessoa ver número antes de mexer em controle;
     - passos em três colunas, sem o passo 3 sobrando sozinho na linha.
   ========================================================================== */

/* ---------- Hero -------------------------------------------------------- */

/* Quase preto chapado em vez do gradiente escuro da canônica: é o que faz a
   página ler como Black Friday no primeiro quadro. A textura da porta continua,
   com o mesmo arquivo e a mesma regra de `cover` (DESIGN.md §8). */
.bf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--cc-ink);
  color: var(--cc-offwhite);
  /* 96px reservam o cabeçalho flutuante, como no `.sim-promo`. */
  padding: 96px 0 56px;
  --cc-anel: var(--cc-offwhite);
}

.bf-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/padrao-porta-branco.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .04;
  pointer-events: none;
}

.bf-hero-grade {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media screen and (min-width: 900px) {
  .bf-hero {
    padding: 120px 0 88px;
  }

  .bf-hero-grade {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
  }
}

/* Selo da data. Mesmo desenho do kicker da canônica: badge nomeado, lowercase
   e sem tracking. */
.bf-selo {
  display: inline-block;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: 1.4;
  text-transform: lowercase;
  color: var(--cc-ink);
  background-color: var(--cc-amarelo);
  padding: 7px 16px;
  border-radius: 999px;
  margin: 0 0 18px;
}

/* A manchete fica no `--cc-display`, dentro do teto de 56px do §3. Quem grita
   nesta página é a etiqueta, não o h1. */
.bf-titulo {
  font-size: var(--cc-display);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: var(--cc-w-titulo);
  color: var(--cc-offwhite);
  max-width: 15em;
  margin: 0 0 18px;
}

/* A promessa da página, logo abaixo do h1: maior que o texto de apoio e em
   Light, para não disputar peso com a manchete. O "só com a Capital Consórcio"
   é o único trecho em amarelo fora do selo e do botão. */
.bf-subtitulo {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.35;
  font-weight: var(--cc-w-corpo);
  color: var(--cc-offwhite);
  max-width: 30rem;
  margin: 0 0 14px;
  text-wrap: balance;
}

.bf-subtitulo strong {
  color: var(--cc-amarelo);
}

/* O logo da Porto no lugar das palavras "Porto Bank". Altura em `em`, então
   ele acompanha o `clamp` do h1 do celular ao desktop: 0,9em deixa a altura do
   "P" do logo próxima da altura das minúsculas altas do título. As cores são as
   do arquivo oficial, sem filtro: logo de terceiro não se recolore. */
.bf-titulo-logo {
  display: inline-block;
  height: .9em;
  width: auto;
  vertical-align: -.12em;
  margin-left: .04em;
}

.bf-lide {
  font-size: var(--cc-body);
  line-height: 1.55;
  font-weight: var(--cc-w-corpo);
  color: #f7f5f0cc;
  max-width: 30rem;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.bf-hero-acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0;
}

.bf-hero-dica {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: #f7f5f0b3;
}

/* ---------- A etiqueta -------------------------------------------------- */

/* Etiqueta de preço pendurada: amarelo com tinta quase preta (11:1), um furo
   à esquerda e 4° de inclinação. O furo é pintado na cor do hero para parecer
   vazado. O número fica no mesmo degrau do "50%" da canônica (§8c), e não
   maior: o desvio aprovado para aquele número é o teto aqui também. */
.bf-etiqueta {
  position: relative;
  justify-self: center;
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 340px;
  margin: 0;
  padding: 26px 28px 24px 64px;
  background-color: var(--cc-amarelo);
  color: var(--cc-ink);
  border-radius: var(--cc-r-lg);
  box-shadow: 0 1px 2px #121d2640, 0 18px 40px #121d2659;
  transform: rotate(-4deg);
  animation: bf-pendurar .6s var(--cc-curva) .1s both;
}

.bf-etiqueta:before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background-color: var(--cc-ink);
  box-shadow: inset 0 1px 2px #121d2680;
}

@keyframes bf-pendurar {
  from { opacity: 0; transform: rotate(-11deg) translateY(-10px); }
  to   { opacity: 1; transform: rotate(-4deg); }
}

.bf-etiqueta-ate {
  font-size: var(--cc-body);
  font-weight: var(--cc-w-corpo);
  line-height: 1;
}

.bf-etiqueta-pct {
  font-size: clamp(3rem, 2.2rem + 3.4vw, 4.5rem);
  line-height: 1;
  font-weight: var(--cc-w-titulo);
  letter-spacing: -.02em;
}

.bf-etiqueta-txt {
  font-size: var(--cc-h4);
  line-height: 1.3;
  font-weight: var(--cc-w-titulo);
  text-transform: lowercase;
  margin-top: 6px;
}

.bf-etiqueta-nota {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
  margin-top: 6px;
}

/* No celular a etiqueta vem depois do botão e não pode empurrar o simulador
   para a terceira tela: fica deitada, com o número e o texto lado a lado. */
@media screen and (max-width: 899px) {
  .bf-etiqueta {
    justify-self: start;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "ate  txt"
      "pct  txt"
      "pct  nota";
    align-items: center;
    column-gap: 14px;
    max-width: 380px;
    padding: 16px 20px 16px 52px;
    transform: rotate(-2deg);
    animation-name: bf-pendurar-celular;
  }

  .bf-etiqueta:before {
    left: 20px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
  }

  /* O "até" fica: sem ele o número diria 50% para o veículo pesado também. */
  .bf-etiqueta-ate {
    grid-area: ate;
    align-self: end;
    font-size: var(--cc-caption);
  }

  .bf-etiqueta-pct {
    grid-area: pct;
    align-self: start;
    font-size: 2.75rem;
  }

  .bf-etiqueta-txt {
    grid-area: txt;
    align-self: end;
    margin-top: 0;
  }

  .bf-etiqueta-nota {
    grid-area: nota;
    align-self: start;
    margin-top: 2px;
  }
}

@keyframes bf-pendurar-celular {
  from { opacity: 0; transform: rotate(-6deg) translateY(-8px); }
  to   { opacity: 1; transform: rotate(-2deg); }
}

/* Entrada do hero. O h1 não espera: é o provável LCP, como na canônica. */
.bf-selo      { animation: cc-montar .45s var(--cc-curva) 0s both; }
.bf-titulo    { animation: cc-montar .5s var(--cc-curva) 0s both; }
.bf-lide      { animation: cc-montar .5s var(--cc-curva) .06s both; }
.bf-hero-acao { animation: cc-montar .45s var(--cc-curva) .12s both; }

/* ---------- O card sobre a emenda -------------------------------------- */

/* O quase preto do hero desce 120px por trás do card, que fica metade no escuro
   e metade no creme. É a forma de dizer que o simulador é a peça principal sem
   aumentar nada. Faixa chapada em pseudo-elemento, não gradiente: o §2 não
   deixa inventar gradiente, e duas cores com corte seco não são um. */
.bf-page .sim-main {
  position: relative;
  isolation: isolate;
  padding-top: 0;
}

.bf-page .sim-main:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: -1;
  background-color: var(--cc-ink);
}

/* ---------- Sem Black Fraude ------------------------------------------- */

/* Seção escura, sangrando de borda a borda pelo mesmo truque da faixa de
   autoridade da canônica: o fundo sai num pseudo-elemento e o conteúdo fica na
   coluna da página. */
.bf-fraude {
  position: relative;
  isolation: isolate;
  margin-top: 72px;
  padding: 64px 0 56px;
  color: var(--cc-offwhite);
  --cc-anel: var(--cc-offwhite);
}

.bf-fraude:before {
  content: "";
  position: absolute;
  inset: 0 calc((100% - 100vw) / 2);
  z-index: -1;
  background-color: var(--cc-ink);
}

.bf-fraude .sim-secao-titulo {
  color: var(--cc-offwhite);
}

.bf-fraude-lide {
  max-width: 32rem;
  margin: 0 0 32px;
  color: #f7f5f0cc;
  text-wrap: pretty;
}

.bf-fraude-cabeca {
  display: none;
}

.bf-fraude-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-fraude-lista li {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid #f7f5f026;
}

.bf-fraude-lista li:last-child {
  border-bottom: 1px solid #f7f5f026;
}

.bf-fraude-lista p {
  margin: 0;
  padding-left: 32px;
  background-repeat: no-repeat;
  background-position: 0 .2em;
  background-size: 18px 18px;
  text-wrap: pretty;
}

/* O truque fica apagado e marcado com um "x"; a resposta, em off-white cheio,
   com o visto em amarelo. Os ícones são fundo, então leitor de tela não lê
   nada a mais: quem diz qual é qual são os rótulos escondidos no HTML. */
.bf-fraude-antes {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: #f7f5f099;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f5f0' stroke-opacity='.6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.bf-fraude-aqui {
  color: var(--cc-offwhite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23efce67' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
}

@media screen and (min-width: 720px) {
  .bf-fraude {
    padding: 80px 0 72px;
  }

  .bf-fraude-cabeca,
  .bf-fraude-lista li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 40px;
  }

  .bf-fraude-cabeca {
    padding-bottom: 12px;
    font-size: var(--cc-caption);
    font-weight: var(--cc-w-apoio);
    text-transform: lowercase;
  }

  .bf-fraude-cabeca span:first-child {
    color: #f7f5f099;
  }

  .bf-fraude-cabeca span:last-child {
    color: var(--cc-amarelo);
  }

  .bf-fraude-lista li {
    align-items: start;
    padding: 22px 0;
  }

  .bf-fraude-antes {
    font-size: var(--cc-body);
    font-weight: var(--cc-w-corpo);
  }
}

/* ---------- Quanto fica (cupom) ---------------------------------------- */

/* Os exemplos são linhas de um cupom fiscal, com fio tracejado entre elas, e
   não três caixas iguais lado a lado. O cupom é off-white sobre o creme da
   página, separado pela mesma borda a 3,13:1 do card do simulador. */
.bf-exemplos {
  margin-top: 80px;
}

.bf-exemplos-lide {
  max-width: 32rem;
  margin: 0 0 24px;
  color: var(--cc-ink-70);
}

.bf-cupom {
  list-style: none;
  margin: 0;
  padding: 4px 22px;
  background-color: var(--cc-offwhite);
  border: 1px solid var(--cc-borda-campo);
  border-radius: var(--cc-r-lg);
  box-shadow: var(--sim-sombra);
}

.bf-exemplo {
  display: grid;
  gap: 4px;
  padding: 20px 0;
}

.bf-exemplo + .bf-exemplo {
  border-top: 1px dashed var(--cc-borda-campo);
}

.bf-exemplo p {
  margin: 0;
}

.bf-exemplo-bem {
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
}

.bf-exemplo-bem span {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
}

.bf-exemplo-parcela {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
}

.bf-exemplo-parcela strong {
  font-size: var(--cc-h2);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cc-ink);
}

.bf-exemplo-parcela span {
  display: block;
}

.bf-exemplo-integral {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
}

@media screen and (min-width: 760px) {
  .bf-cupom {
    padding: 4px 32px;
  }

  .bf-exemplo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr);
    align-items: center;
    column-gap: 24px;
    padding: 24px 0;
  }

  .bf-exemplo-bem span {
    display: block;
  }

  .bf-exemplo-integral {
    text-align: right;
  }
}

.bf-exemplos-nota {
  margin: 14px 0 0;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--cc-ink-70);
}

/* ---------- A redução e o degrau --------------------------------------- */

.bf-reducao {
  margin-top: 80px;
}

/* A grade texto + degrau e o próprio degrau foram para
   css/simulador-consorcio.css (`.sim-oferta-grade`, `.sim-degrau`), porque a
   página do simulador passou a usar também. */

/* ---------- Passos em três colunas ------------------------------------- */

/* Com texto de duas linhas a medida estreita não fere a leitura, e a sequência
   1-2-3 lida da esquerda para a direita é o próprio conteúdo. */
@media screen and (min-width: 900px) {
  .bf-passos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .bf-passos .sim-passo:last-child {
    grid-column: auto;
  }
}

/* ---------- Ajustes de encaixe ----------------------------------------- */

/* O botão XL ocupa a largura toda por desenho, porque nasceu dentro do card do
   resultado. No hero, a partir de 600px, ele volta ao tamanho do rótulo e a
   dica corre ao lado. */
@media screen and (min-width: 600px) {
  .bf-hero-acao .sim-btn-xl {
    width: auto;
  }
}

/* A seção escura encosta na faixa verde de autoridade. Com a margem padrão
   sobrava uma tira de creme de 72px entre as duas, que lia como erro. */
.sim-confia + .bf-fraude {
  margin-top: 0;
}

/* No celular o rótulo da coluna do comparativo é escrito pela folha do
   simulador ("Financiamento"); aqui a coluna fala também em crediário, que é
   como a Black Friday parcela. */
@media screen and (max-width: 639px) {
  .bf-page .sim-compara tbody td:last-of-type:before {
    content: "Financiamento ou crediário";
  }
}

/* O banner final fecha a página no mesmo quase preto do hero, em vez do
   gradiente escuro da canônica. A porta continua no pseudo-elemento dele. */
.bf-page .sim-cta-final {
  background: var(--cc-ink);
}

/* O prazo do exemplo desce para a linha de baixo também no celular: na linha
   do nome ele quebrava no meio ("em 120 / meses"). */
.bf-exemplo-bem span {
  display: block;
}

/* Hero mais curto no celular, para o card do simulador começar mais perto da
   primeira tela: lide no corpo padrão e menos respiro embaixo. */
@media screen and (max-width: 599px) {
  .bf-hero {
    padding-bottom: 40px;
  }

  .bf-lide {
    margin-bottom: 22px;
  }
}

/* Ícone do WhatsApp no botão do resultado, que leva à condição especial. Em
   tinta (`currentColor`), como o rótulo: o verde da marca do WhatsApp sobre o
   amarelo do botão ficaria abaixo de 2:1. O botão XL já centraliza ícone e
   texto com `gap`. */
.bf-btn-zap {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ---------- Destaque do botão do resultado ------------------------------

   Pedido do Rubens em 2026-10-30: o botão que leva à condição exclusiva
   precisava chamar mais. Três coisas, todas só nesta página:

   - um selo "black friday" no canto, no mesmo desenho inclinado da etiqueta
     do hero, para o botão parecer parte da campanha e não do formulário;
   - um pulso amarelo saindo da borda, três vezes, quando o resultado aparece;
   - o ícone do WhatsApp balançando junto com cada pulso.

   O movimento roda três vezes e para (~5s). Repetir para sempre treina o olho
   a ignorar o botão, e passaria dos 5s a partir dos quais a WCAG 2.2.2 pede um
   jeito de pausar. Quando a pessoa refaz a simulação, a etapa 3 volta a
   aparecer e o pulso recomeça sozinho.

   Só `transform` e `opacity` no ícone; o pulso é `box-shadow` num
   pseudo-elemento, pintura de um elemento só durante cinco segundos. Com
   movimento reduzido, a regra global da folha do simulador desliga tudo e
   fica só o selo, que é estático.
   ------------------------------------------------------------------------ */
.bf-page #sim-open-form {
  position: relative;
}

.bf-page #sim-open-form:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

#sim-step-3:not([hidden]) #sim-open-form:before {
  animation: bf-pulso 1.6s ease-out 1s 3 both;
}

#sim-step-3:not([hidden]) .bf-btn-zap {
  animation: bf-balanco 1.6s ease-in-out 1s 3 both;
}

/* Dois anéis: o amarelo sozinho sobre o off-white do card ficava a ~1,4:1 e
   mal aparecia; o azul por fora dá o contorno que o olho pega. */
@keyframes bf-pulso {
  0%   { box-shadow: 0 0 0 0 #efce67, 0 0 0 0 #35567359; }
  70%  { box-shadow: 0 0 0 12px #efce6700, 0 0 0 22px #35567300; }
  100% { box-shadow: 0 0 0 12px #efce6700, 0 0 0 22px #35567300; }
}

@keyframes bf-balanco {
  0%, 32%, 100% { transform: rotate(0); }
  8%  { transform: rotate(-16deg); }
  16% { transform: rotate(13deg); }
  24% { transform: rotate(-7deg); }
}

/* Selo: tinta quase preta com texto amarelo (11:1), inclinado como a
   etiqueta do hero, saindo pela borda de cima do botão. `aria-hidden` no HTML:
   o nome acessível do botão continua "Conhecer condição especial". */
.bf-btn-selo {
  position: absolute;
  top: -13px;
  right: 18px;
  padding: 4px 10px;
  border-radius: var(--cc-r-sm);
  background-color: var(--cc-ink);
  color: var(--cc-amarelo);
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-titulo);
  line-height: 1.2;
  text-transform: lowercase;
  box-shadow: 0 4px 10px #121d2640;
  transform: rotate(4deg);
  pointer-events: none;
}

/* "Liberar condição exclusiva" numa linha a partir de 360px, que é a largura
   da maior parte dos Android. Com o respiro padrão de 18px ele quebrava ali. */
@media screen and (max-width: 399px) {
  .bf-page #sim-open-form {
    padding-inline: 12px;
    gap: 6px;
    letter-spacing: -.01em;
  }
}

/* ---------- WhatsApp flutuante ----------------------------------------- */

/* O selo do botão do resultado também no flutuante, que nesta página diz
   "Descubra a condição da Black". O flutuante já é `position: fixed`, então o
   selo se ancora nele. No celular o flutuante é um círculo de 52px só com o
   ícone: o selo é mais largo que ele e sai pela esquerda, como etiqueta
   pendurada na bolha. */
.bf-zap-selo {
  top: -14px;
  right: -4px;
  white-space: nowrap;
  /* Fio amarelo: o flutuante passa por cima da seção escura "sem Black
     Fraude", e ali um selo quase preto sem borda some no fundo. */
  box-shadow: 0 0 0 1px #efce6799, 0 4px 10px #121d2640;
}

@media screen and (min-width: 768px) {
  .bf-zap-selo {
    right: 14px;
  }
}