/* =============================================================================
   Auto Posto Zezão — folha de estilo principal
   Mobile-first. Breakpoints: 720px (intermediário) e 1024px (desktop).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Tokens de design
   -------------------------------------------------------------------------- */
:root {
  /* Cores */
  --verde:            #0f4b06;
  --verde-rodape:     #0b3a05;
  --verde-secundario: #008252;
  --amarelo:          #e3af09;
  --amarelo-hover:    #f2c433;

  --texto:            #1b241a;
  --texto-suave:      #4a5245;
  --texto-claro:      rgba(255, 255, 255, 0.92);
  --texto-claro-2:    #d3d9d2;
  --texto-rodape:     #9fb59a;

  --fundo:            #ffffff;
  --fundo-alt:        #f4f6f1;
  --borda:            #e2e6dd;
  --borda-forte:      #d3d9d2;

  --waze:             #33ccff;
  --waze-texto:       #052b36;
  --waze-hover:       #5cd6ff;

  /* Raios */
  --raio-card:   12px;
  --raio-bloco:  14px;
  --raio-botao:  8px;
  --raio-icone:  9px;

  /* Sombras */
  --sombra-card:    0 14px 30px rgba(15, 75, 6, 0.12);
  --sombra-foto:    0 18px 44px rgba(0, 0, 0, 0.35);
  --sombra-emblema: 0 12px 30px rgba(0, 0, 0, 0.3);
  --sombra-mascote: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));

  /* Transições */
  --transicao-cor:   0.15s ease;
  --transicao-card:  0.18s ease;

  /* Layout */
  --largura-max:     1180px;
  --padding-lateral: 20px;
  /* Cabeçalho mobile = 10 + 44 (marca/botão) + 10 + 3 (borda) = 67px */
  --altura-header:   80px;

  /* Acessibilidade */
  --cor-foco: var(--verde-secundario);
}

@media (min-width: 720px) {
  :root { --padding-lateral: 24px; }
}

@media (min-width: 1024px) {
  :root {
    /* Cabeçalho desktop = 70px + folga */
    --altura-header: 90px;
    --raio-botao: 6px;
  }
}

/* -----------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, address { margin: 0; }
address { font-style: normal; }

ul { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

a { color: var(--verde); }

iframe { border: 0; }

/* Alvo das âncoras não fica escondido sob o cabeçalho fixo */
[id] { scroll-margin-top: var(--altura-header); }

/* -----------------------------------------------------------------------------
   3. Acessibilidade
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

.cabecalho :focus-visible,
.hero :focus-visible,
.historia :focus-visible,
.rodape :focus-visible { --cor-foco: var(--amarelo); }

/* Sai da tela por transform, e não por `left: -9999px`: assim o link não fica
   posicionado fora da viewport, o que confunde auditorias de overflow. */
.pular-para-conteudo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-200%);
  background: var(--amarelo);
  color: var(--verde);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 0 0 var(--raio-botao) 0;
  text-decoration: none;
}
.pular-para-conteudo:focus { transform: translateY(0); }

.apenas-desktop { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------------------
   4. Botões
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--raio-botao);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao-cor),
              color var(--transicao-cor),
              border-color var(--transicao-cor);
}

.botao--amarelo         { background: var(--amarelo); color: var(--verde); }
.botao--contorno-claro  { border: 2px solid rgba(255, 255, 255, 0.45); color: #ffffff; font-weight: 700; }
.botao--contorno-verde  { border: 2px solid var(--verde); color: var(--verde); font-size: 13px; padding: 13px 10px; }
.botao--waze            { background: var(--waze); color: var(--waze-texto); font-size: 13px; padding: 13px 10px; }
.botao--bloco           { width: 100%; font-size: 13.5px; }
.botao--compacto        { min-height: 42px; padding: 11px 18px; font-size: 12.5px; letter-spacing: 0.6px; }

@media (hover: hover) {
  .botao--amarelo:hover        { background: var(--amarelo-hover); }
  .botao--contorno-claro:hover { border-color: var(--amarelo); color: var(--amarelo); }
  .botao--contorno-verde:hover { background: var(--verde); color: #ffffff; }
  .botao--waze:hover           { background: var(--waze-hover); }
}

@media (min-width: 1024px) {
  .botao--contorno-verde,
  .botao--waze { font-size: 13.5px; }
}

/* -----------------------------------------------------------------------------
   5. Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--verde);
  border-bottom: 3px solid var(--amarelo);
}

.cabecalho__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}

/* -- Marca -- */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
}

.marca__emblema {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 3px 5px;
}
.marca__emblema img { height: 38px; width: auto; }

.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.marca__nome {
  font-size: 14px;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
  letter-spacing: 0.3px;
  line-height: 1;
}
.marca__slogan {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--amarelo);
  letter-spacing: 1.1px;
  line-height: 1.2;
}
/* Evita que o ano fique órfão numa segunda linha quando o slogan quebra */
.marca__desde { white-space: nowrap; }

