/* =============================================================
   Mi Chamba 4.0 — Design System Premium
   Plataforma Inclusiva de Empleo y Servicios Profesionales
   Municipalidad Distrital de Lurigancho-Chosica
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Twemoji Flag Sizing ── */
img.emoji {
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.1em;
  vertical-align: -0.15em;
  display: inline-block;
}
.mc-hero-trust-flags img.emoji,
.mc-integration-flags img.emoji {
  height: 1.6em;
  width: 1.6em;
  margin: 0 0.15em;
}
.mc-testimonial-avatar-flag img.emoji {
  height: 2em;
  width: 2em;
}

/* ── CSS Custom Properties (Design Tokens) ── */
:root {
  /* Primary colors */
  --mc-primary: #1a365d;
  --mc-primary-light: #2a4a7f;
  --mc-primary-dark: #0f2240;
  
  /* Accent colors */
  --mc-green: #38a169;
  --mc-green-light: #48bb78;
  --mc-green-dark: #276749;
  
  --mc-gold: #d69e2e;
  --mc-gold-light: #ecc94b;
  
  --mc-coral: #e53e3e;
  --mc-coral-light: #fc8181;
  
  /* Neutral */
  --mc-white: #ffffff;
  --mc-bg: #f7fafc;
  --mc-bg-warm: #fffff8;
  --mc-gray-50: #f8f9fa;
  --mc-gray-100: #edf2f7;
  --mc-gray-200: #e2e8f0;
  --mc-gray-300: #cbd5e0;
  --mc-gray-400: #a0aec0;
  --mc-gray-500: #718096;
  --mc-gray-600: #4a5568;
  --mc-gray-700: #2d3748;
  --mc-gray-800: #1a202c;
  --mc-gray-900: #171923;
  
  /* Gradients */
  --mc-gradient-hero: linear-gradient(135deg, #1a365d 0%, #2a4a7f 40%, #38a169 100%);
  --mc-gradient-gold: linear-gradient(135deg, #d69e2e 0%, #ecc94b 100%);
  --mc-gradient-green: linear-gradient(135deg, #276749 0%, #48bb78 100%);
  --mc-gradient-warm: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --mc-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  
  /* Typography */
  --mc-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mc-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  
  /* Shadows */
  --mc-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --mc-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --mc-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --mc-shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
  --mc-shadow-glow: 0 0 40px rgba(56,161,105,0.15);
  --mc-shadow-card: 0 4px 20px rgba(26,54,93,0.08);
  
  /* Border Radius */
  --mc-radius-sm: 8px;
  --mc-radius-md: 12px;
  --mc-radius-lg: 16px;
  --mc-radius-xl: 24px;
  --mc-radius-full: 9999px;
  
  /* Transitions */
  --mc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --mc-transition-fast: all 0.15s ease;
  --mc-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Glassmorphism */
  --mc-glass-bg: rgba(255, 255, 255, 0.85);
  --mc-glass-border: rgba(255, 255, 255, 0.3);
  --mc-glass-blur: blur(20px);
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.mc-body {
  font-family: var(--mc-font-primary);
  color: var(--mc-gray-700);
  background-color: var(--mc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ── Animations ── */
@keyframes mc-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mc-fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mc-fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mc-scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mc-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes mc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes mc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

@keyframes mc-slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mc-heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

.mc-animate-in {
  animation: mc-fadeInUp 0.6s ease-out both;
}

.mc-animate-in-delay-1 { animation-delay: 0.1s; }
.mc-animate-in-delay-2 { animation-delay: 0.2s; }
.mc-animate-in-delay-3 { animation-delay: 0.3s; }
.mc-animate-in-delay-4 { animation-delay: 0.4s; }
.mc-animate-in-delay-5 { animation-delay: 0.5s; }
.mc-animate-in-delay-6 { animation-delay: 0.6s; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM NAVBAR — Solución definitiva con máxima especificidad
   Selector: html body nav#id.class.class = (0,1,4,2)
   Gana a CUALQUIER regla de Bootstrap (max 0,0,3,0)
   Sin inline <style> hacks. Sin JS scroll listeners.
   ═══════════════════════════════════════════════════════════ */

/* ── Inline style overrides (moved from Blade layouts) ── */
.pb-4, .py-4 { padding-bottom: 0px !important; }

/* ── Base: Glassmorphism blanco transparente ── */
html body nav#mc-main-navbar.mc-navbar.navbar,
html body nav#mc-main-navbar.mc-navbar.navbar.mc-navbar-solid,
html body nav#mc-main-navbar.mc-navbar.navbar.scrolled-dark,
html body nav#mc-main-navbar.mc-navbar.navbar.scrolled-light {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  padding: 0.5rem 0;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  z-index: 1030;
  transition: box-shadow 0.25s ease, background 0.3s ease;
}

/* ── Brand / Logo (clean, no glow) ── */
html body nav#mc-main-navbar .mc-navbar-brand .mc-navbar-logo {
  height: clamp(45px, 6vw, 55px);
  width: auto;
  max-width: 350px;
  object-fit: contain;
  transition: all 0.25s ease;
  filter: none;
  opacity: 1;
}
html body nav#mc-main-navbar .mc-navbar-brand .mc-navbar-logo:hover {
  opacity: 0.85;
  transform: scale(1.02);
}


/* ── CTA Buttons in Navbar (Soy Empresa, etc) ── */
html body nav#mc-main-navbar .mc-btn-empresa {
  background: rgba(30,64,175,0.9);
  color: white !important;
  border-radius: 20px;
  padding: 0.4rem 1rem;
  border: none;
  transition: all 0.2s ease;
}
html body nav#mc-main-navbar .mc-btn-empresa:hover {
  background: rgba(30,64,175,1) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,64,175,0.3);
}
html body nav#mc-main-navbar .mc-btn-postulante {
  background: rgba(16,185,129,0.9);
  color: white !important;
  border-radius: 20px;
  border: none;
  transition: all 0.2s ease;
}
html body nav#mc-main-navbar .mc-btn-postulante:hover {
  background: rgba(16,185,129,1) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}
html body nav#mc-main-navbar .mc-btn-servicios {
  background: rgba(217,119,6,0.9);
  color: white !important;
  border-radius: 20px;
  border: none;
  transition: all 0.2s ease;
}
html body nav#mc-main-navbar .mc-btn-servicios:hover {
  background: rgba(217,119,6,1) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217,119,6,0.3);
}

/* ── Nav links: azul oscuro sobre fondo blanco ── */
html body nav#mc-main-navbar .mc-nav-link,
html body nav#mc-main-navbar .nav-link.mc-nav-link,
html body nav#mc-main-navbar .nav-link,
html body nav#mc-main-navbar .dropdown-toggle {
  font-family: var(--mc-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #1a365d !important;
  padding: 0.5rem 1rem;
  position: relative;
  transition: color 0.25s ease;
}

/* Hover → verde institucional */
html body nav#mc-main-navbar .mc-nav-link:hover,
html body nav#mc-main-navbar .nav-link:hover,
html body nav#mc-main-navbar .dropdown-toggle:hover {
  color: #0d7a47 !important;
  background: transparent !important;
}

/* ── Override inline style colors for special nav links ── */
html body nav#mc-main-navbar .mc-nav-link[style*="coral"],
html body nav#mc-main-navbar .nav-link[style*="coral"] {
  color: #e53e3e !important;
}
html body nav#mc-main-navbar .mc-nav-link[style*="gold"],
html body nav#mc-main-navbar .nav-link[style*="gold"] {
  color: #b7791f !important;
}
html body nav#mc-main-navbar .mc-nav-link[style*="green"],
html body nav#mc-main-navbar .nav-link[style*="green"],
html body nav#mc-main-navbar .dropdown-toggle[style*="green"] {
  color: #276749 !important;
}

/* Underline animada — solo desktop, verde institucional */
@media (min-width: 992px) {
  html body nav#mc-main-navbar .mc-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #0d7a47;
    transition: width 0.25s ease;
    transform: translateX(-50%);
  }
  html body nav#mc-main-navbar .mc-nav-link:hover::after {
    width: 80%;
  }
}

/* ── Mobile collapsed menu (dark for contrast) ── */
@media (max-width: 991px) {
  html body nav#mc-main-navbar .navbar-collapse {
    background: rgba(255, 255, 255, 0.82) !important;
    border-radius: 12px;
    margin-top: 0.5rem;
    padding: 1rem;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  }
  html body nav#mc-main-navbar .mc-nav-link,
  html body nav#mc-main-navbar .nav-link,
  html body nav#mc-main-navbar .dropdown-toggle {
    color: #1a365d !important;
    padding: 0.7rem 1rem !important;
    border-radius: 8px;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
  html body nav#mc-main-navbar .mc-nav-link:hover,
  html body nav#mc-main-navbar .nav-link:hover,
  html body nav#mc-main-navbar .dropdown-toggle:hover {
    color: #0d7a47 !important;
    background: rgba(13,122,71,0.06) !important;
  }
  html body nav#mc-main-navbar .nav-item {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important; /* Override inline margins */
    margin-right: 0 !important;
  }
  html body nav#mc-main-navbar .nav-item:last-child {
    border-bottom: none;
  }
}

/* ── Hamburger toggle (mobile) — dark icon for white navbar ── */
html body nav#mc-main-navbar .navbar-toggler {
  border: 1.5px solid rgba(26,54,93,0.25) !important;
  border-radius: 8px;
  padding: 6px 10px;
  background: rgba(26,54,93,0.05) !important;
  transition: all 0.2s ease;
}
html body nav#mc-main-navbar .navbar-toggler:hover {
  background: rgba(26,54,93,0.1) !important;
  border-color: rgba(26,54,93,0.4) !important;
}
html body nav#mc-main-navbar .navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13,122,71,0.15);
}
html body nav#mc-main-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26,54,93,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 24px;
  height: 24px;
}

/* ── Mobile: FORCE toggler visible + collapse toggle ── */
@media (max-width: 991px) {
  html body nav#mc-main-navbar .navbar-toggler {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
  }
  html body nav#mc-main-navbar .navbar-collapse {
    display: none !important;
  }
  html body nav#mc-main-navbar .navbar-collapse.show,
  html body nav#mc-main-navbar .navbar-collapse.collapsing {
    display: block !important;
  }
}

