/* ==========================================================================
   Seção 10 — Rodapé
   Figma: node 296:5173 (1512 × 896)
   Animação mais sutil que a das outras seções (reveal.js): os blocos
   aparecem com uma leve subida (data-reveal="fade"), a assinatura
   "Iona Szkurnik" sobe de dentro de uma máscara e a divisória do rodapé
   legal se desenha da esquerda para a direita.
   ========================================================================== */

.footer {
  --fp: max(0.6px, calc(100vw / var(--frame)));
  --footer-x: var(--pad); /* margem lateral do site (64px em 1512; Figma: 76) */
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--fp));
  padding: calc(96 * var(--fp)) var(--footer-x) calc(32 * var(--fp));
  overflow: hidden;
  background: var(--c-red);
  color: var(--c-white);
}

:where(.footer) a {
  color: inherit;
  text-decoration: none;
}
.footer a:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 4px;
}

/* ---------- Topo: voltar ao topo ----------
   (o monograma "IS" está transparente no Figma, então fica de fora) */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(48 * var(--fp));
}
/* Com o ícone do menu fixo no canto (desde 09/11/2026), "Voltar ao topo" fica
   à esquerda dele (a largura do ícone + o espaço dos links do header): no fim
   da página, em telas mais baixas, os dois ficavam um sobre o outro */
.js .footer__top {
  padding-right: calc(32px + 24px);
}

.footer__back {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--fp));
  min-height: 44px;
  color: var(--c-lime);
  font-family: var(--font-text);
  font-size: max(14px, calc(15 * var(--fp)));
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Ícones (seta para cima e seta dos links externos) */
.footer__icon {
  flex: none;
}
.footer__icon svg {
  width: 100%;
  height: 100%;
}
.footer__back .footer__icon {
  width: max(16px, calc(18 * var(--fp)));
  height: max(16px, calc(18 * var(--fp)));
}

/* ---------- Conteúdo: frase, e-mail e colunas de links ---------- */
.footer__content {
  display: flex;
  align-items: flex-start;
  gap: calc(48 * var(--fp));
}

.footer__intro {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(28 * var(--fp));
  width: calc(443 * var(--fp));
}

/* Frase, e-mail e links um pouco menores (09/11/2026, a pedido): frase 30 → 24,
   e-mail e links 24 → 20 no frame de 1512 (no tablet e no celular, na mesma
   proporção). A assinatura "Iona Szkurnik" não mudou. */
.footer__phrase {
  margin: 0;
  font-family: var(--font-display);
  font-size: max(18px, calc(24 * var(--fp)));
  font-weight: 300;
  line-height: 1.28;
}

.footer__email {
  font-family: var(--font-display);
  font-size: max(16px, calc(20 * var(--fp)));
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.footer__col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--fp));
  min-width: 0;
}

.footer__label {
  margin: 0;
  color: var(--c-lime);
  font-family: var(--font-text);
  font-size: max(12px, calc(14 * var(--fp)));
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--fp));
  min-height: max(36px, calc(44 * var(--fp)));
  font-family: var(--font-display);
  font-size: max(16px, calc(20 * var(--fp)));
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.footer__links .footer__icon {
  width: max(10px, calc(12 * var(--fp)));
  height: max(10px, calc(12 * var(--fp)));
}
/* Seta dos links externos (10/11/2026, a pedido: era uma seta cheia): o
   mesmo desenho e o mesmo traço da seta das listas (.row__arrow, em
   components.css) e do menu: duas linhas finas, com 1.25px em qualquer
   tamanho */
.footer__links .footer__icon svg {
  overflow: visible;
  stroke: currentColor;
}
.footer__links .footer__icon path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.25px;
}

/* Sublinhado da fonte (e-mail, idioma atual e política de privacidade).
   O hover de todos os links é o dos text buttons: só a opacidade diminui. */
.footer__u {
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

/* ---------- Assinatura ---------- */
.footer__signature {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(208 * var(--fp));
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.05em;
  white-space: nowrap;
  /* Alinhamento óptico: puxa o respiro lateral do "I" (0.088em) para a
     haste ficar na margem de 64px, alinhada aos textos do rodapé */
  margin-left: -0.088em;
}
/* Folga na máscara para a altura das letras (a linha é mais baixa que elas) */
.footer__signature .rv-line-mask {
  padding: 0.14em 0.06em 0.08em 0;
  margin: -0.14em -0.06em -0.08em 0;
}

/* ---------- Legal ---------- */
.footer__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: calc(12 * var(--fp) + 1px); /* + a divisória */
  font-family: var(--font-text);
  font-size: max(13px, calc(14 * var(--fp)));
  font-weight: 400;
  line-height: 1.5;
}
/* Divisória (--rule animada pelo reveal.js) */
.footer__legal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
}
/* Os dois textos (11/11/2026, a pedido): "© 2026 Iona Szkurnik" à esquerda
   e "Todos os direitos reservados." à direita, na altura que o link da
   política de privacidade dava à faixa (44px; 32px no celular) */
.footer__legal p {
  margin: 0;
  padding: calc((44px - 1.5em) / 2) 0;
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Versão clara (página de contato) ----------
   Figma: frame "Contato — Desktop 1512", instância do rodapé (node 556:5166):
   fundo creme, textos em cinza; "Voltar ao topo", rótulos e assinatura em
   vermelho; divisória e textos legais em cinza mais claro. */
.footer--light {
  background: var(--c-cream);
  color: var(--c-text);
}
.footer--light .footer__back,
.footer--light .footer__label,
.footer--light .footer__signature {
  color: var(--c-red);
}
.footer--light .footer__legal {
  color: #6f6969;
}
.footer--light .footer__legal::before {
  background: #8a8484;
}
.footer--light a:focus-visible {
  outline-color: var(--c-red);
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .footer {
    --fp: 1px;
    --footer-x: var(--pad);
    gap: 56px;
    padding: 72px var(--footer-x) 24px;
  }
  .footer__top {
    min-height: 0;
  }
  .footer__content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
  }
  .footer__intro {
    grid-column: 1 / -1;
    width: auto;
    max-width: 560px;
    gap: 24px;
  }
  .footer__phrase {
    font-size: clamp(19px, 2.5vw, 24px);
  }
  .footer__email {
    font-size: clamp(16px, 2vw, 19px);
  }
  .footer__links a {
    font-size: clamp(16px, 2vw, 19px);
    min-height: 40px;
  }
  /* A assinatura ocupa a largura do conteúdo: o desenho das letras
     (5.43em, do "I" ao "k") vai de uma margem à outra */
  .footer__signature {
    font-size: calc((100vw - 2 * var(--footer-x)) / 5.43);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .footer {
    gap: 48px;
    padding-top: 56px;
  }
  /* Navegação na metade esquerda; os links externos (mais longos) embaixo,
     na largura toda. Até 10/11/2026, o idioma ficava ao lado da navegação
     ("nav lang"); ele saiu a pedido (a versão em inglês fica para depois) */
  .footer__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "intro intro"
      "nav ."
      "ext ext";
    gap: 40px 20px;
  }
  .footer__intro {
    grid-area: intro;
  }
  .footer__col--nav {
    grid-area: nav;
  }
  /* Sem uso desde 10/11/2026 (a coluna de idioma saiu); fica para a
     versão em inglês */
  .footer__col--lang {
    grid-area: lang;
  }
  .footer__col--ext {
    grid-area: ext;
  }
  .footer__links a {
    font-size: 16px;
  }
  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 16px;
  }
  .footer__legal a {
    min-height: 32px;
  }
  .footer__legal p {
    padding: calc((32px - 1.5em) / 2) 0;
  }
}