/* -- Botão WhatsApp (só mobile) -- */
.botao-whatsapp-mobile {
  margin-left: auto;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--amarelo);
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transicao-cor);
}
@media (hover: hover) {
  .botao-whatsapp-mobile:hover { background: var(--amarelo-hover); }
}

/* -- Navegação desktop -- */
.nav-desktop { display: none; }

@media (min-width: 1024px) {
  .cabecalho { border-bottom-width: 4px; }

  .cabecalho__topo {
    max-width: var(--largura-max);
    margin: 0 auto;
    gap: 16px;
    padding: 10px var(--padding-lateral);
  }

  .marca { gap: 12px; }
  .marca__emblema { border-radius: 10px; padding: 4px 6px; }
  .marca__emblema img { height: 46px; }
  .marca__nome { font-size: 17px; }
  .marca__slogan { font-size: 10px; letter-spacing: 1.4px; }

  .botao-whatsapp-mobile { display: none; }

  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
  }
  .nav-desktop__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transicao-cor);
  }
}
@media (min-width: 1024px) and (hover: hover) {
  .nav-desktop__link:hover { color: var(--amarelo); }
}

/* -----------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--verde);
  overflow: hidden;
}

.hero__interno {
  padding: 40px var(--padding-lateral) 0;
}

.hero__titulo {
  font-size: 36px;
  line-height: 1.08;
  font-weight: 900;
  font-style: italic;
  color: var(--amarelo);
  letter-spacing: -0.4px;
  text-wrap: balance;
  margin-bottom: 14px;
}

.hero__descricao {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto-claro);
}

.hero__acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.hero__mascote {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 28px;
  min-height: 330px;
}
.hero__mascote img {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  height: 330px;
  width: auto;
  filter: var(--sombra-mascote);
}

.hero__circulo {
  position: absolute;
  bottom: -120px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--verde-secundario);
}

/* Faixa intermediária (tablet): evita botões e linhas de texto esticados demais */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .hero__interno {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding-top: 52px;
  }
  .hero__titulo { font-size: 44px; max-width: 16ch; }
  .hero__descricao { max-width: 62ch; }
  .hero__acoes { flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 1024px) {
  .hero__interno {
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 64px var(--padding-lateral) 0;
    display: flex;
    align-items: flex-end;
    gap: 32px;
  }

  .hero__texto { flex: 1; padding-bottom: 64px; }

  .hero__titulo { font-size: 58px; line-height: 1.04; letter-spacing: -0.5px; margin-bottom: 16px; }
  .hero__descricao { font-size: 16px; max-width: 520px; }

  .hero__acoes { flex-direction: row; gap: 12px; margin-top: 30px; }

  .hero__mascote {
    width: 380px;
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: 0;
    min-height: 420px;
  }
  .hero__mascote img { height: 440px; }

  .hero__circulo {
    bottom: -140px;
    margin-left: -190px;
    width: 380px;
    height: 380px;
  }
}

/* -----------------------------------------------------------------------------
   7. Faixa de informações
   -------------------------------------------------------------------------- */
.faixa-info { background: var(--amarelo); }

.faixa-info__interno {
  display: flex;
  flex-direction: column;
  padding: 6px var(--padding-lateral);
}

.faixa-info__bloco {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15, 75, 6, 0.25);
}
.faixa-info__bloco:last-child { border-bottom: 0; }

.faixa-info__rotulo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: rgba(15, 75, 6, 0.75);
}
.faixa-info__valor {
  font-size: 14px;
  font-weight: 800;
  color: var(--verde);
  line-height: 1.4;
}
/* O padding amplia o alvo de toque para ~44px; a margem negativa o cancela
   no layout, então a faixa não muda de altura. */
.faixa-info__link {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .faixa-info__link:hover { text-decoration: underline; }
}

@media (min-width: 720px) {
  .faixa-info__interno {
    max-width: var(--largura-max);
    margin: 0 auto;
    flex-direction: row;
    padding: 0 var(--padding-lateral);
  }
  .faixa-info__bloco {
    flex: 1;
    padding: 18px 28px;
    border-bottom: 0;
    border-right: 1px solid rgba(15, 75, 6, 0.25);
  }
  .faixa-info__bloco:nth-child(2) { flex: 1.4; }
  .faixa-info__bloco:first-child  { padding-left: 0; }
  .faixa-info__bloco:last-child   { padding-right: 0; border-right: 0; }

  .faixa-info__rotulo { font-size: 10px; letter-spacing: 1.8px; }
  .faixa-info__valor  { font-size: 15px; }
}

/* -----------------------------------------------------------------------------
   8. Seções (base compartilhada)
   -------------------------------------------------------------------------- */
