/* ============================================================
   BioCivil M&M — Metallic Overlay (global)
   Brushed-steel treatment — modern, not skeuomorphic.

   REVERT: remove this one line from each HTML file:
   <link rel="stylesheet" href="css/metallic-index.css">
   ============================================================ */

/* ── Shared gradient tokens ─────────────────────────────────
   Each gradient simulates directional brush marks:
   dark edge → bright highlight → mid → bright → dark edge.
   ──────────────────────────────────────────────────────────── */
:root {
  /* Brushed anodized green */
  --mg: linear-gradient(
    135deg,
    oklch(36% 0.18 142)  0%,
    oklch(62% 0.26 148) 20%,
    oklch(47% 0.21 145) 38%,
    oklch(70% 0.28 150) 56%,
    oklch(44% 0.20 144) 74%,
    oklch(62% 0.25 148) 88%,
    oklch(38% 0.18 143) 100%
  );

  /* Brushed silver-white — pearl, never pure-chrome */
  --mw: linear-gradient(
    138deg,
    oklch(80% 0.003 235)  0%,
    oklch(99% 0.001 0)    26%,
    oklch(86% 0.003 228)  48%,
    oklch(100% 0 0)       66%,
    oklch(79% 0.004 240) 100%
  );

  /* Brushed navy steel */
  --mn: linear-gradient(
    155deg,
    oklch(10% 0.045 248)  0%,
    oklch(20% 0.082 252) 20%,
    oklch(13% 0.055 248) 40%,
    oklch(22% 0.086 250) 60%,
    oklch(12% 0.050 247) 78%,
    oklch(18% 0.072 250) 90%,
    oklch(11% 0.045 248) 100%
  );

  /* Smooth brushed green — for small elements like buttons
     Fewer stops, shallower angle = no visible banding */
  --mg-btn: linear-gradient(
    160deg,
    oklch(40% 0.19 143)  0%,
    oklch(56% 0.24 148) 42%,
    oklch(63% 0.26 149) 58%,
    oklch(43% 0.20 143) 100%
  );
}

/* ── 1. HERO TITLE ─────────────────────────────────────────
   Non-accent lines get a pearl-white brushed look.
   "sostenible." gets the full anodized-green treatment.
   ──────────────────────────────────────────────────────────── */
