/* ============================================================
   RP7 Instalações — CSS base (extraído do bundle v1, jul/2026)
   Não editar à mão sem necessidade: é a fundação da marca.
   Novos componentes ficam em /css/v2.css
   ============================================================ */

/* ============================================================
   RP7 Instalações — Foundations
   Colors & Typography tokens, both base and semantic.
   ============================================================ */

/* Montserrat — local TTF files (provided by client) */




@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts-web/montserrat-300.woff2") format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts-web/montserrat-400.woff2") format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts-web/montserrat-500.woff2") format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts-web/montserrat-600.woff2") format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts-web/montserrat-700.woff2") format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts-web/montserrat-800.woff2") format('woff2'); }

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts-web/montserrat-900.woff2") format('woff2'); }


:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Laranja Elétrico — cobre de fio exposto, energia que trabalha. Diagonal do símbolo. */
  --rp-orange:        #FF6633;
  --rp-orange-700:    #E04A1A;   /* darker, pressed */
  --rp-orange-300:    #FFA47C;   /* lighter, hover bg */
  --rp-orange-100:    #FFE6DA;   /* tint */

  /* Grafite Profundo — não é preto corporativo, é presença de seriedade. */
  --rp-graphite:      #111111;
  --rp-graphite-800:  #1A1A1A;
  --rp-graphite-700:  #232323;

  /* Cinza Estrutural — para textos longos. Voz técnica direta, sem competir com o laranja. */
  --rp-gray-900:      #2A2A2A;
  --rp-gray-700:      #393939;
  --rp-gray-500:      #6F6F6F;
  --rp-gray-300:      #B7B7B7;
  --rp-gray-200:      #DAD8D4;
  --rp-gray-100:      #ECEAE5;

  /* Branco Técnico — leve tom quente, simula papel de especificação técnica. */
  --rp-paper:         #F4F2EE;
  --rp-paper-cool:    #F1F7F6;     /* alternative, slightly cooler spec paper */
  --rp-white:         #FFFFFF;

  /* SEMANTIC (status — used sparingly; brand prefers neutral graphite + orange) */
  --rp-success:       #1F8A5B;
  --rp-warning:       #E8A726;
  --rp-danger:        #C7341F;
  --rp-info:          #2A6FDB;

  /* ---------- BACKGROUNDS / SURFACES ---------- */
  --bg:               var(--rp-paper);
  --bg-elevated:      var(--rp-white);
  --bg-inverse:       var(--rp-graphite);
  --bg-accent:        var(--rp-orange);

  /* ---------- FOREGROUNDS ---------- */
  --fg-1:             var(--rp-graphite);   /* primary text on light */
  --fg-2:             var(--rp-gray-700);   /* body text */
  --fg-3:             var(--rp-gray-500);   /* secondary/caption */
  --fg-on-dark:       var(--rp-paper);
  --fg-on-orange:     var(--rp-graphite);

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border-1:         var(--rp-gray-200);
  --border-2:         var(--rp-gray-300);
  --border-accent:    var(--rp-orange);

  /* ---------- TYPE FAMILY ---------- */
  --font-sans:        'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:        'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- TYPE WEIGHTS (per Brandbook) ---------- */
  --w-extralight:     200;
  --w-light:          300;
  --w-regular:        400;
  --w-medium:         500;
  --w-semibold:       600;
  --w-bold:           700;
  --w-extrabold:      800;
  --w-black:          900;

  /* ---------- TYPE SCALE (compact, technical) ---------- */
  --fs-12:            0.75rem;     /* 12 */
  --fs-13:            0.8125rem;   /* 13 */
  --fs-14:            0.875rem;    /* 14 */
  --fs-15:            0.9375rem;   /* 15 */
  --fs-16:            1rem;        /* 16 */
  --fs-18:            1.125rem;    /* 18 */
  --fs-20:            1.25rem;     /* 20 */
  --fs-24:            1.5rem;      /* 24 */
  --fs-28:            1.75rem;     /* 28 */
  --fs-32:            2rem;        /* 32 */
  --fs-40:            2.5rem;      /* 40 */
  --fs-48:            3rem;        /* 48 */
  --fs-64:            4rem;        /* 64 */
  --fs-80:            5rem;        /* 80 */
  --fs-112:           7rem;        /* 112 — display */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:         1.02;
  --lh-snug:          1.15;
  --lh-body:          1.55;
  --lh-loose:         1.7;

  /* ---------- TRACKING ---------- */
  /* Brand uses tight tracking on display + wide tracking on caps eyebrows */
  --tr-tight:         -0.02em;
  --tr-normal:        0;
  --tr-wide:          0.08em;
  --tr-wider:         0.18em;       /* "INSTALAÇÕES" treatment */

  /* ---------- SPACING (4pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADII (brand is geometric, hard-edged) ---------- */
  --radius-0:   0px;          /* default — RP7 is geometric */
  --radius-1:   2px;          /* inputs */
  --radius-2:   4px;          /* small chips */
  --radius-3:   8px;          /* cards */
  --radius-pill: 999px;

  /* ---------- SHADOWS (subtle, technical — no glow, no soft purple) ---------- */
  --shadow-1: 0 1px 0 0 rgba(17,17,17,0.04), 0 1px 2px 0 rgba(17,17,17,0.06);
  --shadow-2: 0 2px 4px -2px rgba(17,17,17,0.10), 0 4px 12px -2px rgba(17,17,17,0.08);
  --shadow-3: 0 8px 24px -6px rgba(17,17,17,0.18), 0 4px 8px -4px rgba(17,17,17,0.10);
  --shadow-inset: inset 0 0 0 1px rgba(17,17,17,0.06);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0.2, 1.2);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  360ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --content-max:    720px;
}