/* ── Dropdown menu ── */
html body nav#mc-main-navbar .dropdown-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  margin-top: 8px;
  animation: mc-slideDown 0.18s ease;
}
html body nav#mc-main-navbar .dropdown-item {
  color: #1a365d !important;
  font-size: 0.875rem;
  padding: 0.55rem 1rem;
  transition: background 0.15s, color 0.15s;
}
html body nav#mc-main-navbar .dropdown-item:hover {
  background: rgba(13,122,71,0.06) !important;
  color: #0d7a47 !important;
}
html body nav#mc-main-navbar .dropdown-divider {
  border-color: rgba(0,0,0,0.06);
}

/* ── Hover Dropdown (desktop) ── */
@media (min-width: 992px) {
  html body nav#mc-main-navbar .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  html body nav#mc-main-navbar .dropdown-toggle::after {
    border-top-color: currentColor;
    vertical-align: middle;
    margin-left: 4px;
  }
}

/* ── CTA in Navbar (Desktop) ── */
@media (min-width: 992px) {
  html body nav#mc-main-navbar .mc-cta-item {
    margin-left: 0.3rem;
  }
  html body nav#mc-main-navbar .mc-cta-item:first-of-type {
    margin-left: 0.5rem;
  }
  html body nav#mc-main-navbar .nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── Mobile Menu — Complete Homologation ── */
@media (max-width: 991px) {
  /* Menu container: flex column, centered */
  html body nav#mc-main-navbar .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.5rem 0 !important;
    gap: 0.5rem !important;
  }

  /* Nav links: full-width block, consistent height */
  html body nav#mc-main-navbar .mc-nav-link,
  html body nav#mc-main-navbar .nav-link {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
  }

  /* CTA buttons: full width container, properly centered */
  html body nav#mc-main-navbar .nav-item .mc-btn {
    width: 80% !important;
    max-width: 300px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    min-height: 45px !important;
    letter-spacing: 0 !important;
    gap: 0.5rem !important;
    margin: 0 auto !important;
  }

  /* Icon inside CTA buttons — smaller on mobile */
  html body nav#mc-main-navbar .nav-item .mc-btn i {
    font-size: 0.9rem !important;
  }
}

/* ── CTA Buttons ── */
.mc-btn {
  font-family: var(--mc-font-display);
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: var(--mc-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--mc-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mc-btn-empresa {
  background: var(--mc-primary);
  color: var(--mc-white);
  border-color: var(--mc-primary);
}

.mc-btn-empresa:hover {
  background: var(--mc-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26,54,93,0.3);
  color: var(--mc-white);
  text-decoration: none;
}

.mc-btn-postulante {
  background: var(--mc-green);
  color: var(--mc-white);
  border-color: var(--mc-green);
}

.mc-btn-postulante:hover {
  background: var(--mc-green-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(56,161,105,0.3);
  color: var(--mc-white);
  text-decoration: none;
}

.mc-btn-servicios {
  background: var(--mc-gradient-gold);
  color: var(--mc-gray-800);
  border-color: var(--mc-gold);
}

.mc-btn-servicios:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(214,158,46,0.3);
  color: var(--mc-gray-800);
  text-decoration: none;
}

.mc-btn-lg {
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
}

.mc-btn-outline {
  background: transparent;
  color: var(--mc-white);
  border-color: var(--mc-white);
}

.mc-btn-outline:hover {
  background: var(--mc-white);
  color: var(--mc-primary);
  text-decoration: none;
}

/* ── Hero Section ── */
.mc-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: var(--mc-gradient-hero);
  overflow: hidden;
  margin-top: 0;
  padding-top: 130px;
  padding-bottom: 3rem;
}

.mc-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(56,161,105,0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: mc-float 8s ease-in-out infinite;
}

.mc-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(214,158,46,0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: mc-float 6s ease-in-out infinite reverse;
}

.mc-hero-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
  color: var(--mc-white);
}

.mc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(56,161,105,0.2);
  border: 1px solid rgba(56,161,105,0.3);
  border-radius: var(--mc-radius-full);
  padding: 0.4rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mc-green-light);
  margin-bottom: 1.5rem;
  animation: mc-fadeInUp 0.6s ease-out both;
}

.mc-hero-title {
  font-family: var(--mc-font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  animation: mc-fadeInUp 0.6s ease-out 0.1s both;
}

.mc-hero-title .mc-highlight {
  background: var(--mc-gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mc-hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 2rem;
  animation: mc-fadeInUp 0.6s ease-out 0.2s both;
}

.mc-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation: mc-fadeInUp 0.6s ease-out 0.3s both;
}

.mc-hero-image {
  position: relative;
  z-index: 2;
  animation: mc-fadeInRight 0.8s ease-out 0.3s both;
}

.mc-hero-image img {
  max-width: 100%;
  border-radius: var(--mc-radius-xl);
  box-shadow: var(--mc-shadow-xl);
}

/* ── Integration Banner ── */
.mc-integration-banner {
  background: linear-gradient(135deg, #ffecd2 0%, #fff5eb 50%, #e6fffa 100%);
  padding: 2rem 0;
  text-align: center;
  border-bottom: 3px solid var(--mc-green);
}

.mc-integration-text {
  font-family: var(--mc-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--mc-primary);
  margin: 0;
}

.mc-integration-text .mc-heart {
  color: var(--mc-coral);
  display: inline-block;
  animation: mc-heartbeat 2s ease-in-out infinite;
}

.mc-integration-flags {
  font-size: 1.8rem;
  letter-spacing: 0.3rem;
  margin-top: 0.5rem;
}

.mc-integration-sub {
  font-size: 0.95rem;
  color: var(--mc-gray-600);
  margin-top: 0.5rem;
}

/* ── Search Section ── */
.mc-search-section {
  background: var(--mc-white);
  padding: 3rem 0;
  margin-top: -60px;
  position: relative;
  z-index: 10;
}

.mc-search-card {
  background: var(--mc-white);
  border-radius: var(--mc-radius-xl);
  box-shadow: var(--mc-shadow-xl);
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.mc-search-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-radius: var(--mc-radius-full);
  background: var(--mc-gray-100);
  padding: 4px;
}

.mc-search-tab {
  flex: 1;
  text-align: center;
  padding: 0.7rem 1.5rem;
  border-radius: var(--mc-radius-full);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--mc-transition);
  border: none;
  background: transparent;
  color: var(--mc-gray-500);
}

.mc-search-tab.active {
  background: var(--mc-primary);
  color: var(--mc-white);
  box-shadow: var(--mc-shadow-md);
}

.mc-search-tab:hover:not(.active) {
  color: var(--mc-gray-700);
  background: var(--mc-gray-200);
}

.mc-search-input-group {
  display: flex;
  gap: 0.75rem;
}

.mc-search-input {
  flex: 1;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--mc-gray-200);
  border-radius: var(--mc-radius-md);
  font-size: 1rem;
  font-family: var(--mc-font-primary);
  transition: var(--mc-transition);
  outline: none;
}

.mc-search-input:focus {
  border-color: var(--mc-green);
  box-shadow: 0 0 0 4px rgba(56,161,105,0.1);
}

.mc-search-btn {
  padding: 0.9rem 2rem;
  background: var(--mc-green);
  color: var(--mc-white);
  border: none;
  border-radius: var(--mc-radius-md);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--mc-transition);
  white-space: nowrap;
}

.mc-search-btn:hover {
  background: var(--mc-green-dark);
  transform: translateY(-1px);
}

/* ── Stats Section ── */
.mc-stats {
  padding: 4rem 0;
  background: var(--mc-white);
}

.mc-stat-card {
  text-align: center;
  padding: 2rem 1rem;
  animation: mc-countUp 0.6s ease-out both;
}

.mc-stat-number {
  font-family: var(--mc-font-display);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--mc-primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.mc-stat-number .mc-stat-plus {
  color: var(--mc-green);
}

.mc-stat-label {
  font-size: 0.95rem;
  color: var(--mc-gray-500);
  font-weight: 500;
}

.mc-stat-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  display: block;
}

/* ── Section Headers ── */
.mc-section {
  padding: 5rem 0;
}

.mc-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.mc-section-badge {
  display: inline-block;
  background: rgba(56,161,105,0.1);
  color: var(--mc-green);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.3rem 1rem;
  border-radius: var(--mc-radius-full);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.mc-section-title {
  font-family: var(--mc-font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--mc-gray-800);
  margin-bottom: 0.8rem;
}

.mc-section-subtitle {
  font-size: 1.05rem;
  color: var(--mc-gray-500);
  max-width: 600px;
  margin: 0 auto;
}

/* ── Job Cards ── */
.mc-job-card {
  background: var(--mc-white);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  box-shadow: var(--mc-shadow-card);
  transition: var(--mc-transition);
  border: 1px solid var(--mc-gray-100);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mc-job-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mc-shadow-xl);
  border-color: var(--mc-green-light);
}

.mc-job-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mc-job-company-logo {
  width: 60px;
  height: 60px;
  border-radius: var(--mc-radius-md);
  object-fit: cover;
  border: 2px solid var(--mc-gray-100);
  margin-bottom: 1rem;
}

.mc-job-company {
  font-size: 0.85rem;
  color: var(--mc-gray-500);
  margin-bottom: 0.3rem;
}

.mc-job-title {
  font-family: var(--mc-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mc-gray-800);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.mc-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.mc-job-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--mc-radius-full);
  background: var(--mc-gray-100);
  color: var(--mc-gray-600);
  font-weight: 500;
}

.mc-job-tag-location {
  background: rgba(56,161,105,0.1);
  color: var(--mc-green-dark);
}

.mc-job-tag-date {
  background: rgba(26,54,93,0.08);
  color: var(--mc-primary);
}

/* ── Job Card Footer — Rediseño profesional (LinkedIn/Indeed/Workday) ── */
.mc-job-card-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--mc-gray-100);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #FAFBFC;
}

/* Row 1: badges de inclusión */
.mc-job-footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* Row 2: boton */
.mc-job-footer-cta {
  display: flex;
  justify-content: flex-end;
}

.mc-job-apply-btn {
  background: var(--mc-green);
  color: #fff;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: var(--mc-radius-full);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--mc-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.01em;
}

