/* Rede Fórmula — estilos (celular primeiro) */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url('../fonts/archivo.woff2') format('woff2-variations'), url('../fonts/archivo.woff2') format('woff2'); }
:root {
  --verde: #3E8A3C;
  --verde-botao: #2F6E2D;   /* verde mais escuro para botões com texto branco (contraste) */
  --verde-claro: #9fd49c;
  --escuro: #0E1F16;
  --texto: #0E1F16;
  --texto-2: #2c3a31;
  --texto-3: #56645a;
  --linha: #dfe4e0;
  --borda: #b9c4bc;
  --fundo-claro: #F3F4EF;
  --margem: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Archivo', system-ui, sans-serif; color: var(--texto); background: #fff; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: var(--verde-botao); }
a:hover { color: var(--escuro); }
input, select, button, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -9999px; top: 0; z-index: 100; background: #fff; padding: 12px 16px; }
.pular:focus { left: 8px; top: 8px; }
.escondido { display: none; }
[hidden] { display: none !important; }

/* Tipografia de seção */
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-botao); }
.rotulo-claro { color: var(--verde-claro); }
h1, h2 { font-weight: 800; font-stretch: 72%; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; }
h2 { font-size: 40px; }
.texto-grande { font-size: 17px; line-height: 1.6; color: var(--texto-2); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; font-size: 15px; font-weight: 700; text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; }
.btn-verde { background: var(--verde-botao); color: #fff; }
.btn-verde:hover { background: #245823; color: #fff; }
.btn-escuro { background: var(--escuro); color: #fff; }
.btn-escuro:hover { background: #1d3a2a; color: #fff; }
.btn-contorno { background: #fff; color: var(--escuro); border-color: var(--escuro); }
.btn-contorno:hover { background: var(--escuro); color: #fff; }
.btn-indisponivel { border: 1px dashed #9aa79e; color: var(--texto-3); font-weight: 500; font-size: 13px; cursor: default; }
.btn-largo { width: 100%; }

/* Cabeçalho */
.cabecalho { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--margem); color: #fff; }
.cabecalho-logo img { height: 46px; width: auto; }
.menu-botao { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 2px; cursor: pointer; }
.menu { display: none; }
body.menu-aberto { overflow: hidden; }
body.menu-aberto .menu { display: flex; position: fixed; inset: 74px 0 0 0; background: var(--escuro); flex-direction: column; padding: 8px var(--margem) 32px; z-index: 19; }
body.menu-aberto .cabecalho { position: fixed; background: var(--escuro); }
.menu a { color: #fff; text-decoration: none; font-size: 22px; font-weight: 700; font-stretch: 80%; text-transform: uppercase; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }

/* 1. Topo */
.topo { position: relative; background: var(--escuro); color: #fff; overflow: hidden; padding-top: 250px; }
.topo-grafico { position: absolute; top: 84px; right: -90px; width: 380px; height: auto; }
.topo-grafico .linha { display: none; }
.topo-conteudo { position: relative; z-index: 1; width: 100%; padding: 0 var(--margem) 32px; display: flex; flex-direction: column; gap: 16px; }
.topo-cidades { font-size: 12px; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-top: 8px; }
.topo h1 { font-size: 50px; }
.topo-sub { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.82); }
.busca { background: #fff; color: var(--texto); padding: 16px; border-radius: 2px; display: flex; flex-direction: column; gap: 10px; }
.busca label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.busca-linha { display: flex; }
.busca input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--borda); border-right: 0; border-radius: 0; padding: 0 12px; font-size: 16px; }
.busca-botao { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; background: var(--verde-botao); color: #fff; border: 0; border-radius: 0; font-weight: 700; cursor: pointer; }
.busca-botao span { display: none; }
.busca-local { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; min-height: 32px; }

/* 2. Confiança */
.confianca { background: var(--escuro); color: #fff; padding: 8px var(--margem) 40px; }
.confianca-item { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.confianca-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,.14); }
.confianca-item strong { font-size: 56px; font-weight: 800; font-stretch: 70%; line-height: .9; color: var(--verde-claro); }
.confianca-item span { font-size: 16px; line-height: 1.35; }
.confianca-nota { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.72); }

/* Seções */
.secao { padding: 56px var(--margem); display: flex; flex-direction: column; gap: 20px; }
.fundo-claro { background: var(--fundo-claro); }
.fundo-escuro { background: var(--escuro); color: #fff; }
.fundo-escuro .texto-grande { color: rgba(255,255,255,.82); }
.fundo-escuro a { color: var(--verde-claro); }

/* 3. Postos */
.postos-cabeca { display: flex; flex-direction: column; gap: 20px; }
.filtros { display: flex; flex-direction: column; gap: 10px; }
.filtros label { font-size: 13px; font-weight: 600; }
.filtros select, .campo input, .campo select { height: 50px; border: 1px solid var(--borda); border-radius: 0; padding: 0 12px; font-size: 16px; background: #fff; color: var(--texto); width: 100%; }
.filtros-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--borda); background: #fff; font-size: 14px; font-weight: 600; border-radius: 0; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--escuro); border-color: var(--escuro); color: #fff; }
.busca-ativa { font-size: 14px; }
.busca-ativa button { background: none; border: 0; color: var(--verde-botao); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 32px; }
.contagem { font-size: 13px; color: var(--texto-3); }
.lista { display: flex; flex-direction: column; }
.posto { padding: 20px 0; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 8px; }
.posto-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.posto h3 { font-size: 19px; line-height: 1.2; font-weight: 700; }
.selo { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; background: var(--escuro); color: #fff; }
.posto-dist { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--verde-botao); }
.posto-end { font-size: 15px; line-height: 1.4; color: var(--texto-2); }
.posto-end strong { color: var(--verde-botao); }
.posto-horario { font-size: 13px; color: var(--verde-botao); }
.posto-comb { font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.posto-servicos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.posto-servicos li { font-size: 12px; padding: 2px 8px; background: var(--fundo-claro); }
.posto-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.posto-acoes .btn { padding: 0 8px; }
.posto-acoes-uma { grid-template-columns: 1fr; }
.vazio { padding: 24px 16px; border: 1px dashed #9aa79e; font-size: 15px; color: var(--texto-2); }
.ver-mais { width: 100%; margin-top: 8px; }

/* 4. História */
.foto-reservada { margin: 8px 0 0; height: 230px; background: #d9d4c7; display: flex; align-items: flex-end; padding: 12px;
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), #c7c1b2, transparent calc(50% + 1px)), linear-gradient(to bottom right, transparent calc(50% - 1px), #c7c1b2, transparent calc(50% + 1px)); }
.foto-reservada figcaption { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--fundo-claro); padding: 5px 8px; color: #3b4a40; }
.historia-texto { display: flex; flex-direction: column; gap: 20px; }
.linha-tempo { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--verde); display: flex; flex-direction: column; gap: 22px; }
.linha-tempo li { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--texto-2); }
.ano { font-size: 26px; font-weight: 800; font-stretch: 72%; color: var(--texto); }
.ano-hoje { color: var(--verde-botao); }

/* 5. Promoções */
.trabalhe > div { display: flex; flex-direction: column; gap: 20px; }
.insta-painel { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 260px; padding: 28px; background: var(--escuro); color: #fff; text-decoration: none; position: relative; overflow: hidden; }
.insta-painel:hover { color: #fff; background: #17301f; }
.insta-painel svg { color: var(--verde-claro); position: absolute; top: 28px; left: 28px; }
.insta-handle { font-size: 40px; font-weight: 800; font-stretch: 75%; line-height: 1; overflow-wrap: anywhere; }
.insta-sub { font-size: 15px; color: rgba(255,255,255,.75); }
.promocoes-texto { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* 6. Empresas + formulários */
.empresas-texto { display: flex; flex-direction: column; gap: 20px; }
.lista-linhas { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.lista-linhas li { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); }
.lista-linhas li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.formulario { background: #fff; color: var(--texto); padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.formulario h3 { font-size: 20px; }
.formulario a { color: var(--verde-botao); }
.formulario-aberto { padding: 0; background: none; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-size: 13px; font-weight: 600; }
.campos-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.campo input.arquivo { height: auto; padding: 14px 12px; border-style: dashed; border-color: var(--verde-botao); font-size: 14px; }
.consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.consentimento input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--verde-botao); }
.nota { font-size: 14px; color: var(--texto-3); }

/* 8. Contato */
.contato-grade { display: flex; flex-direction: column; gap: 28px; }
.contato-cliente { background: #fff; padding: 22px 18px; border-top: 4px solid var(--verde); display: flex; flex-direction: column; gap: 12px; }
.contato-adm { display: flex; flex-direction: column; gap: 12px; }
.contato h3 { font-size: 20px; font-weight: 700; }
.contato p { font-size: 15px; color: var(--texto-2); }
.contato p.rotulo { font-size: 12px; color: var(--verde-botao); }
.contato dl { margin: 0; display: grid; grid-template-columns: 100px 1fr; gap: 10px 12px; font-size: 15px; line-height: 1.4; }
.contato dt { color: var(--texto-3); }
.contato dd { margin: 0; overflow-wrap: anywhere; }
.contato dd a { font-weight: 700; }

/* 9. Faixa Pampeano + rodapé */
.faixa-pampeano { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 22px var(--margem); border-top: 1px solid var(--linha); color: var(--texto); text-decoration: none; }
.faixa-pampeano span { display: flex; flex-direction: column; gap: 4px; }
.faixa-pampeano small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.faixa-pampeano strong { font-size: 17px; }
.faixa-pampeano:hover strong { text-decoration: underline; }
.rodape { background: var(--escuro); color: rgba(255,255,255,.75); padding: 36px var(--margem) 44px; display: flex; flex-direction: column; gap: 24px; font-size: 13px; line-height: 1.6; }
.rodape-marca { display: flex; flex-direction: column; gap: 16px; }
.rodape-marca img { height: 56px; width: auto; align-self: flex-start; }
.rodape-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rodape-links a { color: #fff; text-decoration: none; font-size: 15px; min-height: 40px; display: flex; align-items: center; }
.rodape-links a:hover { text-decoration: underline; }


.wpp { display: inline-flex; align-items: center; gap: 6px; }
.ic-wpp { flex-shrink: 0; }
.contato .ic-wpp, .contatos .ic-wpp, .menu .ic-wpp { color: #1C8A48; }
.btn .ic-wpp { color: inherit !important; }


/* Bandeiras — sem as cores das marcas (o manual da Shell não permite aplicar a identidade da marca no site da revenda) */
.posto-bandeira { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; background: var(--fundo-claro); color: var(--texto); border: 1px solid var(--linha); }
.selo-shell { display: inline-flex; align-items: center; gap: 20px; background: #fff; color: #404040; padding: 20px 22px 20px 20px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.25; }
.selo-shell img { width: 40px; height: auto; }
.selo-shell, .selo-marca { min-height: 84px; }
.selo-marca { display: inline-flex; align-items: center; justify-content: center; background: #fff; padding: 14px 20px; }
.selo-marca img { height: 56px; width: auto; }
.selo-ipiranga { background: #FFD100; padding: 0; }
.selo-ipiranga img { height: 84px; }


/* Qualidade do combustível */
.qualidade { background: var(--verde-botao); color: #fff; padding: 64px var(--margem); display: flex; flex-direction: column; gap: 32px; }
.qualidade-texto { display: flex; flex-direction: column; gap: 18px; }
.qualidade h2 { font-size: 44px; }
.qualidade-lead { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 620px; }
.qualidade-marcas { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 4px; }
.qb { display: inline-flex; align-items: center; font-size: 18px; font-weight: 800; padding: 10px 18px; border: 1px solid rgba(255,255,255,.55); color: #fff; }
.qualidade-pontos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qualidade-pontos li { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.25); }
.qualidade-pontos li:last-child { border-bottom: 1px solid rgba(255,255,255,.25); }
.qualidade-pontos strong { font-size: 20px; }
.qualidade-pontos span { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88); }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .qualidade { padding: 112px var(--margem); display: grid; grid-template-columns: 1fr 480px; column-gap: 96px; align-items: center; }
  .qualidade h2 { font-size: 80px; line-height: .92; }
  .qualidade-lead { font-size: 20px; }
  .qb { font-size: 20px; padding: 12px 22px; }
  .qualidade-pontos strong { font-size: 22px; }
  .qualidade-pontos span { font-size: 17px; }
  :root { --margem: 64px; }
  h2 { font-size: 60px; }
  .texto-grande { font-size: 19px; }
  .cabecalho { padding: 28px var(--margem); }
  .cabecalho-logo img { height: 60px; }
  .menu-botao { display: none; }
  .menu, body.menu-aberto .menu { display: flex; position: static; flex-direction: row; align-items: center; gap: 32px; padding: 0; background: none; }
  .menu a { font-size: 15px; font-weight: 500; font-stretch: 100%; text-transform: none; padding: 0; border: 0; }
  .menu a:hover { color: var(--verde-claro); }
  .menu-destaque { padding: 12px 18px !important; border: 1px solid rgba(255,255,255,.5) !important; }

  .topo { padding-top: 200px; min-height: 820px; box-sizing: border-box; }
  .topo-grafico { top: 150px; right: 0; width: 640px; }
  .topo-grafico .linha { display: inline; }
  .topo-conteudo { width: 860px; padding: 0 0 72px var(--margem); gap: 26px; }
  .topo-cidades { font-size: 13px; max-width: 680px; }
  .topo h1 { font-size: 104px; line-height: .9; }
  .topo-sub { font-size: 19px; max-width: 540px; }
  .busca { width: 680px; padding: 20px; }
  .busca input { height: 58px; font-size: 17px; }
  .busca-botao { height: 58px; padding: 0 28px; }
  .busca-botao span { display: inline; }

  .confianca { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 var(--margem); }
  .confianca-item { display: flex; flex-direction: column; gap: 10px; padding: 44px 32px 48px; border-bottom: 0 !important; }
  .confianca-item:first-child { padding-left: 0; }
  .confianca-item + .confianca-item, .confianca-nota { border-left: 1px solid rgba(255,255,255,.14); }
  .confianca-item strong { font-size: 72px; }
  .confianca-nota { margin: 0; padding: 44px 0 48px 32px; border-top: 1px solid rgba(255,255,255,.14); display: flex; align-items: flex-end; font-size: 16px; }

  .secao { padding: 104px var(--margem); display: grid; column-gap: 80px; row-gap: 24px; }
  .postos { grid-template-columns: 360px 1fr; align-items: start; }
  .postos-cabeca { position: sticky; top: 24px; }
  .lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .posto h3 { font-size: 21px; }
  .posto-acoes { display: flex; gap: 12px; }
  .posto-acoes .btn { padding: 0 18px; }
  .ver-mais { width: auto; }

  .historia { grid-template-columns: 1fr 480px; }
  .foto-reservada { height: 340px; }
  .linha-tempo { justify-content: center; gap: 40px; margin: 0; }
  .linha-tempo li { padding-left: 28px; font-size: 17px; }
  .ano { font-size: 40px; }

  .promocoes { grid-template-columns: 420px 1fr; align-items: center; }
  .insta-painel { min-height: 360px; padding: 48px; }
  .insta-handle { font-size: 88px; }
  .insta-sub { font-size: 18px; }
      
  .empresas { grid-template-columns: 1fr 520px; column-gap: 96px; }
  .empresas h2 { font-size: 72px; }
  .lista-linhas { font-size: 17px; max-width: 620px; }
  .lista-linhas li { padding: 18px 0; }
  .formulario { padding: 36px; align-self: start; }
  .formulario h3 { font-size: 22px; }
  .campos-2 { grid-template-columns: 1fr 1fr; }

  .trabalhe { grid-template-columns: 1fr 620px; column-gap: 96px; }
  .trabalhe > div { display: flex; flex-direction: column; gap: 24px; }
  .formulario-aberto { padding: 0; }
  .formulario-aberto .btn { align-self: flex-start; }

  .contato { display: flex; }
  .contato-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; }
  .contato-cliente { padding: 40px; }
  .contato-cliente .btn { align-self: flex-start; }
  .contato-adm { padding: 40px 40px 40px 56px; border-top: 4px solid var(--escuro); }
  .contato h3 { font-size: 26px; }
  .contato p, .contato dl { font-size: 16px; }
  .contato dl { grid-template-columns: 120px 1fr; }

  .faixa-pampeano { padding: 30px var(--margem); }
  .faixa-pampeano span { flex-direction: row; align-items: baseline; gap: 16px; }
  .faixa-pampeano small { font-size: 13px; }
  .faixa-pampeano strong { font-size: 19px; }
  .rodape { flex-direction: row; justify-content: space-between; padding: 56px var(--margem); font-size: 14px; }
  .rodape-marca img { height: 64px; }
  .rodape-links { grid-template-columns: auto auto; gap: 4px 48px; align-content: start; }
}