/* ==========================================================================
   MÖDEN DESIGN SYSTEM - High-Performance Software & Product Studio
   Palette: Blanco (#FFFFFF), Rojo Carmesí (#EF4444 / #DC2626), Negro Deep (#101010)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Khand:wght@500;600;700&family=Urbanist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- THEME VARIABLES --- */
:root {
  /* MODEN Studio Official Core Tokens */
  --color-primary: #FFFFFF;
  --color-secondary: #94A3B8;
  --color-accent: #EF4444;
  --color-surface: #101010;
  --touch-target-min: 48px;

  /* Dark Theme (Default) */
  --bg-base: #101010;
  --bg-surface: #101010;
  --bg-sidebar: #101010;
  --bg-card: rgba(18, 19, 26, 0.75);
  --bg-card-hover: rgba(28, 29, 38, 0.95);
  --bg-input: rgba(255, 255, 255, 0.04);
  --bg-glass: rgba(14, 15, 20, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(255, 255, 255, 0.22);
  --border-glow: transparent;

  --text-main: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  /* MÖDEN Red Accents */
  --accent-red: #EF4444;
  --accent-red-hover: #DC2626;
  --accent-red-dark: #991B1B;
  --accent-red-glow: transparent;
  --accent-red-subtle: rgba(239, 68, 68, 0.12);

  --accent-green: #10B981;
  --accent-amber: #F59E0B;

  --code-bg: #0B0C10;
  --code-header: rgba(255, 255, 255, 0.03);
  --feature-card-bg: rgba(0, 0, 0, 0.35);

  --font-display: 'Khand', -apple-system, sans-serif;
  --font-heading: 'Urbanist', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-glow: none;
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Variables */
[data-theme="light"] {
  /* MODEN Studio Official Core Tokens */
  --color-primary: #0F172A;
  --color-secondary: #475569;
  --color-accent: #DC2626;
  --color-surface: #FFFFFF;
  --touch-target-min: 48px;

  --bg-base: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F1F5F9;
  --bg-input: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.95);

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-focus: rgba(0, 0, 0, 0.22);
  --border-glow: transparent;

  --text-main: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;

  --accent-red: #DC2626;
  --accent-red-hover: #B91C1C;
  --accent-red-dark: #7F1D1D;
  --accent-red-glow: transparent;
  --accent-red-subtle: rgba(220, 38, 38, 0.08);

  --code-bg: #0F172A;
  --code-header: #1E293B;
  --feature-card-bg: #F1F5F9;

  --shadow-card: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  --shadow-glow: none;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Custom Corporate Red Scrollbar & Smooth Kinetic Motion
   ========================================================================== */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-red) var(--bg-surface);
}

/* Chrome, Edge, Safari (WebKit & Blink) */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  background-color: var(--bg-base);
}

::-webkit-scrollbar-track {
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-red) 0%, #B91C1C 100%);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-surface);
  box-shadow: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #F87171 0%, var(--accent-red) 100%);
  box-shadow: none;
}

::-webkit-scrollbar-thumb:active {
  background: #DC2626;
  box-shadow: none;
}

::-webkit-scrollbar-corner {
  background: var(--bg-base);
}

/* Text Selection Accent */
::selection {
  background: rgba(239, 68, 68, 0.35);
  color: #FFFFFF;
}

::-moz-selection {
  background: rgba(239, 68, 68, 0.35);
  color: #FFFFFF;
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Ambient glow in dark mode */
body::before {
  content: '';
  position: fixed;
  top: -15vw;
  left: 20vw;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.06) 0%, rgba(185, 28, 28, 0.02) 45%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
}

[data-theme="light"] body::before {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.03) 0%, transparent 60%);
}

/* Logo Theme Display (Always White Logo) */
.brand-logo-img,
.logo-dark {
  display: block;
}
.logo-light {
  display: none !important;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography Utilities */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

.section-tag,
.page-lead-tag {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.section-title,
.page-header-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.section-desc,
.page-header-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 32px;
}

/* ==========================================================================
   APP SIDEBAR LAYOUT
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
}

.app-sidebar {
  width: 280px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 950;
  background: #101010 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 18px;
  gap: 18px;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sidebar Brand Header */
.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.brand-logo-img.full-logo {
  height: 52px;
  max-width: 195px;
  width: auto;
  object-fit: contain;
}

/* Brand Logo Display (White Logo in all modes, desktop & mobile) */
.brand-logo-img,
.sidebar-brand .brand-logo-img,
.mobile-brand .brand-logo-img {
  display: block !important;
}

.logo-light {
  display: none !important;
}

.brand-logo-icon.icon-logo {
  height: 38px;
  width: 38px;
  object-fit: contain;
  display: none;
}

/* Sidebar Collapse Toggle Button */
.sidebar-collapse-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  outline: none;
}

.sidebar-collapse-toggle:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.sidebar-collapse-toggle .icon-collapse {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sidebar Navigation (Modern Icon + Typography Stack) */
.sidebar-nav {
  flex-grow: 1;
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-menu-divider {
  margin: 14px 0 4px;
  padding: 0 12px;
  list-style: none;
}

.sidebar-menu-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6B7280;
  font-weight: 700;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  color: #9CA3AF;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  border: none;
}

.link-lead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-icon {
  flex-shrink: 0;
  color: #6B7280;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.sidebar-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link:hover .sidebar-icon {
  color: var(--accent-red);
  transform: scale(1.08);
}

.sidebar-link.active {
  font-weight: 700;
  background: rgba(239, 68, 68, 0.14) !important;
  color: #F87171 !important;
  border: none;
}

.sidebar-link.active .sidebar-icon {
  color: #EF4444 !important;
}

.sidebar-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: var(--accent-red);
  color: #FFFFFF;
}

.sidebar-subtag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-red-subtle);
  color: var(--accent-red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CTA in Sidebar */
.sidebar-cta {
  margin-top: auto;
  padding-top: 8px;
}

.btn-sidebar {
  width: 100%;
  padding: 11px 16px;
  font-size: 0.92rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-sidebar-icon {
  display: none;
  flex-shrink: 0;
}

/* Theme Switcher */
.sidebar-theme {
  padding-top: 4px;
}

.theme-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.theme-switch-label {
  font-size: 0.85rem;
  color: #9CA3AF;
  font-weight: 600;
}

.theme-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60px;
  height: 30px;
  background: #12141A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  cursor: pointer;
  padding: 0 4px;
  color: #9CA3AF;
  transition: var(--transition-fast);
  box-sizing: border-box;
}

.theme-icon-sun, .theme-icon-moon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color var(--transition-fast);
}

.theme-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--accent-red);
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none;
  z-index: 1;
  pointer-events: none;
}

[data-theme="dark"] .theme-slider {
  transform: translateX(30px);
}

[data-theme="light"] .theme-slider {
  transform: translateX(0);
}

[data-theme="dark"] .theme-icon-moon {
  color: #FFFFFF;
}

[data-theme="dark"] .theme-icon-sun {
  color: #6B7280;
}

[data-theme="light"] .theme-icon-sun {
  color: #FFFFFF;
}

[data-theme="light"] .theme-icon-moon {
  color: #6B7280;
}

/* Social Links */
.sidebar-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-subheading {
  font-size: 0.72rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.social-links-grid {
  display: flex;
  gap: 10px;
}

.social-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  text-decoration: none;
  transition: var(--transition-fast);
}

.social-btn:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.social-btn-wa:hover {
  color: #25D366;
  border-color: #25D366;
  background: rgba(37, 211, 102, 0.12);
}

.social-btn-fb:hover {
  color: #1877F2;
  border-color: #1877F2;
  background: rgba(24, 119, 242, 0.12);
}

.social-btn-ig:hover {
  color: #E1306C;
  border-color: #E1306C;
  background: rgba(225, 48, 108, 0.12);
}

/* Sidebar Legal Footer */
.sidebar-legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
}

.sidebar-legal-links {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.sidebar-legal-links a {
  color: #6B7280;
  text-decoration: none;
  transition: var(--transition-fast);
}

.sidebar-legal-links a:hover {
  color: #9CA3AF;
}

.sidebar-legal-links .sep {
  color: rgba(255, 255, 255, 0.15);
}

.sidebar-compliance {
  color: #4B5563;
  font-size: 0.72rem;
}

.sidebar-copyright {
  color: #4B5563;
  font-size: 0.7rem;
}

/* ==========================================================================
   Collapsed Sidebar State (.sidebar-collapsed)
   ========================================================================== */
.sidebar-collapsed .app-sidebar {
  width: 80px;
}

.sidebar-collapsed .sidebar-inner {
  padding: 20px 10px;
  align-items: center;
  gap: 16px;
}

.sidebar-collapsed .sidebar-header {
  padding-bottom: 12px;
  width: 100%;
}

.sidebar-collapsed .sidebar-header-main {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.sidebar-collapsed .brand-logo-img.full-logo {
  display: none !important;
}

.sidebar-collapsed .brand-logo-icon.icon-logo {
  display: block !important;
}

.sidebar-collapsed .sidebar-collapse-toggle .icon-collapse {
  transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-menu-divider,
.sidebar-collapsed .link-text,
.sidebar-collapsed .sidebar-pill,
.sidebar-collapsed .sidebar-subtag,
.sidebar-collapsed .btn-sidebar-text,
.sidebar-collapsed .theme-switch-label,
.sidebar-collapsed .sidebar-social,
.sidebar-collapsed .sidebar-legal {
  display: none !important;
}

.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 12px 0;
  width: 100%;
}

.sidebar-collapsed .link-lead {
  justify-content: center;
  gap: 0;
}

.sidebar-collapsed .sidebar-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.sidebar-collapsed .btn-sidebar {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  margin: 0 auto;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.sidebar-collapsed .btn-sidebar svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.sidebar-collapsed .btn-sidebar-icon {
  display: block;
}

.sidebar-collapsed .sidebar-theme {
  width: 100%;
}

.sidebar-collapsed .theme-switch-wrap {
  padding: 4px;
  background: transparent;
  border: none;
  justify-content: center;
}

/* Main Content Wrapper with Smooth Width Transition */
.app-main-wrapper {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  transition: margin-left 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-normal);
}

.sidebar-collapsed .app-main-wrapper {
  margin-left: 80px;
  width: calc(100% - 80px);
}

.main-content {
  flex-grow: 1;
  animation: pageSlideFadeIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

@keyframes pageSlideFadeIn {
  0% {
    opacity: 0;
    transform: translateX(14px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile Header (Hidden on Desktop) */
.mobile-header {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

/* ==========================================================================
   BUTTONS & CONTROLS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 1px solid transparent;
  box-sizing: border-box;
}

.btn-primary, .btn-accent {
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  border-color: var(--accent-red) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

.btn-primary:hover, .btn-accent:hover {
  background: var(--accent-red-hover) !important;
  color: #FFFFFF !important;
  border-color: var(--accent-red-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.btn-primary svg, .btn-accent svg, 
.btn-primary .sidebar-icon, .btn-accent .sidebar-icon,
.btn-primary *, .btn-accent * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none;
}
.btn-primary svg[fill="currentColor"], .btn-accent svg[fill="currentColor"] {
  fill: #FFFFFF !important;
}

.btn-outline {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-main);
  border-radius: 6px !important;
  box-shadow: none !important;
}

.btn-outline:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn-sm {
  padding: 7px 14px;
  font-size: 0.85rem;
  border-radius: 6px !important;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1.05rem;
  border-radius: 6px !important;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-glow {
  background: var(--accent-red-subtle);
  border: 1px solid var(--accent-red-glow);
  color: var(--accent-red);
}

.badge-green {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10B981;
}

.badge-muted {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* Section Header */
.section-tag {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 16px;
  color: var(--text-main);
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.7;
}

/* Cards */
.card-glass {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card-glass:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
  transform: translateY(-3px);
}

.service-feature-card {
  background: var(--feature-card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* Hero Section */
.hero-section {
  padding: 60px 0 80px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.08;
  margin: 16px 0 20px;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 580px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}

.stat-item h4 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
}

.stat-item p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Code Widget */
.code-widget {
  background: var(--code-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--code-header);
  border-bottom: 1px solid var(--border-subtle);
}

.code-dots {
  display: flex;
  gap: 6px;
}

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #EF4444; }
.dot-yellow { background: #F59E0B; }
.dot-green { background: #10B981; }

.code-body {
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: #E2E8F0;
  line-height: 1.8;
}

/* Filter Tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: var(--transition-fast);
  user-select: none;
}

.filter-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.filter-btn.active {
  background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
  color: #FFFFFF;
  border-color: var(--accent-red);
  box-shadow: 0 4px 18px var(--accent-red-glow);
}

.services-tabs-nav-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}

.services-tabs-nav-wrap::-webkit-scrollbar {
  display: none;
}

.tab-btn-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.75;
}

.filter-btn.active .tab-btn-num {
  opacity: 1;
  color: #FFFFFF;
}

.service-tab-pane {
  animation: tabSlideFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

.service-page-pane {
  border-radius: var(--radius-lg);
}

.service-step-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-step-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-red);
  box-shadow: 0 8px 24px var(--accent-red-glow);
}

.service-metric-item {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.service-metric-item:hover {
  border-color: var(--border-focus);
  transform: translateY(-2px);
}

@keyframes tabSlideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.project-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-focus);
}

.project-thumb-wrap {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: var(--bg-surface);
}

.project-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: none;
}

.project-card:hover .project-thumb-wrap img {
  transform: none !important;
}

.project-badge-float {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}

.project-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.project-category-tag {
  color: var(--accent-red);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-year-tag {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.project-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
  line-height: 1.25;
}

.project-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.project-title a:hover {
  color: var(--accent-red);
}

.project-summary-short {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.7em;
  flex-grow: 1;
}

.project-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.project-footer .btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}

/* Clean Full-Image Gallery (No Heavy Background Box, No Text Overlay) */
.gallery-clean-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  width: 100%;
}

.gallery-clean-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.gallery-clean-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent-red);
  box-shadow: 0 10px 28px var(--accent-red-glow);
}

.gallery-clean-link {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gallery-clean-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-clean-item:hover .gallery-clean-img {
  transform: scale(1.05);
}

.gallery-clean-zoom-hint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(2px);
}

.gallery-clean-zoom-hint svg {
  transform: scale(0.8);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-clean-item:hover .gallery-clean-zoom-hint {
  opacity: 1;
}

.gallery-clean-item:hover .gallery-clean-zoom-hint svg {
  transform: scale(1.1);
}

.gallery-item-hidden {
  display: none !important;
}

.gallery-clean-item.revealed {
  animation: galleryFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes galleryFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Portfolio Controls Bar (Category Filters + Sorting + Live Search)
   ========================================================================== */
.portfolio-controls-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
}

.portfolio-controls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.portfolio-controls-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.portfolio-search-wrap {
  position: relative;
  flex: 1;
  min-width: 260px;
  max-width: 440px;
}

.portfolio-search-input {
  width: 100%;
  padding: 10px 16px 10px 42px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-size: 0.88rem;
  font-family: var(--font-body);
  outline: none;
  transition: var(--transition-fast);
}

.portfolio-search-input:focus {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 3px var(--accent-red-subtle);
}

.portfolio-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.portfolio-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.portfolio-sort-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.portfolio-sort-select {
  padding: 9px 34px 9px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: var(--transition-fast);
}

.portfolio-sort-select:focus {
  border-color: var(--accent-red);
}

.portfolio-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.portfolio-counter-badge .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 8px var(--accent-red);
}

/* ==========================================================================
   Enterprise Client Legal Card & Verification Box
   ========================================================================== */
.client-legal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  margin-bottom: 56px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.client-legal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-red) 0%, #f59e0b 100%);
}

.client-legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.client-legal-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-legal-badge {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--accent-green);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.client-legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 28px;
}

.client-legal-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.client-legal-item .label {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.client-legal-item .value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
}

/* ==========================================================================
   Architectural Tech Stack Matrix (MOD-01)
   ========================================================================== */
.tech-stack-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}

.tech-stack-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.tech-stack-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-red);
  box-shadow: 0 8px 24px var(--accent-red-glow);
}

.tech-stack-layer {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-red);
  margin-bottom: 8px;
  display: block;
}

.tech-stack-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.tech-stack-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   Functional Modules Inventory (MOD-02)
   ========================================================================== */
.module-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

.module-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-fast);
}

.module-card:hover {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-card);
}

.module-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.module-card-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-red);
  background: var(--accent-red-subtle);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.module-card-badge {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.module-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 16px;
  line-height: 1.3;
}

.module-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.module-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.module-feature-list li svg {
  color: var(--accent-green);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ==========================================================================
   Sliced Sections Gallery (13 High-Fidelity WebP Sheets)
   ========================================================================== */
.gallery-slices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
  margin-bottom: 64px;
}

.slice-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.slice-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-red);
  box-shadow: 0 10px 30px var(--accent-red-glow);
}

.slice-thumb-wrap {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #090a0f;
}

.slice-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.slice-card:hover .slice-thumb-wrap img {
  transform: scale(1.04);
}

.slice-zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 12, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(3px);
}

.slice-card:hover .slice-zoom-overlay {
  opacity: 1;
}

.slice-zoom-btn {
  background: var(--accent-red);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px var(--accent-red-glow);
}

.slice-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.slice-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
  line-height: 1.3;
}

.slice-caption {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   Project Interactive 3-Image Visual Carousel (Cover Flow Stage)
   ========================================================================== */
.project-carousel-container {
  margin-bottom: 64px;
}

.project-carousel-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
}

.project-carousel-stage {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #101010;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.project-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.project-carousel-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54%;
  max-width: 580px;
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, filter 0.45s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.project-carousel-slide.is-prev {
  opacity: 0.65;
  transform: translate(calc(-50% - 94%), -50%) scale(0.85);
  filter: grayscale(20%) brightness(0.8);
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
}

.project-carousel-slide.is-next {
  opacity: 0.65;
  transform: translate(calc(-50% + 94%), -50%) scale(0.85);
  filter: grayscale(20%) brightness(0.8);
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
}

.project-carousel-slide.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.0);
  filter: none;
  pointer-events: auto;
  cursor: default;
  z-index: 10;
}

.project-carousel-slide.is-hidden-left {
  opacity: 0;
  transform: translate(calc(-50% - 190%), -50%) scale(0.7);
  pointer-events: none;
  z-index: 1;
}

.project-carousel-slide.is-hidden-right {
  opacity: 0;
  transform: translate(calc(-50% + 190%), -50%) scale(0.7);
  pointer-events: none;
  z-index: 1;
}

.carousel-slide-inner {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.project-carousel-slide.is-active .carousel-slide-inner {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.85), 0 0 25px rgba(239, 68, 68, 0.15);
}

.carousel-slide-inner img {
  width: 100%;
  height: 340px;
  object-fit: contain;
  background: #101010;
  display: block;
  border-radius: var(--radius-sm);
  transition: transform 0.3s ease;
}

.project-carousel-slide.is-active .carousel-slide-inner:hover img {
  transform: none !important;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.carousel-arrow:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  box-shadow: none;
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-arrow.prev {
  left: 18px;
}

.carousel-arrow.next {
  right: 18px;
}

@media (max-width: 768px) {
  .project-carousel-stage {
    height: 290px;
  }
  .project-carousel-slide {
    width: 82%;
    max-width: 82%;
  }
  .project-carousel-slide.is-prev {
    transform: translate(calc(-50% - 90%), -50%) scale(0.82);
  }
  .project-carousel-slide.is-next {
    transform: translate(calc(-50% + 90%), -50%) scale(0.82);
  }
  .carousel-slide-inner img {
    height: 230px;
  }
  .carousel-arrow {
    width: 40px;
    height: 40px;
  }
  .carousel-arrow.prev { left: 8px; }
  .carousel-arrow.next { right: 8px; }
}

/* ==========================================================================
   Project Grand Showcase (High-Impact Hero Display)
   ========================================================================== */
.project-grand-showcase {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
  margin-bottom: 48px;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-grand-showcase:hover {
  border-color: var(--border-focus);
}

.project-grand-showcase-stage {
  position: relative;
  width: 100%;
  background: #101010;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.project-grand-showcase-stage img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.project-grand-showcase:hover .project-grand-showcase-stage img {
  transform: scale(1.015);
}

.project-grand-showcase-bar {
  padding: 18px 28px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.project-highlights-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  margin-bottom: 56px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .project-highlights-grid {
    grid-template-columns: 1fr;
  }
  .project-grand-showcase-stage {
    padding: 12px;
  }
}

/* Services */
.service-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-red);
  opacity: 0.4;
  margin-bottom: 14px;
}

.service-list {
  list-style: none;
  margin-bottom: 24px;
}

.service-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.service-list li svg {
  color: var(--accent-red);
  flex-shrink: 0;
}

/* Process Timeline */
.step-num {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-red-subtle);
  border: 1px solid var(--accent-red-glow);
  color: var(--accent-red);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* Wizard / Scoping Form (/leads) */
.wizard-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-card);
  max-width: 860px;
  margin: 0 auto;
}

.wizard-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
  position: relative;
}

.wizard-progress::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-subtle);
  z-index: 1;
  transform: translateY(-50%);
}

.progress-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
  position: relative;
  z-index: 2;
  transition: var(--transition-fast);
}

.progress-step.active {
  border-color: var(--accent-red);
  background: var(--accent-red);
  color: #FFFFFF;
  box-shadow: none;
}

.progress-step.completed {
  border-color: var(--text-main);
  background: var(--text-main);
  color: var(--bg-base);
}

.option-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.option-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  display: flex;
  flex-direction: column;
}

.option-card:hover {
  border-color: var(--border-focus);
  background: var(--bg-card-hover);
}

.option-card.selected {
  border-color: var(--accent-red);
  background: var(--accent-red-subtle);
  box-shadow: none;
}

.option-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-red);
  margin-bottom: 8px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-red);
  box-shadow: none;
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* Lightbox Modal */
.lightbox-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 8, 12, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
}

.lightbox-img-wrap img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 2rem;
  cursor: pointer;
}

/* Footer */
.footer-wrap {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 70px 0 32px;
  margin-top: 100px;
}



@media (max-width: 1100px) {
  
}

.footer-col h5 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text-main);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--text-main);
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
  z-index: 900;
  text-decoration: none;
  transition: var(--transition-normal);
}

.whatsapp-float:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: calc(280px + 24px);
  right: 24px;
  max-width: 900px;
  background: var(--bg-surface);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  z-index: 990;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  animation: cookieFadeIn 0.35s ease;
}

@keyframes cookieFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-text-col {
  flex: 1;
  min-width: 280px;
}

.cookie-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.cookie-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-link {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  transition: var(--transition-fast);
}

.cookie-link:hover {
  color: var(--text-main);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES (MOBILE / TABLET < 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .app-sidebar {
    left: -320px;
    width: 290px;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  }

  .app-sidebar.open {
    transform: translateX(320px);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 940;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
  }

  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #101010 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 900;
    backdrop-filter: blur(16px);
  }

  .mobile-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .mobile-brand {
    display: inline-flex;
    align-items: center;
  }

  .mobile-brand .brand-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
  }

  .mobile-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-theme-btn, .mobile-menu-toggle {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
  }

  .mobile-theme-btn:active, .mobile-menu-toggle:active {
    transform: scale(0.92);
  }

  .app-main-wrapper {
    margin-left: 0;
    width: 100%;
    padding-top: 64px;
  }

  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-title { font-size: 2.8rem; }
  

@media (max-width: 1100px) {
  
}
  .service-detail-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}

@media (max-width: 768px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.3rem; }
  .section-title { font-size: 1.9rem; }
  .hero-stats { grid-template-columns: 1fr; gap: 14px; }
  

@media (max-width: 1100px) {
  
}
  .wizard-card { padding: 24px; }
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
  .service-tab-pane { padding: 28px 20px !important; }
  .service-steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .service-metrics-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}

@media (max-width: 480px) {
  .service-steps-grid { grid-template-columns: 1fr !important; }
  .services-filter-tabs { flex-wrap: nowrap; }
}

/* ==========================================================================
   SPACIOUS & EXPANSIVE HOME HERO DASHBOARD (PERFECTLY CENTERED MEDIO A MEDIO)
   ========================================================================== */
.home-hero-section {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  width: 100%;
}

.home-hero-section > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  width: 100%;
}

/* Left Lead Section */
.home-lead-tag {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-hero-title {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 20px;
}

.home-hero-desc {
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 580px;
}

.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.home-btn-main {
  box-shadow: 0 6px 25px var(--accent-red-glow);
}

/* Metrics Visual Box */
.home-metrics-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  margin-bottom: 0;
  box-shadow: var(--shadow-card);
}

.home-metric-col {
  flex: 1;
  text-align: center;
}

.home-metric-val {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-main);
  margin-bottom: 4px;
}

.home-metric-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.home-metric-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.home-metric-sep {
  width: 1px;
  height: 48px;
  background: var(--border-subtle);
}

.home-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* Right Showcase Card - Clean, Spacious & Integrated */
.showcase-card-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
}

.showcase-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.showcase-tabs-nav {
  display: flex;
  padding: 6px 8px;
  gap: 4px;
}

.showcase-tab-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.showcase-tab-btn:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.showcase-tab-btn.active {
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.tab-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-pink { background: #EC4899; }
.dot-indigo { background: #6366F1; }
.dot-amber { background: #F59E0B; }

.showcase-timer-bar {
  height: 2px;
  width: 100%;
  background: var(--border-subtle);
}

.showcase-timer-progress {
  height: 100%;
  width: 0%;
  background: var(--accent-red);
}

.showcase-slides-viewport {
  padding: 26px;
}

.showcase-slide {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.showcase-slide-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  aspect-ratio: 16 / 9;
  max-height: 260px;
}

.showcase-media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.showcase-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: none;
  display: block;
}

.showcase-media-link:hover .showcase-media-img {
  transform: none !important;
}

.showcase-media-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
}

.showcase-pill-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pill-pink {
  background: rgba(236, 72, 153, 0.15);
  color: #F472B6;
  border: 1px solid rgba(236, 72, 153, 0.35);
}

.pill-purple {
  background: rgba(99, 102, 241, 0.15);
  color: #A5B4FC;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.pill-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.showcase-slide-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase-slide-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showcase-tag-accent {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag-pink { color: #F472B6; }
.tag-purple { color: #A5B4FC; }
.tag-amber { color: #FBBF24; }

.showcase-year {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.showcase-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
}

.showcase-desc {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.showcase-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.showcase-cta-btn {
  font-size: 0.85rem;
  padding: 8px 16px;
}

.showcase-footer-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0 14px;
}

.showcase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.showcase-dot.active {
  width: 22px;
  border-radius: 4px;
  background: var(--accent-red);
  box-shadow: none;
}

/* Bottom Micro-Bar */
.home-bottom-bar {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: 10px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.home-bottom-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.home-bottom-left, .home-bottom-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.home-bottom-right a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.home-bottom-right a:hover {
  color: var(--text-main);
}

.badge-framework {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.dot-sep {
  color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 1024px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .home-hero-title {
    font-size: 2.3rem;
  }
  .home-bottom-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   100VH SPACIOUS DASHBOARD SCOPING WIZARD LAYOUT (/leads)
   Takes ~80-85% of screen with 25-40px margins.
   Spacious service cards, eye-catching live pricing widget, arcade trigger,
   button countdown explosion & corporate confirmation modal.
   ========================================================================== */
.wizard-viewport-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  width: 100%;
}

@media (min-width: 1025px) {
  .wizard-viewport-wrapper {
    min-height: 100vh;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
  }

  .wizard-main-stage {
    padding: 24px 28px 20px !important;
  }
}

/* Main Full-Dashboard Wizard Stage (Occupies ~90% of screen, 100vh corporate fit) */
.wizard-main-stage {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 32px);
  height: auto;
  padding: 0;
  box-sizing: border-box;
}

.wizard-card-wide {
  width: calc(100% - 32px);
  max-width: 1200px;
  min-height: min(690px, calc(100vh - 44px));
  height: auto;
  margin: 0 auto;
  padding: 16px 24px 20px;
  border-radius: 18px;
  background: rgba(12, 14, 20, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-focus);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 50px -10px rgba(239, 68, 68, 0.16);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ==========================================================================
   Unified Top Dashboard Header Bar (Formal Executive Dashboard Style)
   ========================================================================== */
.wizard-top-dashboard-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* Row 1: Title (Left) & Valor a Pagar Box (Right) */
.wtd-row-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}

.wtd-title-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.wtd-main-title {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.15;
}

/* Prominent White "Valor a Pagar" Box (Not Squashed, Clean White Background, Flat Minimalist) */
.wtd-price-zone {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.wtd-price-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  min-height: 54px;
  border-radius: 12px;
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0;
  box-shadow: none !important;
  box-sizing: border-box;
}

.wtd-price-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.20rem;
  color: #059669;
  flex-shrink: 0;
}

.wtd-price-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wtd-price-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  margin-bottom: 3px;
}

.wtd-price-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748B;
  text-transform: uppercase;
}

.wtd-price-amount-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}

.wtd-price-box .wbpc-real-price {
  font-size: 0.82rem;
  color: #94A3B8;
  text-decoration: line-through;
  font-family: var(--font-display, monospace);
}

.wtd-price-box .wbpc-discount-badge {
  font-size: 0.70rem;
  font-weight: 800;
  color: #D97706;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 2px 6px;
  border-radius: 4px;
}

.wtd-price-box .wbpc-final-amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: #059669;
  font-family: 'Space Grotesk', var(--font-sans);
  letter-spacing: -0.02em;
}

/* Row 2: Clean Step Indicator & Nav Actions (Zero Red Bar) */
.wtd-row-actions,
.wtd-row-progress-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 100%;
}

.wtd-step-indicator-zone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wtd-step-indicator-text {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94A3B8;
}

[data-theme="light"] .wtd-step-indicator-text {
  color: #475569;
}

@media (max-width: 768px) {
  .wizard-card-wide {
    width: 100% !important;
    padding: 14px 16px 18px !important;
    border-radius: 14px !important;
  }

  .wizard-top-dashboard-bar {
    gap: 12px !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }

  .wtd-row-main {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    min-height: auto !important;
  }

  .wtd-title-zone {
    width: 100% !important;
    text-align: left !important;
  }

  .wtd-main-title {
    font-size: 1.6rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
  }

  .wtd-main-subtitle {
    font-size: 0.88rem !important;
    color: var(--text-secondary) !important;
    margin: 4px 0 0 0 !important;
    text-align: left !important;
  }

  .wtd-price-zone {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .wtd-price-box {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    min-height: 52px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  .wtd-row-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .wtd-step-indicator-zone {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .wtd-step-indicator-text {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  .wtd-actions-cluster {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
  }

  .wtd-actions-cluster .btn {
    flex: 1 !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 10px 14px !important;
  }
}

/* Diagonal Moving Slashes Progress Fill */
.wtd-progress-fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  overflow: visible;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.32) 0px,
    rgba(0, 0, 0, 0.32) 7px,
    transparent 7px,
    transparent 14px
  );
  background-size: 19.8px 19.8px;
  animation: moveSlashStripes 1.2s linear infinite;
}

@keyframes moveSlashStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 19.8px 0;
  }
}

.wtd-progress-fill.progress-step-1 {
  background-color: #EF4444;
}

.wtd-progress-fill.progress-step-2 {
  background-color: #F97316;
}

.wtd-progress-fill.progress-step-3 {
  background-color: #F59E0B;
}

.wtd-progress-fill.progress-step-4 {
  background-color: #10B981;
}

/* Speech Bubble Tooltip at the tip of the progress bar */
.wtd-tooltip-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  transform: translateX(50%);
  background-color: #EF4444;
  border-color: #EF4444;
  color: #FFFFFF;
  font-size: 0.70rem;
  font-weight: 800;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 5px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.wtd-tooltip-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 4.5px 0 4.5px;
  border-style: solid;
  border-color: inherit;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transition: inherit;
}

/* Actions Cluster on the right of Row 2 */
.wtd-actions-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.wtd-actions-cluster .btn {
  padding: 7px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Form Container & Step Panes */
#scopingWizardForm {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wizard-step-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  width: 100%;
}

.step-pane-header {
  margin-bottom: 12px;
  text-align: center;
  flex-shrink: 0;
  width: 100%;
}

.step-pane-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 2px 0;
}

.step-pane-subtitle {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   STEP 1: Symmetrical 3x2 Service Cards Grid (3 arriba, 3 abajo)
   ========================================================================== */
.service-cards-spacious-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 6px 0 10px;
}

.service-spacious-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(14, 18, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: none !important;
}

.service-spacious-card:hover {
  background: rgba(20, 26, 38, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: none !important;
}

.service-spacious-card.selected {
  background: rgba(22, 28, 42, 0.98);
  border-color: var(--accent-red, #EF4444);
  box-shadow: none !important;
}

.ssc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.ssc-tag {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
}

.ssc-price-pill {
  font-size: 0.84rem;
  font-weight: 800;
  color: #F8FAFC;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--font-display, monospace);
}

.ssc-title {
  font-size: 1.10rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 4px 0;
}

.ssc-desc {
  font-size: 0.85rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0 0 8px 0;
  flex-grow: 1;
}

.ssc-highlights {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  color: #CBD5E1;
  font-weight: 600;
  flex-shrink: 0;
}

/* Base Scope Checklist within Service Cards */
.ssc-body-scope {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 4px;
}

.ssc-scope-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-red, #EF4444);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ssc-feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-grow: 1;
}

.ssc-feature-checklist li {
  font-size: 0.78rem;
  color: var(--text-secondary, #CBD5E1);
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ssc-feature-checklist li .ssc-bullet {
  color: #10B981;
  font-weight: 800;
  font-size: 0.80rem;
  flex-shrink: 0;
  line-height: 1.25;
}

.ssc-scope-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 0.71rem;
  color: var(--text-muted, #94A3B8);
  font-style: italic;
}

/* Card 8: Arcade Booster Card (Formal Dashboard Style) */
.service-arcade-booster-card {
  border: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(18, 22, 32, 0.88);
}

.service-arcade-booster-card:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(24, 30, 44, 0.98);
  transform: translateY(-2px);
  box-shadow: none !important;
}

.ssc-arcade-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #FBBF24;
  font-size: 0.80rem;
  font-weight: 700;
  margin-top: 6px;
  transition: all 0.2s ease;
}

.service-arcade-booster-card:hover .ssc-arcade-action-btn {
  background: #F59E0B;
  color: #000000;
}

/* ==========================================================================
   Corporate Bottom-Right Price Box & Action Row
   ========================================================================== */
.wizard-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  gap: 16px;
  min-height: 56px;
}

.wizard-action-right-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.wizard-bottom-price-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 18px;
  border-radius: 12px;
  background: rgba(8, 10, 15, 0.94);
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 18px rgba(239, 68, 68, 0.12);
  backdrop-filter: blur(10px);
}

.wbpc-label-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wbpc-indicator-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

@keyframes liveDotPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 1; }
}

.wbpc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 8px #EF4444;
  animation: liveDotPulse 1.4s infinite alternate;
}

.wbpc-badge-text {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-transform: uppercase;
}

.wbpc-real-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wbpc-real-price {
  font-size: 0.80rem;
  color: #64748B;
  text-decoration: line-through;
  font-family: var(--font-display, monospace);
}

.wbpc-discount-badge {
  font-size: 0.70rem;
  font-weight: 800;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 1px 5px;
  border-radius: 4px;
}

.wbpc-final-amount {
  font-size: 1.32rem;
  font-weight: 900;
  color: #10B981;
  font-family: 'Space Grotesk', var(--font-sans);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   STEP 2: Options Chips Grid (Spacious 2-column layout filling height)
   ========================================================================== */
.options-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  margin: 8px 0 12px;
}

.feature-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.feature-chip:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

.feature-chip.selected {
  background: rgba(239, 68, 68, 0.09);
  border-color: var(--accent-red);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.feature-chip input {
  display: none;
}

.chip-check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: transparent;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.feature-chip.selected .chip-check {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}

.chip-content {
  flex-grow: 1;
  min-width: 0;
}

.chip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
}

.chip-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.chip-price {
  font-family: var(--font-display, monospace);
  font-size: 0.90rem;
  font-weight: 800;
  color: var(--accent-red);
  white-space: nowrap;
}

/* ==========================================================================
   STEP 3: Domain & Infrastructure
   ========================================================================== */
.wizard-domain-section,
.wizard-infra-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 10px;
}

.step3-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.step3-num-pill {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-red);
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step3-heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.step3-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.domain-checker-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.domain-input-group {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.domain-input-group input {
  padding-right: 48px;
  height: 40px;
}

.domain-tld-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: var(--accent-red);
  font-size: 0.85rem;
}