/* ============================================================
   SEMANTIC TYPE — use these in components.
   Brand: Caixa Alta = autoridade/técnica; Bold = solidez/confiança.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--fg-1);
  background: var(--bg);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Black, ultra-tight, used for hero headlines / "PR QUÊ" type statements */
.rp-display,
h1.rp-display {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: clamp(var(--fs-48), 8vw, var(--fs-112));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: inherit;
  text-transform: uppercase;
}

/* H1 — section headlines */
.rp-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-64));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: inherit;
}

/* H2 — subsections */
.rp-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: clamp(var(--fs-24), 2.5vw, var(--fs-40));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: inherit;
}

/* H3 — card / block titles */
.rp-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: inherit;
}

/* H4 — small caps style */
.rp-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-16);
  line-height: 1.3;
  color: inherit;
}

/* Eyebrow — uppercase tracked label. Brand signature treatment ("INSTALAÇÕES") */
.rp-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--rp-orange);
}
.rp-eyebrow--graphite { color: var(--fg-2); }

/* Body */
p, .rp-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.rp-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.rp-body-sm {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg-2);
}

/* Lede — paragraph after a headline, lighter weight */
.rp-lede {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: clamp(var(--fs-18), 1.6vw, var(--fs-24));
  line-height: 1.45;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}

/* Spec — technical caption / metadata. Mono-feel via tracking. */
.rp-spec {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Mono — code, technical values, IDs */
code, .rp-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

/* Links — orange, underlined on hover */
a {
  color: var(--rp-orange);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--rp-orange-700); text-decoration: underline; text-underline-offset: 3px; }

/* Selection */
::selection { background: var(--rp-orange); color: var(--rp-graphite); }

/* Focus ring — square, orange */
:focus-visible {
  outline: 2px solid var(--rp-orange);
  outline-offset: 2px;
}


/* ===== bloco ===== */

