/* form-wizard.css — formulário interativo (Consórcio Yamaha). Escopo .fw-*.
   Azul do site: #002999.

   ATENÇÃO À ESCALA: o site usa :root{font-size:62.5%} (1rem = 10px) SÓ em tela grande.
   No mobile o :root cai para ~8px, e nas páginas internas de moto ele é 8px mesmo em
   viewport larga. Ou seja: rem NÃO é 10px de forma confiável. Onde o valor precisa ser
   absoluto — campos de formulário (16px evita o zoom do iOS), texto que precisa passar
   em contraste — use PIXEL. Antes de assumir escala, meça:
   getComputedStyle(document.documentElement).fontSize

   Princípios: tamanho FIXO em todas as telas, campos baixos, fontes leves,
   UM único elemento pesado por tela (o botão de ação). */
.fw, .fw * { box-sizing: border-box; font-family: 'Open Sans', Arial, sans-serif; }

/* ============================================================================
   A TRAVA DA LARGURA — não remova
   O placeholder <div data-lead-wizard> é filho de .modalFormContainer, que o site declara
   como flex column com align-items:center. Um item flex nessa situação tem largura
   SHRINK-TO-FIT: sem largura própria, ele encolhe até o conteúdo. E o card, que se mede
   contra ele, passava a depender do conteúdo de CADA TELA — medido em 27/08/2026:

       inicio 320px · moto 218px · segmento 146px · cons_tipo 148px · contato 239px

   Dar largura definida ao placeholder é o que trava as 16 telas na mesma medida. O
   "width:42rem" do card sozinho não resolve: ele resolvia contra um pai indefinido.
============================================================================ */
[data-lead-wizard] { display: flex; justify-content: center; width: 100%; }

.fw {
  --fw-azul: #002999;
  --fw-azul-2: #1d4ed8;
  /* Ponta escura do DEGRADÊ dos botões. Vive separada de --fw-azul de propósito:
     na troca de 29/08 o azul chapado do site subiu para #002999, mas o degradê ficou
     como estava (decisão do Victor). Sem esta variável, mexer num arrastaria o outro. */
  --fw-azul-grad: #0e2d82;
  --fw-txt: #333a45;
  --fw-suave: #5b6070;
  --fw-linha: #dde2ec;
  position: relative;
  /* LARGURA INTRÍNSECA (não "width:100%"): dentro de um container flex/grid ou de um pai sem
     largura definida, width:100% faz o card medir o CONTEÚDO de cada tela — e ele mudava de
     largura a cada passo (420 → 240 → 204 → 337px). Com 42rem fixo + max-width:100% ele fica
     igual em qualquer contexto e ainda encolhe sozinho em telas estreitas. */
  width: 42rem;
  max-width: 100%;
  /* ALTURA FIXA em pixel (não rem): as 16 telas têm que ter a MESMA altura, senão o botão
     muda de lugar debaixo do dedo a cada passo. Em rem o valor variava com a escala da
     página (430px no desktop, 344px nas internas). O número cobre a tela mais alta. */
  min-height: 400px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 1.4rem;
  box-shadow: 0 1.2rem 3.2rem rgba(13, 32, 74, .14);
  padding: 2.2rem 2.8rem 1.4rem;
  color: var(--fw-txt);
}