.domain-tld-pills {
  display: flex;
  gap: 4px;
}

.tld-pill-btn {
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tld-pill-btn.active {
  background: var(--accent-red);
  color: #FFFFFF;
  border-color: var(--accent-red);
}

.btn-check-domain {
  height: 40px;
  padding: 0 16px;
  font-weight: 700;
}

.domain-no-need-pill {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.domain-result-container {
  margin-top: 8px;
}

.domain-alert-box {
  padding: 8px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.domain-alert-box.available {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10B981;
}

.domain-alert-box.taken {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #EF4444;
}

.hosting-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.hosting-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 110px;
}

.hosting-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(239, 68, 68, 0.35);
}

.hosting-card.selected {
  background: rgba(239, 68, 68, 0.09);
  border-color: var(--accent-red);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}

.h-card-tag {
  position: absolute;
  top: -8px;
  right: 12px;
  background: #10B981;
  color: #000000;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.h-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.h-name {
  font-size: 0.90rem;
  font-weight: 700;
  color: var(--text-main);
}

.h-price {
  font-family: var(--font-display, monospace);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--accent-red);
}

.h-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

.email-addon-container {
  margin-top: 6px;
}

.email-chip {
  padding: 12px 16px !important;
}

/* ==========================================================================
   STEP 4: Horizontal 2-Column Split (Fills height cleanly)
   ========================================================================== */
.step4-horizontal-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
  min-height: 0;
  margin: 6px 0 10px;
}

.step4-col-summary,
.step4-col-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.quote-summary-panel {
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.qsp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

.qsp-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qsp-badge {
  font-size: 0.70rem;
  font-weight: 800;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
}

.qsp-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  justify-content: center;
}

.qsp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.qsp-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.qsp-real-value-row .qsp-real-price-val {
  text-decoration: line-through;
  color: var(--text-muted);
}

.qsp-discount-row {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
}

.discount-tag-badge {
  color: #FBBF24;
  font-weight: 800;
  font-size: 0.74rem;
}

.discount-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.qsp-savings-val {
  color: #10B981;
  font-weight: 800;
}

.qsp-final-highlight-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 95, 70, 0.25));
  border: 1.5px solid #10B981;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.final-box-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
}

.final-box-note {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.7);
}

.final-box-price {
  font-family: var(--font-display, monospace);
  font-size: 1.45rem;
  font-weight: 800;
  color: #10B981;
}

.wizard-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.form-group.compact {
  margin-bottom: 0;
}

.form-group.compact .form-label {
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.form-group.compact .form-control {
  height: 38px;
  padding: 0 10px;
  font-size: 0.84rem;
}

.textarea-compact {
  height: 52px !important;
  resize: none;
  font-size: 0.80rem;
}

.wizard-wa-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Dramatic Submission Button */
.submit-lead-btn {
  font-weight: 800;
  font-size: 0.96rem;
  padding: 10px 22px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-countdown {
  background: #F59E0B !important;
  color: #000000 !important;
  border-color: #D97706 !important;
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6) !important;
}

.btn-blast {
  background: #EF4444 !important;
  color: #FFFFFF !important;
  transform: scale(1.06);
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.8) !important;
}

/* ==========================================================================
   Corporate Pop-Up Modal (Obsidian Glass, Graphite, Red/Emerald Accents)
   ========================================================================== */
.quote-corporate-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.qcm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.qcm-dialog {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: #0B0E14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 50px rgba(239, 68, 68, 0.12);
  animation: qcmAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 10;
}

@keyframes qcmAppear {
  0% { transform: scale(0.92) translateY(14px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.qcm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.qcm-badge-seal {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 4px 12px;
  border-radius: 9999px;
}

.qcm-icon {
  color: #10B981;
  font-weight: 800;
  font-size: 0.85rem;
}

.qcm-status-text {
  color: #10B981;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qcm-close-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.18s;
}

.qcm-close-btn:hover {
  color: #FFFFFF;
}

.qcm-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 6px;
}

.qcm-subtitle {
  font-size: 0.86rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0 0 16px;
}

.qcm-summary-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.qcm-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  margin-bottom: 6px;
}

.qcm-summary-row:last-child {
  margin-bottom: 0;
}

.qcm-label {
  color: #94A3B8;
}

.qcm-val {
  color: #FFFFFF;
}

.qcm-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 0;
}

.qcm-final-row .qcm-label-total {
  font-weight: 800;
  color: #FFFFFF;
  font-size: 0.92rem;
}

.qcm-final-val {
  font-family: var(--font-display, monospace);
  font-size: 1.35rem;
  font-weight: 800;
  color: #10B981;
}

.qcm-email-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.qcm-notice-icon {
  font-size: 1rem;
}

.qcm-notice-text {
  font-size: 0.78rem;
  color: #E2E8F0;
  line-height: 1.35;
}

.qcm-notice-text strong {
  color: #38BDF8;
}

/* Light Mode: qcm-notice contraste AAA */
[data-theme="light"] .qcm-email-notice {
  background: #F1F5F9;
  border-color: rgba(2, 132, 199, 0.25);
}
[data-theme="light"] .qcm-notice-icon {
  color: #0284C7 !important;
}
[data-theme="light"] .qcm-notice-text {
  color: #334155 !important;
}
[data-theme="light"] .qcm-notice-text strong {
  color: #0284C7 !important;
  font-weight: 700 !important;
}
[data-theme="light"] #modalClientEmailDisplay {
  color: #0284C7 !important;
  font-weight: 700 !important;
}

.qcm-actions-row {
  display: flex;
  gap: 12px;
}

.qcm-wa-btn {
  flex: 1;
  font-weight: 700;
  text-align: center;
  background: #25D366;
  color: #000000;
  border-color: #25D366;
}

.qcm-wa-btn:hover {
  background: #22BF5B;
  border-color: #22BF5B;
  color: #000000;
}


/* Responsive Mobile Rules */
@media (max-width: 1024px) {
  .wizard-viewport-wrapper {
    min-height: 100vh;
    height: auto;
    overflow: auto;
    padding: 16px 16px 40px;
  }
  .wizard-card-wide {
    height: auto;
    max-height: none;
  }
  .wizard-internal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .wizard-pricing-display-card {
    width: 100%;
    text-align: left;
  }
  .wpdc-body {
    align-items: flex-start;
  }
  .service-cards-spacious-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .options-chip-grid {
    grid-template-columns: 1fr;
  }
  .step4-horizontal-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hosting-options-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .service-cards-spacious-grid {
    grid-template-columns: 1fr;
  }
  .step4-col-form .wizard-form-grid {
    grid-template-columns: 1fr;
  }
  .qcm-actions-row {
    flex-direction: column;
  }
}
/* ==========================================================================
   100VH SERVICES DASHBOARD LAYOUT (/servicios)
   ========================================================================== */
.services-viewport-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh);
  width: 100%;
}

@media (min-width: 1025px) {
  .services-viewport-wrapper {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
}

.services-hero-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 24px 0 16px;
}

.services-hero-content {
  width: 100%;
}

.services-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: center;
  width: 100%;
}

/* Left Panel */
.services-left-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.services-hero-title {
  font-family: var(--font-heading);
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 4px;
}

.services-hero-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 460px;
  margin-bottom: 6px;
}

/* Specialty Vertical Nav */
.services-vertical-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px;
}

.service-nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--transition-fast);
}

.service-nav-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-focus);
}

.service-nav-card.active {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: none;
}

.service-nav-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.service-nav-card.active .service-nav-num {
  color: var(--accent-red);
}

.service-nav-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.service-nav-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.service-nav-card.active .service-nav-title {
  color: #F87171;
}

.service-nav-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.service-nav-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  opacity: 0.4;
  transition: all var(--transition-fast);
}

.service-nav-card.active .service-nav-arrow {
  color: var(--accent-red);
  opacity: 1;
  transform: translateX(3px);
}

.services-tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

/* Right Panel Spec Sheet Card */
.service-spec-card {
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), 0 0 45px -15px rgba(239, 68, 68, 0.15);
  border: 1px solid var(--border-focus);
  display: flex;
  flex-direction: column;
}

.service-spec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.service-spec-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spec-num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent-red);
}

.service-spec-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spec-metric-chip {
  font-size: 0.74rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 3px 8px;
  border-radius: 4px;
}

.spec-metric-lbl {
  color: var(--text-muted);
  font-weight: 600;
}

.spec-metric-val {
  color: var(--text-main);
  font-weight: 700;
}

.service-spec-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.15;
  margin-bottom: 2px;
}

.service-spec-subtitle {
  color: var(--accent-red);
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.service-spec-desc {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 12px;
}

.service-spec-details-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
  margin-bottom: 14px;
}

.service-deliverables-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}

.box-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spec-deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spec-deliverables-list li {
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 5px;
  line-height: 1.35;
}

.spec-deliverables-list li:last-child {
  margin-bottom: 0;
}

.spec-deliverables-list li svg {
  color: var(--accent-red);
  flex-shrink: 0;
  margin-top: 2px;
}

.service-process-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ideal-for-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.ideal-for-lbl {
  color: var(--accent-red);
  font-weight: 700;
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.ideal-for-text {
  color: var(--text-secondary);
}

.mini-steps-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.mini-step-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 5px;
}

.mini-step-chip .step-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-red);
}