/* ════════════════════════════════════════════════════════════════
   RP7 Instalações — Site institucional
   Mesma identidade do Portfólio Comercial 2026:
   grafite profundo + glow laranja radial, tipografia massiva com
   gradiente branco→pêssego, glow-cards, mono JetBrains, watermark.
   Seções alternam fundo ESCURO / CLARO / LARANJA conforme a copy.
   Tokens base vêm de colors_and_type.css.
   ════════════════════════════════════════════════════════════════ */

:root {
  --deck-bg:        #0A0907;
  --orange-soft:    #FF8C5C;
  --orange-pale:    #FFB78F;
  --orange-deep:    var(--rp-orange-700);

  /* texto sobre escuro */
  --d-text-1: var(--rp-paper);
  --d-text-2: rgba(244, 242, 238, 0.72);
  --d-text-3: rgba(244, 242, 238, 0.50);
  --d-border: rgba(244, 242, 238, 0.10);

  /* texto sobre claro */
  --l-text-1: var(--rp-graphite);
  --l-text-2: var(--rp-gray-700);
  --l-text-3: var(--rp-gray-500);
  --l-border: var(--rp-gray-200);

  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --maxw: 1200px;
  --pad-x: clamp(20px, 5vw, 72px);
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background: var(--deck-bg);
  color: var(--d-text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

/* ===== utilidades de layout ============================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }
.section { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 148px); }
.section > .wrap { position: relative; z-index: 2; }

/* tema escuro / claro / laranja ----------------------------------------- */
.s-dark   { background: var(--deck-bg); color: var(--d-text-1); }
.s-light  { background: var(--rp-paper); color: var(--l-text-1); }
.s-orange { background: linear-gradient(165deg, #FF7A45 0%, #FF6633 48%, #E84D1E 100%); color: var(--rp-graphite); }

/* ===== glows e watermarks ============================================== */
.ambient {
  position: absolute; pointer-events: none; z-index: 0;
  width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255,102,51,0.30) 0%, rgba(255,102,51,0.16) 30%,
    rgba(255,102,51,0.04) 56%, rgba(255,102,51,0) 72%);
  filter: blur(8px);
}
.ambient.tr { right: -480px; top: -460px; }
.ambient.bl { left: -520px; bottom: -480px; }
.ambient.tl { left: -460px; top: -460px; }
.ambient.br { right: -520px; bottom: -480px; }
.ambient.sm { width: 680px; height: 680px; }

.watermark {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; line-height: 0.86; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,102,51,0.12);
  text-transform: uppercase; letter-spacing: -0.05em; white-space: nowrap;
  user-select: none; font-size: clamp(220px, 38vw, 620px);
}
.watermark.left  { justify-content: flex-start; transform: translateX(-10%); }
.watermark.right { justify-content: flex-end;   transform: translateX(12%); }
/* watermark em seções claras */
.s-light .watermark { -webkit-text-stroke: 1.5px rgba(17,17,17,0.05); }

/* ===== tipografia ====================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange-pale); margin: 0;
}
.eyebrow::before {
  content: ''; width: 36px; height: 2px; flex-shrink: 0;
  background: linear-gradient(90deg, transparent, var(--rp-orange));
}
.s-light .eyebrow { color: var(--rp-orange); }
.s-light .eyebrow::before { background: var(--rp-orange); }
.s-orange .eyebrow { color: rgba(26,15,8,0.78); }
.s-orange .eyebrow::before { background: linear-gradient(90deg, transparent, rgba(26,15,8,0.7)); }

.mono {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
}

.display {
  font-weight: 700; letter-spacing: -0.035em; line-height: 0.98;
  margin: 0; font-size: clamp(40px, 6.5vw, 104px);
}
.s-dark .display, .gradient-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 38%, #FFD9BD 78%, #FF9E70 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gradient-orange {
  background: linear-gradient(180deg, #FFB78F 0%, #FF6633 58%, #C9381C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.s-light .display { color: var(--rp-graphite); }
.s-light .display .gradient-orange { /* keep orange gradient */ }
.s-orange .display { color: var(--rp-graphite); }

