/*====================================
  FOOTER — Zroo
  ------------------------------------
  Vive fora do style.css porque o MESMO rodapé é usado em dois lugares:
  a home (home_zroo/index.php) e todas as páginas internas do site
  (pt_br/inc/rodape.php, que despacha para home_<template>/rodape.php).
  Uma fonte só: mexeu aqui, mudou nos dois.

  AUTOSSUFICIENTE de propósito: os tokens ficam em .footer, não em :root.
  As páginas internas já usam :root pro Tailwind (--primary, --border e
  --radius como triplas HSL, tipo `hsl(var(--border))`); jogar o
  variables.css do template por cima trocaria --border por um hex e
  quebraria a borda de tudo. Escopado no .footer, nada vaza.
  Os valores são espelho de css/variables.css — mudou lá, muda aqui.
====================================*/

.footer {
  /* --- tokens do rodapé (espelho de variables.css) --- */
  --primary: #F60F9E;
  --gradient-brand: linear-gradient(90deg, #007CF9 0%, #9A389D 50%, #F60F9E 100%);
  --font-base: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fw-bold: 700;
  --lh-normal: 1.6;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --container: 1512px;
  --container-pad: clamp(1.25rem, 7.53vw, 7.5rem);
  --transition: 0.25s ease;
}

/* FULL-BLEED — o rodapé ocupa a largura toda, igual à home.
   Nas internas ele é incluído DENTRO do wrapper da página
   (max-w-[1600px] mx-auto xl:px-20 …), que o encolhia e deixava faixa
   branca dos dois lados. O wrapper varia por página, então quem resolve é
   o rodapé: sai do pai e volta pra largura da viewport. Na home é inócuo
   (lá o pai já é o body).
*/

.footer {
  /* clear: as listagens (/aluga, /venda) montam os cards com float e o
     wrapper da página não os contém — ele fecha com altura 0 e os cards
     "vazam" pra baixo. Sem o clear o rodapé subia pro topo desse vazamento
     e aparecia NO MEIO dos cards. O rodapé antigo tinha float:left, que
     escondia o problema por acidente. */
  clear: both;
  /* --sbw = largura da barra de rolagem, medida em runtime pelo rodape.php.
     100vw CONTA a barra, a página não tem — sem descontar sobrariam ~15px de
     scroll horizontal no Windows. Sem JS, --sbw cai em 0px (comportamento de
     antes, e no macOS/mobile a barra é sobreposta e já vale 0 mesmo). */
  width: calc(100vw - var(--sbw, 0px));
  max-width: calc(100vw - var(--sbw, 0px));
  margin-inline: calc(50% - 50vw + var(--sbw, 0px) / 2);
}

/* Nas internas o .container e o reset do style.css não existem, então o
   rodapé traz os seus — escopados, pra não vazar no resto da página. */
.footer .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.footer a { color: inherit; text-decoration: none; }
.footer p { margin: 0; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer img { max-width: 100%; }

.footer {
  position: relative;
  background: #1C1C28;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--fs-sm);
  font-family: var(--font-base);
  line-height: var(--lh-normal);
  text-align: left;
}
/* Linha superior em gradiente da marca */
.footer::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--gradient-brand);
}

.footer__inner {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.3fr auto;
  gap: var(--space-7) var(--space-6);
  padding-block: var(--space-8);
  align-items: start;
}

.footer__logo { width: 120px; height: auto; margin-bottom: var(--space-4); }
.footer__slogan { display: block; color: #fff; font-size: var(--fs-md); margin-bottom: var(--space-2); }
.footer__brand p { max-width: 34ch; margin-bottom: var(--space-5); }

.footer__legal { line-height: 1.9; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); }
.footer__legal strong,
.footer__legal span { display: block; }
.footer__legal strong { color: rgba(255, 255, 255, 0.8); }

.footer__title {
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}
.footer__address { font-style: normal; line-height: 1.9; }

.footer__contact { line-height: 1.7; margin-bottom: var(--space-5); }
.footer__contact strong { color: #fff; }
.footer__contact a { transition: color var(--transition); }
.footer__contact a:hover { color: var(--primary); }
.footer__muted { color: rgba(255, 255, 255, 0.45); font-size: var(--fs-xs); }

.footer__social { display: flex; gap: var(--space-3); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--primary);
  background: rgba(246, 15, 158, 0.08);
  transition: background var(--transition), transform var(--transition), color var(--transition);
}
.footer__social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.footer__social svg { width: 20px; height: 20px; }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}
.footer__nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer__nav a { transition: color var(--transition); }
.footer__nav a:hover { color: #fff; }

/*---- Responsivo (veio do responsive.css, mesmos breakpoints) ----*/

/* ≤ 992px — marca ocupa a linha inteira, social embaixo */
@media (max-width: 992px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__social { grid-column: 1 / -1; }
}

/* ≤ 768px */
@media (max-width: 768px) {
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ≤ 576px */
@media (max-width: 576px) {
  .footer__inner { grid-template-columns: 1fr; }
}