/**
 * base.css
 * Variáveis, reset, base do body, utilitários e botões globais.
 * Localização: cursos/online/compreometodo3m/css/base.css
 */

/* ── Fontes ── */
@font-face {
  font-family: 'Aboreto';
  src: url('/_shared/fonts/otf/aboreto-regular.otf') format('opentype'),
       url('/_shared/fonts/ttf/aboreto-regular.ttf') format('truetype');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

/* ── Variáveis ── */
:root {
  --verde-escuro:    #152a21;
  --verde-musgo:     #2F4F3F;
  --verde-medio:     #3d6650;
  --dourado:         #bfa06a;
  --dourado-claro:   #d4b483;
  --dourado-brilho:  #e8c98c;
  --algodao-claro:   #F5F2EC;
  --algodao-medio:   #E7D8C3;
  --algodao-escuro:  #d4c4a8;
  --texto-escuro:    #152a21;
  --texto-claro:     #F5F2EC;
  --sombra-suave:    0 4px 24px rgba(0,0,0,0.18);
  --sombra-forte:    0 8px 40px rgba(0,0,0,0.35);
  --fonte-titulo:    'Aboreto', Georgia, 'Times New Roman', serif;
  --fonte-corpo:     'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --raio:            10px;
  --max-largura:     1160px;
  --header-h:        96px;
}

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

html {
  scroll-behavior:          smooth;
  scroll-padding-top:       var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:             var(--fonte-corpo);
  background-image:        url('/_shared/assets/images/background/background_cont.webp');
  background-attachment:   fixed;
  background-size:         cover;
  background-position:     center;
  background-repeat:       no-repeat;
  color:                   var(--texto-escuro);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
}

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

/* ── Container ── */
.container {
  width:     100%;
  max-width: var(--max-largura);
  margin:    0 auto;
  padding:   0 24px;
}

/* ── Padding padrão de seção ── */
.secao {
  padding: 88px 0;
}

/* ── Cabeçalho de seção ── */
.secao-cabecalho {
  text-align:    center;
  margin-bottom: 56px;
}

.secao-tag {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--dourado);
  margin-bottom:  14px;
}

.secao-titulo {
  font-family:   var(--fonte-titulo);
  font-size:     clamp(26px, 3.5vw, 44px);
  line-height:   1.2;
  margin-bottom: 16px;
  color:         var(--dourado);
}

.secao-titulo-claro {
  color: var(--algodao-claro);
}

.secao-subtitulo {
  font-size:   clamp(15px, 2vw, 18px);
  line-height: 1.75;
  opacity:     0.88;
  max-width:   640px;
  margin:      0 auto;
}

.linha-dourada {
  display:       block;
  width:         56px;
  height:        2px;
  background:    var(--dourado);
  margin:        0 auto 32px;
  border-radius: 2px;
}

/* ── Botão CTA principal ── */
.btn-cta {
  display:         inline-block;
  padding:         18px 36px;
  background:      linear-gradient(135deg, var(--dourado-brilho) 0%, var(--dourado) 60%, #a8894f 100%);
  color:           var(--verde-escuro);
  font-family:     var(--fonte-corpo);
  font-weight:     800;
  font-size:       16px;
  letter-spacing:  0.5px;
  text-transform:  uppercase;
  text-decoration: none;
  border:          none;
  border-radius:   var(--raio);
  cursor:          pointer;
  box-shadow:      0 6px 24px rgba(191,160,106,0.45);
  transition:      transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-cta:hover {
  transform:  translateY(-2px);
  box-shadow: 0 10px 32px rgba(191,160,106,0.55);
  filter:     brightness(1.08);
}

.btn-cta:active {
  transform: translateY(0);
}

.btn-cta-grande {
  font-size: 17px;
  padding:   22px 48px;
}

.btn-header {
  font-size: 13px;
  padding:   11px 22px;
}

/* ── Separador dourado ── */
.separador {
  width:      100%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
  margin:     0;
  border:     none;
}

/* ── Animação de entrada ── */
.animar {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.animar.visivel {
  opacity:   1;
  transform: translateY(0);
}