@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* ============================================================================
   Ambiven — Sistema visual v2 "Signal"
   Direção: canvas de tinta profunda, o vermelho da marca tratado como LUZ
   (brilho, feixe, gradiente), superfícies de vidro com borda de 1px,
   geometria arredondada generosa e tipografia display grande.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* — tinta (canvas escuro) — */
  --ink-950: #090908;
  --ink-900: #100F0E;
  --ink-850: #171514;
  --ink-800: #1E1B1A;
  --ink-750: #262221;
  --ink-700: #332E2C;

  /* — papel (seções claras) — */
  --paper: #F7F6F4;
  --paper-2: #EFEDE9;
  --paper-3: #E4E1DC;

  /* — vermelho da marca, tratado como luz — */
  --red: #EC3013;
  --red-300: #FFA98E;
  --red-400: #FF7551;
  --red-500: #FF4A22;
  --red-600: #D1250A;
  --red-700: #A11C06;
  --ember: #FF8A3D;

  /* — texto — */
  --on-ink: #F6F3F1;
  --on-ink-dim: #ABA4A0;
  --on-ink-faint: #8A837E;
  --on-paper: #131110;
  --on-paper-dim: #5C5551;

  /* — linhas e vidro — */
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);
  --line-paper: rgba(19,17,16,0.10);
  --glass: rgba(255,255,255,0.045);
  --glass-2: rgba(255,255,255,0.075);

  /* — gradientes — */
  --grad-hot: linear-gradient(115deg, #FF8A3D 0%, #EC3013 52%, #A11C06 100%);
  --grad-text: linear-gradient(100deg, #FFB07A 0%, #FF6A3D 40%, #EC3013 100%);
  --grad-panel: radial-gradient(120% 140% at 12% 0%, rgba(236,48,19,0.30) 0%, rgba(236,48,19,0.04) 45%, transparent 72%);
  --grad-edge: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02));

  /* — sombras e brilho — */
  --sh-1: 0 1px 2px rgba(0,0,0,0.30);
  --sh-2: 0 12px 32px -12px rgba(0,0,0,0.55);
  --sh-3: 0 40px 90px -30px rgba(0,0,0,0.75);
  --sh-paper: 0 18px 50px -24px rgba(19,17,16,0.28);
  --glow-red: 0 0 0 1px rgba(236,48,19,0.35), 0 18px 60px -18px rgba(236,48,19,0.55);

  /* — raio — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* — tipografia — */
  --f-display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --f-body: "Plus Jakarta Sans", "Helvetica Neue", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --t-hero: clamp(44px, 6.6vw, 96px);
  --t-d1: clamp(34px, 4.4vw, 62px);
  --t-d2: clamp(27px, 2.9vw, 42px);
  --t-h3: clamp(20px, 1.7vw, 25px);
  --t-lead: clamp(17px, 1.35vw, 21px);
  --t-body: 16px;
  --t-sm: 14.5px;
  --t-xs: 13px;
  --t-label: 11.5px;

  /* — ritmo — */
  --pad-x: clamp(20px, 4.2vw, 56px);
  --sec-y: clamp(72px, 8.5vw, 132px);
  --wrap: 1280px;

  /* — colunas responsivas — */
  --bento: repeat(6, minmax(0, 1fr));
  --b1: span 4; --b2: span 2; --b3: span 3; --b4: span 3;
  --cases: repeat(2, minmax(0, 1fr));
  --split: minmax(0, 1fr) minmax(0, 1fr);
  --shots: repeat(3, minmax(0, 1fr));
  --steps: repeat(4, minmax(0, 1fr));
  --foot: 1.6fr 1fr 1fr 1fr;
  --nav-links: flex;
  --nav-cta-label: inline;
  --lang-code: inline;
  --nav-pad-l: 22px;
  --float: block;
  --hero-tilt: perspective(2000px) rotateX(7deg);
}

@media (max-width: 1080px) {
  :root { --bento: repeat(2, minmax(0, 1fr)); --b1: span 2; --b2: span 1; --b3: span 1; --b4: span 2; --shots: repeat(1, minmax(0, 1fr)); --steps: repeat(2, minmax(0, 1fr)); --nav-links: none; --foot: 1fr 1fr; }
}
@media (max-width: 820px) {
  :root { --bento: repeat(1, minmax(0, 1fr)); --b1: span 1; --b2: span 1; --b3: span 1; --b4: span 1; --cases: repeat(1, minmax(0, 1fr)); --split: minmax(0, 1fr); --steps: repeat(1, minmax(0, 1fr)); --foot: 1fr; --hero-tilt: none; --float: none; }
}
@media (max-width: 430px) {
  :root { --nav-cta-label: none; --nav-pad-l: 14px; }
}
@media (max-width: 370px) {
  :root { --lang-code: none; }
}

/* — resets — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--on-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--red-400); text-decoration: none; transition: color 180ms ease; }
a:hover { color: var(--ember); }
:focus-visible { outline: 2px solid var(--red-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(236,48,19,0.35); color: #fff; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
section[id] { scroll-margin-top: 104px; }

/* — reveal no scroll — */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 760ms cubic-bezier(.2,.75,.25,1), transform 760ms cubic-bezier(.2,.75,.25,1); }
[data-reveal="on"] { opacity: 1; transform: none; }

/* — animações — */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}


/* ============================================================================
   Auroviva — camada de marca. "Auro" = ouro, "viva" = empresa viva.
   O vermelho de luz da v2 vira ouro: mesma tinta profunda, mesmas superfícies
   de vidro, acento metálico quente e uma serifa itálica para os destaques.
   ========================================================================= */
:root {
  --gold-200: #F8E7BC;
  --gold-300: #F2D69A;
  --gold-400: #E8C177;
  --gold-500: #D4A54F;
  --gold-600: #B78732;
  --gold-700: #85601E;
  --on-gold: #1A1408;

  --ink-950: #0A0907;
  --ink-900: #11100D;
  --ink-850: #181612;
  --ink-800: #1F1C17;
  --ink-750: #27231D;
  --ink-700: #342F27;

  --paper: #F6F2EA;
  --paper-2: #EEE8DC;
  --paper-3: #E4DCCB;
  --on-paper: #15120D;
  --on-paper-dim: #5E5649;
  --line-paper: rgba(21,18,13,0.10);

  --grad-hot: linear-gradient(115deg, #F8E2A6 0%, #DDAE58 48%, #A97A2B 100%);
  --grad-text: linear-gradient(100deg, #FBE7B5 0%, #E6BC6A 45%, #C0913F 100%);
  --grad-panel: radial-gradient(120% 140% at 12% 0%, rgba(212,165,79,0.22) 0%, rgba(212,165,79,0.03) 45%, transparent 72%);
  --glow-red: 0 0 0 1px rgba(212,165,79,0.40), 0 18px 60px -18px rgba(212,165,79,0.55);

  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --stage-ar: 2.08 / 1;
  --stage-center-w: 64%;
}
@media (max-width: 820px) {
  :root { --stage-ar: 1.35 / 1; --stage-center-w: 100%; }
}
a { color: var(--gold-400); }
a:hover { color: var(--gold-300); }
:focus-visible { outline-color: var(--gold-400); }
::selection { background: rgba(212,165,79,0.38); color: #fff; }

/* card largo de posts e anúncios */
:root { --b5: span 6; --b5-cols: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 1080px) { :root { --b5: span 2; } }
@media (max-width: 820px) { :root { --b5: span 1; --b5-cols: minmax(0, 1fr); } }