/* ================================================
   QUNOX — Theme Color Layer
   Loaded after home.css and main.css.
   Pure CSS overrides — no HTML or JS changes.
   Design principle: premium enterprise tint system
   (Cloudflare / Linear / Vercel aesthetic)
   ================================================ */


/* ── SCENE 2 — NOSOTROS (About)
   Light gray surface that fades into the black diagnostic
   section at the bottom via an ::after gradient overlay.
   ─────────────────────────────────────────────── */
.scene--about {
  background: #E8E8E8 !important;
  background-image: none !important;
  background-size: auto !important;
  overflow: visible !important;
}

/* No gradient fade — section ends cleanly, diagnostic starts in black */


/* ── SCENE 3 — DIAGNOSTIC  (dark theme)
   Black background. White/gray text hierarchy.
   Cohesive photo treatment via CSS filter + blue overlay.
   ─────────────────────────────────────────────── */
.scene--diagnostic {
  background: #0a0a0a !important;
  border-left: none;
}

/* Header bar: very faint white tint on dark bg */
.diagnostic__header {
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 0.75rem 1rem !important;
  margin-left: -1rem;
  margin-right: -1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 2px 2px 0 0;
}

/* Section label: pulsing dot on dark */
.diagnostic__label::before {
  content: '●';
  font-size: 0.5em;
  color: rgba(100, 130, 255, 0.8);
  margin-right: 6px;
  vertical-align: middle;
  animation: diagnosticPulse 2.4s ease-in-out infinite;
}

@keyframes diagnosticPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Ordinal numbers: subtle accent colors on dark */
.diag-item:has(.diag-item__status--warn) .diag-item__num {
  color: rgba(100, 130, 255, 0.75) !important;
  font-weight: 600;
}
.diag-item:has(.diag-item__status--err) .diag-item__num {
  color: rgba(180, 100, 255, 0.75) !important;
  font-weight: 600;
}

/* Status chips: left border accent on dark bg */
.diag-item__status--warn {
  border-left: 2px solid rgba(100, 130, 255, 0.6) !important;
}
.diag-item__status--err {
  border-left: 2px solid rgba(180, 100, 255, 0.6) !important;
}

/* Visual frame: subtle blue-purple top stroke */
.diagnostic__visual-frame {
  border-top: 1px solid rgba(100, 130, 255, 0.3) !important;
}

/* Progress bar track: white-tinted on dark */
.diagnostic__progress-bar {
  background: rgba(255, 255, 255, 0.08) !important;
}


/* ── SCENE 4 — SERVICES GRID
   New grid layout — no overrides needed.
   ─────────────────────────────────────────────── */


/* ── SCENE 5 — CLOSING CTA
   Decision: already has a gradient text accent on the
   headline and gradient on the form submit button.
   Add:
   1. A very subtle radial blue "light" at top-centre
      — think Vercel's glow, but restrained (not a
      blob, just a 1-layer radial gradient at 8 % opacity)
   2. A thin horizontal rule above the section
   3. Corner grid marks (pure CSS, no images)
      for a technical/enterprise feel
   ─────────────────────────────────────────────── */
.scene--closing {
  background: #F4F5F8 !important; /* slightly cooler than the warm #F8F8F6 */
}

/* Top fade — a single centred radial gradient at the top edge.
   This is NOT a blob: it fades to transparent by 40 % of the
   section height and has zero horizontal spread. */
.scene--closing::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 280px;
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    rgba(67, 97, 238, 0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Top rule: same gradient as About section top */
.scene--closing::after {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(67, 97, 238, 0.25) 30%,
    rgba(114, 9, 183, 0.25) 70%,
    transparent 100%
  );
}

/* Eyebrow: mirror the .label styling for brand consistency */
.closing__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--blue, #4361EE);
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.7;
}
.closing__eyebrow::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--blue, #4361EE);
  margin-left: 10px;
  vertical-align: middle;
  opacity: 0.7;
}

/* Ghost button: tint border to blue for stronger CTA hierarchy */
.btn-closing-ghost {
  border-color: rgba(67, 97, 238, 0.30) !important;
  color: var(--blue, #4361EE) !important;
}
.btn-closing-ghost:hover {
  border-color: var(--blue, #4361EE) !important;
  background: rgba(67, 97, 238, 0.05) !important;
}


/* ── SECTION DIVIDERS
   Decision: thin 1 px rules between the white
   sections break the all-white cascade without
   adding heavy backgrounds. Uses the same
   blue→transparent→blue gradient for a centred
   fade effect (avoids hard edge to edge lines).
   ─────────────────────────────────────────────── */

/* Diagnostic → Services: transition handled by background-image gradient in home.css */

/* Services → Closing transition */
.scene--closing {
  border-top: 1px solid rgba(67, 97, 238, 0.08);
}

/* Closing → Clients transition */
.scene--clients {
  border-top: 1px solid rgba(67, 97, 238, 0.08);
}

/* Clients: faint blue numbers on client count label */
.clients__label {
  color: var(--blue, #4361EE) !important;
  opacity: 0.5;
}


/* ── FOOTER ACCENT
   A thin blue-to-purple rule at the very top of the
   footer — separates the dark footer from the light
   clients section with brand colour.
   ─────────────────────────────────────────────── */
footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--blue, #4361EE) 0%,
    var(--purple, #7209B7) 100%
  );
  margin-bottom: 0; /* sits flush at footer top */
}


/* ── RESPONSIVE — MOBILE
   Revert the large left-gutter offsets on small screens
   where the title area has no horizontal padding room.
   ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .about__lead,
  .about__text {
    margin-left: 0;
    padding-left: 1rem;
  }

  .services__title-area::before {
    display: none; /* no gutter space on mobile */
  }

  .scene--about,
  .scene--services {
    background-size: 28px 28px !important;
  }
}