/* ================================================================
   VORA — ETAPA 19 | Paleta institucional no footer
   Black Blue como base, White Blue nos textos e Palatinate Blue
   como acento no botão, selo e elementos interativos.
   ================================================================ */
.hi-footer {
  --footer-blue: #2A3EF4;
  --footer-ink: #E4E5F2;
  --footer-dark: #0E0F28;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--footer-dark);
  color: var(--footer-ink);
  font-family: var(--font-ui);
}
body.is-loading .hi-footer { visibility: hidden; }
.hi-footer *, .hi-footer *::before, .hi-footer *::after { box-sizing: border-box; }
.hi-footer a { color: inherit; }
.hi-footer__top {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.55fr .65fr .65fr auto;
  align-items: start;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(44px, 4.5vw, 70px) var(--space-edge) clamp(18px, 2vw, 30px);
}
.hi-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hi-footer__kicker { margin: 0; font: 400 clamp(16px,1.55vw,21px)/1.25 var(--font-display); letter-spacing: .015em; text-transform: uppercase; }
.hi-footer__pill {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 12px 19px; border: 1px solid transparent; border-radius: 100px;
  background: var(--footer-blue); color: var(--footer-ink) !important;
  font: 600 clamp(11px,.9vw,13px)/1.2 var(--font-ui);
  letter-spacing: .105em; text-decoration: none; white-space: nowrap;
  transition: background .3s ease;
}
.hi-footer__pill:hover { background: #4556FA; }
.hi-footer__link, .hi-footer__back {
  font: 400 clamp(16px, 1.4vw, 20px)/1.25 var(--font-display);
  letter-spacing: .025em; text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.hi-footer__link { justify-self: center; padding: 3px 0; }
.hi-footer__back {
  display: inline-flex; align-items: center; gap: 12px; justify-self: end;
  border: 0; background: none; padding: 0;
  color: var(--footer-ink); cursor: pointer;
}
.hi-footer__backIcon {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--footer-blue); color: var(--footer-ink);
  transition: transform .5s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.hi-footer__back:hover .hi-footer__backIcon { transform: translateY(-3px); background: #4556FA; }
.hi-footer__backText { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.hi-footer__back:hover .hi-footer__backText { transform: translateX(4px); }
.hi-flip { position: relative; display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.hi-front, .hi-back { display: block; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .36s ease; }
.hi-front { transform: translateY(0); opacity: 1; }
.hi-back { position: absolute; left:0; top:0; transform: translateY(105%); opacity: 0; }
.hi-footer__pill:hover .hi-front, .hi-footer__link:hover .hi-front,
.hi-footer__pill:focus-visible .hi-front, .hi-footer__link:focus-visible .hi-front { transform: translateY(-105%); opacity: 0; }
.hi-footer__pill:hover .hi-back, .hi-footer__link:hover .hi-back,
.hi-footer__pill:focus-visible .hi-back, .hi-footer__link:focus-visible .hi-back { transform: translateY(0); opacity: 1; }

/* Faixas com duas cópias IGUAIS: laço visual sem salto. */
.hi-footer__stage {
  position: relative;
  height: clamp(348px, 30vw, 475px);
  overflow: hidden;
}
.hi-footer__marquee {
  position: absolute; inset-inline: 0; overflow: hidden;
  pointer-events: none; z-index: 1;
}
.hi-footer__marquee--top { top: 17%; }
.hi-footer__marquee--bottom { bottom: 17%; }
.hi-footer__track {
  display: flex; width: max-content; white-space: nowrap;
  will-change: transform;
}
.hi-footer__marquee-group {
  display: flex; flex: 0 0 auto; align-items: center;
  gap: clamp(20px, 2.4vw, 40px); padding-right: clamp(20px, 2.4vw, 40px);
  font: 400 clamp(96px, 9.6vw, 160px)/1 var(--font-display);
  letter-spacing: -.035em;
}
.hi-footer__marquee-group span { display: block; }
.hi-footer__track--right { animation: voraFooterRight 37s linear infinite; }
.hi-footer__track--left { animation: voraFooterLeft 40s linear infinite; }
@keyframes voraFooterLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes voraFooterRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Selo fixo central, com apenas a legenda circular girando.
   A seta e o centro não giram junto com os caracteres. */
.hi-footer__circle {
  position: absolute; z-index: 3;
  width: clamp(188px, 13.8vw, 224px); aspect-ratio: 1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  background: var(--footer-blue);
  border: 1.5px solid var(--footer-ink);
  color: var(--footer-ink);
  transition: transform .48s cubic-bezier(.22,1,.36,1);
}
.hi-footer__ring {
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%;
  animation: voraFooterSpin 28s linear infinite;
  transform-origin: 50% 50%; pointer-events: none;
}
.hi-footer__ringText {
  fill: var(--footer-ink); font: 600 10px/1 var(--font-ui);
  letter-spacing: 1.45px; text-transform: uppercase;
}
@keyframes voraFooterSpin { to { transform: rotate(360deg); } }
.hi-footer__circleCore {
  position: relative; z-index: 3;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 0;
}
.hi-footer__circleArrow { width: 31px; height: 31px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.hi-footer__circle:hover { transform: translate(-50%, -50%) scale(1.025); }
.hi-footer__circle:hover .hi-footer__circleArrow { transform: translate(3px,-3px); }
.hi-footer__circle:focus-visible, .hi-footer a:focus-visible, .hi-footer button:focus-visible { outline: 2px solid var(--footer-ink); outline-offset: 4px; }

/* Assinatura pequena, sem competir com a composição cinética. */
.hi-footer__signature {
  display: block; width: fit-content; max-width: 95%;
  margin: 0 auto;
  padding: 0 10px;
  font: 400 clamp(34px, 3.35vw, 54px)/1.1 var(--font-display);
  letter-spacing: -.045em; text-align: center; text-decoration: none;
}
.hi-footer__signature-dot { color: var(--footer-blue); }
.hi-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px var(--space-edge) 26px;
  font: 400 11px/1.4 var(--font-ui); letter-spacing: .07em; text-transform: uppercase;
  opacity: .9;
}

/* Vidro discreto por seção; sobre o footer escuro, vidro Black Blue. */
.site-header.is-scrolled:not(.is-on-projects):not(.is-on-footer) {
  background: rgba(228, 229, 242, .82) !important;
  backdrop-filter: blur(20px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.22) !important;
  box-shadow: 0 1px 0 rgba(14,15,40,.045);
}
.site-header.is-on-projects:not(.is-on-footer) {
  background: rgba(14, 15, 40, .84) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
  box-shadow: 0 1px 0 rgba(228,229,242,.05);
}
.site-header.is-on-footer {
  background: rgba(14, 15, 40, .85) !important;
  backdrop-filter: blur(22px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.24) !important;
  box-shadow: 0 1px 0 rgba(228,229,242,.08);
}
.site-header.is-on-footer .site-header__logo,
.site-header.is-on-footer .site-header__link { color: var(--white-blue); }
.site-header.is-on-footer .site-header__link:hover { color: #7D8BFF; }
body.is-on-footer .language__button { color: #9A9EBF; }
body.is-on-footer .language__button.is-current,
body.is-on-footer .language__button:hover { color: var(--white-blue); }
body.is-on-footer .language__separator { color: #6F749A; }

@media (max-width: 1000px) {
  .hi-footer__top { grid-template-columns: 1fr 1fr; row-gap: 25px; }
  .hi-footer__link { justify-self: start; }
  .hi-footer__back { justify-self: end; }
}
@media (max-width: 760px) {
  .hi-footer__top { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 42px 20px 16px; }
  .hi-footer__col { align-items: center; text-align: center; gap: 13px; }
  .hi-footer__kicker { font-size: 17px; }
  .hi-footer__link { font-size: 17px; }
  .hi-footer__back { font-size: 16px; margin: 3px auto 0; }
  .hi-footer__stage { height: 322px; }
  .hi-footer__marquee--top { top: 18%; }
  .hi-footer__marquee--bottom { bottom: 18%; }
  .hi-footer__marquee-group { font-size: 78px; gap: 24px; padding-right: 24px; }
  .hi-footer__circle { width: 174px; }
  .hi-footer__signature { font-size: clamp(31px, 8vw, 42px); margin-top: 0; }
  .hi-footer__bottom { flex-direction: column; gap: 9px; text-align: center; padding: 20px 20px 27px; }
  .site-header.is-on-footer .site-header__toggle { color: var(--black-blue); background: var(--white-blue); }
}
@media (max-width: 390px) {
  .hi-footer__stage { height: 296px; }
  .hi-footer__marquee-group { font-size: 65px; }
  .hi-footer__circle { width: 162px; }
  .hi-footer__signature { font-size: 34px; }
}
/* O painel do menu mobile deve vencer o vidro do header. */
body.menu-is-open .site-header,
body.menu-is-open .site-header.is-scrolled,
body.menu-is-open .site-header.is-on-projects,
body.menu-is-open .site-header.is-on-footer,
body.menu-is-open .site-header.is-on-light-hero {
  background: var(--black-blue) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
body.menu-is-open .site-header__logo { color: var(--white-blue) !important; }
body.menu-is-open .language__button.is-current { color: var(--white-blue) !important; }
@media (prefers-reduced-motion: reduce) {
  .hi-footer__track, .hi-footer__ring { animation: none !important; will-change: auto; }
  .hi-front, .hi-back, .hi-footer__backIcon, .hi-footer__backText,
  .hi-footer__circle, .hi-footer__circleCore, .hi-footer__circleArrow { transition: none !important; }
}

/* Etapa 18 — frases inteiras nas duas faixas, com repetição sem cortes. */
.hi-footer__marquee-group {
  gap: 0;
  padding-right: clamp(40px, 6vw, 110px);
  font-size: clamp(62px, 6.4vw, 113px);
  letter-spacing: -.018em;
}
@media (max-width: 760px) {
  .hi-footer__marquee-group {
    font-size: clamp(46px, 10.8vw, 72px);
    padding-right: 34px;
  }
}
@media (max-width: 390px) {
  .hi-footer__marquee-group { font-size: 46px; }
}

/* Etapa 20 — aproxima as frases repetidas nas faixas, sem alterar
   a distância entre as duas linhas nem o passo do loop infinito. */
.hi-footer__marquee-group { padding-right: .12em; }
@media (max-width: 760px) { .hi-footer__marquee-group { padding-right: .11em; } }

/* ETAPA 22 — refina o espaço vertical das duas faixas para aproximá-las
   como na referência, sem mover o círculo do centro da composição. */
.hi-footer__stage {
  --footer-line-size: clamp(68px, 6.4vw, 113px);
  height: clamp(288px, 26vw, 392px);
}
.hi-footer__marquee--top {
  top: calc(50% - var(--footer-line-size) - 6px);
  bottom: auto;
}
.hi-footer__marquee--bottom {
  top: calc(50% + 6px);
  bottom: auto;
}
.hi-footer__marquee-group {
  font-size: var(--footer-line-size);
  line-height: 1;
  padding-right: .12em;
}
/* Contatos do footer: somente os títulos clicáveis, sem subtítulos. */
.hi-footer__top {
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .78fr) minmax(0, 1.18fr) auto;
  column-gap: clamp(18px, 2.5vw, 42px);
}
.hi-footer__link { display: inline-flex; align-items: center; min-width: 0; }
@media (max-width: 1100px) {
  .hi-footer__top { grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); }
  .hi-footer__link { justify-self: start; }
  .hi-footer__back { justify-self: start; }
}
@media (max-width: 760px) {
  .hi-footer__top { display: flex; flex-direction: column; align-items: center; }
  .hi-footer__link { text-align: center; }
  .hi-footer__stage { --footer-line-size: clamp(46px, 10.8vw, 72px); height: 245px; }
  .hi-footer__marquee--top { top: calc(50% - var(--footer-line-size) - 4px); }
  .hi-footer__marquee--bottom { top: calc(50% + 4px); }
}
@media (max-width: 390px) {
  .hi-footer__stage { --footer-line-size: 46px; height: 220px; }
}

/* Etapa 24 — legibilidade do selo circular em telas menores.
   O SVG mantém o mesmo caminho e a frase completa, mas os caracteres
   ficam maiores e menos espaçados, sem ultrapassar a borda do círculo. */
@media (max-width: 760px) {
  .hi-footer__ringText {
    font-size: 15px;
    letter-spacing: .4px;
  }
}

/* Etapa 25: círculo mobile sem espaçamento artificial nos glifos.
   O JavaScript remove textLength em <= 760px e ajusta font-size pela
   circunferência. O desktop permanece com sua composição original. */
@media (max-width: 760px) {
  .hi-footer__ringText { font-size: 19px; letter-spacing: .2px; }
}

/* Etapa 28: ajuste final no texto SVG do selo em telas pequenas.
   A circunferencia e a pequena emenda sao resolvidas no footer.js. */
@media (max-width: 760px) {
  .hi-footer__ringText { font-size: 18px; letter-spacing: 0; }
}

/* ETAPA 30 — No mobile o texto do selo permanece leve, sem negrito. */
@media (max-width: 760px) {
  .hi-footer__ringText {
    font-weight: 400;
    font-family: var(--font-display);
  }
}

/* Estado de menu aberto em TODAS as telas pequenas, inclusive cases com
   header .is-scrolled. A regra com ID prevalece sobre os vidros por seção. */
@media (max-width: 760px) {
  body.menu-is-open #site-header.site-header {
    background: var(--black-blue) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* Assinatura VORA oficial, branca com símbolo, no rodapé de todas as páginas. */
.hi-footer__signature-image {
  display: block;
  width: clamp(152px, 15vw, 205px);
  max-width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .hi-footer__signature-image { width: clamp(144px, 41vw, 172px); }
}