.secao { background: var(--fundo); }
.secao--alt { background: var(--fundo-alt); }

.secao__interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 56px var(--padding-lateral);
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 2.2px;
  color: var(--verde-secundario);
  line-height: 1.4;
}
.eyebrow--amarelo { color: var(--amarelo); }

.secao__titulo {
  margin-top: 10px;
  font-size: 27px;
  line-height: 1.15;
  font-weight: 900;
  font-style: italic;
  color: var(--verde);
  text-wrap: balance;
}
.secao__titulo--claro { color: var(--amarelo); }

.secao__descricao {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--texto-suave);
}

@media (min-width: 720px) {
  .secao__interno { padding: 68px var(--padding-lateral); }
}

@media (min-width: 1024px) {
  .secao__interno { padding: 84px var(--padding-lateral); }

  .eyebrow { font-size: 11px; letter-spacing: 2.4px; }

  .secao__titulo { margin-top: 12px; font-size: 38px; line-height: 1.12; }

  .secao__descricao { margin-top: 14px; font-size: 15px; line-height: 1.7; max-width: 520px; }

  .apenas-desktop { display: inline; }
}

/* -----------------------------------------------------------------------------
   9. Cards (combustíveis e serviços)
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 12px;
}

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  transition: transform var(--transicao-card), box-shadow var(--transicao-card);
}

.card__sigla,
.card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--verde);
  color: var(--amarelo);
}

.card__sigla {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
}

.card__icone {
  width: 42px;
  height: 42px;
  border-radius: var(--raio-icone);
  background: var(--amarelo);
  color: var(--verde);
}

.card__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card__titulo {
  font-size: 15px;
  font-weight: 800;
  color: var(--verde);
  line-height: 1.3;
}

.card__descricao {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-suave);
}

@media (min-width: 720px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .card { display: block; padding: 26px 24px; }
  .card__sigla { width: 48px; height: 48px; font-size: 14px; }
  .card__texto { margin-top: 16px; gap: 8px; }
  .card__titulo { font-size: 16px; }
  .card--combustivel .card__titulo { font-size: 17px; }
  .card--combustivel .card__texto { margin-top: 18px; }
  .card__descricao { font-size: 13.5px; line-height: 1.6; }
}

@media (min-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-card);
  }
}

/* -----------------------------------------------------------------------------
   10. Combustíveis
   -------------------------------------------------------------------------- */
.combustiveis__interno {
  display: grid;
  gap: 24px;
}
.combustiveis__cabecalho { order: 1; }
.combustiveis__cards     { order: 2; }
.combustiveis__selo      { order: 3; }

.selo-petrobras {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-card);
}
.selo-petrobras img {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.selo-petrobras p {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--verde);
}

@media (min-width: 1024px) {
  .combustiveis__interno {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 32px;
    row-gap: 40px;
  }
  .combustiveis__cabecalho { grid-area: 1 / 1 / 2 / 2; }
  .combustiveis__selo      { grid-area: 1 / 2 / 2 / 3; }
  .combustiveis__cards     { grid-area: 2 / 1 / 3 / 3; }

  .combustiveis__cabecalho .secao__titulo { max-width: 560px; }

  .selo-petrobras { padding: 12px 18px; }
  .selo-petrobras img { height: 62px; }
  .selo-petrobras p { font-size: 13px; max-width: 210px; }
}

/* -----------------------------------------------------------------------------
   11. Serviços
   -------------------------------------------------------------------------- */
.servicos__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.servicos__mascote {
  height: 140px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}

.servicos__cards { margin-top: 28px; }

@media (min-width: 1024px) {
  .servicos__topo { gap: 32px; }

  .servicos__mascote {
    height: 190px;
    position: relative;
    z-index: 2;
    margin-bottom: -84px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
  }

  .servicos__cards { margin-top: 44px; }
}

/* -----------------------------------------------------------------------------
   12. Nossa história
   -------------------------------------------------------------------------- */
.historia { background: var(--verde); }

.historia__interno {
  display: grid;
  gap: 28px;
}

.historia__paragrafo {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--texto-claro);
}
.historia__paragrafo + .historia__paragrafo { margin-top: 1.5em; }

.pilares {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.pilar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(227, 175, 9, 0.4);
  border-radius: 10px;
}
.pilar__titulo {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  color: var(--amarelo);
}
.pilar__descricao {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texto-claro-2);
  /* rede de segurança: "responsabilidade." é longa e, num pilar estreito,
     vazaria do card em vez de quebrar */
  overflow-wrap: break-word;
}

.historia__foto { position: relative; }
.historia__foto > img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--raio-bloco);
  box-shadow: var(--sombra-foto);
}

.historia__emblema {
  position: absolute;
  left: 12px;
  bottom: -16px;
  display: inline-flex;
  padding: 7px 9px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: var(--sombra-emblema);
}
.historia__emblema img { height: 60px; width: auto; }