.mc-job-apply-btn:hover {
  background: var(--mc-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56,161,105,0.3);
  color: #fff;
  text-decoration: none;
}

/* ── Service Categories ── */
.mc-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
}

.mc-category-card {
  background: var(--mc-white);
  border-radius: var(--mc-radius-lg);
  padding: 1.8rem 1rem;
  text-align: center;
  border: 2px solid var(--mc-gray-100);
  transition: var(--mc-transition);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.mc-category-card:hover {
  border-color: var(--mc-green);
  transform: translateY(-4px);
  box-shadow: var(--mc-shadow-lg);
  text-decoration: none;
}

.mc-category-emoji {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  display: block;
}

.mc-category-name {
  font-family: var(--mc-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--mc-gray-700);
}

.mc-category-count {
  font-size: 0.8rem;
  color: var(--mc-gray-400);
  margin-top: 0.3rem;
}

/* ── Professional Cards (Marketplace) ── */
.mc-pro-card {
  background: var(--mc-white);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  box-shadow: var(--mc-shadow-card);
  transition: var(--mc-transition);
  border: 1px solid var(--mc-gray-100);
}

.mc-pro-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mc-shadow-xl);
}

.mc-pro-card-header {
  position: relative;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mc-pro-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--mc-green-light);
  flex-shrink: 0;
}

.mc-pro-info h4 {
  font-family: var(--mc-font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: var(--mc-gray-800);
}

.mc-pro-flag {
  font-size: 1.1rem;
  margin-left: 0.3rem;
}

.mc-pro-category {
  font-size: 0.85rem;
  color: var(--mc-green);
  font-weight: 500;
}

.mc-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--mc-radius-full);
  font-weight: 600;
  margin-top: 0.3rem;
}

.mc-badge-verified {
  background: rgba(56,161,105,0.1);
  color: var(--mc-green);
}

.mc-badge-top {
  background: rgba(214,158,46,0.15);
  color: var(--mc-gold);
}

.mc-badge-certified {
  background: rgba(26,54,93,0.1);
  color: var(--mc-primary);
}

.mc-pro-card-body {
  padding: 0 1.5rem;
}

.mc-pro-description {
  font-size: 0.9rem;
  color: var(--mc-gray-500);
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mc-pro-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--mc-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Star Rating ── */
.mc-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mc-star {
  color: var(--mc-gold);
  font-size: 0.9rem;
}

.mc-star.empty {
  color: var(--mc-gray-300);
}

.mc-rating-text {
  font-weight: 700;
  color: var(--mc-gray-700);
  margin-left: 0.3rem;
  font-size: 0.9rem;
}

.mc-rating-count {
  font-size: 0.8rem;
  color: var(--mc-gray-400);
  margin-left: 0.3rem;
}

/* ── Reviews ── */
.mc-review {
  background: var(--mc-white);
  border-radius: var(--mc-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--mc-gray-100);
  transition: var(--mc-transition);
}

.mc-review:hover {
  box-shadow: var(--mc-shadow-sm);
}

.mc-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.mc-review-author {
  font-weight: 600;
  color: var(--mc-gray-700);
}

.mc-review-date {
  font-size: 0.8rem;
  color: var(--mc-gray-400);
}

.mc-review-text {
  font-size: 0.9rem;
  color: var(--mc-gray-600);
  line-height: 1.6;
}

.mc-review-service {
  font-size: 0.8rem;
  color: var(--mc-green);
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ── Integration / Testimonials Section ── */
.mc-testimonials {
  background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
  padding: 5rem 0;
  color: var(--mc-white);
}

.mc-testimonial-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius: var(--mc-radius-lg);
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.1);
  height: 100%;
}

.mc-testimonial-text {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  opacity: 0.95;
}

.mc-testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.mc-testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--mc-green);
}

.mc-testimonial-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.mc-testimonial-origin {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* ── Allies Section ── */
.mc-allies {
  padding: 4rem 0;
  background: var(--mc-gray-50);
}

.mc-ally-logo {
  height: 60px;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: var(--mc-transition);
}

.mc-ally-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ── Premium Footer ── */
.mc-footer {
  background: var(--mc-gray-900);
  color: var(--mc-gray-400);
  padding: 4rem 0 2rem;
}

.mc-footer-title {
  font-family: var(--mc-font-display);
  font-weight: 700;
  color: var(--mc-white);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.mc-footer-link {
  color: var(--mc-gray-400);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--mc-transition);
  display: block;
  margin-bottom: 0.5rem;
}

.mc-footer-link:hover {
  color: var(--mc-green-light);
  text-decoration: none;
  transform: translateX(3px);
}

.mc-footer-bottom {
  border-top: 1px solid var(--mc-gray-700);
  padding-top: 2rem;
  margin-top: 3rem;
  text-align: center;
  font-size: 0.85rem;
}

.mc-footer-rights {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mc-green-light);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* ── Verification Levels ── */
.mc-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--mc-radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.mc-verify-level-1 {
  background: #edf2f7;
  color: #718096;
}

.mc-verify-level-2 {
  background: #c6f6d5;
  color: #276749;
}

.mc-verify-level-3 {
  background: #bee3f8;
  color: #2a4365;
}

.mc-verify-level-4 {
  background: linear-gradient(135deg, #fefcbf, #faf089);
  color: #744210;
}

/* ── Form Wizard ── */
.mc-form-wizard {
  background: var(--mc-white);
  border-radius: var(--mc-radius-xl);
  box-shadow: var(--mc-shadow-lg);
  overflow: hidden;
}

.mc-form-header {
  background: var(--mc-gradient-hero);
  padding: 2rem;
  color: var(--mc-white);
  text-align: center;
}

.mc-form-header h2 {
  font-family: var(--mc-font-display);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.mc-form-body {
  padding: 2rem;
}

.mc-form-group {
  margin-bottom: 1.2rem;
}

.mc-form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--mc-gray-700);
  margin-bottom: 0.3rem;
  display: block;
}

.mc-form-control {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--mc-gray-200);
  border-radius: var(--mc-radius-md);
  font-size: 0.95rem;
  font-family: var(--mc-font-primary);
  transition: var(--mc-transition);
  outline: none;
}

.mc-form-control:focus {
  border-color: var(--mc-green);
  box-shadow: 0 0 0 4px rgba(56,161,105,0.1);
}

/* ── Inclusive Messages ── */
.mc-inclusive-banner {
  background: linear-gradient(135deg, #ebf8ff 0%, #e6fffa 50%, #fefcbf 100%);
  border-radius: var(--mc-radius-xl);
  padding: 3rem;
  text-align: center;
  margin: 3rem 0;
  border: 2px solid rgba(56,161,105,0.2);
}

.mc-inclusive-title {
  font-family: var(--mc-font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--mc-primary);
  margin-bottom: 1rem;
}

.mc-inclusive-text {
  font-size: 1.1rem;
  color: var(--mc-gray-600);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.mc-inclusive-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

/* ── Dashboard Cards ── */
.mc-dashboard-card {
  background: var(--mc-white);
  border-radius: var(--mc-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--mc-shadow-card);
  border-left: 4px solid var(--mc-green);
}

.mc-dashboard-value {
  font-family: var(--mc-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--mc-primary);
}

.mc-dashboard-label {
  font-size: 0.85rem;
  color: var(--mc-gray-500);
  font-weight: 500;
}

/* ── Price Tag ── */
.mc-price {
  font-family: var(--mc-font-display);
  font-weight: 700;
  color: var(--mc-green);
  font-size: 1rem;
}

.mc-price-type {
  font-size: 0.75rem;
  color: var(--mc-gray-400);
  font-weight: 400;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mc-hero {
    min-height: auto;
    padding: 6rem 0 3rem;
  }
  
  .mc-hero-title {
    font-size: 2rem;
  }
  
  .mc-hero-buttons {
    flex-direction: column;
  }
  
  .mc-search-input-group {
    flex-direction: column;
  }
  
  .mc-categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
  }
  
  .mc-section-title {
    font-size: 1.6rem;
  }
  
  .mc-stat-number {
    font-size: 2rem;
  }
  
  .mc-integration-text {
    font-size: 1.1rem;
  }
  
  .mc-navbar {
    padding: 0.3rem 0;
  }
  
  .mc-navbar-brand img {
    height: 40px;
  }
}

@media (max-width: 480px) {
  .mc-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .mc-hero-title {
    font-size: 1.6rem;
  }
  
  .mc-search-tabs {
    flex-direction: column;
  }
}

/* ── Utilities ── */
.mc-text-green { color: var(--mc-green); }
.mc-text-gold { color: var(--mc-gold); }
.mc-text-primary { color: var(--mc-primary); }
.mc-text-coral { color: var(--mc-coral); }
.mc-bg-gradient { background: var(--mc-gradient-hero); }
.mc-bg-white { background: var(--mc-white); }
.mc-bg-light { background: var(--mc-bg); }
.mc-rounded { border-radius: var(--mc-radius-lg); }
.mc-shadow { box-shadow: var(--mc-shadow-md); }

/* ── WhatsApp Float Button (Standardized) ── */
.mc-whatsapp-float {
  position: fixed;
  bottom: 5.5rem;
  right: 4px;
  width: 48px;
  height: 48px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 1.4rem;
  border: none;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  text-decoration: none !important;
}

.mc-whatsapp-float:hover,
.mc-whatsapp-float:focus,
.mc-whatsapp-float:active {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37,211,102,0.5);
  color: #fff !important;
  text-decoration: none !important;
  background: #25d366;
}

/* =============================================================
   OVERRIDE FIXES: Resolve conflicts with portal.css/general.css
   ============================================================= */

/* Fix: Hero section must clear the fixed navbar */
.mc-hero {
  padding-top: 120px !important;
  padding-bottom: 3rem !important;
  min-height: 85vh;
}

/* Fix: Prevent old .navbar styles from breaking our glassmorphism */
.mc-navbar.navbar {
  background: var(--mc-glass-bg) !important;
  backdrop-filter: var(--mc-glass-blur) !important;
  -webkit-backdrop-filter: var(--mc-glass-blur) !important;
  border: none !important;
  box-shadow: none;
  margin-bottom: 0 !important;
  padding: 0.4rem 0 !important;
}

.mc-navbar.navbar .navbar-brand {
  padding: 0 !important;
}

