/* ============================================================
   Victor Margosian — DESIGN SYSTEM (o DNA)
   Marca pessoal: Strategic Black + Pink Pulse + Neutral Sand
   Tipografia: Morland (serifa display) + Helvena (grotesk)
   Escola: editorial / luxo escuro + movimento — minimalista, muito respiro
   ============================================================ */

/* ---------- Morland (serifa elegante) ---------- */
@font-face{font-family:"Morland";src:url("../fonts/Morland-ExtraLight.ttf") format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Morland";src:url("../fonts/Morland-Light.ttf")      format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Morland";src:url("../fonts/Morland-Regular.ttf")    format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Morland";src:url("../fonts/Morland-Italic.ttf")     format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Morland";src:url("../fonts/Morland-Medium.ttf")     format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Morland";src:url("../fonts/Morland-SemiBold.ttf")   format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Morland";src:url("../fonts/Morland-Bold.ttf")       format("truetype");font-weight:700;font-display:swap}
/* ---------- Helvena (grotesk) ---------- */
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Light.ttf")    format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Regular.ttf")  format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Medium.ttf")   format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Helvena";src:url("../fonts/Helvena-Bold.ttf")     format("truetype");font-weight:700;font-display:swap}

:root{
  /* Paleta da marca — fundo escuro neutro */
  --black:#171717;        /* fundo escuro (anterior) */
  --black-2:#1f1f1f;
  --surface:#242424;      /* cards */
  --pink:#ED6EA1;         /* Pink Pulse — destaque/CTA */
  --pink-200:#f4a3c4;
  --pink-soft:rgba(237,110,161,.12);
  --sand:#E8DABC;         /* Neutral Sand */
  --espresso:#4B2A00;     /* acento premium */
  --gray:#81807F;         /* Concret Gray */

  --ink:#F2EEE6;          /* texto principal (off-white quente) */
  --ink-soft:rgba(242,238,230,.66);
  --ink-mute:rgba(242,238,230,.40);
  --line:rgba(255,255,255,.09);

  --serif:"Morland",Georgia,"Times New Roman",serif;
  --sans:"Helvena",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Espaçamento FIXO (rem) — nunca vh */
  --section-y:6.5rem;
  --container:1180px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --radius:16px;
  --radius-lg:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;background:var(--black);color:var(--ink);
  line-height:1.6;-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(237,110,161,.30);color:#fff}

/* ---------- Tipografia ---------- */
.eyebrow{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pink);display:inline-flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--pink)}

h1,.h1{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.015em;
  font-size:clamp(2.8rem,6.6vw,5.4rem);text-wrap:balance}
h2,.h2{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(2.1rem,4.6vw,3.5rem);text-wrap:balance}
h3,.h3{font-family:var(--serif);font-weight:500;line-height:1.15;font-size:clamp(1.3rem,2vw,1.7rem)}
.lead{font-family:var(--sans);font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--ink-soft);font-weight:400}
.muted{color:var(--ink-mute)}
.pink{color:var(--pink)}
.sand{color:var(--sand)}
.serif-italic{font-style:italic}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y)}
.sec-head{max-width:60ch;margin-inline:auto;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head h2,.sec-head .lead{margin-left:auto;margin-right:auto}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:600;
  font-size:.98rem;padding:1rem 1.7rem;border-radius:999px;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-pink{background:var(--pink);color:#1a1a1a;box-shadow:0 14px 40px -14px rgba(237,110,161,.6)}
.btn-pink:hover{transform:translateY(-2px);box-shadow:0 20px 50px -14px rgba(237,110,161,.8)}
.btn-ghost{color:var(--ink);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--pink);color:#fff;transform:translateY(-2px)}

/* ---------- Cards ---------- */
.card{position:relative;border-radius:var(--radius-lg);background:var(--surface);
  border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.2rem);overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:rgba(237,110,161,.35)}

/* ---------- Reveal (fade + slide — confiável, sem clip-path) ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* títulos: reveal de subida um pouco mais marcado (confiável, sem clip-path) */
h1.reveal,h2.reveal{transform:translateY(34px)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Detalhes ---------- */
.hr-line{height:1px;width:100%;background:var(--line)}
.grain::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;
  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")}