/* ============================================================
   EL TALLER DE DOUMER DUSSAN — Workshop Visual System
   Adapted from SpeedCell tokens: dark workshop palette,
   metallic chrome, subtle teal/emerald accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- ACCENT (overridden live by Tweaks) ---------- */
  --accent:        #C9A26A;   /* latón cálido — artisan brass */
  --accent-hi:     #E0BC85;   /* latón claro */
  --accent-deep:   #9A7B47;   /* latón profundo */
  --accent-glow:   rgba(201,162,106,0.38);
  --accent-soft:   rgba(201,162,106,0.10);

  /* ---------- ATELIER NEUTRALS (warm graphite) ---------- */
  --ink-0:    #08070A;   /* deepest — pure shadow */
  --ink-1:    #0F0D0A;   /* base background — warm graphite */
  --ink-2:    #15120E;   /* elevated surface */
  --ink-3:    #1D1A14;   /* card */
  --ink-4:    #28241C;   /* card hover */
  --ink-5:    #3A352A;   /* hairline strong */

  --line:     rgba(235,229,213,0.08);
  --line-2:   rgba(235,229,213,0.14);
  --line-hot: rgba(235,229,213,0.22);

  --cream:    #EBE5D5;   /* warm bone */
  --cream-2:  #C9C2AC;
  --steel:    #9A937F;   /* dusty warm gray */
  --steel-2:  #6D6755;
  --muted:    #4A4538;

  /* Chrome / brass gradient for metallic accents */
  --chrome: linear-gradient(180deg, #F0EAD8 0%, #C9A26A 35%, #8A6E3B 70%, #3F3322 100%);
  --chrome-soft: linear-gradient(180deg, #f8f4e6 0%, #d4ba8a 40%, #8a7550 100%);

  /* Hero radial */
  --hero-glow: radial-gradient(ellipse 70% 50% at 50% 40%,
    rgba(201,162,106,0.16) 0%,
    rgba(201,162,106,0.04) 30%,
    transparent 70%);

  /* Carbon-fibre micro texture (very subtle, warmed) */
  --carbon:
    repeating-linear-gradient(45deg, rgba(235,229,213,0.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(235,229,213,0.012) 0 1px, transparent 1px 3px);

  /* ---------- TYPE ---------- */
  --font-display: 'Big Shoulders Display', 'Bebas Neue', 'Inter', sans-serif;
  --font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ---------- SHADOWS ---------- */
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  --sh-3: 0 24px 60px rgba(0,0,0,0.5), 0 8px 18px rgba(0,0,0,0.3);
  --sh-accent: 0 8px 28px var(--accent-glow), 0 2px 6px var(--accent-glow);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- RADII ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- SPACING ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* WhatsApp green (functional only) */
  --wa: #25D366;
  --wa-deep: #128C7E;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream);
  background: var(--ink-1);
  background-image: var(--carbon);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--ink-0); }

/* Display headings */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}
.display-xl { font-size: clamp(56px, 9vw, 124px); }
.display-l  { font-size: clamp(40px, 6vw, 80px); }
.display-m  { font-size: clamp(28px, 4vw, 52px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; font-weight: 500;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--accent);
  display: inline-block;
}

.lede { color: var(--steel); font-size: 18px; line-height: 1.55; max-width: 62ch; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.section-tight { padding: clamp(48px, 6vw, 88px) 0; }

/* Section divider — chrome hairline */
.hr-chrome {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-hot) 20%, var(--line-hot) 80%, transparent);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--cream); color: var(--ink-0);
  box-shadow: var(--sh-2), var(--sh-inset-top);
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--sh-3); }
.btn-primary:active { transform: translateY(0); }

.btn-wa {
  background: var(--wa); color: #06241B;
  box-shadow: 0 8px 24px rgba(37,211,102,0.25);
}
.btn-wa:hover { background: #2ee06f; transform: translateY(-1px); }

.btn-ghost {
  background: rgba(255,255,255,0.02); color: var(--cream);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--line-hot); }

.btn-accent {
  background: var(--accent); color: var(--ink-0);
  box-shadow: var(--sh-accent);
}
.btn-accent:hover { background: var(--accent-hi); transform: translateY(-1px); }

.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }

/* ============================================================
   CHIPS / BADGES
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--cream-2);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}
.chip-accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chip-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s, box-shadow .25s;
}
.card:hover { background: var(--ink-4); border-color: var(--line-2); transform: translateY(-2px); }

/* ============================================================
   SCROLL REVEAL — handled by IntersectionObserver in App
   ============================================================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in  { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"].in { transition-delay: .08s; }
.reveal[data-delay="2"].in { transition-delay: .16s; }
.reveal[data-delay="3"].in { transition-delay: .24s; }
.reveal[data-delay="4"].in { transition-delay: .32s; }
.reveal[data-delay="5"].in { transition-delay: .40s; }
.reveal[data-delay="6"].in { transition-delay: .48s; }

/* ============================================================
   UTIL
   ============================================================ */
.text-cream { color: var(--cream); }
.text-steel { color: var(--steel); }
.text-accent { color: var(--accent); }
.accent-rule { width: 48px; height: 2px; background: var(--accent); border-radius: 2px; display: inline-block; }
.kbd { font-family: var(--font-mono); font-size: 12px; color: var(--steel); }
.mono { font-family: var(--font-mono); }

/* tabular numbers for counters / stats */
.tabular { font-variant-numeric: tabular-nums; }

/* Chrome text gradient — for hero key word (brass-cream version) */
.chrome-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #EBE5D5 30%, #C9A26A 70%, #9A7B47 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Image placeholder — used inside <image-slot> shells we don't replace */
.ph {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.0) 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 6px, transparent 6px 12px),
    var(--ink-2);
  border: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--steel-2);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* mobile tweaks */
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .wrap { padding: 0 20px; }
  .lede { font-size: 16px; }
}