/* Fix: Old portal.css sets odd paddings on nav-link */
.mc-navbar .mc-nav-link {
  padding: 0.5rem 0.8rem !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

/* Fix: Search section overlap */
.mc-search-section {
  margin-top: -50px;
  padding-bottom: 1rem;
}

/* Fix: Ensure search card stays centered and doesn't stretch */
.mc-search-card {
  max-width: 850px;
  margin: 0 auto;
}

/* Fix: Old bootstrap overrides on .container */
body.mc-body .container {
  max-width: 1200px;
}

/* Fix: Stat cards text alignment */
.mc-stat-card {
  text-align: center !important;
}

/* Fix: Job card images from old portal sizing */
.mc-job-card .mc-job-company-logo {
  width: 55px !important;
  height: 55px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  flex-shrink: 0;
}

/* Fix: Prevent job card body from collapsing */
.mc-job-card .mc-job-card-body {
  padding: 1.2rem !important;
  min-height: 200px;
}

.mc-job-card .mc-job-title {
  min-height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Fix: Pagination from old Bootstrap clashing */
.mc-section .pagination {
  justify-content: center;
  flex-wrap: wrap;
}

.mc-section .pagination .page-link {
  border-radius: 8px !important;
  margin: 0 3px;
  border: 1px solid var(--mc-gray-200) !important;
  color: var(--mc-primary);
  font-weight: 500;
  padding: 0.4rem 0.8rem;
}

.mc-section .pagination .page-item.active .page-link {
  background: var(--mc-green) !important;
  border-color: var(--mc-green) !important;
  color: white !important;
}

/* Fix: Category grid distortion on small screens */
.mc-categories-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 1rem !important;
}

/* Fix: Integration banner padding issues */
.mc-integration-banner {
  padding: 1.5rem 0 !important;
  overflow: hidden;
}

.mc-integration-flags {
  font-size: 1.6rem !important;
  letter-spacing: 0.2rem !important;
  line-height: 2;
  word-break: break-all;
}

/* Fix: Inclusive banner text overflow */
.mc-inclusive-banner {
  text-align: center;
  padding: 3rem 2rem !important;
  background: linear-gradient(135deg, rgba(26,54,93,0.08) 0%, rgba(56,161,105,0.08) 100%);
  border-radius: var(--mc-radius-xl);
  border: 1px solid rgba(56,161,105,0.15);
  margin: 2rem 0;
}

.mc-inclusive-title {
  font-family: var(--mc-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--mc-primary);
  line-height: 1.3;
}

.mc-inclusive-text {
  font-size: 1rem;
  color: var(--mc-gray-600);
  max-width: 700px;
  margin: 0.8rem auto 0;
  line-height: 1.7;
}

.mc-inclusive-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.8rem;
}

/* Fix: Old footer_portal styles bleeding into our footer */
.mc-footer .col-md-3 p,
.mc-footer .col-md-3 a {
  font-size: 0.9rem;
  line-height: 1.8;
}

/* Fix: How-it-works section cards alignment */
.mc-section .row {
  display: flex;
  flex-wrap: wrap;
}

.mc-section .row > [class*="col-"] {
  display: flex;
}

/* Fix: Testimonial section inside dark background */
.mc-testimonials .mc-section-title,
.mc-testimonials .mc-section-subtitle,
.mc-testimonials .mc-section-badge {
  color: white !important;
}

.mc-testimonials .mc-section-badge {
  background: rgba(56,161,105,0.2) !important;
  color: var(--mc-green-light) !important;
}

/* Fix: Professional card hover conflict */
.mc-pro-card:hover {
  transform: translateY(-4px) !important;
}

/* Fix: Dashboard cards */
.mc-dashboard-card {
  background: white;
  border-radius: var(--mc-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--mc-shadow-card);
  border-left: 4px solid var(--mc-green);
  transition: var(--mc-transition);
}

.mc-dashboard-card:hover {
  box-shadow: var(--mc-shadow-lg);
}

.mc-dashboard-value {
  font-family: var(--mc-font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--mc-gray-800);
  line-height: 1;
}

.mc-dashboard-label {
  font-size: 0.8rem;
  color: var(--mc-gray-500);
  font-weight: 500;
  margin-top: 0.2rem;
}

/* Fix: Form controls */
.mc-form-group {
  margin-bottom: 1rem;
}

.mc-form-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--mc-gray-700);
  margin-bottom: 0.3rem;
}

.mc-form-control {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid var(--mc-gray-200);
  border-radius: var(--mc-radius-sm);
  font-size: 0.9rem;
  font-family: var(--mc-font-primary);
  transition: var(--mc-transition);
  outline: none;
  background: white;
}

.mc-form-control:focus {
  border-color: var(--mc-green);
  box-shadow: 0 0 0 3px rgba(56,161,105,0.1);
}

/* Fix: Form wizard header */
.mc-form-wizard {
  background: white;
  border-radius: var(--mc-radius-xl);
  overflow: hidden;
  box-shadow: var(--mc-shadow-xl);
}

.mc-form-header {
  background: var(--mc-gradient-hero);
  color: white;
  padding: 2.5rem 2rem;
  text-align: center;
}

.mc-form-header h2 {
  font-family: var(--mc-font-display);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.mc-form-body {
  padding: 2rem;
}

/* Fix: Verification badge levels */
.mc-verification-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--mc-radius-full);
  font-weight: 600;
}

.mc-verify-level-1 { background: rgba(160,174,192,0.2); color: var(--mc-gray-500); }
.mc-verify-level-2 { background: rgba(56,161,105,0.15); color: var(--mc-green); }
.mc-verify-level-3 { background: rgba(214,158,46,0.2); color: var(--mc-gold); }
.mc-verify-level-4 { background: rgba(26,54,93,0.15); color: var(--mc-primary); }

/* Fix: Price display */
.mc-price {
  font-weight: 700;
  color: var(--mc-green);
}

.mc-price-type {
  font-size: 0.85rem;
  color: var(--mc-gray-400);
}

/* ── Mobile Responsive Fixes ── */
@media (max-width: 768px) {
  .mc-hero {
    padding-top: 70px !important;
    min-height: auto !important;
    padding-bottom: 2rem !important;
  }
  
  .mc-hero-title {
    font-size: 2rem !important;
  }
  
  .mc-hero-subtitle {
    font-size: 0.95rem !important;
  }
  
  .mc-hero-buttons {
    flex-direction: column;
    gap: 0.6rem;
  }
  
  .mc-hero-buttons .mc-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
  }
  
  .mc-navbar .navbar-nav {
    padding: 1rem 0;
    gap: 0.3rem !important;
  }
  
  .mc-navbar .mc-btn {
    width: 100%;
    justify-content: center;
    margin: 0.2rem 0 !important;
  }
  
  .mc-search-section {
    margin-top: -30px;
  }
  
  .mc-search-input-group {
    flex-direction: column;
  }
  
  .mc-search-input,
  .mc-search-btn {
    width: 100%;
  }
  
  .mc-search-tabs {
    flex-direction: column;
  }
  
  .mc-section {
    padding: 3rem 0 !important;
  }
  
  .mc-section-title {
    font-size: 1.6rem !important;
  }
  
  .mc-stat-number {
    font-size: 2rem !important;
  }
  
  .mc-categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.6rem !important;
  }
  
  .mc-category-card {
    padding: 1rem 0.5rem !important;
  }
  
  .mc-category-emoji {
    font-size: 1.8rem !important;
  }
  
  .mc-category-name {
    font-size: 0.75rem !important;
  }
  
  .mc-integration-text {
    font-size: 1.1rem !important;
  }
  
  .mc-inclusive-title {
    font-size: 1.2rem !important;
  }
  
  .mc-testimonial-card {
    margin-bottom: 1rem;
  }
  
  .mc-footer {
    text-align: center;
  }
  
  .mc-footer .col-md-3 {
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .mc-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .mc-hero-title {
    font-size: 1.6rem !important;
  }
  
  .mc-stat-card {
    padding: 1rem 0.5rem !important;
  }
  
  .mc-stat-number {
    font-size: 1.6rem !important;
  }
  
  .mc-stat-label {
    font-size: 0.75rem !important;
  }
}

/* =============================================================
   PREMIUM ENHANCEMENTS — World-Class Level
   ============================================================= */

/* ── Hero Particles ── */
.mc-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mc-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
}

.mc-particle-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--mc-green-light), transparent 70%);
  top: -15%; right: -10%;
  animation: mc-float 8s ease-in-out infinite;
}

.mc-particle-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--mc-gold-light), transparent 70%);
  bottom: -10%; left: -5%;
  animation: mc-float 6s ease-in-out infinite reverse;
}

.mc-particle-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #fff, transparent 70%);
  top: 40%; left: 50%;
  animation: mc-float 10s ease-in-out infinite;
}

/* ── Hero Visual (Image + Floating Cards) ── */
.mc-hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
}

.mc-hero-img {
  width: 100%;
  max-width: 420px;
  border-radius: var(--mc-radius-xl);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  border: 3px solid rgba(255,255,255,0.15);
}

.mc-hero-floating-card {
  position: absolute;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-radius: var(--mc-radius-md);
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: mc-float 5s ease-in-out infinite;
  z-index: 3;
  max-width: 200px;
}

.mc-hero-float-1 { top: 15%; right: 0; animation-delay: 0s; }
.mc-hero-float-2 { bottom: 30%; left: 0; animation-delay: 1.5s; }
.mc-hero-float-3 { bottom: 8%; right: 5%; animation-delay: 3s; }

.mc-hero-float-icon {
  font-size: 1.5rem;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mc-gray-100);
  border-radius: var(--mc-radius-sm);
}

.mc-hero-float-data strong {
  display: block;
  font-family: var(--mc-font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--mc-primary);
  line-height: 1.2;
}