.h-sec { font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin: 0;
  font-size: clamp(30px, 4vw, 58px); }

.lede { font-weight: 300; line-height: 1.5; margin: 0;
  font-size: clamp(18px, 1.7vw, 26px); letter-spacing: -0.005em; }

.body { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; font-weight: 400; margin: 0; }
.body-lg { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; }
.body-sm { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; }

.s-dark .lede, .s-dark .body, .s-dark .body-lg, .s-dark .body-sm { color: var(--d-text-2); }
.s-dark .body b, .s-dark .lede b { color: var(--d-text-1); font-weight: 600; }
.s-light .lede, .s-light .body, .s-light .body-lg, .s-light .body-sm { color: var(--l-text-2); }
.s-light .body b, .s-light .lede b { color: var(--l-text-1); font-weight: 700; }
.s-orange .lede, .s-orange .body { color: rgba(26,15,8,0.82); }
.s-orange .body b, .s-orange .lede b { color: var(--rp-graphite); font-weight: 700; }

.accent { color: var(--rp-orange); }

/* ===== header ========================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(10,9,7,0.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background var(--dur-med, 220ms) var(--ease-standard, ease),
              border-color var(--dur-med, 220ms) var(--ease-standard, ease);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--maxw);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: 38px; }
.nav a {
  color: var(--d-text-2); font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; text-decoration: none;
  transition: color var(--dur-fast,120ms) var(--ease-standard,ease);
}
.nav a:hover { color: var(--d-text-1); }
.nav-cta { margin-left: 4px; }
.menu-toggle { display: none; background: none; border: none; color: var(--d-text-1);
  cursor: pointer; padding: 8px; }
.menu-toggle svg { width: 28px; height: 28px; }

/* ===== botões ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em; padding: 15px 30px; border-radius: 999px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; line-height: 1;
  transition: background var(--dur-fast,120ms) var(--ease-standard,ease),
              border-color var(--dur-fast,120ms) var(--ease-standard,ease),
              color var(--dur-fast,120ms) var(--ease-standard,ease),
              box-shadow var(--dur-fast,120ms) var(--ease-standard,ease);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #FF8C5C 0%, #FF6633 50%, #E04A1A 100%);
  border-color: rgba(255,200,160,0.6);
  box-shadow: 0 0 44px rgba(255,102,51,0.42), 0 0 10px rgba(255,102,51,0.5),
    inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:hover { background: linear-gradient(180deg, #FF7A45 0%, #E04A1A 100%);
  box-shadow: 0 0 54px rgba(255,102,51,0.55), 0 0 14px rgba(255,102,51,0.6),
    inset 0 1px 0 rgba(255,255,255,0.3); text-decoration: none; color: #fff; }
.btn-ghost {
  color: var(--d-text-1); background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.22);
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,140,92,0.6);
  color: var(--d-text-1); text-decoration: none; }
/* botão sobre laranja (CTA band) */
.s-orange .btn-onorange {
  background: var(--rp-graphite); color: var(--rp-paper);
  border-color: rgba(0,0,0,0.2); box-shadow: 0 10px 34px rgba(0,0,0,0.28);
}
.s-orange .btn-onorange:hover { background: #000; color: var(--rp-paper); text-decoration: none; }
.btn-lg { padding: 18px 38px; font-size: 17px; }

/* ===== pills / tags ==================================================== */
.taglist { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px;
  border-radius: 999px; white-space: nowrap;
}
.s-dark .tag { color: var(--orange-pale); background: rgba(255,102,51,0.08);
  border: 1px solid rgba(255,140,92,0.30); }
.s-light .tag { color: var(--rp-orange-700); background: #fff;
  border: 1px solid var(--rp-gray-200); }

.pill-solid {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px;
  border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  color: #fff; background: linear-gradient(180deg, #FF8C5C 0%, #FF6633 50%, #E04A1A 100%);
  border: 1px solid rgba(255,200,160,0.6);
  box-shadow: 0 0 50px rgba(255,102,51,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ===== glow-card (escuro) ============================================== */
.glow-card {
  position: relative; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(28,22,18,0.92) 0%, rgba(12,10,8,0.95) 100%);
  border: 1px solid rgba(255,140,92,0.30);
  box-shadow: 0 0 0 1px rgba(255,102,51,0.07), 0 0 40px rgba(255,102,51,0.08),
    0 12px 50px rgba(0,0,0,0.4);
  transition: transform var(--dur-med,220ms) var(--ease-standard,ease),
              box-shadow var(--dur-med,220ms) var(--ease-standard,ease),
              border-color var(--dur-med,220ms) var(--ease-standard,ease);
}
.glow-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 25% 12%, rgba(255,140,92,0.20) 0%,
    rgba(255,102,51,0.05) 35%, transparent 60%);
}
.glow-card > * { position: relative; z-index: 1; }
.glow-card:hover { transform: translateY(-4px); border-color: rgba(255,140,92,0.55);
  box-shadow: 0 0 0 1px rgba(255,102,51,0.12), 0 0 60px rgba(255,102,51,0.16),
    0 18px 60px rgba(0,0,0,0.5); }

