/* ============================================================
   STRUCTA — Design System
   Engenharia Patrimonial para Médicos
   Dark graphite base · electric blue protagonist · gold premium accent
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Base / surfaces — graphite ramp */
  --bg:        #090C12;
  --bg-2:      #0C1018;
  --surface:   #11161F;
  --surface-2: #161C28;
  --surface-3: #1C2433;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.12);
  --line-3:    rgba(255,255,255,.18);

  /* Text */
  --text:   #F4F7FB;
  --text-2: #A2ABBC;
  --text-3: #6B7587;
  --text-4: #495162;

  /* Electric blue — protagonist */
  --blue:        #2E7CFF;
  --blue-bright: #5B97FF;
  --blue-deep:   #1A56E8;
  --blue-ink:    #0B2A66;
  --blue-soft:   rgba(46,124,255,.12);
  --blue-soft-2: rgba(46,124,255,.20);
  --blue-line:   rgba(46,124,255,.38);

  /* Gold — premium / wealth / brand mark */
  --gold:        #D9B45A;
  --gold-bright: #F0D58A;
  --gold-deep:   #A87D2E;
  --gold-soft:   rgba(217,180,90,.12);
  --gold-line:   rgba(217,180,90,.32);
  --gold-grad:   linear-gradient(150deg, #F4E0A0 0%, #D9B45A 42%, #B8862F 100%);
  --blue-grad:   linear-gradient(150deg, #6BA0FF 0%, #2E7CFF 50%, #1A56E8 100%);

  /* Glows */
  --glow-blue:  0 0 0 1px rgba(46,124,255,.35), 0 10px 50px -8px rgba(46,124,255,.45);
  --glow-blue-sm: 0 0 24px -4px rgba(46,124,255,.55);
  --glow-gold:  0 0 40px -6px rgba(217,180,90,.35);
  --shadow:     0 24px 60px -20px rgba(0,0,0,.6);
  --shadow-lg:  0 40px 100px -24px rgba(0,0,0,.75);

  /* Radii — engineered, tight */
  --r-xs: 4px;
  --r-sm: 7px;
  --r:    11px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 180px;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --grid-size: 38px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.03em; margin:0; }
p{ margin:0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ position:relative; padding-block:clamp(72px,10vw,140px); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }

/* Blueprint grid background utility */
.blueprint{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
}
.blueprint-fade{ position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}

/* ============================================================
   TYPOGRAPHY ELEMENTS
   ============================================================ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-bright);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow--gold{ color:var(--gold); }
.eyebrow::before{
  content:""; width:24px; height:1px; background:currentColor; opacity:.7;
}
.eyebrow.no-tick::before{ display:none; }

.display{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(40px, 7.2vw, 88px);
  line-height:.98;
  letter-spacing:-.04em;
}
.h2{ font-size:clamp(30px,4.4vw,52px); letter-spacing:-.035em; }
.h3{ font-size:clamp(22px,2.6vw,30px); letter-spacing:-.025em; }
.lead{ font-size:clamp(17px,1.7vw,21px); color:var(--text-2); line-height:1.55; max-width:60ch; }
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }

.text-blue{ color:var(--blue-bright); }
.text-gold{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-blue-grad{
  background:var(--blue-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Big tabular data number */
.num{
  font-family:var(--font-mono);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg-btn:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  padding:15px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; position:relative; isolation:isolate;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn--primary{
  background:var(--blue); color:#fff;
  box-shadow:var(--glow-blue-sm), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ background:var(--blue-bright); box-shadow:var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.3); transform:translateY(-2px); }

.btn--secondary{
  background:transparent; color:var(--text);
  border-color:var(--line-3);
  backdrop-filter:blur(4px);
}
.btn--secondary:hover{ border-color:var(--blue); color:#fff; background:var(--blue-soft); transform:translateY(-2px); }

.btn--ghost{ background:transparent; color:var(--text-2); padding-inline:14px; }
.btn--ghost:hover{ color:var(--text); }

.btn--gold{
  background:var(--gold-grad); color:#1a1505; box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }

.btn--lg{ padding:18px 32px; font-size:16.5px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.btn .arrow{ transition:transform .25s; }
.btn:hover .arrow{ transform:translate(4px,-4px); }

/* ============================================================
   BADGES / TAGS / PILLS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); color:var(--text-2); background:rgba(255,255,255,.02);
}
.badge--blue{ color:var(--blue-bright); border-color:var(--blue-line); background:var(--blue-soft); }
.badge--gold{ color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft); }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }

.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--text-2);
  padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
}

/* ============================================================
   CARDS / SURFACES
   ============================================================ */
.card{
  position:relative;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.card--hover:hover{ border-color:var(--line-3); transform:translateY(-4px); box-shadow:var(--shadow); }

.card--blue{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(46,124,255,.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--bg-2) 100%);
  border-color:var(--blue-line);
}
.card--blue:hover{ box-shadow:var(--glow-blue); }

.card--stat{ padding:clamp(20px,2.6vw,28px); }

/* corner ticks — engineering detail */
.card--ticked::before, .card--ticked::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
}
.card--ticked::before{ top:12px; left:12px; border-top:1.5px solid var(--gold-line); border-left:1.5px solid var(--gold-line); }
.card--ticked::after{ bottom:12px; right:12px; border-bottom:1.5px solid var(--gold-line); border-right:1.5px solid var(--gold-line); }

/* ============================================================
   STAT BLOCK
   ============================================================ */
.stat .num{ font-size:clamp(34px,4.4vw,52px); color:var(--text); }
.stat .num small{ font-size:.5em; color:var(--text-2); font-weight:700; }
.stat .stat-label{ margin-top:8px; font-size:14px; color:var(--text-2); }
.stat--blue .num{ color:var(--blue-bright); }
.stat--gold .num{ color:var(--gold); }

/* ============================================================
   FORMS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:8px; }
.label{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.input, .select, .textarea{
  font-family:var(--font-body); font-size:16px; color:var(--text);
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:14px 16px; width:100%; transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder, .textarea::placeholder{ color:var(--text-4); }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--blue); background:var(--bg-2);
  box-shadow:0 0 0 3px var(--blue-soft);
}
.select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7587' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
.textarea{ resize:vertical; min-height:110px; }

.checkbox{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:14px; color:var(--text-2); line-height:1.5; }
.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox .box{
  flex:0 0 auto; width:22px; height:22px; border-radius:var(--r-xs);
  border:1px solid var(--line-3); background:var(--bg); margin-top:1px;
  display:grid; place-items:center; transition:.2s;
}
.checkbox .box svg{ width:13px; height:13px; opacity:0; transform:scale(.5); transition:.2s; stroke:#fff; }
.checkbox input:checked + .box{ background:var(--blue); border-color:var(--blue); box-shadow:var(--glow-blue-sm); }
.checkbox input:checked + .box svg{ opacity:1; transform:scale(1); }
.checkbox input:focus-visible + .box{ box-shadow:0 0 0 3px var(--blue-soft); }

/* ============================================================
   DIVIDERS — grid/diagonal grammar
   ============================================================ */
.rule{ height:1px; background:var(--line); border:0; }
.rule--gold{ height:1px; border:0; background:linear-gradient(90deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent); }
.diag-divider{ height:1px; background:repeating-linear-gradient(135deg, var(--line-2) 0 1px, transparent 1px 9px); }

/* Eyebrow index marker e.g. 01 / 02 */
.idx{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-4); letter-spacing:.05em; }

/* ============================================================
   LOGO
   ============================================================ */
.logo{ display:inline-flex; align-items:center; gap:13px; }
.logo img{ height:34px; width:auto; filter:drop-shadow(0 2px 10px rgba(217,180,90,.25)); }
.logo .word{
  font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.02em;
  color:var(--text); line-height:1;
}
.logo .word b{ font-weight:700; }
.logo--stack{ flex-direction:column; gap:14px; text-align:center; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(9,12,18,.78); backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--text-2); transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:14px; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
/* Content is ALWAYS visible by default. Reveal is an ADDITIVE keyframe animation
   applied only when JS adds `.in` (and <html class="anim"> is present). If the
   trigger never fires, content simply stays visible — it can never be stranded. */
@media (prefers-reduced-motion: no-preference){
  html.anim [data-reveal].in{ animation:revealIn .75s cubic-bezier(.2,.7,.2,1) both; }
  html.anim [data-reveal][data-delay="1"].in{ animation-delay:.07s; }
  html.anim [data-reveal][data-delay="2"].in{ animation-delay:.14s; }
  html.anim [data-reveal][data-delay="3"].in{ animation-delay:.21s; }
  html.anim [data-reveal][data-delay="4"].in{ animation-delay:.28s; }
  html.anim [data-reveal][data-delay="5"].in{ animation-delay:.35s; }
}
@keyframes revealIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* ============================================================
   UTILITIES
   ============================================================ */
.grid{ display:grid; gap:var(--s5); }
.flex{ display:flex; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.gap2{ gap:var(--s2); } .gap3{ gap:var(--s3); } .gap4{ gap:var(--s4); } .gap5{ gap:var(--s5); }
.col{ flex-direction:column; }
.wrap-flex{ flex-wrap:wrap; }
.mono{ font-family:var(--font-mono); }
.center-text{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.relative{ position:relative; z-index:1; }
.nowrap{ white-space:nowrap; }