/* ═══════════════════════════════════════════════════════════
   WORKSHOP CÁLCULO ESTRUTURAL — Visual Edition
   Aesthetic: editorial técnico-arquitetônico
   Palette:  navy #0a1230 / navy #1e3472 / cyan #2ab5e8 / paper #f4f1ea
   Type:     Inter (display) + JetBrains Mono (technical)
═══════════════════════════════════════════════════════════ */

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

:root {
    --ink:        #0a1230;
    --navy:       #1e3472;
    --navy-mid:   #243d80;
    --cyan:       #2ab5e8;
    --cyan-dark:  #1a9fd4;
    --white:      #ffffff;
    --paper:      #f4f1ea;
    --paper-2:    #ebe6dc;
    --line:       #d8d3c7;
    --gray:       #6b7280;
    --gray-dark:  #374151;
    --text:       #111827;
    --red:        #d23a2f;
    --green:      #16a34a;
    --amber:      #f59e0b;
    --mono:       'JetBrains Mono', ui-monospace, monospace;
    --sans:       'Inter', -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: 920px; }

section { padding: 100px 0; position: relative; }
section.tight { padding: 72px 0; }

/* ── TIPOGRAFIA EDITORIAL ───────────────────────── */
.eyebrow {
    font-family: var(--mono);
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--cyan); margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
    content: ''; width: 28px; height: 1px; background: var(--cyan);
}
.eyebrow--center { justify-content: center; }

.display {
    font-size: clamp(40px, 6.5vw, 88px);
    line-height: 0.96;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.display em { color: var(--cyan); font-style: normal; }
.display .strike { text-decoration: line-through; text-decoration-thickness: 4px; opacity: .35; }

.h-section {
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.h-section em { color: var(--cyan); font-style: normal; }

.h-sub {
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.lead {
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
    color: var(--gray-dark);
    max-width: 640px;
}
.lead--white { color: rgba(255,255,255,.78); }

.mono { font-family: var(--mono); font-feature-settings: "ss01"; }

/* ── BUTTONS ─────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 28px;
    font-family: var(--sans);
    font-size: 14px; font-weight: 700;
    border-radius: 4px; cursor: pointer; border: none;
    letter-spacing: 0.5px; text-transform: uppercase;
    transition: transform .15s, box-shadow .15s, background .15s;
    text-align: center;
}
.btn--primary {
    background: var(--cyan); color: var(--ink);
    box-shadow: 0 6px 0 0 var(--cyan-dark), 0 12px 28px rgba(42,181,232,.35);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 0 var(--cyan-dark), 0 16px 36px rgba(42,181,232,.5);
}
.btn--ghost {
    background: transparent; color: var(--white);
    border: 1.5px solid rgba(255,255,255,.3);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }

.btn .arrow {
    width: 18px; height: 12px;
}

/* ── TECHNICAL DECOR ─────────────────────────────── */
.tech-corner {
    position: absolute; pointer-events: none;
    color: var(--cyan); opacity: .55;
    font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
}
.tech-corner svg { display: block; }

.tech-grid-bg {
    background-image:
      linear-gradient(rgba(30,52,114,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30,52,114,.06) 1px, transparent 1px);
    background-size: 40px 40px;
}
.tech-grid-bg--dark {
    background-image:
      linear-gradient(rgba(42,181,232,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(42,181,232,.07) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* technical dimension label (cota) */
.cota {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 1px;
    color: var(--cyan);
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
}
.cota::before, .cota::after {
    content: ''; width: 24px; height: 1px; background: currentColor;
}
.cota--single::after { display: none; }

/* ── URGENCY BAR ─────────────────────────────────── */
.urgency-bar {
    background: var(--ink); color: var(--white);
    padding: 12px 0; position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid rgba(42,181,232,.3);
    font-family: var(--mono);
}
.urgency-bar__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap; font-size: 12px;
    text-transform: uppercase; letter-spacing: 1px;
}
.lot-pill { display: flex; align-items: center; gap: 8px; }
.lot-pill__dot { width: 6px; height: 6px; border-radius: 50%; }
.lot-pill--sold .lot-pill__dot { background: var(--red); }
.lot-pill--sold .lot-pill__price { text-decoration: line-through; opacity: .55; }
.lot-pill--active .lot-pill__dot { background: var(--cyan); animation: blink 1.5s infinite; box-shadow: 0 0 8px var(--cyan); }
.lot-pill--active { color: var(--cyan); }
.urgency-bar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }
.urgency-bar__cta {
    color: var(--cyan); font-weight: 700;
    border: 1px solid var(--cyan); padding: 5px 14px;
    border-radius: 100px; transition: all .2s;
}
.urgency-bar__cta:hover { background: var(--cyan); color: var(--ink); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── RESPONSIVE BASE ─────────────────────────────── */
@media (max-width: 900px) {
    section { padding: 72px 0; }
    .container { padding: 0 20px; }
    .urgency-bar__inner { gap: 14px; font-size: 10px; }
    .urgency-bar__sep { display: none; }
}