.mini-step-chip .step-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-spec-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.service-methodology-link {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-left: auto;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.service-methodology-link:hover {
  color: var(--accent-red);
}

/* ==========================================================================
   GLOBAL RESPONSIVE MEDIA QUERIES (TABLETS, SMARTPHONES & SMALL VIEWPORTS)
   ========================================================================== */
@media (max-width: 1024px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  .mobile-header {
    display: flex;
  }

  .app-main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: 64px;
  }

  .home-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .portfolio-detail-hero {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .project-highlights-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .services-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .service-spec-details-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .home-hero-section {
    min-height: auto;
    padding: 36px 0 54px;
  }

  .home-hero-showcase {
    padding: 6px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .showcase-card-wrapper,
  .showcase-dark-box {
    background: #101010 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  }

  .showcase-slides-viewport {
    padding: 24px 20px 20px !important;
  }

  .showcase-slide {
    gap: 18px !important;
  }

  .showcase-slide-content {
    gap: 10px !important;
    padding: 4px 2px 0 !important;
  }

  .home-hero-title {
    font-size: 2.3rem !important;
  }

  .section-title {
    font-size: 2rem !important;
  }

  .home-metrics-box {
    padding: 16px 14px !important;
  }

  .home-metric-val {
    font-size: 2rem !important;
  }

  .home-metric-lbl {
    font-size: 0.74rem !important;
  }

  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .gallery-clean-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .portfolio-controls-bar {
    padding: 16px !important;
  }

  .portfolio-controls-top, 
  .portfolio-controls-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .portfolio-search-wrap {
    max-width: 100% !important;
    min-width: auto !important;
  }

  

@media (max-width: 1100px) {
  
}

  .wizard-card {
    padding: 22px 18px !important;
  }

  .cookie-banner-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .home-hero-title {
    font-size: 1.9rem !important;
  }

  .section-title {
    font-size: 1.65rem !important;
  }

  .home-metrics-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 6px !important;
    gap: 2px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  .home-metric-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 0 2px !important;
  }

  .home-metric-val {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }

  .home-metric-lbl {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 1px !important;
  }

  .home-metric-sub {
    font-size: 0.6rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .home-metric-sep {
    width: 1px !important;
    height: 28px !important;
    background: var(--border-subtle) !important;
    flex-shrink: 0 !important;
  }

  .showcase-tabs-nav {
  display: flex;
  padding: 6px 8px;
  gap: 4px;
}

  .showcase-tab-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

  .service-steps-grid {
    grid-template-columns: 1fr !important;
  }

  .services-filter-tabs {
    flex-wrap: nowrap !important;
  }

  .service-methodology-link {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
}





/* ===================================================
   MÖDEN FLAT & CRISP ACCENT RULES (White Text & Icons, No Neon)
   =================================================== */
.btn-accent, .btn-primary, .filter-btn.active, 
.sidebar-link.active, .badge-accent, .tab-btn.active {
  color: #FFFFFF !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.btn-accent svg, .btn-primary svg, .filter-btn.active svg,
.sidebar-link.active svg, .badge-accent svg, .tab-btn.active svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Remove any remaining pulse/glow animations */
.btn, .sidebar-link, .filter-btn, .badge, .project-card {
  box-shadow: none !important;
}
.btn-primary:hover, .btn-accent:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.project-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   APP SIDEBAR (Fixed Desktop Sidebar with Smooth Collapsed Mode)
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.app-sidebar {
  width: 280px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  z-index: 950;
  background: #101010 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
  box-sizing: border-box;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 16px;
  gap: 14px;
  box-sizing: border-box;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.brand-subtitle {
  font-size: 0.72rem;
  color: #6B7280;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.sidebar-collapse-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  outline: none;
}

.sidebar-collapse-toggle:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-collapse-toggle .icon-collapse {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-nav {
  flex-grow: 1;
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  margin: 0;
}

.sidebar-menu-divider {
  margin: 12px 0 4px;
  padding: 0 10px;
  list-style: none;
}

.sidebar-menu-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  font-weight: 700;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  color: #9CA3AF;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.link-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-icon {
  flex-shrink: 0;
  color: #6B7280;
  transition: color var(--transition-fast);
}

.sidebar-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link:hover .sidebar-icon {
  color: #FFFFFF;
}

.sidebar-link.active {
  font-weight: 700;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.sidebar-link.active .sidebar-icon,
.sidebar-link.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.sidebar-link.active .link-text {
  color: #FFFFFF !important;
}

.sidebar-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.sidebar-cta {
  margin-top: auto;
  padding-top: 8px;
}

.btn-sidebar {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px !important;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent-red) !important;
  box-shadow: none !important;
}

.btn-sidebar-icon {
  display: none;
  flex-shrink: 0;
}

.sidebar-theme {
  padding-top: 2px;
}

.theme-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-switch-label {
  font-size: 0.8rem;
  color: #9CA3AF;
  font-weight: 500;
}

.theme-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 52px;
  height: 26px;
  background: #12141A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  cursor: pointer;
  padding: 0 4px;
  color: #9CA3AF;
  transition: var(--transition-fast);
  box-sizing: border-box;
}

.theme-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--accent-red);
  border-radius: 4px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

[data-theme="light"] .theme-slider {
  transform: translateX(26px);
}

.sidebar-social {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-subheading {
  font-size: 0.68rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.social-links-grid {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9CA3AF;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.social-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.sidebar-legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
}

.sidebar-legal-links {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.sidebar-legal-links a {
  color: #6B7280;
  text-decoration: none;
}

.sidebar-legal-links a:hover {
  color: #9CA3AF;
}

.sidebar-compliance, .sidebar-copyright {
  color: #4B5563;
  font-size: 0.68rem;
}

.app-main-wrapper {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* ==========================================================================
   SIDEBAR COLLAPSED MODE (Triggered by .sidebar-collapsed on <html>)
   ========================================================================== */
.sidebar-collapsed .app-sidebar {
  width: 80px !important;
}

.sidebar-collapsed .app-main-wrapper {
  margin-left: 80px !important;
  width: calc(100% - 80px) !important;
}

.sidebar-collapsed .sidebar-inner {
  padding: 16px 8px !important;
  align-items: center;
  gap: 12px;
}

.sidebar-collapsed .sidebar-header {
  padding-bottom: 10px;
  width: 100%;
  align-items: center;
}

.sidebar-collapsed .sidebar-header-main {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sidebar-collapsed .brand-subtitle,
.sidebar-collapsed .full-logo,
.sidebar-collapsed .sidebar-menu-divider,
.sidebar-collapsed .link-text,
.sidebar-collapsed .sidebar-pill,
.sidebar-collapsed .sidebar-subtag,
.sidebar-collapsed .btn-sidebar-text,
.sidebar-collapsed .theme-switch-label,
.sidebar-collapsed .sidebar-social,
.sidebar-collapsed .sidebar-legal {
  display: none !important;
}

.sidebar-collapsed .icon-logo {
  display: block !important;
}

.sidebar-collapsed .sidebar-collapse-toggle .icon-collapse {
  transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-link {
  justify-content: center !important;
  padding: 10px 0 !important;
  width: 44px;
  height: 44px;
  border-radius: 6px !important;
  margin: 0 auto;
}

.sidebar-collapsed .link-lead {
  justify-content: center !important;
  gap: 0 !important;
}

.sidebar-collapsed .sidebar-link.active {
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
}

.sidebar-collapsed .sidebar-link.active .sidebar-icon,
.sidebar-collapsed .sidebar-link.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.sidebar-collapsed .sidebar-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sidebar-collapsed .btn-sidebar {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-red) !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-collapsed .btn-sidebar-icon {
  display: block !important;
}

.sidebar-collapsed .sidebar-theme {
  width: 100%;
}

.sidebar-collapsed .theme-switch-wrap {
  padding: 4px;
  background: transparent;
  border: none;
  justify-content: center;
}

/* ==========================================================================
   APP SIDEBAR (Fixed Desktop Sidebar with Smooth Collapsed Mode & Tooltips)
   ========================================================================== */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.app-sidebar {
  width: 280px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  z-index: 950;
  background: #101010 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
  box-sizing: border-box;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 16px;
  gap: 14px;
  box-sizing: border-box;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.brand-logo-img.full-logo {
  height: 42px;
  max-width: 175px;
  width: auto;
  object-fit: contain;
  display: block;
}

.sidebar-collapse-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  outline: none;
}

.sidebar-collapse-toggle:hover {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-collapse-toggle .icon-collapse {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-nav {
  flex-grow: 1;
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  margin: 0;
}

.sidebar-menu-divider {
  margin: 12px 0 4px;
  padding: 0 10px;
  list-style: none;
}

.sidebar-menu-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  font-weight: 700;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  color: #9CA3AF;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.link-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-icon {
  flex-shrink: 0;
  color: #6B7280;
  transition: color var(--transition-fast);
}

.sidebar-link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link:hover .sidebar-icon {
  color: #FFFFFF;
}

.sidebar-link.active {
  font-weight: 700;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.sidebar-link.active .sidebar-icon,
.sidebar-link.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.sidebar-link.active .link-text {
  color: #FFFFFF !important;
}

.sidebar-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.sidebar-cta {
  margin-top: auto;
  padding-top: 8px;
}

.btn-sidebar {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px !important;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent-red) !important;
  box-shadow: none !important;
}

.btn-sidebar-icon {
  display: none;
  flex-shrink: 0;
}

.sidebar-theme {
  padding-top: 2px;
}

.theme-switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-switch-label {
  font-size: 0.8rem;
  color: #9CA3AF;
  font-weight: 600;
}

.theme-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 28px;
  background: #0B0C10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  transition: var(--transition-fast);
  box-sizing: border-box;
  overflow: hidden;
}

.theme-icon-sun, .theme-icon-moon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color var(--transition-fast);
  position: relative;
}

.theme-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 22px;
  background: var(--accent-red);
  border-radius: 4px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}

/* Precision Alignment for Theme Switcher */
[data-theme="dark"] .theme-slider,
html:not([data-theme="light"]) .theme-slider {
  transform: translateX(28px);
}
[data-theme="dark"] .theme-icon-moon,
html:not([data-theme="light"]) .theme-icon-moon {
  color: #FFFFFF !important;
}
[data-theme="dark"] .theme-icon-moon svg,
html:not([data-theme="light"]) .theme-icon-moon svg {
  stroke: #FFFFFF !important;
}
[data-theme="dark"] .theme-icon-sun,
html:not([data-theme="light"]) .theme-icon-sun {
  color: #6B7280;
}

[data-theme="light"] .theme-slider {
  transform: translateX(0);
}
[data-theme="light"] .theme-icon-sun {
  color: #FFFFFF !important;
}
[data-theme="light"] .theme-icon-sun svg {
  stroke: #FFFFFF !important;
}
[data-theme="light"] .theme-icon-moon {
  color: #6B7280;
}

.sidebar-social {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-subheading {
  font-size: 0.68rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.social-links-grid {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #9CA3AF;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.social-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.sidebar-legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
}

.sidebar-legal-links {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.sidebar-legal-links a {
  color: #6B7280;
  text-decoration: none;
}

.sidebar-legal-links a:hover {
  color: #9CA3AF;
}

.sidebar-compliance, .sidebar-copyright {
  color: #4B5563;
  font-size: 0.68rem;
}

.app-main-wrapper {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  transition: margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* ==========================================================================
   SIDEBAR COLLAPSED MODE (Triggered by .sidebar-collapsed on <html>)
   ========================================================================== */
.sidebar-collapsed .app-sidebar {
  width: 80px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.sidebar-collapsed .app-main-wrapper {
  margin-left: 80px !important;
  width: calc(100% - 80px) !important;
}

.sidebar-collapsed .sidebar-inner {
  padding: 16px 8px !important;
  align-items: center;
  gap: 12px;
  overflow: visible !important;
}

.sidebar-collapsed .sidebar-header {
  padding-bottom: 12px;
  width: 100%;
  align-items: center;
}

.sidebar-collapsed .sidebar-header-main {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sidebar-collapsed .brand-subtitle,
.sidebar-collapsed .full-logo,
.sidebar-collapsed .sidebar-menu-divider,
.sidebar-collapsed .link-text,
.sidebar-collapsed .sidebar-pill,
.sidebar-collapsed .sidebar-subtag,
.sidebar-collapsed .btn-sidebar-text,
.sidebar-collapsed .theme-switch-label,
.sidebar-collapsed .sidebar-social,
.sidebar-collapsed .sidebar-legal {
  display: none !important;
}

/* Clean MÖDEN Monogram in Collapsed Mode */
.sidebar-collapsed .brand-logo-icon.icon-logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.moden-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.04em;
  background: #101218;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  transition: all var(--transition-fast);
}

.moden-monogram:hover {
  border-color: var(--accent-red);
  background: #171922;
}

.monogram-dot {
  color: var(--accent-red);
  font-size: 1.25rem;
  margin-left: 1px;
}

.sidebar-collapsed .sidebar-collapse-toggle .icon-collapse {
  transform: rotate(180deg);
}

.sidebar-collapsed .sidebar-nav {
  overflow: visible !important;
  width: 100%;
}

.sidebar-collapsed .sidebar-menu {
  width: 100%;
  align-items: center;
}

.sidebar-collapsed .sidebar-link {
  justify-content: center !important;
  padding: 10px 0 !important;
  width: 44px;
  height: 44px;
  border-radius: 6px !important;
  margin: 0 auto;
}

.sidebar-collapsed .link-lead {
  justify-content: center !important;
  gap: 0 !important;
}

.sidebar-collapsed .sidebar-link.active {
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
}

.sidebar-collapsed .sidebar-link.active .sidebar-icon,
.sidebar-collapsed .sidebar-link.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.sidebar-collapsed .sidebar-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sidebar-collapsed .btn-sidebar {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-red) !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-collapsed .btn-sidebar-icon {
  display: block !important;
}

.sidebar-collapsed .sidebar-theme {
  width: 100%;
}

.sidebar-collapsed .theme-switch-wrap {
  padding: 4px;
  background: transparent;
  border: none;
  justify-content: center;
}

/* ==========================================================================
   FLOATING TOOLTIP BUBBLES ON HOVER (When Collapsed)
   ========================================================================== */
.sidebar-collapsed [data-tooltip] {
  position: relative;
}

.sidebar-collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #14161F;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

.sidebar-collapsed [data-tooltip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px 6px 5px 0;
  border-style: solid;
  border-color: transparent #14161F transparent transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 10000;
}

.sidebar-collapsed [data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.sidebar-collapsed [data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}
/* ==========================================================================
   SHOWCASE 7 PROJECTS TABS & COLOR DOTS
   ========================================================================== */
.showcase-tabs-nav {
  display: flex;
  padding: 6px 8px;
  gap: 4px;
}

.showcase-tabs-nav::-webkit-scrollbar {
  display: none !important;
}

.showcase-tab-btn {
  flex: 1;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.showcase-tab-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.showcase-tab-btn.active {
  color: #FFFFFF !important;
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.dot-cyan { background: #06b6d4 !important; }
.dot-emerald { background: #10b981 !important; }
.dot-gold { background: #eab308 !important; }
.dot-blue { background: #3b82f6 !important; }

.pill-cyan { background: rgba(6, 182, 212, 0.15) !important; color: #06b6d4 !important; border: 1px solid rgba(6, 182, 212, 0.3) !important; }
.pill-emerald { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
.pill-gold { background: rgba(234, 179, 8, 0.15) !important; color: #eab308 !important; border: 1px solid rgba(234, 179, 8, 0.3) !important; }
.pill-blue { background: rgba(59, 130, 246, 0.15) !important; color: #3b82f6 !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; }

.tag-cyan { background: rgba(6, 182, 212, 0.1) !important; color: #06b6d4 !important; }
.tag-emerald { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.tag-gold { background: rgba(234, 179, 8, 0.1) !important; color: #eab308 !important; }
.tag-blue { background: rgba(59, 130, 246, 0.1) !important; color: #3b82f6 !important; }
/* ==========================================================================
   FOOTER (Clean 4-Column Balanced Grid)
   ========================================================================== */
.footer-wrap {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  padding: 60px 0 32px;
  margin-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.4fr;
  gap: 36px;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
  }
}

.footer-col h5 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--text-main);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ==========================================================================
   CREATIVE STUDIO POLISH - Interactive Cursor, Ambient Glow, Scroll Reveal & 3D Tilt
   ========================================================================== */

/* 1. Interactive Custom Cursor (Desktop Only) */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--accent-red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.2s ease;
  will-change: transform;
}

.custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.03);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
  will-change: transform;
}

.custom-cursor-ring.cursor-hover {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.14);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.32);
}

.custom-cursor-ring.cursor-hidden,
.custom-cursor-dot.cursor-hidden {
  opacity: 0 !important;
}

.custom-cursor-ring.cursor-visible,
.custom-cursor-dot.cursor-visible {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .custom-cursor-dot,
  .custom-cursor-ring {
    display: none !important;
  }
}

/* 2. Scroll Reveal Animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.1s; }
.reveal-delay-3 { transition-delay: 0.15s; }
.reveal-delay-4 { transition-delay: 0.2s; }

/* 3. Subtle Ambient Glow & Depth in Dark Mode */
[data-theme="dark"] .hero-wrap,
[data-theme="dark"] .home-showcase-section {
  position: relative;
}

[data-theme="dark"] .hero-wrap::before,
[data-theme="dark"] .home-showcase-section::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 90vw);
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.075) 0%, rgba(239, 68, 68, 0.015) 45%, transparent 70%);
  pointer-events: none;
  filter: blur(45px);
  z-index: 0;
}

[data-theme="dark"] .footer-wrap {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(239, 68, 68, 0.05) 0%, transparent 65%), var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
}

/* 4. Crisp Mockups & Smooth Elevation on Project Cards (No 3D distortion, No Image Zoom) */
.project-card {
  perspective: none !important;
  transform-style: flat !important;
  will-change: transform, box-shadow;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.28) !important;
  border-color: var(--border-focus);
}

.project-thumb-wrap {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.project-thumb-wrap img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: none !important;
  will-change: auto !important;
}

.project-card:hover .project-thumb-wrap img {
  transform: none !important;
}

.project-card:hover .project-thumb-badge {
  transform: translateY(-2px);
  transition: transform 0.25s ease;
}


/* Portfolio Search Bar Favicon Badge */
.portfolio-search-favicon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-fast);
}

.portfolio-search-wrap:focus-within .portfolio-search-favicon {
  transform: translateY(-50%) scale(1.08);
}

[data-theme="light"] .moden-monogram {
  background: #FFFFFF;
  color: #0F172A;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .moden-monogram:hover {
  background: #F8FAFC;
  border-color: var(--accent-red);
}


/* ===================================================
   SaaS Solutions Rich Preview Popovers (Desktop Sidebar)
=================================================== */
.sidebar-saas-item {
  position: relative;
}

.saas-preview-popover {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  width: 300px;
  padding: 16px 18px;
  background: rgba(14, 17, 26, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 25px -5px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1050;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
  text-align: left;
}

/* Arrow pointer pointing back to the sidebar menu item */
.saas-preview-popover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid inherit;
  border-bottom: 1px solid inherit;
  z-index: -1;
}

/* Show on hover in BOTH expanded and collapsed mode! */
.sidebar-saas-item:hover .saas-preview-popover {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
  pointer-events: auto !important;
}

.sidebar-collapsed .sidebar-saas-item {
  position: relative;
}

.sidebar-collapsed .sidebar-saas-item .saas-preview-popover {
  left: calc(100% + 14px) !important;
  top: 50% !important;
  z-index: 99999 !important;
}

/* Popover Internal Structure */
.popover-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.popover-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.popover-version {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.popover-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.popover-desc {
  font-size: 0.83rem;
  color: #94A3B8;
  line-height: 1.5;
  margin: 0;
}

.popover-desc strong {
  color: #F8FAFC;
  font-weight: 700;
}

.popover-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}

.popover-cta-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease;
}

.sidebar-saas-item:hover .popover-cta-link {
  transform: translateX(2px);
}

/* Popover Color Themes */
/* 1. Viralisimo.cl (Emerald / Cyan - 100% GRATIS) */
.popover-viralisimo {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(16, 185, 129, 0.18);
}
.popover-viralisimo .popover-badge-free {
  background: rgba(16, 185, 129, 0.18);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.popover-viralisimo .popover-title {
  color: #10B981;
}
.popover-viralisimo .popover-cta-link {
  color: #10B981;
}

/* 2. BeMusic.lat (Fuchsia / Purple - 100% GRATIS) */
.popover-bemusic {
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(236, 72, 153, 0.18);
}
.popover-bemusic .popover-badge-free {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.popover-bemusic .popover-title {
  color: #F472B6;
}
.popover-bemusic .popover-cta-link {
  color: #F472B6;
}

/* 3. ReelsFlow HD (Violet / Magenta - 100% GRATIS) */
.popover-reelsflow {
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(139, 92, 246, 0.18);
}
.popover-reelsflow .popover-badge-free {
  background: rgba(139, 92, 246, 0.18);
  color: #A78BFA;
  border: 1px solid rgba(139, 92, 246, 0.35);
}
.popover-reelsflow .popover-title {
  color: #A78BFA;
}
.popover-reelsflow .popover-cta-link {
  color: #A78BFA;
}

/* 4. MKTeam Space (Crimson / Slate - LICENCIA DEDICADA) */
.popover-mkteam {
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(239, 68, 68, 0.18);
}
.popover-mkteam .popover-badge-license {
  background: rgba(239, 68, 68, 0.18);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.popover-mkteam .popover-title {
  color: #FFFFFF;
}
.popover-mkteam .popover-cta-link {
  color: #EF4444;
}

/* 5. Web PyMEs (Blue / Cyan - FÁCIL & ECONÓMICO) */
.popover-webpymes {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(59, 130, 246, 0.18);
}
.popover-webpymes .popover-badge-pyme {
  background: rgba(59, 130, 246, 0.18);
  color: #60A5FA;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.popover-webpymes .popover-title {
  color: #60A5FA;
}
.popover-webpymes .popover-cta-link {
  color: #3B82F6;
}

/* ===================================================
   LIGHT MODE OVERRIDES FOR SAAS POPOVERS
=================================================== */
[data-theme="light"] .saas-preview-popover {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.14), 0 0 20px -2px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .saas-preview-popover::before {
  background: #FFFFFF !important;
  border-left-color: rgba(0, 0, 0, 0.12) !important;
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .popover-title {
  color: #0F172A !important;
}
[data-theme="light"] .popover-desc {
  color: #475569 !important;
}
[data-theme="light"] .popover-desc strong {
  color: #0F172A !important;
}
[data-theme="light"] .popover-version {
  color: #64748B !important;
}
[data-theme="light"] .popover-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light mode popover color highlights */
[data-theme="light"] .popover-viralisimo {
  border-color: rgba(16, 185, 129, 0.45) !important;
}
[data-theme="light"] .popover-viralisimo .popover-badge-free {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
[data-theme="light"] .popover-viralisimo .popover-title {
  color: #065F46 !important;
}
[data-theme="light"] .popover-viralisimo .popover-cta-link {
  color: #047857 !important;
}

[data-theme="light"] .popover-bemusic {
  border-color: rgba(236, 72, 153, 0.45) !important;
}
[data-theme="light"] .popover-bemusic .popover-badge-free {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}
[data-theme="light"] .popover-bemusic .popover-title {
  color: #9D174D !important;
}
[data-theme="light"] .popover-bemusic .popover-cta-link {
  color: #BE185D !important;
}

[data-theme="light"] .popover-reelsflow {
  border-color: rgba(139, 92, 246, 0.45) !important;
}
[data-theme="light"] .popover-reelsflow .popover-badge-free {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #6D28D9 !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}
[data-theme="light"] .popover-reelsflow .popover-title {
  color: #5B21B6 !important;
}
[data-theme="light"] .popover-reelsflow .popover-cta-link {
  color: #6D28D9 !important;
}

[data-theme="light"] .popover-mkteam {
  border-color: rgba(239, 68, 68, 0.4) !important;
}
[data-theme="light"] .popover-mkteam .popover-badge-license {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #DC2626 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
[data-theme="light"] .popover-mkteam .popover-title {
  color: #0F172A !important;
}
[data-theme="light"] .popover-mkteam .popover-cta-link {
  color: #DC2626 !important;
}

[data-theme="light"] .popover-webpymes {
  border-color: rgba(59, 130, 246, 0.4) !important;
}
[data-theme="light"] .popover-webpymes .popover-badge-pyme {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #1D4ED8 !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}
[data-theme="light"] .popover-webpymes .popover-title {
  color: #1E40AF !important;
}
[data-theme="light"] .popover-webpymes .popover-cta-link {
  color: #1D4ED8 !important;
}

/* ===================================================
   LIGHT MODE CONTRAST & TYPOGRAPHY OVERRIDES
=================================================== */
/* Persistent Dark Sidebar: Crisp White Tones for Inactive Menu & Red Pill Badge */
.sidebar-link {
  color: #F8FAFC !important;
  opacity: 0.9;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-link .link-text {
  color: #F8FAFC !important;
}
.sidebar-link .sidebar-icon {
  color: #F1F5F9 !important;
  transition: all 0.2s ease;
}
.sidebar-link:hover {
  opacity: 1 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.sidebar-link:hover .link-text {
  color: #FFFFFF !important;
}
.sidebar-link:hover .sidebar-icon {
  color: var(--accent-red) !important;
  transform: scale(1.08);
}
.sidebar-link.active {
  opacity: 1 !important;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
}
.sidebar-link.active .sidebar-icon,
.sidebar-link.active svg,
.sidebar-link.active .link-text {
  color: #FFFFFF !important;
}
/* Portfolio Badge: Clean luxury pill/badge */
.sidebar-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #DC2626 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  height: 22px !important;
  min-width: 24px !important;
  width: auto !important;
  padding: 0 6px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5) !important;
  box-sizing: border-box !important;
}
.sidebar-link.active .sidebar-pill {
  background: #991B1B !important;
  color: #FFFFFF !important;
  border-radius: 9999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
}
.sidebar-collapse-toggle:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.social-btn {
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-btn:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
[data-theme="light"] .sidebar-legal-links .sep,
[data-theme="light"] .dot-sep {
  color: rgba(0, 0, 0, 0.25) !important;
}

/* Buttons in Light Mode */
[data-theme="light"] .btn-outline {
  color: #0F172A !important;
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}
[data-theme="light"] .btn-outline:hover {
  color: #0F172A !important;
  background: #F1F5F9 !important;
  border-color: #0F172A !important;
}

/* ==========================================================================
   HOME PORTFOLIO SHOWCASE — BOX COMPLETO EN NEGRO UNIFICADO (#101010)
   (Fondo #101010, Botones #101010 y Respiración con Padding en 4 Bordes)
   ========================================================================== */
.home-hero-showcase {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 4px 0 !important; /* Achicado hacia los bordes de pantalla para dar máxima presencia al box */
  box-sizing: border-box !important;
}

.showcase-card-wrapper,
.showcase-dark-box,
#homeShowcaseCard,
.card-glass.showcase-card-wrapper,
.showcase-card-wrapper.card-glass,
[data-theme="light"] .showcase-card-wrapper,
[data-theme="light"] .showcase-dark-box,
[data-theme="light"] #homeShowcaseCard,
[data-theme="light"] .showcase-card-wrapper.card-glass,
[data-theme="light"] .card-glass.showcase-card-wrapper,
[data-theme="dark"] .showcase-card-wrapper,
[data-theme="dark"] .showcase-dark-box,
[data-theme="dark"] #homeShowcaseCard {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(239, 68, 68, 0.08) !important;
  color: #FFFFFF !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 1. Header y Pestañas Superiores (Tabs) con Fondo #101010 */
.showcase-header,
[data-theme="light"] .showcase-header,
[data-theme="dark"] .showcase-header {
  background: #101010 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}

.showcase-tabs-nav,
[data-theme="light"] .showcase-tabs-nav,
[data-theme="dark"] .showcase-tabs-nav {
  background: #101010 !important;
}

.showcase-tab-btn,
[data-theme="light"] .showcase-tab-btn,
[data-theme="dark"] .showcase-tab-btn {
  color: #CBD5E1 !important;
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

.showcase-tab-btn:hover,
[data-theme="light"] .showcase-tab-btn:hover,
[data-theme="dark"] .showcase-tab-btn:hover {
  color: #FFFFFF !important;
  background: #181818 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.showcase-tab-btn.active,
[data-theme="light"] .showcase-tab-btn.active,
[data-theme="dark"] .showcase-tab-btn.active {
  color: #FFFFFF !important;
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* 2. Barra de Progreso y Tiempo */
.showcase-timer-bar,
[data-theme="light"] .showcase-timer-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  height: 2px !important;
  width: 100% !important;
}

.showcase-timer-progress,
[data-theme="light"] .showcase-timer-progress {
  background: var(--accent-red, #EF4444) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
}

/* 3. Viewport Interior y Slides (Cuerpo del Box) — Mayor Padding Interno para Separar la Información */
.showcase-slides-viewport,
[data-theme="light"] .showcase-slides-viewport,
[data-theme="dark"] .showcase-slides-viewport {
  background: #101010 !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  padding: 30px 28px 26px !important; /* Mayor padding interno para que la información respire */
}

.showcase-slide,
[data-theme="light"] .showcase-slide,
[data-theme="dark"] .showcase-slide {
  background: #101010 !important;
  flex-direction: column !important;
  gap: 22px !important; /* Mayor separación entre imagen e información */
}

.showcase-slide:not(.active),
[data-theme="light"] .showcase-slide:not(.active),
[data-theme="dark"] .showcase-slide:not(.active) {
  display: none !important;
}

.showcase-slide.active,
[data-theme="light"] .showcase-slide.active,
[data-theme="dark"] .showcase-slide.active {
  display: flex !important;
}

.showcase-slide-content,
[data-theme="light"] .showcase-slide-content {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important; /* Mayor separación interna entre elementos de información */
  padding: 4px 4px 0 !important;
}

/* 4. Media y Miniatura de Imagen con Fondo #101010 */
.showcase-slide-media,
[data-theme="light"] .showcase-slide-media,
[data-theme="dark"] .showcase-slide-media {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-md, 12px) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* 5. Pill Badges sobre la Imagen */
.showcase-card-wrapper .showcase-pill-badge,
[data-theme="light"] .showcase-card-wrapper .showcase-pill-badge {
  backdrop-filter: blur(8px) !important;
}

.showcase-card-wrapper .pill-pink,
[data-theme="light"] .showcase-card-wrapper .pill-pink {
  background: rgba(236, 72, 153, 0.22) !important;
  color: #F472B6 !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
}

.showcase-card-wrapper .pill-purple,
[data-theme="light"] .showcase-card-wrapper .pill-purple {
  background: rgba(99, 102, 241, 0.22) !important;
  color: #A5B4FC !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
}

.showcase-card-wrapper .pill-amber,
[data-theme="light"] .showcase-card-wrapper .pill-amber {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

/* 6. Tags y Metadatos de la Diapositiva */
.showcase-card-wrapper .showcase-tag-accent,
[data-theme="light"] .showcase-card-wrapper .showcase-tag-accent {
  font-weight: 700 !important;
}

.showcase-card-wrapper .tag-pink,
[data-theme="light"] .showcase-card-wrapper .tag-pink {
  color: #F472B6 !important;
}

.showcase-card-wrapper .tag-purple,
[data-theme="light"] .showcase-card-wrapper .tag-purple {
  color: #A5B4FC !important;
}

.showcase-card-wrapper .tag-amber,
[data-theme="light"] .showcase-card-wrapper .tag-amber {
  color: #FBBF24 !important;
}

.showcase-card-wrapper .showcase-year,
[data-theme="light"] .showcase-card-wrapper .showcase-year {
  color: #94A3B8 !important;
}

/* 7. Tipografías: Título Blanco y Resumen Nítido */
.showcase-card-wrapper .showcase-title,
.showcase-card-wrapper .showcase-slide-title,
[data-theme="light"] .showcase-card-wrapper .showcase-title,
[data-theme="light"] .showcase-card-wrapper .showcase-slide-title,
[data-theme="dark"] .showcase-card-wrapper .showcase-title {
  color: #FFFFFF !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
}

.showcase-card-wrapper .showcase-desc,
.showcase-card-wrapper .showcase-slide-desc,
[data-theme="light"] .showcase-card-wrapper .showcase-desc,
[data-theme="light"] .showcase-card-wrapper .showcase-slide-desc,
[data-theme="dark"] .showcase-card-wrapper .showcase-desc {
  color: #CBD5E1 !important;
  line-height: 1.6 !important;
}

/* 8. Botones de Acción dentro del Box — Background #101010 */
.showcase-card-wrapper .showcase-cta-btn,
.showcase-card-wrapper .btn-accent,
[data-theme="light"] .showcase-card-wrapper .showcase-cta-btn,
[data-theme="light"] .showcase-card-wrapper .btn-accent {
  color: #FFFFFF !important;
  background: var(--accent-red, #EF4444) !important;
  border: 1px solid var(--accent-red, #EF4444) !important;
  box-shadow: none !important;
}

.showcase-card-wrapper .showcase-cta-btn:hover,
[data-theme="light"] .showcase-card-wrapper .showcase-cta-btn:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  box-shadow: none !important;
}

.showcase-card-wrapper .showcase-actions .btn-outline,
[data-theme="light"] .showcase-card-wrapper .showcase-actions .btn-outline,
[data-theme="dark"] .showcase-card-wrapper .showcase-actions .btn-outline {
  color: #FFFFFF !important;
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.showcase-card-wrapper .showcase-actions .btn-outline:hover,
[data-theme="light"] .showcase-card-wrapper .showcase-actions .btn-outline:hover,
[data-theme="dark"] .showcase-card-wrapper .showcase-actions .btn-outline:hover {
  background: #181818 !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
}

/* 9. Paginación Inferior (Footer Dots) con Fondo #101010 */
.showcase-footer-dots,
.showcase-card-wrapper .showcase-footer-dots,
[data-theme="light"] .showcase-card-wrapper .showcase-footer-dots {
  background: #101010 !important;
  padding: 10px 0 16px !important;
}

.showcase-dot,
.showcase-card-wrapper .showcase-dot,
[data-theme="light"] .showcase-card-wrapper .showcase-dot {
  background: rgba(255, 255, 255, 0.25) !important;
}

.showcase-dot.active,
.showcase-card-wrapper .showcase-dot.active,
[data-theme="light"] .showcase-card-wrapper .showcase-dot.active {
  background: var(--accent-red, #EF4444) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

/* Footer in Light Mode */
[data-theme="light"] .footer-links a:hover {
  color: var(--accent-red) !important;
}

/* Project Card Badges & Tags */
.project-thumb-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(10, 12, 18, 0.75);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}
[data-theme="light"] .project-thumb-badge {
  background: rgba(255, 255, 255, 0.92);
  color: #0F172A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.project-tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
[data-theme="light"] .project-tag {
  background: #F1F5F9;
  border-color: rgba(0, 0, 0, 0.08);
  color: #334155;
}

/* Services & Methodology in Light Mode */
[data-theme="light"] .service-step-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .service-feature-card {
  background: #F8FAFC !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .card-glass {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* Wizard / Leads in Light Mode */
[data-theme="light"] .wizard-step-item {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .wizard-step-item:hover {
  background: #F8FAFC !important;
}
[data-theme="light"] .wizard-step-item.active {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}
[data-theme="light"] .wizard-progress-track {
  background: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .option-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .option-card:hover {
  background: #F8FAFC !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
[data-theme="light"] .option-card.selected {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: var(--accent-red) !important;
}

/* Ensure sidebar popovers and tooltips are not clipped on desktop */
@media (min-width: 992px) {
  .app-sidebar {
    overflow: visible !important;
  }
  .sidebar-inner {
    overflow: visible !important;
  }
}

/* ==========================================================================
   SERVICES 2.0: BENTO GRID, SPLIT INSPECTOR & COMPARISON TABLE
   ========================================================================== */

/* Guarantees Strip */
.header-guarantees-strip {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.guarantee-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-surface);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

/* Bento Overview Grid */
.services-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.bento-service-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
  position: relative;
}

.bento-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.4);
}

.bento-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.bento-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: var(--accent-red);
}

.bento-meta-pills {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bento-number {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-muted);
}

.bento-timeline-badge {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.bento-badge-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-red);
  margin-bottom: 6px;
  display: block;
}

.bento-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.bento-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 16px 0;
  flex: 1;
}

.bento-metric-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  margin-bottom: 14px;
}

.bento-metric-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bento-metric-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--accent-green);
}

.bento-tags-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bento-tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.bento-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Split Command Center */
.services-split-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

.services-nav-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 30px;
}

.rail-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.rail-nav-item:hover {
  background: var(--bg-card-hover);
  border-color: rgba(239, 68, 68, 0.3);
  transform: translateX(3px);
}

.rail-nav-item.active {
  background: var(--bg-card);
  border-color: var(--accent-red);
  box-shadow: 0 8px 24px -6px rgba(239, 68, 68, 0.25);
}

.rail-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  color: var(--accent-red);
  flex-shrink: 0;
}

.rail-item-content {
  flex: 1;
  min-width: 0;
}

.rail-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.rail-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-red);
}

.rail-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.rail-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-sub {
  font-size: 0.74rem;
  color: var(--text-secondary);
  display: block;
}

.rail-arrow {
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}

.rail-nav-item.active .rail-arrow {
  color: var(--accent-red);
  transform: translateX(4px);
}

/* Inspector Panes */
.services-inspector-pane {
  padding: 32px;
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
}

.inspector-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.badge-timeline {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.inspector-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.inspector-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.inspector-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.inspector-featured-project-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  margin-bottom: 20px;
}

.inspector-project-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-red);
  text-decoration: none;
  transition: opacity 0.2s;
}

.inspector-project-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.inspector-description {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}

.inspector-pillars-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.inspector-audience-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.inspector-audience-tag {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-red);
  margin-bottom: 6px;
}

.inspector-audience-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.inspector-tags-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.inspector-steps-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
}

/* Comparison Table */
.comparison-table-wrapper {
  padding: 24px;
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.services-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.services-table th {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.services-table td {
  padding: 16px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.table-pill.badge-blue {
  background: rgba(14, 165, 233, 0.12);
  color: #0EA5E9;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.table-pill.badge-green {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.table-pill.badge-red {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.table-pill.badge-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #A855F7;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

/* Light Mode Overrides for Services 2.0 */
[data-theme="light"] .bento-service-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .bento-service-card:hover {
  border-color: rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.09) !important;
}

[data-theme="light"] .bento-metric-strip {
  background: #F8FAFC !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .bento-timeline-badge,
[data-theme="light"] .bento-tag {
  background: #F1F5F9 !important;
  color: #334155 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .rail-nav-item {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .rail-nav-item:hover {
  background: #F8FAFC !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="light"] .rail-nav-item.active {
  background: #FFFFFF !important;
  border-color: var(--accent-red) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.12) !important;
}

[data-theme="light"] .services-inspector-pane {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .inspector-audience-box,
[data-theme="light"] .inspector-tags-card {
  background: #F8FAFC !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .services-table th,
[data-theme="light"] .services-table td {
  border-color: rgba(0, 0, 0, 0.07) !important;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .services-bento-grid {
    grid-template-columns: 1fr;
  }
  .services-split-wrap {
    grid-template-columns: 1fr;
  }
  .services-nav-rail {
    position: static;
  }
  .inspector-pillars-grid {
    grid-template-columns: 1fr;
  }
  .services-inspector-pane {
    padding: 22px 18px;
  }
}

/* ==========================================================================
   CLEAN SERVICES CARDS & INDEPENDENT COMPARISON MODAL
   ========================================================================== */

/* Clean Service Cards */
.clean-services-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.clean-service-card {
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}

.clean-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35);
}

/* Full-width Service Block Header */
.clean-service-card-header {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.clean-card-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.clean-badge-num {
  font-family: var(--font-display, 'Khand', sans-serif);
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent-red);
  letter-spacing: -0.02em;
}

.clean-meta-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
}

.clean-badge-tag {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 !important;
  background: transparent !important;
  color: #94A3B8;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.clean-service-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 6px 0 8px 0;
  line-height: 1.2;
}

.clean-service-desc {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 820px;
}

/* 2-Column Grid for Details */
.clean-service-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 36px;
  align-items: start;
  margin-top: 18px;
}

@media (max-width: 860px) {
  .clean-service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .clean-badge-num {
    font-size: 2rem;
  }
}

/* Columna Izquierda: Entregables */
.clean-deliverables-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #CBD5E1;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.clean-deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clean-deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.clean-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Columna Derecha: Especificaciones / Contexto */
.clean-service-specs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md, 8px);
  padding: 18px 22px;
}

.clean-spec-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clean-spec-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}

.clean-spec-value {
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.45;
}

.clean-project-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.clean-project-link:hover {
  text-decoration: underline;
}
}

/* Card Action Footer Bar */
.clean-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.clean-card-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.clean-card-footer-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Clean Steps */
.clean-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.clean-step-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
}

.clean-step-num {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.clean-step-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.clean-step-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Sidebar Compare Button */
.btn-sidebar-compare {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #94A3B8 !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.btn-sidebar-compare:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Comparison Modal */
.comparison-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.comparison-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 9, 14, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.comparison-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0E121D;
  animation: modalFadeScale 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeScale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.comparison-modal-close {
  position: sticky !important;
  top: 12px !important;
  float: right !important;
  margin-top: -10px !important;
  margin-right: -8px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(20, 24, 36, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 250 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.2s ease !important;
}

.comparison-modal-close:hover {
  background: rgba(239, 68, 68, 0.9) !important;
  color: #FFFFFF !important;
  border-color: #EF4444 !important;
  transform: scale(1.08) !important;
}

.comparison-modal-header {
  margin-bottom: 24px;
}

.comparison-modal-body {
  margin-bottom: 24px;
}

.comparison-popup-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-popup-table th {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  letter-spacing: 0.05em;
}

.comparison-popup-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.comparison-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

/* Light Mode Overrides */
[data-theme="light"] .clean-service-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .clean-service-card:hover {
  border-color: rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .clean-badge-tag {
  color: #64748B !important;
  background: transparent !important;
  border: none !important;
}

[data-theme="light"] .clean-meta-sep {
  color: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .clean-service-card-header {
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .clean-card-footer {
  border-top-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .clean-deliverables-title {
  color: #334155 !important;
}

[data-theme="light"] .clean-service-specs {
  background: #F8FAFC !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .clean-spec-label {
  color: #64748B !important;
}

[data-theme="light"] .clean-step-item {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .comparison-modal-dialog {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .comparison-modal-close {
  background: #F1F5F9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #475569 !important;
}

[data-theme="light"] .comparison-modal-close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--accent-red) !important;
}

[data-theme="light"] .comparison-popup-table th,
[data-theme="light"] .comparison-popup-table td {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .clean-service-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .clean-steps-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .comparison-modal-dialog {
    padding: 24px 18px;
  }
}

@media (max-width: 768px) {
  .clean-steps-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .clean-service-card {
    padding: 22px 18px;
  }
}

/* ==========================================================================
   RESPONSIVE COMPARISON MATRIX (ZERO HORIZONTAL SCROLL)
   ========================================================================== */
.comparison-modal-dialog {
  max-width: 1120px !important;
  width: 95% !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 32px 30px !important;
  box-sizing: border-box !important;
}

.comparison-dialog-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.comparison-dialog-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  max-width: 700px;
}

.comparison-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  padding-top: 16px;
}

.comp-col-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  box-sizing: border-box;
  position: relative;
  overflow: visible !important;
}

.comp-col-card:hover {
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.35);
}

.comp-col-featured {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.04);
  overflow: visible !important;
}

.comp-featured-badge {
  position: absolute;
  top: -12px;
  right: 18px;
  background: var(--accent-red, #EF4444);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 30 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
  white-space: nowrap;
}

.comp-card-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.comp-card-num {
  font-family: var(--font-display, 'Khand', sans-serif);
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent-red);
  letter-spacing: -0.02em;
}

.comp-meta-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.15rem;
  font-weight: 300;
}

.comp-category-text {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94A3B8;
}

.comp-col-header {
  margin-bottom: 12px;
}

.comp-col-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 6px 0 8px 0;
  line-height: 1.25;
}

.comp-col-purpose {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  min-height: 54px;
}

.comp-specs-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 18px 0 22px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.comp-spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}

.spec-value {
  font-size: 0.88rem;
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.35;
}

.text-green {
  color: #10B981 !important;
  font-weight: 700;
}

.text-purple {
  color: #C084FC !important;
  font-weight: 700;
}

.comp-col-action {
  margin-top: auto;
}

.comp-col-action .btn-block {
  width: 100%;
  text-align: center;
  justify-content: center;
  font-size: 0.88rem;
  padding: 11px 14px;
  font-weight: 700;
}

/* Light Mode for Comparison Cards */
[data-theme="light"] .comp-col-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .comp-col-featured {
  background: #FFFDFD !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="light"] .comp-specs-list {
  border-color: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .comp-meta-sep {
  color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .comp-category-text,
[data-theme="light"] .spec-label {
  color: #64748B !important;
}

/* Tablet: 2 Columnas */
@media (max-width: 1024px) {
  .comparison-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .comp-col-purpose {
    min-height: auto;
  }
}

/* Smartphone: 1 Columna, Perfect Fit, Cero Scroll Horizontal */
@media (max-width: 640px) {
  .comparison-modal-overlay {
    padding: 12px !important;
  }
  .comparison-modal-dialog {
    padding: 22px 16px !important;
    max-height: 92vh !important;
    border-radius: 12px !important;
  }
  .comparison-dialog-title {
    font-size: 1.35rem !important;
  }
  .comparison-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .comp-col-card {
    padding: 16px 14px !important;
  }
  .comp-col-purpose {
    min-height: auto !important;
  }
  .comp-spec-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
  }
  .spec-value {
    text-align: right !important;
  }
}

/* ==========================================================================
   HERO MOCKUP GALLERY SLIDER (Arrows, Zoom Lightbox, Dots & Counter)
   ========================================================================== */
.hero-gallery-slider {
    position: relative;
    margin-bottom: 48px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #101010;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.7);
}

.hero-slider-stage {
    position: relative;
    z-index: 2;
    padding: 32px 24px 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
    user-select: none;
}

.hero-slide-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-in;
    transition: opacity 0.3s ease;
}

.hero-slide-img {
    max-width: 100%;
    max-height: 620px;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: contain;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    transition: transform 0.3s ease;
}

.hero-slide-item:hover .hero-slide-img {
    transform: none !important;
}

.hero-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.hero-slider-nav:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.45);
}

.hero-slider-prev {
    left: 20px;
}

.hero-slider-next {
    right: 20px;
}

.hero-slider-zoom-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 10;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #E2E8F0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.hero-slider-zoom-badge:hover {
    background: rgba(220, 38, 38, 0.95);
    color: #FFFFFF;
    border-color: var(--accent-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.hero-slider-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-slider-dot {
    width: 24px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-slider-dot.active {
    background: var(--accent-red);
    width: 34px;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

.hero-slider-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .hero-slider-stage {
        padding: 16px 12px;
        min-height: 300px;
    }
    .hero-slider-nav {
        width: 40px;
        height: 40px;
    }
    .hero-slider-prev {
        left: 8px;
    }
    .hero-slider-next {
        right: 8px;
    }
    .hero-slider-zoom-badge {
        top: 12px;
        right: 12px;
        padding: 5px 11px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   HERO GRID & SHOWCASE STABILITY (Prevents box widening & button column wrap)
   ========================================================================== */
.home-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  gap: 40px !important;
  align-items: center;
  width: 100% !important;
}

.home-hero-lead {
  min-width: 0 !important;
  width: 100% !important;
}

.home-hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  margin-bottom: 28px !important;
}

.home-hero-actions .btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.home-hero-showcase {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.showcase-card-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.showcase-header {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.showcase-tabs-nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  padding: 6px 8px !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.showcase-tab-btn {
  min-width: 0 !important;
  width: 100% !important;
  padding: 8px 6px !important;
  border-radius: var(--radius-sm);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.tab-btn-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 0.82rem;
  font-weight: 600;
}

.showcase-slides-viewport {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 24px !important;
}

.showcase-slide {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.showcase-slide-content {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.showcase-title {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 1024px) {
  .home-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

.btn-text-full { display: inline; }
.btn-text-short { display: none; }

@media (max-width: 640px) {
  .btn-text-full { display: none !important; }
  .btn-text-short { display: inline !important; }

  .home-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: center !important;
    margin-bottom: 18px !important;
  }
  .home-hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px 6px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: var(--radius-sm);
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   METODOLOGÍA PAGE & SMARTPHONE RESPONSIVE STYLES
   ========================================================================== */
.methodology-page-section {
  padding: 50px 0 100px;
}

.methodology-header-block {
  margin-bottom: 56px;
  max-width: 820px;
}

.methodology-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-top: 14px;
  margin-bottom: 20px;
}

.methodology-desc {
  color: var(--text-secondary);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 720px;
}

.methodology-trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.methodology-phases-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 80px;
}

.methodology-phase-card {
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.methodology-phase-card:hover {
  border-color: rgba(220, 38, 38, 0.4);
}

.phase-card-badge-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.phase-num-badge {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent-red);
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.25);
  width: 58px;
  height: 58px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phase-meta-info {
  flex: 1;
  min-width: 200px;
}

.phase-step-tag {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-red);
  display: block;
  margin-bottom: 4px;
}

.phase-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
}

.phase-duration-pill {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.phase-card-body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}

.phase-description {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 18px;
}

.phase-benefit-highlight {
  background: var(--bg-surface);
  border-left: 3px solid var(--accent-red);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.6;
}

.phase-deliverables-col {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}

.deliverables-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 14px;
}

.deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.deliverables-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.methodology-guarantees-section {
  margin-bottom: 80px;
}

.methodology-guarantees-head {
  text-align: left;
  margin-bottom: 40px;
}

.methodology-guarantees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.guarantee-item-card {
  padding: 28px 24px;
  border-radius: var(--radius-md);
}

.guarantee-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.guarantee-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 8px;
}

.guarantee-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.methodology-cta-card {
  padding: 50px 36px;
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.methodology-cta-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: 14px;
  text-align: left;
}

.methodology-cta-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 680px;
  margin: 0 0 30px;
  line-height: 1.65;
  text-align: left;
}

.methodology-cta-actions {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* SMARTPHONE & TABLET RESPONSIVE OVERRIDES FOR METHODOLOGY */
@media (max-width: 900px) {
  .phase-card-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .methodology-page-section {
    padding: 30px 0 60px;
  }

  .methodology-header-block {
    margin-bottom: 36px;
  }

  .methodology-phase-card {
    padding: 22px 18px;
  }

  .phase-card-badge-row {
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 18px;
  }

  .phase-num-badge {
    width: 46px;
    height: 46px;
    font-size: 1.4rem;
    border-radius: 8px;
  }

  .phase-heading {
    font-size: 1.25rem;
  }

  .phase-duration-pill {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .phase-deliverables-col {
    padding: 16px 16px;
  }

  .methodology-guarantees-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .methodology-cta-card {
    padding: 32px 18px;
  }

  .methodology-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   MOBILE HEADER & SIDEBAR STABILITY OVERRIDES
   ========================================================================== */
@media (max-width: 1024px) {
  /* Fix Mobile Header: Pin logo to far left, buttons to far right without crowding */
  .mobile-header {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background: #101010 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 900 !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mobile-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }

  .mobile-brand {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
  }

  .mobile-brand .brand-logo-img {
    height: 42px !important;
    width: auto !important;
    max-width: 175px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .mobile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-main) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all var(--transition-fast) !important;
  }

  /* Mobile Theme Switch: Exactly Identical to Desktop */
  .mobile-actions .theme-toggle-btn {
    width: 58px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-radius: 6px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    background: #0B0C10 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  [data-theme="light"] .mobile-actions .theme-toggle-btn {
    background: #E5E7EB !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
  }

  .mobile-actions .theme-toggle-btn .theme-slider {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 24px !important;
    height: 22px !important;
    background: var(--accent-red) !important;
    border-radius: 4px !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  [data-theme="dark"] .mobile-actions .theme-toggle-btn .theme-slider,
  html:not([data-theme="light"]) .mobile-actions .theme-toggle-btn .theme-slider {
    transform: translateX(28px) !important;
  }

  [data-theme="light"] .mobile-actions .theme-toggle-btn .theme-slider {
    transform: translateX(0) !important;
  }

  .mobile-actions .theme-toggle-btn .theme-icon-sun,
  .mobile-actions .theme-toggle-btn .theme-icon-moon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    position: relative !important;
    transition: color var(--transition-fast) !important;
  }

  /* Full-width Mobile Drawer (Eliminates off-canvas shadow bleed down left edge) */
  .app-sidebar,
  .sidebar-collapsed .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 86vw) !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, visibility 0.3s ease !important;
    box-shadow: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow-y: auto !important;
  }

  .app-sidebar.open,
  .sidebar-collapsed .app-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.7) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* On mobile screens, all text inside drawer displays cleanly */
  .sidebar-collapsed .full-logo,
  .sidebar-collapsed .brand-subtitle,
  .sidebar-collapsed .sidebar-menu-divider,
  .sidebar-collapsed .link-text,
  .sidebar-collapsed .sidebar-pill,
  .sidebar-collapsed .sidebar-subtag,
  .sidebar-collapsed .btn-sidebar-text,
  .sidebar-collapsed .theme-switch-label,
  .sidebar-collapsed .sidebar-social,
  .sidebar-collapsed .sidebar-legal {
    display: flex !important;
  }
  .sidebar-collapsed .link-text {
    display: inline !important;
  }
  .sidebar-collapsed .brand-logo-icon.icon-logo {
    display: none !important;
  }

  /* Close Icon inside Mobile Drawer Header */
  .sidebar-collapse-toggle {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .sidebar-collapse-toggle .icon-collapse {
    display: none !important;
  }
  .sidebar-collapse-toggle .icon-close-mobile {
    display: block !important;
  }

  .sidebar-backdrop {
    z-index: 9990 !important;
  }
}

/* ==========================================================================
   UNIFIED PAGE HEADERS & HERO TYPOGRAPHY (COHERENCIA GRÁFICA GLOBAL)
   Estandarización tipográfica en: Home (Dashboard), Servicios, Metodología y Portafolio
   ========================================================================== */

/* 1. ANTETÍTULO (EYEBROW TAG / LEAD TAG) */
.page-lead-tag,
.home-lead-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.page-lead-tag .lead-tag-accent,
.home-lead-tag .lead-tag-accent {
  color: var(--accent-red) !important;
  font-weight: 800 !important;
}

.page-lead-tag .lead-tag-sep,
.home-lead-tag .lead-tag-sep {
  color: var(--text-muted) !important;
  opacity: 0.5 !important;
  display: inline-block !important;
}

.page-lead-tag .lead-tag-sub,
.home-lead-tag .lead-tag-sub {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

/* 2. TÍTULO PRINCIPAL (H1 HERO / PAGE TITLE & SECTION TITLES) */
.page-header-title,
.home-hero-title,
.services-header-title,
.methodology-title,
.section-title,
.pymes-hero-title,
.mkteam-hero-title,
.product-hero-title,
.portfolio-title,
.cic-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--text-main) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  max-width: 840px !important;
}

/* 3. DESCRIPCIÓN (LEAD PARAGRAPH) */
.page-header-desc,
.home-hero-desc,
.services-header-desc,
.methodology-desc {
  font-family: var(--font-body) !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  color: var(--text-secondary) !important;
  max-width: 680px !important;
  margin-top: 0 !important;
}

.home-hero-desc,
.methodology-desc {
  margin-bottom: 24px !important;
}

/* 4. MEDIA QUERIES RESPONSIVAS CON TOTAL COHERENCIA */
@media (max-width: 1024px) {
  .page-header-title,
  .home-hero-title,
  .services-header-title,
  .methodology-title,
  .section-title,
  .pymes-hero-title,
  .mkteam-hero-title,
  .product-hero-title,
  .portfolio-title,
  .cic-title {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem) !important;
    line-height: 1.18 !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 768px) {
  .page-lead-tag,
  .home-lead-tag {
    font-size: 0.8rem !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .page-header-title,
  .home-hero-title,
  .services-header-title,
  .methodology-title,
  .section-title,
  .pymes-hero-title,
  .mkteam-hero-title,
  .product-hero-title,
  .portfolio-title,
  .cic-title {
    font-size: clamp(1.15rem, 4.4vw, 1.55rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
  }

  .page-header-desc,
  .home-hero-desc,
  .services-header-desc,
  .methodology-desc {
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
  }

  .home-hero-desc,
  .methodology-desc {
    margin-bottom: 20px !important;
  }
}

@media (max-width: 480px) {
  .page-header-title,
  .home-hero-title,
  .services-header-title,
  .methodology-title,
  .section-title,
  .pymes-hero-title,
  .mkteam-hero-title,
  .product-hero-title,
  .portfolio-title,
  .cic-title {
    font-size: clamp(1.02rem, 4.1vw, 1.35rem) !important;
    line-height: 1.24 !important;
    text-transform: uppercase !important;
  }
}

/* ==========================================================================
   MÖDEN DEFENDER — FULL DASHBOARD ARCADE SYSTEM
   Ocupa todo el dashboard completo: desde donde termina el sidebar hasta el borde
   de la pantalla, y desde arriba hasta abajo.
   ========================================================================== */

/* 1. BIG VISIBLE "¡JUEGA AHORA!" CTA BUTTON (HERO SECTION) */
.home-arcade-banner {
  margin-top: 18px;
  margin-bottom: 26px;
  max-width: 580px;
  width: 100%;
}

.btn-play-now-mega {
  width: 100%;
  display: block;
  position: relative;
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.14) 0%, rgba(15, 23, 42, 0.96) 60%);
  border: 1.5px solid rgba(255, 45, 85, 0.42);
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(255, 45, 85, 0.16), 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-play-now-mega:hover {
  border-color: #ff2d55;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(255, 45, 85, 0.3), 0 0 20px rgba(255, 45, 85, 0.2);
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.22) 0%, rgba(15, 23, 42, 0.98) 60%);
}

.play-now-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.play-now-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.play-now-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 45, 85, 0.16);
  border: 1px solid rgba(255, 45, 85, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(255, 45, 85, 0.25);
  transition: transform 0.3s ease;
}

.btn-play-now-mega:hover .play-now-icon-circle {
  transform: scale(1.08) rotate(-6deg);
}

.play-now-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.play-now-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.play-now-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff2d55;
  box-shadow: 0 0 8px #ff2d55;
  animation: pulseLiveDot 1.4s infinite;
}

.play-now-badge-txt {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ff2d55;
}

.play-now-headline {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.15;
}

.play-now-headline-sub {
  color: #38bdf8;
  font-size: 0.95rem;
  font-weight: 700;
}

.play-now-desc {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.play-now-cta-box {
  flex-shrink: 0;
}

.play-now-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ff2d55;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255, 45, 85, 0.45);
  transition: all 0.25s ease;
}

.btn-play-now-mega:hover .play-now-action-btn {
  background: #e11d48;
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(255, 45, 85, 0.65);
}

/* Showcase Header Strip & Arcade Chip */
.showcase-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
}

.showcase-top-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.showcase-live-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
}

.showcase-arcade-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 45, 85, 0.14);
  border: 1.5px solid rgba(255, 45, 85, 0.4);
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.showcase-arcade-chip strong {
  color: #ff2d55;
  transition: color 0.2s ease;
}

.showcase-arcade-chip:hover {
  background: #ff2d55;
  border-color: #ff2d55;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 45, 85, 0.5);
  transform: translateY(-1px);
}

.showcase-arcade-chip:hover strong {
  color: #ffffff;
}

/* 2. FULL DASHBOARD OVERLAY VIEWPORT (ROOT LEVEL POSITIONING) */
html.arcade-open,
body.arcade-open {
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.moden-arcade-overlay {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 99999 !important;
  background: #060a12 !important;
  display: none !important;
  flex-direction: column !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  box-shadow: none !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
  overflow: hidden !important;
}

/* Sidebar collapsed state */
.sidebar-collapsed .moden-arcade-overlay {
  left: 0 !important;
}

/* Mobile & Tablet viewports */
@media (max-width: 1024px) {
  .moden-arcade-overlay {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-shadow: none !important;
  }
}

.moden-arcade-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* 3. TOP ARCADE HUD BAR */
.arcade-hud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(6, 10, 18, 0.95);
  border-bottom: 1px solid rgba(255, 45, 85, 0.25);
  backdrop-filter: blur(14px);
  z-index: 10;
  user-select: none;
  flex-shrink: 0;
}

.arcade-hud-left,
.arcade-hud-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.arcade-brand-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arcade-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff2d55;
  box-shadow: 0 0 12px #ff2d55;
  animation: pulseLiveDot 1.4s infinite;
}

.arcade-brand-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
}

.arcade-brand-subtitle {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
  padding: 2px 7px;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 4px;
}

.arcade-stat-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
}

.arcade-stat-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.arcade-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
}

