/*
 * base.css — Reset, utilitários globais, tipografia e botões
 * Importa tokens de tokens.css (já deve estar carregado antes)
 */

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

html {
  scroll-behavior: smooth;
  font-size:       16px;
}

body {
  font-family:              var(--f-body);
  color:                    var(--text-main);
  background:               var(--bg-main);
  line-height:              1.65;
  overflow-x:               hidden;
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

button {
  cursor:      pointer;
  border:      none;
  background:  none;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT — CONTAINER
═══════════════════════════════════════════════════════ */
.container {
  max-width: var(--max);
  margin:    0 auto;
  padding:   0 28px;
}

/* ═══════════════════════════════════════════════════════
   TIPOGRAFIA — HELPERS DE SEÇÃO
═══════════════════════════════════════════════════════ */

/* Eyebrow / label de seção */
.eyebrow {
  display:       inline-flex;
  align-items:   center;
  gap:           9px;
  font-family:   var(--f-display);
  font-size:     11px;
  font-weight:   600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:         var(--amber-dark);
  margin-bottom: 14px;
}

.eyebrow::before {
  content:      '';
  display:      block;
  width:        22px;
  height:       2px;
  background:   var(--amber);
  border-radius:2px;
  flex-shrink:  0;
}

/* Variante para seções escuras */
.eyebrow-light {
  color: var(--amber-light);
}
.eyebrow-light::before {
  background: var(--amber-light);
}

/* Eyebrow centrado (adiciona traço dos dois lados) */
.eyebrow-center {
  justify-content: center;
}
.eyebrow-center::before,
.eyebrow-center::after {
  content:      '';
  display:      block;
  width:        22px;
  height:       2px;
  background:   var(--amber);
  border-radius:2px;
  flex-shrink:  0;
}
.eyebrow-center.eyebrow-light::before,
.eyebrow-center.eyebrow-light::after {
  background: var(--amber-light);
}

/* Títulos de seção */
.section-title {
  font-family:   var(--f-display);
  font-size:     clamp(26px, 3.6vw, 42px);
  font-weight:   700;
  line-height:   1.2;
  color:         var(--charcoal);
  margin-bottom: 16px;
  letter-spacing:-.02em;
}
.section-title.light { color: #fff; }

/* Lead / subtítulo de seção */
.section-lead {
  font-size:   17px;
  font-weight: 300;
  color:       var(--text-soft);
  line-height: 1.8;
  max-width:   540px;
}
.section-lead.light { color: rgba(255, 255, 255, .55); }

/* ═══════════════════════════════════════════════════════
   BOTÕES
═══════════════════════════════════════════════════════ */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            9px;
  font-family:    var(--f-display);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: .03em;
  padding:        13px 26px;
  border-radius:  var(--r-xl);
  border:         none;
  cursor:         pointer;
  transition:
    transform    var(--t) var(--ease),
    box-shadow   var(--t) var(--ease),
    background   var(--t),
    color        var(--t),
    border-color var(--t);
}
.btn:hover { transform: translateY(-2px); }

/* Âmbar — ação principal */
.btn-amber {
  background:  var(--amber);
  color:       var(--charcoal);
  box-shadow:  var(--sh-amber);
}
.btn-amber:hover {
  background:  var(--amber-dark);
  box-shadow:  0 10px 32px rgba(245, 185, 66, .42);
}

/* Verde — ação secundária */
.btn-green {
  background:  var(--green);
  color:       var(--charcoal);
  box-shadow:  var(--sh-green);
}
.btn-green:hover {
  background:  var(--green-dark);
  color:       #fff;
  box-shadow:  0 10px 32px rgba(168, 207, 90, .42);
}

/* Outline branco — sobre fundos escuros */
.btn-outline-white {
  background:   transparent;
  color:        #fff;
  border:       1.5px solid rgba(255, 255, 255, .35);
}
.btn-outline-white:hover {
  border-color: var(--amber-light);
  color:        var(--amber-light);
  background:   rgba(245, 185, 66, .06);
}

/* Dark — carvão */
.btn-dark {
  background: var(--charcoal);
  color:      #fff;
}
.btn-dark:hover {
  background:  var(--charcoal-mid);
  box-shadow:  var(--sh-md);
}

/* ═══════════════════════════════════════════════════════
   PILLS — TAGS DE ATRIBUTO
═══════════════════════════════════════════════════════ */
.pills {
  display:   flex;
  gap:       8px;
  margin-top:22px;
  flex-wrap: wrap;
}

.pill {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-family:    var(--f-display);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: .06em;
  padding:        5px 13px;
  border-radius:  20px;
}

.pill-amber {
  background: rgba(245, 185, 66, .12);
  border:     1px solid rgba(245, 185, 66, .25);
  color:      var(--amber-light);
}

.pill-green {
  background: rgba(168, 207, 90, .12);
  border:     1px solid rgba(168, 207, 90, .25);
  color:      var(--green-light);
}

/* ═══════════════════════════════════════════════════════
   VALORES / CARDS DE ÍCONE PEQUENOS
═══════════════════════════════════════════════════════ */
.vals {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-top:            30px;
}

.val {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       15px 16px;
  background:    var(--bg-white);
  border-radius: var(--r-md);
  border:        1px solid var(--gray-200);
  transition:
    border-color var(--t),
    transform    var(--t),
    box-shadow   var(--t);
}
.val:hover {
  border-color: var(--amber);
  transform:    translateY(-2px);
  box-shadow:   var(--sh-sm);
}

.val-ic {
  width:          34px;
  height:         34px;
  border-radius:  9px;
  display:        flex;
  align-items:    center;
  justify-content:center;
  flex-shrink:    0;
}
.val-ic.amber { background: var(--amber-pale); color: var(--amber-dark); }
.val-ic.green { background: var(--green-pale);  color: var(--green-dark); }

.val h4 {
  font-family:   var(--f-display);
  font-size:     13px;
  font-weight:   600;
  color:         var(--charcoal);
  margin-bottom: 2px;
}
.val p {
  font-size:   12px;
  color:       var(--gray-400);
  margin:      0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVO — UTILITÁRIOS
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .btn { justify-content: center; }
  .vals { grid-template-columns: 1fr; }
}