/* Faixa de confiança, Como funciona, Dúvidas, Fechamento, Rodapé e barra fixa */

/* 6.2 faixa: linha com rolagem lateral; com JS e movimento liberado ela desliza sem parar */
.faixa { background: var(--fundo-claro); }
.faixa__trilho {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 14px max(var(--margem), (100% - var(--largura)) / 2);
}
.faixa__trilho::-webkit-scrollbar { display: none; }
.faixa__trilho li {
  flex: none;
  padding: 8px 14px; border-radius: 99px;
  background: var(--branco); border: 1px solid #c5e6f3;
  color: var(--marinho); font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.faixa__trilho li::before { content: "✓"; content: "✓" / ""; margin-right: 6px; color: #0a7d96; font-weight: 800; }

/* pausa da faixa (WCAG 2.2.2): só aparece quando ela anda sozinha (bloco de movimento abaixo);
   fica no meio da linha dos itens, acima da onda de 32 px. aria-pressed="true" = parada */
.faixa { position: relative; }
.faixa__pausa {
  display: none; place-items: center;
  position: absolute; top: 0; bottom: 32px; right: max(var(--margem), (100% - var(--largura)) / 2);
  width: 44px; height: 44px; margin-block: auto; padding: 0;
  border: 1px solid #c5e6f3; border-radius: 50%;
  background: var(--branco); color: var(--marinho);
  transition: transform .15s var(--ease);
}
.faixa__pausa svg { width: 18px; height: 18px; }
.faixa__pausa-pausar { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.faixa__pausa-tocar { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.faixa__pausa[aria-pressed="true"] .faixa__pausa-pausar,
.faixa__pausa:not([aria-pressed="true"]) .faixa__pausa-tocar { display: none; }

/* a onda da marca como divisória */
.faixa__onda { position: relative; height: 32px; overflow: hidden; }
.faixa__onda svg { position: absolute; left: 0; top: 0; width: 200%; max-width: none; height: 100%; }
.faixa__onda path { fill: none; stroke: var(--ciano); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.faixa__onda svg + svg { opacity: .75; }
.faixa__onda svg + svg path { stroke: var(--agua); stroke-width: 2.5; }

/* 6.5 como funciona: cada passo desenha o trecho de linha do seu número até o próximo,
   então a linha termina no centro do último número sobre qualquer fundo */
.como h2 { margin-bottom: 28px; }
.passo { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding-bottom: 28px; }
.passo:last-child { padding-bottom: 0; }
.passo:not(:last-child)::before,
.passo:not(:last-child)::after {
  content: ""; position: absolute; left: 19.5px; top: 21px; bottom: -21px; width: 3px; border-radius: 3px;
  background: var(--linha);
}
/* o preenchimento: inteiro sem JS; com JS acompanha a rolagem (--p, de js/rolagem.js) */
.passo:not(:last-child)::after { background: var(--ciano); transform: scaleY(var(--p, 1)); transform-origin: top; }
/* número apagado em ciano claro (o verde-água fica só para o botão); aceso, enche de verde-água */
.passo__num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--ciano); background: #e1fafe; color: var(--marinho);
  font-size: 1.0625rem; font-weight: 800;
}
.passo__texto { padding-top: 8px; }
.passo h3 { font-size: 1.125rem; line-height: 1.3; }
.passo p { margin-top: 4px; color: var(--texto-suave); }

/* 6.6 dúvidas: sanfona com o truque de grid-template-rows; sem JS as respostas ficam abertas.
   O estado aberto fica no item (faq__item--aberta), porque o h3 separa o botão da resposta */
.duvidas { background: var(--fundo-claro); }
.duvidas h2 { margin-bottom: 16px; }
.faq { border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
/* cada pergunta é um h3 (navegação por títulos); o h3 não muda a cara do botão */
.faq__titulo { font: inherit; text-wrap: inherit; }
.faq__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 0;
  border: 0; border-radius: 8px; background: none;
  color: var(--marinho); font-size: 1.0625rem; font-weight: 600; text-align: left;
  transition: transform .15s var(--ease);
}
.faq__icone { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--branco); }
.faq__icone::before, .faq__icone::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--marinho);
}
.faq__icone::after { transform: rotate(90deg); }
/* aberta, o "+" gira e vira "×" */
.faq__pergunta[aria-expanded="true"] .faq__icone { transform: rotate(135deg); background: var(--ciano); }
.faq__resposta { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.faq__item--aberta .faq__resposta { grid-template-rows: 1fr; visibility: visible; }
.faq__resposta > div { min-height: 0; overflow: hidden; }
.faq__resposta p { padding: 0 44px 18px 0; color: var(--texto-suave); }
/* as transições só ligam depois que o JS fecha as respostas, para elas fecharem sem animar */
.faq--pronta .faq__icone { transition: transform .2s var(--ease); }
.faq--pronta .faq__resposta { transition: grid-template-rows .3s var(--ease), visibility 0s .3s; }
.faq--pronta .faq__item--aberta .faq__resposta { transition: grid-template-rows .3s var(--ease), visibility 0s; }

/* 6.7 fechamento */
.fechamento {
  padding-block: 56px;
  background: linear-gradient(160deg, var(--marinho) 40%, #004a99);
  color: var(--branco); text-align: center;
}
.fechamento h2 { color: var(--branco); }
.fechamento__apoio { margin-top: 10px; color: rgba(255, 255, 255, .85); font-size: 1.0625rem; }
.fechamento .btn { margin: 24px auto 0; max-width: 420px; }

/* 6.8 rodapé */
.rodape { padding-block: 40px; background: #001f47; color: #b9cbe3; font-size: .875rem; }
.rodape__logo { width: auto; height: 40px; margin-bottom: 16px; }
.rodape__dados p + p { margin-top: 4px; }
.rodape__links { display: flex; flex-wrap: wrap; column-gap: 20px; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--branco); font-weight: 600; text-underline-offset: 3px; }
.rodape__dados .rodape__links { margin-top: 8px; }

/* barra fixa do WhatsApp: sobe quando o botão da abertura sai da tela (js/rolagem.js).
   Escondida, sai também do foco e do toque. O fim da página reserva a altura medida dela (--barra). */
body { padding-bottom: var(--barra, 0px); }
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 -10px 24px -14px rgba(0, 48, 107, .45);
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, 1, 1), visibility 0s .3s;
}
.barra-fixa--visivel { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.barra-fixa .btn { max-width: 480px; margin-inline: auto; padding-inline: 12px; gap: 8px; font-size: 1rem; }

/* movimento: loops e estados escondidos só existem aqui, e os escondidos só com JS (classe .js no html) */
@media (prefers-reduced-motion: no-preference) {
  /* faixa: três cópias da lista andam uma cópia por volta; a onda corre por baixo.
     A margem lateral sai do padding (que entraria na conta do -33,33%) e vira margin, sem tirar os itens do lugar */
  .js .faixa { overflow: hidden; }
  .js .faixa__trilho {
    width: max-content; overflow: visible; gap: 0;
    padding-inline: 0; margin-left: max(var(--margem), (100% - var(--largura)) / 2);
    animation: faixa 20s linear infinite;
  }
  .js .faixa__trilho li { margin-right: 8px; }
  .js .faixa__onda svg { animation: onda 12s linear infinite; }
  .js .faixa__onda svg + svg { animation-duration: 18s; animation-direction: reverse; }
  .js .faixa__pausa { display: grid; }
  /* pausa ao toque, sob o mouse, pelo botão (com as ondas) e fora da tela */
  .faixa--tocada .faixa__trilho,
  .faixa--parada .faixa__trilho,
  .faixa--parada .faixa__onda svg,
  .faixa.pausada .faixa__trilho,
  .faixa.pausada .faixa__onda svg { animation-play-state: paused; }
  @media (hover: hover) {
    .faixa:hover .faixa__trilho { animation-play-state: paused; }
  }

  /* revelações: entram ao aparecer na tela (classe .visivel, atraso --d) */
  .js [data-revelar]:not(.passo):not(.visivel),
  .js .passo:not(.visivel) > * { opacity: 0; }
  [data-revelar].visivel:not(.passo) { animation: revelar .5s var(--ease) var(--d, 0s) backwards; }
  .passo.visivel .passo__num { animation: passo-num .45s var(--ease) var(--d, 0s) backwards; }
  .passo.visivel .passo__texto { animation: passo-texto .5s var(--ease) calc(var(--d, 0s) + 90ms) backwards; }

  /* número aceso: o verde-água cresce de dentro do círculo */
  .passo__num::before {
    content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 50%;
    background: var(--agua); opacity: 0; transform: scale(.4);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }
  .passo--aceso .passo__num::before { opacity: 1; transform: none; }

  /* resposta que abre aparece de leve */
  .faq--pronta .faq__resposta p { opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
  .faq--pronta .faq__item--aberta .faq__resposta p { opacity: 1; transform: none; transition-delay: .08s; }

  /* o botão do fechamento pulsa uma única vez, logo depois de entrar */
  .fechamento .btn { position: relative; }
  .fechamento .btn::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    border: 2px solid var(--agua); opacity: 0;
  }
  .fechamento .btn.visivel { animation: revelar .5s var(--ease) var(--d, 0s) backwards, pulsar .6s var(--ease) calc(var(--d, 0s) + .55s); }
  .fechamento .btn.visivel::after { animation: anel 1s var(--ease) calc(var(--d, 0s) + .55s); }

  @keyframes faixa { to { transform: translateX(-33.3333%); } }
  @keyframes onda { to { transform: translateX(-50%); } }
  @keyframes revelar { from { opacity: 0; transform: translateY(16px); } }
  @keyframes passo-num { from { opacity: 0; transform: scale(.5); } }
  @keyframes passo-texto { from { opacity: 0; transform: translateX(18px); } }
  @keyframes pulsar { 40% { transform: scale(1.04); } }
  @keyframes anel {
    from { opacity: .75; }
    to { opacity: 0; transform: scale(1.08, 1.45); }
  }
}

/* com "reduzir movimento" ligado no meio da visita, as cópias da faixa somem e ela volta a ser uma linha */
@media (prefers-reduced-motion: reduce) {
  .faixa__trilho [aria-hidden] { display: none; }
}

@media (min-width: 768px) {
  .fechamento { padding-block: 88px; }
  .rodape__dados { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
}