.text-amber { color: #f59e0b; }
.text-accent { color: #ff2d55; }
.text-green { color: #10b981; }
.text-red { color: #ef4444; }

/* Center Scoreboard */
.arcade-hud-center {
  display: flex;
  align-items: center;
}

.arcade-score-board {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 6px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.arcade-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Right Controls */
.btn-arcade-hud {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.btn-arcade-hud:hover {
  background: rgba(255, 255, 255, 0.14);
}

.btn-arcade-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 45, 85, 0.14);
  border: 1px solid rgba(255, 45, 85, 0.4);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.2s ease;
}

.btn-arcade-close:hover {
  background: #ff2d55;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 45, 85, 0.4);
  transform: translateY(-1px);
}

.arcade-close-key {
  color: #fca5a5;
  font-size: 0.75rem;
}

.arcade-close-x {
  font-size: 1.2rem;
  line-height: 1;
}

/* 4. CANVAS CONTAINER */
.arcade-canvas-container {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

.moden-arcade-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

/* 5. BOTTOM HINTS BAR */
.arcade-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(6, 10, 18, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  flex-shrink: 0;
}

.arcade-hints-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.arcade-hint-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arcade-key {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
}

.arcade-hint-sep {
  color: var(--text-muted);
  opacity: 0.5;
}

/* 6. GAME OVER CONVERSION MODAL */
.arcade-game-over-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6, 10, 18, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}

.arcade-game-over-modal.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.game-over-card {
  max-width: 520px;
  width: 100%;
  max-height: 94dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid rgba(255, 45, 85, 0.35) !important;
  border-radius: var(--radius-lg);
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 45, 85, 0.15);
  animation: modalScaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  margin: auto !important;
  box-sizing: border-box !important;
}

.game-over-badge {
  display: inline-block;
  background: rgba(255, 45, 85, 0.15);
  border: 1px solid rgba(255, 45, 85, 0.3);
  color: var(--accent-red);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.game-over-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.game-over-rank {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #38bdf8;
  margin: 0 0 24px 0;
}

.game-over-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.game-over-stat {
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-over-stat .stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 800;
}

.game-over-stat .stat-lbl {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.game-over-message-box {
  background: rgba(255, 45, 85, 0.06);
  border: 1px solid rgba(255, 45, 85, 0.18);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 28px;
  text-align: left;
}

.game-over-message-box p {
  color: #e2e8f0;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.game-over-message-box p strong {
  color: #ffffff;
}

.game-over-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-over-cta {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: 14px 20px;
}

.game-over-secondary-btns {
  display: flex;
  gap: 10px;
}

.game-over-secondary-btns button {
  flex: 1;
  justify-content: center;
}

/* RESPONSIVE TUNING */
@media (max-width: 768px) {
  .btn-play-now-mega {
    padding: 14px;
  }

  .play-now-icon-circle {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .play-now-headline {
    font-size: 1.22rem;
  }

  .play-now-desc {
    display: none;
  }

  .arcade-hud-bar {
    padding: 0 10px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .arcade-brand-chip {
    display: none !important;
  }

  .arcade-hud-left {
    gap: 6px !important;
  }

  .arcade-stat-badge {
    padding: 3px 8px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }

  .arcade-stat-label {
    font-size: 0.62rem !important;
  }

  .arcade-stat-val {
    font-size: 0.78rem !important;
  }

  /* Hide high score / record badge on mobile header to save space */
  .arcade-hud-left .arcade-stat-badge:nth-child(3) {
    display: none !important;
  }

  .arcade-hud-center {
    flex: 1 !important;
    justify-content: center !important;
  }

  .arcade-score-board {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
  }

  .arcade-stat-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .arcade-stat-col .arcade-stat-label {
    display: inline-block !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.04em !important;
  }

  .arcade-score-board .arcade-stat-col:nth-child(2) {
    display: none !important;
  }

  .arcade-stat-val {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #F59E0B !important;
  }

  .arcade-hud-right {
    gap: 6px !important;
  }

  .btn-arcade-hud {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
  }

  .btn-arcade-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .arcade-close-text,
  .arcade-close-key {
    display: none !important;
  }

  .arcade-close-x {
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }

  .arcade-bottom-bar {
    display: none !important; /* Touch controls take full screen */
  }

  .arcade-game-over-modal {
    padding: 10px !important;
    align-items: flex-start !important; /* Never clip the top on mobile */
  }

  .game-over-card {
    max-height: 92dvh !important;
    padding: 16px 14px 14px !important;
    margin: auto !important;
    border-radius: 14px !important;
  }

  .game-over-badge {
    font-size: 0.66rem !important;
    padding: 2px 8px !important;
    margin-bottom: 6px !important;
  }

  .game-over-title {
    font-size: 1.15rem !important;
    line-height: 1.22 !important;
    margin: 0 0 4px 0 !important;
  }

  .game-over-rank {
    font-size: 0.78rem !important;
    margin: 0 0 8px 0 !important;
  }

  .game-over-stats-grid {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .game-over-stat {
    padding: 6px 8px !important;
    gap: 2px !important;
  }

  .game-over-stat .stat-num {
    font-size: 1.3rem !important;
  }

  .game-over-stat .stat-lbl {
    font-size: 0.66rem !important;
  }

  .game-over-message-box {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
  }

  .game-over-message-box p {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }

  .game-over-discount-card {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
  }

  .discount-badge-anim {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }

  .discount-val-headline {
    font-size: 1.05rem !important;
  }

  .discount-code-wrap {
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
  }

  .discount-desc {
    font-size: 0.66rem !important;
  }

  .game-over-actions {
    gap: 8px !important;
  }

  .game-over-cta {
    padding: 10px 14px !important;
    font-size: 0.85rem !important;
  }

  .game-over-secondary-btns {
    gap: 8px !important;
  }

  .game-over-secondary-btns button {
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
  }
}


/* ===================================================================
   MÖDEN ARCADE & RACING SYSTEM V2 - GAMES SELECTOR & MODAL STYLES
   =================================================================== */

/* 1. Large Hero Minigames CTA Button (Dark Mode Contrast, No Red Visual Noise) */
.btn-play-now-mega,
[data-theme="light"] .btn-play-now-mega {
    display: block;
    width: 100%;
    background: #11141B !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.btn-play-now-mega:hover {
    transform: translateY(-2px) !important;
    background: #171B24 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

.btn-play-now-mega::before, .play-now-glow {
    display: none !important;
}

.btn-play-now-mega .play-now-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.btn-play-now-mega .play-now-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-play-now-mega .play-now-icon-circle {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F59E0B !important;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.btn-play-now-mega:hover .play-now-icon-circle {
    transform: scale(1.08) rotate(-4deg);
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.btn-play-now-mega .play-now-headline {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.btn-play-now-mega .play-now-desc {
    font-size: 0.88rem !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
    margin-top: 2px;
}

.btn-play-now-mega .play-now-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1E2330 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 8px;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.btn-play-now-mega:hover .play-now-action-btn {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #FFFFFF !important;
    transform: scale(1.04);
}

/* 2. Fix Descriptions in Light & Dark Mode */
.showcase-desc {
    color: var(--text-secondary, #475569) !important;
}

.page-header-desc,
.home-hero-desc {
    color: var(--text-secondary, #475569) !important;
}

[data-theme="light"] .page-header-desc,
[data-theme="light"] .home-hero-desc {
    color: #475569 !important; /* Always dark slate in light mode */
}

/* 3. Games Selector Modal */
.moden-games-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.moden-games-modal-overlay.active {
    display: flex !important;
}

.games-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 8, 12, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.games-modal-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    background: #0E0F14;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 36px 36px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.games-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
}

.games-modal-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #EF4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.games-modal-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0 0 6px;
}

.games-modal-subtitle {
    font-size: 0.95rem;
    color: #94A3B8;
    margin: 0;
    max-width: 600px;
    line-height: 1.5;
}

.games-modal-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 14px;
    color: #94A3B8;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.games-modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #EF4444;
    color: #FFFFFF;
}

.games-modal-close-btn .close-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.games-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 24px;
}

.game-choice-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.game-choice-card:hover {
    transform: translateY(-4px);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

#cardChoiceRacing:hover {
    border-color: rgba(245, 158, 11, 0.45);
}

.game-choice-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 4px 9px;
    border-radius: 6px;
    align-self: flex-start;
    margin-bottom: 16px;
}

.badge-racing {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}

.game-choice-preview {
    height: 110px;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.preview-hero-icon {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 16px rgba(239, 68, 68, 0.6));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-choice-card:hover .preview-hero-icon {
    transform: scale(1.15) translateY(-3px);
}

.racing-preview .preview-hero-icon {
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.6));
}

.preview-tags {
    position: absolute;
    bottom: 8px;
    display: flex;
    gap: 6px;
}

.preview-tags .ptag {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
}

.game-choice-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.game-choice-desc {
    font-size: 0.88rem;
    color: #94A3B8;
    line-height: 1.5;
    margin: 0 0 14px;
}

.game-choice-controls {
    font-size: 0.78rem;
    font-weight: 600;
    color: #CBD5E1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 18px;
}

.btn-launch-game {
    width: 100%;
    padding: 12px 18px;
    font-weight: 800;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-racing-cta {
    background: #F59E0B !important;
    border-color: #D97706 !important;
    color: #000000 !important;
    font-weight: 800 !important;
}

.btn-racing-cta:hover {
    background: #D97706 !important;
    color: #FFFFFF !important;
}

.games-modal-footer-note {
    text-align: center;
    font-size: 0.8rem;
    color: #64748B;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

@media (max-width: 768px) {
    .games-modal-grid {
        grid-template-columns: 1fr;
    }
    .games-modal-dialog {
        padding: 24px 20px;
    }
}




/* ===================================================================
   RETRO-ARCADE NEON THEME & GAMIFIED DISCOUNT REWARD STYLES
   =================================================================== */

/* Pure Black Dialog */
.arcade-dialog-black {
    background: #050608 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(239, 68, 68, 0.12) !important;
    color: #FFFFFF !important;
}

.arcade-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.arcade-neon-chip {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #38BDF8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid #38BDF8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
}

.arcade-neon-discount-pill {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid #F59E0B;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    animation: neonPillPulse 2s infinite ease-in-out;
}

@keyframes neonPillPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.5); }
}

.neon-glow-text {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.neon-close-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.neon-close-btn:hover {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.6) !important;
    color: #FFFFFF !important;
}

/* Card Neon Space */
.card-neon-space {
    background: #090B12 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.12) !important;
    border-radius: 16px !important;
}

.card-neon-space:hover {
    border-color: #EF4444 !important;
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.35) !important;
    transform: translateY(-4px);
}

.btn-space-neon {
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
    border: 1px solid #FF809B !important;
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.45) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    transition: all 0.2s ease !important;
}

.btn-space-neon:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 0 34px rgba(239, 68, 68, 0.75) !important;
}

/* Card Neon Racing */
.card-neon-racing {
    background: #090B12 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.12) !important;
    border-radius: 16px !important;
}

.card-neon-racing:hover {
    border-color: #F59E0B !important;
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.35) !important;
    transform: translateY(-4px);
}

.btn-racing-neon {
    background: linear-gradient(135deg, #F59E0B, #D97706) !important;
    border: 1px solid #FDE68A !important;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.45) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    transition: all 0.2s ease !important;
}

.btn-racing-neon:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 0 34px rgba(245, 158, 11, 0.75) !important;
}

/* Controls Box */
.neon-controls-box {
    background: #06070B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #CBD5E1;
}

.ctrl-icon {
    font-size: 0.95rem;
}

/* Reward Bottom Bar */
.games-modal-reward-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.12);
    border-radius: 12px;
    padding: 12px 18px;
    margin-top: 6px;
}

.reward-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.reward-text {
    font-size: 0.82rem;
    color: #E2E8F0;
    line-height: 1.4;
}

.reward-text strong {
    color: #F59E0B;
}

/* ===================================================================
   GAME OVER DISCOUNT CARD STYLES (Both Games)
   =================================================================== */
.game-over-discount-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 78, 59, 0.25)) !important;
    border: 1px solid #10B981 !important;
    box-shadow: 0 0 26px rgba(16, 185, 129, 0.28) !important;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 16px 0 18px;
    text-align: center;
    animation: discountCardPop 0.3s ease;
}

@keyframes discountCardPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.discount-badge-anim {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #10B981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10B981;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.discount-val-headline {
    font-size: 1.35rem;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
    text-shadow: 0 0 14px rgba(16, 185, 129, 0.5);
}

.discount-code-wrap {
    font-size: 0.85rem;
    color: #94A3B8;
}

.discount-code-wrap strong {
    color: #34D399;
    font-family: monospace;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed rgba(52, 211, 153, 0.5);
    margin-left: 4px;
}

.discount-desc {
    font-size: 0.78rem;
    color: #A7F3D0;
    margin: 6px 0 0;
}

/* Leads Page Discount Banner */
.leads-discount-alert {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 95, 70, 0.25));
    border: 1px solid #10B981;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.leads-discount-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.leads-discount-content {
    font-size: 0.88rem;
    color: #FFFFFF;
    line-height: 1.4;
}

.leads-discount-content strong {
    color: #34D399;
}



/* ===================================================================
   BULLETPROOF FIX: PURE BLACK NEON ARCADE MODALS & LIGHT THEME CONTRAST
   Garantiza que los modales de juego sean 100% negros con acentos nen,
   y que ninguna seccin en modo claro quede con texto blanco sobre blanco.
   =================================================================== */

/* 1. GAME OVER VICTORY MODALS: ALWAYS PURE BLACK & NEON GLOW (BOTH MODES) */
.arcade-game-over-modal {
    background: rgba(3, 4, 8, 0.94) !important;
}

.game-over-card,
.arcade-game-over-black,
[data-theme="light"] .game-over-card,
[data-theme="light"] .arcade-game-over-black,
[data-theme="dark"] .game-over-card,
[data-theme="dark"] .arcade-game-over-black {
    background: #050608 !important; /* Pitch black */
    border: 2px solid #EF4444 !important;
    border-radius: 22px !important;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.98), 0 0 35px rgba(239, 68, 68, 0.45) !important;
    color: #FFFFFF !important;
    padding: 36px 32px !important;
    max-width: 560px !important;
}

#racingGameOverCard,
[data-theme="light"] #racingGameOverCard,
[data-theme="dark"] #racingGameOverCard {
    border-color: #F59E0B !important;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.98), 0 0 35px rgba(245, 158, 11, 0.45) !important;
}

/* Texts inside Game Over Modal */
.game-over-card .game-over-title,
[data-theme="light"] .game-over-card .game-over-title {
    color: #FFFFFF !important;
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.35) !important;
    margin-bottom: 6px !important;
}

.game-over-card .game-over-rank,
[data-theme="light"] .game-over-card .game-over-rank {
    color: #F59E0B !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
    margin-bottom: 20px !important;
}

.game-over-card .game-over-stat,
[data-theme="light"] .game-over-card .game-over-stat {
    background: #0B0E17 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 14px !important;
}

.game-over-card .stat-num,
[data-theme="light"] .game-over-card .stat-num {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
}

.game-over-card .stat-num.text-accent,
[data-theme="light"] .game-over-card .stat-num.text-accent {
    color: #EF4444 !important;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
}

.game-over-card .stat-num.text-green,
[data-theme="light"] .game-over-card .stat-num.text-green {
    color: #10B981 !important;
    text-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
}

.game-over-card .stat-lbl,
[data-theme="light"] .game-over-card .stat-lbl {
    color: #94A3B8 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

.game-over-card .game-over-message-box,
[data-theme="light"] .game-over-card .game-over-message-box {
    background: #090C16 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-bottom: 22px !important;
}

.game-over-card .game-over-message-box p,
[data-theme="light"] .game-over-card .game-over-message-box p {
    color: #E2E8F0 !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
}

.game-over-card .game-over-message-box p strong,
[data-theme="light"] .game-over-card .game-over-message-box p strong {
    color: #FFFFFF !important;
}

.game-over-card .game-over-secondary-btns .btn,
[data-theme="light"] .game-over-card .game-over-secondary-btns .btn {
    background: #0F121C !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #E2E8F0 !important;
}

.game-over-card .game-over-secondary-btns .btn:hover,
[data-theme="light"] .game-over-card .game-over-secondary-btns .btn:hover {
    background: #1C2234 !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* 2. PURE BLACK RETRO ARCADE GAMES SELECTOR MODAL (BOTH THEMES) */
.arcade-dialog-black,
[data-theme="light"] .arcade-dialog-black,
[data-theme="dark"] .arcade-dialog-black {
    background: #050608 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.98), 0 0 35px rgba(239, 68, 68, 0.2) !important;
    color: #FFFFFF !important;
}

.arcade-dialog-black .games-modal-title,
[data-theme="light"] .arcade-dialog-black .games-modal-title {
    color: #FFFFFF !important;
}

.arcade-dialog-black .games-modal-subtitle,
[data-theme="light"] .arcade-dialog-black .games-modal-subtitle {
    color: #94A3B8 !important;
}

.card-neon-space,
[data-theme="light"] .card-neon-space {
    background: #090B12 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #FFFFFF !important;
}

.card-neon-racing,
[data-theme="light"] .card-neon-racing {
    background: #090B12 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #FFFFFF !important;
}

.card-neon-space .game-choice-title,
.card-neon-racing .game-choice-title,
[data-theme="light"] .card-neon-space .game-choice-title,
[data-theme="light"] .card-neon-racing .game-choice-title {
    color: #FFFFFF !important;
}

.card-neon-space .game-choice-desc,
.card-neon-racing .game-choice-desc,
[data-theme="light"] .card-neon-space .game-choice-desc,
[data-theme="light"] .card-neon-racing .game-choice-desc {
    color: #94A3B8 !important;
}

.card-neon-space .neon-controls-box,
.card-neon-racing .neon-controls-box,
[data-theme="light"] .card-neon-space .neon-controls-box,
[data-theme="light"] .card-neon-racing .neon-controls-box {
    background: #06070B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.control-row,
[data-theme="light"] .control-row {
    color: #CBD5E1 !important;
}

/* 3. LIGHT MODE HIGH-CONTRAST GLOBAL FIXES FOR ALL PAGE SECTIONS */
[data-theme="light"] .page-header-title,
[data-theme="light"] .home-hero-title,
[data-theme="light"] .services-header-title,
[data-theme="light"] .methodology-title {
    color: #0F172A !important; /* Rich deep slate */
}

[data-theme="light"] .page-header-desc,
[data-theme="light"] .home-hero-desc,
[data-theme="light"] .services-header-desc,
[data-theme="light"] .methodology-desc {
    color: #475569 !important; /* Slate body text */
}

[data-theme="light"] .home-metric-val {
    color: #0F172A !important;
}

[data-theme="light"] .home-metric-lbl {
    color: #475569 !important;
}

[data-theme="light"] .home-metric-sub {
    color: #64748B !important;
}

[data-theme="light"] .showcase-title {
    color: #FFFFFF !important;
}

[data-theme="light"] .showcase-desc {
    color: #94A3B8 !important;
}

[data-theme="light"] .showcase-top-label {
    color: #CBD5E1 !important;
}

[data-theme="light"] .showcase-year {
    color: #64748B !important;
}

[data-theme="light"] .clean-service-title {
    color: #0F172A !important;
}

[data-theme="light"] .clean-service-desc {
    color: #475569 !important;
}

[data-theme="light"] .clean-includes-title {
    color: #0F172A !important;
}

[data-theme="light"] .clean-includes-list li {
    color: #475569 !important;
}

[data-theme="light"] .comparison-dialog-title,
[data-theme="light"] .comp-col-title {
    color: #0F172A !important;
}

[data-theme="light"] .comparison-dialog-desc,
[data-theme="light"] .comp-col-purpose {
    color: #475569 !important;
}

[data-theme="light"] .spec-value {
    color: #0F172A !important;
}

[data-theme="light"] .spec-label {
    color: #64748B !important;
}



/* ==========================================================================
   MASTER CONTRAST & PURE BLACK RETRO-ARCADE GAME OVER OVERRIDE (V3)
   1. Garantiza que el modal de Game Over sea 100% negro azabache (#030407 / #050608)
      con bordes de neón vibrantes, tipografía nítida e hiper-llamativa en TODOS los temas.
   2. Elimina al 100% cualquier texto blanco sobre fondo blanco en Modo Claro ([data-theme="light"]),
      incluyendo hovers de barra lateral, botones outline, popovers, footer y comparador.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PURE BLACK RETRO-ARCADE GAME OVER MODAL (LIGHT & DARK MODES)
   -------------------------------------------------------------------------- */
.arcade-game-over-modal,
#arcadeGameOverScreen,
#racingGameOverScreen,
[data-theme="light"] .arcade-game-over-modal,
[data-theme="light"] #arcadeGameOverScreen,
[data-theme="light"] #racingGameOverScreen,
[data-theme="dark"] .arcade-game-over-modal,
[data-theme="dark"] #arcadeGameOverScreen,
[data-theme="dark"] #racingGameOverScreen {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(2, 3, 6, 0.96) !important; /* Pitch black backdrop */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 16px !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

.arcade-game-over-modal.active,
#arcadeGameOverScreen.active,
#racingGameOverScreen.active,
#racingGameOverScreen[style*="display: flex"],
[data-theme="light"] .arcade-game-over-modal.active,
[data-theme="light"] #arcadeGameOverScreen.active,
[data-theme="light"] #racingGameOverScreen.active,
[data-theme="dark"] .arcade-game-over-modal.active,
[data-theme="dark"] #arcadeGameOverScreen.active,
[data-theme="dark"] #racingGameOverScreen.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* The Card Container: Pitch Black Obsidian Box */
.game-over-card,
.arcade-game-over-black,
#arcadeGameOverCard,
#racingGameOverCard,
[data-theme="light"] .game-over-card,
[data-theme="light"] .arcade-game-over-black,
[data-theme="light"] #arcadeGameOverCard,
[data-theme="light"] #racingGameOverCard,
[data-theme="dark"] .game-over-card,
[data-theme="dark"] .arcade-game-over-black,
[data-theme="dark"] #arcadeGameOverCard,
[data-theme="dark"] #racingGameOverCard {
    background: #030407 !important; /* Solid pitch black */
    border: 2px solid #EF4444 !important; /* Neon Crimson */
    border-radius: 24px !important;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.98), 0 0 45px rgba(239, 68, 68, 0.45), inset 0 0 25px rgba(239, 68, 68, 0.12) !important;
    color: #FFFFFF !important;
    padding: 38px 32px !important;
    max-width: 560px !important;
    width: 92% !important;
    max-height: 94dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
    animation: arcadeCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes arcadeCardPop {
    from { transform: scale(0.92) translateY(12px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* MÖDEN Racing Distinct Amber Glow */
#racingGameOverCard,
[data-theme="light"] #racingGameOverCard,
[data-theme="dark"] #racingGameOverCard {
    border-color: #F59E0B !important;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.98), 0 0 45px rgba(245, 158, 11, 0.45), inset 0 0 25px rgba(245, 158, 11, 0.12) !important;
}

/* Badges inside Game Over */
.game-over-card .game-over-badge,
[data-theme="light"] .game-over-card .game-over-badge,
[data-theme="dark"] .game-over-card .game-over-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(239, 68, 68, 0.18) !important;
    border: 1.5px solid #EF4444 !important;
    color: #EF4444 !important;
    font-family: var(--font-heading) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    margin-bottom: 14px !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

#racingGameOverCard .game-over-badge,
[data-theme="light"] #racingGameOverCard .game-over-badge,
[data-theme="dark"] #racingGameOverCard .game-over-badge {
    background: rgba(245, 158, 11, 0.18) !important;
    border-color: #F59E0B !important;
    color: #F59E0B !important;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.6) !important;
}

/* Game Over Titles */
.game-over-card .game-over-title,
[data-theme="light"] .game-over-card .game-over-title,
[data-theme="dark"] .game-over-card .game-over-title {
    color: #FFFFFF !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(1.5rem, 3.5vw, 1.95rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
}

/* Game Over Rank Subtitle */
.game-over-card .game-over-rank,
[data-theme="light"] .game-over-card .game-over-rank,
[data-theme="dark"] .game-over-card .game-over-rank {
    color: #F59E0B !important;
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
    margin: 0 0 22px 0 !important;
}

/* Stats Grid */
.game-over-card .game-over-stats-grid,
[data-theme="light"] .game-over-card .game-over-stats-grid,
[data-theme="dark"] .game-over-card .game-over-stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.game-over-card .game-over-stat,
[data-theme="light"] .game-over-card .game-over-stat,
[data-theme="dark"] .game-over-card .game-over-stat {
    background: #090C16 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.game-over-card .stat-num,
[data-theme="light"] .game-over-card .stat-num,
[data-theme="dark"] .game-over-card .stat-num {
    font-family: var(--font-heading) !important;
    font-size: 2.3rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    color: #FFFFFF !important;
}

.game-over-card .stat-num.text-accent,
[data-theme="light"] .game-over-card .stat-num.text-accent,
[data-theme="dark"] .game-over-card .stat-num.text-accent {
    color: #EF4444 !important;
    text-shadow: 0 0 18px rgba(239, 68, 68, 0.6) !important;
}

#racingGameOverCard .stat-num.text-accent,
[data-theme="light"] #racingGameOverCard .stat-num.text-accent,
[data-theme="dark"] #racingGameOverCard .stat-num.text-accent {
    color: #F59E0B !important;
    text-shadow: 0 0 18px rgba(245, 158, 11, 0.6) !important;
}

.game-over-card .stat-num.text-green,
[data-theme="light"] .game-over-card .stat-num.text-green,
[data-theme="dark"] .game-over-card .stat-num.text-green {
    color: #10B981 !important;
    text-shadow: 0 0 18px rgba(16, 185, 129, 0.6) !important;
}

.game-over-card .stat-lbl,
[data-theme="light"] .game-over-card .stat-lbl,
[data-theme="dark"] .game-over-card .stat-lbl {
    color: #94A3B8 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

/* Pitch Black Message Box */
.game-over-card .game-over-message-box,
[data-theme="light"] .game-over-card .game-over-message-box,
[data-theme="dark"] .game-over-card .game-over-message-box {
    background: #080A12 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-bottom: 22px !important;
    text-align: left !important;
}

.game-over-card .game-over-message-box p,
[data-theme="light"] .game-over-card .game-over-message-box p,
[data-theme="dark"] .game-over-card .game-over-message-box p {
    color: #CBD5E1 !important;
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.game-over-card .game-over-message-box p strong,
[data-theme="light"] .game-over-card .game-over-message-box p strong,
[data-theme="dark"] .game-over-card .game-over-message-box p strong {
    color: #FFFFFF !important;
}

/* Unlocked Discount Reward Box */
.game-over-discount-card,
[data-theme="light"] .game-over-discount-card,
[data-theme="dark"] .game-over-discount-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(6, 78, 59, 0.35)) !important;
    border: 1.5px solid #10B981 !important;
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.38) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin: 16px 0 20px !important;
    text-align: center !important;
}

.discount-badge-anim,
[data-theme="light"] .discount-badge-anim,
[data-theme="dark"] .discount-badge-anim {
    display: inline-block !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #10B981 !important;
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid #10B981 !important;
    padding: 3px 12px !important;
    border-radius: 9999px !important;
    margin-bottom: 6px !important;
}

.discount-val-headline,
[data-theme="light"] .discount-val-headline,
[data-theme="dark"] .discount-val-headline {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    text-shadow: 0 0 16px rgba(16, 185, 129, 0.7) !important;
    margin-bottom: 4px !important;
}

.discount-code-wrap,
[data-theme="light"] .discount-code-wrap,
[data-theme="dark"] .discount-code-wrap {
    font-size: 0.95rem !important;
    color: #94A3B8 !important;
    margin-bottom: 4px !important;
}

.discount-code-wrap strong,
[data-theme="light"] .discount-code-wrap strong,
[data-theme="dark"] .discount-code-wrap strong {
    color: #34D399 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    border: 1px dashed rgba(52, 211, 153, 0.4) !important;
}

.discount-desc,
[data-theme="light"] .discount-desc,
[data-theme="dark"] .discount-desc {
    font-size: 0.82rem !important;
    color: #CBD5E1 !important;
    margin: 0 !important;
}

/* Glowing Neon CTA Button */
.game-over-card .game-over-cta,
[data-theme="light"] .game-over-card .game-over-cta,
[data-theme="dark"] .game-over-card .game-over-cta {
    width: 100% !important;
    justify-content: center !important;
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    padding: 15px 24px !important;
    border-radius: 12px !important;
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5) !important;
    transition: all 0.2s ease !important;
}

.game-over-card .game-over-cta:hover,
[data-theme="light"] .game-over-card .game-over-cta:hover,
[data-theme="dark"] .game-over-card .game-over-cta:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    box-shadow: 0 0 45px rgba(239, 68, 68, 0.75) !important;
    transform: translateY(-2px) !important;
    color: #FFFFFF !important;
}

#racingGameOverCard .game-over-cta,
[data-theme="light"] #racingGameOverCard .game-over-cta,
[data-theme="dark"] #racingGameOverCard .game-over-cta {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #000000 !important;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5) !important;
    font-weight: 900 !important;
}

#racingGameOverCard .game-over-cta:hover,
[data-theme="light"] #racingGameOverCard .game-over-cta:hover,
[data-theme="dark"] #racingGameOverCard .game-over-cta:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.75) !important;
    transform: translateY(-2px) !important;
    color: #000000 !important;
}

/* Secondary Action Buttons */
.game-over-card .game-over-secondary-btns,
[data-theme="light"] .game-over-card .game-over-secondary-btns,
[data-theme="dark"] .game-over-card .game-over-secondary-btns {
    display: flex !important;
    gap: 12px !important;
    margin-top: 14px !important;
}

.game-over-card .game-over-secondary-btns .btn,
[data-theme="light"] .game-over-card .game-over-secondary-btns .btn,
[data-theme="dark"] .game-over-card .game-over-secondary-btns .btn {
    flex: 1 !important;
    justify-content: center !important;
    background: #0E111C !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #E2E8F0 !important;
    font-weight: 700 !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.game-over-card .game-over-secondary-btns .btn:hover,
[data-theme="light"] .game-over-card .game-over-secondary-btns .btn:hover,
[data-theme="dark"] .game-over-card .game-over-secondary-btns .btn:hover {
    background: #1C2337 !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

@media (max-width: 768px) {
    .arcade-game-over-modal,
    #arcadeGameOverScreen,
    #racingGameOverScreen,
    #tetrisGameOverModal,
    [data-theme="light"] .arcade-game-over-modal,
    [data-theme="light"] #arcadeGameOverScreen,
    [data-theme="light"] #racingGameOverScreen,
    [data-theme="dark"] .arcade-game-over-modal,
    [data-theme="dark"] #arcadeGameOverScreen,
    [data-theme="dark"] #racingGameOverScreen {
        padding: 10px !important;
        align-items: flex-start !important; /* Never cut off the top header on mobile */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .game-over-card,
    .arcade-game-over-black,
    #arcadeGameOverCard,
    #racingGameOverCard,
    #tetrisGameOverCard,
    [data-theme="light"] .game-over-card,
    [data-theme="light"] #arcadeGameOverCard,
    [data-theme="light"] #racingGameOverCard,
    [data-theme="dark"] .game-over-card,
    [data-theme="dark"] #arcadeGameOverCard,
    [data-theme="dark"] #racingGameOverCard {
        max-height: 94dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 14px 14px !important;
        margin: auto !important;
        border-radius: 14px !important;
        width: 100% !important;
    }

    .game-over-card .game-over-badge,
    #racingGameOverCard .game-over-badge {
        font-size: 0.68rem !important;
        padding: 3px 10px !important;
        margin-bottom: 6px !important;
    }

    .game-over-card .game-over-title,
    #racingGameOverCard .game-over-title {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
    }

    .game-over-card .game-over-rank,
    #racingGameOverCard .game-over-rank {
        font-size: 0.78rem !important;
        margin-bottom: 8px !important;
    }

    .game-over-card .game-over-stats-grid,
    #racingGameOverCard .game-over-stats-grid {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .game-over-card .game-over-stat,
    #racingGameOverCard .game-over-stat {
        padding: 6px 8px !important;
    }

    .game-over-card .stat-num,
    #racingGameOverCard .stat-num {
        font-size: 1.25rem !important;
    }

    .game-over-card .stat-lbl,
    #racingGameOverCard .stat-lbl {
        font-size: 0.65rem !important;
    }

    .game-over-card .game-over-message-box,
    #racingGameOverCard .game-over-message-box {
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
    }

    .game-over-card .game-over-message-box p,
    #racingGameOverCard .game-over-message-box p {
        font-size: 0.75rem !important;
        line-height: 1.35 !important;
    }

    .game-over-discount-card,
    #racingGameOverCard .game-over-discount-card {
        padding: 8px 10px !important;
        margin: 8px 0 10px !important;
    }

    .discount-badge-anim {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
        margin-bottom: 4px !important;
    }

    .discount-val-headline {
        font-size: 1.15rem !important;
        margin-bottom: 2px !important;
    }

    .discount-code-wrap {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }

    .discount-desc {
        font-size: 0.72rem !important;
    }

    .game-over-card .game-over-cta,
    #racingGameOverCard .game-over-cta {
        font-size: 0.95rem !important;
        padding: 12px 18px !important;
    }

    .game-over-card .game-over-secondary-btns,
    #racingGameOverCard .game-over-secondary-btns {
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .game-over-card .game-over-secondary-btns .btn,
    #racingGameOverCard .game-over-secondary-btns .btn {
        font-size: 0.8rem !important;
        padding: 9px 12px !important;
    }
}


/* --------------------------------------------------------------------------
   2. LIGHT THEME GLOBAL CONTRAST FIXES (ELIMINATES ALL WHITE-ON-WHITE)
   -------------------------------------------------------------------------- */

/* Sidebar in Light Mode */
[data-theme="light"] .sidebar-link {
    color: #475569 !important;
    background: transparent !important;
}

[data-theme="light"] .sidebar-link .sidebar-icon {
    color: #64748B !important;
}

[data-theme="light"] .sidebar-link:hover {
    color: #0F172A !important;
    background: #F1F5F9 !important;
}

[data-theme="light"] .sidebar-link:hover .link-text {
    color: #0F172A !important;
}

[data-theme="light"] .sidebar-link:hover .sidebar-icon {
    color: #DC2626 !important;
}

/* Active link stays crisp red with white text */
[data-theme="light"] .sidebar-link.active {
    background: #DC2626 !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .sidebar-link.active .link-text,
[data-theme="light"] .sidebar-link.active .sidebar-icon,
[data-theme="light"] .sidebar-link.active svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

/* Sidebar Toggle & Social Buttons in Light Mode */
[data-theme="light"] .sidebar-collapse-toggle {
    color: #475569 !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .sidebar-collapse-toggle:hover {
    color: #0F172A !important;
    background: #E2E8F0 !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
}

[data-theme="light"] .social-btn {
    color: #64748B !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .social-btn:hover {
    color: #0F172A !important;
    background: #E2E8F0 !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
}

/* Sidebar Compare Button */
[data-theme="light"] .btn-sidebar-compare {
    background: #F1F5F9 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: #334155 !important;
}

[data-theme="light"] .btn-sidebar-compare:hover {
    background: #E2E8F0 !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
    color: #0F172A !important;
}

/* Button Outline across entire website in Light Mode */
[data-theme="light"] .btn-outline {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    color: #1E293B !important;
}

[data-theme="light"] .btn-outline:hover {
    background: #F1F5F9 !important;
    border-color: rgba(0, 0, 0, 0.35) !important;
    color: #0F172A !important;
}

[data-theme="light"] .btn-outline svg {
    color: inherit !important;
    stroke: currentColor !important;
}

/* Footer Links in Light Mode */
[data-theme="light"] .footer-links a {
    color: #475569 !important;
}

[data-theme="light"] .footer-links a:hover {
    color: #DC2626 !important;
}

/* Popovers in Light Mode */
[data-theme="light"] .popover-title,
[data-theme="light"] .popover-mkteam .popover-title {
    color: #0F172A !important;
}

[data-theme="light"] .popover-desc {
    color: #475569 !important;
}

[data-theme="light"] .popover-desc strong {
    color: #0F172A !important;
}

/* Leads Gamification Unlocked Banner in Light Mode */
[data-theme="light"] .leads-discount-alert {
    background: #ECFDF5 !important;
    border: 1.5px solid #10B981 !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.15) !important;
}

[data-theme="light"] .leads-discount-content {
    color: #064E3B !important;
}

[data-theme="light"] .leads-discount-content strong {
    color: #047857 !important;
}

[data-theme="light"] .leads-discount-content #leadDiscountCodeVal {
    background: #D1FAE5 !important;
    color: #065F46 !important;
    border: 1px dashed #10B981 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

/* Showcase Header Arcade Chip in Light Mode */
[data-theme="light"] .showcase-arcade-chip {
    background: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    color: #DC2626 !important;
}

[data-theme="light"] .showcase-arcade-chip:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: #DC2626 !important;
    color: #B91C1C !important;
}

[data-theme="light"] .showcase-arcade-chip:hover strong {
    color: #B91C1C !important;
}

/* Methodology & Guarantee Cards in Light Mode */
[data-theme="light"] .phase-heading,
[data-theme="light"] .deliverables-title,
[data-theme="light"] .guarantee-title,
[data-theme="light"] .methodology-cta-title {
    color: #0F172A !important;
}

[data-theme="light"] .phase-summary,
[data-theme="light"] .deliverables-list li,
[data-theme="light"] .guarantee-desc,
[data-theme="light"] .methodology-cta-desc {
    color: #475569 !important;
}

/* Services Page in Light Mode */
[data-theme="light"] .clean-service-title,
[data-theme="light"] .clean-includes-title,
[data-theme="light"] .clean-step-title {
    color: #0F172A !important;
}

[data-theme="light"] .clean-service-subtitle,
[data-theme="light"] .clean-service-desc,
[data-theme="light"] .clean-includes-list li,
[data-theme="light"] .clean-step-desc {
    color: #475569 !important;
}

/* Wizard Options in Light Mode */
[data-theme="light"] .step-pane-title,
[data-theme="light"] .option-title {
    color: #0F172A !important;
}

[data-theme="light"] .step-pane-subtitle,
[data-theme="light"] .option-desc {
    color: #475569 !important;
}

/* ===================================================
   50% TITAN LEGENDARY DISCOUNT & BADGE STYLES
=================================================== */
.leads-discount-titan {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(220, 38, 38, 0.22) 100%) !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 0 28px rgba(245, 158, 11, 0.35) !important;
}
.leads-discount-titan .leads-discount-content {
  color: #FEF3C7 !important;
}
.leads-discount-titan .leads-discount-content strong {
  color: #FBBF24 !important;
}
[data-theme="light"] .leads-discount-titan {
  background: linear-gradient(135deg, #FEF3C7 0%, #FEE2E2 100%) !important;
  border-color: #D97706 !important;
}
[data-theme="light"] .leads-discount-titan .leads-discount-content {
  color: #78350F !important;
}
[data-theme="light"] .leads-discount-titan .leads-discount-content strong {
  color: #B45309 !important;
}

/* ===================================================
   GAMES SELECTOR MODAL: BEAST MODE & 4-TIER REWARDS
=================================================== */
.games-modal-dialog {
    max-height: 92vh !important;
    overflow-y: auto !important;
}

/* Beast Mode Highlight Card (Modo Bestia / Nivel 5) */
.games-beast-mode-card {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.28) 0%, rgba(245, 158, 11, 0.22) 50%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 2px solid #F59E0B !important;
    border-radius: 14px !important;
    padding: 16px 22px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.3), inset 0 0 20px rgba(220, 38, 38, 0.18) !important;
    position: relative !important;
    overflow: hidden !important;
}