.mc-hero-float-data span {
  font-size: 0.7rem;
  color: var(--mc-gray-500);
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ── Hero Trust Badge ── */
.mc-hero-trust {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: mc-fadeInUp 0.6s ease-out 0.5s both;
}

.mc-hero-trust-flags {
  font-size: 1.5rem;
  letter-spacing: 0.3rem;
}

.mc-hero-trust-text {
  font-size: 0.8rem;
  opacity: 0.7;
  letter-spacing: 0.3px;
}

.mc-hero-trust-text i {
  color: var(--mc-green-light);
  margin-right: 0.3rem;
}

/* ── Stat Icon Circles ── */
.mc-stat-icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.3rem;
  color: white;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.mc-stat-icon-empresas { background: var(--mc-gradient-hero); }
.mc-stat-icon-postulantes { background: var(--mc-gradient-green); }
.mc-stat-icon-profesionales { background: var(--mc-gradient-gold); }
.mc-stat-icon-paises { background: linear-gradient(135deg, var(--mc-coral), var(--mc-coral-light)); }

/* ── Section Dark Variant ── */
.mc-section-dark {
  background: var(--mc-gray-50) !important;
}

.mc-badge-gold {
  background: rgba(214,158,46,0.15) !important;
  color: var(--mc-gold) !important;
}

/* ── Marketplace CTA ── */
.mc-marketplace-cta {
  text-align: center;
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Path Cards (How it Works) ── */
.mc-path-card {
  background: var(--mc-white);
  border-radius: var(--mc-radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mc-shadow-card);
  border: 1px solid var(--mc-gray-100);
  transition: var(--mc-transition);
  position: relative;
  overflow: hidden;
}

.mc-path-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}

.mc-path-postulante::before { background: var(--mc-gradient-green); }
.mc-path-empresa::before { background: var(--mc-gradient-hero); }
.mc-path-profesional::before { background: var(--mc-gradient-gold); }

.mc-path-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mc-shadow-xl);
}

.mc-path-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  font-size: 1.8rem;
  color: white;
}

.mc-path-postulante .mc-path-icon { background: var(--mc-gradient-green); }
.mc-path-empresa .mc-path-icon { background: var(--mc-gradient-hero); }
.mc-path-profesional .mc-path-icon { background: var(--mc-gradient-gold); }

.mc-path-title {
  font-family: var(--mc-font-display);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}

.mc-path-postulante .mc-path-title { color: var(--mc-green); }
.mc-path-empresa .mc-path-title { color: var(--mc-primary); }
.mc-path-profesional .mc-path-title { color: var(--mc-gold); }

.mc-path-desc {
  font-size: 0.9rem;
  color: var(--mc-gray-500);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.mc-path-steps {
  text-align: left;
  font-size: 0.85rem;
  color: var(--mc-gray-600);
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.mc-path-steps li {
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.mc-btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Social Impact Section ── */
.mc-impact-section {
  background: linear-gradient(135deg, #0f2240 0%, #1a365d 40%, #276749 100%);
  padding: 5rem 0;
  color: white;
}

.mc-impact-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--mc-radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  height: 100%;
  transition: var(--mc-transition);
}

.mc-impact-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-4px);
}

.mc-impact-number {
  font-family: var(--mc-font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--mc-green-light);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.mc-impact-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.mc-impact-detail {
  font-size: 0.85rem;
  opacity: 0.7;
}

.mc-impact-detail i {
  margin-right: 0.3rem;
}

.mc-impact-badges {
  text-align: center;
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.mc-impact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(56,161,105,0.2);
  color: var(--mc-green-light);
  padding: 0.5rem 1.2rem;
  border-radius: var(--mc-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(56,161,105,0.3);
}

/* ── Testimonial Enhancements ── */
.mc-testimonial-quote {
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 0.5;
  color: var(--mc-green-light);
  opacity: 0.4;
  margin-bottom: 0.5rem;
}

.mc-testimonial-avatar-flag {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--mc-gradient-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ── Job Card — Inclusive Badge System ── */
.mc-job-inclusive-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(56,161,105,0.08);
  border: 1px solid rgba(56,161,105,0.2);
  border-radius: 99px;
  padding: 0.22rem 0.7rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--mc-green-dark, #276749);
  white-space: nowrap;
}
.mc-job-inclusive-tag i {
  font-size: 0.7rem;
}

.mc-job-inclusion-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 99px;
  padding: 0.22rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.mc-job-inclusion-badge--discapacidad {
  background: rgba(66,153,225,0.12);
  color: #2b6cb0;
  border: 1px solid rgba(66,153,225,0.25);
}
.mc-job-inclusion-badge--adulto-mayor {
  background: rgba(214,158,46,0.12);
  color: #975a16;
  border: 1px solid rgba(214,158,46,0.25);
}
.mc-job-inclusion-badge--migrante {
  background: rgba(159,122,234,0.12);
  color: #553c9a;
  border: 1px solid rgba(159,122,234,0.25);
}

/* ── Commitment Banner Logos ── */
.mc-commitment-logos {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.mc-commitment-logo img {
  height: 60px;
  border-radius: var(--mc-radius-sm);
}

.mc-commitment-text-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--mc-primary);
}

.mc-commitment-text-logo i {
  font-size: 1.5rem;
}

.mc-commitment-banner {
  margin-top: 4rem !important;
}

/* ── Premium Commitment Section ── */
.mc-commitment-section {
  padding: 3rem 0;
}
.mc-commitment-premium {
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: var(--mc-radius-lg, 16px);
  border: 1px solid var(--mc-gray-200, #e2e8f0);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  padding: 2.5rem;
  overflow: hidden;
}

/* ── Premium Inclusion Section ── */
.mc-inclusion-section {
  padding: 3rem 0 1rem;
  background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 100%);
}
.mc-inclusion-hero {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.mc-inclusion-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(13,122,71,0.08);
  color: #0d7a47;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.mc-inclusion-hero-title {
  font-family: var(--mc-font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--mc-primary, #1a365d);
  margin-bottom: 0.8rem;
  line-height: 1.2;
}
.mc-inclusion-hero-sub {
  font-size: 1rem;
  color: var(--mc-gray-500, #718096);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.mc-inclusion-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.mc-inclusion-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0d7a47;
}
.mc-inclusion-hero-tags span i {
  font-size: 0.7rem;
}

/* Pillar cards */
.mc-pillar-card {
  background: #fff;
  border-radius: var(--mc-radius-lg, 16px);
  padding: 1.8rem 1.5rem;
  text-align: center;
  border: 1px solid var(--mc-gray-200, #e2e8f0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.mc-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.mc-pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1rem;
}
.mc-pillar-title {
  font-family: var(--mc-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mc-primary, #1a365d);
  margin-bottom: 0.5rem;
}
.mc-pillar-desc {
  font-size: 0.85rem;
  color: var(--mc-gray-500, #718096);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Pillar Grid Layout (CSS Grid — no Bootstrap) ── */
.mc-pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
}
.mc-pillar-item {
  min-width: 0;
}

/* ── Search Select ── */
.mc-search-select {
  max-width: 250px !important;
  flex: 0 0 250px !important;
}

/* ── Mobile Responsive for New Components ── */
@media (max-width: 768px) {
  .mc-hero-floating-card {
    position: static !important;
    animation: none !important;
    max-width: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  
  .mc-hero-trust-flags { font-size: 1.2rem; letter-spacing: 0.15rem; }
  
  .mc-impact-number { font-size: 2.5rem; }
  
  .mc-impact-badges { gap: 0.4rem; }
  .mc-impact-badge { font-size: 0.7rem; padding: 0.3rem 0.8rem; }
  
  .mc-path-card { padding: 1.5rem; }
  .mc-path-icon { width: 56px; height: 56px; font-size: 1.3rem; }
  
  .mc-marketplace-cta { flex-direction: column; align-items: center; }
  
  .mc-search-select { max-width: 100% !important; flex: 1 !important; }

  /* ── Pillar Cards: 2×2 grid on mobile ── */
  .mc-inclusion-section .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .mc-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .mc-pillar-card { padding: 1rem 0.7rem; min-height: 0; }
  .mc-pillar-icon { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 11px; margin-bottom: 0.5rem; }
  .mc-pillar-title { font-size: 0.78rem; margin-bottom: 0.25rem; }
  .mc-pillar-desc { font-size: 0.68rem; line-height: 1.35; }
  .mc-inclusion-hero-title { font-size: 1.4rem; }
  .mc-inclusion-hero-sub { font-size: 0.85rem; }
  .mc-inclusion-hero-tags { gap: 0.3rem; }
  .mc-inclusion-hero-tags span { font-size: 0.68rem; }
}

@media (max-width: 480px) {
  .mc-hero-trust-flags { font-size: 1rem; }
  .mc-impact-number { font-size: 2rem; }
  .mc-testimonial-quote { font-size: 3rem; }
}

/* ── Mobile Navbar CTA Buttons ── */
@media (max-width: 991px) {
  #mc-nav-collapse {
    background: white;
    border-radius: 0 0 16px 16px;
    padding: 0.8rem 1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1030;
    position: relative;
  }
  #mc-nav-collapse .navbar-nav {
    gap: 0.15rem !important;
  }
  #mc-nav-collapse .nav-link {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.85rem !important;
  }
  /* CTA buttons in a compact horizontal row */
  #mc-nav-collapse .mc-cta-item {
    display: inline-block !important;
    width: auto !important;
    flex: none !important;
  }
  #mc-nav-collapse .mc-btn-empresa,
  #mc-nav-collapse .mc-btn-postulante,
  #mc-nav-collapse .mc-btn-servicios {
    display: inline-block;
    width: auto;
    text-align: center;
    font-size: 0.7rem !important;
    padding: 0.35rem 0.6rem !important;
    margin: 0.1rem 0.1rem !important;
    border-radius: 8px;
    white-space: nowrap;
  }
  #mc-nav-collapse .mc-btn-empresa i,
  #mc-nav-collapse .mc-btn-postulante i,
  #mc-nav-collapse .mc-btn-servicios i {
    font-size: 0.65rem !important;
    margin-right: 2px !important;
  }
  #mc-nav-collapse .nav-item {
    margin-left: 0 !important;
  }
  /* Ensure navbar is always on top */
  .mc-navbar {
    z-index: 1050 !important;
  }
}

/* ── Login Modal: Always above navbar ── */
#login_ultimate_empresa {
  z-index: 1060 !important;
}
#login_ultimate_empresa .modal-backdrop,
.modal-backdrop {
  z-index: 1055 !important;
}

/* =============================================================
   IMPLEMENTATION PLAN FIXES — 2026-04-24
   1. Premium Testimonial Hover Effects
   2. Mobile Hero Layout Fix
   3. Hamburger Menu CTA Homologation
   4. Smooth Scroll UX
   ============================================================= */