/* ===== light-card (claro, hard-edge + stub laranja) ==================== */
.lcard {
  position: relative; background: #fff; border: 1px solid var(--rp-gray-200);
  border-radius: 8px; padding: 32px;
  transition: transform var(--dur-med,220ms) var(--ease-standard,ease),
              box-shadow var(--dur-med,220ms) var(--ease-standard,ease),
              border-color var(--dur-med,220ms) var(--ease-standard,ease);
}
.lcard::after {
  content: ''; position: absolute; top: 0; left: 0;
  border-width: 9px; border-style: solid;
  border-color: var(--rp-orange) transparent transparent var(--rp-orange);
}
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-3);
  border-color: var(--rp-gray-300); }

/* ===== glow-icon ======================================================= */
.glow-icon {
  width: 54px; height: 54px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; color: #fff;
  background: linear-gradient(180deg, #FF8C5C 0%, #FF6633 100%);
  box-shadow: 0 0 28px rgba(255,102,51,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
}
.glow-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.glow-icon.lg { width: 70px; height: 70px; border-radius: 16px; }
.glow-icon.lg svg { width: 32px; height: 32px; }
/* ícone em seção clara */
.licon {
  width: 54px; height: 54px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--rp-orange-700);
  background: var(--rp-orange-100); border: 1px solid #FFD8C6;
}
.licon svg { width: 26px; height: 26px; stroke-width: 2; }

/* ===== listas de spec ================================================== */
.speclist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.speclist li { display: flex; gap: 14px; font-size: clamp(15px,1.15vw,18px); line-height: 1.45; }
.speclist li::before { content: '·'; color: var(--rp-orange); font-weight: 900;
  font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: -3px; }
.s-dark .speclist li { color: var(--d-text-2); }
.s-light .speclist li { color: var(--l-text-2); }

/* ===== HERO ============================================================ */
.hero { padding-top: calc(var(--header-h) + clamp(60px,9vw,120px)); padding-bottom: clamp(70px,9vw,130px);
  text-align: center; }
.hero .ambient.center-top {
  width: min(1700px,150vw); height: 1000px; left: 50%; top: -560px; transform: translateX(-50%);
  border-radius: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,102,51,0.5) 0%,
    rgba(255,102,51,0.22) 26%, rgba(255,102,51,0.05) 56%, rgba(255,102,51,0) 76%);
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin: 0 auto 30px; }
.hero-tags .dot { color: var(--rp-orange); align-self: center; }
.hero h1 { margin: 0 auto; max-width: 16ch; }
.hero .lede { max-width: 60ch; margin: 28px auto 0; color: var(--d-text-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 42px; }
.hero-meta { display: flex; align-items: center; gap: 16px; justify-content: center;
  margin-top: 44px; color: var(--d-text-3); }
.hero-meta .sym { height: 34px; opacity: 0.9; }

/* ===== grids genéricos ================================================= */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* split (texto + visual) ------------------------------------------------ */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px,5vw,84px); align-items: center; }

