/* ==========================================================================
   V&S SOLUTION SERVICES LLC - MINIMAL MONOCHROME LAYER
   Loaded last. Neutral charcoal palette so the gold logo is the hero of the
   brand: gold appears only in the logo and the primary call-to-action.
   Remove the <link> to css/minimal.css to return to the navy + gold look.
   ========================================================================== */

body.theme-blue {
  --mn-bg: #0f0f11;
  --mn-bg-rgb: 15, 15, 17;
  --mn-footer: #0b0b0d;
  --mn-surface: #17171a;
  --mn-surface-2: #1e1e22;
  --mn-line: rgba(255, 255, 255, 0.08);
  --mn-line-strong: rgba(255, 255, 255, 0.16);
  --mn-text: #ededef;
  --mn-muted: #9b9ba1;
  --mn-gold: #c9a54c;
  --mn-gold-hover: #d6b560;

  /* Re-point the legacy tokens used across style.css / style-blue.css */
  --bg-deep: var(--mn-bg);
  --bg-canvas: var(--mn-bg);
  --bg-surface: var(--mn-surface);
  --bg-surface-elevated: var(--mn-surface-2);
  --bg-surface-glass: rgba(var(--mn-bg-rgb), 0.92);
  --text-primary: var(--mn-text);
  --text-secondary: var(--mn-muted);
  --text-muted: #7c7c83;
  --border-subtle: var(--mn-line);
  --border-specular: var(--mn-line-strong);
  --border-gold: var(--mn-line-strong);
  --gold-primary: var(--mn-gold);
  --gold-glow: var(--mn-gold);
  --gold-shadow: none;
  --glass-specular: none;
  --pm-gold: #ededef;
  --pm-gold-deep: #b9b9bf;
  --pm-navy: var(--mn-bg);

  background-color: var(--mn-bg) !important;
  color: var(--mn-text);
}

/* --------------------------------------------------------------------------
   One canvas: every section shares the same background + ambient gold canvas
   -------------------------------------------------------------------------- */
#lux-ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

body.theme-blue .stats-section,
body.theme-blue .ba-section,
body.theme-blue .transformation-section,
body.theme-blue .services-section,
body.theme-blue .portfolio-section,
body.theme-blue .featured-section,
body.theme-blue .gallery-section,
body.theme-blue .process-section,
body.theme-blue .why-section,
body.theme-blue .testimonials-section,
body.theme-blue .faq-section,
body.theme-blue .contact-section,
body.theme-blue .estimator-section,
body.theme-blue .projects-hero,
body.theme-blue .projects-catalog-section {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  position: relative;
  z-index: 1;
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}
body.theme-blue.page-projects {
  background: var(--mn-bg) !important;
}
body.theme-blue .stats-section,
body.theme-blue .process-section,
body.theme-blue .faq-section { border-top: 1px solid var(--mn-line) !important; }
body.theme-blue .hero-section.hero-cinematic { background: var(--mn-bg) !important; position: relative; z-index: 1; }
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(var(--mn-bg-rgb), 0.92) 0%, rgba(var(--mn-bg-rgb), 0.78) 34%, rgba(var(--mn-bg-rgb), 0.32) 68%, rgba(var(--mn-bg-rgb), 0.45) 100%),
    linear-gradient(180deg, rgba(var(--mn-bg-rgb), 0.5) 0%, rgba(var(--mn-bg-rgb), 0) 22%, rgba(var(--mn-bg-rgb), 0) 70%, rgba(var(--mn-bg-rgb), 1) 100%) !important;
}

/* Top bar removed: the phone lives in the header, language moved to the nav */
body.theme-blue .top-notice-bar { display: none !important; }

/* --------------------------------------------------------------------------
   Header: flat, no glowing logo box
   -------------------------------------------------------------------------- */