/* ── 1. Premium Testimonial Card Hover Effects ── */
.mc-testimonial-card {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s ease !important;
  cursor: default;
}
.mc-testimonial-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(56, 161, 105, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(56, 161, 105, 0.35) !important;
}
.mc-testimonial-card:hover .mc-testimonial-quote {
  color: var(--mc-green-light);
  opacity: 0.65;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.mc-testimonial-card:hover .mc-testimonial-name {
  color: var(--mc-green-light);
  transition: color 0.3s ease;
}
.mc-testimonial-card:hover .mc-testimonial-avatar {
  border-color: var(--mc-green-light);
  box-shadow: 0 0 16px rgba(56, 161, 105, 0.4);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── 2. Mobile Hero Section — Proper Spacing & Layout ── */
@media (max-width: 768px) {
  /* Hero badge — prevent "Servicios" from becoming a separate label */
  .mc-hero-badge {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.8rem !important;
    white-space: normal !important;
    text-align: center;
    line-height: 1.4;
  }

  /* Hero subtitle smaller on mobile */
  .mc-hero-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.2rem !important;
  }

  /* Hero buttons: full-width, properly stacked, uniform sizing */
  .mc-hero-buttons {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .mc-hero-buttons .mc-btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    padding: 0.7rem 1rem !important;
    border-radius: 12px !important;
  }

  /* Trust badge — compact on mobile */
  .mc-hero-trust {
    margin-top: 1rem !important;
  }
  .mc-hero-trust-text {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 480px) {
  .mc-hero-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.8rem !important;
  }
  .mc-hero-badge {
    font-size: 0.65rem !important;
    margin-bottom: 0.8rem !important;
  }
}

/* ── Tablet: slightly larger CTA buttons ── */
@media (min-width: 576px) and (max-width: 991px) {
  html body nav#mc-main-navbar .mc-cta-item .mc-btn {
    font-size: 0.78rem !important;
    padding: 0.6rem 0.6rem !important;
    min-height: 42px !important;
  }
}

/* ── Small phones (below 400px): stack CTA buttons full-width ── */
@media (max-width: 400px) {
  html body nav#mc-main-navbar .navbar-nav .mc-cta-item {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  html body nav#mc-main-navbar .mc-cta-item .mc-btn {
    font-size: 0.78rem !important;
    padding: 0.6rem 1rem !important;
  }
}

/* ── 4. Smooth Scroll behavior for UX ── */
html {
  scroll-behavior: smooth;
}

/* ── 5. Empty State for Search Results ── */
.mc-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  max-width: 500px;
  margin: 0 auto;
}
.mc-empty-state-icon {
  font-size: 4rem;
  color: var(--mc-gray-300);
  margin-bottom: 1.5rem;
  display: block;
  animation: mc-float 3s ease-in-out infinite;
}
.mc-empty-state-title {
  font-family: var(--mc-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--mc-gray-700);
  margin-bottom: 0.8rem;
}
.mc-empty-state-text {
  font-size: 0.95rem;
  color: var(--mc-gray-500);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.mc-empty-state-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── 6. Skip Nav (WCAG) ── */
.mc-skip-nav {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--mc-primary);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 0 0 var(--mc-radius-sm) var(--mc-radius-sm);
  font-weight: 700;
  z-index: 9999;
  transition: top 0.2s ease;
  text-decoration: none;
}
.mc-skip-nav:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

/* ── 7. Floating Trigger Button (Standardized — matches WA) ── */
.mc-a11y-trigger {
  position: fixed;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #1a365d;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26,54,93,0.35);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-a11y-trigger:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 24px rgba(26,54,93,0.5);
}
.mc-a11y-trigger:focus,
.mc-a11y-trigger:active {
  outline: none;
  box-shadow: 0 0 0 3px rgba(72,187,120,0.6), 0 4px 16px rgba(26,54,93,0.35);
}

/* ── 8. High Contrast Mode ── */
body.mc-high-contrast {
  filter: contrast(1.3);
}
body.mc-high-contrast .mc-hero {
  filter: contrast(0.85);
}

/* ────────────────────────────────────────────────────────────
   WCAG 2.2 AA/AAA — Floating Accessibility Panel
   Single icon → side panel with all tools
   ──────────────────────────────────────────────────────────── */

/* ── Floating Trigger Button (Standardized — defined in line 4080) ── */

/* ── Overlay ── */
.mc-a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mc-a11y-overlay.mc-a11y-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Side Panel ── */
.mc-a11y-panel {
  position: fixed;
  right: -380px;
  top: 0;
  width: 340px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  z-index: 100000;
  box-shadow: -8px 0 40px rgba(0,0,0,0.15);
  transition: right 0.35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mc-a11y-panel.mc-a11y-panel-open {
  right: 0;
}

/* Panel header */
.mc-a11y-panel-header {
  background: linear-gradient(135deg, #1a365d 0%, #2a4a7f 100%);
  color: #fff;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.mc-a11y-panel-header h3 {
  margin: 0;
  font-family: var(--mc-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mc-a11y-panel-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.mc-a11y-panel-close:hover {
  background: rgba(255,255,255,0.3);
}
.mc-a11y-panel-close:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mc-a11y-option:hover {
  border-color: #38a169;
  background: #f0fff4;
}
.mc-a11y-option:focus {
  outline: 2px solid #38a169;
  outline-offset: 2px;
}
.mc-a11y-option.mc-a11y-active {
  background: #f0fff4;
  border-color: #38a169;
  color: #276749;
}
.mc-a11y-option.mc-a11y-active::after {
  content: '✓';
  margin-left: auto;
  font-weight: 800;
  color: #38a169;
}
.mc-a11y-reset {
  border-color: #fed7d7;
  background: #fff5f5;
  color: #c53030;
}
.mc-a11y-reset:hover {
  border-color: #fc8181;
  background: #fed7d7;
}
.mc-a11y-reset-group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #edf2f7;
}

/* ── Bootstrap 5 g-* gap polyfill for BS4 ── */
.row.g-4 { margin-left: -0.75rem; margin-right: -0.75rem; }
.row.g-4 > [class*="col"] { padding-left: 0.75rem; padding-right: 0.75rem; }
.row.g-5 { margin-left: -1rem; margin-right: -1rem; }
.row.g-5 > [class*="col"] { padding-left: 1rem; padding-right: 1rem; }

/* ── Stat cards: ensure 2-col grid on mobile ── */
@media (max-width: 767px) {
  .nos-value .row.g-4,
  .mc-od-stats-wrapper .row.g-4 {
    display: flex;
    flex-wrap: wrap;
  }
  .nos-value .col-6,
  .mc-od-stats-wrapper .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Form Control Alignment ── */
.mc-form-control {
  min-height: 45px; /* Ensure uniform height across all inputs/selects */
  display: block;
}

/* ── Password Toggle Eye Icon ── */
.mc-password-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.mc-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  color: #a0aec0;
  cursor: pointer;
  padding: 4px;
  font-size: 1.1rem;
  z-index: 5;
  transition: color 0.2s;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.mc-password-toggle:hover {
  color: #4a5568;
}
.mc-password-toggle:focus {
  outline: none !important;
  color: #38a169;
}
.mc-password-wrapper input {
  padding-right: 45px !important;
}

/* ── TOS Modal Responsive Fix ── */
#mcTosModal .modal-dialog {
  max-width: 800px;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 2rem);
}
@media (max-width: 576px) {
  #mcTosModal .modal-dialog {
    max-width: 95vw;
    margin: 0.5rem auto;
    min-height: calc(100vh - 1rem);
  }
  #mcTosModal .modal-content {
    border-radius: 10px;
  }
  #mcTosModal .modal-header {
    padding: 1rem;
  }
  #mcTosModal .modal-title {
    font-size: 1.1rem;
  }
  .mc-tos-scroll-area {
    max-height: 50vh;
    padding: 1.2rem;
    font-size: 0.88rem;
  }
  #mcTosModal .modal-footer {
    padding: 1rem;
    flex-direction: column;
    gap: 0.8rem;
  }
  #mcTosModal .modal-footer .btn {
    width: 100%;
  }
}
@media (min-width: 577px) and (max-width: 768px) {
  #mcTosModal .modal-dialog {
    max-width: 90vw;
  }
  .mc-tos-scroll-area {
    max-height: 55vh;
  }
}

/* ── Responsive trigger button ── */
@media (max-width: 576px) {
  .mc-a11y-trigger {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    right: 2px;
  }
  .mc-whatsapp-float {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    right: 2px;
    bottom: 5rem;
  }
  .mc-a11y-panel {
    width: 100vw;
    max-width: 100vw;
    right: -110vw;
  }
}

/* -- Unified User Dropdown -- */
.mc-unified-dropdown {
  min-width: 280px;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
  border: none !important;
  overflow: hidden;
  padding: 0;
  animation: mc-ddSlide 0.2s ease;
}
.mc-unified-dropdown .dropdown-header {
  padding: 0.4rem 1.2rem;
  margin: 0;
}
.mc-unified-dropdown .dropdown-item {
  padding: 0.5rem 1.2rem;
  font-weight: 500;
  transition: all 0.2s;
}
.mc-unified-dropdown .dropdown-item:hover {
  background: rgba(56,161,105,0.08);
  color: #38a169;
}
.mc-unified-dropdown .dropdown-item i {
  margin-right: 0.5rem;
}
.mc-unified-dropdown .dropdown-divider {
  margin: 0.3rem 0;
}
@keyframes mc-ddSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   LMS / ECOSISTEMA DE APRENDIZAJE — Premium Design System
   ---------------------------------------------------------- */

