/* ===================================================================
   FERA — Sistema de Design (por Moara)
   Direção: agro-industrial + energia elétrica.
   Base azul-marinho robusta, amarelo = energia, títulos condensados.
   =================================================================== */

:root{
  --navy:#003087;
  --navy-2:#0047AB;
  --navy-900:#001f56;
  --gold:#FFD700;
  --gold-2:#FFC400;
  --ink:#0f172a;
  --muted:#5b6472;
  --line:#e7eaf0;
  --bg:#f4f6f9;
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

html{ scroll-behavior:smooth; }
body{
  font-family:'Barlow', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  color:var(--ink);
  background:var(--bg);
}

/* ---------- Tipografia condensada de pôster do campo ---------- */
h1,h2,h3,h4,.font-display{
  font-family:'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing:.005em;
}
h1{ font-weight:800; line-height:1.02; }
h2{ font-weight:800; line-height:1.05; }
h3{ font-weight:700; }
/* títulos de seção ganham mais presença */
section h2{ letter-spacing:.01em; }

/* ---------- Traço de energia dourado no topo do header ---------- */
#site-header{ transition:box-shadow .3s ease, background-color .3s ease; }
#site-header::after{
  content:""; display:block; height:3px;
  background:linear-gradient(90deg, var(--gold) 0%, #fff0 30%, var(--gold) 55%, #fff0 80%, var(--gold) 100%);
  opacity:.9;
}
#site-header.scrolled{ box-shadow:0 10px 30px -12px rgba(0,32,86,.45); }

/* logo com leve reação */
#site-header a img{ transition:transform .25s ease; }
#site-header a:hover img{ transform:scale(1.04); }

/* ---------- Botões: energia no hover ---------- */
a > button, button.cta{
  transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease, background-color .16s ease;
  border-radius:.6rem;
}
a > button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px -10px rgba(0,48,135,.5);
}
a > button:active{ transform:translateY(0); }

/* ---------- Reveal on scroll (vividez) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Kicker (rótulo dourado acima dos títulos) ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.8rem; color:var(--gold-2);
}
.kicker::before{ content:"⚡"; font-size:.9em; }

/* ---------- Cards de produto premium ---------- */
.fera-card{
  background:#fff; border:1px solid var(--line); border-radius:1rem;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.fera-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -20px rgba(0,32,86,.35);
  border-color:#cfd6e4;
}
.fera-card .thumb{ position:relative; height:12rem; background:#f7f9fc; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.fera-card .thumb img{ width:100%; height:100%; object-fit:contain; padding:.9rem; transition:transform .35s ease; }
.fera-card:hover .thumb img{ transform:scale(1.06); }
.fera-card .chip{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.66rem;
  background:var(--gold); color:var(--navy); padding:.2rem .55rem; border-radius:.4rem;
}
.fera-card .price{ font-family:'Barlow Condensed',sans-serif; font-weight:800; color:var(--navy); font-size:1.4rem; line-height:1; }

/* ---------- Fundo com leve textura elétrica nas seções navy ---------- */
.fera-texture{
  position:relative;
}
.fera-texture::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,215,0,.10) 1px, transparent 1.4px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000,transparent 70%);
}

/* seleção com a marca */
::selection{ background:var(--gold); color:var(--navy); }

/* foco acessível */
a:focus-visible, button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:.4rem; }

/* botão flutuante de WhatsApp */
.wa-float{
  position:fixed; left:1rem; bottom:1rem; z-index:70;
  width:3.4rem; height:3.4rem; border-radius:999px;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -8px rgba(37,211,102,.6); transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08); }