/* ==========================================================================
   Andréia Freitas — RODAPÉ
   Consome os tokens de system.css e reaproveita .af-wrap.
   Valores vindos do protótipo aprovado.
   ========================================================================== */

.af-footer{
  position:relative;
  overflow:hidden;
  background:var(--slate);
  color:var(--cream);
  font-family:var(--display);
  line-height:1.2;
}

/* ==========================================================================
   CARROSSEL — largura total da tela, pontas esmaecidas, pausa no hover
   ========================================================================== */
.af-marquee{
  overflow:hidden;
  padding:64px 0 56px;
  margin:0 calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* 4 cópias da lista: o trilho anda −50% (= 2 cópias) e emenda sem buraco
   mesmo em telas de 1920px ou mais */
.af-marquee__track{
  display:flex;
  width:max-content;
  animation:af-marquee 60s linear infinite;
}
.af-marquee:hover .af-marquee__track{ animation-play-state:paused; }

.af-manifesto{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  flex:none;
}
.af-manifesto li{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px, 2.3vw, 32px);
  color:var(--gold-soft);
  letter-spacing:.01em;
}
/* losango dourado entre as frases */
.af-manifesto li::after{
  content:"";
  width:6px;
  height:6px;
  margin:0 40px;
  background:var(--gold);
  transform:rotate(45deg);
  opacity:.8;
}

@keyframes af-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ==========================================================================
   LINHA DOURADA QUE SOME NAS PONTAS
   ========================================================================== */
.af-footer__rule{
  height:1px;
  border:0;
  margin:0;
  background:linear-gradient(90deg, transparent, rgba(181,169,100,.45) 18%, rgba(181,169,100,.45) 82%, transparent);
}

/* ==========================================================================
   TRÊS COLUNAS — Marca | Navegação | Fale comigo
   ========================================================================== */
.af-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.1fr;
  gap:56px;
  padding:60px 0 64px;
}

.af-footer__brand img{
  height:104px;
  width:auto;
  display:block;
  margin:0 0 22px -6px;
}
.af-footer__brand p{
  margin:0;
  max-width:36ch;
  font-size:18px;
  line-height:1.6;
  color:rgba(247,245,240,.78);
}

.af-footer__title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:8px 0 22px;
  color:var(--gold);
  font-size:13px;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.af-footer__title::before{
  content:"";
  width:24px;
  height:1px;
  background:var(--gold);
}

.af-footer__nav{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.af-footer__nav a{
  color:var(--cream);
  text-decoration:none;
  font-size:19px;
  font-weight:500;
  letter-spacing:.02em;
  display:inline-flex;
  transition:color .2s, transform .25s;
}
.af-footer__nav a:hover{
  color:var(--gold-soft);
  transform:translateX(4px);
}

.af-contact{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.af-contact a{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--cream);
  text-decoration:none;
}
.af-contact__icon{
  width:44px;
  height:44px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid rgba(181,169,100,.55);
  color:var(--gold-soft);
  transition:background .25s, color .25s, border-color .25s;
}
.af-contact__icon svg{ width:19px; height:19px; }
.af-contact a:hover .af-contact__icon{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
}
.af-contact__text strong{
  display:block;
  font-size:19px;
  font-weight:600;
  letter-spacing:.02em;
}

/* ==========================================================================
   BARRA FINAL
   ========================================================================== */
.af-footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:22px 0 26px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom, 0px)); /* iPhone */
  font-size:15px;
  color:rgba(247,245,240,.62);
  letter-spacing:.02em;
}
.af-footer__bottom b{
  color:var(--gold-soft);
  font-weight:600;
  text-decoration:none;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1023px){
  .af-marquee{ padding:44px 0 40px; }
  .af-manifesto li::after{ margin:0 26px; }
  /* tablet: marca na linha de cima; Navegação | Fale comigo embaixo */
  .af-footer__grid{
    grid-template-columns:1fr 1fr;
    gap:40px 32px;
    padding:44px 0 48px;
  }
  .af-footer__brand{ grid-column:1 / -1; }
  .af-footer__brand img{ height:88px; }
}
@media (max-width:767px){
  .af-manifesto li{ font-size:22px; }
  .af-manifesto li::after{ margin:0 20px; }
  .af-footer__grid{ grid-template-columns:1fr; }
  .af-footer__nav{ gap:0; }
  .af-footer__nav a{ min-height:44px; align-items:center; }
  .af-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO — o carrossel continua, só que mais devagar (120s).
   O reset global de system.css zera animation e transform com !important;
   aqui a animação é reativada e anda pela propriedade `translate`, que o
   reset não toca (mesmo deslocamento visual).
   ========================================================================== */
@keyframes af-marquee-reduced{
  from{ translate:0 0; }
  to{ translate:-50% 0; }
}
@media (prefers-reduced-motion:reduce){
  .af-marquee__track{ animation:af-marquee-reduced 120s linear infinite !important; }
  .af-marquee:hover .af-marquee__track{ animation-play-state:paused !important; }
  .af-manifesto li::after{ transform:rotate(45deg) !important; }
}