.hero-title .line-inner {
  background: var(--mw);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title .accent-word {
  background: var(--mg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* No drop-shadow — keeps edges crisp and metallic */
}

/* ── 2. HERO BADGE ─────────────────────────────────────────
   Replace flat border with a swept gradient-border ring.
   ──────────────────────────────────────────────────────────── */
.hero-badge {
  position: relative;
  background: oklch(100% 0 0 / 0.07);
  border: 1px solid transparent;
  background-clip: padding-box;
}

.hero-badge::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    112deg,
    oklch(100% 0 0 / 0.04),
    oklch(100% 0 0 / 0.30) 38%,
    oklch(66% 0.26 148 / 0.44) 62%,
    oklch(100% 0 0 / 0.06)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── 3. SECTION LABELS ─────────────────────────────────────
   Both the accent line and the text get the metallic gradient.
   ──────────────────────────────────────────────────────────── */
.section-label {
  background: linear-gradient(
    105deg,
    oklch(40% 0.19 143)  0%,
    oklch(66% 0.27 149) 32%,
    oklch(50% 0.22 145) 52%,
    oklch(68% 0.26 149) 72%,
    oklch(42% 0.19 143) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Override the decorative line before the label text */
.section-label::before {
  background: linear-gradient(
    90deg,
    oklch(40% 0.19 143),
    oklch(68% 0.27 149) 50%,
    oklch(42% 0.19 143)
  ) !important;
}

/* ── 4. "CONCIENCIA AMBIENTAL" in about quote ─────────────── */
.about-text .big-quote span {
  background: var(--mg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: unset !important;
}

/* ── 5. BUTTONS ────────────────────────────────────────────
   Smooth 4-stop gradient — clean at any button size.
   Inset top-edge specular highlight for material depth.
   ──────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--mg-btn);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0  1px 0 oklch(100% 0 0 / 0.22),
    inset 0 -1px 0 oklch(0%   0 0 / 0.18),
    0 4px 20px oklch(50% 0.22 145 / 0.32);
  transition:
    filter     0.35s var(--ease-expo),
    box-shadow 0.35s var(--ease-expo);
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(100% 0 0 / 0.14) 0%,
    oklch(100% 0 0 / 0.02) 54%,
    transparent 100%
  );
  border-radius: inherit;
  pointer-events: none;
}

.btn-primary:hover {
  background: var(--mg-btn);
  filter: brightness(1.10) saturate(1.08);
  box-shadow:
    inset 0  1px 0 oklch(100% 0 0 / 0.26),
    inset 0 -1px 0 oklch(0%   0 0 / 0.22),
    0 14px 36px oklch(50% 0.22 145 / 0.45);
}

.nav-cta {
  background: var(--mg-btn);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.20);
}

.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.13) 0%, transparent 54%);
  border-radius: inherit;
  pointer-events: none;
}

.nav-cta:hover {
  background: var(--mg-btn);
  filter: brightness(1.10);
}

/* ── 6. STATS BAR ──────────────────────────────────────────
   Navy steel + ultra-fine vertical striations (0.9% opacity)
   that simulate the micro-texture of brushed metal.
   ──────────────────────────────────────────────────────────── */
.stats-bar {
  background:
    repeating-linear-gradient(
      90deg,
      transparent        0px,
      oklch(100% 0 0 / 0.009) 1px,
      transparent        2px
    ),
    var(--mn);
}

/* Metallic top-border sweep */
.stats-bar::before {
  background: linear-gradient(
    90deg,
    transparent,
    oklch(60% 0.26 148 / 0.65) 25%,
    oklch(74% 0.28 151 / 0.92) 50%,
    oklch(60% 0.26 148 / 0.65) 75%,
    transparent
  );
}

/* Stats numbers — brushed green gradient text */
.stat-card .big-num span {
  background: var(--mg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  filter: drop-shadow(0 0 16px oklch(64% 0.26 148 / 0.22));
}

/* ── 7. SERVICES SECTION ───────────────────────────────────
   Navy steel background + horizontal micro-striations.
   ──────────────────────────────────────────────────────────── */
.services-section {
  position: relative;
  background:
    repeating-linear-gradient(
      180deg,
      transparent        0px,
      oklch(100% 0 0 / 0.008) 1px,
      transparent        2px
    ),
    var(--mn);
}

/* Ensure the showcase sits above the pseudo layers */
.services-section .svc-showcase {
  position: relative;
  z-index: 1;
}

/* Carousel panel: metallic frame + inner top highlight */
.svc-panel {
  box-shadow:
    0 40px 90px oklch(0% 0 0 / 0.55),
    0 0 0 1px oklch(64% 0.26 148 / 0.20),
    inset 0 1px 0 oklch(100% 0 0 / 0.12);
}

/* Progress fill — brushed green sweep */
.svc-progress-fill,
.svc-progress-fill.is-ambiental {
  background: linear-gradient(
    90deg,
    oklch(38% 0.18 142)  0%,
    oklch(66% 0.27 148) 38%,
    oklch(50% 0.22 145) 58%,
    oklch(72% 0.28 150) 78%,
    oklch(42% 0.19 143) 100%
  );
}

/* ── 8. HERO GLASS CARDS ───────────────────────────────────
   Gradient border via mask-composite: metallic edge that
   goes from near-transparent → silver highlight → green tint.
   ──────────────────────────────────────────────────────────── */
.h-card {
  background: oklch(100% 0 0 / 0.09);
  border: 1px solid transparent;
  position: relative;
}

.h-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    138deg,
    oklch(100% 0 0 / 0.06),
    oklch(100% 0 0 / 0.28) 28%,
    oklch(66% 0.24 148 / 0.34) 52%,
    oklch(100% 0 0 / 0.12) 76%,
    oklch(100% 0 0 / 0.04)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── 9. CTA SECTION ────────────────────────────────────────
   Dark atmosphere: near-black base + teal beam from left
   + green beam from right — professional, not flat green.
   ──────────────────────────────────────────────────────────── */
.cta-section {
  background:
    radial-gradient(ellipse 78% 160% at -6% 52%,  oklch(32% 0.22 218 / 0.95) 0%, transparent 54%),
    radial-gradient(ellipse 70% 150% at 106% 48%, oklch(52% 0.24 148 / 0.90) 0%, transparent 54%),
    radial-gradient(ellipse 55% 60%  at 50% -18%, oklch(22% 0.12 252 / 0.65) 0%, transparent 52%),
    radial-gradient(ellipse 45% 50%  at 50% 118%, oklch(14% 0.08 250 / 0.70) 0%, transparent 52%),
    oklch(5.5% 0.03 258) !important;
}

/* Blueprint-grid texture overlay */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

/* Centered decorative ring */
.cta-section::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(800px, 140%);
  height: min(800px, 140%);
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / 0.07);
  pointer-events: none;
  z-index: 0;
}

/* CTA pearl-white button */
.cta-section .btn-white {
  background: linear-gradient(
    135deg,
    oklch(88% 0.003 232)  0%,
    oklch(100% 0 0)       28%,
    oklch(91% 0.002 228)  52%,
    oklch(100% 0 0)       74%,
    oklch(86% 0.004 238) 100%
  );
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0),
    0 4px 24px oklch(0% 0 0 / 0.28);
  color: oklch(14% 0.08 252) !important;
}

/* ── 10. WHITE SECTIONS — polished pearl panels ────────────
   Very subtle directional shimmer + horizontal micro-grain
   breaks the flat white without adding colour or clutter.
   ──────────────────────────────────────────────────────────── */
.about,
.section-portafolio {
  background:
    repeating-linear-gradient(
      0deg,
      transparent        0px,
      oklch(0% 0 0 / 0.012) 1px,
      transparent        2px
    ),
    linear-gradient(
      155deg,
      oklch(96.5% 0.004 232)  0%,
      oklch(100%  0     0)    30%,
      oklch(98%   0.003 145)  58%,
      oklch(99.5% 0.001 0)    78%,
      oklch(96%   0.004 228) 100%
    ) !important;
}

/* ── 11. NAV SCROLLED — pearl shimmer ──────────────────────
   Replaces flat white with a barely-perceptible cool↔warm
   sweep that feels like light grazing polished aluminium.
   ──────────────────────────────────────────────────────────── */
.nav.scrolled {
  background: linear-gradient(
    90deg,
    oklch(96.5% 0.004 232 / 0.95),
    oklch(100%  0     0   / 0.95) 30%,
    oklch(98.5% 0.003 145 / 0.95) 65%,
    oklch(96.5% 0.004 228 / 0.95)
  ) !important;
}

/* ── 12. SCROLLBAR ─────────────────────────────────────────
   Give the scrollbar thumb a metallic green gradient.
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    oklch(46% 0.21 145),
    oklch(60% 0.25 148) 50%,
    oklch(44% 0.20 144)
  );
}