@import url('tokens.css');

/* ─── Reset mínimo ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Base ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-corpo);
  font-size: var(--fs-3);
  line-height: 1.6;
  color: var(--texto-principal);
  background: var(--fava-verde-escuro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--texto-principal);
}
h1 { font-size: var(--fs-7); }
h2 { font-size: var(--fs-6); }
h3 { font-size: var(--fs-5); }
h4 { font-size: var(--fs-4); font-weight: 600; }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-8); }
  h2 { font-size: var(--fs-7); }
}

p { color: var(--texto-principal); max-width: 60ch; }
p.muted { color: var(--texto-suave); }
em { font-style: italic; color: var(--fava-verde-claro); }
strong { font-weight: 600; }

/* ─── Layout ──────────────────────────────────────────── */
.container { width: min(100% - 32px, var(--container-max)); margin-inline: auto; }
.container-narrow { width: min(100% - 32px, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--s-8); }
.section-tight { padding-block: var(--s-7); }
@media (min-width: 768px) {
  .section { padding-block: var(--s-10); }
}

.bg-elev { background: var(--fava-verde-escuro-2); }
.bg-deep { background: var(--fava-verde-escuro-1); }

.grid-2 { display: grid; gap: var(--s-5); }
.grid-3 { display: grid; gap: var(--s-5); }
.grid-4 { display: grid; gap: var(--s-5); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ─── Botões ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-titulo); font-weight: 600; font-size: var(--fs-3);
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--fava-verde-claro); color: var(--fava-verde-escuro); }
.btn-primary:hover { background: var(--fava-verde-claro-dim); }
.btn-ghost { background: transparent; color: var(--texto-principal); border: 1px solid var(--texto-mudo); }
.btn-ghost:hover { border-color: var(--fava-verde-claro); color: var(--fava-verde-claro); }
.btn:active { transform: translateY(1px); }

/* ─── Cards ────────────────────────────────────────────── */
.card {
  background: var(--fava-verde-escuro-2);
  border: 1px solid var(--fava-verde-escuro-1);
  border-radius: var(--radius-md);
  padding: var(--s-6);
}
.card h3 { margin-bottom: var(--s-3); }
.card.stack { display: flex; flex-direction: column; align-items: flex-start; }
.card.stack .btn:last-child { margin-top: auto; }

/* ─── Forms ────────────────────────────────────────────── */
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-2); color: var(--texto-suave); }
.field input, .field textarea, .field select {
  background: var(--fava-verde-escuro-1);
  color: var(--texto-principal);
  border: 1px solid var(--fava-verde-escuro-2);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-3);
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--fava-verde-claro);
}
.field .error-msg { color: #ff7a7a; font-size: var(--fs-1); display: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #ff7a7a; }
.field.has-error .error-msg { display: block; }
.radio-group { display: grid; gap: var(--s-2); }
.radio-group label { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; color: var(--texto-principal); }

/* ─── Header ────────────────────────────────────────────── */
.site-header {
  background: var(--fava-verde-escuro);
  border-bottom: 1px solid var(--fava-verde-escuro-2);
}
.site-header .inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s-4); }
.site-header .logo { color: var(--fava-verde-claro); height: 28px; }
.site-header nav ul { display: none; gap: var(--s-5); }
@media (min-width: 768px) { .site-header nav ul { display: flex; } }
.site-header nav a { color: var(--texto-suave); font-size: var(--fs-2); }
.site-header nav a:hover { color: var(--fava-verde-claro); }

/* ─── Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--fava-verde-escuro-1);
  padding-block: var(--s-7);
  color: var(--texto-suave);
  font-size: var(--fs-2);
}
.site-footer .cnpj { color: var(--texto-mudo); }
.site-footer a { color: var(--texto-principal); }
.site-footer a:hover { color: var(--fava-verde-claro); }

/* ─── Hero ──────────────────────────────────────────────── */
.hero { padding-block: var(--s-10) var(--s-8); }
.hero h1 { max-width: 18ch; }
.hero p.sub { color: var(--texto-suave); font-size: var(--fs-4); margin-top: var(--s-5); max-width: 60ch; }
.hero .cta-row { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ─── LGPD banner ───────────────────────────────────────── */
.lgpd {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--fava-verde-escuro-1); border-top: 1px solid var(--fava-verde-escuro-2);
  padding: var(--s-4); display: none;
}
.lgpd.visible { display: block; }
.lgpd .inner { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.lgpd p { font-size: var(--fs-2); color: var(--texto-suave); margin: 0; }
.lgpd .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ─── WhatsApp float ────────────────────────────────────── */
.wa-float {
  position: fixed; bottom: 20px; right: 20px; z-index: 55;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.3); cursor: pointer; border: 0;
}
.wa-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: none; align-items: center; justify-content: center; z-index: 70;
}
.wa-modal.open { display: flex; }
.wa-modal .inner {
  background: var(--fava-verde-escuro-2); padding: var(--s-6);
  border-radius: var(--radius-md); width: min(100% - 32px, 420px);
}

/* ─── Utilities ────────────────────────────────────────── */
.text-center { text-align: center; }
.muted { color: var(--texto-suave); }
.accent { color: var(--fava-verde-claro); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}