/* -- Hero Section -- */
.mc-lms-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #1a365d 100%);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.mc-lms-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,152,121,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.mc-lms-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(56,217,169,0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* -- Stats -- */
.mc-lms-stat {
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 1.2rem 0.5rem;
  backdrop-filter: blur(8px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.mc-lms-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.mc-lms-stat-value {
  font-family: var(--mc-font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #38d9a9, #00b894);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mc-lms-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  margin-top: 0.3rem;
}

/* -- Filter Tabs -- */
.mc-lms-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.mc-lms-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.mc-lms-tab:hover {
  border-color: #009879;
  color: #009879;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,152,121,0.12);
}
.mc-lms-tab.active {
  background: linear-gradient(135deg, #009879, #00b894);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(0,152,121,0.25);
}

/* -- Course Cards -- */
.mc-eco-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.04);
}
.mc-eco-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}
.mc-eco-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.mc-eco-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.mc-eco-card:hover .mc-eco-card-img {
  transform: scale(1.08);
}
.mc-eco-tag-new {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-eco-float-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.mc-eco-card-body {
  padding: 1.2rem 1.4rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* -- Badges -- */
.mc-eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
  margin-bottom: 0.6rem;
  width: fit-content;
}
.mc-eco-badge-diplomado {
  background: rgba(184,134,11,0.1);
  color: #b8860b;
}
.mc-eco-badge-asincronico {
  background: rgba(59,130,246,0.1);
  color: #2563eb;
}
.mc-eco-badge-sincronico {
  background: rgba(0,152,121,0.1);
  color: #009879;
}

/* -- Card Meta -- */
.mc-eco-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mc-eco-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
  background: #f8fafc;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

/* -- Card CTAs -- */
.mc-eco-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.3s;
  margin-top: auto;
  text-align: center;
  color: #fff !important;  /* Force white — override browser link blue */
}
a.mc-eco-card-cta:link,
a.mc-eco-card-cta:visited,
a.mc-eco-card-cta:active {
  color: #fff !important;
  text-decoration: none !important;
}
.mc-eco-cta-diplomado {
  background: linear-gradient(135deg, #b8860b, #d4af37);
  color: #fff !important;
}
.mc-eco-cta-diplomado:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184,134,11,0.3);
  color: #fff !important;
  text-decoration: none !important;
}
.mc-eco-cta-curso {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff !important;
}
.mc-eco-cta-curso:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,99,235,0.3);
  color: #fff !important;
  text-decoration: none !important;
}
.mc-eco-cta-evento {
  background: linear-gradient(135deg, #009879, #00b894);
  color: #fff !important;
}
.mc-eco-cta-evento:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,152,121,0.3);
  color: #fff !important;
  text-decoration: none !important;
}

/* -- LMS Detail Pages -- */
.mc-lms-detail-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1a365d 100%);
  padding: 3rem 0 2.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.mc-lms-detail-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,152,121,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mc-lms-breadcrumb {
  font-size: 0.82rem;
  margin-bottom: 1rem;
}
.mc-lms-breadcrumb a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.mc-lms-breadcrumb a:hover {
  color: #38d9a9;
}
.mc-lms-detail-title {
  font-family: var(--mc-font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.mc-lms-detail-desc {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 600px;
}
.mc-lms-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.mc-lms-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 0.35rem 0.8rem;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* -- Sidebar Card -- */
.mc-lms-sidebar-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}
.mc-lms-sidebar-card .mc-lms-sidebar-header {
  background: linear-gradient(135deg, #009879, #00b894);
  color: #fff;
  padding: 1.2rem 1.5rem;
  text-align: center;
}
.mc-lms-sidebar-card .mc-lms-sidebar-body {
  padding: 1.5rem;
}
.mc-lms-enroll-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1.5rem;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.mc-lms-enroll-btn-primary {
  background: linear-gradient(135deg, #009879, #00b894);
  color: #fff;
}
.mc-lms-enroll-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,152,121,0.3);
}
.mc-lms-enroll-btn-danger {
  background: linear-gradient(135deg, #e53e3e, #f56565);
  color: #fff;
}
.mc-lms-enroll-btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(229,62,62,0.3);
}

/* -- Content Section -- */
.mc-lms-content-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(0,0,0,0.04);
}
.mc-lms-section-title {
  font-family: var(--mc-font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: #0f172a;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* -- Lesson List -- */
.mc-lms-lesson-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mc-lms-lesson-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
  border: 1px solid #f1f5f9;
}
.mc-lms-lesson-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.mc-lms-lesson-number {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #64748b;
  flex-shrink: 0;
}
.mc-lms-lesson-item.completed .mc-lms-lesson-number {
  background: linear-gradient(135deg, #009879, #00b894);
  color: #fff;
}
.mc-lms-lesson-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
}
.mc-lms-lesson-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* -- Progress Bar -- */
.mc-lms-progress-wrap {
  background: #f1f5f9;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.mc-lms-progress-bar {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(135deg, #009879, #38d9a9);
  transition: width 0.6s ease;
}

/* -- Creator Pages -- */
.mc-lms-creator-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
  border: 1px solid rgba(0,0,0,0.04);
}

/* -- Animation -- */
.mc-animate-in {
  opacity: 0;
  transform: translateY(20px);
  animation: mcFadeUp 0.5s ease forwards;
}
.mc-animate-in-delay-1 { animation-delay: 0.1s; }
.mc-animate-in-delay-2 { animation-delay: 0.2s; }
.mc-animate-in-delay-3 { animation-delay: 0.3s; }

@keyframes mcFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* -- Welcome page ecosistema section -- */
.mc-eco-preview-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.3s;
  border: 1px solid rgba(0,0,0,0.04);
}
.mc-eco-preview-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* ----------------------------------------------------------
   WCAG ACCESSIBILITY PANEL — ONPE-style Exact Replica
   ---------------------------------------------------------- */

/* -- Trigger Button (duplicate block — defer to main definition above) -- */

/* -- Overlay -- */
.mc-a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mc-a11y-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* -- Panel -- */
.mc-a11y-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  z-index: 999999;
  background: #fff;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  transition: right 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mc-a11y-panel-open {
  right: 0;
}

/* -- Panel Header (ONPE dark blue) -- */
.mc-a11y-panel-header {
  background: linear-gradient(135deg, #1a365d, #2d3748);
  color: #fff;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.mc-a11y-panel-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mc-a11y-panel-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.mc-a11y-panel-close:hover {
  background: rgba(255,255,255,0.25);
}

/* -- Panel Body -- */
.mc-a11y-panel-body {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

/* -- Panel Footer -- */
.mc-a11y-panel-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 0.6rem 1.2rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* -- Accordion Headers (ONPE style) -- */
.mc-a11y-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
  user-select: none;
  transition: background 0.2s;
}
.mc-a11y-accordion-header:hover {
  background: #f8fafc;
}
.mc-a11y-chevron {
  font-size: 0.7rem;
  transition: transform 0.3s;
  color: #94a3b8;
}
.mc-a11y-accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 1rem;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
  border-bottom: 1px solid #f1f5f9;
}

/* -- Language Buttons (ONPE: full-width list with flags) -- */
.mc-a11y-lang-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: none;
  background: #fff;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0.3rem;
  text-align: left;
}
.mc-a11y-lang-btn:hover {
  background: #f0f4f8;
  color: #1a365d;
}
.mc-a11y-lang-flag {
  font-size: 1.1rem;
}
.mc-a11y-lang-check {
  margin-left: auto;
}

/* -- Profile Buttons (ONPE: full-width list items) -- */
.mc-a11y-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: none;
  background: #fff;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0.3rem;
  text-align: left;
}
.mc-a11y-profile-btn:hover {
  background: #f0f4f8;
  color: #1a365d;
}
.mc-a11y-profile-icon {
  width: 22px;
  text-align: center;
  color: #64748b;
  font-size: 0.9rem;
}
.mc-a11y-profile-active {
  background: rgba(26,54,93,0.06) !important;
  color: #1a365d !important;
  font-weight: 700 !important;
}
.mc-a11y-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #1a365d;
  color: #fff;
  border-radius: 50%;
  font-size: 0.6rem;
  margin-left: auto;
}

/* -- Tools Grid (ONPE: 2×3 cards) -- */
.mc-a11y-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 1rem 1.2rem;
}
.mc-a11y-tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1rem 0.5rem 0.7rem;
  border: 2px solid #e8ecf1;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s;
  min-height: 90px;
}
.mc-a11y-tool-card:hover {
  border-color: #1a365d;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,54,93,0.1);
}
.mc-a11y-tool-icon {
  font-size: 1.5rem;
  font-weight: 900;
  color: #334155;
  line-height: 1;
  display: block;
}
.mc-a11y-tool-icon-fa {
  font-size: 1.3rem;
  color: #334155;
  line-height: 1;
}
.mc-a11y-tool-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  text-decoration: underline;
  text-decoration-color: #d4af37;
  text-underline-offset: 3px;
  line-height: 1.2;
}
.mc-a11y-tool-level {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  margin-top: 0.1rem;
}

/* Active tool card (ONPE: blue border + subtle blue bg) */
.mc-a11y-tool-active {
  border-color: #1a365d !important;
  background: rgba(26,54,93,0.04) !important;
  box-shadow: 0 2px 10px rgba(26,54,93,0.12);
}
.mc-a11y-tool-active .mc-a11y-tool-icon,
.mc-a11y-tool-active .mc-a11y-tool-icon-fa {
  color: #1a365d !important;
}
.mc-a11y-tool-active .mc-a11y-tool-label {
  color: #1a365d !important;
  font-weight: 700;
}
.mc-a11y-tool-active .mc-a11y-tool-level {
  color: #1a365d !important;
  font-weight: 800;
}

/* -- Reset Button (ONPE style) -- */
.mc-a11y-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  border: none;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}
.mc-a11y-reset-btn:hover {
  color: #e53e3e;
}

/* ── BODY UTILITY CLASSES ── */

/* Font size: 4 levels — uses transform scale to affect ALL elements including inline styles */
body.mc-a11y-font-1 { font-size: 115% !important; }
body.mc-a11y-font-2 { font-size: 130% !important; }
body.mc-a11y-font-3 { font-size: 145% !important; }

/* Force child elements to scale proportionally via CSS zoom */
body.mc-a11y-font-1 > *:not(.mc-a11y-panel):not(.mc-a11y-trigger) { zoom: 1.15; }
body.mc-a11y-font-2 > *:not(.mc-a11y-panel):not(.mc-a11y-trigger) { zoom: 1.30; }
body.mc-a11y-font-3 > *:not(.mc-a11y-panel):not(.mc-a11y-trigger) { zoom: 1.45; }

