/*
Theme Name: Top Lopes
Theme URI: https://toplopes.com.br
Author: Imediatto Comunicação
Description: Tema institucional da Top Lopes Engenharia — topografia, construção, loteamento e usucapião.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: toplopes
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #0b4ea2;
  --navy-light: #1a62bc;
  --navy-dark:  #072f6b;
  --orange:     #f58320;
  --orange-dk:  #d9700f;
  --white:      #FFFFFF;
  --off-white:  #F7F8FA;
  --gray-light: #EAECF0;
  --gray:       #8A93A6;
  --gray-dark:  #4A5568;
  --text:       #1A1A2E;
  --font-head:  'Barlow', sans-serif;
  --font-cond:  'Barlow Condensed', sans-serif;
  --font-body:  'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); overflow-x: hidden; }

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

/* ── COMPONENTES COMPARTILHADOS (usados em várias páginas) ───────────── */
.section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.section-label::before { content: ''; display: block; width: 32px; height: 2px; background: var(--orange); }
.section-label span {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--orange);
}

.section-title {
  font-family: var(--font-cond);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 12px;
}
.section-subtitle {
  font-size: 18px; font-weight: 300;
  color: var(--gray-dark);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 56px;
}

.btn-outline {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--navy);
  border: 2px solid var(--navy);
  padding: 14px 36px;
  text-decoration: none;
  border-radius: 2px;
  transition: background .2s, color .2s;
  display: inline-block;
}
.btn-outline:hover { background: var(--navy); color: var(--white); }