/* Agência Fantasma — webfonts. Satoshi (primary) + General Sans (secondary). */
@font-face{font-family:"Satoshi";src:url('Satoshi-Light.otf') format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url('Satoshi-Regular.otf') format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url('Satoshi-Italic.otf') format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Satoshi";src:url('Satoshi-Medium.otf') format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url('Satoshi-Bold.otf') format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url('Satoshi-Black.otf') format("opentype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url('GeneralSans-Light.otf') format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url('GeneralSans-Regular.otf') format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url('GeneralSans-Medium.otf') format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url('GeneralSans-Semibold.otf') format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url('GeneralSans-Bold.otf') format("opentype");font-weight:700;font-style:normal;font-display:swap}

/* Agência Fantasma — colour. Monochrome by design: ink, ectoplasma (warm off-white), 3 greys.
   Source: Adobe palette + KIT DE MARKETING. No hue is part of the brand. */
:root{
  /* base ramp */
  --af-black:#000000;        /* pure black — logo plates, full-bleed hero */
  --af-ink:#262626;          /* primary brand dark */
  --af-ink-700:#3A3A3A;      /* hover on dark surfaces */
  --af-ink-500:#595959;      /* dividers on dark, muted dark text */
  --af-grey-500:#8C8C8C;     /* mid grey */
  --af-grey-300:#BFBFBF;     /* light grey */
  --af-grey-200:#D9D9D9;     /* hairline / disabled */
  --af-bone:#F2EFE9;         /* ectoplasma — warm off-white, the brand's "light" */
  --af-bone-100:#F8F6F2;     /* raised surface on bone */
  --af-white:#FFFFFF;

  /* semantic — light (bone) surfaces */
  --surface-page:var(--af-bone);
  --surface-card:var(--af-white);
  --surface-raised:var(--af-bone-100);
  --surface-sunken:var(--af-grey-200);
  --surface-inverse:var(--af-ink);
  --text-strong:var(--af-ink);
  --text-body:var(--af-ink);
  --text-muted:var(--af-grey-500);
  --text-faint:var(--af-grey-300);
  --text-on-inverse:var(--af-bone);
  --text-on-inverse-muted:var(--af-grey-300);
  --border-hairline:var(--af-grey-200);
  --border-strong:var(--af-ink);
  --border-on-inverse:rgba(242,239,233,.18);

  /* interactive */
  --action-solid:var(--af-ink);
  --action-solid-hover:var(--af-ink-700);
  --action-solid-text:var(--af-bone);
  --action-ghost-hover:rgba(38,38,38,.06);
  --focus-ring:var(--af-ink);

  /* status — greyscale only; meaning comes from the label, not from hue */
  --status-live:var(--af-ink);
  --status-idle:var(--af-grey-500);
  --status-off:var(--af-grey-300);

  /* veils, used over full-bleed imagery */
  --veil-ink:rgba(0,0,0,.62);
  --veil-bone:rgba(242,239,233,.90);
}
/* Dark scope — apply to any element: <section class="af-dark"> */
.af-dark{
  --surface-page:var(--af-black);
  --surface-card:var(--af-ink);
  --surface-raised:var(--af-ink-700);
  --surface-sunken:var(--af-black);
  --surface-inverse:var(--af-bone);
  --text-strong:var(--af-bone);
  --text-body:var(--af-bone);
  --text-muted:var(--af-grey-500);
  --text-faint:var(--af-ink-500);
  --text-on-inverse:var(--af-ink);
  --text-on-inverse-muted:var(--af-ink-500);
  --border-hairline:rgba(242,239,233,.14);
  --border-strong:var(--af-bone);
  --border-on-inverse:rgba(38,38,38,.18);
  --action-solid:var(--af-bone);
  --action-solid-hover:var(--af-white);
  --action-solid-text:var(--af-ink);
  --action-ghost-hover:rgba(242,239,233,.08);
  --focus-ring:var(--af-bone);
  --status-live:var(--af-bone);
  --status-idle:var(--af-grey-500);
  --status-off:var(--af-ink-500);
}