/* Contrast: Level 1 = High contrast */
body.mc-a11y-high-contrast {
  filter: contrast(1.5) !important;
  background: #000 !important;
  color: #fff !important;
}
body.mc-a11y-high-contrast * {
  border-color: #fff !important;
}
body.mc-a11y-high-contrast a { color: #ffd700 !important; }
body.mc-a11y-high-contrast .mc-a11y-panel,
body.mc-a11y-high-contrast .mc-a11y-trigger {
  filter: none !important;
}

/* Contrast: Level 2 = Inverted */
body.mc-a11y-inverted {
  filter: invert(1) hue-rotate(180deg) !important;
}
body.mc-a11y-inverted img,
body.mc-a11y-inverted video,
body.mc-a11y-inverted .mc-a11y-panel,
body.mc-a11y-inverted .mc-a11y-trigger {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Large cursor */
body.mc-a11y-large-cursor,
body.mc-a11y-large-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M5 2l24 18-10 2 6 14-5 2-6-14-9 8z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Dyslexia font — excludes icon fonts (FontAwesome, Material, etc.) */
body.mc-a11y-dyslexia-font,
body.mc-a11y-dyslexia-font *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.material-icons):not([class*="mc-a11y-tool-icon"]) {
  font-family: 'Comic Sans MS', 'OpenDyslexic', cursive !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.12em !important;
}
/* Preserve icon fonts explicitly when dyslexia is active */
body.mc-a11y-dyslexia-font .fa,
body.mc-a11y-dyslexia-font .fas,
body.mc-a11y-dyslexia-font .far,
body.mc-a11y-dyslexia-font .fab,
body.mc-a11y-dyslexia-font .fal,
body.mc-a11y-dyslexia-font .fad {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* Line spacing: 3 levels */
body.mc-a11y-spacing-1 * {
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.12em !important;
}
body.mc-a11y-spacing-2 * {
  line-height: 2.2 !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.18em !important;
}

/* -- Responsive (duplicate removed — see main responsive block) -- */
@media (max-width: 576px) {
  .mc-a11y-tool-card {
    padding: 0.7rem 0.3rem 0.5rem;
    min-height: 75px;
  }
  .mc-a11y-tool-icon { font-size: 1.2rem; }
  .mc-a11y-tool-label { font-size: 0.68rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   LMS RESPONSIVE — TABLET (≤992px) + MOBILE (≤576px)
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 992px) {
  /* Creador Panel — 2 cols */
  .mc-lms-hero h1 { font-size: 1.4rem !important; }
  .mc-lms-hero p { font-size: 0.82rem !important; }

  /* Curso form inline grids to stack */
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar sticky → normal */
  .mc-sidebar-sticky { position: static !important; top: auto !important; }
  .mc-sidebar-body { margin-bottom: 1.5rem; }

  /* Countdown items smaller */
  .mc-countdown-item { min-width: 50px; padding: 0.4rem 0.5rem; }
  .mc-countdown-item .num { font-size: 1.2rem; }

  /* Doc tabs scroll */
  .doc-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
  .doc-tab { white-space: nowrap; flex-shrink: 0; font-size: 0.78rem; padding: 0.4rem 1rem; }

  /* Ecosistema index cards grid */
  .mc-eco-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile */
@media (max-width: 576px) {
  /* LMS Hero compact */
  .mc-lms-hero { padding: 1.5rem 0 1rem !important; }
  .mc-lms-hero h1 { font-size: 1.15rem !important; }

  /* Forms: Single column everywhere */
  .row { flex-direction: column !important; }
  .col-md-4, .col-md-6, .col-lg-4, .col-lg-5, .col-lg-7, .col-lg-8 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Creador panel action cards */
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }

  /* Session form grid fix */
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* Calificaciones/Asistencia table scroll */
  .table-responsive, .mc-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 600px; }
  table th, table td { font-size: 0.72rem !important; padding: 0.4rem 0.5rem !important; white-space: nowrap; }

  /* Sidebar cards */
  .mc-sidebar-body {
    padding: 1.2rem !important;
  }
  .mc-sidebar-sticky {
    position: static !important;
    margin-bottom: 1rem;
  }

  /* Buttons full width */
  .mc-inscribirse-btn,
  button[type="submit"][style*="padding: 0.7rem 2rem"],
  a[style*="padding: 0.7rem 1.5rem"] {
    width: 100% !important;
    text-align: center !important;
  }

  /* Leccion Visor sidebar collapse */
  .mc-visor-sidebar {
    position: fixed !important;
    left: -100% !important;
    top: 0 !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    z-index: 1050 !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
  }
  .mc-visor-sidebar.open {
    left: 0 !important;
  }
  .mc-visor-content {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Countdown */
  .mc-countdown { gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
  .mc-countdown-item { min-width: 52px; padding: 0.3rem 0.4rem; }
  .mc-countdown-item .num { font-size: 1rem; }
  .mc-countdown-item .label { font-size: 0.55rem; }

  /* Course detail pills wrap */
  .mc-curso-meta-pills { flex-wrap: wrap; gap: 0.3rem; }
  .mc-curso-pill { font-size: 0.68rem !important; padding: 0.25rem 0.5rem !important; }

  /* Agenda items */
  .mc-agenda-item { flex-direction: column; gap: 0.4rem; padding: 0.7rem 0.8rem; }
  .mc-agenda-time { width: fit-content; }

  /* Eco grid single col */
  .mc-eco-grid { grid-template-columns: 1fr !important; }

  /* Badge cards */
  .mc-badge-card { padding: 1rem !important; }
  .mc-badge-card img { width: 50px !important; height: 50px !important; }

  /* Doc cards */
  .doc-card { padding: 1.2rem !important; border-radius: 14px !important; }
  .doc-card h4 { font-size: 0.95rem !important; }
  .doc-card ol, .doc-card ul { padding-left: 1rem; }
  .doc-card li { font-size: 0.82rem !important; }
  .doc-section-title { font-size: 1.1rem !important; }

  /* Calendar buttons */
  [style*="display: flex; gap: 0.4rem; flex-wrap: wrap"] {
    flex-direction: column !important;
  }

  /* Event fields */
  #eventoFields .row { flex-direction: column !important; }
  #vivoFields .row { flex-direction: column !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICIOS PAGE — Mobile Fix (≤576px)
   Fix: search bar overflow, category cards, pro cards, CTA
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  /* Search bar: stack vertically, remove inline max-width */
  .mc-search-card {
    padding: 1rem !important;
    border-radius: 14px !important;
  }
  .mc-search-input-group {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .mc-search-input-group .mc-search-input,
  .mc-search-input-group select,
  .mc-search-input-group .mc-search-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
    font-size: 0.9rem !important;
  }

  /* Category grid: 2 cols, tight spacing */
  .mc-categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .mc-category-card {
    padding: 0.8rem 0.4rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }
  .mc-category-emoji {
    font-size: 1.6rem !important;
    margin-bottom: 0.3rem !important;
  }
  .mc-category-name {
    font-size: 0.7rem !important;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
  }
  .mc-category-count {
    font-size: 0.6rem !important;
    color: var(--mc-gray-400);
  }

  /* Professional cards: smaller avatar, tighter layout */
  .mc-pro-card-header {
    padding: 1rem !important;
    gap: 0.7rem !important;
  }
  .mc-pro-avatar {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
  }
  .mc-pro-info h4 {
    font-size: 0.85rem !important;
    line-height: 1.2;
  }
  .mc-pro-category {
    font-size: 0.75rem !important;
  }
  .mc-pro-card-body {
    padding: 0 1rem 0.5rem !important;
  }
  .mc-pro-description {
    font-size: 0.8rem !important;
    -webkit-line-clamp: 2;
  }
  .mc-pro-card-footer {
    padding: 0.7rem 1rem !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .mc-stars .mc-star {
    font-size: 0.75rem !important;
  }
  .mc-rating-text {
    font-size: 0.8rem !important;
  }
  .mc-rating-count {
    font-size: 0.65rem !important;
  }

  /* Inclusive banner */
  .mc-inclusive-banner {
    padding: 1.5rem 1rem !important;
    margin: 1rem 0 !important;
  }
  .mc-inclusive-title {
    font-size: 1.05rem !important;
    line-height: 1.3;
  }
  .mc-inclusive-text {
    font-size: 0.85rem !important;
  }
  .mc-inclusive-icon {
    font-size: 2rem !important;
  }

  /* Security badges section */
  section[style*="border-bottom"] .col-6 {
    padding: 0.3rem !important;
  }
  section[style*="border-bottom"] .col-6 i {
    font-size: 1.2rem !important;
  }
  section[style*="border-bottom"] .col-6 div[style*="font-weight: 600"] {
    font-size: 0.72rem !important;
  }
  section[style*="border-bottom"] .col-6 div[style*="font-size: 0.75rem"] {
    font-size: 0.65rem !important;
    display: none; /* hide subtext on very small screens */
  }

  /* CTA buttons */
  .mc-btn.mc-btn-servicios,
  .mc-btn.mc-btn-postulante {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    padding: 0.6rem 1rem !important;
  }

  /* "No encuentras tu profesión?" box */
  div[style*="max-width: 600px"] {
    max-width: 100% !important;
    padding: 1.2rem !important;
  }
  div[style*="max-width: 600px"] h4 {
    font-size: 0.95rem !important;
  }
  div[style*="max-width: 600px"] p {
    font-size: 0.8rem !important;
  }
}

/* ═══ Print styles ═══ */
@media print {
  .mc-a11y-trigger,
  .mc-a11y-panel,
  .mc-a11y-overlay,
  nav,
  footer,
  .mc-sidebar-sticky { display: none !important; }
  body { font-size: 12pt !important; }
  .container { max-width: 100% !important; }
}


/* ═══ Role-based Navbar Accent Line ═══ */
nav#mc-main-navbar::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}
body.role-postulante nav#mc-main-navbar::after {
  background: linear-gradient(90deg, #047857 0%, #10b981 50%, #047857 100%) !important;
}
body.role-empresa nav#mc-main-navbar::after {
  background: linear-gradient(90deg, #003B5C 0%, #0077b6 50%, #003B5C 100%) !important;
}
body.role-profesional nav#mc-main-navbar::after {
  background: linear-gradient(90deg, #92400E 0%, #d97706 50%, #92400E 100%) !important;
}
/* ═══ Modal z-index fix ═══ */
.modal-backdrop { z-index: 1040 !important; }
.modal { z-index: 1050 !important; }
.modal-dialog { z-index: 1060 !important; }