/* ===== Cores (da logo). Edite aqui para mudar o site todo ===== */
:root {
  --azul: #2b506e;
  --azul-escuro: #0f2236;
  --laranja: #e68f0f;
  --laranja-claro: #ff9a0a;
  --fundo: #f6f8fa;
  --texto: #1c2a38;
  --branco: #ffffff;
  --fonte-titulo: "Michroma", "Arial Black", sans-serif;
  --fonte-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --largura: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--fonte-texto); font-size: 1.0625rem; line-height: 1.6; color: var(--texto); background: var(--fundo); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.25; margin: 0; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

/* ===== Botões ===== */
.botao { display: inline-block; padding: .85rem 1.5rem; background: var(--laranja); color: var(--azul-escuro); font-weight: 600; text-decoration: none; border-radius: 6px; border: 2px solid var(--laranja); transition: background .2s; }
.botao:hover { background: var(--laranja-claro); }
.botao--pequeno { padding: .5rem 1rem; font-size: .95rem; }
.botao--grande { font-size: 1.4rem; padding: 1rem 2rem; font-family: var(--fonte-titulo); }
.botao--contorno { background: transparent; color: var(--azul); border-color: var(--azul); }
.botao--contorno:hover { background: var(--azul); color: var(--branco); }
.botao--contorno-claro { background: transparent; color: var(--branco); border-color: var(--branco); }
.botao--contorno-claro:hover { background: var(--branco); color: var(--azul-escuro); }

/* ===== Topo ===== */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.25rem; background: var(--azul); color: var(--branco); }
.topo__marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-family: var(--fonte-titulo); }
.topo__marca img { background: var(--branco); border-radius: 6px; padding: 2px; }
.topo__nav { display: flex; gap: 1.5rem; }
.topo__nav a { text-decoration: none; font-weight: 600; }
.topo__nav a:hover { color: var(--laranja); }

/* ===== Herói ===== */
.heroi { max-width: var(--largura); margin: 0 auto; padding: 4rem 1.25rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.heroi h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); color: var(--azul); }
.heroi p { margin: 1.25rem 0 2rem; max-width: 52ch; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.heroi__logo { width: 100%; max-width: 440px; justify-self: center; }

/* ===== Seções ===== */
.secao { max-width: var(--largura); margin: 0 auto; padding: 4rem 1.25rem; }
.secao h2, .chamada h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--azul); margin-bottom: 1.75rem; }
.secao__intro { max-width: 60ch; margin: -.75rem 0 2rem; }
.secao--escura { max-width: none; background: var(--azul-escuro); color: var(--branco); }
.secao--escura > * { max-width: var(--largura); margin-left: auto; margin-right: auto; }
.secao--escura h2 { color: var(--branco); }

/* ===== Serviços ===== */
.servicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.servico { padding: 1.5rem; background: var(--branco); border-top: 6px solid var(--azul); border-radius: 4px 4px 14px 4px; }
.servico--laranja { border-top-color: var(--laranja); }
.servico h3 { font-size: 1.05rem; color: var(--azul); margin-bottom: .6rem; }
.servico p { margin: 0; }
.atendimento { margin-top: 1.75rem; font-weight: 600; color: var(--azul); }

/* ===== Galeria de dicas ===== */
.galeria { list-style: none; padding: 0; margin: 0 auto 2.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.galeria img { width: 100%; border-radius: 6px; }

/* ===== Chamada final ===== */
.chamada { background: var(--laranja); color: var(--azul-escuro); text-align: center; padding: 4rem 1.25rem; }
.chamada h2 { color: var(--azul-escuro); margin-bottom: .75rem; }
.chamada p { margin: 0 0 1.75rem; }
.chamada .botao { background: var(--azul-escuro); border-color: var(--azul-escuro); color: var(--branco); }
.chamada .botao:hover { background: var(--azul); border-color: var(--azul); }

/* ===== Rodapé ===== */
.rodape { background: var(--azul); color: var(--branco); text-align: center; padding: 2.5rem 1.25rem; }
.rodape img { margin: 0 auto 1rem; background: var(--branco); border-radius: 8px; padding: 3px; }
.rodape p { margin: 0 0 .75rem; }
.rodape a { color: var(--laranja-claro); }
.rodape__copia { font-size: .85rem; opacity: .8; margin-top: 1rem; }

/* ===== Celular ===== */
@media (max-width: 760px) {
  .heroi { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .heroi__logo { max-width: 260px; order: -1; }
  .topo__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao { transition: none; }
}