@media (min-width: 720px) and (max-width: 1023.98px) {
  .historia__paragrafo { max-width: 70ch; }
  .historia__foto > img { height: 340px; }
}

@media (min-width: 1024px) {
  /* minmax(0, …) nas duas colunas: sem isso o `1fr` não encolhe abaixo do
     min-content da coluna de texto (os pilares) e a foto vazava 8px da tela
     em 1024px. O gap menor devolve espaço aos pilares nessa faixa. */
  .historia__interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 48px;
    align-items: center;
  }

  .historia__paragrafo { margin-top: 16px; font-size: 15px; line-height: 1.75; max-width: 500px; }

  .pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 30px;
  }
  .pilar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 18px 16px;
  }
  .pilar__titulo { font-size: 19px; }

  .historia__foto > img { height: 380px; }

  .historia__emblema {
    left: -22px;
    bottom: -22px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .historia__emblema img { height: 88px; }
}

@media (min-width: 1180px) {
  .historia__interno { gap: 64px; }
}

/* -----------------------------------------------------------------------------
   13. Localização
   -------------------------------------------------------------------------- */
.localizacao__interno {
  display: grid;
  gap: 16px;
}

.localizacao__titulo {
  margin-top: 0;
  margin-bottom: 4px;
}

.localizacao__mapa {
  position: relative;
  height: 260px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-bloco);
  overflow: hidden;
}
.localizacao__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.localizacao__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--fundo-alt);
  border-radius: var(--raio-bloco);
}

.dado__rotulo {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--verde-secundario);
}
.dado__valor {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--texto);
}
.dado__valor a {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .dado__valor a:hover { text-decoration: underline; }
}

.localizacao__acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.localizacao__rotas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 720px) and (max-width: 1023.98px) {
  .localizacao__mapa { height: 360px; }
}

@media (min-width: 1024px) {
  .localizacao__interno {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "mapa titulo"
      "mapa card";
    column-gap: 32px;
    row-gap: 0;
  }

  .localizacao__mapa {
    grid-area: mapa;
    height: auto;
    min-height: 400px;
  }

  .localizacao__titulo {
    grid-area: titulo;
    margin: 0;
    padding: 32px 32px 0;
    font-size: 30px;
    background: var(--fundo-alt);
    border-radius: var(--raio-bloco) var(--raio-bloco) 0 0;
  }

  .localizacao__card {
    grid-area: card;
    gap: 22px;
    padding: 22px 32px 32px;
    border-radius: 0 0 var(--raio-bloco) var(--raio-bloco);
  }

  .dado__rotulo { font-size: 10px; letter-spacing: 1.8px; }
  .dado__valor  { font-size: 15px; }

  .localizacao__acoes { margin-top: auto; }
}

/* -----------------------------------------------------------------------------
   14. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--verde-rodape);
  border-top: 3px solid var(--amarelo);
}

.rodape__interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 36px var(--padding-lateral);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.rodape__emblema {
  display: inline-flex;
  padding: 8px 10px;
  background: #ffffff;
  border-radius: 12px;
}
.rodape__emblema img { height: 58px; width: auto; }

.rodape__identidade {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rodape__nome {
  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  color: #ffffff;
}
/* Mobile: slogan e cidade em duas linhas. Desktop: uma linha separada por " · ". */
.rodape__tagline {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texto-claro-2);
  line-height: 1.5;
}

.rodape__lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.rodape__sociais {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rodape__sociais a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #ffffff;
  transition: border-color var(--transicao-cor), color var(--transicao-cor);
}
@media (hover: hover) {
  .rodape__sociais a:hover { border-color: var(--amarelo); color: var(--amarelo); }
}

.rodape__legal {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.rodape__petrobras {
  display: inline-flex;
  flex-shrink: 0;
  padding: 5px 7px;
  background: #ffffff;
  border-radius: 8px;
}
.rodape__petrobras img { height: 44px; width: auto; }

.rodape__copy {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texto-rodape);
}

@media (min-width: 1024px) {
  .rodape { border-top-width: 4px; }

  .rodape__interno {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 44px var(--padding-lateral);
    text-align: left;
  }

  .rodape__marca { flex-direction: row; gap: 16px; }
  .rodape__emblema img { height: 64px; }
  .rodape__nome { font-size: 18px; }
  .rodape__tagline { display: block; font-size: 12px; }
  .rodape__local::before { content: " · "; }

  .rodape__lado {
    flex-direction: row;
    margin-left: auto;
    gap: 18px;
  }
  .rodape__sociais a { width: 42px; height: 42px; }

  .rodape__petrobras { padding: 6px 8px; }
  .rodape__petrobras img { height: 54px; }
  .rodape__copy { font-size: 11px; max-width: 240px; }
}