/* 11-rodape: .facto-site-footer da V1 portado com escopo em #rodape.
   Só o wordmark (pedido 17). Wordmark: logo Facto em SVG no lugar do texto "FactoCon" (Alpha Lyrae indisponível). */
#rodape.facto-site-footer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / 8%);
  background: #0b0b0b;
  color: var(--white);
  font-size: 1rem;
  line-height: normal;
}

/* Wordmark na grade: as bordas do símbolo e do "o" final encostam nas margens do container
   das seções (viewBox justo ao desenho), sem folga torta de um lado. */
#rodape .facto-site-footer__wordmark {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin: 0 auto;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0 clamp(3.5rem, 5.5vw, 5rem);
}

#rodape .facto-site-footer__wordmark svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  overflow: visible;
}

#rodape .facto-site-footer__wordmark use {
  fill: transparent;
  /* Em unidades do viewBox: ≈ 1,5 px de traço a 1440 px. */
  stroke-width: 0.2;
}

#rodape .facto-site-footer__wordmark-base { stroke: rgb(255 255 255 / 7%); }

#rodape .facto-site-footer__wordmark-draw {
  stroke: rgb(255 255 255 / 48%);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

#rodape.is-visible .facto-site-footer__wordmark-draw {
  animation: rodape-wordmark-draw 2.8s var(--ease-out) forwards;
}

/* Sem JS o traço aparece pronto. */
#rodape:not(.tem-js) .facto-site-footer__wordmark-draw { opacity: 1; stroke-dashoffset: 0; }

#rodape .facto-site-footer__wordmark-reveal {
  opacity: 0;
  transition: opacity 220ms ease;
}

#rodape .facto-site-footer__wordmark.is-hovered .facto-site-footer__wordmark-reveal { opacity: 1; }

@keyframes rodape-wordmark-draw {
  0% { opacity: 0; stroke-dashoffset: 1; }
  8% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@media (max-width: 640px) {
  #rodape .facto-site-footer__wordmark { padding: 3.5rem 0 3rem; }
  /* Na largura do celular o desenho fica ~4x menor: traço proporcional para seguir visível. */
  #rodape .facto-site-footer__wordmark use { stroke-width: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  #rodape .facto-site-footer__wordmark-draw {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0;
  }
  #rodape .facto-site-footer__wordmark-reveal { transition: none; }
}