.games-beast-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: beastShimmer 4s infinite linear;
    pointer-events: none;
}

@keyframes beastShimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.beast-badge-capsule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #DC2626 !important;
    color: #FFFFFF !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5) !important;
    text-transform: uppercase !important;
}

.beast-title {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #FBBF24 !important;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.6) !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: 0.02em !important;
}

.beast-desc {
    font-size: 0.84rem !important;
    color: #F1F5F9 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.beast-desc strong {
    color: #FFFFFF !important;
}

.beast-desc code {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #FCD34D !important;
    padding: 1px 7px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
}

/* 4-Tier Rewards Grid */
.games-reward-tiers-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 768px) {
    .games-reward-tiers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.reward-tier-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.reward-tier-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.reward-tier-header {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.reward-tier-score {
    font-size: 0.76rem !important;
    color: #CBD5E1 !important;
    font-weight: 600 !important;
}

.reward-tier-pct {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1.1 !important;
}

.reward-tier-coupon {
    font-size: 0.68rem !important;
    color: #38BDF8 !important;
    font-family: monospace !important;
    font-weight: 700 !important;
}

/* Tier 4: Beast Mode Tier Card */
.reward-tier-card.tier-titan {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(245, 158, 11, 0.3) 100%) !important;
    border: 1.5px solid #F59E0B !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.25) !important;
}

.reward-tier-card.tier-titan .reward-tier-header {
    color: #F87171 !important;
    font-weight: 900 !important;
}

.reward-tier-card.tier-titan .reward-tier-pct {
    color: #FBBF24 !important;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.7) !important;
}

.reward-tier-card.tier-titan .reward-tier-coupon {
    color: #FDE047 !important;
}


/* ==========================================================================
   ULTRA-COMPACT 100VH GAMES SELECTOR & IN-GAME BRIEFING POPUPS
   Strictly sized to never exceed viewport height (100vh) without scrolling.
   ========================================================================== */

/* 80vh Clean Modal Constraint */
.moden-games-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(3, 7, 18, 0.88) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 16px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.moden-games-modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.games-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    cursor: pointer !important;
}

.games-dialog-80vh {
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
    max-height: 82vh !important;
    min-height: unset !important;
    max-width: min(95vw, 1140px) !important;
    width: 100% !important;
    margin: auto !important;
    padding: 18px 22px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 10, 15, 0.98) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 45px rgba(239, 68, 68, 0.12) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    animation: modalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Header Limpio */
.games-modal-header-clean {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
}

.arcade-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 3px !important;
}

.arcade-neon-chip {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
    color: #FCA5A5 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    letter-spacing: 0.04em !important;
}

.arcade-neon-discount-pill {
    background: rgba(245, 158, 11, 0.16) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
    color: #FDE047 !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    letter-spacing: 0.03em !important;
}

.games-modal-header-clean .games-modal-title {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 2px 0 1px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}

.games-modal-header-clean .games-modal-subtitle {
    font-size: 0.78rem !important;
    color: #94A3B8 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.neon-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #CBD5E1 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.neon-close-btn:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #FCA5A5 !important;
}

.neon-close-btn .close-icon {
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Escala de Recompensas Compacta */
.arcade-reward-scale-compact {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    margin: 6px 0 10px !important;
    flex-shrink: 0 !important;
}

.arc-scale-tag {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}

.arc-scale-steps {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.arc-step {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.7rem !important;
    color: #CBD5E1 !important;
}

.arc-score {
    font-family: monospace !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
}

.arc-badge {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    background: rgba(59, 130, 246, 0.14) !important;
    color: #93C5FD !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.arc-step-titan .arc-score {
    color: #FDE047 !important;
}

.arc-badge-titan {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(245, 158, 11, 0.3)) !important;
    color: #FDE047 !important;
    border: 1px solid #F59E0B !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
    font-weight: 900 !important;
}

/* Grid de Juegos Limpio y Espacioso */
.games-modal-grid-clean {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
}

.game-clean-card {
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, box-shadow 0.24s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.game-clean-card:hover {
    transform: translateY(-3px) !important;
}

.card-space-theme:hover {
    border-color: rgba(239, 68, 68, 0.55) !important;
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.18), inset 0 0 15px rgba(239, 68, 68, 0.04) !important;
}

.card-racing-theme:hover {
    border-color: rgba(245, 158, 11, 0.55) !important;
    box-shadow: 0 12px 35px rgba(245, 158, 11, 0.18), inset 0 0 15px rgba(245, 158, 11, 0.04) !important;
}

.card-tetris-theme:hover {
    border-color: rgba(0, 240, 255, 0.55) !important;
    box-shadow: 0 12px 35px rgba(0, 240, 255, 0.18), inset 0 0 15px rgba(0, 240, 255, 0.04) !important;
}

.gcc-icon-wrap.icon-tetris {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.25) !important;
}

.gcc-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.gcc-icon-wrap {
    font-size: 2rem !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.game-clean-card:hover .gcc-icon-wrap {
    transform: scale(1.1) rotate(2deg) !important;
}

.gcc-category {
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
}

.gcc-name {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 1px 0 0 !important;
    line-height: 1.2 !important;
}

.gcc-description {
    font-size: 0.78rem !important;
    color: #CBD5E1 !important;
    line-height: 1.38 !important;
    margin: 0 0 8px !important;
}

/* ==========================================================================
   DYNAMIC GAMEPLAY PREVIEW BOX (3-5s Mini Screen Preview)
   ========================================================================== */
.gcc-preview-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
    background: #04060B !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

.gcc-preview-box::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.3) 3px,
        rgba(0, 0, 0, 0.3) 4px
    ) !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.gcc-preview-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.gcc-preview-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
}

.gcc-preview-top-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    align-self: flex-start !important;
    font-family: monospace !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    color: #FCA5A5 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    letter-spacing: 0.04em !important;
}

.gcc-preview-top-badge.badge-racing {
    color: #FDE047 !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

.gcc-rec-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #EF4444 !important;
    display: inline-block !important;
    animation: blinkRec 1s infinite !important;
}

.gcc-rec-dot.dot-racing {
    background: #F59E0B !important;
}

@keyframes blinkRec {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.85); }
}

