/* ============================================================
   variable.css — Design System
   Local Home Improvement LLC | SIC-LHI-001
   Brand: #070909 · #C2932D · #E89D23
   Light palette: #F4F4F9 · #F0EFF8 · #F3F8F3 · #FDF9F0 · #F7F0F0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {

  /* ── SITE BACKGROUNDS ────────────────────────────────────── */
  --bg-body:           #F4F4F9;   /* Body — todo el sitio      */
  --bg-hero:           #F4F4F9;   /* Hero section              */
  --bg-services:       #F0EFF8;   /* Services — soft lavender  */
  --bg-projects:       #F3F8F3;   /* Projects — soft mint      */
  --bg-why:            #FDF9F0;   /* Why us — warm cream       */
  --bg-testimonials:   #F7F0F0;   /* Reviews — blush rose      */
  --bg-contact:        #F4F4F9;   /* Contact form              */
  --bg-white:          #FFFFFF;   /* Cards, inputs, nav white  */
  --bg-dark:           #070909;   /* Navbar, footer, hero dark */
  --bg-dark-2:         #0D0F0F;   /* Dark sections alternate   */
  --bg-dark-3:         #141818;   /* Dark cards                */

  /* ── BRAND GOLD ──────────────────────────────────────────── */
  --gold:              #C2932D;   /* Logo gold — primary CTA   */
  --gold-mid:          #E89D23;   /* Bright gold — hover/acct  */
  --gold-dark:         #A87A20;   /* Pressed state             */
  --gold-light:        #F0B845;   /* Light hover               */
  --gold-tint:         #FDF3E0;   /* Gold tint bg on light     */
  --gold-tint-dark:    #2A2018;   /* Gold tint bg on dark      */
  --gold-subtle:       rgba(194,147,45,.10);

  /* ── TEXT COLORS — on light backgrounds ──────────────────── */
  --text-primary:      #111111;   /* Headings, main text       */
  --text-body:         #444444;   /* Paragraphs                */
  --text-muted:        #777777;   /* Hints, labels, captions   */
  --text-gold:         #C2932D;   /* Accent text, links        */

  /* ── TEXT COLORS — on dark backgrounds ───────────────────── */
  --text-on-dark:      #FFFFFF;
  --text-on-dark-2:    rgba(255,255,255,.65);
  --text-on-dark-3:    rgba(255,255,255,.35);

  /* ── BORDERS ─────────────────────────────────────────────── */
  --border-light:      rgba(0,0,0,.08);
  --border-medium:     rgba(0,0,0,.14);
  --border-gold:       rgba(194,147,45,.25);
  --border-dark:       rgba(255,255,255,.08);

  /* ── STATUS ──────────────────────────────────────────────── */
  --green:             #1A9E5E;
  --green-bg:          #EAF6EE;
  --blue:              #2B7FC4;
  --blue-bg:           #E6F0FB;
  --red:               #C0392B;
  --red-bg:            #FDECEA;
  --orange:            #E05B29;
  --orange-bg:         #FEF0EB;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-heading:   'Barlow Condensed', Impact, sans-serif;
  --font-body:      'Outfit', 'Segoe UI', sans-serif;

  --text-xs:    .75rem;
  --text-sm:    .875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-hero:  clamp(2.8rem, 6vw, 5.5rem);

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  --lead-tight:  1;
  --lead-snug:   1.2;
  --lead-normal: 1.5;
  --lead-relax:  1.7;

  --track-tight:  -.02em;
  --track-normal:  0;
  --track-wide:    .06em;
  --track-wider:   .12em;

  /* ── SPACING ─────────────────────────────────────────────── */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container:  1200px;
  --section-py: 5rem;
  --section-px: 5%;

  /* ── RADII ───────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 9999px;

  /* ── SHADOWS — light palette ─────────────────────────────── */
  --shadow-xs:   0 1px 4px  rgba(0,0,0,.07);
  --shadow-sm:   0 2px 10px rgba(0,0,0,.09);
  --shadow-md:   0 4px 20px rgba(0,0,0,.11);
  --shadow-lg:   0 8px 36px rgba(0,0,0,.13);
  --shadow-gold: 0 4px 20px rgba(194,147,45,.30);
  --shadow-card: 0 2px 12px rgba(0,0,0,.08);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .4s  ease;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-nav:   900;
  --z-modal: 1000;

  /* ── NAVBAR ──────────────────────────────────────────────── */
  --nav-h:      64px;
  --nav-bg:     #FFFFFF;
  --nav-border: rgba(0,0,0,.08);
  --nav-shadow: 0 2px 16px rgba(0,0,0,.09);

  /* ── CARDS ───────────────────────────────────────────────── */
  --card-bg:      #FFFFFF;
  --card-border:  rgba(0,0,0,.07);
  --card-hover:   rgba(194,147,45,.30);
  --card-r:       var(--r-lg);
  --card-p:       var(--sp-6);
  --card-shadow:  var(--shadow-card);

  /* ── BUTTONS ─────────────────────────────────────────────── */
  --btn-h:    46px;
  --btn-h-sm: 36px;
  --btn-h-lg: 54px;
  --btn-r:    var(--r-sm);
  --btn-fs:   var(--text-sm);
  --btn-fw:   var(--w-bold);
  --btn-ls:   var(--track-wide);

  /* ── INPUTS ──────────────────────────────────────────────── */
  --input-h:      50px;
  --input-bg:     #FFFFFF;
  --input-bg-f:   #FFFDF8;
  --input-border: rgba(0,0,0,.14);
  --input-focus:  #C2932D;
  --input-color:  #111111;
  --input-ph:     #999999;
  --input-r:      var(--r-md);
}