body.theme-blue .site-header,
body.theme-blue .site-header.scrolled {
  background: rgba(var(--mn-bg-rgb), 0.86) !important;
  border-bottom: 1px solid var(--mn-line) !important;
  box-shadow: none !important;
}
body.theme-blue .brand-logo,
body.theme-blue .site-header.scrolled .brand-logo {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.theme-blue .brand-logo:hover { transform: none; }
body.theme-blue .brand-logo img,
body.theme-blue .site-header.scrolled .brand-logo img {
  filter: none !important;
  height: 58px;
}
body.theme-blue .nav-link { color: #c9c9ce !important; font-weight: 500 !important; }
body.theme-blue .nav-link:hover,
body.theme-blue .nav-link.active { color: #ffffff !important; }
body.theme-blue .nav-link::after { background: #ffffff !important; height: 1px !important; }

body.theme-blue .btn-call {
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
  color: var(--mn-text) !important;
}
body.theme-blue .btn-call:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Language switch in the nav (desktop only) */
.nav-lang { display: none; }
@media (min-width: 1025px) { .nav-lang { display: inline-flex; } }
body.theme-blue .lang-switcher {
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
}
body.theme-blue .lang-btn { background: transparent !important; color: var(--mn-muted) !important; border: 0 !important; }
body.theme-blue .lang-btn.active {
  background: var(--mn-text) !important;
  color: var(--mn-bg) !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Typography: lighter display weight, neutral accents
   -------------------------------------------------------------------------- */
body.theme-blue .hero-title,
body.theme-blue .hero-title *,
body.theme-blue .section-title,
body.theme-blue .projects-hero-title {
  font-weight: 700 !important;
}
body.theme-blue .section-title { letter-spacing: -0.035em !important; }
body.theme-blue .projects-hero-title span {
  color: var(--mn-text) !important;
  -webkit-text-fill-color: var(--mn-text) !important;
}
body.theme-blue .service-title,
body.theme-blue .feat-title,
body.theme-blue .process-step-title,
body.theme-blue .faq-question { font-weight: 600 !important; }

body.theme-blue .hero-slogan { color: #d7d7dc !important; }
body.theme-blue .hero-slogan::before { background: rgba(255, 255, 255, 0.5) !important; }
body.theme-blue .section-tag,
body.theme-blue .feat-cat,
body.theme-blue .gallery-cat-label { color: var(--mn-muted) !important; }
body.theme-blue .section-subtitle,
body.theme-blue .section-desc,
body.theme-blue .service-desc,
body.theme-blue .faq-answer { color: var(--mn-muted) !important; }

/* --------------------------------------------------------------------------
   Buttons: gold only on the primary CTA, flat
   -------------------------------------------------------------------------- */
body.theme-blue .btn-gold,
body.theme-blue .portfolio-jump-btn {
  background: var(--mn-gold) !important;
  color: #111113 !important;
  border: 1px solid var(--mn-gold) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
}
body.theme-blue .btn-gold:hover,
body.theme-blue .portfolio-jump-btn:hover {
  background: var(--mn-gold-hover) !important;
  border-color: var(--mn-gold-hover) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
  filter: none !important;
}
body.theme-blue .btn-gold::after,
body.theme-blue .portfolio-jump-btn::after { display: none !important; }

body.theme-blue .btn-outline,
body.theme-blue .btn-outline-gold,
body.theme-blue .btn-sms {
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
  color: var(--mn-text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
body.theme-blue .btn-outline:hover,
body.theme-blue .btn-outline-gold:hover,
body.theme-blue .btn-sms:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  filter: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Floating actions: two compact pills (text = solid, email = outline)
   -------------------------------------------------------------------------- */
body.theme-blue .floating-email {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto !important;
  height: 46px !important;
  padding: 0 1.1rem 0 0.9rem !important;
  border-radius: 999px !important;
  background: rgba(var(--mn-bg-rgb), 0.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mn-text) !important;
  border: 1px solid var(--mn-line-strong) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  right: 24px !important;
  bottom: 80px !important;
}
body.theme-blue .floating-email svg { width: 19px; height: 19px; }
body.theme-blue .floating-email:hover { transform: translateY(-2px) !important; border-color: rgba(255, 255, 255, 0.4) !important; }
body.theme-blue .floating-email .email-tooltip { display: none !important; }
.mobile-drawer.active ~ .floating-email { opacity: 0; pointer-events: none; }
body.theme-blue .floating-whatsapp.floating-sms {
  width: auto !important;
  height: 46px !important;
  padding: 0 1.1rem 0 0.9rem !important;
  gap: 0.5rem;
  border-radius: 999px !important;
  background: var(--mn-text) !important;
  color: var(--mn-bg) !important;
  border: 0 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
  right: 24px !important;
  bottom: 24px !important;
}
body.theme-blue .floating-whatsapp.floating-sms svg { width: 20px; height: 20px; }
body.theme-blue .floating-whatsapp.floating-sms:hover { transform: translateY(-2px) !important; }
.fab-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
body.theme-blue .floating-sms .whatsapp-tooltip { display: none !important; }

/* --------------------------------------------------------------------------
   Cards and surfaces: no borders, no glow, quiet hover
   -------------------------------------------------------------------------- */
body.theme-blue .bento-card,
body.theme-blue .testimonial-card,
body.theme-blue .faq-item,
body.theme-blue .contact-card,
body.theme-blue .review-form-card,
body.theme-blue .video-tour-card,
body.theme-blue .gallery-video-banner,
body.theme-blue .calc-card,
body.theme-blue .projects-conversion-card {
  background: var(--mn-surface) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
body.theme-blue .bento-card:hover,
body.theme-blue .testimonial-card:hover,
body.theme-blue .faq-item:hover,
body.theme-blue .faq-item.active {
  border-color: var(--mn-line-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.theme-blue .bento-card::before,
body.theme-blue .bento-card::after { display: none !important; }

body.theme-blue .service-icon-box {
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
  color: var(--mn-text) !important;
}
body.theme-blue .bento-card:hover .service-icon-box { transform: none; background: transparent !important; }
body.theme-blue .service-features li { color: #cfcfd4 !important; font-weight: 500 !important; }
body.theme-blue .service-features li::before { color: var(--mn-muted) !important; }

body.theme-blue .gallery-card,
body.theme-blue .feat-media { background: var(--mn-surface) !important; border: 0 !important; box-shadow: none !important; }
body.theme-blue .gallery-card:hover { border-color: transparent !important; box-shadow: none !important; }
body.theme-blue .gallery-zoom-trigger,
body.theme-blue .project-zoom-trigger {
  background: rgba(var(--mn-bg-rgb), 0.6) !important;
  border: 1px solid var(--mn-line-strong) !important;
}

/* Gallery: 6 photos (big + 5) — the full catalog is one click away */
body.theme-blue:not(.page-projects) .gallery-grid > .gallery-card:nth-child(n+7) { display: none !important; }

/* Stats */
body.theme-blue .stat-number,
body.theme-blue .stat-char { color: var(--mn-text) !important; }
body.theme-blue .stat-number { font-weight: 600 !important; }

/* Before / after handle */
body.theme-blue .ba-handle { background: #ffffff !important; box-shadow: none !important; width: 2px; }
body.theme-blue .ba-handle-knob {
  background: var(--mn-bg) !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  animation: none !important;
}
body.theme-blue .ba-badge-pill {
  background: rgba(var(--mn-bg-rgb), 0.75) !important;
  border: 0 !important;
  color: var(--mn-text) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.06em !important;
}
body.theme-blue .before-after-container { border: 0 !important; box-shadow: none !important; }

/* Featured CTA tile */
body.theme-blue .feat-cta { background: var(--mn-surface) !important; border: 1px solid var(--mn-line) !important; }
body.theme-blue .feat-cta:hover { background: var(--mn-text) !important; border-color: var(--mn-text) !important; }
body.theme-blue .feat-cta:hover .feat-cta-label { color: var(--mn-bg) !important; }
body.theme-blue .feat-cta-arrow { border-color: var(--mn-line-strong) !important; color: var(--mn-text) !important; }
body.theme-blue .feat-cta:hover .feat-cta-arrow { background: var(--mn-bg) !important; color: var(--mn-text) !important; }

/* Process (now also the "About us" anchor) */
body.theme-blue .process-num { background: var(--mn-bg) !important; }
.js-process .process-step.is-active .process-num {
  background: var(--mn-text) !important;
  border-color: var(--mn-text) !important;
  color: var(--mn-bg) !important;
}
.process-trust {
  list-style: none;
  padding: 0;
  margin: -0.75rem 0 2rem;
  display: grid;
  gap: 0.6rem;
}
.process-trust li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--mn-text);
  font-weight: 500;
  font-size: 0.98rem;
}
.process-trust li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.32em;
  width: 0.45rem;
  height: 0.75rem;
  border-right: 2px solid var(--mn-muted);
  border-bottom: 2px solid var(--mn-muted);
  transform: rotate(45deg);
}

/* Forms */
body.theme-blue .form-input,
body.theme-blue .form-select,
body.theme-blue .form-textarea,
body.theme-blue .calc-select {
  background: var(--mn-bg) !important;
  border: 1px solid var(--mn-line-strong) !important;
  color: var(--mn-text) !important;
}
body.theme-blue .form-input:focus,
body.theme-blue .form-select:focus,
body.theme-blue .form-textarea:focus,
body.theme-blue .calc-select:focus {
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* Gallery filters on the projects page */
body.theme-blue .gal-filter-btn { background: transparent !important; border-color: var(--mn-line-strong) !important; color: var(--mn-muted) !important; }
body.theme-blue .gal-filter-btn:hover { color: var(--mn-text) !important; border-color: rgba(255, 255, 255, 0.32) !important; }
body.theme-blue .gal-filter-btn.active { background: var(--mn-text) !important; color: var(--mn-bg) !important; border-color: var(--mn-text) !important; }

/* Mobile drawer + footer */
body.theme-blue .mobile-drawer {
  background: var(--mn-bg) !important;
  border-left: 1px solid var(--mn-line) !important;
}
body.theme-blue .site-footer {
  background: var(--mn-footer) !important;
  border-top: 1px solid var(--mn-line) !important;
}

/* Remaining gold accents -> neutral (rating stars stay gold: they carry meaning) */
body.theme-blue .testimonial-verified-badge,
body.theme-blue .channel-val,
body.theme-blue .footer-social-title { color: var(--mn-muted) !important; }
body.theme-blue .channel-icon {
  color: var(--mn-text) !important;
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
  box-shadow: none !important;
}
body.theme-blue .faq-icon {
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
  color: var(--mn-text) !important;
  box-shadow: none !important;
}
body.theme-blue .slider-dot { background: rgba(255, 255, 255, 0.2) !important; }
body.theme-blue .slider-dot.active { background: var(--mn-text) !important; }
body.theme-blue .site-footer .badge-pill {
  background: transparent !important;
  border: 1px solid var(--mn-line-strong) !important;
  color: var(--mn-muted) !important;
  box-shadow: none !important;
}

/* Drawer: neutral icons; hide the floating pill while the drawer is open */
body.theme-blue .drawer-link-icon {
  color: var(--mn-muted) !important;
  background: transparent !important;
  border-color: var(--mn-line) !important;
}
body.theme-blue .drawer-nav-link:hover .drawer-link-icon { color: var(--mn-text) !important; }
body.theme-blue .drawer-legal-badge { color: var(--mn-muted) !important; border-color: var(--mn-line) !important; background: transparent !important; }
.mobile-drawer.active ~ .floating-sms { opacity: 0; pointer-events: none; }

/* Scroll progress / pager / featured progress: neutral white */
.scroll-progress { background: rgba(255, 255, 255, 0.7) !important; height: 1px; }

@media (max-width: 767px) {
  body.theme-blue .floating-whatsapp.floating-sms { right: 16px !important; bottom: 16px !important; height: 44px !important; }
  body.theme-blue .floating-email { right: 16px !important; bottom: 68px !important; height: 44px !important; }
  body.theme-blue .brand-logo img,
  body.theme-blue .site-header.scrolled .brand-logo img { height: 48px; }
}

/* ==========================================================================
   PALETTE VARIANT: "Medianoche sobria" (midnight navy, same minimal rules)
   Active when <body> has the class "palette-midnight". Remove the class to
   return to the neutral charcoal palette.
   ========================================================================== */
body.theme-blue.palette-midnight {
  --mn-bg: #0b1120;
  --mn-bg-rgb: 11, 17, 32;
  --mn-surface: #111a2c;
  --mn-surface-2: #172238;
  --mn-footer: #080d19;
  --mn-line: rgba(148, 163, 184, 0.12);
  --mn-line-strong: rgba(148, 163, 184, 0.24);
  --mn-text: #f3f4f6;
  --mn-muted: #94a3b8;
}