/* Cabeçalho de seção, divisórias, rodapé e barra de WhatsApp do celular (o cabeçalho da página e o menu estão em layout.css). */

/* ---------- Divisória entre seções ----------
   Um filete que nasce e some nas pontas, com um veio azul no meio (--divisoria, em tokens.css), no topo de cada seção depois
   do hero e no topo do rodapé. Substitui as bordas retas que cada seção tinha (demonstração e CTA final). Decorativa:
   pointer-events none, sem efeito no fluxo (absolute). Os pseudo-elementos ::before de .secao só existem aqui. */
.secao:not(.hero)::before,
.rodape::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(var(--container), 100% - var(--pad-x) * 2);
  height: 1px;
  background: var(--divisoria);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------- Cabeçalho de seção ---------- */
.sec-head {
  max-width: 40rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-4);
  color: var(--blue-hi);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

.eyebrow__traco {
  width: 28px;
  height: 1px;
  background: var(--blue);
}

.sec-head .lead {
  margin-top: var(--sp-4);
}

.lead {
  max-width: 52ch;
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* ---------- Rodapé ---------- */
.rodape {
  position: relative;
  padding-block: var(--sp-7) var(--sp-5);
}

.rodape__grade {
  display: grid;
  gap: var(--sp-6);
}

.rodape__logo {
  height: 72px;
  width: auto;
}

.rodape__tag {
  margin-top: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rodape__lista {
  display: grid;
  gap: 0;
}

.rodape__lista a,
.rodape__lista li > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-size: var(--fs-small);
}

/* Links de contato: pílula suave no hover. A margem negativa devolve o recuo, para o texto continuar alinhado à coluna. */
.rodape__contato a {
  margin-left: -14px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.rodape__nota {
  margin-left: 0.5rem;
  color: var(--text);
}

.rodape__lista a:focus-visible {
  outline-offset: -2px;
}

.rodape__copy {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-small);
}

@media (min-width: 768px) {
  .rodape__grade {
    grid-template-columns: 1fr 1fr;
  }

  .rodape__legal {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .rodape {
    padding-block: var(--sp-8) var(--sp-5);
  }

  .rodape__grade {
    grid-template-columns: 5fr 4fr 3fr;
    gap: var(--gutter);
  }

  .rodape__legal {
    grid-column: auto;
  }
}

@media (hover: hover) {
  .rodape__lista a:hover {
    color: var(--white);
  }

  .rodape__contato a:hover {
    background-color: rgba(47, 123, 255, 0.12);
  }
}

/* ---------- Barra fixa do celular (só celular): sticky, último elemento do body, sem fixed ----------
   Nome de classe e de arquivo (wa-bar / js/barra-wa.js) ficaram do desenho original, que abria o WhatsApp; desde
   2026-09-28 o botão rola até a demonstração dentro do site (nenhum CTA de WhatsApp sobra fora do FAQ). Sempre visível ao
   rolar (rodada de 2026-09-26), menos com o menu aberto e com o teclado aberto na demonstração (js/barra-wa.js). Como é o
   ÚLTIMO elemento do body, no fim da página ela assenta abaixo do rodapé e não cobre o copyright.
   O fundo é um degradê que some para cima (o botão "flutua"); o degradê não recebe toque, só o botão. Continua valendo a lição
   do Lucas sobre barra de celular: nada de position: fixed, nada de backdrop-filter, e SEM transform na barra (a entrada e a
   saída são só opacity; num elemento de toque o WebKit pode deixar a região de toque no lugar antigo). */
.wa-bar {
  position: sticky;
  bottom: 0;
  z-index: 60;
  padding: 22px 16px max(12px, min(var(--safe-b), 18px)); /* respiro OU área segura, nunca a soma dos dois */
  background: linear-gradient(to top, rgba(5, 7, 15, 0.94) 42%, rgba(5, 7, 15, 0));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--ease), visibility 0s 0.32s;
}

.wa-bar.is-visivel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.wa-bar .btn {
  width: 100%;
  min-height: 52px;
  pointer-events: auto;
  box-shadow: var(--glow-cta), 0 14px 30px -10px rgba(0, 0, 0, 0.75);
}

@media (min-width: 768px) {
  .wa-bar {
    display: none;
  }
}