/* Rodapé único do site (marcação em src/rodape.js). Serve à home e às páginas de public/.
   O site só tem tema escuro; as cores repetem as da home e de tobe-quadra.css [data-theme='dark'].
   A largura acompanha a página: --at-site-margin vem de tobe-quadra.css; a home define as suas. */

.rodape {
  --rodape-bg: #121315;  /* igual ao fundo do logotipo (PNG opaco) */
  --rodape-linha: #2a2d30;
  --rodape-tinta: #f2f3f1;
  --rodape-corpo: #b6b9bc;
  --rodape-apoio: #9baba3;
  --rodape-lima: #c6f24e;
  --rodape-display: 'Space Grotesk Variable', 'Space Grotesk', system-ui, sans-serif;
  border-top: 1px solid var(--rodape-linha);
  background: var(--rodape-bg);
  color: var(--rodape-corpo);
  font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.rodape-container {
  max-width: var(--rodape-largura, 1200px);
  margin-inline: auto;
  padding: 56px var(--rodape-margem, var(--at-site-margin, 64px)) 32px;
}
.rodape p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; }
.rodape a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.rodape a:hover { color: var(--rodape-lima); }
.rodape a:focus-visible { outline: 3px solid var(--rodape-lima); outline-offset: 4px; border-radius: 4px; }

.rodape-rotulo {
  display: block;
  margin-bottom: 14px;
  color: var(--rodape-apoio);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Faixa de ações: falar com a gente e baixar o app */
.rodape-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--rodape-linha);
}
.rodape .rodape-email {
  display: inline-block;
  color: var(--rodape-tinta);
  font-family: var(--rodape-display);
  font-size: clamp(25px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-color: var(--rodape-linha);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  transition: text-decoration-color .2s, color .2s;
}
.rodape-email span { color: var(--rodape-lima); }
.rodape .rodape-email:hover { color: var(--rodape-tinta); text-decoration-color: var(--rodape-lima); }

.rodape-lojas { --rodape-loja-h: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rodape-loja { display: block; line-height: 0; border-radius: 9px; transition: transform .2s; }
.rodape-loja:hover { transform: translateY(-2px); }
.rodape-loja img { display: block; height: var(--rodape-loja-h); width: auto; }
.rodape-loja-google img { height: calc(var(--rodape-loja-h) * 250 / 190); margin-block: calc(var(--rodape-loja-h) * -30 / 190); }

/* Mapa do site */
.rodape-mapa {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-block: 44px;
}
.rodape-marca img { display: block; width: auto; height: 46px; margin-left: -11px; /* o PNG tem respiro de 62/578 à esquerda */ }
.rodape-marca p { margin-top: 14px; color: #aab1b3; line-height: 1.7; }
.rodape-grupo { display: flex; flex-direction: column; align-items: flex-start; }
.rodape-grupo a { display: block; padding-block: 5px; color: var(--rodape-tinta); }
.rodape-grupo a[aria-current="page"] { color: var(--rodape-lima); }

/* Identificação da empresa */
.rodape-base {
  padding-top: 24px;
  border-top: 1px solid var(--rodape-linha);
  color: #a6adae;
  font-size: 12px;
  line-height: 1.8;
}
.rodape .rodape-marcas { max-width: 780px; margin-top: 14px; color: #929a9d; font-size: 11px; line-height: 1.7; }

@media (max-width: 900px) {
  .rodape-mapa { grid-template-columns: repeat(3, 1fr); }
  .rodape-marca { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .rodape-container { padding-top: 44px; padding-bottom: 28px; }
  .rodape-acoes { flex-direction: column; align-items: flex-start; padding-bottom: 36px; }
  .rodape-mapa { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-block: 36px; }
  .rodape-grupo a { padding-block: 9px; }
  .rodape-base span { display: block; }
  .rodape-base br, .rodape-base .rodape-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rodape-loja, .rodape .rodape-email { transition: none; }
  .rodape-loja:hover { transform: none; }
}