/* ── RESET ────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  {
  font-family: var(--font-body);
  font-size:   var(--text-base);
  font-weight: var(--w-regular);
  line-height: var(--lead-relax);
  background:  var(--bg-body);
  color:       var(--text-body);
  overflow-x:  hidden;
}
img    { max-width:100%; display:block; }
a      { text-decoration:none; color:inherit; }
ul     { list-style:none; margin:0; padding:0; }
button { font-family:var(--font-body); cursor:pointer; }

/* ── LAYOUT ───────────────────────────────────────────────────── */
.container {
  width:100%; max-width:var(--container);
  margin:0 auto; padding:0 var(--section-px);
}

/* ── TYPOGRAPHY HELPERS ───────────────────────────────────────── */
.heading {
  font-family:    var(--font-heading);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height:    var(--lead-tight);
  color:          var(--text-primary);
}
.heading em { font-style:normal; color:var(--gold-mid); }

.section-label {
  display:block;
  font-size:       var(--text-xs);
  font-weight:     var(--w-bold);
  letter-spacing:  var(--track-wider);
  text-transform:  uppercase;
  color:           var(--gold);
  margin-bottom:   var(--sp-2);
}
.gold-bar {
  width:48px; height:4px;
  background:   linear-gradient(90deg, var(--gold), var(--gold-mid));
  border-radius:2px;
  margin:       var(--sp-3) 0 var(--sp-5);
}

/* ── BADGES ───────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-size:10px; font-weight:var(--w-bold);
  letter-spacing:var(--track-wide); text-transform:uppercase;
  padding:3px 10px; border-radius:var(--r-pill);
}
.badge-active   { background:var(--green-bg); color:var(--green); }
.badge-done     { background:var(--blue-bg);  color:var(--blue); }
.badge-upcoming { background:var(--gold-tint); color:var(--gold); }
.badge-pulse::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; animation:bpulse 1.4s infinite;
}
@keyframes bpulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(1.5); }
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:var(--btn-h); padding:0 var(--sp-6);
  border-radius:var(--btn-r); border:none; cursor:pointer;
  font-family:var(--font-body); font-size:var(--btn-fs);
  font-weight:var(--btn-fw); letter-spacing:var(--btn-ls);
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  transition:all var(--t-base);
}
/* Primary gold */
.btn-gold {
  background:var(--gold); color:#fff;
}
.btn-gold:hover {
  background:var(--gold-dark);
  transform:translateY(-2px); box-shadow:var(--shadow-gold);
}
/* Mid gold — brighter */
.btn-mid {
  background:var(--gold-mid); color:var(--bg-dark);
}
.btn-mid:hover {
  background:var(--gold-light);
  transform:translateY(-2px); box-shadow:var(--shadow-gold);
}
/* Dark button — for use on light bg */
.btn-dark {
  background:var(--bg-dark); color:var(--gold-mid);
}
.btn-dark:hover {
  background:var(--bg-dark-2);
  transform:translateY(-2px);
}
/* Black button — for CTA strip */
.btn-black {
  background:var(--bg-dark); color:var(--gold-mid);
}
.btn-black:hover { background:var(--bg-dark-2); }
/* Outline gold */
.btn-outline {
  background:transparent; color:var(--gold);
  border:2px solid var(--gold);
}
.btn-outline:hover { background:var(--gold); color:#fff; }
/* Ghost — on light bg */
.btn-ghost {
  background:transparent; color:var(--text-body);
  border:2px solid var(--border-medium);
}
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }
/* Sizes */
.btn-sm { height:var(--btn-h-sm); padding:0 var(--sp-4); font-size:var(--text-xs); }
.btn-lg { height:var(--btn-h-lg); padding:0 var(--sp-8); font-size:var(--text-md); }

/* ── CARDS ────────────────────────────────────────────────────── */
.card {
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--card-r);
  padding:       var(--card-p);
  box-shadow:    var(--card-shadow);
  transition:    transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover {
  transform:     translateY(-4px);
  border-color:  var(--card-hover);
  box-shadow:    var(--shadow-md);
}

/* ── FORM ELEMENTS ────────────────────────────────────────────── */
.form-group  { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.form-label  {
  font-size:       var(--text-xs);
  font-weight:     var(--w-bold);
  letter-spacing:  var(--track-wide);
  text-transform:  uppercase;
  color:           var(--text-muted);
}
.form-input, .form-select, .form-textarea {
  width:100%; height:var(--input-h); padding:0 var(--sp-4);
  background:   var(--input-bg);
  border:       1.5px solid var(--input-border);
  border-radius:var(--input-r);
  color:        var(--input-color);
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  outline:none;
  transition:   border-color var(--t-fast), background var(--t-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--input-focus);
  background:  var(--input-bg-f);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--input-ph); }
.form-textarea {
  height:auto; min-height:110px;
  padding:var(--sp-3) var(--sp-4); resize:vertical;
}
.form-select { appearance:none; cursor:pointer; }
.form-select option { background:var(--bg-white); color:var(--text-primary); }