/* ============================================================
   ElevaFlow360 — DESIGN SYSTEM (o DNA do site)
   Direção: "Fluxo Premium (escuro)"
   Marca: navy #0F2A71 + dourado #AD9056→#E1C683 + Gilroy
   ============================================================ */

/* ---------- Tipografia: Gilroy (família da marca) ---------- */
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-UltraLight.otf") format("opentype"); font-weight:200; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-Light.otf")      format("opentype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-Regular.otf")    format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-Medium.otf")     format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-SemiBold.otf")   format("opentype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-Bold.otf")       format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-ExtraBold.otf")  format("opentype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../fonts/Gilroy-Black.otf")      format("opentype"); font-weight:900; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  /* Paleta — navy profundo (escuro) + dourado */
  --navy-950:#04060f;
  --navy-900:#070e26;
  --navy-850:#0a1330;
  --navy-800:#0c1838;
  --navy-700:#0f2a71;   /* primária da marca */
  --navy-600:#163a8f;
  --navy-line:rgba(255,255,255,.08);

  --gold-300:#efdca8;
  --gold-400:#e1c683;   /* dourado claro */
  --gold-500:#c9a85f;
  --gold-600:#ad9056;   /* dourado profundo */
  --gold-grad:linear-gradient(135deg,#e1c683 0%,#ad9056 100%);
  --gold-grad-soft:linear-gradient(135deg,#efdca8 0%,#c9a85f 100%);

  --ink:#efe8dc;                 /* branco-quente (bone) — luxo escuro */
  --ink-soft:rgba(239,232,220,.74);
  --ink-mute:rgba(239,232,220,.52);
  --ink-faint:rgba(239,232,220,.34);

  /* Tipografia */
  --font:"Gilroy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-eyebrow:.78rem;
  --lh-tight:1.04;
  --lh-body:1.6;

  /* Espaçamento / ritmo */
  --section-y:5.5rem;        /* fixo (rem) — NÃO escala com a tela */
  --container:1180px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --radius:18px;
  --radius-lg:26px;

  /* Sombra / glow */
  --glow-gold:0 0 0 1px rgba(225,198,131,.20), 0 18px 50px -18px rgba(225,198,131,.45);
  --shadow-card:0 24px 60px -30px rgba(0,0,0,.7);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  font-weight:400;
  background:var(--navy-950);
  color:var(--ink);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(225,198,131,.28);color:#fff}

/* ---------- Tipografia: escala e hierarquia ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-400);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-grad);opacity:.8}

h1,.h1{font-weight:900;line-height:var(--lh-tight);letter-spacing:-.025em;
  font-size:clamp(2.6rem,6.2vw,5rem);text-wrap:balance}
h2,.h2{font-weight:800;line-height:1.1;letter-spacing:-.02em;
  font-size:clamp(2.1rem,4.6vw,3.45rem);text-wrap:balance}
h3,.h3{font-weight:700;line-height:1.18;letter-spacing:-.01em;
  font-size:clamp(1.25rem,2vw,1.6rem)}
.lead{font-size:clamp(1.06rem,1.5vw,1.28rem);color:var(--ink-soft);font-weight:400}
.muted{color:var(--ink-mute)}
.gold{color:var(--gold-400)}
.gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-text.shimmer{background:linear-gradient(100deg,#ad9056 0%,#efdca8 45%,#e1c683 55%,#ad9056 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldShimmer 7s linear infinite}
@keyframes goldShimmer{to{background-position:-240% 0}}
@media (prefers-reduced-motion:reduce){.gold-text.shimmer{animation:none}}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y)}
.center{text-align:center}
.stack-sm>*+*{margin-top:.9rem}
.stack>*+*{margin-top:1.4rem}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:700;font-size:.98rem;letter-spacing:.01em;
  padding:1rem 1.6rem;border-radius:999px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  will-change:transform;
}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-gold{
  color:#1a1206;background:var(--gold-grad);
  box-shadow:var(--glow-gold);
}
.btn-gold:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(225,198,131,.35),0 26px 60px -16px rgba(225,198,131,.6)}
.btn-ghost{
  color:var(--ink);border:1px solid var(--navy-line);
  background:rgba(255,255,255,.02);backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:rgba(225,198,131,.5);color:#fff;transform:translateY(-2px)}

/* ---------- Cards ---------- */
.card{
  position:relative;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--navy-line);
  box-shadow:var(--shadow-card);
  padding:clamp(1.5rem,3vw,2.2rem);
  overflow:hidden;
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.card::before{ /* glow dourado sutil no topo */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(225,198,131,.35),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:rgba(225,198,131,.22)}
.card:hover::before{opacity:1}

/* ---------- Animação: reveal (fade+blur+slide com stagger) ---------- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(8px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Divisor / detalhes ---------- */
.hr-gold{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(225,198,131,.4),transparent)}
.grain::after{ /* textura sutil anti-"chapado" */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}