@charset "UTF-8";
/* ==========================================================================
   CRISTOFOLI — Design Tokens
   Derivado de main.scss (cliente) + mockups fornecidos.
   Nunca usar valores hardcoded nos componentes: sempre estas variáveis.

   Gerado a partir de scss/tokens.scss — não edite css/tokens.css diretamente.
   Compilar com: npm run build:css
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap");
:root {
  /* ---- Paleta da marca (main.scss) ---- */
  --marrom: #5a3d33;
  --laranja: #cb4b32;
  --amarelo: #f9e7b6;
  --vinho-escuro: #832945;
  --vinho-claro: #a03c54;
  --verde-escuro: #4d6426;
  --verde-claro: #95a56d;
  /* ---- Neutros derivados dos mockups ---- */
  --creme: #f7f1e1; /* fundo padrão das páginas */
  --creme-claro: #fbf6ea; /* fundo alternado / formas claras */
  --amarelo-claro: #f6ecc6; /* mega-menu / formas de padrão */
  --branco: #ffffff;
  --marrom-escuro: #2c1d16; /* ênfase (bold sans nos títulos) */
  --texto: #5a3d33; /* corpo de texto padrão */
  --texto-suave: #5a3d33; /* legendas / apoios */
  --linha: rgba(90, 61, 51, 0.25); /* divisórias sutis */
  /* ---- Tipografia ---- */
  --font-serif: "Libre Baskerville", Georgia, serif;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  /* ---- Escala tipográfica (desktop base do main.scss, responsiva) ---- */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* 36 → 60px */
  --fs-h2: clamp(2.35rem, 1.3rem + 4.4vw, 4.0625rem); /* 38 → 65px */
  --fs-h3: clamp(1.375rem, 1rem + 1.6vw, 1.875rem); /* 22 → 30px */
  --fs-h4: clamp(1.375rem, 1rem + 1.6vw, 1.875rem); /* 22 → 30px */
  --fs-h5: 1rem; /* 16px */
  --fs-text-m: 1rem; /* 16px */
  --fs-text-g: 1.25rem; /* 20px */
  --fs-link-rodape: 1rem; /* 16px */
  --fs-min-rodape: 0.875rem; /* 14px */
  /* ---- Espaçamento ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;
  /* ---- Layout ---- */
  --container-max: 1320px;
  --radius-pill: 999px;
  --radius-sm: 4px;
  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 0.9s;
  --header-h: 84px;
}

/* ==========================================================================
   Classes tipográficas (espelham main.scss, agora responsivas)
   ========================================================================== */
.h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.16;
  text-transform: uppercase;
}

.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.h5 {
  font-family: var(--font-serif);
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.3;
}

.text-m {
  font-family: var(--font-sans);
  font-size: var(--fs-text-m);
  font-weight: 400;
  line-height: 1.6;
}

.text-g {
  font-family: var(--font-sans);
  font-size: var(--fs-text-g);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.text-link-rodape {
  font-family: var(--font-sans);
  font-size: var(--fs-link-rodape);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.text-min-rodape {
  font-family: var(--font-sans);
  font-size: var(--fs-min-rodape);
  font-weight: 400;
  line-height: 1.3;
}

.button-menu {
  font-family: var(--font-sans);
  font-size: var(--fs-link-rodape);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

/* ---- Utilitários de cor da marca ---- */
.text-serif {
  font-family: var(--font-serif);
}

.text-sans {
  font-family: var(--font-sans);
}

.c-marrom {
  color: var(--marrom);
}

.c-marrom-esc {
  color: var(--marrom-escuro);
}

.c-laranja {
  color: var(--laranja);
}

.c-amarelo {
  color: var(--amarelo);
}

.c-vinho {
  color: var(--vinho-escuro);
}

.c-verde {
  color: var(--verde-escuro);
}

.c-branco {
  color: var(--branco);
}

.bg-creme {
  background-color: var(--creme);
}

.bg-amarelo {
  background-color: var(--amarelo);
}

.bg-laranja {
  background-color: var(--laranja);
}

.bg-vinho {
  background-color: var(--vinho-escuro);
}

.bg-verde {
  background-color: var(--verde-escuro);
}

.bg-branco {
  background-color: var(--branco);
}