/* ═══════════════════════════════════════════════════
   R21 EMPREENDIMENTOS — main.css
   Fase 1: tokens + reset + base
   Desktop-first · base 1920px
   Fontes: Ubuntu 400/500 · Ubuntu Mono 400
   ═══════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────
   TOKENS
   ─────────────────────────────────────────────────── */
:root {

  /* ── Paleta principal ── */
  --c-dark:   #1b1b1b;   /* preto   · fundos escuros, texto principal */
  --c-red:    #dd3134;   /* vermelho · acento de marca                */
  --c-light:  #f4f5f7;   /* branco  · fundos claros                  */
  --c-gray:   #555555;   /* cinza   · texto secundário               */
  --c-green:  #3d5e43;   /* verde   · acento Green Concept           */

  /* ── Opacidades do dark (para overlays e texto sobre escuro) ── */
  --c-dark-90:  rgba(27, 27, 27, 0.90);
  --c-dark-70:  rgba(27, 27, 27, 0.70);
  --c-dark-50:  rgba(27, 27, 27, 0.50);
  --c-dark-20:  rgba(27, 27, 27, 0.20);
  --c-dark-10:  rgba(27, 27, 27, 0.10);
  --c-dark-06:  rgba(27, 27, 27, 0.06);

  /* ── Opacidades do light (para texto e elementos sobre fundos escuros) ── */
  --c-light-80: rgba(244, 245, 247, 0.80);
  --c-light-55: rgba(244, 245, 247, 0.55);
  --c-light-28: rgba(244, 245, 247, 0.28);
  --c-light-12: rgba(244, 245, 247, 0.12);
  --c-light-06: rgba(244, 245, 247, 0.06);

  /* ── Opacidades do red ── */
  --c-red-20:   rgba(221, 49, 52, 0.20);
  --c-red-10:   rgba(221, 49, 52, 0.10);

  /* ── Bordas semânticas ── */
  --border-light:   1px solid var(--c-dark-10);    /* sobre fundo claro  */
  --border-dark:    1px solid var(--c-light-12);   /* sobre fundo escuro */
  --border-medium:  1px solid var(--c-dark-20);    /* bordas de ênfase   */

  /* ── Tipografia — famílias ── */
  --f-sans: 'Ubuntu', sans-serif;
  --f-mono: 'Ubuntu Mono', monospace;

  /* ── Tipografia — pesos ── */
  --fw-regular: 400;
  --fw-medium:  500;

  /* ── Escala tipográfica — tamanhos fixos (corpo) ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;

  /* ── Escala tipográfica — títulos fluidos ── */
  --text-h3: clamp(18px,  1.80vw,  24px);   /* subtítulos de seção   */
  --text-h2: clamp(40px,  4.80vw,  68px);   /* títulos de seção       */
  --text-h1: clamp(72px, 10.50vw, 156px);   /* headline hero          */

  /* ── Letter-spacing semânticos ── */
  --ls-display:  -0.04em;    /* títulos grandes   */
  --ls-heading:  -0.02em;    /* subtítulos        */
  --ls-label:     0.20em;    /* eyebrows / labels */
  --ls-button:    0.14em;    /* CTAs / botões      */
  --ls-caption:   0.10em;    /* rodapés / legendas */

  /* ── Line-height semânticos ── */
  --lh-tight:  0.90;
  --lh-snug:   1.05;
  --lh-normal: 1.35;
  --lh-relaxed: 1.70;

  /* ── Layout — larguras ── */
  --max-w:      1920px;   /* largura máxima do viewport projetado */
  --content-w:  1440px;   /* container de conteúdo centralizado   */

  /* ── Layout — gutters (padding lateral) ──
     150px @ 1920px = 7.81vw — equivale ao padding horizontal do Figma */
  --gutter:    clamp(20px, 7.81vw, 150px);
  --gutter-sm: clamp(16px, 4.00vw,  80px);

  /* ── Espaçamento vertical de seções ── */
  --sec-v:       clamp(72px,  9.00vh, 112px);
  --sec-v-sm:    clamp(40px,  5.00vh,  64px);
  --sec-v-lg:    clamp(96px, 12.00vh, 160px);

  /* ── Escala de espaçamento interno (padding / gap / margin) ── */
  --space-2:    2px;
  --space-4:    4px;
  --space-8:    8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;

  /* ── Alturas fixas ── */
  --nav-h: 114px; /* 36px padding-top + 42px logo + 36px padding-bottom */

  /* ── Animação ── */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:       cubic-bezier(0.55, 0.00, 1.00, 0.45);
  --ease-out:      cubic-bezier(0.00, 0.55, 0.45, 1.00);
  --dur-fast:      0.20s;
  --dur-base:      0.35s;
  --dur-slow:      0.60s;
  --dur-slower:    0.90s;

  /* ── Sombras ── */
  --shadow-sm:  0  4px 16px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 10px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 18px 56px rgba(0, 0, 0, 0.18);
}


/* ───────────────────────────────────────────────────
   RESET
   ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-dark);
  background-color: var(--c-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

svg {
  display: block;
  fill: currentColor;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}


/* ───────────────────────────────────────────────────
   UTILITÁRIOS DE LAYOUT
   ─────────────────────────────────────────────────── */

/* Container centralizado com gutter lateral */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Largura máxima absoluta (1920px) */
.container-full {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ───────────────────────────────────────────────────
   UTILITÁRIOS VISUAIS
   ─────────────────────────────────────────────────── */

/* Camadas de cobertura absolute */
.cover {
  position: absolute;
  inset: 0;
}

/* Fullbleed: ocupa 100% de largura/altura do pai */
.fullbleed {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Oculto para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ───────────────────────────────────────────────────
   BREAKPOINTS
   Consulta de referência (não alterar sem alinhamento
   com design — desktop-first)

   1440px → monitor padrão grande
   1280px → laptop 16"
   1024px → tablet paisagem / laptop pequeno
    768px → tablet retrato
    600px → mobile grande
    390px → mobile padrão (iPhone 14)
   ─────────────────────────────────────────────────── */