.gcc-preview-hud-tag {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    font-family: monospace !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.gcc-preview-hud-tag.tag-racing {
    color: #FBBF24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

.gcc-preview-center-hint {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: rgba(3, 7, 18, 0.55) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.game-clean-card:hover .gcc-preview-center-hint {
    opacity: 1 !important;
}

.gcc-hint-icon {
    font-size: 0.75rem !important;
    color: #EF4444 !important;
}

.card-racing-theme .gcc-hint-icon {
    color: #F59E0B !important;
}

.gcc-features-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
}

.gcc-pill {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.gcc-footer {
    margin-top: 2px !important;
}

.btn-arcade-action {
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    letter-spacing: 0.03em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.btn-action-space {
    background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #F87171 !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
}

.btn-action-space:hover {
    background: linear-gradient(135deg, #B91C1C 0%, #DC2626 100%) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6) !important;
    transform: translateY(-1px) !important;
}

.btn-action-racing {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%) !important;
    color: #0F172A !important;
    font-weight: 900 !important;
    border: 1px solid #FBBF24 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}

.btn-action-racing:hover {
    background: linear-gradient(135deg, #B45309 0%, #D97706 100%) !important;
    color: #000000 !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
    transform: translateY(-1px) !important;
}

.btn-action-tetris {
    background: linear-gradient(135deg, #0891B2 0%, #00F0FF 100%) !important;
    color: #04060B !important;
    font-weight: 900 !important;
    border: 1px solid #67E8F9 !important;
    box-shadow: 0 4px 14px rgba(0, 240, 255, 0.35) !important;
}

.btn-action-tetris:hover {
    background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%) !important;
    color: #000000 !important;
    box-shadow: 0 6px 20px rgba(0, 240, 255, 0.55) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 991px) {
    .games-dialog-80vh {
        height: auto !important;
        max-height: 90vh !important;
        padding: 18px 16px !important;
        overflow-y: auto !important;
    }
    .games-modal-grid-clean {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

@media (max-width: 768px) {
    .games-dialog-80vh {
        height: auto !important;
        max-height: 94dvh !important;
        padding: 14px 12px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
    }
    .games-modal-header-clean {
        position: relative !important;
        padding-right: 36px !important;
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }
    .games-modal-close-btn.neon-close-btn {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        min-width: unset !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
    }
    .games-modal-close-btn .close-label,
    .games-modal-close-btn .close-key {
        display: none !important;
    }
    .games-modal-close-btn .close-icon {
        font-size: 1.3rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    .arcade-title-row {
        gap: 6px !important;
        margin-bottom: 4px !important;
    }
    .arcade-neon-chip {
        font-size: 0.68rem !important;
        padding: 2px 7px !important;
    }
    .arcade-neon-discount-pill {
        font-size: 0.65rem !important;
        padding: 2px 7px !important;
    }
    .games-modal-title {
        font-size: 1.08rem !important;
        line-height: 1.2 !important;
        margin: 2px 0 4px 0 !important;
    }
    .games-modal-subtitle {
        font-size: 0.74rem !important;
        line-height: 1.3 !important;
        color: #94A3B8 !important;
        margin-bottom: 0 !important;
    }
    .arcade-reward-scale-compact {
        padding: 4px 8px !important;
        margin: 6px 0 8px !important;
        gap: 4px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }
    .arc-scale-tag {
        display: none !important;
    }
    .arc-scale-steps {
        display: flex !important;
        justify-content: space-between !important;
        gap: 4px !important;
        width: 100% !important;
    }
    .arc-step {
        flex: 1 !important;
        justify-content: center !important;
        padding: 2px 4px !important;
        font-size: 0.62rem !important;
        border-radius: 4px !important;
    }
    .arc-step .arc-score {
        display: none !important;
    }
    .games-modal-grid-clean {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .game-clean-card {
        padding: 8px 10px !important;
        border-radius: 12px !important;
        display: grid !important;
        grid-template-columns: 72px 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 10px !important;
        row-gap: 4px !important;
        align-items: center !important;
    }
    .gcc-header {
        grid-column: 2 / 3 !important;
        margin-bottom: 0 !important;
        gap: 6px !important;
    }
    .gcc-icon-wrap {
        display: none !important;
    }
    .gcc-name {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    .gcc-category {
        font-size: 0.6rem !important;
    }
    .gcc-preview-box {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
        width: 72px !important;
        height: 72px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }
    .gcc-preview-top-badge,
    .gcc-preview-hud-tag,
    .gcc-preview-center-hint {
        display: none !important;
    }
    .gcc-description {
        display: none !important;
    }
    .gcc-features-row {
        display: none !important;
    }
    .gcc-footer {
        grid-column: 2 / 3 !important;
        margin-top: 0 !important;
    }
    .btn-arcade-action {
        padding: 6px 10px !important;
        font-size: 0.76rem !important;
        height: 32px !important;
        border-radius: 7px !important;
    }
}

/* ==========================================================================
   IN-GAME EXPLANATORY BRIEFING OVERLAY (CÓMO JUGAR POPUPS)
   ========================================================================== */

.arcade-briefing-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 60 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(5, 7, 12, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.arcade-briefing-overlay.active {
    display: flex !important;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.briefing-card {
    background: #090A0F !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    max-width: 680px !important;
    width: 100% !important;
    padding: 28px 32px 24px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85) !important;
    color: #FFFFFF !important;
    position: relative !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .arcade-briefing-overlay {
        padding: 10px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .briefing-card {
        max-height: 92dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 14px 12px !important;
        border-radius: 14px !important;
        margin: auto !important;
    }

    .briefing-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .briefing-title {
        font-size: 1.12rem !important;
        line-height: 1.25 !important;
        margin: 2px 0 4px !important;
    }

    .briefing-desc {
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .briefing-controls-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .briefing-ctrl-keyboard {
        display: none !important;
    }

    .briefing-ctrl-card {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .briefing-ctrl-icon {
        font-size: 1.2rem !important;
    }

    .briefing-mission-target {
        padding: 8px 10px !important;
        margin-bottom: 12px !important;
        gap: 8px !important;
    }

    .mission-target-icon {
        font-size: 1.2rem !important;
    }

    .mission-target-info {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    .briefing-actions {
        flex-direction: column !important;
        gap: 8px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #090A0F !important;
        padding-top: 6px !important;
        margin-top: auto !important;
    }

    .btn-briefing-start {
        width: 100% !important;
        padding: 11px 16px !important;
        font-size: 0.88rem !important;
    }

    .btn-briefing-start small,
    .desktop-only-hint {
        display: none !important;
    }

    .btn-briefing-back {
        width: 100% !important;
        padding: 9px 12px !important;
        font-size: 0.78rem !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

.arcade-briefing-neon {
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.22), inset 0 0 25px rgba(239, 68, 68, 0.06) !important;
}

.racing-briefing-neon {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.22), inset 0 0 25px rgba(245, 158, 11, 0.06) !important;
}

.briefing-header {
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 14px !important;
}

.briefing-badge-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap !important;
}

.briefing-chip-neon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.06em !important;
}

.briefing-chip-neon.chip-racing {
    color: #F59E0B !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.briefing-title {
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    color: #FFFFFF !important;
    margin: 0 0 6px !important;
}

.briefing-desc {
    font-size: 0.85rem !important;
    color: #94A3B8 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.briefing-controls-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.briefing-ctrl-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.briefing-ctrl-icon {
    font-size: 1.6rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    padding-top: 2px !important;
}

.briefing-ctrl-content h4 {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 6px !important;
    letter-spacing: 0.02em !important;
}

.ctrl-detail-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
}

.briefing-key {
    display: inline-block !important;
    font-family: monospace !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5) !important;
}

.briefing-key-wide {
    padding: 2px 10px !important;
}

.ctrl-label {
    font-size: 0.74rem !important;
    color: #CBD5E1 !important;
    font-weight: 600 !important;
}

/* Mission Target Box */
.briefing-mission-target {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(245, 158, 11, 0.18) 100%) !important;
    border: 1.5px solid #F59E0B !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.briefing-mission-target.target-racing {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(220, 38, 38, 0.18) 100%) !important;
}

.mission-target-icon {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.mission-target-info {
    font-size: 0.8rem !important;
    color: #F8FAFC !important;
    line-height: 1.35 !important;
}

.mission-target-info strong {
    color: #FBBF24 !important;
}

.mission-target-info code {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #FDE047 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    border: 1px solid #F59E0B !important;
}

/* Action Buttons */
.briefing-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.btn-briefing-start {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
}

.btn-briefing-start.btn-racing-neon {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
}

.btn-briefing-start small {
    font-size: 0.7rem !important;
    opacity: 0.85 !important;
    font-weight: 700 !important;
}

.btn-briefing-back {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #94A3B8 !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.btn-briefing-back:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
}


/* ==========================================================================
   SIDEBAR COLLAPSED BUTTONS & SLEEK UNIFIED TOOLTIPS
   Fixes: Buttons stacked vertically (not side-by-side) & Premium custom tooltips
   ========================================================================== */

/* 1. Sidebar CTA Buttons in Collapsed Mode */
.sidebar-collapsed .sidebar-cta {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  margin-top: auto !important;
}

/* Primary CTA Button: Cotizar Proyecto */
.sidebar-collapsed .sidebar-cta a.btn-sidebar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
}

.sidebar-collapsed .sidebar-cta a.btn-sidebar:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.6) !important;
}

/* Secondary CTA Button: Comparar Soluciones */
.sidebar-collapsed .sidebar-cta .btn-sidebar-compare {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}

.sidebar-collapsed .sidebar-cta .btn-sidebar-compare:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  transform: scale(1.06) !important;
}

.sidebar-collapsed .sidebar-cta .btn-sidebar-compare svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Light Theme overrides for Collapsed Buttons */
[data-theme="light"] .sidebar-collapsed .sidebar-cta .btn-sidebar-compare {
  background: #F1F5F9 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #334155 !important;
}

[data-theme="light"] .sidebar-collapsed .sidebar-cta .btn-sidebar-compare:hover {
  background: #E2E8F0 !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: #0F172A !important;
}

/* 2. Custom Sleek Tooltip for Sidebar Collapse Button (Expanded State) */
@media (min-width: 1025px) {
  html:not(.sidebar-collapsed) .sidebar-collapse-toggle[data-tooltip] {
    position: relative !important;
  }

  html:not(.sidebar-collapsed) .sidebar-collapse-toggle[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    transform: translateY(-4px);
    background: #14161F;
    color: #FFFFFF;
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999999;
  }

  html:not(.sidebar-collapsed) .sidebar-collapse-toggle[data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    right: 11px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #14161F transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s;
    z-index: 1000000;
  }

  html:not(.sidebar-collapsed) .sidebar-collapse-toggle[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  html:not(.sidebar-collapsed) .sidebar-collapse-toggle[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

/* 3. Custom Sleek Tooltip for Sidebar Collapse Button (Collapsed State) */
.sidebar-collapsed .sidebar-collapse-toggle[data-tooltip] {
  position: relative !important;
}

.sidebar-collapsed .sidebar-collapse-toggle[data-tooltip]::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  left: calc(100% + 14px) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) translateX(-6px) !important;
  background: #14161F !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 999999 !important;
}

.sidebar-collapsed .sidebar-collapse-toggle[data-tooltip]::before {
  content: '' !important;
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  border-width: 5px 6px 5px 0 !important;
  border-style: solid !important;
  border-color: transparent #14161F transparent transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s !important;
  z-index: 1000000 !important;
}

.sidebar-collapsed .sidebar-collapse-toggle[data-tooltip]:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}

.sidebar-collapsed .sidebar-collapse-toggle[data-tooltip]:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   INTERACTIVE LEGAL MODAL (Términos, Privacidad & Cookies)
   ========================================================================== */
.legal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.legal-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.legal-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 16px);
  background: #0E121D;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.8);
  animation: modalFadeScale 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden;
  z-index: 2;
}

[data-theme="light"] .legal-modal-dialog {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 30px 70px -15px rgba(15, 23, 42, 0.2) !important;
}

.legal-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

[data-theme="light"] .legal-modal-close {
  background: #F1F5F9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #64748B !important;
}

.legal-modal-close:hover {
  background: rgba(239, 68, 68, 0.18) !important;
  color: var(--accent-red, #EF4444) !important;
  border-color: var(--accent-red, #EF4444) !important;
  transform: rotate(90deg);
}

.legal-modal-header {
  padding: 28px 32px 18px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

[data-theme="light"] .legal-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.legal-badge-wrap {
  margin-bottom: 8px;
}

.legal-modal-title {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-main, #FFFFFF);
  margin: 6px 0 6px 0;
  letter-spacing: -0.01em;
}

[data-theme="light"] .legal-modal-title {
  color: #0F172A !important;
}

.legal-modal-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary, #94A3B8);
  line-height: 1.5;
  margin: 0 0 18px 0;
  max-width: 90%;
}

/* Tabs Bar */
.legal-tabs-nav {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}

.legal-tabs-nav::-webkit-scrollbar {
  display: none;
}

[data-theme="light"] .legal-tabs-nav {
  background: #F1F5F9;
  border-color: rgba(0, 0, 0, 0.08);
}

.legal-tab-btn {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary, #94A3B8);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.legal-tab-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.legal-tab-btn:hover {
  color: var(--text-main, #FFFFFF);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .legal-tab-btn:hover {
  color: #0F172A;
  background: rgba(0, 0, 0, 0.05);
}

.legal-tab-btn.active {
  background: var(--card-bg, #161B26);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .legal-tab-btn.active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.legal-tab-btn.active svg {
  color: var(--accent-red, #EF4444);
  transform: scale(1.1);
}

/* Modal Body & Panels */
.legal-modal-body {
  padding: 26px 32px;
  overflow-y: auto;
  flex: 1 1 auto;
  scroll-behavior: smooth;
}

.legal-panel {
  display: none;
}

.legal-panel.active {
  display: block;
  animation: legalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes legalFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legal-panel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .legal-panel-header {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.legal-panel-badge {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(220, 38, 38, 0.12);
  color: var(--accent-red, #EF4444);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.legal-panel-header h4 {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main, #FFFFFF);
  margin: 4px 0 0 0;
}

[data-theme="light"] .legal-panel-header h4 {
  color: #0F172A !important;
}

.legal-updated-date {
  font-size: 0.82rem;
  color: var(--text-muted, #64748B);
}

.legal-content-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legal-section-block h5 {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main, #FFFFFF);
  margin: 0 0 8px 0;
}

[data-theme="light"] .legal-section-block h5 {
  color: #0F172A !important;
}

.legal-section-block p {
  font-size: 0.92rem;
  color: var(--text-secondary, #94A3B8);
  line-height: 1.7;
  margin: 0;
}

[data-theme="light"] .legal-section-block p {
  color: #475569 !important;
}

.legal-bullet-list {
  list-style: disc;
  padding-left: 22px;
  margin: 8px 0 0 0;
  color: var(--text-secondary, #94A3B8);
  font-size: 0.92rem;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-theme="light"] .legal-bullet-list {
  color: #475569 !important;
}

.legal-bullet-list strong {
  color: var(--text-main, #FFFFFF);
}

[data-theme="light"] .legal-bullet-list strong {
  color: #0F172A !important;
}

.legal-alert-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid var(--accent-red, #EF4444);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-secondary, #94A3B8);
  line-height: 1.6;
}

[data-theme="light"] .legal-alert-note {
  background: rgba(220, 38, 38, 0.06);
  color: #334155 !important;
}

.legal-alert-note svg {
  color: var(--accent-red, #EF4444);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Cross Navigation Between Legal Tabs */
.legal-cross-nav {
  margin-top: 32px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

[data-theme="light"] .legal-cross-nav {
  background: #F8FAFC;
  border-color: rgba(0, 0, 0, 0.08);
}

.legal-cross-nav-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #64748B);
}

.legal-cross-nav-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.legal-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.legal-switch-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent-red, #EF4444);
  color: var(--accent-red, #EF4444);
}

/* Modal Footer */
.legal-modal-footer {
  padding: 18px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

[data-theme="light"] .legal-modal-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
  background: #F8FAFC;
}

.legal-footer-contact {
  font-size: 0.85rem;
  color: var(--text-muted, #64748B);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.legal-footer-email {
  color: var(--accent-red, #EF4444);
  font-weight: 600;
  text-decoration: none;
}

.legal-footer-email:hover {
  text-decoration: underline;
}

/* Mobile Responsive */
@media (max-width: 680px) {
  .legal-modal-overlay {
    padding: 12px;
  }
  .legal-modal-dialog {
    max-height: 94vh;
    border-radius: 12px;
  }
  .legal-modal-header {
    padding: 20px 20px 14px 20px;
  }
  .legal-modal-title {
    font-size: 1.35rem;
  }
  .legal-tab-btn {
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.8rem;
  }
  .legal-tab-btn span {
    font-size: 0.78rem;
  }
  .legal-modal-body {
    padding: 20px;
  }
  .legal-modal-footer {
    padding: 14px 20px;
    flex-direction: column;
    align-items: stretch;
  }
  .legal-cross-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .legal-cross-nav-btns {
    flex-direction: column;
  }
  .legal-switch-btn {
    justify-content: center;
  }
  #btnAcceptCloseLegal {
    width: 100%;
  }
}

/* ==========================================================================
   SIDEBAR CTA BUTTONS FIX: ZERO OVERLAP & CLEAN SEPARATION
   ========================================================================== */
.sidebar-cta {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding: 16px 0 6px 0 !important;
}

/* Sidebar Thin Separators */
.sidebar-hr {
  border: none !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  margin: 0 8px !important;
  width: calc(100% - 16px) !important;
}

[data-theme="light"] .sidebar-hr {
  background: rgba(0, 0, 0, 0.12) !important;
}

.sidebar-nav-divider {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 10px 0 !important;
}

.sidebar-collapsed .sidebar-hr {
  margin: 0 auto !important;
  width: 32px !important;
}

.sidebar-cta-divider {
  width: 100% !important;
  margin-bottom: 4px !important;
}

/* Primary Button: Cotizar Proyecto */
.sidebar-cta .btn-sidebar-primary,
.sidebar-cta a.btn-sidebar-primary,
.sidebar-cta a.btn-sidebar {
  width: 100% !important;
  padding: 11px 16px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--accent-red, #EF4444) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent-red, #EF4444) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.sidebar-cta .btn-sidebar-primary:hover,
.sidebar-cta a.btn-sidebar-primary:hover,
.sidebar-cta a.btn-sidebar:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5) !important;
}

/* Secondary Button: Comparar Soluciones */
.sidebar-cta .btn-sidebar-compare,
button.btn-sidebar-compare {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.sidebar-cta .btn-sidebar-compare:hover,
button.btn-sidebar-compare:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* Light Theme Overrides for CTA */
[data-theme="light"] .sidebar-cta .btn-sidebar-compare,
[data-theme="light"] button.btn-sidebar-compare {
  background: #F1F5F9 !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #334155 !important;
}

[data-theme="light"] .sidebar-cta .btn-sidebar-compare:hover,
[data-theme="light"] button.btn-sidebar-compare:hover {
  background: #E2E8F0 !important;
  border-color: rgba(0, 0, 0, 0.28) !important;
  color: #0F172A !important;
}

/* ==========================================================================
   SAAS APPS GRID ARCHITECTURE (Ultra-Compact & Scalable)
   ========================================================================== */
.saas-section-divider {
  margin: 8px 0 8px 0 !important;
  padding: 0 4px !important;
  list-style: none !important;
}

.saas-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2px !important;
}

.saas-title-label {
  font-family: var(--font-heading, 'Khand', sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #F8FAFC !important; /* Crisp high-contrast white */
}

[data-theme="light"] .saas-title-label {
  color: #0F172A !important;
}

/* Sidebar Ecosystem Navigation Buttons & Pills */
button.sidebar-link {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  font: inherit !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-md, 8px) !important;
  color: var(--text-secondary, #94A3B8) !important;
  transition: all var(--transition-fast, 0.15s ease) !important;
  box-sizing: border-box !important;
  outline: none !important;
}

button.sidebar-link .link-lead {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

button.sidebar-link .sidebar-icon {
  flex-shrink: 0 !important;
  color: #6B7280 !important;
  transition: color var(--transition-fast, 0.15s ease) !important;
}

button.sidebar-link:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

button.sidebar-link:hover .sidebar-icon,
button.sidebar-link:hover .link-text {
  color: #FFFFFF !important;
}

button.sidebar-link.active {
  background: var(--accent-red, #EF4444) !important;
  color: #FFFFFF !important;
}

button.sidebar-link.active .sidebar-icon,
button.sidebar-link.active svg,
button.sidebar-link.active .link-text {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.sidebar-pill.pill-free {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  height: 22px !important;
  min-width: 24px !important;
  width: auto !important;
  padding: 0 6px !important;
  border-radius: 9999px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.sidebar-pill.pill-paid {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  font-weight: 800 !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  height: 22px !important;
  min-width: 38px !important;
  width: auto !important;
  padding: 0 8px !important;
  border-radius: 9999px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.btn-ecosystem-free:hover .sidebar-pill.pill-free {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.btn-ecosystem-paid:hover .sidebar-pill.pill-paid {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}

.sidebar-collapsed button.sidebar-link {
  justify-content: center !important;
  padding: 10px 0 !important;
}
.sidebar-collapsed button.sidebar-link .sidebar-label,
.sidebar-collapsed button.sidebar-link .sidebar-pill {
  display: none !important;
}

/* ==========================================================================
   MÖDEN APPS MODAL (Apps Gratuitas & Apps de Pago)
   Arquitectura MÖDEN Luxury Dark #101010 - Zero Neon - High Legibility
   ========================================================================== */
.saas-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.saas-modal-backdrop.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.saas-modal-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99995 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s !important;
}

.saas-modal-wrap.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.saas-modal-dialog {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95), 0 0 1px 1px rgba(255, 255, 255, 0.06) !important;
  width: 100% !important;
  max-width: 860px !important;
  max-height: calc(90vh - 30px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: scale(0.96) translateY(12px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.saas-modal-wrap.active .saas-modal-dialog {
  transform: scale(1) translateY(0) !important;
}

/* Modal Header */
.saas-modal-header {
  padding: 22px 28px 18px 28px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #101010 !important;
}

.saas-modal-header-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.saas-modal-tag {
  display: inline-block !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--accent-red, #EF4444) !important;
  margin-bottom: 4px !important;
}

.saas-modal-title {
  font-family: var(--font-heading, 'Urbanist', sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
}

.saas-modal-subtitle {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.85rem !important;
  color: #94A3B8 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.saas-modal-close {
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
  color: #CBD5E1 !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.saas-modal-close:hover {
  background: var(--accent-red, #EF4444) !important;
  border-color: var(--accent-red, #EF4444) !important;
  color: #FFFFFF !important;
}

/* Segmented Tabs */
.saas-modal-tabs-wrapper {
  padding: 12px 28px !important;
  background: #0C0C0C !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.saas-modal-tabs {
  display: inline-flex !important;
  gap: 6px !important;
  background: #171717 !important;
  padding: 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.saas-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #94A3B8 !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.saas-tab-btn:hover {
  color: #FFFFFF !important;
}

.saas-tab-btn.active {
  background: #242424 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.saas-tab-badge {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  line-height: 1 !important;
}

.saas-tab-badge.badge-free {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10B981 !important;
}

.saas-tab-badge.badge-paid {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #EF4444 !important;
}

/* Modal Body */
.saas-modal-body {
  padding: 24px 28px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  flex: 1 !important;
  background: #101010 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #EF4444 rgba(255, 255, 255, 0.04) !important;
}

/* Chrome, Edge, Safari WebKit Scrollbar with Neon Glow */
.saas-modal-body::-webkit-scrollbar {
  width: 7px !important;
}

.saas-modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin: 10px 4px !important;
}

.saas-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF3366 0%, #EF4444 50%, #B91C1C 100%) !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75), 0 0 20px rgba(239, 68, 68, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.25s ease !important;
}

.saas-modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF5C85 0%, #FF2E63 50%, #EF4444 100%) !important;
  box-shadow: 0 0 18px rgba(255, 46, 99, 1), 0 0 35px rgba(239, 68, 68, 0.85), inset 0 0 5px rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.saas-modal-body.is-scrolling::-webkit-scrollbar-thumb,
.saas-modal-body::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #FF6E94 0%, #FF2E63 50%, #EF4444 100%) !important;
  box-shadow: 0 0 24px rgba(255, 46, 99, 1), 0 0 45px rgba(239, 68, 68, 0.95), inset 0 0 6px #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Floating Creative Neon Scroll Down Button */
.saas-scroll-down-btn {
  position: absolute !important;
  bottom: 74px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(0) !important;
  z-index: 25 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: rgba(14, 14, 16, 0.92) !important;
  border: 1px solid rgba(239, 68, 68, 0.65) !important;
  border-radius: 9999px !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5), 0 6px 22px rgba(0, 0, 0, 0.85) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
  animation: neonScrollPulse 2.6s ease-in-out infinite !important;
  outline: none !important;
}

.saas-scroll-down-btn.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(14px) !important;
}

.saas-scroll-down-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #FF3B69 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.9), 0 0 45px rgba(255, 46, 99, 0.6), 0 8px 25px rgba(0, 0, 0, 0.9) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

.saas-scroll-down-btn:active {
  transform: translateX(-50%) translateY(1px) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8) !important;
}

.saas-scroll-down-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--accent-red, #EF4444) !important;
  animation: neonIconBounce 1.8s ease-in-out infinite !important;
}

.saas-scroll-down-btn:hover .saas-scroll-down-icon {
  color: #FFFFFF !important;
}

@keyframes neonScrollPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45), 0 4px 18px rgba(0, 0, 0, 0.8);
    border-color: rgba(239, 68, 68, 0.55);
  }
  50% {
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.85), 0 0 38px rgba(255, 46, 99, 0.45), 0 6px 24px rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 77, 121, 0.95);
  }
}

@keyframes neonIconBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

.saas-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 18px !important;
}

/* Product Card */
.saas-product-card {
  background: #151515 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.saas-product-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.saas-card-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.saas-card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #222222 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.icon-viralisimo {
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #10B981 !important;
}

.icon-bemusic {
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #A855F7 !important;
}

.icon-reelsflow {
  border-color: rgba(6, 182, 212, 0.4) !important;
  color: #06B6D4 !important;
}

.icon-mkteam {
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #EF4444 !important;
}

.saas-card-meta {
  flex: 1 !important;
  min-width: 0 !important;
}

.saas-card-badges {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 4px !important;
}

.saas-badge-status {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

.badge-status-free {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.badge-status-license {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.saas-badge-category {
  font-size: 0.72rem !important;
  color: #94A3B8 !important;
  font-weight: 500 !important;
}

.saas-card-title {
  font-family: var(--font-heading, 'Urbanist', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Card Description: Darker, high readability slate typography as requested in audio */
.saas-card-desc {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.85rem !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
  margin: 0 0 18px 0 !important;
  flex: 1 !important;
}

.saas-card-desc strong {
  color: #E2E8F0 !important;
  font-weight: 600 !important;
}

/* Card Action Buttons (No arrows, clean and informative) */
.saas-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.saas-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: filter 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
  border: none !important;
}

.saas-btn-primary:hover {
  filter: brightness(1.18) !important;
  transform: translateY(-1px) !important;
}

.btn-action-viralisimo {
  background: #10B981 !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35) !important;
}

.btn-action-bemusic {
  background: #A855F7 !important;
  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.35) !important;
}

.btn-action-reelsflow {
  background: #06B6D4 !important;
  box-shadow: 0 3px 12px rgba(6, 182, 212, 0.35) !important;
}

.btn-action-mkteam {
  background: var(--accent-red, #EF4444) !important;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.35) !important;
}

.saas-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 15px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #CBD5E1 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.saas-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Modal Footer */
.saas-modal-footer {
  padding: 16px 28px !important;
  background: #0C0C0C !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.saas-footer-note {
  font-size: 0.78rem !important;
  color: #64748B !important;
}

.saas-footer-close-btn {
  padding: 8px 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.saas-footer-close-btn:hover {
  background: var(--accent-red, #EF4444) !important;
  border-color: var(--accent-red, #EF4444) !important;
  color: #FFFFFF !important;
}

/* Mobile Responsiveness (< 768px) */
@media (max-width: 768px) {
  .saas-modal-wrap {
    padding: 10px !important;
    align-items: flex-end !important;
  }
  .saas-modal-dialog {
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .saas-modal-header {
    padding: 18px 18px 14px 18px !important;
  }
  .saas-modal-tabs-wrapper {
    padding: 10px 18px !important;
  }
  .saas-modal-tabs {
    width: 100% !important;
    display: flex !important;
  }
  .saas-tab-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
  }
  .saas-modal-body {
    padding: 16px 18px !important;
  }
  .saas-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .saas-card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .saas-btn-primary,
  .saas-btn-secondary {
    width: 100% !important;
    text-align: center !important;
  }
  .saas-modal-footer {
    padding: 12px 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .saas-footer-close-btn {
    width: 100% !important;
  }
  .saas-scroll-down-btn {
    bottom: 96px !important;
    padding: 7px 15px !important;
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   SIDEBAR BANNER: Web Emprendedores & PyMEs (~3x Height Creative Card / Desde $150.000)
   ========================================================================== */
.sidebar-banner-pymes {
  width: 100% !important;
  display: block !important;
  padding: 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(150deg, rgba(220, 38, 38, 0.16) 0%, rgba(17, 24, 39, 0.95) 50%, rgba(11, 15, 25, 0.98) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.38) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  min-height: 185px !important;
}

.sidebar-banner-pymes:hover {
  border-color: rgba(239, 68, 68, 0.85) !important;
  background: linear-gradient(150deg, rgba(220, 38, 38, 0.26) 0%, rgba(26, 36, 56, 0.97) 50%, rgba(15, 23, 42, 1) 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.28), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.sidebar-banner-pymes.active {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35) !important;
}

[data-theme="light"] .sidebar-banner-pymes {
  background: linear-gradient(150deg, #FFF1F2 0%, #F8FAFC 60%, #FFFFFF 100%) !important;
  border: 1px solid rgba(220, 38, 38, 0.35) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.1) !important;
}

[data-theme="light"] .sidebar-banner-pymes:hover {
  background: linear-gradient(150deg, #FEE2E2 0%, #F1F5F9 100%) !important;
  border-color: #DC2626 !important;
  box-shadow: 0 8px 22px rgba(220, 38, 38, 0.22) !important;
}

.sb-banner-card-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  width: 100% !important;
}

.sb-banner-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.sb-banner-tag-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.sb-banner-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 8px #10B981 !important;
  display: inline-block !important;
}

.sb-banner-tag {
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #EF4444 !important;
  line-height: 1 !important;
}

.sb-banner-badge-fast {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: rgba(239, 68, 68, 0.18) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  letter-spacing: 0.04em !important;
}

[data-theme="light"] .sb-banner-badge-fast {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}

.sb-banner-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.sb-banner-title {
  font-family: var(--font-heading, 'Khand', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
}

[data-theme="light"] .sb-banner-title {
  color: #0F172A !important;
}

.sb-banner-desc {
  font-size: 0.72rem !important;
  color: #94A3B8 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

[data-theme="light"] .sb-banner-desc {
  color: #475569 !important;
}

.sb-banner-price-card {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(239, 68, 68, 0.32) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

[data-theme="light"] .sb-banner-price-card {
  background: #FFFFFF !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.sb-banner-price-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}

.sb-price-prefix {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
  letter-spacing: 0.05em !important;
}

[data-theme="light"] .sb-price-prefix {
  color: #64748B !important;
}

.sb-price-main {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.sb-price-val {
  font-family: var(--font-heading, 'Khand', sans-serif) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

[data-theme="light"] .sb-price-val {
  color: #0F172A !important;
}

.sb-price-curr {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #EF4444 !important;
  text-transform: lowercase !important;
}

.sb-price-sub {
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  color: #10B981 !important;
  line-height: 1.2 !important;
}

.sb-banner-perks {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.sb-perk-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.69rem !important;
  color: #CBD5E1 !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.sb-perk-item svg {
  color: #10B981 !important;
  flex-shrink: 0 !important;
}

[data-theme="light"] .sb-perk-item {
  color: #334155 !important;
}

.sb-banner-footer-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #EF4444 !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 2px !important;
}

[data-theme="light"] .sb-banner-footer-cta {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
  color: #DC2626 !important;
}

.sidebar-banner-pymes:hover .sb-banner-arrow {
  transform: translateX(4px) !important;
}

.sb-banner-collapsed-icon {
  display: none !important;
}

/* Collapsed Sidebar Mode Overrides for Banner */
.sidebar-collapsed .sidebar-banner-pymes {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
  background: rgba(220, 38, 38, 0.15) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.5) !important;
}

.sidebar-collapsed .sidebar-banner-pymes:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  transform: scale(1.06) !important;
}

.sidebar-collapsed .sidebar-banner-pymes:hover .sb-banner-collapsed-icon {
  color: #FFFFFF !important;
}

.sidebar-collapsed .sb-banner-card-inner {
  display: none !important;
}

.sidebar-collapsed .sb-banner-collapsed-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #EF4444 !important;
}

/* ==========================================================================
   SIDEBAR REFINEMENTS: Crisp White Title, Premium Glass Compare, Collapsed Fix
   ========================================================================== */

/* Title 'Soluciones & SaaS' a bit larger & pure crisp white */
.saas-header-row .saas-title-label,
.sidebar-inner .saas-title-label,
.sidebar-menu-divider .saas-title-label {
  font-family: var(--font-heading, 'Khand', sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Secondary CTA Button inside Dark Sidebar: Always Obsidian Glass with Crisp Text */
.sidebar-cta .btn-sidebar-compare,
button.btn-sidebar-compare,
[data-theme="light"] .sidebar-cta .btn-sidebar-compare,
[data-theme="light"] button.btn-sidebar-compare {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #E2E8F0 !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.sidebar-cta .btn-sidebar-compare:hover,
button.btn-sidebar-compare:hover,
[data-theme="light"] .sidebar-cta .btn-sidebar-compare:hover,
[data-theme="light"] button.btn-sidebar-compare:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* Collapsed Mode Perfect 42x42 Circles */
.sidebar-collapsed .sidebar-cta a.btn-sidebar-primary,
.sidebar-collapsed .sidebar-cta a.btn-sidebar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sidebar-collapsed .sidebar-cta a.btn-sidebar-primary .btn-sidebar-text,
.sidebar-collapsed .sidebar-cta .btn-sidebar-compare .btn-sidebar-text {
  display: none !important;
}

.sidebar-collapsed .sidebar-cta a.btn-sidebar-primary .btn-sidebar-icon,
.sidebar-collapsed .sidebar-cta .btn-sidebar-compare .btn-sidebar-icon {
  display: block !important;
}

.sidebar-collapsed .sidebar-cta .btn-sidebar-compare,
.sidebar-collapsed .sidebar-cta button.btn-sidebar-compare {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   DYNAMIC PROJECT ESTIMATOR & COTIZADOR WIZARD (/leads)
   ========================================================================== */

/* Step 1: Option Card Top & Price Pills */
.option-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.option-price-pill {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #F3F4F6;
}

.option-card.selected .option-price-pill {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

[data-theme="light"] .option-price-pill {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1F2937;
}

/* Left Panel Real-Time Mini Summary Badge */
.wizard-live-summary-badge {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.wlsb-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 600;
}

.wlsb-pricing {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wlsb-real-price {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-main);
}

.wlsb-real-price.has-discount {
  text-decoration: line-through;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.wlsb-discount-badge {
  background: #10B981;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.wlsb-final-price {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: #10B981;
}

/* Step 2: Conditional Feature Chips Grid */
.options-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .options-chip-grid {
    grid-template-columns: 1fr;
  }
}

.feature-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.feature-chip:hover {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.feature-chip.selected {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.08);
}

.feature-chip input[type="checkbox"] {
  display: none;
}

.chip-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: bold;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.feature-chip.selected .chip-check {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}

.chip-content {
  flex: 1;
  min-width: 0;
}

.chip-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}

.chip-desc {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 2px;
}

.chip-price {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-red);
  flex-shrink: 0;
}

/* Step 3: Domain & Infrastructure Sections */
.wizard-infra-section {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.infra-section-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.infra-num-tag {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.infra-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}

.infra-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
}

/* TLD Selector Bar */
.tld-selector-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tld-pill-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  transition: all 0.18s ease;
}

.tld-pill-btn:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--text-main);
}

.tld-pill-btn.active {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--accent-red);
  color: var(--text-main);
}

.tld-featured-badge {
  font-size: 0.65rem;
  background: var(--accent-red);
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.tld-tag {
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  padding: 2px 5px;
  border-radius: 4px;
}

/* Domain Search Input Group */
.domain-search-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.domain-search-input-group {
  display: flex;
  align-items: center;
  flex: 1;
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0 12px;
  transition: border-color 0.2s;
}

.domain-search-input-group:focus-within {
  border-color: var(--accent-red);
}

.domain-prefix {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 500;
  user-select: none;
}

.domain-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 6px !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main) !important;
  flex: 1;
}

.domain-tld-badge {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-red);
}

.btn-check-domain {
  min-width: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Domain Result Container */
.domain-result-container {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  animation: fadeIn 0.2s ease forwards;
}

.domain-result-available {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.domain-result-registered {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.domain-res-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.domain-badge-ok {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.domain-badge-err {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EF4444;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.domain-res-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-main);
}

.domain-res-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.btn-add-domain {
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
}

.domain-no-need-option {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Hosting Cards Grid */
.hosting-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  .hosting-options-grid {
    grid-template-columns: 1fr;
  }
}

.hosting-card {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.hosting-card:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.hosting-card.selected {
  border-color: var(--accent-red);
  background: rgba(239, 68, 68, 0.08);
}

.h-card-tag {
  position: absolute;
  top: -8px;
  right: 12px;
  background: #10B981;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.h-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.h-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
}

.h-price {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-red);
}

.h-price small {
  font-size: 0.72rem;
  font-weight: normal;
  color: var(--text-secondary);
}

.h-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Step 4: Quote Summary Panel */
.quote-summary-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.qsp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.qsp-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qsp-badge {
  font-size: 0.7rem;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

.qsp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.88rem;
}

.qsp-item-name {
  color: var(--text-secondary);
}

.qsp-item-price {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-main);
}

.qsp-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 8px 0;
}

.qsp-real-value-row .qsp-label-total {
  font-weight: 700;
  color: var(--text-main);
}

.qsp-real-price-val {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}

.qsp-real-price-val.has-discount {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.qsp-discount-row {
  background: rgba(245, 158, 11, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
}

.discount-tag-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #F59E0B;
}

.discount-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.qsp-savings-val {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: #F59E0B;
}

.qsp-final-highlight-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03));
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 10px;
}

.final-box-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
}

.final-box-note {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.final-box-price {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 1.75rem;
  font-weight: 800;
  color: #10B981;
  letter-spacing: -0.5px;
}

/* Gamified Titan Alert Banner */
.leads-discount-titan {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.15)) !important;
  border-color: #F59E0B !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25) !important;
}

/* ==========================================================================
   STEP 2: Upgraded Rich Module Cards (SVG Icons, Checkboxes, Clean Grid)
   ========================================================================== */
.options-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  margin: 8px 0 12px;
}

.module-card.feature-chip {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(14, 18, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.18s ease;
  box-sizing: border-box;
  height: 100%;
}

.module-card.feature-chip:hover {
  background: rgba(22, 28, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.module-card.feature-chip.selected {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: #EF4444 !important;
}

.mc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mc-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
}

.mc-check-pill .chip-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  transition: all 0.18s ease;
}

.module-card.feature-chip.selected .chip-check {
  background: #EF4444;
  border-color: #EF4444;
  color: #FFFFFF;
}

.mc-content {
  flex-grow: 1;
}

.mc-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.mc-desc {
  font-size: 0.82rem;
  color: #94A3B8;
  line-height: 1.4;
  margin: 0;
}

.mc-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mc-price {
  font-size: 0.84rem;
  font-weight: 800;
  color: #10B981;
  font-family: var(--font-display, monospace);
}

/* ==========================================================================
   STEP 3: Symmetrical Central Dashboard (2 Columns)
   ========================================================================== */
.step3-central-dashboard {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  flex: 1;
  min-height: 0;
  margin: 8px 0 12px;
  align-items: stretch;
}

.step3-dashboard-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(14, 18, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
  box-sizing: border-box;
}

.s3dc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.s3dc-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
}

.s3dc-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 2px 0;
}

.s3dc-subtitle {
  font-size: 0.78rem;
  color: #94A3B8;
  margin: 0;
}

.s3dc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.domain-checker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .domain-checker-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
}

.domain-fallback-option {
  margin-top: 10px;
}

.hosting-options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .hosting-options-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

.hosting-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hosting-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.hosting-card.selected {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: #EF4444 !important;
}

.h-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.h-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
}

.h-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #10B981;
}

.h-desc {
  font-size: 0.74rem;
  color: #94A3B8;
  line-height: 1.35;
  margin: 0;
}

.email-addon-container .module-card {
  height: auto;
  padding: 12px 16px;
}

/* ==========================================================================
   STEP 4: Terms Box & Agency Submit Button
   ========================================================================== */
.wizard-terms-box {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.80rem;
  color: #94A3B8;
  line-height: 1.4;
  margin: 0;
  user-select: none;
}

.wizard-terms-label a {
  color: var(--accent-red);
  text-decoration: underline;
}

.terms-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #EF4444;
  flex-shrink: 0;
  cursor: pointer;
}

.wizard-form-submit-zone {
  margin-top: 12px;
}

.wizard-form-submit-zone .submit-lead-btn {
  width: 100%;
  height: 48px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Minimalist Confirmation Modal (Zero Neon, Clean Agency Style) */
.card-minimalist {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6) !important;
  z-index: 10;
  animation: qcmAppear 0.25s ease forwards;
}

/* ==========================================================================
   COMPREHENSIVE LIGHT MODE SUPPORT (data-theme="light")
   Fixing all contrast, titles, cards, and panels for the Cotizador
   ========================================================================== */
[data-theme="light"] .wizard-card-wide {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .wizard-top-dashboard-bar {
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .wtd-main-title {
  color: #0F172A !important;
}

[data-theme="light"] .step-pane-title {
  color: #0F172A !important;
}

[data-theme="light"] .step-pane-subtitle {
  color: #64748B !important;
}

[data-theme="light"] .wtd-progress-track {
  background: #E2E8F0 !important;
}

/* Step 1 Cards Light Mode */
[data-theme="light"] .service-spacious-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .service-spacious-card:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] .service-spacious-card.selected {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
}

[data-theme="light"] .ssc-title {
  color: #0F172A !important;
}

[data-theme="light"] .ssc-desc {
  color: #475569 !important;
}

[data-theme="light"] .ssc-price-pill {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .ssc-highlights {
  color: #334155 !important;
  border-top-color: #E2E8F0 !important;
}

/* ==========================================================================
   SERVICE ARCADE BOOSTER CARD - LIGHT MODE RED BACKGROUND & WHITE TEXT
   ========================================================================== */
[data-theme="light"] .service-arcade-booster-card {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.32) !important;
}

[data-theme="light"] .service-arcade-booster-card:hover {
  background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 14px 36px rgba(220, 38, 38, 0.45) !important;
  transform: translateY(-2px) !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-tag-arcade {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-tag-arcade svg {
  stroke: #FFFFFF !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-arcade-discount-badge {
  background: #0F172A !important;
  color: #FEF08A !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-desc {
  color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-scope-label {
  color: #FEF08A !important;
  font-weight: 800 !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-feature-checklist li {
  color: #FFFFFF !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-feature-checklist .ssc-bullet {
  color: #FDE047 !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-highlights {
  color: rgba(255, 255, 255, 0.95) !important;
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="light"] .service-arcade-booster-card .ssc-highlights span {
  color: #FFFFFF !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Botón más oscuro para jugar en la tarjeta roja */
[data-theme="light"] .service-arcade-booster-card .ssc-arcade-action-btn {
  background: #0F172A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="light"] .service-arcade-booster-card:hover .ssc-arcade-action-btn {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
}

/* Step 2 Cards Light Mode */
[data-theme="light"] .module-card.feature-chip {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .module-card.feature-chip:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] .module-card.feature-chip.selected {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
}

[data-theme="light"] .mc-title {
  color: #0F172A !important;
}

[data-theme="light"] .mc-desc {
  color: #475569 !important;
}

[data-theme="light"] .mc-icon-badge {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #EF4444 !important;
}

[data-theme="light"] .mc-check-pill .chip-check {
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .mc-footer {
  border-top-color: #E2E8F0 !important;
}

[data-theme="light"] .mc-price {
  color: #059669 !important;
}

/* Step 3 Cards Light Mode */
[data-theme="light"] .step3-dashboard-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .s3dc-title {
  color: #0F172A !important;
}

[data-theme="light"] .s3dc-subtitle {
  color: #64748B !important;
}

[data-theme="light"] .s3dc-icon-badge {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #EF4444 !important;
}

[data-theme="light"] .s3dc-header {
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .hosting-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .hosting-card:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] .hosting-card.selected {
  background: #FEF2F2 !important;
  border-color: #EF4444 !important;
}

[data-theme="light"] .h-name {
  color: #0F172A !important;
}

[data-theme="light"] .h-desc {
  color: #475569 !important;
}

[data-theme="light"] .h-price {
  color: #059669 !important;
}

[data-theme="light"] .domain-no-need-pill {
  color: #64748B !important;
}

/* Step 4 Quote Summary & Forms Light Mode */
[data-theme="light"] .quote-summary-panel {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .qsp-header {
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .qsp-title {
  color: #0F172A !important;
}

[data-theme="light"] .qsp-badge {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #059669 !important;
}

[data-theme="light"] .qsp-item-name {
  color: #475569 !important;
}

[data-theme="light"] .qsp-item-price {
  color: #0F172A !important;
}

[data-theme="light"] .qsp-divider {
  background: #E2E8F0 !important;
}

[data-theme="light"] .qsp-label-total {
  color: #0F172A !important;
}

[data-theme="light"] .qsp-real-price-val {
  color: #0F172A !important;
}

[data-theme="light"] .qsp-final-highlight-box {
  background: #ECFDF5 !important;
  border: 1.5px solid #A7F3D0 !important;
}

[data-theme="light"] .final-box-label {
  color: #0F172A !important;
}

[data-theme="light"] .final-box-note {
  color: #64748B !important;
}

[data-theme="light"] .final-box-price {
  color: #059669 !important;
}

[data-theme="light"] .form-control {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .form-control:focus {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

[data-theme="light"] .form-label {
  color: #334155 !important;
}

[data-theme="light"] .wizard-terms-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .terms-text {
  color: #475569 !important;
}

/* Confirmation Modal Light Mode */
[data-theme="light"] .card-minimalist {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .qcm-title {
  color: #0F172A !important;
}

[data-theme="light"] .qcm-subtitle {
  color: #64748B !important;
}

[data-theme="light"] .qcm-summary-card {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .qcm-label {
  color: #64748B !important;
}

[data-theme="light"] .qcm-val {
  color: #0F172A !important;
}

[data-theme="light"] .qcm-label-total {
  color: #0F172A !important;
}

[data-theme="light"] .qcm-final-price {
  color: #059669 !important;
}

[data-theme="light"] .qcm-email-notice {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}

[data-theme="light"] .qcm-close-btn {
  color: #64748B !important;
}

[data-theme="light"] .qcm-close-btn:hover {
  color: #0F172A !important;
}


/* ==========================================================================
   CENTERED AXIS RULES: Paso 2, Paso 3 y Paso 4 (Centrado Estricto al Eje)
   ========================================================================== */
/* Step panes: ensure hidden panes are NEVER displayed */
.wizard-step-pane[style*="display: none"],
.wizard-step-pane[style*="display:none"],
.wizard-step-pane.step-hidden {
  display: none !important;
}

#leadDiscountBanner {
  display: none !important;
}

/* Step 2: Top-aligned and internally scrollable so first row is 100% visible when active */
.wizard-step-pane[data-step="2"]:not(.step-hidden):not([style*="display: none"]):not([style*="display:none"]) {
  justify-content: flex-start !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding-top: 2px !important;
}

.wizard-step-pane[data-step="2"] .step-pane-header {
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
}

/* Step 4: Top-aligned and naturally flowing with full vertical visibility */
.wizard-step-pane[data-step="4"]:not(.step-hidden):not([style*="display: none"]):not([style*="display:none"]) {
  justify-content: flex-start !important;
  align-items: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 0 16px 0 !important;
}

.wizard-step-pane[data-step="4"] .step-pane-header {
  margin-bottom: 8px !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.conditional-features-container {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding: 4px 6px 20px 4px !important;
}

.service-feature-group {
  width: 100% !important;
  margin: 0 auto !important;
}

.options-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
}

@media (max-width: 992px) {
  .options-chip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .options-chip-grid {
    grid-template-columns: 1fr !important;
  }
}

.step3-central-dashboard {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  align-self: center !important;
}

@media (max-width: 860px) {
  .step3-central-dashboard {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.step4-horizontal-split {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  align-self: center !important;
}

.wizard-form-submit-zone {
  margin-top: 14px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}


/* ==========================================================================
   PERFECT AXIS REFINEMENTS: 3x2 Symmetric Grids & Compact Vertical Fit
   ========================================================================== */
.wizard-card-wide {
  max-width: 1200px !important;
  min-height: min(660px, calc(100vh - 40px)) !important;
  height: auto !important;
  max-height: none !important;
  padding: 14px 22px 20px !important;
}

.wizard-step-pane {
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 0 !important;
}

.step-pane-header {
  margin-bottom: 8px !important;
}

.step-pane-title {
  font-size: 1.12rem !important;
  margin-bottom: 1px !important;
}

.step-pane-subtitle {
  font-size: 0.78rem !important;
}

/* Step 1: 3x2 Grid on Desktop / 1 Column on Mobile */
@media (min-width: 769px) {
  .service-cards-spacious-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 4px 0 6px !important;
  }
}

@media (max-width: 768px) {
  .service-cards-spacious-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 14px !important;
    margin: 8px 0 !important;
  }
  .service-spacious-card {
    min-height: auto !important;
    width: 100% !important;
  }
}

.service-spacious-card {
  padding: 12px 16px !important;
}

.ssc-title {
  font-size: 1.02rem !important;
  margin: 4px 0 !important;
}

.ssc-desc {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

/* Step 2: Dynamic Multi-Row Grid for Extended Module Catalog (10-12 Modules) */
.conditional-features-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto !important;
  max-height: calc(100vh - 210px) !important;
  padding: 4px 8px 14px 8px !important;
}

.conditional-features-container::-webkit-scrollbar {
  width: 6px;
}
.conditional-features-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.conditional-features-container::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.4);
  border-radius: 4px;
}
.conditional-features-container::-webkit-scrollbar-thumb:hover {
  background: #DC2626;
}

.options-chip-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 4px auto 14px !important;
}

@media (max-width: 960px) {
  .options-chip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 620px) {
  .options-chip-grid {
    grid-template-columns: 1fr !important;
  }
}

.module-card.feature-chip {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 142px !important;
  box-sizing: border-box !important;
}

.mc-header {
  margin-bottom: 4px !important;
}

.mc-icon-badge {
  width: 28px !important;
  height: 28px !important;
}

.mc-icon-badge svg {
  width: 16px !important;
  height: 16px !important;
}

.mc-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  line-height: 1.25 !important;
}

.mc-desc {
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
  color: #94A3B8 !important;
}

.mc-footer {
  margin-top: 4px !important;
  padding-top: 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Step 3: Compact & Centered */
.step3-central-dashboard {
  gap: 14px !important;
  margin: 4px auto 6px !important;
  max-width: 1040px !important;
}

.step3-dashboard-card {
  padding: 14px 16px !important;
}

.hosting-card {
  padding: 10px 12px !important;
}

/* Step 4: Balanced Split & Inside Button */
.step4-horizontal-split {
  gap: 16px !important;
  margin: 4px auto 6px !important;
  max-width: 1040px !important;
  align-items: start !important;
}

.quote-summary-panel {
  padding: 14px 16px !important;
  height: auto !important;
}

.qsp-row {
  margin-bottom: 6px !important;
  font-size: 0.84rem !important;
}

.qsp-final-highlight-box {
  padding: 10px 14px !important;
  margin-top: 8px !important;
}

.form-group.compact {
  margin-bottom: 6px !important;
}

.form-group.compact .form-label {
  font-size: 0.76rem !important;
  margin-bottom: 2px !important;
}

.form-group.compact .form-control {
  height: 36px !important;
  font-size: 0.84rem !important;
  padding: 6px 12px !important;
}

.textarea-compact {
  height: 48px !important;
  min-height: 48px !important;
  font-size: 0.80rem !important;
  padding: 6px 10px !important;
}

.wizard-terms-box {
  margin-top: 6px !important;
  padding: 6px 10px !important;
}

.wizard-terms-label {
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
}

.wizard-form-submit-zone {
  margin-top: 8px !important;
}

.wizard-form-submit-zone .submit-lead-btn {
  height: 42px !important;
  font-size: 0.95rem !important;
}


/* Micro-refinement: Step 4 inner form alignment */
.step4-col-form .wizard-form-grid {
  gap: 8px 12px !important;
}
.step4-col-form .form-group.compact {
  margin-bottom: 6px !important;
}
.wizard-terms-box {
  margin-top: 8px !important;
  padding: 6px 10px !important;
}

/* ==========================================================================
   WIZARD HEADER & SUBTITLE ENHANCEMENT
   ========================================================================== */
.wtd-main-title {
  text-transform: uppercase !important;
  letter-spacing: -0.5px;
}

.wtd-main-subtitle {
  font-size: 0.84rem;
  color: var(--text-secondary, #94A3B8);
  margin: 3px 0 0 0;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   SERVICE CARDS: CLEAN TEXT TAGS (CERO EMOJIS, SIN FONDOS, SOLO SVG)
   ========================================================================== */
.ssc-tag-clean {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ssc-tag-clean.text-accent-red { color: var(--accent-red); }
.ssc-tag-clean.text-green { color: #10B981; }
.ssc-tag-clean.text-amber { color: #F59E0B; }
.ssc-tag-clean.text-pink { color: #EC4899; }
.ssc-tag-clean.text-purple { color: #A855F7; }

/* ==========================================================================
   ARCADE BOOSTER CARD: SOLID RED BACKGROUND & WHITE CONTRAST
   ========================================================================== */
.service-arcade-booster-card {
  background: #DC2626 !important; /* Solid red corporativo */
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35) !important;
  transition: all 0.2s ease !important;
}

.service-arcade-booster-card:hover {
  background: #B91C1C !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.5) !important;
}

.service-arcade-booster-card .ssc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.service-arcade-booster-card .ssc-tag-arcade {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #FFFFFF !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.service-arcade-booster-card .ssc-arcade-discount-badge {
  background: #000000 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-size: 0.70rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 9px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.3px;
}

.service-arcade-booster-card .ssc-title {
  color: #FFFFFF !important;
  font-weight: 800;
  margin-bottom: 4px;
}

.service-arcade-booster-card .ssc-desc {
  color: rgba(255, 255, 255, 0.94) !important;
  line-height: 1.35;
  font-size: 0.76rem;
}

.service-arcade-booster-card .ssc-highlights {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500;
}

.service-arcade-booster-card .ssc-highlights span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.service-arcade-booster-card .ssc-arcade-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #FFFFFF !important;
  color: #DC2626 !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.service-arcade-booster-card:hover .ssc-arcade-action-btn {
  background: #F8FAFC !important;
  color: #B91C1C !important;
  transform: scale(1.02);
}

/* ==========================================================================
   STEP 2: REDESIGNED MODULE CARDS (ICON BESIDE TITLE, 0.88rem DESC, BUTTON)
   ========================================================================== */
.mc-top-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  width: 100%;
}

.mc-top-header .mc-icon-badge {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
}

.mc-top-header .mc-icon-badge svg {
  width: 20px !important;
  height: 20px !important;
}

.mc-top-header .mc-title {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
  text-align: left;
}

.module-card .mc-desc {
  font-size: 0.88rem !important;
  color: #94A3B8 !important;
  line-height: 1.45 !important;
  margin-bottom: 8px !important;
  text-align: left;
  flex: 1;
}

.module-card .mc-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

/* Module Card Price (Paid additions): Large, prominent green text */
.module-card .mc-price,
.mc-price {
  font-family: var(--font-display, monospace) !important;
  font-size: 1.08rem !important; /* Más grande y visible */
  font-weight: 800 !important;
  color: #10B981 !important; /* Verde corporativo de valor */
  letter-spacing: -0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .module-card .mc-price,
[data-theme="light"] .mc-price {
  color: #059669 !important;
  text-shadow: none !important;
}

/* Module Card Free Badge: Solid flat green pill badge with pure white text and price */
.module-card .mc-price.mc-price-free,
.mc-price.mc-price-free {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #059669 !important; /* Color plano verde sólido */
  color: #FFFFFF !important; /* Letras y precio en blanco puro */
  font-family: var(--font-display, monospace) !important;
  font-size: 0.88rem !important; /* Más visible y legible */
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 5px 12px !important;
  border-radius: 999px !important; /* Formato píldora redondeada */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

[data-theme="light"] .module-card .mc-price.mc-price-free,
[data-theme="light"] .mc-price.mc-price-free {
  background: #059669 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

.btn-select-module {
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-select-module:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.module-card.selected .btn-select-module {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.module-card.selected {
  border-color: var(--accent-red) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ==========================================================================
   STEP 3: DOMAIN CHECKER, PREFIX & EMAIL CARD
   ========================================================================== */
.domain-fallback-top-zone {
  margin-bottom: 6px !important;
  width: 100%;
}

.domain-owned-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.domain-owned-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.25);
}

.domain-owned-pill input[type="radio"] {
  accent-color: var(--accent-red);
  width: 16px;
  height: 16px;
  margin: 0;
}

.domain-owned-text {
  font-size: 0.84rem;
  color: var(--text-main);
}

.domain-input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.domain-fixed-prefix {
  position: absolute;
  left: 12px;
  font-family: var(--font-display, monospace);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--accent-red) !important;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.domain-input-with-prefix .form-control {
  padding-left: 54px !important;
}

.tld-pill-btn {
  font-size: 0.76rem !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}

.email-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

@media (max-width: 680px) {
  .email-options-grid {
    grid-template-columns: 1fr;
  }
}

.email-box-card {
  display: block;
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  text-align: left;
}

.email-box-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(239, 68, 68, 0.4);
}

.email-box-card.selected {
  background: rgba(239, 68, 68, 0.09) !important;
  border-color: var(--accent-red) !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important;
}

.email-box-card-bordered {
  border: 2px solid rgba(255, 255, 255, 0.16) !important;
}

.email-box-card-bordered .ebc-desc {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

.ebc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.ebc-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
  margin: 0;
}

.ebc-check-pill .chip-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  transition: all 0.2s ease;
}

.email-box-card.selected .ebc-check-pill .chip-check {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #FFFFFF;
}

.ebc-body {
  width: 100%;
}

.ebc-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.ebc-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.90rem;
  font-weight: 700;
  color: var(--text-main);
}

.ebc-price {
  font-family: var(--font-display, monospace);
  font-size: 0.88rem;
  font-weight: 800;
  color: #10B981;
}

.ebc-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

/* ==========================================================================
   STEP 4: TAX DOCUMENT SELECTOR, NET/IVA BREAKDOWN, TEXTAREA, CENTERED BUTTON
   ========================================================================== */
.wizard-step-pane[data-step="4"] .step-pane-header,
.wizard-step-pane[data-step="4"] .step-pane-title,
.wizard-step-pane[data-step="4"] .step-pane-subtitle {
  text-align: left !important;
  align-self: flex-start;
}

.tax-document-selection-group {
  margin-bottom: 12px;
  width: 100%;
}

.tax-toggle-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.tax-pill-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tax-pill-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}

.tax-pill-option.active {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--accent-red);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
}

.tax-pill-option input[type="radio"] {
  accent-color: var(--accent-red);
  width: 16px;
  height: 16px;
  margin: 0;
}

.tax-pill-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tax-pill-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
}

.tax-pill-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.tax-factura-card-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 12px;
}

.tax-factura-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--accent-red);
  margin-bottom: 8px;
}

.qsp-tax-subtotal-row,
.qsp-tax-iva-row {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.qsp-tax-subtotal-row .qsp-item-price,
.qsp-tax-iva-row .qsp-item-price {
  font-family: var(--font-display, monospace);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Step 4: Referential Quote Disclaimer Box */
.qsp-disclaimer-box {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.qsp-disclaimer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-main);
  margin-bottom: 6px;
}

.qsp-disclaimer-header svg {
  color: var(--accent-red);
  flex-shrink: 0;
}

.qsp-disclaimer-text {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.qsp-disclaimer-text strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.custom-req-tag {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--accent-red);
  background: rgba(239, 68, 68, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  letter-spacing: 0.5px;
}

.form-helper-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
  margin-bottom: 8px;
}

.qcm-summary-note {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.textarea-spacious,
.step4-col-form .textarea-compact,
.step4-col-form textarea#description {
  min-height: 110px !important;
  height: 110px !important;
  resize: vertical !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
  padding: 10px 12px !important;
}

.wizard-submit-centered,
.step4-col-form .wizard-form-submit-zone {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 18px !important;
}

.wizard-submit-centered .submit-lead-btn,
.step4-col-form .wizard-form-submit-zone .submit-lead-btn {
  width: auto !important;
  min-width: 320px;
  margin: 0 auto !important;
}

/* ==========================================================================
   CONTACT MODAL GRID INSIDE LEGAL MODAL
   ========================================================================== */
.contact-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .contact-modal-grid {
    grid-template-columns: 1fr;
  }
}

.contact-card-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.contact-card-item:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--accent-red);
  transform: translateY(-2px);
}

.contact-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
  flex-shrink: 0;
}

.contact-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0;
}

.contact-card-val {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}


/* ── Lightbox close button — círculo accesible ── */
.lightbox-close,
#lightboxClose {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  z-index: 100051;
}
.lightbox-close:hover,
#lightboxClose:hover {
  background: #EF4444;
  border-color: #EF4444;
  transform: scale(1.1);
}
[data-theme="light"] .lightbox-close,
[data-theme="light"] #lightboxClose {
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.8);
  color: #1E293B;
}
[data-theme="light"] .lightbox-close:hover,
[data-theme="light"] #lightboxClose:hover {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
}


/* Games modal — scroll en viewport móvil pequeño */
@media (max-width: 640px) {
  .games-modal-dialog,
  .games-dialog-compact-100vh {
    max-height: 92vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}


/* Comparison modal — header padding en mobile para no solapar botón X */
@media (max-width: 640px) {
  .comparison-modal-header,
  #comparisonModal .modal-header {
    padding-right: 54px !important;
  }
}

/* ==========================================================================
   INICIO (HOME) & FOOTER EN EXACTAMENTE 100VH SIN SCROLL (DESKTOP)
   ========================================================================== */
@media (min-width: 1025px) {
  .page-home-wrapper {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .page-home-wrapper .main-content {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .page-home-wrapper .home-hero-section {
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-home-wrapper .home-hero-section > .container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .page-home-wrapper .home-hero-grid {
    gap: 28px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .page-home-wrapper .home-lead-tag {
    margin-bottom: 8px !important;
    font-size: 0.78rem !important;
  }

  .page-home-wrapper .home-hero-title {
    font-size: clamp(2rem, 2.7vw, 2.75rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
  }

  .page-home-wrapper .home-hero-desc {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
    max-width: 560px !important;
  }

  .page-home-wrapper .home-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .page-home-wrapper .home-hero-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 6px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .page-home-wrapper .home-arcade-banner {
    margin-bottom: 14px !important;
  }

  .page-home-wrapper .btn-play-now-mega {
    padding: 8px 14px !important;
  }

  .page-home-wrapper .home-metrics-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 6px !important;
    gap: 2px !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  .page-home-wrapper .home-metric-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 0 2px !important;
  }

  .page-home-wrapper .home-metric-val {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }

  .page-home-wrapper .home-metric-lbl {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 1px !important;
  }

  .page-home-wrapper .home-metric-sub {
    font-size: 0.6rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .page-home-wrapper .home-metric-sep {
    width: 1px !important;
    height: 28px !important;
    background: var(--border-subtle) !important;
    flex-shrink: 0 !important;
  }

  .page-home-wrapper .home-hero-showcase {
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }

  .page-home-wrapper .showcase-card-wrapper {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #101010 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .page-home-wrapper .showcase-slides-viewport {
    padding: 24px 22px 20px !important;
  }

  .page-home-wrapper .showcase-slide-media {
    max-height: 235px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .page-home-wrapper .showcase-media-img {
    max-height: 235px !important;
    object-fit: cover !important;
  }

  .page-home-wrapper .showcase-slide-content {
    padding-top: 10px !important;
  }

  .page-home-wrapper .showcase-slide-title {
    font-size: 1.05rem !important;
    margin-bottom: 4px !important;
  }

  .page-home-wrapper .showcase-slide-desc {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .page-home-wrapper .footer-wrap {
    flex-shrink: 0 !important;
    padding: 12px 0 !important;
  }
}

/* ==========================================================================
   DEDICATED CONTACT PAGE (/contacto) — 100VH DASHBOARD PRESENTATION
   ========================================================================== */
.contact-page-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.contact-container {
  width: 100%;
  max-width: 1260px;
}

.contact-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  align-items: stretch;
  width: 100%;
}

.contact-info-card,
.contact-form-card {
  padding: 30px;
  border-radius: var(--radius-md, 14px);
  display: flex;
  flex-direction: column;
}

/* Left Card: Info & Channels */
.cic-header {
  margin-bottom: 18px;
}

.cic-title {
  font-family: var(--font-heading, 'Urbanist', sans-serif);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
  margin: 10px 0 10px;
}

.cic-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cic-channels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}

.cic-channel-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-main);
  transition: all var(--transition-fast);
}

.cic-channel-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.cic-channel-item.channel-wa:hover {
  border-color: rgba(37, 211, 102, 0.5);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.15);
}

.cic-channel-item.channel-mail:hover {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.15);
}

.channel-wa .cic-channel-icon {
  color: #25D366;
}

.channel-mail .cic-channel-icon {
  color: #38BDF8;
}

.channel-location .cic-channel-icon {
  color: var(--accent-red);
}

.cic-channel-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cic-channel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cic-channel-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

.cic-channel-value {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
}

.cic-channel-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.cic-channel-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-red);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-red-subtle);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Social Network Presence */
.cic-social-presence {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.cic-social-title {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 600;
}

.cic-social-links {
  display: flex;
  gap: 12px;
}

.cic-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.cic-social-btn.btn-ig:hover {
  border-color: #E1306C;
  color: #E1306C;
  background: rgba(225, 48, 108, 0.08);
}

.cic-social-btn.btn-fb:hover {
  border-color: #1877F2;
  color: #1877F2;
  background: rgba(24, 119, 242, 0.08);
}

/* Right Card: Formal Contact Form */
.cfc-header {
  margin-bottom: 18px;
}

.cfc-badge {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-red);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cfc-title {
  font-family: var(--font-heading, 'Urbanist', sans-serif);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 6px 0 6px;
}

.cfc-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.contact-success-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10B981;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.contact-error-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #EF4444;
  font-size: 0.86rem;
  margin-bottom: 16px;
}

.contact-error-alert ul {
  margin: 4px 0 0 16px;
}

.formal-contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cform-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cform-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
}

.cform-opt {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.cform-input,
.cform-textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 6px;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #111827 !important;
  font-family: var(--font-body);
  font-size: 0.92rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cform-input::placeholder,
.cform-textarea::placeholder {
  color: #94A3B8 !important;
}

.cform-input:focus,
.cform-textarea:focus {
  background: #FFFFFF !important;
  color: #111827 !important;
  border-color: var(--accent-red, #EF4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.cform-textarea {
  resize: vertical;
  min-height: 95px;
}

.cform-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
}

.cform-privacy-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.btn-contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* 100vh Layout on Desktop for Contact Page */
@media (min-width: 1025px) {
  .page-contact-wrapper {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .page-contact-wrapper .main-content {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .page-contact-wrapper .contact-page-section {
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 0 !important;
  }

  .page-contact-wrapper .footer-wrap {
    flex-shrink: 0 !important;
    padding: 12px 0 !important;
  }
}

/* Responsive Breakpoints for Contact Page */
@media (max-width: 1024px) {
  .contact-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cform-row {
    grid-template-columns: 1fr;
  }

  .cform-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-contact-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   DESGLOSE ITEMIZADO DE MÓDULOS EN COTIZACIÓN ESTIMATIVA (PASO 4)
   ========================================================================== */
.qsp-modules-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 6px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.qsp-modules-list::-webkit-scrollbar {
  width: 5px;
}

.qsp-modules-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.qsp-modules-list::-webkit-scrollbar-thumb {
  background: var(--accent-red, #EF4444);
  border-radius: 4px;
}

[data-theme="light"] .qsp-modules-list::-webkit-scrollbar-track {
  background: #E2E8F0;
}

.qsp-module-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 3px 0 !important;
  margin-bottom: 3px !important;
  font-size: 0.84rem !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.qsp-module-item:last-child {
  border-bottom: none !important;
}

.qsp-module-item .qsp-item-name {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.qsp-module-bullet {
  color: var(--accent-red, #EF4444);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  opacity: 0.85;
}

.qsp-module-tag {
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-red, #EF4444);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.qsp-module-title {
  color: var(--text-secondary, #94A3B8);
  font-size: 0.84rem;
  word-break: break-word;
}

.qsp-module-item .qsp-item-price {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main, #F8FAFC);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qsp-price-free {
  color: #10B981 !important;
}

.qsp-badge-free {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #059669 !important;
  color: #FFFFFF !important;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.2;
}

.qsp-free-tag {
  font-size: 0.82rem;
  font-family: var(--font-heading, 'Khand', sans-serif);
  color: #10B981 !important;
  font-weight: 600;
}

/* Light mode adjustments */
[data-theme="light"] .qsp-module-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .qsp-module-title {
  color: #475569 !important;
}

[data-theme="light"] .qsp-module-item .qsp-item-price {
  color: #0F172A !important;
}

[data-theme="light"] .qsp-price-free {
  color: #059669 !important;
}

[data-theme="light"] .qsp-badge-free {
  background: #059669 !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .qsp-free-tag {
  color: #059669 !important;
}

/* ==========================================================================
   SISTEMA DE FOOTER PREMIUM (CORPORATIVO, ELEVADO & ANTI-PURPLE LINKS)
   ========================================================================== */

/* 1. Brand Mark: MÖDEN con remarcado bold, Ö carmesí y tipografía Urbanist */
.footer-brand-mark {
  font-family: var(--font-heading, 'Urbanist', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px;
  color: #FFFFFF !important;
  display: inline-block;
  text-transform: uppercase;
}

.brand-o-red {
  color: var(--accent-red, #EF4444) !important;
  font-weight: 900 !important;
  display: inline-block;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

/* Modo Claro: Möden siempre blanco y O roja para contraste sobre fondo dark #101010 */
.footer-brand-mark,
[data-theme="light"] .footer-brand-mark {
  color: #FFFFFF !important; /* Blanco puro absoluto en todos los temas */
}

.brand-o-red,
[data-theme="light"] .brand-o-red {
  color: var(--accent-red, #EF4444) !important; /* Rojo carmesí vibrante */
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
}

/* 2. Enlaces del Footer con Carácter y Estilo (Sin color morado por defecto) */
.footer-bottom-links,
.home-bottom-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

.footer-bottom-links a,
.footer-bottom-links a:link,
.footer-bottom-links a:visited,
.home-bottom-right a,
.home-bottom-right a:link,
.home-bottom-right a:visited {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary, #94A3B8) !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

.footer-bottom-links a:hover,
.home-bottom-right a:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

.footer-bottom-links a:active,
.home-bottom-right a:active {
  transform: translateY(0) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* 3. Enlace Destacado (Contacto) */
.footer-bottom-links a.footer-link-highlight,
.home-bottom-right a.footer-link-highlight {
  color: var(--accent-red, #EF4444) !important;
  font-weight: 700 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.footer-bottom-links a.footer-link-highlight:hover,
.home-bottom-right a.footer-link-highlight:hover {
  color: #FFFFFF !important;
  background: var(--accent-red, #EF4444) !important;
  border-color: var(--accent-red, #EF4444) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

/* Separadores de enlaces (•) */
.footer-link-sep,
.dot-sep {
  color: rgba(255, 255, 255, 0.18) !important;
  font-size: 0.72rem !important;
  user-select: none !important;
  margin: 0 1px !important;
}

/* 4. Textos de Copyright y Metadatos */
.footer-copyright-text,
.home-bottom-left {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--text-secondary, #94A3B8) !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

/* 5. Contenedores de Footer (.footer-wrap, .footer-wrap-minimal, .home-bottom-bar) */
.footer-wrap {
  background: #101010 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-wrap-minimal {
  padding: 14px 0 !important;
  margin-top: 0 !important;
  background: #101010 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-wrap-minimal .footer-bottom {
  padding-top: 0 !important;
  border-top: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.home-bottom-bar {
  background: #101010 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 0 !important;
}

/* ==========================================================================
   FOOTER SIEMPRE EN MODO DARK (#101010) — Unificado
   ========================================================================== */
.footer-wrap,
.footer-wrap-minimal,
.home-bottom-bar,
[data-theme="light"] .footer-wrap,
[data-theme="light"] .footer-wrap-minimal,
[data-theme="light"] .home-bottom-bar {
  background: #101010 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}

.footer-col h5,
[data-theme="light"] .footer-col h5 {
  color: #FFFFFF !important;
}

.footer-links a,
[data-theme="light"] .footer-links a {
  color: #94A3B8 !important;
}

.footer-links a:hover,
[data-theme="light"] .footer-links a:hover {
  color: #FFFFFF !important;
}

.footer-copyright-text,
.home-bottom-left,
[data-theme="light"] .footer-copyright-text,
[data-theme="light"] .home-bottom-left {
  color: #94A3B8 !important;
}

.footer-bottom-links a,
.home-bottom-right a,
[data-theme="light"] .footer-bottom-links a,
[data-theme="light"] .footer-bottom-links a:link,
[data-theme="light"] .footer-bottom-links a:visited,
[data-theme="light"] .home-bottom-right a,
[data-theme="light"] .home-bottom-right a:link,
[data-theme="light"] .home-bottom-right a:visited {
  color: #CBD5E1 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer-bottom-links a:hover,
.home-bottom-right a:hover,
[data-theme="light"] .footer-bottom-links a:hover,
[data-theme="light"] .home-bottom-right a:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.footer-bottom-links a:active,
.home-bottom-right a:active,
[data-theme="light"] .footer-bottom-links a:active,
[data-theme="light"] .home-bottom-right a:active {
  background: rgba(255, 255, 255, 0.16) !important;
}

.footer-bottom-links a.footer-link-highlight,
.home-bottom-right a.footer-link-highlight,
[data-theme="light"] .footer-bottom-links a.footer-link-highlight,
[data-theme="light"] .home-bottom-right a.footer-link-highlight {
  color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.footer-bottom-links a.footer-link-highlight:hover,
.home-bottom-right a.footer-link-highlight:hover,
[data-theme="light"] .footer-bottom-links a.footer-link-highlight:hover,
[data-theme="light"] .home-bottom-right a.footer-link-highlight:hover {
  color: #FFFFFF !important;
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

[data-theme="light"] .footer-link-sep,
[data-theme="light"] .dot-sep {
  color: #CBD5E1 !important;
}

[data-theme="light"] .badge-framework {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border-color: #FECACA !important;
}

/* ==========================================================================
   FOOTER MOBILE ERGONOMICS (<= 768px) — CENTRADO TOTAL DE TODOS LOS OBJETOS
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Contenedores Principales del Footer */
  .footer-wrap,
  .footer-wrap-minimal,
  .home-bottom-bar,
  .page-home-wrapper .footer-wrap,
  .page-contact-wrapper .footer-wrap,
  .mkteam-page-wrapper .footer-wrap,
  .page-products-wrapper .footer-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 24px 16px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 2. Contenedor Interior .container */
  .footer-wrap .container,
  .footer-wrap-minimal .container,
  .home-bottom-bar .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* 3. Contenedor .footer-bottom */
  .footer-wrap .footer-bottom,
  .footer-wrap-minimal .footer-bottom,
  .footer-bottom,
  .home-bottom-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  /* 4. Párrafo de Copyright y Metadatos — Block Centrado (Evita flex-start residual) */
  .footer-copyright-text,
  .home-bottom-left,
  [data-theme="light"] .footer-copyright-text,
  [data-theme="light"] .home-bottom-left {
    order: 1 !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
  }

  /* 5. Marca MÖDEN y letras destacadas */
  .footer-brand-mark,
  .footer-copyright-text .footer-brand-mark,
  .footer-copyright-text .brand-o-red {
    display: inline-block !important;
    text-align: center !important;
    vertical-align: baseline !important;
  }

  /* 6. Contenedor de Enlaces Legales y Contacto */
  .footer-bottom-links,
  .home-bottom-right,
  [data-theme="light"] .footer-bottom-links,
  [data-theme="light"] .home-bottom-right {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 8px 10px !important;
  }

  /* 7. Botones y Enlaces individuales perfectamente centrados y ergonómicos */
  .footer-bottom-links a,
  .home-bottom-right a,
  [data-theme="light"] .footer-bottom-links a,
  [data-theme="light"] .home-bottom-right a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    flex: 0 0 auto !important;
  }

  /* 8. Separadores de puntos: Ocultos en móvil para una grilla simétrica sin viñetas descolgadas */
  .footer-link-sep,
  .footer-wrap .footer-link-sep,
  .footer-wrap-minimal .footer-link-sep,
  .dot-sep {
    display: none !important;
  }
}

/* ==========================================================================
   NUEVA SECCIÓN: WEB EMPRENDEDORES & PYMES (EXPERIENCIA LIMPIA Y DIRECTA)
   ========================================================================== */

/* Hero Limpio sin Imagen de Fondo ni Sombras Neón */
.pymes-hero-fullscreen {
  position: relative;
  width: 100%;
  background: var(--bg-main);
  padding: 60px 0 70px;
  border-bottom: 1px solid var(--border-subtle);
}

.pymes-hero-content {
  position: relative;
  width: 100%;
}

.pymes-hero-eyebrow {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 16px;
}

.pymes-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.14;
  color: var(--text-main);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  max-width: 900px;
}

.pymes-hero-title .title-accent {
  color: var(--accent-red);
}

.pymes-hero-lead {
  font-size: clamp(1.05rem, 1.3vw, 1.22rem);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 30px;
  max-width: 820px;
}

.pymes-hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.pymes-trust-checklist {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.90rem;
  color: var(--text-main);
  font-weight: 600;
}

.pymes-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pymes-trust-item svg {
  color: #10B981;
}

/* 3 Cuadros Informativos de Necesidad (Simetría y Proporcionalidad) */
.pymes-need-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.pymes-need-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 26px 22px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.pymes-need-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pymes-need-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.pymes-need-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 10px;
  line-height: 1.35;
}

.pymes-need-card-desc {
  font-size: 0.90rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Tabla Comparativa sin Tecnicismos (Cotidiana, Limpia y sin Neón) */
.pymes-comparison-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pymes-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
}

.pymes-section-tag {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-red);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pymes-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.22;
  margin-bottom: 14px;
}

.pymes-section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.pymes-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pymes-comp-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pymes-comp-card.moden-card {
  border: 2px solid var(--accent-red);
  background: var(--bg-card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transform: none;
}

.pymes-comp-badge {
  display: inline-block;
  background: var(--accent-red);
  color: #FFFFFF;
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  margin-bottom: 12px;
  box-shadow: none;
}

.pymes-comp-badge.neutral {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.pymes-comp-header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.pymes-comp-title {
  font-family: var(--font-heading);
  font-size: 1.30rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.pymes-comp-price {
  font-size: 0.92rem;
  color: var(--accent-red);
  font-weight: 700;
  margin-bottom: 4px;
}

.pymes-comp-price.neutral {
  color: var(--text-secondary);
  font-weight: 600;
}

.pymes-comp-caption {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pymes-comp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.pymes-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pymes-comp-item.positive {
  color: var(--text-main);
}

.pymes-comp-item.positive .comp-icon {
  color: #10B981;
  font-weight: 800;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.pymes-comp-item.negative .comp-icon {
  color: #EF4444;
  font-weight: 800;
  flex-shrink: 0;
  font-size: 0.95rem;
}

/* Alcance Incluido (Qué te entregamos) */
.pymes-scope-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pymes-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.pymes-scope-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.pymes-scope-card:hover {
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-3px);
}

.pymes-scope-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pymes-scope-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.pymes-scope-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Preguntas Frecuentes Cotidianas */
.pymes-faq-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pymes-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pymes-faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px 22px;
}

.pymes-faq-q {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pymes-faq-q-badge {
  color: var(--accent-red);
  font-weight: 900;
}

.pymes-faq-a {
  font-size: 0.90rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* MODO CLARO (LIGHT THEME) */
[data-theme="light"] .pymes-need-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .pymes-comp-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

[data-theme="light"] .pymes-comp-card.moden-card {
  background: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .pymes-scope-card,
[data-theme="light"] .pymes-faq-item {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

/* Responsive */
@media (max-width: 991px) {
  .pymes-need-cards-grid {
    grid-template-columns: 1fr;
  }
  .pymes-comparison-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pymes-faq-grid {
    grid-template-columns: 1fr;
  }
  .pymes-hero-fullscreen {
    padding: 40px 0 50px;
  }
}

/* ==========================================================================
   MÖDEN STACK (TETRIS ARCHITECTURE) ARCADE GAME STYLES
   ========================================================================== */
.moden-tetris-overlay {
    background: radial-gradient(circle at center, #070d1d 0%, #03060c 100%) !important;
}

.tetris-hud-bar {
    border-bottom: 1px solid rgba(0, 240, 255, 0.28) !important;
    background: rgba(5, 10, 22, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 240, 255, 0.08) !important;
}

.text-cyan { color: #00F0FF !important; text-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important; }
.text-green { color: #10B981 !important; text-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important; }
.text-purple { color: #A855F7 !important; text-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important; }
.text-amber { color: #FBBF24 !important; text-shadow: 0 0 10px rgba(251, 191, 36, 0.4) !important; }

.tetris-game-layout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    flex: 1 !important;
    padding: 14px 24px !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.tetris-side-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 210px !important;
    flex-shrink: 0 !important;
}

.tetris-sub-box {
    background: rgba(13, 20, 36, 0.85) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-align: center !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 240, 255, 0.03) !important;
}

.tetris-box-title {
    font-family: monospace !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #67E8F9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
}

.tetris-mini-canvas-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #040712 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    min-height: 90px !important;
}

.tetris-box-hint {
    font-size: 0.66rem !important;
    color: #64748B !important;
    margin-top: 6px !important;
    font-weight: 600 !important;
}

.tetris-stack-legend {
    background: rgba(13, 20, 36, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 0.72rem !important;
}

.tsl-title {
    font-family: monospace !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    color: #00F0FF !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.tsl-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #94A3B8 !important;
    margin-bottom: 4px !important;
    font-size: 0.7rem !important;
}

.tsl-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.tetris-main-board {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 100% !important;
}

.tetris-board-frame {
    position: relative !important;
    border: 2px solid rgba(0, 240, 255, 0.45) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 35px rgba(0, 240, 255, 0.22), inset 0 0 30px rgba(0, 0, 0, 0.9) !important;
    background: #030610 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.moden-tetris-canvas {
    display: block !important;
    max-height: calc(100vh - 120px) !important;
}

.tetris-mission-capsule {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(0, 240, 255, 0.1)) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-align: center !important;
}

.tmc-badge {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: #FBBF24 !important;
    letter-spacing: 0.05em !important;
}

.tmc-goal {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    margin: 4px 0 !important;
    font-family: monospace !important;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4) !important;
}

.tmc-desc {
    font-size: 0.68rem !important;
    color: #94A3B8 !important;
    line-height: 1.35 !important;
}

.tetris-board-alert {
    position: absolute !important;
    top: 35% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(3, 7, 18, 0.92) !important;
    border: 2px solid #00F0FF !important;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.6) !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-family: monospace !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #00F0FF !important;
    letter-spacing: 0.08em !important;
    pointer-events: none !important;
    z-index: 20 !important;
    white-space: nowrap !important;
}

/* Virtual Mobile Controls */
.tetris-touch-controls {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 10px;
    right: 10px;
    justify-content: space-between;
    align-items: center;
    z-index: 30;
    pointer-events: auto;
}

.ttc-left-group,
.ttc-right-group {
    display: flex;
    gap: 8px;
}

.btn-ttc {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid rgba(0, 240, 255, 0.35);
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    touch-action: manipulation;
    user-select: none;
}

.btn-ttc:active {
    background: rgba(0, 240, 255, 0.3);
    border-color: #00F0FF;
    transform: scale(0.94);
}

.btn-ttc-hold {
    font-size: 0.68rem;
    font-family: monospace;
    font-weight: 800;
    color: #67E8F9;
}

.btn-ttc-rot {
    color: #A855F7;
    border-color: rgba(168, 85, 247, 0.4);
    font-size: 1.25rem;
}

.btn-ttc-down {
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.4);
    font-size: 1.25rem;
}

.btn-ttc-drop {
    font-size: 0.68rem;
    font-family: monospace;
    font-weight: 900;
    color: #FBBF24;
    border-color: rgba(251, 191, 36, 0.4);
    width: 60px;
}

/* Tetris Briefing & Game Over Themes */
.tetris-briefing-neon {
    border-color: rgba(0, 240, 255, 0.4) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 240, 255, 0.15) !important;
}

.chip-tetris {
    background: rgba(0, 240, 255, 0.14) !important;
    border: 1px solid rgba(0, 240, 255, 0.45) !important;
    color: #67E8F9 !important;
}

.btn-tetris-neon {
    background: linear-gradient(135deg, #0891B2 0%, #00F0FF 100%) !important;
    color: #04060B !important;
    font-weight: 900 !important;
    border: 1px solid #67E8F9 !important;
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.5) !important;
}

.btn-tetris-neon:hover {
    background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%) !important;
    color: #000000 !important;
    box-shadow: 0 6px 28px rgba(0, 240, 255, 0.7) !important;
    transform: translateY(-1px) !important;
}

.tetris-game-over-card {
    border-color: rgba(0, 240, 255, 0.45) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 240, 255, 0.2) !important;
}

#tetrisGameOverCard .stat-num.text-green {
    color: #10B981 !important;
    text-shadow: 0 0 14px rgba(16, 185, 129, 0.4) !important;
}

@media (max-width: 900px) {
    .tetris-side-panel {
        width: 140px !important;
    }
    .tetris-stack-legend {
        display: none !important;
    }
    .moden-tetris-canvas {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .tetris-game-layout {
        gap: 8px !important;
        padding: 4px 8px !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    .tetris-side-panel {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .tetris-side-left .tetris-sub-box,
    .tetris-side-right .tetris-sub-box {
        padding: 4px 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .tetris-side-left .tetris-box-title,
    .tetris-side-right .tetris-box-title {
        font-size: 0.62rem !important;
    }
    .tetris-box-hint {
        display: none !important;
    }
    .tetris-side-right .tetris-mission-capsule {
        display: none !important;
    }
    .tetris-touch-controls {
        display: flex !important;
        position: absolute !important;
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        justify-content: space-between !important;
        z-index: 50 !important;
    }
    .ttc-left-group,
    .ttc-right-group {
        display: flex !important;
        gap: 6px !important;
    }
    .btn-ttc {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        background: rgba(15, 23, 42, 0.9) !important;
        border: 1px solid rgba(0, 240, 255, 0.35) !important;
    }
    .btn-ttc-hold,
    .btn-ttc-drop {
        font-size: 0.62rem !important;
        width: 46px !important;
    }
    .moden-tetris-canvas {
        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 160px) !important;
        max-height: calc(100dvh - 160px) !important;
    }
    .arcade-bottom-bar {
        display: none !important;
    }
}

/* ==========================================================================
   NUEVA SECCIÓN: MKTEAM SPACE — DOSSIER COMERCIAL OFICIAL (SAAS ENTERPRISE)
   ========================================================================== */

.mkteam-page-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 90px;
}

.mkteam-dossier-hero {
  position: relative;
  padding: 50px 0 40px;
  border-bottom: 1px solid var(--border-subtle);
}

.mkteam-dossier-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.mkteam-dossier-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: 999px;
}

.mkteam-dossier-brand .brand-badge {
  background: #2563EB;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.mkteam-exclusive-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D97706;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
}

[data-theme="light"] .mkteam-exclusive-chip {
  color: #B45309;
  background: #FEF3C7;
  border-color: #FDE68A;
}

.mkteam-platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #38BDF8;
  margin-bottom: 14px;
}

.mkteam-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1.12;
  color: var(--text-main);
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  max-width: 960px;
}

.mkteam-hero-title .title-highlight {
  background: linear-gradient(135deg, #38BDF8 0%, #2563EB 50%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mkteam-hero-desc {
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.68;
  max-width: 880px;
  margin: 0 0 28px;
}

/* 4 Feature Pills Row */
.mkteam-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.mkteam-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.mkteam-pill-item .pill-ico {
  font-size: 1.05rem;
}

.mkteam-hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

/* Mockup Showcase Frame */
.mkteam-showcase-frame,
[data-theme="light"] .mkteam-showcase-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 0, 0, 0.3);
  padding: 24px;
  margin-bottom: 50px;
}

.mkteam-showcase-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 4 Metrics Strip */
.mkteam-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 60px;
}

.mkteam-metric-card {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mkteam-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover) !important;
}

.mkteam-metric-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}

.mkteam-metric-val {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.15;
  margin-bottom: 4px;
  display: block;
}

.mkteam-metric-sub {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: block;
}

/* Section Common Headers */
.mkteam-section-block {
  padding: 50px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.mkteam-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563EB;
  margin-bottom: 10px;
}

.mkteam-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.mkteam-section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 820px;
  margin-bottom: 36px;
}

/* Features Cards Grid (Sección 1) */
.mkteam-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

.mkteam-feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mkteam-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.mkteam-feature-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mkteam-feature-icon {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mkteam-feature-title {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
}

.mkteam-feature-lead {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.58;
  margin-bottom: 18px;
}

.mkteam-feature-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 16px;
}

.mkteam-feature-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.mkteam-feature-bullets li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: #2563EB;
  font-size: 1.1rem;
  line-height: 1;
}

/* Integrations Grid (Sección 2) */
.mkteam-integrations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.mkteam-integration-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.mkteam-integration-card:hover {
  transform: translateY(-2px);
  border-color: #38BDF8;
}

.mkteam-integ-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563EB;
  background: rgba(37, 99, 235, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.mkteam-integ-title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.mkteam-integ-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.58;
  margin: 0;
}

/* ==========================================================================
   MKTeam Space Interactive Pricing & Licensing Showcase (Matches MKTeam.space)
   ========================================================================== */

.mkteam-pricing-header {
  margin-bottom: 28px;
}

.mkteam-pricing-header .mkteam-pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.mkteam-pricing-header .eyebrow-dot {
  color: #3B82F6;
  font-size: 1.1rem;
  line-height: 0;
}

.mkteam-pricing-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.mkteam-pricing-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Segmented Pill Switcher Tabs */
.mkteam-switcher-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 34px;
}

.mkteam-segmented-pills {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.mkteam-pill-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mkteam-pill-tab:hover {
  color: var(--text-main);
}

.mkteam-pill-tab.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

[data-theme="dark"] .mkteam-pill-tab.active {
  background: #1E293B;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.mkteam-pill-tab .pill-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.mkteam-pill-tab .pill-badge-emerald {
  background: #10B981;
  color: #FFFFFF;
}

.mkteam-pill-tab .pill-badge-amber {
  background: #F59E0B;
  color: #0F172A;
}

/* Interactive 2-Column Showcase Box */
.mkteam-pricing-showcase-box {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
  margin-bottom: 50px;
}

[data-theme="dark"] .mkteam-pricing-showcase-box {
  background: #0C101A;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* Left Column: Plan Card Panels */
.mkteam-plan-col {
  position: relative;
  border-right: 1px solid var(--border-subtle);
  padding-right: 36px;
}

.mkteam-plan-panel {
  display: none;
  flex-direction: column;
  height: 100%;
}

.mkteam-plan-panel.active {
  display: flex;
  animation: mkPlanFadeIn 0.25s ease-out;
}

@keyframes mkPlanFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mkteam-card-top-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 14px;
  width: fit-content;
}

.mkteam-card-top-tag.tag-blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .mkteam-card-top-tag.tag-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
  border-color: rgba(59, 130, 246, 0.3);
}

.mkteam-card-top-tag.tag-neutral {
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.mkteam-card-top-tag.tag-gold {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .mkteam-card-top-tag.tag-gold {
  background: rgba(245, 158, 11, 0.18);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.35);
}

.mkteam-card-plan-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.mkteam-card-plan-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.48;
  margin-bottom: 22px;
  min-height: 42px;
}

.mkteam-card-price-block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.mkteam-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.mkteam-card-price-row .price-val {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
}

.mkteam-card-price-row .price-unit {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
}

.mkteam-card-savings-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.mkteam-card-savings-pill.pill-green {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  font-weight: 600;
}

[data-theme="dark"] .mkteam-card-savings-pill.pill-green {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}

.mkteam-card-savings-pill.pill-neutral {
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.mkteam-card-savings-pill.pill-gold {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
}

[data-theme="dark"] .mkteam-card-savings-pill.pill-gold {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;
}

.mkteam-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mkteam-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.45;
}

.mkteam-card-features li .feat-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.mkteam-card-features li.item-highlight-emerald {
  background: rgba(16, 185, 129, 0.08);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #059669;
}

[data-theme="dark"] .mkteam-card-features li.item-highlight-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.25);
}

.mkteam-card-features li.item-disabled {
  color: var(--text-muted);
  opacity: 0.68;
}

.mkteam-card-actions {
  margin-top: auto;
}

.btn-mkteam-hire {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
}

.btn-hire-navy {
  background: #0F172A;
  color: #FFFFFF;
}

.btn-hire-navy:hover {
  background: #1E293B;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  color: #FFFFFF;
}

[data-theme="dark"] .btn-hire-navy {
  background: #1E293B;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .btn-hire-navy:hover {
  background: #334155;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.btn-hire-gold {
  background: #F59E0B;
  color: #0F172A;
}

.btn-hire-gold:hover {
  background: #D97706;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

.mkteam-demo-sublink {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 10px;
  transition: color 0.2s ease;
}

.mkteam-demo-sublink:hover {
  color: #2563EB;
}

.mkteam-card-trust-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.mkteam-card-trust-row .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Right Column: Characteristics & Standard Modules */
.mkteam-modules-col {
  display: flex;
  flex-direction: column;
}

.mkteam-modules-header {
  margin-bottom: 20px;
}

.mkteam-modules-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.mkteam-modules-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.01em;
  margin: 0;
}

.mkteam-badge-all-included {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
}

[data-theme="dark"] .mkteam-badge-all-included {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
}

.mkteam-modules-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Infrastructure Concept Table */
.mkteam-infra-table-wrap {
  margin: 18px 0 24px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
}

.mkteam-infra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.mkteam-infra-table th {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

[data-theme="dark"] .mkteam-infra-table th {
  background: rgba(255, 255, 255, 0.03);
}

.mkteam-infra-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
}

.mkteam-infra-table tr:last-child td {
  border-bottom: none;
}

.mkteam-infra-table .infra-concept {
  font-weight: 600;
  color: var(--text-secondary);
}

.mkteam-infra-table .infra-detail {
  font-weight: 600;
  color: var(--text-main);
}

/* 8 Modules 2-Column Grid */
.mkteam-features-2col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin-bottom: 24px;
}

.mkteam-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mkteam-feat-item .feat-check {
  flex-shrink: 0;
  margin-top: 2px;
}

.mkteam-feat-item .feat-texts {
  display: flex;
  flex-direction: column;
}

.mkteam-feat-item .feat-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}

.mkteam-feat-item .feat-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Bottom Verified Savings Strip */
.mkteam-savings-callout-row {
  margin-top: auto;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

[data-theme="dark"] .mkteam-savings-callout-row {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
}

.mkteam-savings-callout-row .savings-callout-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mkteam-savings-callout-row .savings-tag {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--text-main);
  letter-spacing: 0.02em;
}

.mkteam-savings-callout-row .savings-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.mkteam-btn-matriz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 16px;
  white-space: nowrap;
}

/* Responsive Overrides (Mobile / Tablet <= 1024px) */
@media (max-width: 1024px) {
  .mkteam-pricing-showcase-box {
    grid-template-columns: 1fr !important;
    gap: 30px;
    padding: 24px 18px;
  }

  .mkteam-plan-col {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding-right: 0;
    padding-bottom: 30px;
  }

  .mkteam-segmented-pills {
    width: 100%;
    max-width: 480px;
    justify-content: space-between;
  }

  .mkteam-pill-tab {
    padding: 8px 12px;
    font-size: 0.82rem;
    justify-content: center;
    flex: 1;
  }

  .mkteam-features-2col-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mkteam-savings-callout-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .mkteam-btn-matriz {
    width: 100%;
    justify-content: center;
  }
}

.mkteam-plan-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.mkteam-plan-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mkteam-plan-features-list li.item-highlight {
  color: var(--text-main);
  font-weight: 700;
}

.mkteam-plan-features-list li.item-disabled {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.7;
}

.mkteam-check-icon {
  color: #10B981;
  font-weight: 800;
  flex-shrink: 0;
}

.mkteam-cross-icon {
  color: #EF4444;
  font-weight: 800;
  flex-shrink: 0;
}

.mkteam-plan-btn {
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 8px;
  display: inline-block;
  text-decoration: none;
}

/* Comparison Table (Sección 3.1) */
.mkteam-table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  margin-bottom: 50px;
  box-shadow: var(--shadow-sm);
}

.mkteam-compare-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.mkteam-compare-table th {
  padding: 16px 20px;
  background: rgba(37, 99, 235, 0.08);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-subtle);
}

.mkteam-compare-table th.col-rec {
  background: rgba(37, 99, 235, 0.16);
  color: #2563EB;
}

.mkteam-compare-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  line-height: 1.45;
}

.mkteam-compare-table tr:last-child td {
  border-bottom: none;
}

.mkteam-compare-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .mkteam-compare-table tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

.mkteam-compare-table td.cell-rec {
  background: rgba(37, 99, 235, 0.04);
  font-weight: 600;
}

.mkteam-val-check {
  color: #10B981;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mkteam-val-cross {
  color: var(--text-muted);
}

/* Legal & Contact Boxes */
.mkteam-legal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 30px;
}

.mkteam-legal-box .legal-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.mkteam-legal-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.mkteam-legal-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.mkteam-cta-banner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border: 1px solid #2563EB;
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  color: #FFFFFF;
}

.mkteam-cta-banner h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 12px;
  color: #FFFFFF;
}

.mkteam-cta-banner p {
  color: #CBD5E1;
  font-size: 1.05rem;
  max-width: 650px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.mkteam-cta-banner-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

.mkteam-cta-banner-links a {
  color: #38BDF8;
  font-weight: 700;
  text-decoration: underline;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .mkteam-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  .mkteam-features-grid,
  .mkteam-integrations-grid {
    grid-template-columns: 1fr;
  }
  .mkteam-dossier-hero {
    padding: 30px 0;
  }
  .mkteam-showcase-frame {
    padding: 12px;
  }
  .mkteam-cta-banner {
    padding: 28px 20px;
  }
}

/* ==========================================================================
   MÖDEN STUDIO - SYSTEM VISUAL & MOBILE-FIRST ERGONOMIC ENHANCEMENTS
   Strict Anti-Emoji, 100dvh Viewport, Thumb Zone (< 768px), 48px Touch Targets
   ========================================================================== */

/* --- 100dvh Dynamic Viewport Support (Eliminates mobile browser toolbar jumping) --- */
@supports (height: 100dvh) {
  .app-layout { min-height: 100dvh !important; }
  .app-sidebar { height: 100dvh !important; }
  .sidebar-inner { min-height: 100dvh !important; }
  .page-home-wrapper { min-height: 100dvh !important; }
  .page-contact-wrapper { min-height: 100dvh !important; }
  .wizard-stage-full { min-height: calc(100dvh - 32px) !important; }
  .wizard-card-layout { min-height: min(690px, calc(100dvh - 44px)) !important; }
  .service-tab-pane { min-height: calc(100dvh - 120px); }
  .lightbox-modal { height: 100dvh !important; }
}

/* --- Mobile-First Touch Targets & Tactile Micro-Interactions --- */
@media (max-width: 768px) {
  /* Enforce minimum 48px touch targets on all interactive controls (excluding pill switches) */
  .btn,
  .btn-accent,
  .btn-outline,
  .btn-sm,
  .form-control,
  .form-select,
  .option-card {
    min-height: 48px;
    touch-action: manipulation;
  }

  /* Mobile Theme Switch: Exactly Identical to Desktop (Rectangular 58x28 with 6px radius) */
  .theme-toggle-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 58px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-radius: 6px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    overflow: hidden !important;
    background: #0B0C10 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    cursor: pointer !important;
  }

  [data-theme="light"] .theme-toggle-btn {
    background: #E5E7EB !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
  }

  .theme-toggle-btn .theme-slider {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 24px !important;
    height: 22px !important;
    background: var(--accent-red, #EF4444) !important;
    border-radius: 4px !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  [data-theme="dark"] .theme-toggle-btn .theme-slider,
  html:not([data-theme="light"]) .theme-toggle-btn .theme-slider {
    transform: translateX(28px) !important;
  }

  [data-theme="light"] .theme-toggle-btn .theme-slider {
    transform: translateX(0) !important;
  }

  .theme-toggle-btn .theme-icon-sun,
  .theme-toggle-btn .theme-icon-moon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    position: relative !important;
    transition: color var(--transition-fast) !important;
  }

  [data-theme="dark"] .theme-toggle-btn .theme-icon-moon,
  html:not([data-theme="light"]) .theme-toggle-btn .theme-icon-moon { color: #FFFFFF !important; }
  [data-theme="dark"] .theme-toggle-btn .theme-icon-sun,
  html:not([data-theme="light"]) .theme-toggle-btn .theme-icon-sun { color: #6B7280 !important; }
  [data-theme="light"] .theme-toggle-btn .theme-icon-sun { color: #FFFFFF !important; }
  [data-theme="light"] .theme-toggle-btn .theme-icon-moon { color: #6B7280 !important; }

  .btn-sm {
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
  }

  /* WhatsApp Floating Button: Completely Eliminated Site-wide */
  .whatsapp-float {
    display: none !important;
  }

  /* Responsive padding in Scoping Wizard & Contact to prevent layout overflow */
  .wizard-body-viewport {
    padding: 16px 12px !important;
  }
}

/* Tactile :active Feedback on Coarse/Touch Pointers (Instant 60 FPS scale) */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .btn-accent:active,
  .btn-outline:active,
  .option-card:active,
  .module-item-card:active,
  .service-select-card:active,
  .portfolio-card:active,
  .whatsapp-float:active {
    transform: scale(0.97) !important;
    transition: transform 0.08s ease !important;
  }
}

/* ==========================================================================
   Universal Fixed Sticky Bottom Bar for Cotizador (/leads)
   Fixed permanently at the bottom on desktop and mobile
   ========================================================================== */
.wizard-sticky-bottom-bar,
[data-theme="light"] .wizard-sticky-bottom-bar {
  display: block !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 280px !important;
  width: calc(100% - 280px) !important;
  right: 0 !important;
  z-index: 900 !important;
  background: #101010 !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-collapsed .wizard-sticky-bottom-bar {
  left: 80px !important;
  width: calc(100% - 80px) !important;
}

@media (max-width: 1024px) {
  .wizard-sticky-bottom-bar,
  [data-theme="light"] .wizard-sticky-bottom-bar {
    left: 0 !important;
    width: 100% !important;
  }
}

.wizard-sticky-bar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.wsb-status-zone {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wsb-step-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-red);
}

.wsb-step-name,
[data-theme="light"] .wsb-step-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF !important;
  white-space: nowrap;
}

.wsb-price-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wsb-price-label,
[data-theme="light"] .wsb-price-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94A3B8 !important;
}

.wsb-price-display-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wsb-price-amount,
[data-theme="light"] .wsb-price-amount {
  font-family: var(--font-heading, 'Khand', sans-serif) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #10B981 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.wsb-price-display-wrap .wbpc-discount-badge {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

.wsb-actions-zone {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wsb-actions-zone .btn-wizard-prev,
[data-theme="light"] .wsb-actions-zone .btn-wizard-prev {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}

.wsb-actions-zone .btn-wizard-prev:hover,
[data-theme="light"] .wsb-actions-zone .btn-wizard-prev:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #FFFFFF !important;
}

.wsb-actions-zone .btn {
  min-height: 44px;
  padding: 0 22px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Touch ergonomics & mobile responsive layout for sticky bottom bar */
@media (max-width: 768px) {
  .wizard-sticky-bar-inner {
    padding: 0 16px !important;
    gap: 12px !important;
  }

  .wsb-status-zone {
    display: none !important;
  }

  .wsb-price-zone {
    align-items: flex-start !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .wsb-price-amount {
    font-size: 1.15rem !important;
  }

  .wsb-actions-zone {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .wsb-actions-zone .btn {
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: 0.88rem !important;
  }
}

/* Ensure adequate breathing room for wizard content before the footer */
.wizard-main-stage {
  padding-bottom: 24px !important;
}

.scoping-wizard-page {
  padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
}

/* --- Skeleton Shimmer Utilities --- */
.skeleton-box {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card);
  border-radius: var(--radius-sm);
}

.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.06) 20%,
    rgba(255, 255, 255, 0.12) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: modenShimmer 1.8s infinite;
  content: '';
}

[data-theme="light"] .skeleton-box::after {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.04) 20%,
    rgba(0, 0, 0, 0.08) 60%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes modenShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* --- Premium Accessible Toast System (Strict Anti-Emoji, Vector SVGs) --- */
#toastContainer {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 40px);
}

@media (max-width: 768px) {
  #toastContainer {
    top: calc(72px + env(safe-area-inset-top, 0px));
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
}

.moden-toast {
  background: rgba(14, 15, 20, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  animation: toastSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

[data-theme="light"] .moden-toast {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.moden-toast-success {
  border-left: 4px solid #10B981;
}

.moden-toast-error {
  border-left: 4px solid #EF4444;
}

.moden-toast-info {
  border-left: 4px solid #3B82F6;
}

.moden-toast-warning {
  border-left: 4px solid #F59E0B;
}

.moden-toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moden-toast-success .moden-toast-icon { color: #10B981; }
.moden-toast-error .moden-toast-icon { color: #EF4444; }
.moden-toast-info .moden-toast-icon { color: #3B82F6; }
.moden-toast-warning .moden-toast-icon { color: #F59E0B; }

.moden-toast-body {
  flex: 1;
  word-break: break-word;
}

.moden-toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
  min-width: 36px;
  min-height: 36px;
}

.moden-toast-close:hover {
  color: var(--text-main);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   MOBILE HERO REFINEMENT: Step 3 Responsive & Anti-Overflow Architecture
   Zero horizontal overflow, 100% stacked touch-friendly controls
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevent any horizontal overflow site-wide on mobile screens */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .scoping-wizard-page,
  .wizard-viewport-wrapper,
  .wizard-main-stage {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .wizard-card-wide {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px 20px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .step3-central-dashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 10px !important;
  }

  .step3-dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 14px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .s3dc-header {
    gap: 10px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .s3dc-title {
    font-size: 0.98rem !important;
  }

  .s3dc-subtitle {
    font-size: 0.74rem !important;
    line-height: 1.3 !important;
  }

  /* Card 1: Domain Checker Elements - Clean Vertical Flow */
  .domain-fallback-top-zone {
    margin-bottom: 8px !important;
    width: 100% !important;
  }

  .domain-owned-pill {
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .domain-owned-text {
    font-size: 0.80rem !important;
    line-height: 1.35 !important;
  }

  .domain-checker-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .domain-input-group,
  .domain-input-with-prefix {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .domain-fixed-prefix {
    position: absolute !important;
    left: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--accent-red) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .domain-input-with-prefix .form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 52px !important;
    padding-right: 48px !important;
    height: 42px !important;
    font-size: 0.90rem !important;
  }

  .domain-tld-badge {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: var(--accent-red) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .domain-tld-pills {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .domain-tld-pills .tld-pill-btn {
    flex: 1 1 0 !important;
    width: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 6px !important;
    min-height: 40px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }

  #btnCheckDomain,
  .btn-check-domain {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  /* Card 2: Hosting Cloud NVMe - 100% Single Column Vertical List */
  .hosting-options-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .hosting-card {
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }

  .hosting-card .h-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  .hosting-card .h-name {
    font-size: 0.90rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
  }

  .hosting-card .h-price {
    font-family: var(--font-heading, 'Khand', sans-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #10B981 !important;
    white-space: nowrap !important;
  }

  .hosting-card .h-desc {
    font-size: 0.76rem !important;
    color: #94A3B8 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .hosting-card .h-card-tag {
    position: absolute !important;
    top: -7px !important;
    right: 12px !important;
    background: #10B981 !important;
    color: #FFFFFF !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
    z-index: 2 !important;
  }

  /* Card 2: Email Addons - Single Column */
  .email-options-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .email-box-card {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }

  .email-box-card .ebc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  .email-box-card .ebc-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
  }

  .email-box-card .ebc-title {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  .email-box-card .ebc-price {
    font-family: var(--font-heading, 'Khand', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #10B981 !important;
    white-space: nowrap !important;
  }

  .email-box-card .ebc-desc {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* Cotizador Fixed Sticky Bottom Bar Ergonomics - Permanent Dark Mode */
  .wizard-sticky-bottom-bar,
  [data-theme="light"] .wizard-sticky-bottom-bar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    background: #101010 !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  .wizard-sticky-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wsb-status-zone {
    display: none !important;
  }

  .wsb-price-zone {
    align-items: flex-start !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .wsb-price-label,
  [data-theme="light"] .wsb-price-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.5px !important;
    color: #94A3B8 !important;
  }

  .wsb-price-amount,
  [data-theme="light"] .wsb-price-amount {
    font-size: 1.10rem !important;
    color: #10B981 !important;
  }

  .wsb-actions-zone {
    gap: 8px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .wsb-actions-zone .btn {
    min-height: 42px !important;
    padding: 0 14px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }

  .wsb-actions-zone .btn-wizard-prev,
  [data-theme="light"] .wsb-actions-zone .btn-wizard-prev {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
  }

  /* Padding on mobile leads without footer */
  .scoping-wizard-page {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Light mode mobile text colors */
  [data-theme="light"] .hosting-card .h-name {
    color: #0F172A !important;
  }

  [data-theme="light"] .hosting-card .h-desc {
    color: #64748B !important;
  }
}

/* ==========================================================================
   MKTeam Space 3-Pillar Executive Grid & Dynamic Modals
   ========================================================================== */

.mkteam-pillars-overview-section {
  padding: 10px 0 50px;
}

.mkteam-pillars-overview-section .mkteam-section-eyebrow {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mkteam-pillars-overview-section .mkteam-section-title {
  text-align: center !important;
  width: 100% !important;
}

.mkteam-pillars-overview-section .mkteam-section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mkteam-pillars-3col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 24px;
}

.mkteam-pillar-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.mkteam-pillar-box:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mkteam-pillar-box:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(56, 189, 248, 0.12);
}

.pillar-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pillar-header-row .pillar-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.pillar-badge-full {
  width: 100%;
  display: block;
  text-align: center;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.pillar-badge-full.badge-blue {
  background: rgba(56, 189, 248, 0.12);
  color: #0284C7;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

[data-theme="dark"] .pillar-badge-full.badge-blue {
  color: #38BDF8;
}

.pillar-badge-full.badge-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .pillar-badge-full.badge-emerald {
  color: #34D399;
}

.pillar-badge-full.badge-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #9333EA;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

[data-theme="dark"] .pillar-badge-full.badge-purple {
  color: #C084FC;
}

.pillar-icon-chip {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mkteam-pillar-box:hover .pillar-icon-chip {
  transform: scale(1.08);
}

.pillar-icon-chip.icon-blue {
  background: rgba(56, 189, 248, 0.1);
  color: #0284C7;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .pillar-icon-chip.icon-blue {
  color: #38BDF8;
}

.pillar-icon-chip.icon-emerald {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .pillar-icon-chip.icon-emerald {
  color: #10B981;
}

.pillar-icon-chip.icon-purple {
  background: rgba(168, 85, 247, 0.1);
  color: #9333EA;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

[data-theme="dark"] .pillar-icon-chip.icon-purple {
  color: #A855F7;
}

.pillar-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 20px;
  flex-grow: 1;
}

.pillar-action {
  margin-top: auto;
}

.mkteam-btn-pillar {
  width: 100%;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: 9px;
  transition: all 0.2s ease;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mkteam-btn-pillar:hover {
  background: #101010;
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* ==========================================================================
   MKTeam Feature Modals (Fixed 90vh Desktop, 100vh Fullscreen Mobile)
   ========================================================================== */

.mkteam-feature-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.mkteam-feature-modal.active {
  display: flex !important;
  animation: modalFadeIn 0.2s ease-out;
}

.mkteam-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.mkteam-modal-dialog {
  position: relative;
  z-index: 10;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-xl, 16px);
  max-width: 980px;
  width: 94%;
  height: min(86vh, 850px) !important;
  max-height: calc(100vh - 60px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mkteam-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.mkteam-modal-title-group .pillar-badge {
  display: inline-block;
  margin-bottom: 6px;
}

.mkteam-modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A !important;
  margin: 0 0 4px;
}

.mkteam-modal-subtitle {
  font-size: 0.85rem;
  color: #64748B !important;
  line-height: 1.45;
  margin: 0;
  max-width: 760px;
}

.mkteam-modal-close {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #64748B !important;
  font-size: 1.6rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mkteam-modal-close:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

.mkteam-modal-body {
  padding: 24px 28px;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
  background: #F8FAFC !important;
}

.mkteam-modal-body .mkteam-feature-card,
.mkteam-modal-body .mkteam-integration-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

.mkteam-modal-body .mkteam-feature-title,
.mkteam-modal-body .mkteam-integ-name {
  color: #0F172A !important;
}

.mkteam-modal-body .mkteam-feature-lead,
.mkteam-modal-body .mkteam-integ-desc {
  color: #475569 !important;
}

.mkteam-modal-body .mkteam-feature-bullets li,
.mkteam-modal-body .mkteam-integ-list li {
  color: #334155 !important;
}

.mkteam-modal-body .mkteam-feature-bullets {
  border-top: 1px dashed #E2E8F0 !important;
}

.mkteam-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 28px;
  border-top: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.mkteam-modal-footer .btn-secondary {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}

.mkteam-modal-footer .btn-secondary:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

.mkteam-modal-footer .btn-primary {
  background: var(--accent-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: none !important;
}

.mkteam-modal-footer .btn-primary:hover {
  background: #DC2626 !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

/* ==========================================================================
   Planes & Licenciamiento Full Dark Mode (#0A0B0E - Deep Obsidian Black)
   ========================================================================== */

#planes.mkteam-section-block,
#planes {
  background: #101010 !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 50px !important;
}

#planes .mkteam-pricing-header .mkteam-pill-eyebrow {
  background: #141720 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #CBD5E1 !important;
}

#planes .mkteam-pricing-title {
  color: #FFFFFF !important;
  text-align: center !important;
}

#planes .mkteam-pricing-subtitle {
  color: #94A3B8 !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#planes .mkteam-segmented-pills {
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#planes .mkteam-pill-tab {
  color: #94A3B8 !important;
}

#planes .mkteam-pill-tab:hover {
  color: #FFFFFF !important;
}

#planes .mkteam-pill-tab.active {
  background: #101010 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

#planes .mkteam-pricing-showcase-box {
  background: #0D0F14 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
}

#planes .mkteam-plan-col {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

#planes .mkteam-card-top-tag.tag-blue {
  background: #161A24 !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

#planes .mkteam-card-top-tag.tag-neutral {
  background: #161A24 !important;
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#planes .mkteam-card-plan-name {
  color: #FFFFFF !important;
}

#planes .mkteam-card-plan-desc {
  color: #94A3B8 !important;
}

#planes .mkteam-card-price-block {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#planes .mkteam-card-price-row .price-val {
  color: #FFFFFF !important;
}

#planes .mkteam-card-price-row .price-unit {
  color: #94A3B8 !important;
}

#planes .mkteam-card-savings-pill.pill-neutral {
  background: #161A24 !important;
  color: #CBD5E1 !important;
}

#planes .mkteam-card-features li {
  color: #E2E8F0 !important;
}

#planes .btn-hire-navy {
  background: #161A24 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

#planes .btn-hire-navy:hover {
  background: #1E2330 !important;
  border-color: #38BDF8 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

#planes .mkteam-demo-sublink {
  color: #94A3B8 !important;
}

#planes .mkteam-demo-sublink:hover {
  color: #38BDF8 !important;
}

#planes .mkteam-card-trust-row {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #64748B !important;
}

#planes .mkteam-modules-title {
  color: #FFFFFF !important;
}

#planes .mkteam-modules-sub {
  color: #94A3B8 !important;
}

#planes .mkteam-infra-table-wrap {
  background: #10131A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#planes .mkteam-infra-table th {
  background: #161A24 !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#planes .mkteam-infra-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#planes .mkteam-infra-table .infra-concept {
  color: #CBD5E1 !important;
}

#planes .mkteam-infra-table .infra-detail {
  color: #FFFFFF !important;
}

#planes .mkteam-feat-item .feat-name {
  color: #FFFFFF !important;
}

#planes .mkteam-feat-item .feat-desc {
  color: #94A3B8 !important;
}

#planes .mkteam-savings-callout-row {
  background: #10131A !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#planes .mkteam-savings-callout-row .savings-tag {
  color: #FFFFFF !important;
}

#planes .mkteam-savings-callout-row .savings-sub {
  color: #94A3B8 !important;
}

/* ==========================================================================
   Garantía Legal (Fondo Blanco Original) y CTA Banner MKTeam
   ========================================================================== */
.mkteam-legal-cta-section {
  padding: 40px 0 20px !important;
  background: transparent !important;
}

.mkteam-legal-cta-section .mkteam-legal-box {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 32px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

.mkteam-legal-cta-section .mkteam-legal-title {
  color: #0F172A !important;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.mkteam-legal-cta-section .mkteam-legal-text {
  color: #475569 !important;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.mkteam-legal-cta-section .mkteam-legal-text strong {
  color: #0F172A !important;
}

.mkteam-legal-cta-section .mkteam-cta-banner {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  margin-bottom: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

.mkteam-page-wrapper .footer-wrap,
.page-products-wrapper .footer-wrap {
  margin-top: 30px !important;
}

/* ==========================================================================
   Mobile Responsive Adjustments for MKTeam Space (Fullscreen 100vh Modals)
   ========================================================================== */

@media (max-width: 991px) {
  .mkteam-pillars-3col-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .mkteam-feature-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }

  .mkteam-modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    background: #FFFFFF !important;
  }

  .mkteam-modal-header {
    padding: 16px 18px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  .mkteam-modal-title {
    font-size: 1.15rem;
    color: #0F172A !important;
  }

  .mkteam-modal-body {
    padding: 16px 18px !important;
    background: #F8FAFC !important;
  }

  .mkteam-modal-footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
  }
}

/* ==========================================================================
   DESKTOP & MOBILE SIDEBAR UNIFICADO (#101010) — Dark Base & High Contrast
   ========================================================================== */
.app-sidebar,
.sidebar-collapsed .app-sidebar,
.app-sidebar .sidebar-inner {
  background: #101010 !important;
  color: #FFFFFF !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.app-sidebar .sidebar-header {
  background: #101010 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.app-sidebar .sidebar-collapse-toggle {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.app-sidebar .sidebar-nav {
  background: #101010 !important;
}

/* Links en Estado Normal (Ambos Modos: Dark y Light) */
.app-sidebar .sidebar-link,
[data-theme="light"] .app-sidebar .sidebar-link,
.sidebar-link,
[data-theme="light"] .sidebar-link {
  color: #CBD5E1 !important;
  background: transparent !important;
}

.app-sidebar .sidebar-link .link-text,
[data-theme="light"] .app-sidebar .sidebar-link .link-text,
.sidebar-link .link-text,
[data-theme="light"] .sidebar-link .link-text {
  color: #CBD5E1 !important;
}

.app-sidebar .sidebar-link .sidebar-icon,
[data-theme="light"] .app-sidebar .sidebar-link .sidebar-icon,
.sidebar-link .sidebar-icon,
[data-theme="light"] .sidebar-link .sidebar-icon {
  color: #94A3B8 !important;
}

/* Hover: Fondo Blanco Translúcido y Tipografía Blanco Puro (Cero Azul) */
.app-sidebar .sidebar-link:hover,
[data-theme="light"] .app-sidebar .sidebar-link:hover,
.sidebar-link:hover,
[data-theme="light"] .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

.app-sidebar .sidebar-link:hover .link-text,
[data-theme="light"] .app-sidebar .sidebar-link:hover .link-text,
.sidebar-link:hover .link-text,
[data-theme="light"] .sidebar-link:hover .link-text {
  color: #FFFFFF !important;
}

.app-sidebar .sidebar-link:hover .sidebar-icon,
.app-sidebar .sidebar-link:hover svg,
[data-theme="light"] .app-sidebar .sidebar-link:hover .sidebar-icon,
[data-theme="light"] .app-sidebar .sidebar-link:hover svg,
.sidebar-link:hover .sidebar-icon,
.sidebar-link:hover svg,
[data-theme="light"] .sidebar-link:hover .sidebar-icon,
[data-theme="light"] .sidebar-link:hover svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Activo: Rojo Carmesí con Texto e Icono Blanco */
.app-sidebar .sidebar-link.active,
[data-theme="light"] .app-sidebar .sidebar-link.active,
.sidebar-link.active,
[data-theme="light"] .sidebar-link.active {
  background: var(--accent-red, #EF4444) !important;
  color: #FFFFFF !important;
}

.app-sidebar .sidebar-link.active .link-text,
[data-theme="light"] .app-sidebar .sidebar-link.active .link-text,
.sidebar-link.active .link-text,
[data-theme="light"] .sidebar-link.active .link-text {
  color: #FFFFFF !important;
}

.app-sidebar .sidebar-link.active .sidebar-icon,
.app-sidebar .sidebar-link.active svg,
[data-theme="light"] .app-sidebar .sidebar-link.active .sidebar-icon,
[data-theme="light"] .app-sidebar .sidebar-link.active svg,
.sidebar-link.active .sidebar-icon,
.sidebar-link.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.app-sidebar .sidebar-menu-label,
.app-sidebar .saas-title-label {
  color: #64748B !important;
}

.app-sidebar .sidebar-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

.app-sidebar .saas-app-tile {
  background: #242424 !important;
  color: #FFFFFF !important;
}

.app-sidebar .sidebar-footer {
  background: #101010 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.app-sidebar .theme-switch-label,
.app-sidebar .sidebar-legal {
  color: #64748B !important;
}

@media (max-width: 1024px) {
  .mobile-header {
    background: #101010 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
  }

  .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
  }
}

/* ==========================================================================
   2026 AUDIO REFINEMENT ENHANCEMENTS: DARK MODE & COMPONENT ELEVATIONS
   ========================================================================== */

/* 1. Services Page (/services) Dark Mode Boxes & Buttons */
.services-compare-btn-dark {
  background: #11141B !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  transition: var(--transition-fast) !important;
}

.services-compare-btn-dark:hover {
  background: #181C26 !important;
  border-color: var(--accent-red) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.services-process-box-dark {
  background: #0B0D13 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.services-process-box-dark h3 {
  color: #FFFFFF !important;
}

.services-process-box-dark p {
  color: #94A3B8 !important;
}

.services-process-box-dark .process-step-card {
  background: #12151E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.services-process-box-dark .step-number {
  color: #38BDF8 !important;
}

.services-process-box-dark .step-content h4 {
  color: #FFFFFF !important;
}

.services-process-box-dark .step-content p {
  color: #94A3B8 !important;
}

.services-cta-box-dark {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
}

.services-cta-box-dark h3 {
  color: #FFFFFF !important;
}

.services-cta-box-dark p {
  color: #CBD5E1 !important;
}

/* 2. Methodology Page (/metodologia) Guarantees & Bottom CTA */
[data-theme="light"] .guarantee-item-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .guarantee-item-card .guarantee-title,
[data-theme="light"] .guarantee-item-card h3 {
  color: #0F172A !important;
}

[data-theme="light"] .guarantee-item-card .guarantee-desc,
[data-theme="light"] .guarantee-item-card p {
  color: #475569 !important;
}

.guarantee-item-card {
  background: #11141B;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.25s ease;
}

.guarantee-item-card .guarantee-title,
.guarantee-item-card h3 {
  color: #FFFFFF;
}

.guarantee-item-card .guarantee-desc,
.guarantee-item-card p {
  color: #94A3B8;
}

.methodology-cta-dark {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
}

.methodology-cta-dark .section-tag,
.methodology-cta-dark .section-tag span {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.methodology-cta-dark .methodology-cta-title,
.methodology-cta-dark h2,
.methodology-cta-dark h3 {
  color: #FFFFFF !important;
}

.methodology-cta-dark .methodology-cta-desc,
.methodology-cta-dark p {
  color: #FFFFFF !important;
}

.methodology-btn-dark {
  background: #151923 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.methodology-btn-dark:hover {
  background: #1B2130 !important;
  border-color: #25D366 !important;
  color: #FFFFFF !important;
}

/* 3. Portfolio Page (/portafolio) Theme Adaptive Tabs */
[data-theme="light"] .filter-btn {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] .filter-btn:hover {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .filter-btn.active {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
}

.filter-btn,
.filter-btn.filter-btn-dark {
  background: #11141B !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #94A3B8 !important;
  transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.filter-btn-dark:hover {
  background: #181C26 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
}

.filter-btn.active,
.filter-btn.filter-btn-dark.active {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.4) !important;
}

/* 4. Software de Pago (/software/mkteam) */
.mkteam-platform-tag-plain {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #94A3B8;
  margin-bottom: 16px;
}

.mkteam-btn-pillar .pillar-btn-arrow {
  font-size: 1.15rem;
  display: inline-block;
  margin-left: 6px;
  line-height: 1;
}

.mkteam-pillar-box.pillar-box-active {
  border-color: var(--accent-red) !important;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2) !important;
}

.mkteam-inline-drawer {
  display: none;
  background: #0B0D13;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: drawerFadeSlideDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mkteam-inline-drawer.active {
  display: block;
}

@keyframes drawerFadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mkteam-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  flex-wrap: wrap;
}

.mkteam-drawer-title,
.mkteam-drawer-heading {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 8px 0 6px 0;
  letter-spacing: -0.01em;
}

.mkteam-drawer-subtitle {
  font-size: 0.95rem;
  color: #94A3B8;
  max-width: 800px;
  margin: 0;
  line-height: 1.55;
}

.mkteam-drawer-close-btn {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  transition: all 0.2s ease;
}

.mkteam-drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #FFFFFF !important;
}

.mkteam-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  flex-wrap: wrap;
}

/* Módulos de 6 Columnas (BovinoSAG & Drawers Avanzados) */
.mkteam-modules-6col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 992px) {
  .mkteam-modules-6col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mkteam-modules-6col-grid {
    grid-template-columns: 1fr;
  }
}

.mkteam-module-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mkteam-module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

.mkteam-module-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--accent-red, #EF4444);
  margin-bottom: 10px;
  letter-spacing: 0.08em;
}

.mkteam-module-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.mkteam-module-desc {
  font-size: 0.92rem;
  color: #94A3B8;
  line-height: 1.58;
  margin: 0;
}

/* ==========================================================================
   Light Mode Explicit Overrides for MKTeam & BovinoSAG Drawers
   ========================================================================== */
[data-theme="light"] .mkteam-inline-drawer {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .mkteam-drawer-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mkteam-drawer-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mkteam-drawer-title,
[data-theme="light"] .mkteam-drawer-heading {
  color: #0F172A !important;
}

[data-theme="light"] .mkteam-drawer-subtitle {
  color: #475569 !important;
}

[data-theme="light"] .mkteam-drawer-close-btn {
  color: #0F172A !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  background: transparent !important;
}

[data-theme="light"] .mkteam-drawer-close-btn:hover {
  background: #F1F5F9 !important;
  border-color: #0F172A !important;
}

[data-theme="light"] .mkteam-module-card {
  background: #F8FAFC !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .mkteam-module-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .mkteam-module-num {
  color: #DC2626 !important;
}

[data-theme="light"] .mkteam-module-title {
  color: #0F172A !important;
}

[data-theme="light"] .mkteam-module-desc {
  color: #475569 !important;
}

[data-theme="light"] .mkteam-inline-drawer .mkteam-feature-card {
  background: #F8FAFC !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .mkteam-inline-drawer .mkteam-feature-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
}

.mkteam-cta-banner,
.mkteam-legal-cta-section .mkteam-cta-banner {
  border-radius: 5px !important;
}

/* 5. Web Emprendedores (/web-pymes) */
.pymes-trust-creative-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .pymes-trust-creative-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .pymes-trust-creative-grid {
    grid-template-columns: 1fr;
  }
}

.pymes-trust-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #11141B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.pymes-trust-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
}

.ptb-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ptb-icon-wrap.icon-emerald {
  background: rgba(16, 185, 129, 0.14);
  color: #10B981;
}

.ptb-icon-wrap.icon-green {
  background: rgba(37, 211, 102, 0.14);
  color: #25D366;
}

.ptb-icon-wrap.icon-blue {
  background: rgba(56, 189, 248, 0.14);
  color: #38BDF8;
}

.ptb-icon-wrap.icon-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #F59E0B;
}

.ptb-text-wrap {
  text-align: left;
}

.ptb-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: #FFFFFF;
}

.ptb-desc {
  display: block;
  font-size: 0.75rem;
  color: #94A3B8;
  margin-top: 1px;
}

.pymes-scope-dark {
  background: #0B0D13 !important;
}

.pymes-scope-dark .pymes-section-title {
  color: #FFFFFF !important;
}

.pymes-scope-dark .pymes-section-subtitle {
  color: #94A3B8 !important;
}

.pymes-scope-dark .pymes-scope-card {
  background: #12151E !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.pymes-scope-dark .pymes-scope-card-title {
  color: #FFFFFF !important;
}

.pymes-scope-dark .pymes-scope-card-desc {
  color: #94A3B8 !important;
}

.pymes-scope-dark .pymes-scope-icon-wrap {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #38BDF8 !important;
}

.pymes-faq-2col-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: flex-start;
}

@media (max-width: 880px) {
  .pymes-faq-2col-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.pymes-faq-sticky-header {
  position: sticky;
  top: 96px;
}

.pymes-faq-support-box {
  background: #11141B;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.pfs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pfs-title {
  color: #FFFFFF;
  font-size: 0.96rem;
  font-weight: 700;
}

.pfs-text {
  color: #94A3B8;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 16px;
}

.pfs-btn {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.pfs-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #25D366;
  color: #25D366;
}

.pymes-faq-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pymes-cta-dark-box {
  background: #0B0D13 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 20px;
  padding: 56px 36px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

/* 6. Cotizador (/leads) Anchor to Top & Framed Bottom Price */
.wizard-main-stage {
  align-items: flex-start !important;
  padding-top: 24px !important;
}

.wtd-step-indicator-text {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
}

.wsb-price-zone,
[data-theme="light"] .wsb-price-zone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 6px 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.wsb-price-zone:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
}

.service-spacious-card {
  padding: 22px 24px !important;
}

.service-spacious-card .ssc-title {
  font-size: 1.15rem !important;
}

/* ==========================================================================
   Interactive Tabs-style FAQ Accordion Component (Single Active Item)
   Matches MKTeam Space / PyMEs 2-Column Split & Exclusive Tab Behavior
   ========================================================================== */
.universal-faq-section,
.mkteam-faq-section {
  padding: 80px 0;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.universal-faq-2col-layout,
.mkteam-faq-2col-layout {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 52px;
  align-items: flex-start;
}

@media (max-width: 992px) {
  .universal-faq-2col-layout,
  .mkteam-faq-2col-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.universal-faq-sticky-header,
.mkteam-faq-sticky-header {
  position: sticky;
  top: 96px;
}

@media (max-width: 992px) {
  .universal-faq-sticky-header,
  .mkteam-faq-sticky-header {
    position: static;
  }
}

.universal-faq-kicker,
.mkteam-faq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 6px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.universal-faq-kicker .kicker-dot,
.mkteam-faq-kicker .kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0F172A;
  display: inline-block;
}

[data-theme="dark"] .universal-faq-kicker,
[data-theme="dark"] .mkteam-faq-kicker {
  background: #1E293B;
  border-color: rgba(255, 255, 255, 0.15);
  color: #F8FAFC;
}

[data-theme="dark"] .universal-faq-kicker .kicker-dot,
[data-theme="dark"] .mkteam-faq-kicker .kicker-dot {
  background: #38BDF8;
}

.universal-faq-title,
.mkteam-faq-title {
  font-family: var(--font-heading, 'Khand', sans-serif);
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
  color: var(--text-main, #0F172A);
}

.universal-faq-subtitle,
.mkteam-faq-subtitle {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 24px 0;
  font-weight: 400;
}

[data-theme="dark"] .universal-faq-subtitle,
[data-theme="dark"] .mkteam-faq-subtitle {
  color: #94A3B8;
}

/* Dark Support Box */
.universal-faq-support-box,
.mkteam-faq-support-box {
  background: #101010 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.ufsb-head,
.mkteam-ufsb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ufsb-icon-chip,
.mkteam-ufsb-icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #129F9B;
  flex-shrink: 0;
}

.ufsb-head-texts,
.mkteam-ufsb-head-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ufsb-title,
.mkteam-ufsb-title {
  color: #FFFFFF !important;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
}

.ufsb-sub,
.mkteam-ufsb-sub {
  color: #94A3B8 !important;
  font-size: 0.76rem;
  line-height: 1.25;
}

.ufsb-text,
.mkteam-ufsb-text {
  color: #CBD5E1 !important;
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 18px 0;
}

.ufsb-btn-wa,
.mkteam-ufsb-btn-wa {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  background: #129F9B !important;
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 0.80rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(18, 159, 155, 0.35);
  box-sizing: border-box;
}

.ufsb-btn-wa:hover,
.mkteam-ufsb-btn-wa:hover {
  background: #0F8B87 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(18, 159, 155, 0.5);
  color: #FFFFFF !important;
}

/* FAQ Stack & Tab Cards */
.universal-faq-stack,
.mkteam-faq-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.universal-faq-item,
.mkteam-faq-item,
.pymes-faq-item-tab {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  user-select: none;
  position: relative;
}

[data-theme="dark"] .universal-faq-item,
[data-theme="dark"] .mkteam-faq-item,
[data-theme="dark"] .pymes-faq-item-tab {
  background: #141414;
  border-color: rgba(255, 255, 255, 0.1);
}

.universal-faq-item:hover:not(.active),
.mkteam-faq-item:hover:not(.active),
.pymes-faq-item-tab:hover:not(.active) {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .universal-faq-item:hover:not(.active),
[data-theme="dark"] .mkteam-faq-item:hover:not(.active),
[data-theme="dark"] .pymes-faq-item-tab:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.22);
}

/* Active State (Only 1 Active at a time - Tabs Behavior) */
.universal-faq-item.active,
.mkteam-faq-item.active,
.pymes-faq-item-tab.active {
  border-color: #0F172A !important;
  background: #F8FAFC !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="dark"] .universal-faq-item.active,
[data-theme="dark"] .mkteam-faq-item.active,
[data-theme="dark"] .pymes-faq-item-tab.active {
  border-color: #FFFFFF !important;
  background: #1C1C1C !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

.universal-faq-header,
.mkteam-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.universal-faq-header-left,
.mkteam-faq-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.universal-faq-num,
.mkteam-faq-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-weight: 800;
  color: #94A3B8;
  min-width: 24px;
  transition: color 0.2s;
}

.universal-faq-item.active .universal-faq-num,
.mkteam-faq-item.active .mkteam-faq-num,
.pymes-faq-item-tab.active .universal-faq-num {
  color: #0F172A;
}

[data-theme="dark"] .universal-faq-item.active .universal-faq-num,
[data-theme="dark"] .mkteam-faq-item.active .mkteam-faq-num,
[data-theme="dark"] .pymes-faq-item-tab.active .universal-faq-num {
  color: #FFFFFF;
}

.universal-faq-q,
.mkteam-faq-q {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.4;
  margin: 0;
  transition: color 0.2s;
}

[data-theme="dark"] .universal-faq-q,
[data-theme="dark"] .mkteam-faq-q {
  color: #FFFFFF;
}

.universal-faq-toggle,
.mkteam-faq-toggle {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: #0F172A;
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
  user-select: none;
}

[data-theme="dark"] .universal-faq-toggle,
[data-theme="dark"] .mkteam-faq-toggle {
  color: #FFFFFF;
}

.universal-faq-a,
.mkteam-faq-a {
  display: none;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #E2E8F0;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.7;
  padding-left: 38px;
}

.universal-faq-item.active .universal-faq-a,
.mkteam-faq-item.active .mkteam-faq-a,
.pymes-faq-item-tab.active .universal-faq-a {
  display: block;
  animation: faqSlideDown 0.25s ease-out;
}

[data-theme="dark"] .universal-faq-a,
[data-theme="dark"] .mkteam-faq-a {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #CBD5E1;
}

@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .universal-faq-item,
  .mkteam-faq-item,
  .pymes-faq-item-tab {
    padding: 16px 16px;
  }
  .universal-faq-a,
  .mkteam-faq-a {
    padding-left: 0;
  }
}

/* ==========================================================================
   ESTANDARIZACIÓN UNIVERSAL DE TÍTULOS DE SECCIÓN (~40px)
   ========================================================================== */
.section-title,
.mkteam-section-title,
.pymes-section-title,
.universal-faq-title,
.mkteam-faq-title,
.mkteam-pricing-title,
.methodology-cta-title,
.methodology-guarantees-title,
.cfc-title,
.product-section-title {
  font-family: var(--font-heading, 'Urbanist', sans-serif);
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
}

.universal-faq-title,
.mkteam-faq-title {
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .section-title,
  .mkteam-section-title,
  .pymes-section-title,
  .universal-faq-title,
  .mkteam-faq-title,
  .mkteam-pricing-title,
  .methodology-cta-title,
  .methodology-guarantees-title,
  .cfc-title,
  .product-section-title {
    font-size: clamp(28px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 480px) {
  .section-title,
  .mkteam-section-title,
  .pymes-section-title,
  .universal-faq-title,
  .mkteam-faq-title,
  .mkteam-pricing-title,
  .methodology-cta-title,
  .methodology-guarantees-title,
  .cfc-title,
  .product-section-title {
    font-size: clamp(25px, 7vw, 32px) !important;
    line-height: 1.22 !important;
  }
}