/* ===== seção DOR (callout barra laranja) =============================== */
.callout {
  border-left: 4px solid var(--rp-orange); padding: 6px 0 6px 28px;
  margin-top: 36px;
}
.callout p { font-weight: 600; line-height: 1.3; font-size: clamp(22px,2.4vw,34px);
  letter-spacing: -0.02em; color: var(--l-text-1); margin: 0; }
.callout p .accent { color: var(--rp-orange); }
/* callout sobre escuro */
.s-dark .callout p { color: var(--d-text-1); }

/* ===== 7 sistemas ====================================================== */
.sys-card { padding: 28px; display: flex; flex-direction: column; gap: 18px; min-height: 200px; }
.sys-card .row { display: flex; align-items: center; justify-content: space-between; }
.sys-card h3 { font-weight: 700; font-size: clamp(20px,1.7vw,25px); letter-spacing: -0.015em;
  line-height: 1.12; margin: 0; color: var(--d-text-1); }

/* ===== como trabalhamos (steps) ======================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(40px,5vw,64px); }
.step { padding: 36px 34px; display: flex; flex-direction: column; gap: 16px; }
.step .num {
  font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: 0.12em;
  color: var(--orange-pale); display: flex; align-items: center; gap: 12px;
}
.step .num::after { content:''; height:1px; flex:1; background: rgba(255,183,143,0.45); }
.step h3 { font-weight: 700; font-size: clamp(22px,2vw,30px); letter-spacing: -0.02em;
  line-height: 1.1; margin: 0; color: var(--d-text-1); }

/* ===== por que / depoimentos =========================================== */
.quote-card { padding: 34px; display: flex; flex-direction: column; gap: 24px; height: 100%; }
.quote-card .qmark { color: var(--rp-orange); font-family: Georgia, serif; font-size: 64px;
  line-height: 0.5; height: 28px; }
.quote-card blockquote { margin: 0; font-size: clamp(17px,1.35vw,21px); line-height: 1.5;
  font-weight: 400; color: var(--d-text-1); letter-spacing: -0.01em; flex: 1; }
.quote-card .who { display: flex; flex-direction: column; gap: 3px; padding-top: 20px;
  border-top: 1px solid var(--d-border); }
.quote-card .who b { font-weight: 700; font-size: 16px; color: var(--d-text-1); }
.quote-card .who span { font-size: 13px; color: var(--d-text-3); font-family: var(--mono);
  letter-spacing: 0.06em; }

.bignum-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.bignum { display: flex; flex-direction: column; gap: 6px; padding: 28px 30px; }
.bignum .n { font-weight: 900; font-size: clamp(48px,5vw,76px); line-height: 0.9;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.s-dark .bignum .n { color: var(--d-text-1); }
.bignum .l { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--d-text-3); margin-top: 8px; line-height: 1.4; }

/* ===== projetos ======================================================== */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(40px,5vw,60px); }
.proj-card {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--l-border);
  background: #1a1512; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--dur-med,220ms) var(--ease-standard,ease),
              box-shadow var(--dur-med,220ms) var(--ease-standard,ease);
}
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35) contrast(1.02); transition: transform 400ms var(--ease-standard,ease),
    filter var(--dur-med,220ms) ease; }
