/* Identidade do Projeto 7em2 aplicada à página da aula.
   Mantém o layout original e troca paleta, fontes e botões. */

:root {
  --verde-escuro: #1b3315;
  --verde: #396f2c;
  --verde-claro: #5b9b40;
  --dourado: #e3aa3f;
  --dourado-escuro: #947135;
  --bege: #d4c8c1;
  --creme: #f6f3f1;

  --navy: var(--verde);
  --ink: var(--verde-escuro);
  --sand: var(--dourado);
  --brown: var(--dourado-escuro);
  --paper: var(--creme);
  --font-display: "Lora", Georgia, serif;
  --font-sans: "Sora", "Helvetica Neue", Arial, sans-serif;
}

body { font-family: var(--font-sans); }

/* Texto escuro em fundo claro usa o verde mais fechado dos títulos da página de vendas */
.text-navy { color: var(--verde-escuro); }

/* Fundos de seção */
.bg-navy { background-color: var(--verde); }
.bg-brown { background-color: var(--verde-claro); }
.bg-sand { background: linear-gradient(295deg, #fff 0%, var(--bege) 65%); }
.bg-sand .text-paper, .bg-sand .text-white { color: var(--verde-escuro); }

/* Títulos: Lora, peso médio, como na página de vendas */
.font-display { font-family: var(--font-display); font-weight: 500; }
h1 strong, h2 strong, h1 b, h2 b { font-weight: 700; }

/* Botões dourados com brilho */
@keyframes brilho {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.btn-lead,
.btn-lead.bg-paper, .btn-lead.bg-navy, .btn-lead.bg-brown {
  font-family: var(--font-sans);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  text-shadow: 0 1px 2px rgba(148, 113, 53, .6);
  background: linear-gradient(45deg, #bf9348, #faf398, #e3aa3f, #c69b4d, #c69b4d, #faf398);
  background-size: 200% 200%;
  animation: brilho 5s ease-in-out infinite;
  border-radius: 999px;
  box-shadow: inset 0 0 5px 5px #ffffff25, 0 5px 0 0 var(--dourado-escuro);
  transition: transform .2s;
}
.btn-lead:hover { transform: scale(1.04); }
.btn-lead:active { transform: scale(1); box-shadow: inset 0 0 5px 5px #ffffff25, 0 2px 0 0 var(--dourado-escuro); }

/* Folhas decorativas da página de vendas */
.folha { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
.folha-1 { width: 120px; left: -30px; top: 55%; transform: rotate(-15deg); }
.folha-2 { width: 150px; right: -40px; bottom: -30px; transform: rotate(20deg); }
@media (max-width: 640px) {
  .folha-1 { width: 70px; left: -25px; }
  .folha-2 { width: 90px; right: -30px; }
}