/* ==========================================================================
   Cléo Móveis — Base
   Reset, design tokens, typography and layout helpers shared by every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@1,9..144,500&display=swap');

/* ---------------------------------- reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, address { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------------------------------- tokens ---------------------------------- */
:root{
  --bg-0: #050507;
  --bg-1: #0a0b0e;
  --bg-2: #101218;
  --bg-3: #16181f;

  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --surface-strong: rgba(255,255,255,.1);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);

  --text-0: #f6f6f8;
  --text-1: #c6c7cf;
  --text-2: #8b8c96;
  --text-3: #5c5d68;

  --red-400: #ff5f70;
  --red-500: #ff3b4e;
  --red-600: #e01c37;
  --red-700: #b21230;
  --amber-500: #ff9142;

  --grad-brand: linear-gradient(135deg, var(--red-500), var(--amber-500));
  --grad-brand-soft: linear-gradient(135deg, rgba(255,59,78,.18), rgba(255,145,66,.12));
  --glow-red: 0 0 0 1px rgba(255,59,78,.25), 0 8px 30px rgba(255,59,78,.25);
  --glow-red-lg: 0 0 60px rgba(255,59,78,.35), 0 0 120px rgba(255,59,78,.12);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .25s;
  --dur-med: .45s;
  --dur-slow: .8s;

  --container: 1280px;
  --header-h: 132px;
  --header-h-scrolled: 84px;
}

html{
  scroll-behavior: smooth;
  color-scheme: dark;
  /* the header's height animates while stuck to the top of the viewport
     (utility bar collapsing/expanding on scroll). Without this, the browser's
     scroll anchoring "corrects" scrollY to keep some element below visually
     stable — that correction re-crosses the header's scroll threshold and
     makes it flicker/jitter when scrolling back up. See header.css. */
  overflow-anchor: none;
}

body{
  background: var(--bg-0);
  color: var(--text-1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

body.is-loading{ overflow: hidden; height: 100vh; }

h1, h2, h3, h4{
  color: var(--text-0);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

::selection{ background: var(--red-500); color: #fff; }

/* focus states — accessible, on-brand */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--red-400);
  outline-offset: 3px;
  border-radius: 6px;
}

.hide{ display: none !important; }

/* ---------------------------------- layout helpers ---------------------------------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section{
  position: relative;
  padding-block: clamp(72px, 10vw, 140px);
}

section[id]{ scroll-margin-top: 96px; }

.section-head{
  max-width: 640px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 16px;
}

.eyebrow::before{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 12px 2px var(--red-500);
}

.section-head h2{
  font-size: clamp(2rem, 4vw, 2.85rem);
  margin-bottom: 14px;
}

.section-head p{
  color: var(--text-2);
  font-size: 1.08rem;
  max-width: 52ch;
}

/* ---------------------------------- glass ---------------------------------- */
.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}