.proj-card .scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,0) 30%, rgba(10,9,7,0.55) 68%, rgba(10,9,7,0.9) 100%); }
.proj-card .meta { position: relative; z-index: 2; padding: 26px; }
.proj-card .cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-pale); }
.proj-card .pname { font-weight: 700; font-size: clamp(18px,1.5vw,23px); letter-spacing: -0.015em;
  line-height: 1.12; color: #fff; margin-top: 8px; }
.proj-card .client { font-size: 14px; color: rgba(255,255,255,0.62); margin-top: 6px; }
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.proj-card:hover img { transform: scale(1.05); filter: grayscale(0.1) contrast(1.05); }

/* ===== CTA band ======================================================== */
.cta-band { text-align: center; }
.cta-band .ambient-x { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,0.22) 0%, transparent 55%); }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .body { max-width: 60ch; margin: 24px auto 0; }
.cta-band .btn-wrap { margin-top: 40px; }

/* ===== formulário ====================================================== */
.form-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px,5vw,80px); align-items: start; }
.form-card { background: #fff; border: 1px solid var(--rp-gray-200); border-radius: 10px;
  padding: clamp(28px,3vw,44px); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--l-text-3); }
.field input, .field select, .field textarea {
  font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--l-text-1);
  background: var(--rp-paper); border: 1px solid var(--rp-gray-200); border-radius: 4px;
  padding: 14px 16px; width: 100%; transition: border-color var(--dur-fast,120ms) ease,
    box-shadow var(--dur-fast,120ms) ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rp-orange);
  box-shadow: 0 0 0 3px rgba(255,102,51,0.15); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-status { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.5; }
.form-status.ok { color: #1E7A3C; font-weight: 600; }
.form-status.err { color: #B42318; font-weight: 600; }
.form-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.wa-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--rp-orange-700); }
.wa-link:hover { color: var(--rp-orange); }

/* ===== footer ========================================================== */
.site-footer { background: var(--deck-bg); padding-block: clamp(56px,7vw,90px) 40px; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; position: relative; z-index: 2; }
.footer-brand img { height: 34px; margin-bottom: 22px; }
.footer-brand .tag-line { color: var(--d-text-2); font-weight: 300; font-size: 18px;
  line-height: 1.5; max-width: 34ch; }
.footer-col h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-pale); margin: 0 0 18px; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col li, .footer-col a { color: var(--d-text-2); font-size: 15px; text-decoration: none;
  line-height: 1.4; }
.footer-col a:hover { color: var(--rp-orange); text-decoration: none; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-top: clamp(44px,5vw,64px); padding-top: 28px;
  border-top: 1px solid var(--d-border); position: relative; z-index: 2; }
.footer-bottom .mono { color: var(--d-text-3); }

/* ===== reveal animation ================================================ */
.reveal { opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--ease-standard,ease), transform 560ms var(--ease-standard,ease); }
.reveal.in { opacity: 1; transform: none; }

[data-lucide] { stroke-width: 1.9; }

/* ===== responsivo ====================================================== */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 880px) {
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: rgba(10,9,7,0.97); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.1); padding: 14px var(--pad-x) 22px;
  }
  .nav.open a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 17px; }
  .nav.open .nav-cta { margin: 12px 0 0; }
  .menu-toggle { display: inline-flex; }
  .split, .form-split { grid-template-columns: 1fr; }
  .grid-3, .steps, .bignum-row, .proj-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
}


/* ===== bloco ===== */

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts-web/jbm-aa5406db.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts-web/jbm-859c3862.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts-web/jbm-2ed24848.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts-web/jbm-8b6b1f43.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts-web/jbm-4c278ffe.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts-web/jbm-787f43e5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts-web/jbm-aa5406db.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts-web/jbm-859c3862.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts-web/jbm-2ed24848.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts-web/jbm-8b6b1f43.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts-web/jbm-4c278ffe.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts-web/jbm-787f43e5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts-web/jbm-aa5406db.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts-web/jbm-859c3862.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts-web/jbm-2ed24848.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts-web/jbm-8b6b1f43.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts-web/jbm-4c278ffe.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts-web/jbm-787f43e5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== bloco ===== */