/* ---- barra de progresso (fina, discreta) ---- */
.fw-progress { flex: 0 0 auto; height: 0.4rem; background: #e9edf5; border-radius: 0.2rem; overflow: hidden; margin-bottom: 1.6rem; }
.fw-progress[hidden] { display: block; visibility: hidden; }  /* reserva o espaço: nada se move */
.fw-progress span { display: block; height: 100%; width: 0; background: var(--fw-azul-2); border-radius: 0.2rem; transition: width .3s ease; }

/* ---- área central: telas sempre no mesmo quadro ---- */
.fw-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.fw-step { display: none; animation: fw-in .22s ease; }
.fw-step.is-active { display: block; }
@keyframes fw-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---- tipografia (leve; peso só no que importa) ---- */
.fw-title { margin: 0 0 0.8rem; font-size: 1.7rem; font-weight: 700; color: var(--fw-azul); text-align: center; line-height: 1.25; letter-spacing: .01em; }
.fw-sub { margin: 0 0 2rem; font-size: 1.25rem; font-weight: 400; color: var(--fw-suave); text-align: center; line-height: 1.5; }
.fw-sub strong { color: var(--fw-azul); font-weight: 700; }
.fw-q { margin: 0 0 1.6rem; font-size: 1.5rem; font-weight: 700; color: var(--fw-azul); line-height: 1.35; }
.fw-hint { margin: 1.2rem 0 0; font-size: 1.15rem; font-weight: 400; text-align: center; color: #8a93a6; }

/* ---- campos (baixos e limpos) ---- */
.fw-field { position: relative; margin-bottom: 1.2rem; }
.fw-field label { position: absolute; top: -0.7rem; left: 1.1rem; padding: 0 0.4rem; background: #fff; font-size: 1rem; color: #8a93a6; }
.fw-field input, .fw-field select, .fw-field textarea {
  display: block; width: 100%; padding: 1rem 1.2rem; font-size: 1.35rem; color: var(--fw-txt);
  background: #fff; border: 1px solid var(--fw-linha); border-radius: 0.7rem; outline: none;
  transition: border-color .15s ease;
}
.fw-field input:focus, .fw-field select:focus, .fw-field textarea:focus { border-color: var(--fw-azul-2); }
.fw-field input, .fw-field select { height: 3.7rem; }
.fw-field textarea { height: 7.4rem; resize: none; line-height: 1.45; } /* 2x a altura dos campos */
.fw .fw-invalido { border-color: #e11d48 !important; }
.fw-field input::placeholder, .fw-field textarea::placeholder { color: #a6aec0; }

/* ---- chips (respostas de 1 toque) ---- */
.fw-chips { display: flex; flex-direction: column; gap: 1.1rem; }
.fw-chip {
  width: 100%; padding: 1.15rem 1.4rem; font-size: 1.35rem; font-weight: 500;
  color: var(--fw-azul); background: #fff; border: 1px solid var(--fw-azul-2); border-radius: 0.8rem;
  cursor: pointer; text-align: center; transition: .12s; line-height: 1.3; font-family: inherit;
}
.fw-chip:hover, .fw-chip.is-selected { background: var(--fw-azul-2); color: #fff; }
.fw-chip-pre { background: #eaf1fd; }
/* variante compacta: telas com muitas opções (ex.: menu "já sou consorciado", 6 chips) sem
   estourar a altura fixa do card */
.fw-chips-compact { gap: 0.7rem; }
.fw-chips-compact .fw-chip { padding: 0.85rem 1.2rem; font-size: 1.2rem; }

/* ---- botão principal (o ÚNICO elemento pesado) ---- */
.fw-btn {
  display: block; width: 100%; margin-top: 0.4rem; padding: 1.15rem 1.6rem;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: center;
  color: #fff; background: linear-gradient(135deg, var(--fw-azul-2), var(--fw-azul-grad));
  border: none; border-radius: 0.8rem; cursor: pointer;
  box-shadow: 0 0.6rem 1.6rem rgba(29, 78, 216, .3); transition: transform .15s ease, box-shadow .15s ease;
  font-family: inherit; text-decoration: none;
}
.fw-btn:hover { transform: translateY(-0.1rem); box-shadow: 0 0.9rem 2rem rgba(29, 78, 216, .38); }
.fw-btn:disabled { opacity: .65; cursor: wait; transform: none; }
/* TODO botão ocupa a largura do card — inclusive os links que saem do site ("Ir para o site
   da Yamaha", lojas de app, SAC). Antes o .fw-btn-link era inline-block e ficava menor que os
   demais, criando a discrepância de largura entre telas. */
.fw-btn-link { display: block; width: 100%; margin-top: 0.8rem; }
/* ja_sac tem 4 ações (portal + telefone + WhatsApp + site): comprime para caber na altura fixa */
.fw-step[data-step="ja_sac"] .fw-btn-link { padding: 0.95rem 1.4rem; font-size: 1.25rem; margin-top: 0.6rem; }
/* o portal resolve sozinho a maior parte dos casos: é a única ação com peso visual aqui */
.fw-step[data-step="ja_sac"] .fw-ja-portal { background: linear-gradient(135deg, var(--fw-azul-2), var(--fw-azul-grad)); }
.fw-step[data-step="ja_sac"] .fw-btn-link:not(.fw-ja-portal) {
  background: #fff; color: var(--fw-azul); border: 1px solid var(--fw-azul-2); box-shadow: none;
}
.fw-step[data-step="ja_sac"] .fw-btn-link:not(.fw-ja-portal):hover { background: #eaf1fd; }

/* "contato" é a tela mais cheia do fluxo (2 campos + mensagem + 3 consentimentos + botão) e
   era a ÚNICA que estourava a altura fixa do card — 423px contra 400px das outras. O card
   crescia justo no passo final, que é o pior lugar para isso acontecer. Aqui ela recebe um
   espaçamento próprio, mais apertado, e passa a caber na mesma caixa. As outras 15 telas não
   são afetadas. (O bloco mobile mais abaixo tem os valores equivalentes em pixel.) */
.fw-step[data-step="contato"] .fw-q { margin-bottom: 1rem; }
.fw-step[data-step="contato"] .fw-field { margin-bottom: 0.9rem; }
.fw-step[data-step="contato"] .fw-field textarea { height: 5.6rem; }
.fw-step[data-step="contato"] .fw-checks { margin: 0.2rem 0 0.9rem; }

/* ---- checkboxes (compactos, juntos) ---- */
.fw-checks { margin: 0.2rem 0 1.2rem; }
/* 11px fixos, nos dois tamanhos de tela: era o menor texto do formulário inteiro (10,5px no
   desktop, 8,4px no mobile) e é justamente o que a pessoa está aceitando juridicamente. */
.fw-check { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.45rem; font-size: 11px; font-weight: 400; color: var(--fw-suave); line-height: 1.4; cursor: pointer; }
.fw-check input { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--fw-azul-2); }
.fw-check a { color: var(--fw-azul-2); }

/* ---- erro / voltar / sucesso ---- */
.fw-erro { flex: 0 0 auto; margin-top: 0.6rem; font-size: 1.15rem; font-weight: 500; color: #e11d48; text-align: center; min-height: 1.4rem; }
.fw-erro[hidden] { display: block; visibility: hidden; } /* reserva espaço */
.fw-voltar {
  flex: 0 0 auto; align-self: flex-start; margin-top: 0.2rem; padding: 0.3rem 0; background: none; border: none;
  font-size: 1.15rem; color: #8a93a6; cursor: pointer; font-family: inherit; min-height: 1.8rem;
}
.fw-voltar[hidden] { display: block; visibility: hidden; }
.fw-voltar:hover { color: var(--fw-azul); }
.fw-done { font-size: 3.6rem; text-align: center; margin-bottom: 1rem; }
.fw-step[data-step="sucesso"] .fw-q, .fw-step[data-step="fin_fora"] .fw-q,
.fw-step[data-step="ja_app_spam_ok"] .fw-q, .fw-step[data-step="ja_app_baixar"] .fw-q, .fw-step[data-step="ja_sac"] .fw-q { text-align: center; }
.fw-step[data-step="fin_fora"], .fw-step[data-step="ja_app_baixar"], .fw-step[data-step="ja_sac"] { text-align: center; }
.fw-step[data-step="sucesso"] .fw-sub, .fw-step[data-step="fin_fora"] .fw-sub,
.fw-step[data-step="ja_app_spam_ok"] .fw-sub, .fw-step[data-step="ja_app_baixar"] .fw-sub, .fw-step[data-step="ja_sac"] .fw-sub { margin-bottom: 1.4rem; line-height: 1.7; }

/* ============================================================================
   POP-UP PRÓPRIO DO WIZARD
   Overlay do próprio componente: fundo escurecido + só o card do formulário. Não usa o
   #modal do site (que arrasta junto a coluna de contato do hero antigo e um CSS que
   atropelava o wizard).
============================================================================ */
.fw-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.fw-overlay[hidden] { display: none; }
.fw-overlay-bg { position: absolute; inset: 0; background: rgba(6, 14, 33, .72); backdrop-filter: blur(2px); animation: fw-fade .2s ease; }
.fw-overlay-card { position: relative; z-index: 1; animation: fw-pop .22s ease; }
/* O X FICA DENTRO DO CARD (Victor, 29/08)
   Antes ele morava FORA, ancorado em .fw-overlay-card. No mobile esse container mede
   363px enquanto o card branco (.fw) mede 335px — max-width: calc(100vw - 48px) —,
   então sobravam 28px de faixa morta à direita e o X caía nela: 13px de folga à
   esquerda do card contra 42px à direita. Era essa a assimetria.
   Agora o botão mora no canto superior direito do próprio card, a 12px das duas bordas.
   PIXEL, não rem: com o :root em 8px no mobile, os 3.2rem antigos saíam 25px. */
.fw-overlay-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid #dfe4ef;              /* sem a borda o círculo branco sumiria no card */
  background: #fff; color: #002999;
  font-size: 24px; line-height: 1; font-family: inherit; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.fw-overlay-x:hover { background: #eaf1fd; border-color: #c3cfe8; }
@keyframes fw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fw-pop { from { opacity: 0; transform: translateY(1.2rem) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  /* CENTRALIZADO no mobile. "align-items:center" não serve aqui: quando o card fica mais alto
     que a tela, ele corta o TOPO e a pessoa não alcança o começo do formulário. "margin:auto"
     num item flex centraliza igual e continua rolável — é o jeito seguro.
     O padding de cima era 3.4rem para abrir espaço ao X, que ficava ACIMA do card;
     com o X agora dentro, ele volta a ser simétrico ao de baixo. */
  .fw-overlay { padding: 1.6rem 1.2rem; align-items: flex-start; overflow-y: auto; }
  /* max-width igual ao do .fw: o container precisa ter EXATAMENTE a largura do card
     branco, senão o X — que ancora nele — cai na faixa morta à direita. */
  .fw-overlay-card { width: 100%; max-width: calc(100vw - 48px); margin: auto; }
}

/* ============================================================================
   PONTOS DE ENTRADA (fora do card do wizard)
   1) .fwLateral — card do flutuante desktop: coleta nome/WhatsApp/e-mail e abre o pop-up
                   com o resto do fluxo. Entra deslizando da direita ao chegar nos preços.
   2) .fwCta     — variante curta (só texto + botão), usada onde não cabe formulário.
   3) .fwFaixa   — faixa acima do rodapé (Fase 2 do SDD).
============================================================================ */
/* O painel que hospeda este card (section.modalForm) é um vidro fosco CLARO —
   "background-color: rgba(255,255,255,.8)" + backdrop-filter, no styles-home-min.css. O próprio
   site já escreve em cima dele com texto escuro (".modalFormContainer h2{color:#002999}").
   Por isso aqui o card usa a mesma paleta do wizard (texto escuro), e NÃO texto branco:
   em branco ele sumia contra o vidro. */
/* O título é o <h2> do PRÓPRIO SITE — ele fica em .modalFormContainer, irmão do card, não
   dentro dele. Vinha alinhado à esquerda e em 700; aqui vai a 900 (a Graviton tem um Black
   de verdade, GravitonEstrictaBlack.woff2, então não é negrito sintético) e centralizado.
   O align-self precisa mudar junto: o container é flex e o prendia à esquerda. */
section.modalForm .modalFormContainer h2 {
  font-weight: 900;
  text-align: center;
  align-self: center;
  margin-bottom: 1.6rem;
}

/* ALTURA DO PAINEL LATERAL (Victor, 27/08): o site declara height:calc(90vh - 13rem) — deu
   680px com 325px de conteúdo, sobrando 354px vazios. Fixado em 500px e os elementos abaixo
   ganham respiro para preencher. Continua fixado no topo, na mesma posição.
   Precisa de !important: a altura do site aparece também dentro de @media(max-height:820px). */
@media (min-width: 881px) {
  section.modalForm { height: 500px !important; }
  section.modalForm .modalFormContainer { justify-content: center; padding: 2rem 0 !important; }
}

/* espaçamentos em PIXEL: o painel só existe acima de 881px, onde 1rem = 10px, mas manter em
   pixel deixa o respiro previsível se a escala do site mudar */
.fwLateral { width: 100%; padding: 4px 2px; color: var(--fw-txt, #333a45); font-family: 'Open Sans', Arial, sans-serif; }
.fwLateral p.fwLateralSub { margin: 0 0 22px; font-size: 13px; font-weight: 400; line-height: 1.5; color: #5b6070; text-align: center; }
.fwLateral .fwLateralCampo { position: relative; margin-bottom: 18px; }
/* rótulos e o "leva menos de 1 minuto" em texto escuro: em 1rem (10px) sobre o vidro claro do
   painel, o cinza anterior (#8a93a6) ficava em ~3:1 de contraste — abaixo do mínimo legível.
   Os PLACEHOLDERS seguem claros de propósito (#a6aec0): eles são exemplo, não informação. */
.fwLateral .fwLateralCampo label { position: absolute; top: -.7rem; left: 1rem; padding: 0 .4rem; background: #fff; font-size: 11px; color: #333a45; font-weight: 500; border-radius: .2rem; }
.fwLateral input {
  display: block; width: 100%; height: 44px; padding: 8px 11px;
  font-size: 14px; font-family: inherit; color: #333a45; background: #fff;
  border: 1px solid #dde2ec; border-radius: .7rem; outline: none;
  transition: border-color .15s ease;
}
.fwLateral input::placeholder { color: #a6aec0; }
.fwLateral input:focus { border-color: #1d4ed8; }
.fwLateral input.fw-invalido { border-color: #e11d48 !important; }
.fwLateralErro { margin: .2rem 0 .8rem; font-size: 1.1rem; font-weight: 500; color: #e11d48; text-align: center; min-height: 1.3rem; }
.fwLateralErro[hidden] { display: block; visibility: hidden; }
.fwLateral small { display: block; margin-top: 14px; font-size: 11.5px; color: #4a5162; text-align: center; }
.fwLateral .fwCtaBtn { padding: 15px 16px; font-size: 15px; }

/* entrada deslizante: fica fora da tela até o visitante chegar nos preços das motos.
   A classe .fw-entra vai no <section class="modalForm"> pelo JS (nada de :has(), que não é
   universal). Só no desktop — no mobile o card lateral nem aparece (o site usa a seção
   embutida da página). */
@media (min-width: 769px) {
  .fw-entra { transform: translateX(115%); opacity: 0; transition: transform .55s cubic-bezier(.22,.9,.3,1), opacity .4s ease; }
  .fw-entra.is-visivel { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-entra { transition: none; }
}

.fwCta { width: 100%; padding: 1rem 0.4rem; text-align: center; color: #fff; }
.fwCta h2 { margin: 0 0 0.8rem; font-size: 1.6rem; font-weight: 700; line-height: 1.25; letter-spacing: .01em; }
.fwCta p { margin: 0 0 1.6rem; font-size: 1.25rem; font-weight: 400; line-height: 1.5; opacity: .92; }
.fwCta small { display: block; margin-top: 0.9rem; font-size: 1.05rem; opacity: .75; }

.fwCtaBtn {
  display: block; width: 100%; padding: 1.15rem 1.6rem;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #1d4ed8, #0e2d82);
  border: none; border-radius: 0.8rem; cursor: pointer; font-family: 'Open Sans', Arial, sans-serif;
  box-shadow: 0 0.6rem 1.6rem rgba(29, 78, 216, .35); transition: transform .15s ease, box-shadow .15s ease;
}
.fwCtaBtn:hover { transform: translateY(-0.1rem); box-shadow: 0 0.9rem 2rem rgba(29, 78, 216, .45); }

/* FAIXA CTA — a barra azul de chamada. Aparece em três posições (ver nomes no SDD):
   Faixa Hero (abaixo do banner, todas as páginas) · Faixa Motos (home, depois do formulário)
   · Faixa Rodapé (depois do mapa). Altura de 103px para 88px no desktop (Victor, 27/08). */
.fwFaixa { width: 100%; padding: 21px 20px; background: #002999; }
.fwFaixaInner {
  max-width: 96rem; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  gap: 2.4rem; flex-wrap: wrap;
}
.fwFaixaInner p { margin: 0; font-size: 20px; font-weight: 500; color: #fff; font-family: 'Open Sans', Arial, sans-serif; }
/* largura FIXA nos dois tamanhos (Victor, 27/08): com o texto mais curto o botão ficava
   com largura variável e desalinhado entre as três faixas */
.fwFaixaInner .fwCtaBtn { width: 216px; max-width: calc(100vw - 64px); padding: 14px 16px; font-size: 15px; background: #fff; color: #002999; }
.fwFaixaInner .fwCtaBtn:hover { background: #eaf1fd; }
@media (max-width: 600px) {
  .fwFaixa { padding: 20px 16px; }
  .fwFaixaInner { gap: 14px; }
  .fwFaixaInner p { font-size: 17px; font-weight: 400; text-align: center; }
  /* largura FIXA (Victor, 27/08): ocupava 349px de 375px, quase de borda a borda.
     max-width protege telas de 320px, onde 260px encostaria nas laterais. */
  .fwFaixaInner .fwCtaBtn { width: 216px; font-size: 13px; padding: 13px 16px; }
}

/* ============================================================================
   FAIXA DA SEÇÃO DO FORMULÁRIO (section.modalFormMobile — antes das especificações)
   O visual antigo era uma caixa cinza (#ededed, borda, min-height 56rem) sobre fundo branco:
   sobrou do formulário estático, e com o card branco do wizard dentro virava caixa-dentro-de-
   caixa. Aqui a seção inteira vira uma faixa da marca e o card branco flutua sobre ela.
   Tudo em CSS (gradiente + linhas): nenhuma imagem nova para baixar.
   A classe .fw-secao é posta pelo integrador só nas seções que recebem o wizard.
   :not(.is-open) preserva o escurecido de overlay caso o script antigo do site ainda abra
   esta seção como modal no mobile.

   COR (Victor, 27/08): o azul escuro destoava do resto do site. Agora a faixa usa #f2f4f9 —
   o mesmo cinza azulado que o site já aplica nos itens do FAQ — e o card branco é que carrega
   o contraste, com sombra um pouco mais firme para não se dissolver no fundo claro.

   DOIS TRATAMENTOS (Victor, 29/08). As seções não são todas iguais:
     · a que fica LOGO ABAIXO da faixa do banner é zona de transição — sem fundo e sem
       textura, para banner → faixa → formulário correrem sem emenda;
     · as demais (home depois das motos, náutica depois dos motores, internas depois das
       cores) são blocos próprios no meio da página — fundo #f2f4f9 e margens folgadas.
   O seletor da exceção é ".fwHeroBloco + …": a seção de transição é, por definição, a
   irmã imediata do bloco banner+faixa. Assim nenhum HTML precisa ganhar classe nova, e páginas
   futuras herdam a regra certa só pela posição.
============================================================================ */
section.modalFormMobile.fw-secao:not(.is-open) {
  position: relative;
  padding: 7rem 2rem 7.4rem !important;
  background: #f2f4f9 !important;   /* cinza azulado do FAQ — bloco próprio no meio da página */
  overflow: hidden;
}
/* leve profundidade: um clareado atrás do card, para ele "descolar" da faixa */
section.modalFormMobile.fw-secao:not(.is-open)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* com o fundo já quase branco (#fbfcff), o clareado atrás do card precisa ser sutil —
     senão vira uma mancha visível no meio da faixa */
  background: radial-gradient(60rem 42rem at 50% 45%, rgba(255,255,255,.7), rgba(255,255,255,0) 72%);
}
/* linhas diagonais discretas — em fundo claro elas precisam ser MAIS ESCURAS que o fundo
   (o branco de antes seria invisível aqui) */
section.modalFormMobile.fw-secao:not(.is-open)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(0,41,153,.045) 0 .2rem, rgba(0,41,153,0) .2rem 2.6rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
/* na faixa clara o card precisa de sombra mais presente do que sobre o azul */
section.modalFormMobile.fw-secao:not(.is-open) .fw {
  box-shadow: 0 1.6rem 4rem rgba(13, 32, 74, .12), 0 0.2rem 0.6rem rgba(13, 32, 74, .06) !important;
  border-color: #e3e8f2 !important;
}
/* o container perde a caixa cinza e vira só um centralizador (o card do wizard é o conteúdo) */
section.modalFormMobile.fw-secao:not(.is-open) .modalFormContainer {
  position: relative; z-index: 1;
  min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  /* 72px em cima e embaixo (Victor, 29/08). Histórico: ~117/127px → 60/60 → 54/18 → 72/72.
     Com fundo próprio a seção precisa de folga simétrica, senão o bloco fica torto.
     PIXEL, não rem: nessas páginas o :root é 8px e o valor sairia 20% menor que o pretendido. */
  section.modalFormMobile.fw-secao:not(.is-open) { padding: 72px 24px 72px !important; }
  /* o container do site limitava a 320px; agora quem define a largura é a faixa */
  section.modalFormMobile.fw-secao:not(.is-open) .modalFormContainer { width: 100% !important; max-width: none !important; }
}

/* ---------------------------------------------------------------------------
   EXCEÇÃO: a seção de transição, logo abaixo da faixa do banner.
   Sem fundo e sem textura — o olho corre do banner até o formulário sem encontrar
   emenda nenhuma, igual acontece na seção de motos. O seletor tem uma classe a mais
   que a regra padrão, então passa por cima dela mesmo com os dois lados !important.
--------------------------------------------------------------------------- */
.fwHeroBloco + section.modalFormMobile.fw-secao:not(.is-open) {
  background: transparent !important;
}
.fwHeroBloco + section.modalFormMobile.fw-secao:not(.is-open)::before,
.fwHeroBloco + section.modalFormMobile.fw-secao:not(.is-open)::after {
  display: none;   /* mata o clarão radial e as listras diagonais */
}
@media (max-width: 600px) {
  /* topo -10% e base -70% (Victor, 27/08), mantidos: aqui a base fica curta de propósito,
     porque sem fundo não existe emenda para a seção seguinte disfarçar. */
  .fwHeroBloco + section.modalFormMobile.fw-secao:not(.is-open) { padding: 54px 24px 18px !important; }
}

/* ============================================================================
   NO DESKTOP, NENHUM FORMULÁRIO NO CORPO DA PÁGINA (Victor, 27/08 — revisão)
   Chegamos a mostrar o formulário depois das motos no desktop e ele não agradou: com o
   painel lateral fixo já na tela, o card no meio da página ficava redundante e pesado.
   Acima de 881px sobra o painel lateral + as faixas azuis; o formulário no corpo é só do
   mobile, onde não existe painel.

   "html body" na frente porque as internas trazem
       body[class*="moto-"] section.modalFormMobile { display: flex !important }
   que também é !important — só um seletor mais específico passa por cima.
============================================================================ */
@media (min-width: 881px) {
  html body section.modalFormMobile.fw-secao { display: none !important; }
}

/* ============================================================================
   IMAGEM DO MAPA (#map)
   PRECISA de !important: a altura não vem só do <style> da página, vem de um atributo
   style="height:40vh; object-fit:cover" no próprio <img>. Atributo inline vence qualquer
   seletor, por mais específico que seja — só !important passa por cima dele.

   IMAGEM DE 4000x480 (Victor, 04/09) — proporção 8,33:1.
   Substituiu a de 2446x710. É a que faz a regra abaixo funcionar.

   O QUE SE QUER: topo da imagem colado no topo da seção, base colada na base, SEMPRE,
   e as laterais sobrando para fora da tela. É o que "cover" com altura fixa entrega.

   ALTURA ÚNICA, 290px, sem media query: no celular e no desktop a lógica é a mesma.

   O NÚMERO QUE IMPORTA PARA QUEM MEXER DEPOIS: com a altura travada em 290px a imagem
   é reduzida a 0,604x (290/480) e passa a medir 2417px de largura, não 4000. Então:
     · até 2417px de tela  -> altura 100% colada, laterais sobrando. O objetivo.
     · de 2417px a 4000px  -> a imagem reduzida já é mais estreita que a tela; o "cover"
                              apara um pouco da altura em vez de deixar tarja vazia
                              (94% da altura em 2560px, 70% em 3440px).
   O limite é sempre ALTURA x 8,33. Para as laterais sobrarem até 4000px de tela, a
   seção precisaria ter 480px de altura. Foi decisão manter 290px.

   PRECISA de !important: a altura não vem só do <style> da página, vem de um atributo
   style="height:40vh; object-fit:cover" no próprio <img>. Atributo inline vence qualquer
   seletor, por mais específico que seja — só !important passa por cima dele.

   A CAIXA EM VOLTA TAMBÉM PRECISAVA IR JUNTO (achado em 04/09, no teste do mobile).
   Travar a altura da imagem não bastava: o <style> dentro do index.html tem
     #mapPlaceholder { display:grid; place-items:center; min-height:360px;
                       background:#f4f6f8; border-radius:8px; }
   Ou seja, uma caixa de 360px que CENTRALIZA a imagem de 290px — sobrava 31px de cinza
   em cima e 39px embaixo (os 39 incluem o margin-bottom:1rem que a <img> traz inline,
   que no mobile vale 8px por causa do :root em 62,5%). Era esse cinza que aparecia,
   não falha da imagem.
   Por isso a regra abaixo zera min-height, altura, margem e raio da caixa E da imagem.
   O raio saiu porque agora a imagem sangra para fora da tela: canto arredondado num
   elemento que vaza deixaria quatro lasquinhas de #f4f6f8 nas pontas.
============================================================================ */
#map #mapPlaceholder,
#map .mapContainer { min-height: 0 !important; height: 290px !important; border-radius: 0 !important; overflow: hidden !important; }
#map #mapPlaceholderImage { height: 290px !important; width: 100% !important; object-fit: cover !important; margin: 0 !important; border-radius: 0 !important; }

/* ============================================================================
   BLINDAGEM CONTRA O CSS DO SITE
   O site tem regras genéricas por descendência que atingem QUALQUER elemento dentro
   dos containers de formulário. A pior delas:
       section.modal .modalFormContainer div { display:flex; background:#0c0d11; color:#fff }
   Como o wizard é injetado DENTRO desses containers, ele herdava fundo preto e — pior —
   todas as telas viravam display:flex e apareciam empilhadas de uma vez.
   Aquele seletor tem especificidade 0-0-2-2, acima das classes do componente, por isso
   aqui usamos !important: são as propriedades ESTRUTURAIS que nenhum contexto pode
   sobrescrever sem quebrar o wizard. O resto do componente segue estilizável normalmente.
============================================================================ */
.fw {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #fff !important;
  color: var(--fw-txt) !important;
}
.fw .fw-body { display: flex !important; flex-direction: column !important; align-items: stretch !important; background: none !important; }
.fw .fw-step { display: none !important; background: none !important; color: inherit !important; }
.fw .fw-step.is-active { display: block !important; }
.fw .fw-field, .fw .fw-chips, .fw .fw-checks, .fw .fw-erro, .fw .fw-done {
  background: none !important; color: inherit !important;
}
.fw .fw-chips { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.fw .fw-field { display: block !important; }
.fw .fw-field input, .fw .fw-field select, .fw .fw-field textarea {
  color: var(--fw-txt) !important; background: #fff !important; width: 100% !important;
}
.fw .fw-check { display: flex !important; flex-direction: row !important; align-items: center !important; }
/* tipografia: o site estiliza "div h2" dentro do modal (azul claro, 3rem) e acertava o
   título do wizard — aqui o componente retoma a própria escala.
   Nas internas o estrago era pior: ".modalFormContainer h2" desenha uma TARJA azul sangrando
   para fora do card (background #002999, margens negativas, cantos arredondados) — como a
   blindagem forçava a cor do texto para o mesmo azul, o título sumia dentro da tarja. Por isso
   aqui zeramos também fundo, margens, padding e cantos: o h2 volta a ser um título. */
.fw .fw-title {
  color: var(--fw-azul) !important; font-size: 1.7rem !important; font-weight: 700 !important;
  width: auto !important; letter-spacing: .01em !important;
  background: none !important; margin: 0 0 0.8rem !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.fw .fw-q { color: var(--fw-azul) !important; font-size: 1.5rem !important; font-weight: 700 !important; width: auto !important; }
.fw .fw-sub { color: var(--fw-suave) !important; font-size: 1.25rem !important; font-weight: 400 !important; width: auto !important; margin-top: 0 !important; }
.fw .fw-hint { color: #8a93a6 !important; font-size: 1.15rem !important; width: auto !important; }
.fw .fw-sub strong { color: var(--fw-azul) !important; }

/* ============================================================================
   LISTA DE MOTOS LEGÍVEL ATÉ 880px
   Testado em 11 larguras (27/08/2026): até 480px o <select> abria em 16px, mas de 481px a
   880px despencava para 10,8px — a faixa dos tablets e notebooks pequenos, onde o :root do
   site é 8px e o campo estava em 1.35rem. Acima de 881px fica como está (13,5px), que é o
   tamanho aprovado do pop-up no desktop.
   `option` precisa da regra explícita: no Android a lista não herda o tamanho do <select>.
============================================================================ */
@media (max-width: 880px) {
  .fw-field input, .fw-field select, .fw-field textarea { font-size: 16px !important; }
  .fw-field select option { font-size: 16px; }
}

/* ============================================================================
   BOTÕES DO SITE COM O MESMO DEGRADÊ DO FORMULÁRIO (Victor, 27/08)
   Havia dois azuis chapados quase idênticos convivendo — #002999 no "VER PARCELAS" e
   #002999 nos demais. Os seletores repetem os do site de propósito: assim ganham por
   ordem de carga (este arquivo vem por último) sem precisar de !important.
   .btnHeroSimular leva "a." porque a regra dele vive num <style> inline da página, que
   sem isso venceria pelo empate de especificidade.
============================================================================ */
a.btnHeroSimular,                                                    /* banner do topo, home */
body[class*="moto-"] .ctaSolicitarProposta,                          /* COMPRAR AGORA, 21 internas */
#motos .containerMotos .motosContent .motosBox .botao button,        /* VER PARCELAS, 21x na home */
#contato .contatoContainer .socialecliente .clienteAssociado {       /* Portal do Cliente */
  background: linear-gradient(135deg, #1d4ed8, #0e2d82) !important;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.btnHeroSimular:hover,
body[class*="moto-"] .ctaSolicitarProposta:hover,
#motos .containerMotos .motosContent .motosBox .botao button:hover,
#contato .contatoContainer .socialecliente .clienteAssociado:hover {
  transform: translateY(-0.1rem);
  box-shadow: 0 0.9rem 2rem rgba(29, 78, 216, .38);
}

/* ============================================================================
   AJUSTES NO SITE (Victor, 27/08 — rodada 2)
   Blocos que não são do formulário, mas que ficam aqui porque este arquivo é o único
   que carrega DEPOIS do CSS do site e consegue sobrescrever sem editar os minificados.
============================================================================ */

/* --- 1. BOTÃO DO PORTAL, na seção de contato ---------------------------------
   No mobile o site escondia o texto e virava uma bolinha de 32px: ninguém sabia o que
   era aquele ícone e por isso ninguém clicava. Agora vira uma barra com ícone + texto,
   e as redes sociais passam a ficar LADO A LADO abaixo dele (estavam empilhadas em
   coluna, gastando altura à toa).
   "html body" na frente porque as regras do site têm especificidade alta e algumas
   trazem !important. */
@media (max-width: 768px) {
  /* 02/09: era column-reverse (Portal em cima, redes embaixo). O Victor pediu os três
     na MESMA linha, então virou row-reverse — que põe o botão do Portal na frente dos
     dois ícones sem mexer no HTML. O bloco de baixo, no fim do arquivo, é quem sobe
     esta linha para o topo da seção. */
  html body #contato .contatoContainer .socialecliente {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  html body #contato .contatoContainer .socialecliente .clienteAssociado {
    width: auto !important; height: auto !important;
    border-radius: 10px !important; padding: 13px 22px !important;
    margin-top: 0 !important;
  }
  html body #contato .contatoContainer .socialecliente .clienteAssociado a {
    width: auto; gap: 10px; justify-content: center;
  }
  html body #contato .contatoContainer .socialecliente .clienteAssociado a span {
    display: inline !important; font-size: 15px; white-space: nowrap;
  }
  html body #contato .contatoContainer .socialecliente .clienteAssociado a img { width: 18px !important; }
  html body #contato .contatoContainer .contContainerSocial { flex-direction: row; gap: 28px; }
  html body #contato .contatoContainer .contContainerSocial a + a { margin: 0 !important; }
}

/* --- 2. LOGO DO CONSÓRCIO NO RODAPÉ ------------------------------------------
   Não tinha regra de tamanho: herdava width="400" do HTML e o img{max-width:100%}
   global, então ocupava 100% da largura da tela no celular.
   ATENÇÃO: percentual NÃO serve aqui. O contêiner .imagemYamaha é um item flex sem
   largura própria, então ele encolhe junto com a imagem — "width:45%" gerou uma logo
   de 26px. A medida tem que ser absoluta, com teto pela viewport. */
#footer .imagemYamaha img, .imagemYamaha img {
  width: min(45vw, 200px); max-width: none; height: auto;
}

/* --- 3. CAIXA COM O NOME DA MOTO (internas) ----------------------------------
   A cor sempre foi a MESMA da faixa azul (#002999). O que fazia ela parecer mais
   escura e opaca era a sombra PRETA a 35% deslocada 2,4px, que escurecia as bordas.
   Trocada por uma sombra azulada e centralizada: mantém o relevo, limpa o tom. */
#motos .containerMotos .conteudo .titulo {
  box-shadow: 0 0.6rem 1.6rem rgba(0, 41, 153, .28) !important;
}

/* --- 4. SINO DE NOTIFICAÇÕES -------------------------------------------------
   Antes: painel de 250px (200px no mobile), título em 22px e mensagem em 16px — parecia
   um cartaz, não uma notificação. Agora: painel largo, título discreto e a MENSAGEM como
   protagonista, com as 4 empilhadas e rolagem quando passam da altura confortável.
   Os seletores repetem os do site para vencer por ordem de carga. */
header .bellNotification .bellNotificationSubject {
  width: 320px !important;
  max-height: 70vh; overflow-y: auto;
  padding: 14px 0 6px !important;
  border-radius: 12px !important;
  background: #fff;
}
header .bellNotification .bellNotificationSubject h2 {
  font-size: 14px !important; font-weight: 700 !important;
  color: #5b6070; letter-spacing: .04em; text-transform: uppercase;
  margin: 0 16px 10px !important;
}
.fwSinoItem {
  padding: 11px 16px; border-top: 1px solid #eef1f7; cursor: pointer;
  transition: background .15s ease;
}
.fwSinoItem:hover { background: #f2f4f9; }
.fwSinoItem span {
  display: block; font-size: 13px !important; line-height: 1.45;
  color: #333a45; font-family: 'Open Sans', Arial, sans-serif;
}
/* lida: cinza e sem o ponto azul, mas continua clicável */
.fwSinoItem.is-lida span { color: #9aa3b4; }
.fwSinoItem:not(.is-lida) span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #1d4ed8; margin-right: 8px; vertical-align: middle;
}
@media (max-width: 768px) {
  /* 80% da tela com teto de 320px (Victor, 27/08): px fixo encostaria na borda num
     celular de 320px, e percentual puro ficaria largo demais em tablet. */
  header .bellNotification .bellNotificationSubject {
    width: min(80vw, 320px) !important;
    max-height: 70vh;
  }
}

/* --- 5. BANNER INICIAL -------------------------------------------------------
   O título passou de <h2> para <h1>: é o texto mais visível da home e o mais rico em
   palavra-chave. Trocar a tag derruba as regras do site, que miravam "h2" — por isso os
   estilos originais são replicados aqui, com o tamanho novo (28 → 34px).
   O <h1> antigo ("SEU CONSÓRCIO YAMAHA ESTÁ AQUI") virou <h2> e recebe o mesmo
   tratamento que tinha, pelo mesmo motivo.
   O botão que ficava abaixo do texto foi removido — a faixa azul logo adiante tem o
   mesmo CTA, a poucos pixels dali. */
#hero .bannerTexto h1 {
  text-align: center; max-width: 55rem; font-size: 34px; letter-spacing: 0.1rem;
  overflow-wrap: break-word; font-family: 'Graviton', 'Open Sans', Arial, sans-serif;
  margin-bottom: 24px;              /* eram 10px entre título e texto: quase se tocavam */
}
#motos .containerMotos h2 {
  width: 80%; font-size: 3.2rem; font-weight: 900; text-align: center; margin-top: 2rem;
}
#hero .bannerTexto h4 { margin-top: 0; }   /* o espaço agora vem da margem do título */
@media (max-width: 768px) {
  /* o site tinha uma variante mobile para o h2 (2.5rem); como a tag mudou, ela deixou de
     valer — aqui entra a equivalente para o h1, em pixel */
  #hero .bannerTexto h1 { font-size: 24px; margin-bottom: 18px; }
  /* "abaixar" o bloco: 64px → 80px (o valor vinha em rem e virava 64px na escala do mobile) */
  /* 190px desde 02/09 (era 80px): o h4 saiu do banner e o h1 desceu para ~36% da
     altura. Mantido o !important que ja estava aqui -- sem ele a regra do site vence. */
  #hero .bannerTexto { padding-top: 142px !important; }
}

/* --- 6. MODAL ANTIGO E O GATILHO DE SAÍDA ------------------------------------
   O #modal ficou vazio depois que o formulário saiu de lá, e ainda era aberto pelo
   "exit-intent" do site (mouse subindo para fora da tela, 5s após carregar) — a pessoa
   via um pop-up sem nada dentro. Victor pediu para desativar o gatilho de vez.
   A classe é posta pelo JS, e não direto no seletor: assim quem estiver SEM JavaScript
   continua enxergando o <noscript> com o formulário estático que vive dentro dele. */
section.modal.fw-desativado { display: none !important; }

/* --- 6b. CABEÇALHO NO MOBILE: alinhamento das logos e do sino -----------------
   Medido em 27/08: as duas logos têm o centro vertical em 48px e o sino em 31px — ele
   estava 17px MAIS ALTO, o que é exatamente a sensação de "desalinhado pra cima".
   E o espaço estava mal distribuído: 66px sobrando em cada ponta e só 22px entre a
   logo da Yamaha e o sino. Aqui o espaço é redistribuído; nada cresce nem diminui. */
@media (max-width: 768px) {
  /* O contêiner usa "space-evenly", que reparte o espaço em três fatias iguais e ignora
     qualquer padding que se ponha nele — por isso mexer só no padding não adiantou.
     Com "space-between" as logos vão para as pontas, e o padding-direito reserva a faixa
     do sino para elas não colidirem com ele. */
  /* !important porque a regra do site que define "space-evenly" tem especificidade maior
     (ela qualifica o contêiner pai) — sem isso, só o padding pegava e as logos continuavam
     amontoadas no meio. */
  header .logosYamahaMobile {
    justify-content: space-between !important;
    padding: 0 64px 0 4px;
  }
  header .bellNotification {
    top: 50% !important;
    transform: translateY(-50%);      /* centraliza na mesma linha das logos */
    right: 20px !important;
  }
}

/* --- 7. AZUL PADRONIZADO -----------------------------------------------------
   Havia dois azuis diferentes por UM dígito convivendo: #002999 (o principal) e
   #002999. Ninguém distingue, mas é o tipo de coisa que deixa o conjunto desalinhado.
   O botão VER PARCELAS já recebeu o degradê; aqui fica o hover do menu. */
header .MenuMotoNautica div a:hover { color: #002999; }

/* ---- honeypot: fora da tela (não display:none — alguns bots detectam) ---- */
.fw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ============================================================================
   MOBILE
   Tudo em PIXEL, e por um motivo concreto: o site NÃO usa 62.5% no mobile — o :root cai
   para ~8px. Em rem, "2rem de padding" virava 16px e "1.2rem entre campos" virava 9,6px:
   é daí que vinha a sensação de conteúdo espremido. Em pixel o respiro é o que se lê aqui.

   A largura segue travada em 320px (decisão do Victor), mas com max-width relativo: numa
   tela mais estreita que isso o card REDUZ em vez de estourar, sempre com margem na borda.
============================================================================ */
@media (max-width: 480px) {
  /* largura = tela menos 24px de cada lado (Victor, 27/08). Antes travava em 320px e não
     crescia em celular maior. O respiro lateral vem do padding da faixa. */
  .fw {
    width: 100%;
    max-width: calc(100vw - 48px);
    /* 420 e não 400: com as fontes no tamanho do desktop, as telas mais cheias (menu de
       6 opções e contato) não cabiam mais em 400px. Continua igual nas 16. */
    min-height: 420px;
    padding: 24px 22px 18px;
  }
  /* TAMANHOS EM PIXEL, IGUAIS AOS DO DESKTOP (Victor, 27/08). Em rem eles saíam ~20% menores
     no celular por causa do :root de 8px: subtítulo 10px, pergunta 12px, botão 11,2px.
     Os seletores repetem ".fw" e levam !important porque a BLINDAGEM (mais abaixo) fixa esses
     mesmos tamanhos com !important — sem isso ela venceria por especificidade. */
  .fw .fw-title { font-size: 15px !important; margin-bottom: 12px !important; }
  .fw .fw-sub   { font-size: 13px !important; margin-bottom: 24px; }
  .fw .fw-q     { font-size: 15px !important; margin-bottom: 22px; }
  .fw .fw-hint  { font-size: 12px !important; margin-top: 16px; }
  .fw-btn, .fw-btn-link { font-size: 14px; }
  .fw-chip { font-size: 14px; }
  .fw-chips-compact .fw-chip { font-size: 13px; }
  .fw-voltar { font-size: 12px; }
  .fw-erro { font-size: 12px; }

  .fw-field { margin-bottom: 18px; }
  /* 16px reais: abaixo disso o iOS dá zoom ao focar, e a lista do <select> fica ilegível.
     `option` precisa ser explícito — no Android a lista não herda do <select>. */
  .fw-field input, .fw-field select { font-size: 16px !important; height: 48px; }
  .fw-field select option { font-size: 16px; }
  .fw-field textarea { font-size: 16px !important; height: 88px; }
  .fw-field label { font-size: 11px; }

  .fw-chips { gap: 14px; }
  .fw-chip { padding: 14px 16px; }
  /* a variante compacta é usada só no menu "já sou consorciado", que tem 6 opções: com as
     fontes maiores ela passava de 434px e era a tela que empurrava a altura de todas */
  .fw-chips-compact { gap: 8px; }
  .fw-chips-compact .fw-chip { padding: 9px 14px; }

  .fw-btn { padding: 15px 16px; margin-top: 6px; }
  .fw-btn-link { margin-top: 10px; }
  .fw-checks { margin: 6px 0 18px; }
  .fw-check { margin-bottom: 8px; }

  /* "contato" é a tela mais cheia (2 campos + mensagem + 3 consentimentos + botão) e era a
     única que estourava a altura fixa — 481px contra 400px das outras, fazendo o card crescer
     justo no passo final. Ela recebe um espaçamento próprio, mais apertado, para caber na
     mesma caixa. O respiro das demais telas não muda. */
  .fw-step[data-step="contato"] .fw-q { margin-bottom: 12px; }
  .fw-step[data-step="contato"] .fw-field { margin-bottom: 11px; }
  .fw-step[data-step="contato"] .fw-field textarea { height: 48px; }
  .fw-step[data-step="contato"] .fw-checks { margin: 2px 0 10px; }
  .fw-step[data-step="contato"] .fw-check { margin-bottom: 5px; }

  .fwLateral input { font-size: 16px !important; }
}

/* ============================================================================
   BLOCO DO BANNER — a faixa azul tem que aparecer sem rolar (Victor, 29/08)

   O problema: #hero media 100vh cravado, então a faixa começava EXATAMENTE na dobra
   e o CTA mais forte do site nunca era visto no primeiro impacto. Medido em 29/08:
   desktop 1440x900 a faixa começava em y=900; mobile 390x844, em y=844.

   Por que um wrapper e não "height: calc(100vh - 88px)": a altura da faixa NÃO é
   constante. Medida nas 23 páginas, ela vai de 81px a 134px conforme a largura e o
   comprimento do texto (a interna diz "Quer Conquistar sua Yamaha Aerox 160?", bem
   mais longo que o da home). Qualquer número fixo erraria em alguma página.
   Com banner e faixa dentro de um flex column de altura definida, o banner fica com
   "o que sobrar" e a faixa cabe inteira SEMPRE — sem JS e sem salto de layout.

   Os 40px a menos são a folga que o Victor pediu: sobra uma fatia da seção seguinte,
   que sinaliza que a página continua.

   svh, não vh: no Safari e no Chrome de celular o vh inclui a área ATRÁS da barra de
   endereço, então a faixa continuaria escondida na primeira renderização — exatamente
   o que estamos consertando. O svh é a altura com a barra visível. @supports dá o
   fallback: navegador sem svh usa vh e fica como antes, sem quebrar.
============================================================================ */
.fwHeroBloco { display: flex; flex-direction: column; height: calc(100vh - 40px); }
@supports (height: 100svh) {
  .fwHeroBloco { height: calc(100svh - 40px); }
}
.fwHeroBloco > #hero,
.fwHeroBloco > #heroMoto { flex: 1 1 auto; height: auto !important; min-height: 0; }
.fwHeroBloco > .fwFaixa { flex: 0 0 auto; }

/* INTERNAS: aqui o banner começa ABAIXO do header, e esse recuo vinha de um
   "margin-top:10rem" no container da imagem. Dentro do flex isso vazaria para fora do
   bloco (colapso de margem), empurrando tudo para baixo. Vira padding no próprio item
   flex — mesmo recuo visual, sem colapsar. */
.fwHeroBloco > #heroMoto { padding-top: 10rem; }
.fwHeroBloco > #heroMoto .bannerMoto { height: 100%; }
.fwHeroBloco > #heroMoto .bannerMoto .bannerImagemContainerMoto {
  height: 100% !important; margin-top: 0 !important;
}

/* ============================================================================
   TEXTO CORRIDO — MARGEM INTERNA NO MOBILE (Victor, 02/09)
   Medido em 390px: o texto de "Benefícios e Garantias" ficava com 235px de 390 —
   60% da tela — e quebrava linha quase toda hora. A margem de 78px de cada lado
   vinha somada de três lugares: 20px da seção, 18px de .beneficios estar em 90%
   da largura, e 40px do padding do próprio bloco de texto.

   Aqui só o terceiro muda: 40px -> 24px. O texto vai para ~270px em Benefícios e
   ~302px em Sobre Nós / Sobre o Consórcio.

   Em PIXEL e dentro de media query porque a regra do site é "padding: 2rem 5rem",
   e rem aqui não é confiável: o :root é 10px no desktop e 8px no mobile, então o
   mesmo valor rende 50px lá e 40px aqui. O desktop fica como está — decisão do
   Victor: lá o texto já tem largura confortável.
============================================================================ */
@media (max-width: 880px) {
  #sobre .sobreContainer .beneficios .texto,
  #nos .nosContainer .nosTexto,
  #nosUseMotos .nosContainer .nosTexto {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============================================================================
   PESO DO TEXTO CORRIDO (Victor, 02/09)
   O texto era 'Open Sans' 400. Baixa para 300 — só o texto, nunca os títulos: eles
   usam Graviton, outra fonte, e não são alcançados por esta regra.

   ATENÇÃO: isto só funciona porque o 300 VERTICAL foi acrescentado ao <link> do
   Google Fonts nesta mesma rodada. A URL antiga trazia 400/500/700/900 na vertical
   e o 300 apenas em itálico — pedir 300 sem baixar o arquivo faz o navegador cair
   no 400 e nada muda na tela. Se algum dia o <link> voltar ao que era, esta regra
   deixa de ter efeito silenciosamente.
============================================================================ */
#sobre .sobreContainer .beneficios .texto,
#sobre .sobreContainer .beneficios .texto p,
#sobre .sobreContainer .beneficios .texto .fwLista li,
#nos .nosContainer .nosTexto,
#nosUseMotos .nosContainer .nosTexto {
  /* 300 -> 400 em 02/09: com a entrelinha em 1,45 a leveza já vem do espaçamento,
     e o traço fino só custava legibilidade no celular. */
  font-weight: 400;
}
/* o "Especialistas em Consórcio Yamaha..." em <strong> continua sendo destaque */
#nosUseMotos .nosContainer .nosTexto strong { font-weight: 700; }

/* ============================================================================
   CONTATO NO MOBILE — TRÊS LINHAS (Victor, 02/09)
   Antes era uma linha só, com duas colunas lado a lado e ZERO de espaço entre elas:
   endereço em 147px (o texto sobrava com 115px depois do ícone) contra 203px do
   bloco do botão. Não chegava a sobrepor, mas parecia colado e o endereço quebrava
   em três linhas.

   Ordem pedida pelo Victor:
       linha 1 — botão Portal do Consorciado · Instagram · Facebook
       linha 2 — telefone da concessionária
       linha 3 — endereço

   Como o HTML traz o endereço ANTES do bloco social, os dois "reverse" abaixo
   invertem a ordem visual sem mexer no HTML — e sem mexer na ordem de leitura de
   quem usa leitor de tela, que continua saindo do contato para as redes.
============================================================================ */
@media (max-width: 880px) {
  #contato .contatoContainer {
    flex-direction: column-reverse;   /* social sobe para a linha 1 */
    align-items: stretch;
    gap: 20px;
  }
  /* row-reverse põe o botão do portal na frente dos dois ícones */
  #contato .contatoContainer .socialecliente {
    width: 100%;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  /* o endereço passa a ter a largura inteira: telefone e rua param de quebrar */
  #contato .contatoContainer .contContainerEndereco { width: 100%; }
}

/* ============================================================================
   DEPOIMENTOS — UM CARROSSEL SÓ (Victor, 02/09)
   Antes eram duas seções com os MESMOS 7 depoimentos: #clientes (grade, só desktop)
   e #clientesMobile (carrossel, só mobile). No desktop a grade fechava 3+3+1, com o
   sétimo card sozinho na última linha. A grade saiu do HTML; o carrossel agora vale
   nas duas larguras, com 3 cards inteiros + um pedaço do próximo acima de 881px.

   O site declarava "#clientesMobile{display:none}" fora de media query e
   "display:flex" só abaixo de 880px. Como o id continua o mesmo (renomear quebraria
   uma dúzia de regras do site), aqui a visibilidade é forçada em toda largura.
============================================================================ */
#clientesMobile { display: flex !important; }

@media (min-width: 881px) {
  /* no desktop a seção usa a mesma largura das outras (75%), e a altura fixa de 58rem
     do mobile sobra: o card lá é mais estreito e o texto ocupa mais linhas */
  #clientesMobile { width: 75%; margin: 2rem auto; }
  #clientesMobile .swiper { width: 100%; height: auto; padding: 0 0 4.5rem; }
  #clientesMobile .swiper-slide { width: auto; }
  #clientesMobile .clientBox { width: 100%; height: 38rem; margin: 0; }
}

/* --- altura igual e citação limitada (Victor, 02/09) -------------------------
   Os depoimentos têm tamanhos bem diferentes — o maior tem quase o triplo do menor —
   e nos curtos sobrava um buraco branco no meio do card. O clamp corta no 8ª linha
   com reticências e iguala todos. */
#clientesMobile .clientBox cite {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* --- sombra e cantos da família do resto do site -----------------------------
   O card usava sombra preta a 25% e canto reto. O card do formulário usa sombra
   azulada suave e canto arredondado; aqui os dois passam a falar a mesma língua. */
#clientesMobile .clientBox {
  border-radius: 1.4rem;
  border: 1px solid #e6e9f2;
  box-shadow: 0 1.2rem 3.2rem rgba(13, 32, 74, .12), 0 .2rem .6rem rgba(13, 32, 74, .06);
}

/* --- setas: círculo branco, mesma linguagem do X do popup --------------------
   O Swiper desenha um chevron solto na cor do tema. Aqui vira botão redondo com
   borda, igual ao botão de fechar do formulário. PIXEL, não rem: nesta seção o
   :root cai para 8px no mobile. */
#clientesMobile .swiper-button-next,
#clientesMobile .swiper-button-prev {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #dfe4ef;
  color: #002999;
  box-shadow: 0 .4rem 1.2rem rgba(13, 32, 74, .14);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#clientesMobile .swiper-button-next::after,
#clientesMobile .swiper-button-prev::after { font-size: 16px; font-weight: 700; }
#clientesMobile .swiper-button-next:hover,
#clientesMobile .swiper-button-prev:hover { background: #eaf1fd; border-color: #c3cfe8; }
/* microinteração: a seta desliza para o lado que ela aponta */
#clientesMobile .swiper-button-next:hover { transform: translateX(2px); }
#clientesMobile .swiper-button-prev:hover { transform: translateX(-2px); }

/* --- bolinha ativa em pílula ------------------------------------------------- */
#clientesMobile .swiper-pagination-bullet {
  width: 8px; height: 8px; background: #b9c2d6; opacity: 1;
  transition: width .25s ease, background .25s ease;
}
#clientesMobile .swiper-pagination-bullet-active {
  width: 24px; border-radius: 4px; background: #002999;
}

/* ============================================================================
   ANIMAÇÕES DE ENTRADA POR ROLAGEM (Victor, 02/09)
   Par do scripts/anima.js. Parâmetros pedidos: opacidade 0 → 1, translateY de 22px,
   550ms de duração, 70ms entre um elemento e o próximo, uma vez só.

   O INTERRUPTOR É A CLASSE .anima-on NO <html>, posta pelo JS.
   Sem ela, nenhuma regra daqui esconde nada. Isso é de propósito: se o script falhar,
   não carregar ou for removido, a página aparece normal em vez de ficar em branco.
   Nunca escreva estas regras sem o prefixo .anima-on.

   PREFERS-REDUCED-MOTION (decisão do Victor): quem pede menos movimento continua
   vendo o fade, mas nada se desloca — o translateY é zerado e o tempo encurta.
============================================================================ */
.anima-on [data-anima] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 550ms ease, transform 550ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.anima-on [data-anima].anima-visivel {
  opacity: 1;
  transform: none;
}
/* solta o will-change depois: mantê-lo ligado em 22 cards custa memória de vídeo à toa */
.anima-on [data-anima].anima-visivel { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .anima-on [data-anima] {
    transform: none;                 /* sem deslocamento */
    transition: opacity 260ms ease;  /* o fade fica, mais curto */
  }
  .anima-on [data-anima].anima-visivel { transform: none; }
}

/* ============================================================================
   HOVER DOS CARDS
   MOTOS: SEM CARD LIFT (Victor, 02/09 — pedido e revertido no mesmo dia)
   Chegamos a somar sombra + subida + canto arredondado no .motosBox, como o Victor
   tinha pedido. Na tela virou uma "caixa" visível em volta da moto — as fotos são
   recortadas sobre fundo claro, então a sombra desenha um retângulo que antes não
   existia e o card ficou pesado. Removido.
   O hover das motos volta a ser SÓ o que o site já fazia: transform: scale(1.08) no
   <a> interno, declarado no styles-home-min.css. Não reintroduza sombra aqui.

   Nos DEPOIMENTOS o lift fica: lá o card já é uma caixa branca com borda e sombra
   por natureza, então subir no hover não inventa contorno nenhum. */
#clientesMobile .clientBox { transition: transform .3s ease, box-shadow .3s ease; }
#clientesMobile .swiper-slide:hover .clientBox {
  transform: translateY(-6px);
  box-shadow: 0 1.6rem 3.6rem rgba(13, 32, 74, .18), 0 .3rem .8rem rgba(13, 32, 74, .08);
}

@media (prefers-reduced-motion: reduce) {
  #clientesMobile .swiper-slide:hover .clientBox { transform: none; }
}

/* ============================================================================
   MICROINTERAÇÕES (Victor, 02/09)
   1) Botões afundam ao clicar — a resposta física que mais se sente e a mais barata.
   2) A setinha do FAQ gira 180° ao abrir, em vez de trocar de figura secamente.
============================================================================ */
#motos .containerMotos .motosContent .motosBox .botao button,
.fwCtaBtn,
.fw-btn,
#contato .clienteAssociado {
  transition: transform .1s ease, letter-spacing .3s ease, background .15s ease, box-shadow .15s ease;
}
#motos .containerMotos .motosContent .motosBox .botao button:active,
.fwCtaBtn:active,
.fw-btn:active,
#contato .clienteAssociado:active { transform: scale(.97); }

/* A SETA DO FAQ GIRA em vez de trocar de figura.
   O site já desenha a seta no ::before do summary e faz "content: ▸" virar "▾" na
   abertura — troca seca, sem transição, porque content não anima. Aqui o glifo passa
   a ser sempre ▸ e quem se move é o transform, que anima. NÃO acrescente um ::after:
   já existe marcador, e um segundo desenharia duas setas no mesmo item.

   O ESTADO FINAL VEM DO transform, NÃO DA ANIMAÇÃO — e isso é de propósito.
   Medido em 02/09: quando o <details> abre, o navegador reconstrói a subárvore do
   summary e tanto "transition" quanto "animation" no pseudo-elemento ficam órfãs no
   meio do caminho — a seta travava por volta de 5 graus e nunca completava.
   Por isso o rotate(90deg) é declarado direto na regra, garantindo o desenho certo
   mesmo que a animação não rode; a animação fica só como o movimento, quando o
   navegador colabora. Sem "forwards" justamente para o transform declarado prevalecer
   ao fim. Não troque essa ordem: sem o transform, o item aberto ficaria com a seta
   apontando para o lado — pior do que a troca seca que existia antes. */
#faq .faqContainer .faqTexto details[open] summary::before {
  content: "▸";                       /* mesmo glifo dos dois lados */
  transform: rotate(90deg);           /* ▸ para a direita vira ▾ para baixo */
  animation: fw-seta-faq .25s ease;   /* o movimento, quando disponível */
}
@keyframes fw-seta-faq {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }   /* ▸ para a direita vira ▾ para baixo */
}

@media (prefers-reduced-motion: reduce) {
  #motos .containerMotos .motosContent .motosBox .botao button:active,
  .fwCtaBtn:active, .fw-btn:active, #contato .clienteAssociado:active { transform: none; }
  /* animation, não transition: é animação que a seta usa desde 02/09 */
  #faq .faqContainer .faqTexto details[open] summary::before { animation: none; transform: rotate(90deg); }
}

/* ============================================================================
   BENEFÍCIOS E GARANTIAS — LISTA DE VERDADE (Victor, 02/09)
   Os itens eram <p> com um "•" digitado dentro. Quando o texto quebrava, a segunda
   linha voltava para x=0 — bem onde estava o bullet — em vez de alinhar sob a primeira
   letra. Medido: 7 dos 12 itens quebram, então mais da metade da lista saía torta.
   Agora é <ul><li>, e o recuo pendente é trabalho do navegador, não de cálculo nosso.
   O marcador vai no azul do site e fica a 12px do texto (antes era um espaço de 9,1px).
============================================================================ */
#sobre .sobreContainer .beneficios .texto .fwLista {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
#sobre .sobreContainer .beneficios .texto .fwLista li {
  position: relative;
  padding-left: 20px;        /* 8px do marcador + 12px de respiro */
  margin-bottom: .6rem;
}
#sobre .sobreContainer .beneficios .texto .fwLista li::before {
  content: "•";
  position: absolute;
  left: 0;
  /* MESMA COR DO TEXTO (Victor, 02/09). Chegou a ficar no azul do site, mas o marcador
     colorido disputava atenção com o conteúdo e quebrava a lista em duas leituras.
     Sem declarar cor, o ::before herda a do <li> — é isso que queremos. */
  font-weight: 700;
}

/* ============================================================================
   ENTRELINHA DOS TEXTOS CORRIDOS (Victor, 02/09)
   As três seções estavam em line-height 1,15 — apertado para texto corrido, e mais
   ainda depois que o peso caiu para 300 na rodada passada: letra fina com linha colada
   é o pior par para leitura. Sobe para 1,45 nas duas larguras.
   Linha LONGA precisa de mais entrelinha, não menos: no desktop o texto de Sobre Nós
   tem 1030px de largura, e é lá que o olho mais se perde ao voltar para a linha seguinte.
============================================================================ */
#sobre .sobreContainer .beneficios .texto,
#sobre .sobreContainer .beneficios .texto li,
#nos .nosContainer .nosTexto,
#nosUseMotos .nosContainer .nosTexto {
  line-height: 1.45;
}

/* ============================================================================
   A EMENDA DE FUNDO DA PRIMEIRA SEÇÃO (Victor, 02/09)
   Não era cor: as duas seções sempre pintaram o mesmo rgb(251,252,255). O que aparecia
   era a SOMBRA DO CARD sendo cortada em linha reta. A sombra tem 12,8px de deslocamento
   e 32px de desfoque — precisa de ~45px para desvanecer — mas a seção tem só 18px de
   base e um "overflow: hidden" que vinha de quando ela recortava listras diagonais.
   Resultado: o degradê da sombra terminava de supetão e lia como emenda de fundo.
   As listras já estão desligadas nesta seção, então o overflow não serve mais para nada.
============================================================================ */
.fwHeroBloco + section.modalFormMobile.fw-secao:not(.is-open) { overflow: visible; }

/* ============================================================================
   RESPIRO DO CARD DO FORMULÁRIO (Victor, 02/09)
   Reclamação: "muito quadrado" e o botão parecia mais um campo, porque tinha
   exatamente a mesma largura das caixas de Nome e Moto (362px, os dois).

   Medidas de antes, no desktop: card 420x400, padding 22/28/14, conteúdo com 362px,
   e folga sobrando dentro do card — 60px na tela mais cheia (contato), 226px na mais
   vazia (escolher moto). O que faltava não era altura: era distribuição.

   Aqui: +40px de altura, laterais mais generosas (28 → 40px, então os campos ficam
   com 340px em vez de 362) e os espaçamentos entre título, texto e campos abertos.

   O BOTÃO passa a ter 240px CENTRALIZADO, em vez de acompanhar a largura dos campos.
   240px é a largura do botão das faixas azuis (216px) mais uma folga, para caber o
   texto mais longo das outras telas ("Ir para o site da Yamaha") sem quebrar linha.
   Vale para .fw-btn e .fw-btn-link juntos: eles PRECISAM ter a mesma largura, senão
   volta a discrepância entre telas que consertamos em 27/08.
============================================================================ */
@media (min-width: 481px) {
  .fw { min-height: 440px; padding: 2.8rem 4rem 2rem; }
  .fw-title { margin-bottom: 1.4rem; }
  .fw-sub { margin-bottom: 2.8rem; }
  .fw-field { margin-bottom: 1.8rem; }
  /* 2.8rem contra os 1.8rem entre campos: a diferença é o que diz que o botão
     pertence a outra categoria de elemento, não à lista de coisas a preencher. */
  .fw-btn { margin-top: 2.8rem; }
  .fw-hint { margin-top: 1.8rem; }
}

/* Botão estreito e centralizado — nas DUAS larguras (Victor, 02/09).
   No mobile o card tem 342px e o conteúdo 298px, então 240px ainda deixa 29px de cada
   lado. A altura do card no celular NÃO muda: a tela já é curta e crescer ali comeria
   o pouco espaço que existe (recomendação minha, aceita pelo Victor). */
.fw-btn,
.fw-btn-link {
  width: 240px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* na tela do SAC são 4 ações empilhadas: mantêm a mesma largura, só mais juntas */
.fw-step[data-step="ja_sac"] .fw-btn-link { margin-top: 0.6rem; }

/* ============================================================================
   PLACEHOLDER ALINHADO À ESQUERDA — BUG GLOBAL DO SITE (achado em 02/09)
   O styles-home-min.css traz esta regra:

       … .selectContainer select option, …, input::placeholder { text-align: end }

   Repare no fim da lista: "input::placeholder" está SOLTO, sem escopo nenhum. Alguém
   emendou na lista que era só para as <option> do select, e com isso o placeholder de
   TODOS os campos do site passou a ficar alinhado à direita — o que ninguém espera num
   campo de texto e faz a dica parecer valor já preenchido.

   Do mesmo tipo: "input:not(:focus):invalid { text-align: end; color: #962e2e }" —
   qualquer campo obrigatório ainda vazio nasce vermelho e alinhado à direita.

   As duas voltam ao normal aqui. Foi decisão do Victor corrigir no site inteiro, não
   só dentro do formulário.
============================================================================ */
input::placeholder,
textarea::placeholder { text-align: left; }
input:not(:focus):invalid { text-align: left; }

/* Os <strong> dentro do card herdavam "bolder" e, vindo de um pai em 700, resolviam
   para 900 — peso que a Open Sans não tem e que o navegador aproximava para 700 de
   qualquer jeito. Declarado explicitamente para o código dizer o que de fato acontece
   e para nenhum peso ficar sendo pedido sem existir. */
.fw strong, .fw-sub strong { font-weight: 700; }

/* Subtítulo do banner: entrelinha 1,15 -> 1,45 (Victor, 02/09).
   Mesmo aperto das outras seções, e aqui pesa mais: o texto está em peso 300 sobre
   foto, onde a leitura já é mais difícil. Duas linhas, então o banner cresce ~7px. */
#hero .bannerTexto h4 { line-height: 1.45; }

/* CORREÇÃO (02/09): ao virar <li>, os itens perderam a regra do site
   "#sobre .sobreContainer * .texto p { font-size: 2rem }", que só casava com <p>.
   Resultado: no mobile a lista caiu para 12,8px enquanto Sobre Nós e Sobre o Consórcio
   ficaram em 16px — o Victor notou a diferença na tela. Aqui o <li> recebe o mesmo
   tamanho que o <p> tinha, para as três seções voltarem a falar no mesmo tom. */
@media (max-width: 880px) {
  #sobre .sobreContainer .beneficios .texto .fwLista li { font-size: 2rem; }
}

/* subtítulo do banner: 300 -> 400. Texto branco fino sobre foto é o pior caso de
   legibilidade do site; a entrelinha subiu antes, o peso fecha o ajuste. */
#hero .bannerTexto h4 { font-weight: 400; }

/* mesmo respiro no mobile, em pixel (lá o :root é 8px e 2.8rem sairia 22px) */
@media (max-width: 480px) {
  .fw-btn { margin-top: 28px; }
}

/* ============================================================================
   SINO: BALANÇO AO CHEGAR NOTIFICAÇÃO (Victor, 02/09)
   Antes a mensagem entrava no painel fechado e ninguém percebia. O sino agora balança
   por 600ms e a bolinha vermelha dá um pulo — só o suficiente para o canto do olho pegar.
============================================================================ */
.fwSinoBalanca img { animation: fw-sino-balanca .6s ease; transform-origin: 50% 10%; }
@keyframes fw-sino-balanca {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.fwSinoBalanca .bellNotificationNumber { animation: fw-sino-badge .45s ease; }
@keyframes fw-sino-badge {
  0% { transform: translateY(-1.8rem) scale(.4); opacity: 0; }
  60% { transform: translateY(-1.8rem) scale(1.25); opacity: 1; }
  100% { transform: translateY(-1.8rem) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fwSinoBalanca img, .fwSinoBalanca .bellNotificationNumber { animation: none; }
}

/* ============================================================================
   TÍTULO DAS INTERNAS MAIS PARA BAIXO (Victor, 02/09)
   Estava a "bottom: 10rem", que rende 80px no mobile e 100px no desktop — o rem de novo
   entregando medidas diferentes. Vai para 40px e 48px, em PIXEL.
   Além de aproximar da faixa azul, a descida ganha CONTRASTE de graça: a imagem tem um
   degradê preto que é mais forte na base, então o texto passa a cair sobre a área escura.
============================================================================ */
#heroMoto .bannerMoto .bannerMotoTexto { bottom: 48px; }
@media (max-width: 880px) {
  #heroMoto .bannerMoto .bannerMotoTexto { bottom: 40px; }
}

/* ============================================================================
   BANNER DA HOME SEM O SUBTÍTULO (Victor, 02/09)
   O h4 "Quer comprar sua moto... Fale com nossa equipe" saiu do HTML: a faixa azul
   logo abaixo passou a carregar o CTA forte e a frase virou repetição.
   Com ele fora, o h1 desce de ~27% para ~36% da altura do banner — sai da faixa onde a
   arte é mais clara e ganha o terço central, sem invadir a área das motos.
   As regras de entrelinha e peso do h4 ficam no arquivo mas sem alvo; não removi para
   não quebrar a náutica, que usa o mesmo seletor caso um dia ganhe subtítulo. */
#hero .bannerTexto { padding-top: 150px; }
/* (o valor mobile vive na regra com !important, mais acima no arquivo) */

/* ============================================================================
   BOLINHAS DO CARROSSEL (Victor, 02/09)
   Ficavam a 12px do card e 8px da borda — coladas, parecendo parte do depoimento.
   Vão para 28px do card e 12px da borda: viram controle independente.
============================================================================ */
/* NAO usar padding-bottom aqui: o site aplica box-sizing:border-box, entao o padding
   COME a area util dos 58rem de altura e a paginacao subia por cima do card -- medido,
   ficou 14px SOBREPOSTA. O certo e crescer a altura.
   Conta: hoje sobram 29px abaixo do card. Para 28px de folga ate as bolinhas + 9px de
   altura delas + 12px ate a borda, sao necessarios 49px -> +20px de altura. */
@media (max-width: 880px) {
  #clientesMobile .swiper { height: 506px; padding-bottom: 0; }
  /* 528 e nao 484: o .swiper-slide centraliza o card, entao METADE de cada pixel
     adicionado vai para cima. Para 22px a mais embaixo, precisa de 44px no total. */
  #clientesMobile .swiper-pagination { bottom: 12px; }
}
@media (min-width: 881px) {
  #clientesMobile .swiper-pagination { bottom: 12px; }
}

/* ============================================================================
   RESPIRO ANTES DE "BENEFÍCIOS E GARANTIAS" (Victor, 02/09)
   O título começava a 24px do topo da seção, enquanto o espaço entre ele e a lista era
   de 32px — ou seja, mais colado no topo do que no próprio conteúdo, o que inverte a
   hierarquia e faz a seção parecer que começou no meio. Vai para 56px.
============================================================================ */
#sobre .sobreContainer { padding-top: 56px; }

/* ============================================================================
   BLOCO DE PREÇOS DAS INTERNAS (Victor, 03/09)

   O "R$" ESTAVA SE SEPARANDO DO VALOR — o defeito mais grave desta rodada, e ele
   acontecia nas 21 motos, não só na Factor. Medido: o valor precisa de 157px (128 do
   número mais largo + 29 do "R$ ") e tinha entre 138 e 154px. Faltavam de 3 a 19px.
   A troca para Open Sans foi o gatilho: ela é mais larga em número que a Roboto, e o
   "R$" vive num <span> separado por espaço normal — é ali que a linha quebrava.

   Duas travas, porque uma só não basta:
     · white-space: nowrap garante que NUNCA quebre, hoje ou com valores maiores;
     · mais largura garante que o nowrap não empurre nada para fora da caixa.

   LARGURA: .conteudo vai de 350 para 400px. Havia 300px sobrando no container (1080
   de largura para imagem 400 + intervalo 30 + conteúdo 350), então os 50px saem de
   espaço que já estava vazio.

   TÍTULOS: com 400px e o padding interno de 30 para 24px, o título ganha 352px úteis.
   Medi o que cada nome precisa a 40px: o mais longo é CROSSER 150 S ABS com 331px.
   Ou seja, os 21 nomes passam a caber em UMA linha, sem ninguém encolher.
   Antes só 9 cabiam.
============================================================================ */
@media (min-width: 881px) {
  body[class*="moto-"] #motos .containerMotos .conteudo { width: 400px; }
  body[class*="moto-"] #motos .containerMotos .conteudo .titulo { padding: 20px 24px 14px; }
}
/* a trava do R$ vale em QUALQUER largura */
body[class*="moto-"] .valorCredito h2 { white-space: nowrap; }

/* A FLUO tinha exceção antiga (30px + nowrap) porque o nome não cabia. Com 352px úteis
   ela cabe a 40px como as outras 20 — o título dela era 25% menor que o das demais. */
body.moto-fluo-abs #motos .containerMotos .conteudo .titulo h2 { font-size: 4rem; }

/* MOBILE: o bloco tem 280px e está no limite. O valor precisava de ~125px e tinha 94px.
   Em vez de alargar o bloco (não há espaço) ou encolher a fonte, o rótulo à esquerda
   cede largura — ele cabe em menos do que ocupava. */
@media (max-width: 880px) {
  body[class*="moto-"] #motos .containerMotos .conteudo .credito .rotulo { flex: 0 1 auto; max-width: 46%; }
  body[class*="moto-"] #motos .containerMotos .conteudo .credito .valorCredito { flex: 1 0 auto; }
}

/* FOTO CENTRALIZADA COM O BLOCO DE INFORMAÇÃO (Victor, 03/09)
   O container já usa align-items:center, mas centralizava contra o .conteudo INTEIRO —
   incluindo o botão COMPRAR AGORA, que fica embaixo. Resultado medido: a foto ficava
   69px abaixo do centro do bloco título→valor do crédito.
   69px é exatamente metade do bloco do botão (103px de altura + 35px de margem = 138).
   A margem falsa abaixo da imagem tira o botão da conta da centralização. */
@media (min-width: 881px) {
  body[class*="moto-"] #motos .containerMotos .imagem { margin-bottom: 138px; }
}

/* ============================================================================
   SEÇÃO DE CORES: SEM SALTO AO TROCAR (Victor, 03/09)
   As imagens de cor são loading="lazy" E display:none, e não têm width/height. Medido
   na Crosser: cor01 carregada (600x400), cor02 com complete:false e 0x0. Ao clicar em
   outra cor, a nova imagem entra com altura ZERO, o container cai de 467px para nada,
   a lista de cores sobe — e volta quando a imagem termina de baixar.
   aspect-ratio reserva o espaço pela PROPORÇÃO, então acompanha qualquer largura de
   tela sem eu fixar altura em pixel. O pré-carregamento (anima.js) mata o vazio.
============================================================================ */
#cores .imagesCores { aspect-ratio: 3 / 2; }
#cores .imagesCores img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================================
   BANNER: SEM A FOLGA DE 40px E COM O TÍTULO MAIS ALTO (Victor, 03/09)
   A folga abaixo da faixa azul, criada em 29/08 para espiar a seção seguinte, deixou o
   banner pequeno demais no julgamento do Victor. Removida: banner + faixa voltam a
   preencher a tela inteira.
   O h1 sobe de 33% para ~28% da altura no desktop e de 36% para ~31% no mobile, e o
   bloco fica mais estreito para as três linhas ficarem parecidas — hoje eram
   460/468/118px, com "YAMAHA" sozinha embaixo.
============================================================================ */
.fwHeroBloco { height: 100vh; }
@supports (height: 100svh) { .fwHeroBloco { height: 100svh; } }

#hero .bannerTexto { padding-top: 118px; }
/* o limite tem que ir no PROPRIO h1: ele carrega "max-width: 55rem" desde a rodada
   de 28/08, e um max-width no bloco pai nao encurta a linha do filho.
   405px faz a quebra virar 3 linhas parecidas -- era 460/468/118, com "YAMAHA"
   sozinha embaixo. Vira a mesma estrutura que o mobile ja usa.
   O valor sai de medicao: as tres linhas desejadas pedem no minimo 376px (a maior delas,
   "PAGAR JUROS ATRAVES DO") e no maximo 434px -- acima disso "PAGAR" sobe para a
   primeira linha e a quebra volta a ser a antiga. 405px fica no meio da faixa. */
#hero .bannerTexto h1 { max-width: 405px; }
@media (max-width: 880px) {
  #hero .bannerTexto { padding-top: 118px !important; max-width: 90%; }
}

/* CORREÇÃO (03/09): a regra "#motos .containerMotos h2 { width: 80% }", escrita para o
   título da seção de motos na HOME, também alcançava o h2 do nome da moto nas INTERNAS
   — as duas páginas têm "#motos .containerMotos". Resultado: o título das internas
   ficava com 282px em vez dos 352px disponíveis, e nomes longos quebravam à toa.
   Aqui o h2 das internas recupera a largura inteira. A regra da home fica intacta. */
body[class*="moto-"] #motos .containerMotos .conteudo .titulo h2 { width: 100%; }

/* MESMA REGRA, SEGUNDO ESTRAGO (Victor, 03/09).
   Alem do "width: 80%", aquela regra da home tambem manda "margin-top: 2rem" — e ela
   alcanca TODO h2 dentro de "#motos .containerMotos", o que inclui o h2 do VALOR DO
   CREDITO nas internas. Resultado medido: o numero descia 10px (metade dos 20px de
   margem) e ficava desalinhado do rotulo "VALOR DO CREDITO:" ao lado, parecendo
   alinhado por baixo. O flex ja centralizava certo — quem quebrava era a margem.
   Zerada aqui: desalinho entre os centros passa a ser 0px.
   Nao mexi no rotulo: ele fica em duas linhas de proposito, para acompanhar o de cima
   ("Parcelas do Consorcio Yamaha a partir de:"), que usa quatro. */
body[class*="moto-"] #motos .containerMotos .conteudo .credito .valorCredito h2 { margin-top: 0; }