/* Rodapé: marca, destinos, serviços e atendimento sobre petróleo. */
.rodape {
  background: var(--petroleo-900);
  color: var(--texto-suave);
  border-top: 3px solid var(--laranja);
}
.rodape__interno {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5rem) var(--gutter) clamp(2.5rem, 4vw, 3.5rem);
}
.rodape__logo img { width: clamp(160px, 12vw, 200px); height: auto; }
.rodape__marca p { margin: 1.25rem 0 0; max-width: 32ch; line-height: 1.55; }
.rodape__assinatura {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--branco);
  font-weight: 600;
}
.rodape__assinatura::before { content: ""; flex: none; width: 2rem; height: 3px; border-radius: 2px; background: var(--laranja); }

.rodape__titulo {
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--laranja);
}
.rodape__coluna ul { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.rodape__coluna a { color: var(--texto-suave); text-decoration: none; line-height: 1.4; }
.rodape__coluna a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }

.rodape__rotulo { margin: 0 0 0.25rem; font-size: 0.875rem; }
.rodape__coluna .rodape__whatsapp { color: var(--branco); font-size: 1.375rem; font-weight: var(--peso-titulo); }
.rodape__coluna .rodape__botao { margin-top: 1.25rem; color: var(--branco); font-size: 1rem; padding: 0.75rem 1.4rem; min-height: 3rem; }
.rodape__coluna .rodape__botao:hover { color: var(--branco); text-decoration: none; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
}
.rodape__base p { margin: 0; }

@media (max-width: 1100px) {
  .rodape__interno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rodape__interno { grid-template-columns: 1fr; gap: 2.25rem; }
  .rodape__coluna .rodape__botao { width: 100%; justify-content: center; }
}