.case-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;}
.case-modal.open{display:flex;}
.case-modal-backdrop{position:absolute;inset:0;background:rgba(5,4,3,0.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.case-modal-panel{position:relative;z-index:1;width:min(1040px,100%);max-height:90vh;overflow:auto;border-radius:16px;background:linear-gradient(180deg,rgba(28,22,18,0.98),rgba(12,10,8,0.99));border:1px solid rgba(255,140,92,0.30);box-shadow:0 30px 80px rgba(0,0,0,0.6);padding:clamp(28px,4vw,52px);}
.case-modal-close{position:absolute;top:16px;right:16px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:var(--d-text-1);cursor:pointer;}
.case-modal-close:hover{background:rgba(255,255,255,0.12);}
.cm-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(28px,4vw,48px);align-items:start;}
.cm-breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--orange-pale);}
.cm-title{font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-0.03em;margin:14px 0 0;color:var(--d-text-1);}
.cm-desc{margin-top:18px;color:var(--d-text-2);font-size:clamp(15px,1.2vw,18px);line-height:1.55;}
.cm-escopo{margin-top:28px;}
.cm-escopo .lbl{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--rp-orange);}
.cm-escopo ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:11px;}
.cm-escopo li{display:flex;gap:12px;color:var(--d-text-2);font-size:15px;line-height:1.4;}
.cm-escopo li::before{content:'';width:7px;height:7px;margin-top:6px;flex-shrink:0;background:var(--rp-orange);transform:rotate(45deg);}
.cm-metrics{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px;}
.cm-metric .n{font-weight:900;font-size:clamp(34px,4vw,52px);line-height:0.9;letter-spacing:-0.03em;}
.cm-metric .l{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--d-text-3);margin-top:8px;}
.cm-media{position:relative;}
.cm-client{display:block;font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--d-text-3);margin-bottom:14px;text-align:right;}
.cm-media img{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,0.1);object-fit:cover;aspect-ratio:4/3;}
.proj-card[data-case]{cursor:pointer;}
@media(max-width:760px){.cm-grid{grid-template-columns:1fr;}.cm-client{text-align:left;}}


/* ===== bloco ===== */

.cm-tl{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.10);}.cm-tl-track{display:grid;grid-template-columns:14px 1fr 14px;align-items:center;max-width:420px;}.cm-tl-bar{height:2px;margin:0 8px;background:linear-gradient(90deg,#FFC24B 0%,rgba(255,194,75,0.28) 100%);}.cm-tl-dot{width:14px;height:14px;border-radius:50%;border:2.5px solid #FFC24B;background:transparent;}.cm-tl-dot--end{background:#FFC24B;box-shadow:0 0 12px rgba(255,194,75,0.5);}.cm-tl-labels{display:flex;justify-content:space-between;max-width:420px;margin-top:10px;}.cm-tl-node{display:flex;flex-direction:column;gap:4px;}.cm-tl-node--end{align-items:flex-end;text-align:right;}.cm-tl-cap{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--d-text-3);}.cm-tl-date{font-weight:700;font-size:16px;color:var(--d-text-1);}.cm-tl-note{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--d-text-3);margin-top:12px;}

/* ===== bloco ===== */

.proj-card--destaque{background:linear-gradient(155deg,#241a12,#0c0a08);border:1.5px solid #FF6633;box-shadow:0 0 0 1px rgba(255,102,51,0.25),0 18px 50px rgba(255,102,51,0.18);}.proj-card--destaque .scrim{background:linear-gradient(180deg,rgba(255,102,51,0.10),rgba(12,10,8,0.82));}.proj-badge{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#1a0f08;background:#FF6633;padding:5px 10px;border-radius:999px;}.cm-noimg{display:flex;align-items:center;justify-content:center;width:100%;min-height:240px;border-radius:12px;border:1px dashed rgba(255,255,255,0.18);background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(0,0,0,0.2));color:var(--d-text-3);font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;}