/* Agência Fantasma — type. Satoshi carries the voice; General Sans carries the reading. */
:root{
  --font-display:"Satoshi","Helvetica Neue",Arial,sans-serif;   /* headlines, buttons, labels */
  --font-body:"General Sans","Helvetica Neue",Arial,sans-serif; /* paragraphs, long form, UI copy */
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;     /* rare: metrics, prompts, code */

  --fw-light:300;/* @kind font */
  --fw-regular:400;/* @kind font */
  --fw-medium:500;/* @kind font */
  --fw-semibold:600;/* @kind font */
  --fw-bold:700;/* @kind font */
  --fw-black:900;/* @kind font */

  /* display scale — Satoshi, tight tracking, tight leading */
  --fs-display-1:76px;--lh-display-1:.94;/* @kind font */
  --ls-display-1:-.035em;/* @kind font */
  --fs-display-2:56px;--lh-display-2:.98;/* @kind font */
  --ls-display-2:-.03em;/* @kind font */
  --fs-h1:40px;--lh-h1:1.04;/* @kind font */
  --ls-h1:-.025em;/* @kind font */
  --fs-h2:30px;--lh-h2:1.1;/* @kind font */
  --ls-h2:-.02em;/* @kind font */
  --fs-h3:22px;--lh-h3:1.18;/* @kind font */
  --ls-h3:-.015em;/* @kind font */
  --fs-h4:17px;--lh-h4:1.3;/* @kind font */
  --ls-h4:-.01em;/* @kind font */

  /* body — General Sans, generous leading */
  --fs-lead:19px;--lh-lead:1.6;/* @kind font */
  --fs-body:16px;--lh-body:1.65;/* @kind font */
  --fs-small:14px;--lh-small:1.55;/* @kind font */
  --fs-caption:12px;--lh-caption:1.45;/* @kind font */

  /* the brand's signature: wide-tracked uppercase micro-label (the tagline treatment) */
  --fs-eyebrow:11px;--lh-eyebrow:1.2;/* @kind font */
  --ls-eyebrow:.22em;/* @kind font */
  --ls-tagline:.14em;/* @kind font */

  --measure-prose:64ch;/* @kind other */
  --measure-narrow:44ch;/* @kind other */
}

/* Agência Fantasma — space, radius, sizing. 4px base grid. */
:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
  --space-20:80px;--space-24:96px;--space-32:128px;

  --gutter-page:24px;      /* mobile page inset */
  --gutter-page-lg:56px;   /* desktop page inset */
  --container-max:1180px;
  --container-prose:720px;
  --section-y:96px;        /* vertical rhythm between marketing sections */
  --section-y-sm:56px;

  /* radii — soft, never pill except on chips; matches the logo's rounded silhouette */
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;

  --border-w:1px;--border-w-strong:2px;

  --control-h-sm:34px;--control-h-md:44px;--control-h-lg:54px;
  --icon-sm:16px;--icon-md:20px;--icon-lg:24px;
}

/* Agência Fantasma — depth. Shadows are soft, neutral-black and almost invisible;
   the system leans on hairlines and surface contrast instead. */
:root{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-1:0 1px 2px rgba(38,38,38,.05);
  --shadow-2:0 4px 16px rgba(38,38,38,.07);
  --shadow-3:0 16px 48px rgba(38,38,38,.10);
  --shadow-float:0 24px 64px rgba(0,0,0,.28);        /* only on dark surfaces / modals */
  --shadow-inset-hair:inset 0 -1px 0 var(--border-hairline);
  --ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);
  --blur-veil:saturate(120%) blur(14px);/* @kind other */
}

/* Agência Fantasma — motion. Everything drifts: slow, soft, no bounce, no spring. */
:root{
  --dur-instant:90ms;/* @kind other */
  --dur-fast:160ms;/* @kind other */
  --dur-base:240ms;/* @kind other */
  --dur-slow:420ms;/* @kind other */
  --dur-drift:6000ms;/* @kind other */
  --ease-standard:cubic-bezier(.2,.8,.25,1);/* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1);/* @kind other */
  --ease-in:cubic-bezier(.5,0,.75,0);/* @kind other */
  --ease-drift:cubic-bezier(.45,0,.55,1);/* @kind other */
  --press-scale:.985;/* @kind other */
}
@keyframes af-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes af-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes af-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Agência Fantasma — element defaults. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-strong);margin:0;font-weight:var(--fw-bold);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--fw-medium)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--af-grey-300);transition:text-decoration-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
a:hover{text-decoration-color:currentColor}
a:active{opacity:.7}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{max-width:100%;display:block}
hr{border:none;border-top:var(--border-w) solid var(--border-hairline);margin:var(--space-8) 0}
::selection{background:var(--af-ink);color:var(--af-bone)}
.af-dark ::selection{background:var(--af-bone);color:var(--af-ink)}

/* Agência Fantasma — the handful of shared classes the brand actually repeats. */
.af-eyebrow{font-family:var(--font-display);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--fw-medium);color:var(--text-muted)}
.af-tagline{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-tagline);font-weight:var(--fw-regular);color:var(--text-muted)}
.af-display{font-family:var(--font-display);font-size:var(--fs-display-1);line-height:var(--lh-display-1);letter-spacing:var(--ls-display-1);font-weight:var(--fw-bold)}
.af-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-muted);max-width:var(--measure-prose)}
.af-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter-page-lg)}
.af-section{padding-block:var(--section-y)}
.af-hairline{border-top:var(--border-w) solid var(--border-hairline)}
.af-float{animation:af-float var(--dur-drift) var(--ease-drift) infinite}