/* ---------- Inter, autohospedada ----------
   Servida do próprio domínio em vez do CDN do Google: não entrega o IP de
   cada visitante a terceiro e tira fonts.googleapis.com/gstatic.com da CSP.
   É a fonte variável (peso 400 a 900), então um arquivo cobre todos os pesos
   que o projeto usa. Só latin e latin-ext — cobrem o português inteiro. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fontes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fontes/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Rodolatini - Site institucional (mobile first) */

:root {
  --verde: #0D6B3C;
  --verde-escuro: #0A5530;
  --amarelo: #FFC629;
  --azul: #3B4A9F;
  --preto: #131313;
  --texto: #1E2724;
  --texto-suave: #5B6B64;
  --fundo: #FFFFFF;
  --fundo-suave: #F3F6F4;
  --borda: #DDE5E0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- Topo ---------- */
.site-topo {
  background: #fff;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-topo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-logo img { height: 40px; display: block; }
.site-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--fundo-suave); }
.site-nav a.ativo { color: var(--verde); }
.site-nav-restrito {
  background: var(--verde);
  color: #fff !important;
  font-weight: 700;
}
.site-nav-restrito:hover { background: var(--verde-escuro) !important; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--verde-escuro) 0%, var(--verde) 70%, #0E7A45 100%);
  color: #fff;
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  background: rgba(255, 198, 41, .14);
  border-radius: 50%;
}
.hero h1 { font-size: 30px; font-weight: 900; line-height: 1.2; margin: 0 0 14px; max-width: 640px; }
.hero h1 span { color: var(--amarelo); }
.hero p { font-size: 17px; opacity: .94; max-width: 560px; margin: 0 0 26px; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* O ::after decorativo é posicionado e, por ser o último filho, pintaria por
   cima do conteúdo. O z-index mantém texto e mapa à frente dele. */
.hero > .container { position: relative; z-index: 1; }

/* Mapa de atendimento no hero: empilhado abaixo das ações no celular,
   ao lado do texto a partir de 900px. */
/* No celular o mapa é contido de propósito: cada pixel dele empurra a próxima
   seção para fora da dobra. */
/* Sem ponto de quebra fixo. Antes o mapa descia abaixo dos botões em qualquer
   janela menor que 900px — e isso acontece com frequência, porque a escala de
   tela do Windows a 125% ou 150% reduz a largura em pixels CSS: um monitor de
   1366px a 150% vira 910px, à beira do corte.
   Agora as duas colunas convivem enquanto couberem e o mapa desce sozinho
   quando o texto não tem mais largura mínima. */
.hero-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.hero-texto { flex: 1 1 340px; min-width: 0; }
.hero-mapa {
  display: block;
  /* 42% reproduz o tamanho já aprovado no desktop (462px em tela de 1440). */
  flex: 0 1 42%;
  width: 100%;
  max-width: 460px;
  min-width: 230px;
  height: auto;
  /* Centraliza quando desce para a própria linha; lado a lado o texto absorve
     a folga e estas margens ficam em zero. */
  margin-inline: auto;
}
/* Em telas estreitas o mapa é contido: cada pixel dele empurra a próxima seção
   para fora da dobra. */
@media (max-width: 700px) {
  /* Aqui o mapa já está sozinho na linha: precisa crescer até o teto, senão
     ficaria com os 42% da base (141px numa tela de 375px). */
  .hero-mapa { flex: 1 1 240px; max-width: 240px; min-width: 0; }
}

.botao-site {
  display: inline-block;
  background: var(--amarelo);
  color: var(--preto);
  font-weight: 800;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s, box-shadow .12s;
}
.botao-site:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.botao-site-contorno {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
}

/* ---------- Seções ---------- */
.secao { padding: 56px 0; }
.secao-suave { background: var(--fundo-suave); }

.secao-titulo { text-align: center; margin-bottom: 36px; }
.secao-titulo .rotulo {
  display: inline-block;
  color: var(--verde);
  background: #E6F4EC;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 10px;
}
.secao-titulo h2 { font-size: 26px; font-weight: 900; margin: 0 0 8px; }
.secao-titulo p { color: var(--texto-suave); max-width: 620px; margin: 0 auto; }

.grade-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card-servico {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(19,40,30,.05);
}
.card-servico .icone {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #E6F4EC;
  color: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}
.card-servico h3 { margin: 0 0 8px; font-size: 18px; }
.card-servico p { color: var(--texto-suave); margin: 0; font-size: 15px; }
.lista-valores { margin: 6px 0 0; padding-left: 18px; color: var(--texto-suave); font-size: 15px; }
.lista-valores li { margin-bottom: 3px; }

/* ---------- Destaques numéricos ---------- */
.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center; }
.metrica .valor { font-size: 30px; font-weight: 900; color: var(--verde); }
.metrica .rotulo { color: var(--texto-suave); font-size: 14px; }

/* ---------- CTA ---------- */
.cta {
  background: var(--preto);
  color: #fff;
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
}
.cta h2 { font-size: 24px; margin: 0 0 8px; }
.cta p { opacity: .85; margin: 0 0 20px; }

/* ---------- Formulário de contato ---------- */
.form-contato { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.form-contato label { font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; }
.form-contato input, .form-contato textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.form-contato input:focus, .form-contato textarea:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
.aviso-form { padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.aviso-form.ok { background: #E6F4EC; color: #0A5530; }
.aviso-form.falha { background: #FBEAE8; color: #92271B; }

.info-contato { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 30px; }
.info-contato .item {
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.info-contato .item strong { display: block; margin-bottom: 4px; }
.info-contato .item-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #E6F4EC; color: var(--verde);
  margin-bottom: 12px;
}
.info-contato .item-ico svg { width: 22px; height: 22px; }
.info-contato .item-ico-zap { background: #E4F8EC; color: #1FAF54; }

/* ---------- Rodapé ---------- */
.site-rodape { background: var(--preto); color: #cfd8d3; margin-top: 56px; }
.site-rodape-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 44px 20px 28px;
}
.rodape-logo { height: 34px; margin-bottom: 12px; }
.site-rodape h4 { color: #fff; margin: 0 0 10px; font-size: 15px; }
.site-rodape a { display: block; color: #cfd8d3; text-decoration: none; margin-bottom: 6px; font-size: 14px; }
.site-rodape a:hover { color: var(--amarelo); }
.site-rodape p { margin: 0 0 6px; font-size: 14px; }
.site-rodape-base { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; font-size: 13px; color: #9aa8a1; }

/* ---------- Telas maiores ---------- */
@media (min-width: 720px) {
  .hero { padding: 90px 0 100px; }
  .hero h1 { font-size: 44px; }
  .grade-cards { grid-template-columns: repeat(2, 1fr); }
  .metricas { grid-template-columns: repeat(4, 1fr); }
  .info-contato { grid-template-columns: repeat(3, 1fr); }
  .site-rodape-grade { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1000px) {
  .grade-cards { grid-template-columns: repeat(3, 1fr); }
  .secao { padding: 72px 0; }
}