/* Rodapé compartilhado (V1, V2, V4): campo azul, colunas leves e a paisagem em gravura embaixo.
   Cada versão define --foot-blue e as fontes; o resto vem daqui. */
.sfoot {
  --foot-bg: var(--foot-blue, #274c77);
  --foot-ink: #f4f4f9;
  --foot-soft: rgba(244, 244, 249, 0.74);
  position: relative;
  overflow: hidden;
  background: var(--foot-bg);
  color: var(--foot-ink);
  padding: clamp(88px, 9vw, 140px) 0 0;
}
.sfoot a { color: inherit; }
.sfoot__in { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.15fr; gap: 48px; padding: 0 var(--m, 48px); }
.sfoot__logo { display: block; width: 148px; height: auto; fill: currentColor; }
.sfoot__tag { margin: 26px 0 0; max-width: 26ch; font-size: 1.125rem; line-height: 1.45; color: var(--foot-soft); }
.sfoot__contact { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 8px; font-size: 1rem; }
.sfoot__contact a { text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color 400ms, text-underline-offset 400ms; }
.sfoot__contact a:hover { text-decoration-color: currentColor; text-underline-offset: 4px; }
.sfoot__h { margin: 4px 0 20px; font-size: 0.9375rem; font-weight: 500; color: var(--foot-soft); }
.sfoot__col a { display: block; width: fit-content; padding: 5px 0; font-size: 1.0625rem; text-decoration: none; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.sfoot__col a:hover { transform: translateX(6px); }
.sfoot__cta p { margin: 0; max-width: 30ch; font-size: 1.0625rem; line-height: 1.5; }
.sfoot .sfoot__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; margin-top: 24px; padding: 0 24px; border-radius: 999px; background: var(--foot-ink); color: var(--foot-bg) !important; font-weight: 500; text-decoration: none; transition: transform 400ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.sfoot .sfoot__btn:hover { transform: translateY(-2px); }
.sfoot__btn:active { transform: scale(0.97); }
.sfoot__btn span { transition: transform 400ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.sfoot__btn:hover span { transform: translateX(4px); }
.sfoot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: clamp(56px, 6vw, 88px) var(--m, 48px) 0; font-size: 0.875rem; color: var(--foot-soft); }

/* A paisagem */
.horizonte { --h-ink: var(--foot-bg); --h-paper: #f2efe8; position: relative; height: clamp(220px, 31vw, 520px); margin-top: clamp(16px, 3vw, 40px); }
.horizonte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .horizonte canvas { opacity: 0; transform: translateY(calc(48px - var(--li) * 10px)); transition: opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1), transform 2200ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--li) * 220ms); }
  .js .horizonte.is-in canvas { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .sfoot__in { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .sfoot__brand, .sfoot__cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sfoot__in { grid-template-columns: 1fr; }
  .horizonte { height: 240px; }
}