/* =========================================================================
   GLOBAL.CSS - Versión Completa y Blindada (Estilo Agencia Internacional)
   Clase Blindada Principal: PL2026MK-21JUV
   Paleta Corporativa Sostenible: #027013, #14D92F, #E6EDE8, #076E49
   ========================================================================= */

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

/* Reset e Inyección de Variables Coherentes */
body.PL2026MK-21JUV {
  /* Tus colores corporativos aplicados con alta dirección de arte */
  --pl-bg: #030704;              /* Negro de fondo con un sutil matiz orgánico */
  --pl-bg-soft: #06120a;         /* Fondo secundario basado en tu color #027013 */
  --pl-card: rgba(230, 237, 232, 0.015);
  --pl-border: rgba(230, 237, 232, 0.06);
  --pl-border-hover: rgba(20, 217, 47, 0.25);
  
  /* Tipografías y Textos */
  --pl-text: #E6EDE8;            /* Tu color claro corporativo (Lectura premium) */
  --pl-muted: #ffffff;           /* Variante sutil para bloques secundarios */
  
  /* Tus Verdes de Marca */
  --pl-primary: #14D92F;         /* Verde Eléctrico (Acento, CTAs y focos de atención) */
  --pl-primary-2: #076E49;       /* Verde Esmeralda (Profundidad estructural) */
  --pl-accent: #027013;          /* Verde Bosque Oscuro (Bucle y degradados) */
  
  --pl-white: #ffffff;
  --pl-container: 1240px;
  --pl-transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  background-color: var(--pl-bg);
  color: var(--pl-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Escudo definitivo anti-desborde */
}

body.PL2026MK-21JUV * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.PL2026MK-21JUV a {
  text-decoration: none;
  color: inherit;
  transition: var(--pl-transition);
}

/* =========================================================================
   ELEGANCIA TIPOGRÁFICA Y CABECERAS
   ========================================================================= */
body.PL2026MK-21JUV h1, 
body.PL2026MK-21JUV h2, 
body.PL2026MK-21JUV h3 {
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pl-white);
  line-height: 1.15;
}

body.PL2026MK-21JUV .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--pl-primary);
  margin-bottom: 20px;
}

body.PL2026MK-21JUV .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--pl-primary);
  border-radius: 50%;
}

body.PL2026MK-21JUV .section-container {
  width: min(100% - 48px, var(--pl-container));
  margin: 0 auto;
}

body.PL2026MK-21JUV .section {
  padding: 100px 0;
}

body.PL2026MK-21JUV .section-heading {
  max-width: 720px;
  margin-bottom: 60px;
}

body.PL2026MK-21JUV .section-heading h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
}

body.PL2026MK-21JUV .section-heading p {
  font-size: 17px;
  color: var(--pl-muted);
  font-weight: 300;
}

/* =========================================================================
   HEADER & NAVEGACIÓN - ARQUITECTURA PREMIUM UNIFICADA (SIN DUPLICADOS)
   ========================================================================= */
body.PL2026MK-21JUV .site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(3, 7, 4, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--pl-border, rgba(255, 255, 255, 0.05));
}

body.PL2026MK-21JUV .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  width: min(100% - 48px, var(--pl-container, 1200px));
  margin: 0 auto;
}

body.PL2026MK-21JUV .brand-logo img {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
}

body.PL2026MK-21JUV .main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* -------------------------------------------------------------------------
   🔒 ENLACES DE TEXTO DEL MENÚ (Aislamiento Estricto de los Iconos)
   ------------------------------------------------------------------------- */
body.PL2026MK-21JUV .main-nav > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--pl-muted, #9ca3af) !important;
  text-decoration: none !important;
  position: relative !important;
  padding: 8px 0 !important;
  transition: color 0.3s ease !important;
}

/* Cambio de color en Hover para los textos */
body.PL2026MK-21JUV .main-nav > a:hover {
  color: var(--pl-text, #ffffff) !important;
}

/* 🟢 La Línea Expansiva desde el Centro (Efecto Premium) */
body.PL2026MK-21JUV .main-nav > a:not(.nav-cta)::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;             /* Se ubica en el centro exacto */
  width: 0 !important;              /* Inicia invisible */
  height: 2px !important;
  background-color: var(--pl-primary, #14D92F) !important; /* Tu verde de marca */
  transform: translateX(-50%) !important;
  transition: width 0.3s ease-in-out !important;
}

/* Al pasar el mouse, se expande simétricamente hacia los lados */
body.PL2026MK-21JUV .main-nav > a:not(.nav-cta):hover::after {
  width: 100% !important;
}

/* -------------------------------------------------------------------------
   ⚡ BURBUJAS SOCIALES (Búnker Independiente con Cero Líneas Inferiores)
   ------------------------------------------------------------------------- */
body.PL2026MK-21JUV .header-social-bubbles {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 4px !important;
  padding: 0 !important;
}

body.PL2026MK-21JUV .header-social-bubbles .social-bubble {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

/* 🔒 Bloqueo absoluto para que los iconos NUNCA tengan subrayado verde */
body.PL2026MK-21JUV .header-social-bubbles .social-bubble::after {
  display: none !important;
  content: none !important;
}

body.PL2026MK-21JUV .header-social-bubbles .social-bubble i {
  font-size: 15px !important;
  color: #9ca3af !important;
  transition: color 0.2s ease !important;
}

body.PL2026MK-21JUV .header-social-bubbles .social-bubble:hover {
  transform: translateY(-2px) scale(1.05) !important;
  border-color: rgba(20, 217, 47, 0.4) !important;
}

body.PL2026MK-21JUV .header-social-bubbles .bubble-whatsapp:hover { background: rgba(37, 211, 102, 0.08) !important; box-shadow: 0 6px 15px rgba(37, 211, 102, 0.2) !important; }
body.PL2026MK-21JUV .header-social-bubbles .bubble-whatsapp:hover i { color: #25D366 !important; }
body.PL2026MK-21JUV .header-social-bubbles .bubble-instagram:hover { background: rgba(225, 48, 108, 0.08) !important; box-shadow: 0 6px 15px rgba(225, 48, 108, 0.2) !important; }
body.PL2026MK-21JUV .header-social-bubbles .bubble-instagram:hover i { color: #E1306C !important; }
body.PL2026MK-21JUV .header-social-bubbles .bubble-linkedin:hover { background: rgba(10, 102, 194, 0.08) !important; box-shadow: 0 6px 15px rgba(10, 102, 194, 0.2) !important; }
body.PL2026MK-21JUV .header-social-bubbles .bubble-linkedin:hover i { color: #0A66C2 !important; }

/* -------------------------------------------------------------------------
   💎 BOTÓN DE ACCIÓN PRINCIPAL (Cotizar)
   ------------------------------------------------------------------------- */
body.PL2026MK-21JUV .main-nav a.nav-cta {
  background: var(--pl-text, #ffffff) !important;
  color: #030704 !important;
  padding: 10px 24px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.PL2026MK-21JUV .main-nav a.nav-cta:hover {
  background: var(--pl-primary, #14D92F) !important;
  color: #030704 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(20, 217, 47, 0.25) !important;
}

body.PL2026MK-21JUV .main-nav a.nav-cta::after {
  display: none !important;
}

/* Ocultar menú toggle en escritorio */
body.PL2026MK-21JUV .menu-toggle {
  display: none;
}

/* Adaptación Móvil */
@media (max-width: 768px) {
  body.PL2026MK-21JUV .header-social-bubbles {
    margin: 20px 0 !important;
    justify-content: center !important;
  }
}


/* Enlaces tradicionales del menú */
body.PL2026MK-21JUV .main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--pl-muted);
  position: relative;
  padding: 4px 0;
}

body.PL2026MK-21JUV .main-nav a:hover {
  color: var(--pl-text);
}

/* Evitamos pintar la línea en las burbujas */
body.PL2026MK-21JUV .main-nav a:not(.nav-cta):not(.social-bubble)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--pl-primary);
  transition: var(--pl-transition);
}

body.PL2026MK-21JUV .main-nav a:hover::after {
  width: 100%;
}
body.PL2026MK-21JUV .main-nav a.social-bubble:hover::after {
  width: 0 !important; /* Doble seguro contra el subrayado */
}

body.PL2026MK-21JUV .main-nav a.nav-cta {
  background: var(--pl-text);
  color: #030704;
  padding: 10px 24px;
  border-radius: 100px;
  font-weight: 600;
}

body.PL2026MK-21JUV .main-nav a.nav-cta:hover {
  background: var(--pl-primary);
  color: #030704;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 217, 47, 0.25);
}

body.PL2026MK-21JUV .menu-toggle {
  display: none;
}


/* =========================================================================
   CORRECCIÓN MAESTRA DE CAPAS DEL HERO (Texto al frente sobre el Video)
   ========================================================================= */
body.PL2026MK-21JUV .hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 160px 0 100px 0;
  background-color: #030704; /* Color de respaldo */
  overflow: hidden;
}

/* Capa Fondo 1: El Video de los hexágonos en la base profunda */
body.PL2026MK-21JUV .hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Nivel 1: Al fondo de todo */
  pointer-events: none;
}

/* Capa Fondo 2: Auroras verdes flotando sutilmente sobre el video */
body.PL2026MK-21JUV .hero-section::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, #14D92F 0%, #076E49 50%, transparent 100%);
  top: -5%;
  right: -5%;
  filter: blur(130px);
  opacity: 0.35;
  z-index: 2; /* Nivel 2: Sobre el video, debajo del filtro */
  animation: plHeroAuroraOne 25s ease-in-out infinite alternate;
  pointer-events: none;
}

body.PL2026MK-21JUV .hero-section::after {
  content: '';
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, #076E49 0%, #027013 60%, transparent 100%);
  bottom: -15%;
  left: -5%;
  filter: blur(110px);
  opacity: 0.4;
  z-index: 2;
  animation: plHeroAuroraTwo 20s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Capa Fondo 3: Filtros oscuros para garantizar que el texto blanco se lea */
body.PL2026MK-21JUV .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(3, 7, 4, 0.55) 0%,  /* Cambia 0.55 si quieres que el video brille más o menos */
    rgba(3, 7, 4, 0.75) 60%, 
    #030704 100%
  );
  z-index: 3; /* Nivel 3: Unifica el contraste cubriendo el video y luces */
  pointer-events: none;
}

/* Capa Frente 4: EL CONTENEDOR DE TEXTOS (¡Aquí estaba la clave!) */
body.PL2026MK-21JUV .hero-container {
  position: relative; /* <-- Obligatorio para activar el orden de capas */
  z-index: 10;        /* <-- Nivel 10: Salta al frente de todo de forma segura */
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
  width: min(100% - 48px, var(--pl-container));
  margin: 0 auto;
}

/* --- Animaciones de Deriva Orgánica Estilo Cortina Líquida --- */
@keyframes plHeroAuroraOne {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  50% {
    transform: translate(-70px, 50px) scale(1.15);
  }
  100% {
    transform: translate(40px, -30px) scale(0.95);
  }
}

@keyframes plHeroAuroraTwo {
  0% {
    transform: translate(0px, 0px) scale(1.1);
  }
  50% {
    transform: translate(60px, -40px) scale(0.9);
  }
  100% {
    transform: translate(-30px, 30px) scale(1.05);
  }
}

body.PL2026MK-21JUV .hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 1.1;
  margin-bottom: 24px;
  background: linear-gradient(180deg, var(--pl-text) 50%, rgba(0, 255, 4, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.PL2026MK-21JUV .hero-content p {
  font-size: 18px;
  color: var(--pl-muted);
  font-weight: 300;
  margin-bottom: 40px;
  max-width: 580px;
}

body.PL2026MK-21JUV .hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}

body.PL2026MK-21JUV .hero-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--pl-border);
  padding-top: 32px;
}

body.PL2026MK-21JUV .hero-trust div {
  display: flex;
  flex-direction: column;
}

body.PL2026MK-21JUV .hero-trust strong {
  font-size: 16px;
  color: var(--pl-white);
  margin-bottom: 4px;
}

body.PL2026MK-21JUV .hero-trust span {
  font-size: 13px;
  color: var(--pl-muted);
}

body.PL2026MK-21JUV .hero-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 560px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--pl-border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  justify-self: end;
}

body.PL2026MK-21JUV .hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--pl-transition);
}

body.PL2026MK-21JUV .hero-card:hover img {
  transform: scale(1.03);
}

body.PL2026MK-21JUV .hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 7, 4, 0.95) 0%, rgba(3, 7, 4, 0.3) 50%, transparent 100%);
  z-index: 1;
}

body.PL2026MK-21JUV .hero-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32px;
  z-index: 2;
}

body.PL2026MK-21JUV .hero-card-info span {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--pl-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 6px;
}

body.PL2026MK-21JUV .hero-card-info h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

/* =========================================================================
   EFECTOS DE ENTRADA Y TRANSICIONES CINEMÁTICAS
   ========================================================================= */
@keyframes plFadeUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

body.PL2026MK-21JUV .hero-content .eyebrow { opacity: 0; animation: plFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.2s; }
body.PL2026MK-21JUV .hero-content h1 { opacity: 0; animation: plFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.4s; }
body.PL2026MK-21JUV .hero-content p { opacity: 0; animation: plFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.5s; }
body.PL2026MK-21JUV .hero-actions { opacity: 0; animation: plFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.6s; }
body.PL2026MK-21JUV .hero-trust { opacity: 0; animation: plFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.7s; }
body.PL2026MK-21JUV .hero-card { opacity: 0; animation: plFadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.4s; }

body.PL2026MK-21JUV .scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
body.PL2026MK-21JUV .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
body.PL2026MK-21JUV .reveal-delay-0 { transition-delay: 0s; }
body.PL2026MK-21JUV .reveal-delay-1 { transition-delay: 0.15s; }
body.PL2026MK-21JUV .reveal-delay-2 { transition-delay: 0.3s; }
body.PL2026MK-21JUV .reveal-delay-3 { transition-delay: 0.45s; }

/* =========================================================================
   ESTILIZACIÓN DE ICONOS SVG & COMPONENTES PREMIUM
   ========================================================================= */
body.PL2026MK-21JUV .fa-svg-icon { width: 22px; height: 22px; fill: var(--pl-primary); transition: var(--pl-transition); }
body.PL2026MK-21JUV svg.svg-inline--fa { width: 18px; height: 18px; color: var(--pl-primary); transition: var(--pl-transition); vertical-align: middle; }

body.PL2026MK-21JUV .service-icon-wrapper {
  width: 54px; height: 54px; border-radius: 12px;
  background: rgba(20, 217, 47, 0.03); border: 1px solid var(--pl-border);
  display: flex; align-items: center; justify-content: center; margin: 32px 0 0 32px;
}
body.PL2026MK-21JUV .service-card:hover .service-icon-wrapper {
  border-color: var(--pl-primary); background: rgba(20, 217, 47, 0.08); transform: scale(1.05);
}


/* =========================================================================
   LOOP DE IMÁGENES REFORZADO - TRANSMISIÓN CRUZADA SIN DELAYS
   ========================================================================= */

/* Contenedor Rígido */
body.PL2026MK-21JUV .service-image-wrapper {
  position: relative !important;
  width: 100%;
  aspect-ratio: 1 / 1;        /* 📐 Cuadrado perfecto garantizado */
  overflow: hidden !important;
  border-radius: 20px;
  background: #030704;
}

/* Base obligatoria para las 3 imágenes */
body.PL2026MK-21JUV .service-image-wrapper img.loop-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0; /* Ocultas por defecto, los keyframes controlan cuándo aparecen */
}

/* -------------------------------------------------------------------------
   ASIGNACIÓN DE CARRIL EXCLUSIVO (Mismo tiempo, distintas animaciones)
   ------------------------------------------------------------------------- */
body.PL2026MK-21JUV .service-image-wrapper img.loop-img:nth-child(1) {
  animation: plCrossfadeImg1 12s infinite ease-in-out;
}

body.PL2026MK-21JUV .service-image-wrapper img.loop-img:nth-child(2) {
  animation: plCrossfadeImg2 12s infinite ease-in-out;
}

body.PL2026MK-21JUV .service-image-wrapper img.loop-img:nth-child(3) {
  animation: plCrossfadeImg3 12s infinite ease-in-out;
}

/* =========================================================================
   LÍNEAS DE TIEMPO INDEPENDIENTES (Sincronización Matemáticas de 12s)
   ========================================================================= */

/* 🖼️ Imagen 1: Muestra de 0s a 4s (incluye paneo fluido) */
@keyframes plCrossfadeImg1 {
  0%, 25% { opacity: 1; transform: scale(1); }       /* Visible de 0s a 3s */
  33.33%  { opacity: 0; transform: scale(1.04); }     /* Transición (fades out) al llegar a 4s */
  91.66%  { opacity: 0; transform: scale(1.04); }     /* Se mantiene oculta */
  100%    { opacity: 1; transform: scale(1); }       /* Reaparece al cerrar el ciclo */
}

/* 🖼️ Imagen 2: Muestra de 4s a 8s */
@keyframes plCrossfadeImg2 {
  0%, 25% { opacity: 0; transform: scale(1.04); }     /* Oculta de 0s a 3s */
  33.33%, 58.33% { opacity: 1; transform: scale(1); } /* Transiciona (fades in) y se ve de 4s a 7s */
  66.66%  { opacity: 0; transform: scale(1.04); }     /* Transición (fades out) al llegar a 8s */
  100%    { opacity: 0; transform: scale(1.04); }     /* Se mantiene oculta el resto del tiempo */
}

/* 🖼️ Imagen 3: Muestra de 8s a 12s */
@keyframes plCrossfadeImg3 {
  0%, 58.33% { opacity: 0; transform: scale(1.04); }  /* Oculta de 0s a 7s */
  66.66%, 91.66% { opacity: 1; transform: scale(1); } /* Transiciona (fades in) y se ve de 8s a 11s */
  100%    { opacity: 0; transform: scale(1.04); }     /* Transición (fades out) al cerrar el ciclo */
}

/* =========================================================================
   BOTONES Y MICROINTERACCIONES
   ========================================================================= */
body.PL2026MK-21JUV .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; padding: 16px 32px; border-radius: 100px;
  white-space: nowrap; transition: var(--pl-transition);
}
body.PL2026MK-21JUV .btn-primary { background: var(--pl-primary); color: #030704; }
body.PL2026MK-21JUV .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 217, 47, 0.3); }
body.PL2026MK-21JUV .btn-secondary { border: 1px solid var(--pl-border); color: var(--pl-white); background: rgba(255, 255, 255, 0.01); }
body.PL2026MK-21JUV .btn-secondary:hover { border-color: var(--pl-white); background: rgba(255, 255, 255, 0.05); transform: translateY(-3px); }

body.PL2026MK-21JUV .fa-btn-icon, body.PL2026MK-21JUV .btn i { width: 18px; height: 18px; font-size: 18px; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
body.PL2026MK-21JUV .btn-primary:hover .icon-left { transform: scale(1.1) rotate(-8deg); }
body.PL2026MK-21JUV .btn-secondary:hover .icon-right { transform: translateX(5px); }

/* =========================================================================
   SERVICES SECTION - AJUSTES DE SEMÁNTICA Y ACCESIBILIDAD PREMIUM
   ========================================================================= */

body.PL2026MK-21JUV .services-section {
  position: relative;
  background-color: #ffffff;
  padding: 120px 0;
  z-index: 5;
}

body.PL2026MK-21JUV .services-section .section-heading h2 {
  color: #030704;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

body.PL2026MK-21JUV .services-section .section-heading p {
  color: #4b5563;
  font-size: 16.5px;
  max-width: 620px;
  margin: 0 auto 60px auto;
  line-height: 1.6;
}

body.PL2026MK-21JUV .services-section .eyebrow {
  color: #076E49;
  font-weight: 700;
}

body.PL2026MK-21JUV .services-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); 
  gap: 40px; 
}

body.PL2026MK-21JUV .service-card { 
  background: #ffffff; 
  border: 1px solid rgba(3, 7, 4, 0.07); 
  border-radius: 24px; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  box-shadow: 0 12px 40px rgba(3, 7, 4, 0.03); 
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
}

body.PL2026MK-21JUV .service-card:hover { 
  transform: translateY(-8px); 
  border-color: rgba(7, 110, 73, 0.2);
  box-shadow: 0 24px 60px rgba(3, 7, 4, 0.09); 
}

/* Optimización Semántica del wrapper <figure> */
body.PL2026MK-21JUV .service-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  margin: 0; /* Reset obligatorio para eliminar el margen nativo de <figure> */
  padding: 0;
}

body.PL2026MK-21JUV .service-card img { 
  width: 100%; 
  height: 100%;
  object-fit: cover; 
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

body.PL2026MK-21JUV .service-card:hover img {
  transform: scale(1.05) rotate(0.4deg);
}

/* El Icono Flotante se mantiene entero y cruza la línea perfectamente */
body.PL2026MK-21JUV .service-icon-badge {
  width: 52px;
  height: 52px;
  background: #076E49; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(7, 110, 73, 0.25);
  z-index: 10; 
  position: relative;
  margin-top: -26px;     
  margin-bottom: -26px;  
  margin-left: auto;     
  margin-right: 32px;    
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
}

body.PL2026MK-21JUV .service-icon-badge svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2px;
}

body.PL2026MK-21JUV .service-card:hover .service-icon-badge {
  transform: scale(1.15) rotate(-8deg);
  background-color: #14D92F;
  box-shadow: 0 8px 25px rgba(20, 217, 47, 0.35);
}

body.PL2026MK-21JUV .service-content { 
  padding: 42px 32px 32px 32px; 
  display: flex; 
  flex-direction: column; 
  flex-grow: 1; 
}

body.PL2026MK-21JUV .service-content h3 { 
  font-size: 21px; 
  font-weight: 700;
  margin-bottom: 12px; 
  color: #030704;
}

body.PL2026MK-21JUV .service-content p { 
  color: #4b5563; 
  font-size: 14.5px; 
  line-height: 1.6;
  margin-bottom: 32px; 
  flex-grow: 1; 
}

/* El botón elegante con animación de llenado líquido */
body.PL2026MK-21JUV .service-btn { 
  align-self: flex-start;
  font-size: 13.5px; 
  font-weight: 600; 
  color: #076E49; 
  border: 1px solid rgba(7, 110, 73, 0.25);
  padding: 10px 24px;
  border-radius: 30px;
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.PL2026MK-21JUV .service-btn .btn-arrow {
  width: 15px;
  height: 15px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

body.PL2026MK-21JUV .service-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #076E49;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

body.PL2026MK-21JUV .service-btn:hover {
  color: #ffffff;
  border-color: #076E49;
  box-shadow: 0 6px 15px rgba(7, 110, 73, 0.15);
}

body.PL2026MK-21JUV .service-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

body.PL2026MK-21JUV .service-btn:hover .btn-arrow {
  transform: translateX(4px);
}
/* =========================================================================
   BENEFITS SECTION (Split Layout - Optimizado para Fondo Claro #F6FAF0)
   ========================================================================= */

/* El contenedor general que envuelve toda la sección de beneficios */
body.PL2026MK-21JUV .benefits-section {
  background-color: #F6FAF0; /* Tu nuevo fondo verde menta pálido premium */
  padding: 120px 0;          /* Espaciado elegante para que respire el contenido */
  position: relative;
  z-index: 5;
}

body.PL2026MK-21JUV .benefits-layout { 
  display: grid; 
  grid-template-columns: 1.1fr 0.9fr; /* Un toque más de presencia al texto en pantallas grandes */
  gap: 80px; 
  align-items: center; 
}

/* Forzamos la ceja superior a tu verde esmeralda corporativo */
body.PL2026MK-21JUV .benefits-section .eyebrow {
  color: #076E49;
  font-weight: 700;
}

/* CORRECCIÓN: Título en negro denso orgánico */
body.PL2026MK-21JUV .benefits-content h2 { 
  color: #030704; 
  font-size: clamp(2rem, 4vw, 3rem); 
  margin-bottom: 20px; 
  line-height: 1.2;
}

/* CORRECCIÓN: Párrafo en gris oscuro de alta lectura (reemplaza var(--pl-muted)) */
body.PL2026MK-21JUV .benefits-content p { 
  color: #4b5563; 
  margin-bottom: 32px; 
  line-height: 1.6;
}

body.PL2026MK-21JUV .check-list { 
  list-style: none; 
  margin-bottom: 40px; 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
}

/* CORRECCIÓN: Textos de la lista en gris grafito legible */
body.PL2026MK-21JUV .check-list li { 
  color: #1f2937;
  display: flex; 
  align-items: flex-start; /* Mantener flex-start para textos largos */
  gap: 12px; 
  font-size: 15px; 
  line-height: 1.4;
}

/* CORRECCIÓN: Símbolo de check en verde esmeralda profundo para contraste óptimo */
body.PL2026MK-21JUV .check-list li::before { 
  content: '✓'; 
  color: #076E49; 
  font-weight: 800; 
  margin-top: 1px; 
}

body.PL2026MK-21JUV .benefits-image img { 
  width: 100%;       
  height: auto; 
  display: block;
  border-radius: 20px; 
  border: 1px solid rgba(3, 7, 4, 0.06); /* Borde sutil oscuro en vez del borde claro */
  box-shadow: 0 15px 35px rgba(3, 7, 4, 0.04); /* Sombra suave para que flote sobre el fondo menta */
}

/* =========================================================================
   📱 ADAPTACIÓN ABSOLUTA PARA FORMATO MÓVIL (Pantallas menores a 768px)
   ========================================================================= */
@media (max-width: 768px) {
  body.PL2026MK-21JUV .benefits-section {
    padding: 80px 0; /* Comprime el espaciado en celulares de forma limpia */
  }

  body.PL2026MK-21JUV .benefits-layout { 
    grid-template-columns: 1fr; /* Colapsa la grilla a una sola columna vertical */
    gap: 40px;                  /* Reduce el espacio intermedio de 80px a la mitad */
  }

  body.PL2026MK-21JUV .benefits-content h2 {
    font-size: 1.85rem; /* Ajusta el título para que no se vea gigante en el celular */
  }

  body.PL2026MK-21JUV .benefits-content .btn {
    display: inline-flex;
    justify-content: center;
    width: 100%;       /* Estira el botón al ancho de la pantalla para mejorar la ergonomía táctil */
    max-width: 340px;  /* Evita que se deforme si giran el teléfono horizontalmente */
  }
}

/* =========================================================================
   PORTFOLIO SECTION - MOSAICO DE ALTO IMPACTO Y PARALLAX CINEMÁTICO
   ========================================================================= */

body.PL2026MK-21JUV .portfolio-section {
  position: relative;
  background-color: #030704; /* Fondo oscuro denso para que las fotos exploten */
  padding: 120px 0;
  overflow: hidden;
  z-index: 5;
}

/* Permitir que la grilla respire a los costados de forma expansiva */
body.PL2026MK-21JUV .portfolio-section .full-bleed-container {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
}

/* 1. Arquitectura del Mosaico (12 Columnas Asimétricas) */
body.PL2026MK-21JUV .portfolio-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* Configuración base de cada módulo del mosaico */
body.PL2026MK-21JUV .portfolio-item {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  background-color: #011203;
}

/* Distribución de las piezas del mosaico en escritorio */
body.PL2026MK-21JUV .item-featured {
  grid-column: span 8;
  height: 540px;
}

body.PL2026MK-21JUV .item-sidebar {
  grid-column: span 4;
  height: 540px;
}

body.PL2026MK-21JUV .item-panoramic {
  grid-column: span 12;
  height: 440px;
}

/* 2. El Marco Parallax Magnético */
body.PL2026MK-21JUV .portfolio-parallax-frame {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Imagen sobredimensionada para permitir el movimiento de Parallax */
body.PL2026MK-21JUV .portfolio-parallax-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px; /* Al medir más del 100% de la tarjeta, podemos deslizarla */
  height: 118%; 
  object-fit: cover;
  /* Desfase base inicial */
  transform: translateY(-8%);
  transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efecto Parallax Dinámico: La foto baja controladamente mientras el usuario interactúa */
body.PL2026MK-21JUV .portfolio-item:hover .portfolio-parallax-frame img {
  transform: translateY(0%) scale(1.03);
}

/* Filtro de penumbra protector para garantizar lectura de textos */
body.PL2026MK-21JUV .portfolio-dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 7, 4, 0.85) 0%, rgba(3, 7, 4, 0.2) 60%, transparent 100%);
  z-index: 2;
  transition: opacity 0.4s ease;
}

body.PL2026MK-21JUV .portfolio-item:hover .portfolio-dark-overlay {
  opacity: 0.95;
}

/* 3. Las Cápsulas de Texto Estilo Glassmorphism */
body.PL2026MK-21JUV .portfolio-caption {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 3;
  padding: 24px 32px;
  border-radius: 20px;
  background: rgba(3, 7, 4, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(10px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;
}

body.PL2026MK-21JUV .portfolio-item:hover .portfolio-caption {
  transform: translateY(0px);
  border-color: rgba(20, 217, 47, 0.3); /* Destello de tu verde brillante */
}

body.PL2026MK-21JUV .portfolio-caption h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Punto decorativo inteligente que se ilumina al hacer hover */
body.PL2026MK-21JUV .portfolio-caption h3::after {
  content: '';
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

body.PL2026MK-21JUV .portfolio-item:hover .portfolio-caption h3::after {
  background: #14D92F;
  transform: scale(1.3);
}

/* Descripción Oculta que se despliega dinámicamente */
body.PL2026MK-21JUV .portfolio-caption p {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-height: 0; /* Escondido por defecto mediante colapso de caja */
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, margin-top 0.3s ease;
}

/* Revelado suave y fluido del texto descriptivo */
body.PL2026MK-21JUV .portfolio-item:hover .portfolio-caption p {
  margin-top: 8px;
  max-height: 80px; /* Altura máxima permitida para expandirse */
  opacity: 1;
}

/* =========================================================================
   📱 ADAPTACIÓN ABSOLUTA PARA FORMATO MÓVIL (Anti-Aplastamiento)
   ========================================================================= */
@media (max-width: 992px) {
  body.PL2026MK-21JUV .item-featured,
  body.PL2026MK-21JUV .item-sidebar {
    grid-column: span 6; /* En tablets se dividen a mitades iguales */
    height: 480px;
  }
}

@media (max-width: 768px) {
  body.PL2026MK-21JUV .portfolio-section {
    padding: 80px 0;
  }

  body.PL2026MK-21JUV .portfolio-mosaic-grid {
    grid-template-columns: 1fr; /* Colapsa por completo a una sola fila vertical */
    gap: 20px;
  }

  body.PL2026MK-21JUV .portfolio-item,
  body.PL2026MK-21JUV .item-featured,
  body.PL2026MK-21JUV .item-sidebar,
  body.PL2026MK-21JUV .item-panoramic {
    grid-column: span 12 !important; /* Forzado responsivo simétrico */
    height: 380px; /* Altura ideal optimizada para pantallas móviles */
  }

  body.PL2026MK-21JUV .portfolio-caption {
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 20px;
  }

  /* En celulares es mejor dejar la descripción visible siempre para evitar fricción táctil */
  body.PL2026MK-21JUV .portfolio-caption p {
    margin-top: 6px;
    max-height: 80px;
    opacity: 1;
  }
}
/* =========================================================================
   ZONES SECTION - ADAPTACIÓN A FONDO CLARO CON TU PROPIA CALIBRACIÓN
   ========================================================================= */
body.PL2026MK-21JUV .zones-section {
  position: relative;
  background-color: #F6FAF0; /* Tu fondo menta pálido claro */
  padding: 120px 0;
  overflow: hidden;
  z-index: 5;
}

body.PL2026MK-21JUV .zones-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 80px;
  align-items: center;
}

/* CORRECCIÓN: Título principal en negro orgánico */
body.PL2026MK-21JUV .zones-info-panel h2 {
  color: #030704;
  font-size: clamp(2rem, 3.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* CORRECCIÓN: Párrafo descriptivo en gris oscuro legible */
body.PL2026MK-21JUV .zones-info-panel p.zones-description {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 40px;
}

body.PL2026MK-21JUV .zones-pill-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

/* Estilos para los iconos dentro de las píldoras de zona */
.zone-pill {
  display: inline-flex;
  align-items: center;
}

.zone-pill i {
  margin-right: 8px;           /* Separación limpia del texto */
  flex-shrink: 0;              /* 🔒 Prohíbe que el navegador los comprima horizontalmente */
  color: #14D92F;              /* Tu verde brillante de marca para el destello premium */
  font-size: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-reacción interactiva en Hover */
.zone-pill:hover i {
  transform: scale(1.15) rotate(-4deg); /* Sutil brinco y giro dinámico al pasar el mouse */
  color: #ffffff;                       /* Cambia a blanco si la píldora se ilumina en verde */
}

/* CORRECCIÓN: Cápsulas adaptadas para alta lectura en fondo claro */
body.PL2026MK-21JUV .zone-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(3, 7, 4, 0.03); /* Fondo sutil oscuro */
  border: 1px solid rgba(3, 7, 4, 0.08); /* Borde fino oscuro */
  border-radius: 30px;
  color: #030704; /* Texto en negro */
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

body.PL2026MK-21JUV .zone-pill:hover {
  background: rgba(7, 110, 73, 0.08);
  border-color: #076E49;
  color: #076E49;
  transform: translateY(-2px);
}

body.PL2026MK-21JUV .zone-pill .pill-dot {
  width: 7px;
  height: 7px;
  background: rgba(3, 7, 4, 0.2);
  border-radius: 50%;
}

body.PL2026MK-21JUV .pill-main {
  border-color: rgba(7, 110, 73, 0.3);
  background: rgba(7, 110, 73, 0.06);
  color: #076E49;
}

body.PL2026MK-21JUV .pill-main .pill-dot {
  background: #076E49;
}

/* Lienzo del Mapa (MOLDEADO SIN RECUADRO OSCURO) */
body.PL2026MK-21JUV .zones-map-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: transparent; /* ◄ CORRECCIÓN: Se vuelve del mismo color del fondo */
  border: 1px solid rgba(7, 110, 73, 0.15); /* Marco sutil verde menta */
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(3, 7, 4, 0.02); /* Eliminamos sombras negras pesadas */
}

/* Modificamos la cuadrícula para que juegue limpio con el fondo claro */
body.PL2026MK-21JUV .map-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(7, 110, 73, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 110, 73, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 1;
}

/* Control y Escala de la Imagen SVG */
body.PL2026MK-21JUV .map-schematic-svg,
body.PL2026MK-21JUV #bogota-vector-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 0px;
  transform: scale(1.35); 
  transform-origin: center center;
}

/* CORRECCIÓN: Forzamos la silueta de Bogotá a resaltar estéticamente en claro */
body.PL2026MK-21JUV .map-schematic-svg path,
body.PL2026MK-21JUV .map-schematic-svg polygon {
  fill: #BCE7C6 !important; /* Tu verde menta corporativo resalta premium aquí */
  stroke: #ffffff !important; /* Divisiones finas en blanco pulcro */
  stroke-width: 1.5px !important;
  transition: all 0.3s ease;
  cursor: pointer;
}

body.PL2026MK-21JUV .map-schematic-svg path:hover,
body.PL2026MK-21JUV .map-schematic-svg polygon:hover {
  fill: #A4DCB4 !important; /* Reacción de contraste suave */
}

/* Pines de Radar (Tus marcadores rojos intactos) */
body.PL2026MK-21JUV .map-radar-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

body.PL2026MK-21JUV .radar-core {
  width: 26px; 
  height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF3333'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(255, 51, 51, 0.35));
}

body.PL2026MK-21JUV .radar-pulse {
  position: absolute;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 51, 51, 0.12); 
  border: 1px solid #FF3333;                 
  border-radius: 50%;
  z-index: 1;
  animation: plRadarPing 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}

@keyframes plRadarPing {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Ocultación Semántica SEO */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================================
   📌 TU PROPIA TABLA DE CALIBRACIÓN DE PINES (Mantenida intacta)
   ========================================================================= */
body.PL2026MK-21JUV .pin-loc-bogota         { top: 48%; left: 48%; } 
body.PL2026MK-21JUV .pin-loc-engativa       { top: 46%; left: 25%; } 
body.PL2026MK-21JUV .pin-loc-chapinero      { top: 33%; left: 46%; } 
body.PL2026MK-21JUV .pin-loc-fontibon       { top: 60%; left: 32%; } 
body.PL2026MK-21JUV .pin-loc-puente-aranda  { top: 52%; left: 56%; } 
body.PL2026MK-21JUV .pin-loc-kennedy        { top: 65%; left: 50%; }

@media (max-width: 992px) {
  body.PL2026MK-21JUV .zones-layout { grid-template-columns: 1fr; gap: 48px; }
  body.PL2026MK-21JUV .zones-map-canvas { max-width: 500px; margin: 0 auto; }
}

/* =========================================================================
   ZONES & FAQ
   ========================================================================= */
/* =========================================================================
   FAQ SECTION - TARJETAS FLOTANTES ACORDEÓN (FONDO CLARO PREMIUM)
   ========================================================================= */

body.PL2026MK-21JUV .faq-section {
  position: relative;
  background-color: #F6FAF0; /* Sostiene tu fondo menta pálido de marca */
  padding: 120px 0;
  z-index: 5;
}

/* Control estricto de textos de cabecera en el entorno claro */
body.PL2026MK-21JUV .faq-section .section-heading h2 {
  color: #030704; /* Negro denso orgánico */
}

body.PL2026MK-21JUV .faq-section .eyebrow {
  color: #076E49; /* Verde esmeralda corporativo */
  font-weight: 700;
}

/* Contenedor centralizado para las tarjetas */
body.PL2026MK-21JUV .faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Separación elegante entre tarjetas */
}

/* 1. ARQUITECTURA DE LA TARJETA (CÁPSULA INDIVIDUAL) */
body.PL2026MK-21JUV .faq-item {
  background-color: #ffffff; /* Blanco puro para reventar contra el menta claro */
  border: 1px solid rgba(7, 110, 73, 0.08); /* Borde sutil verde esmeralda */
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* Efecto hover: La tarjeta flota y gana presencia tridimensional */
body.PL2026MK-21JUV .faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 110, 73, 0.25);
  box-shadow: 0 12px 30px rgba(3, 7, 4, 0.03);
}

/* Estado Activo (Cuando la pregunta está abierta) */
body.PL2026MK-21JUV .faq-item[open] {
  border-color: #076E49; /* Encendido con tu verde corporativo */
  box-shadow: 0 15px 35px rgba(7, 110, 73, 0.05);
}

/* 2. EL DISPARADOR (SUMMARY DE CONTROL) */
body.PL2026MK-21JUV .faq-trigger {
  list-style: none; /* Elimina la flecha nativa horrible del navegador */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  cursor: pointer;
  user-select: none;
}

/* Remover la flecha por defecto en navegadores Safari (Webkit) */
body.PL2026MK-21JUV .faq-trigger::-webkit-details-marker {
  display: none;
}

body.PL2026MK-21JUV .faq-trigger h3 {
  font-size: 18px;
  font-weight: 700;
  color: #030704; /* Alta legibilidad */
  line-height: 1.4;
  margin: 0;
  padding-right: 24px; /* Respiro para que el texto nunca choque con el icono */
  transition: color 0.3s ease;
}

body.PL2026MK-21JUV .faq-item:hover .faq-trigger h3 {
  color: #076E49; /* El título se tiñe de verde al pasar el mouse */
}

/* 3. ICONO PREMIUM INTERACTIVO (Maturación Más a Menos en CSS Puro) */
body.PL2026MK-21JUV .faq-icon-marker {
  position: relative;
  width: 36px;
  height: 36px;
  background-color: rgba(7, 110, 73, 0.05); /* Esfera suave verde */
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease, transform 0.4s ease;
}

/* Construcción de las líneas internas del símbolo "Más" (+ ) */
body.PL2026MK-21JUV .faq-icon-marker::before,
body.PL2026MK-21JUV .faq-icon-marker::after {
  content: '';
  position: absolute;
  background-color: #076E49;
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
}

/* Línea Horizontal */
body.PL2026MK-21JUV .faq-icon-marker::before {
  width: 14px;
  height: 2px;
}

/* Línea Vertical */
body.PL2026MK-21JUV .faq-icon-marker::after {
  width: 2px;
  height: 14px;
}

/* INTERACCIÓN LÍQUIDA: Mutación del icono al abrir el acordeón */
body.PL2026MK-21JUV .faq-item[open] .faq-icon-marker {
  background-color: #076E49; /* La esfera se llena por completo de verde */
  transform: rotate(180deg);  /* Giro cinemático de media vuelta */
}

body.PL2026MK-21JUV .faq-item[open] .faq-icon-marker::before {
  background-color: #ffffff; /* La línea horizontal pasa a blanco puro */
}

body.PL2026MK-21JUV .faq-item[open] .faq-icon-marker::after {
  background-color: #ffffff;
  transform: rotate(90deg) scale(0); /* La línea vertical colapsa y desaparece mágicamente */
}

/* 4. CONTENIDO DESPLEGABLE (ANIMACIÓN DE APERTURA SUAVE) */
body.PL2026MK-21JUV .faq-answer {
  padding: 0 32px 24px 32px; /* Margen interno alineado con el disparador */
  animation: plFaqSlideIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

body.PL2026MK-21JUV .faq-answer p {
  font-size: 15px;
  color: #4b5563; /* Gris oscuro neutro de alta lectura */
  line-height: 1.65;
  margin: 0;
}

/* Keyframe de revelado cinemático (Desplazamiento vertical + Opacidad) */
@keyframes plFaqSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   📱 ADAPTACIÓN DE ERGONOMÍA MÓVIL
   ========================================================================= */
@media (max-width: 768px) {
  body.PL2026MK-21JUV .faq-section {
    padding: 80px 0;
  }

  body.PL2026MK-21JUV .faq-trigger {
    padding: 20px 24px;
  }

  body.PL2026MK-21JUV .faq-trigger h3 {
    font-size: 16px;
  }

  body.PL2026MK-21JUV .faq-answer {
    padding: 0 24px 20px 24px;
  }
}

/* =========================================================================
   SECCIÓN DE VIDEO / SHOWREEL PREMIUM
   ========================================================================= */
body.PL2026MK-21JUV .video-section { background: radial-gradient(circle at 20% 80%, rgba(20, 217, 47, 0.015) 0%, transparent 60%); }
body.PL2026MK-21JUV .video-wrapper { position: relative; width: 100%; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; border: 1px solid var(--pl-border); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); background-color: var(--pl-bg-soft); }
body.PL2026MK-21JUV .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; }
body.PL2026MK-21JUV .video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 7, 4, 0.2) 0%, rgba(3, 7, 4, 0.7) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 10; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
body.PL2026MK-21JUV .play-trigger { width: 88px; height: 88px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--pl-white); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
body.PL2026MK-21JUV .play-trigger svg { transform: translateX(3px); width: 26px; height: 26px; }
body.PL2026MK-21JUV .play-trigger:hover { background-color: var(--pl-primary); border-color: var(--pl-primary); color: #030704; transform: scale(1.08); box-shadow: 0 0 40px rgba(20, 217, 47, 0.35); }
body.PL2026MK-21JUV .video-duration { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
body.PL2026MK-21JUV .video-wrapper.video-active .video-overlay { opacity: 0; visibility: hidden; pointer-events: none; }

/* =========================================================================
   SECCIÓN DE CONFIANZA - LOOP ANIMADO AMBIENTAL
   ========================================================================= */
/* =========================================================================
   TRUST LOOP SECTION - ENTORNO TRIDIMENSIONAL CON FONDO LÍQUIDO ANIMADO
   ========================================================================= */
body.PL2026MK-21JUV .trust-loop-section {
  position: relative;
  /* Conservamos tu espectacular animación de bucle ambiental */
  background: linear-gradient(135deg, #030704, #06120a, #025211, #030704);
  background-size: 400% 400%;
  animation: plAmbientLoop 16s ease infinite;
  padding: 100px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
  z-index: 6;
}

@keyframes plAmbientLoop {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Grilla Responsiva: Evita que las 4 columnas se aplasten en pantallas medianas */
body.PL2026MK-21JUV .trust-loop-grid { 
  display: grid; 
  /* 🟢 CORREGIDO: Subimos de 260px a 290px para evitar que las tarjetas se achiquen al extremo */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); 
  gap: 32px; 
}

/* Tarjetas con Perspectiva Espacial Activa */
body.PL2026MK-21JUV .trust-loop-item { 
  background: rgba(255, 255, 255, 0.01); 
  border: 1px solid rgba(255, 255, 255, 0.03); 
  padding: 44px 32px; 
  border-radius: 24px; /* Esquinas un poco más curvas y modernas */
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  display: flex; 
  flex-direction: column; 
  
  /* Motor de renderizado 3D para la tarjeta */
  transform-style: preserve-3d;
  perspective: 1000px;
  
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efecto de inclinación y balanceo giroscópico en Hover */
body.PL2026MK-21JUV .trust-loop-item:hover { 
  background: rgba(255, 255, 255, 0.03); 
  border-color: rgba(20, 217, 47, 0.2); /* Destello sutil de tu verde brillante */
  transform: translateY(-6px) rotateX(4deg) rotateY(-2deg); 
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),
              0 0 30px rgba(7, 110, 73, 0.15); 
}

/* Envoltorio flex para alinear el icono 3D al lado del número */
body.PL2026MK-21JUV .trust-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  transform: translateZ(20px); 
}

/* El Contenedor del Icono con Volumen Extruido */
body.PL2026MK-21JUV .trust-3d-icon {
  width: 54px !important;        /* 🔒 Estricto ancho fijo */
  height: 54px !important;       /* 🔒 Estricto alto fijo */
  min-width: 54px !important;    /* 🔒 Evita colapsos en pantallas medianas */
  max-width: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  flex-shrink: 0 !important;     /* 🔒 Cero deformación por empuje flex */
  aspect-ratio: 1 / 1 !important;/* 📐 Cuadrado perfecto garantizado */
  
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.1),
              0 8px 18px rgba(0,0,0,0.4);
  transform: translateZ(10px); 
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease, box-shadow 0.3s ease;
}

body.PL2026MK-21JUV .trust-3d-icon svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;        /* Protege también el SVG interno */
  color: #14D92F; 
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

/* Micro-reacción: El icono salta más hacia adelante y gira de forma independiente */
body.PL2026MK-21JUV .trust-loop-item:hover .trust-3d-icon {
  /* Mantenemos tus transformaciones 3D pero aseguramos que flex-shrink siga en 0 */
  transform: translateZ(40px) scale(1.1) rotate(12deg);
  border-color: rgba(20, 217, 47, 0.4);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2),
              0 12px 25px rgba(7, 110, 73, 0.3);
}

/* El Número con Parallax Masivo */
body.PL2026MK-21JUV .trust-num {  
  font-family: 'Lexend', sans-serif;  
  
  /* 🟢 EFECTO ELÁSTICO: Escala solo entre 28px y 38px según el tamaño de la pantalla */
  font-size: clamp(28px, 3.2vw, 38px);  
  
  font-weight: 800;  
  line-height: 1.1;  
  letter-spacing: -0.03em;  
  background: linear-gradient(135deg, #ffffff 40%, #14D92F 100%);  
  -webkit-background-clip: text;  
  -webkit-text-fill-color: transparent;  
  margin-bottom: 0; 
  display: block;  
  transform: translateZ(15px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* 🔒 REGLA DE ORO: Eliminamos el despedazado de palabras por letras */
  overflow-wrap: normal;
  word-break: normal;
}

/* El número se dispara hacia el frente del monitor al hacer hover */
body.PL2026MK-21JUV .trust-loop-item:hover .trust-num {
  transform: translateZ(50px) scale(1.05);
}

/* Títulos y Párrafos de las Métricas */
body.PL2026MK-21JUV .trust-loop-item h3 { 
  font-size: 16.5px; 
  font-weight: 700; 
  margin-bottom: 10px; 
  color: #ffffff; 
  letter-spacing: -0.01em; 
  transform: translateZ(10px);
}

body.PL2026MK-21JUV .trust-loop-item p { 
  font-size: 13.5px; 
  color: #9ca3af; /* Gris claro de alta legibilidad para fondos oscuros */
  line-height: 1.55; 
  font-weight: 400; /* Subimos a 400 para que el texto gane cuerpo y nitidez */
  margin: 0;
  transform: translateZ(5px);
}

/* =========================================================================
   SECCIÓN CTA: DISEÑO ABSTRACTO VERDE LÍQUIDO (ALTO IMPACTO)
   ========================================================================= */
body.PL2026MK-21JUV .cta-abstract-section { 
  position: relative; 
  
  background: linear-gradient(
    180deg, 
    rgba(99, 245, 116, 0.85) 0%,   
    rgba(4, 93, 14, 0.93) 100%   
  ), 
  url('../img/ryanmcguire-thank-you-362164.jpg'); 
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  overflow: hidden; 
  padding: 140px 0; 
  
  /* CORRECCIÓN: Quitamos el border-top para que se fusione al 100% con la sección de arriba */
  border-top: none; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

body.PL2026MK-21JUV .abstract-glow-wrapper { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none; 
  z-index: 1; 
}

body.PL2026MK-21JUV .abstract-sphere { 
  position: absolute; 
  border-radius: 50%; 
  mix-blend-mode: screen; 
  filter: blur(140px); 
  opacity: 0.38; /* Subimos ligeramente la opacidad para que juegue con el nuevo fondo */
  will-change: transform; 
}

/* Transformación de esferas a Auroras Líquidas Verdes */
body.PL2026MK-21JUV .orange-glowing-1 {
  width: 550px; 
  height: 550px;
  /* Tu verde brillante de marca se disuelve en tu esmeralda */
  background: radial-gradient(circle, #14D92F 0%, #076E49 70%, transparent 100%);
  top: -20%; 
  right: -10%; 
  animation: plMovingSphereOne 22s ease-in-out infinite alternate;
}

body.PL2026MK-21JUV .orange-glowing-2 {
  width: 450px; 
  height: 450px;
  /* Esmeralda profundo disolviéndose en el verde bosque de la base */
  background: radial-gradient(circle, #076E49 0%, #027013 80%, transparent 100%);
  bottom: -30%; 
  left: -5%; 
  animation: plMovingSphereTwo 18s ease-in-out infinite alternate;
}

/* Animaciones orgánicas de deriva de las auroras */
@keyframes plMovingSphereOne { 
  0% { transform: translate(0px, 0px) scale(1); } 
  50% { transform: translate(-60px, 40px) scale(1.1); } 
  100% { transform: translate(40px, -20px) scale(0.95); } 
}
@keyframes plMovingSphereTwo { 
  0% { transform: translate(0px, 0px) scale(1.05); } 
  50% { transform: translate(50px, -50px) scale(0.9); } 
  100% { transform: translate(-30px, 20px) scale(1.1); } 
}

body.PL2026MK-21JUV .cta-abstract-container { 
  position: relative; 
  z-index: 2; 
  display: flex; 
  justify-content: center; 
}

/* Caja contenedora con efecto Glassmorphism optimizado */
body.PL2026MK-21JUV .cta-abstract-content { 
  max-width: 820px; 
  text-align: center; 
  /* Fondo oscuro translúcido para contener la fuerza de las luces traseras */
  background: rgba(26, 55, 28, 0.45); 
  border: 1px solid rgba(183, 244, 175, 0.06); 
  padding: 64px 48px; 
  border-radius: 32px; 
  backdrop-filter: blur(24px); 
  -webkit-backdrop-filter: blur(24px); 
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); 
}

/* Ceja superior en verde eléctrico de alta visibilidad */
body.PL2026MK-21JUV .cta-abstract-content .eyebrow {
  color: #14D92F;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}

body.PL2026MK-21JUV .cta-abstract-content .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #14D92F;
  border-radius: 50%;
}

/* Título con máscara de gradiente blanco puro */
body.PL2026MK-21JUV .cta-abstract-content h2 { 
  font-size: clamp(2.3rem, 5vw, 3.6rem); 
  line-height: 1.15; 
  margin-bottom: 20px; 
  background: linear-gradient(180deg, #ffffff 50%, rgba(255,255,255,0.75) 100%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

/* Ajuste de lectura crítico: Texto menta-blanco con peso reforzado */
body.PL2026MK-21JUV .cta-abstract-content p { 
  font-size: 17px; 
  color: #e2ebd5; /* Color premium levemente tintado que resalta sobre el verde oscuro */
  font-weight: 400; /* Subimos de 300 a 400 para evitar que las letras se vean delgadas u opacas */
  line-height: 1.65; 
  margin-bottom: 40px; 
  max-width: 680px; 
  margin-left: auto; 
  margin-right: auto; 
}

body.PL2026MK-21JUV .cta-abstract-actions { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  gap: 20px; 
}

/* 1. LA REJILLA REFACTORIZADA: Con protección anti-desbordamiento móvil */
body.PL2026MK-21JUV .services-grid { 
  display: grid; 
  /* Usa min(100%, 340px) para que la tarjeta se adapte al ancho del celular sin salirse */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); 
  gap: 32px; /* Bajamos sutilmente de 40px a 32px para optimizar espacio */
}

/* 2. MEDIA QUERY EN EL FONDO DE TU CSS: Ajustes quirúrgicos para pantallas móviles */
@media (max-width: 480px) {
  /* Asegura un colchón de espacio simétrico a los dos lados de la sección */
  body.PL2026MK-21JUV .services-section {
    padding: 80px 0;
  }
  
  /* Reduce un poco el espaciado interno de la tarjeta para que el texto respire en pantallas angostas */
  body.PL2026MK-21JUV .service-content {
    padding: 32px 24px 24px 24px;
  }
  
  /* Ajusta la posición de la medalla en pantallas pequeñas para que no quede volando muy lejos */
  body.PL2026MK-21JUV .service-icon-badge {
    margin-right: 24px;
  }
}


/* =========================================================================
   PROCESS SECTION - LÍNEA DE TIEMPO INTERACTIVA (VANGUARDIA CREATIVA)
   ========================================================================= */

body.PL2026MK-21JUV .process-section {
  position: relative;
  background-color: #F6FAF0; /* Sostiene la limpieza editorial clara */
  padding: 120px 0;
  overflow: hidden;
  z-index: 5;
}

/* Forzado de contraste absoluto en cabeceras */
body.PL2026MK-21JUV .process-section .section-heading h2 {
  color: #030704;
}

body.PL2026MK-21JUV .process-section .eyebrow {
  color: #076E49;
  font-weight: 700;
}

/* 1. La Grilla de la Línea de Tiempo (Con protección anti-desbordamiento móvil) */
body.PL2026MK-21JUV .process-timeline-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 40px;
  position: relative;
}

/* Línea Conectiva de Escritorio: Une los pasos horizontalmente de fondo */
@media (min-width: 992px) {
  body.PL2026MK-21JUV .process-timeline-grid::before {
    content: '';
    position: absolute;
    top: 32px; /* Alineado exactamente al centro de las esferas de los iconos */
    left: 40px;
    right: 40px;
    height: 2px;
    background: linear-gradient(to right, rgba(7, 110, 73, 0.08) 0%, rgba(7, 110, 73, 0.2) 50%, rgba(7, 110, 73, 0.08) 100%);
    border-image: linear-gradient(to right, #076E49 50%, transparent 50%) 100% 1;
    z-index: 1;
  }
}

/* 2. Arquitectura de las Tarjetas del Proceso */
body.PL2026MK-21JUV .process-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

body.PL2026MK-21JUV .process-step-card:hover {
  transform: translateY(-4px);
}

/* 3. Arquitectura del Encabezado de la Tarjeta (Icono + Número) */
body.PL2026MK-21JUV .process-badge-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 24px;
}

/* El Círculo del Icono */
body.PL2026MK-21JUV .process-icon-circle {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border: 2px solid rgba(7, 110, 73, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #076E49; /* Tu verde esmeralda base */
  box-shadow: 0 10px 25px rgba(3, 7, 4, 0.03);
  z-index: 3;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              box-shadow 0.4s ease;
}

body.PL2026MK-21JUV .process-icon-circle svg {
  width: 26px;
  height: 26px;
  transition: transform 0.4s ease;
}

/* Reacción dinámica del Icono al hacer Hover sobre la tarjeta */
body.PL2026MK-21JUV .process-step-card:hover .process-icon-circle {
  background-color: #076E49;
  border-color: #076E49;
  color: #ffffff; /* El icono pasa a blanco puro */
  transform: scale(1.08) rotate(4deg);
  box-shadow: 0 12px 30px rgba(7, 110, 73, 0.25);
}

body.PL2026MK-21JUV .process-step-card:hover .process-icon-circle svg {
  transform: scale(1.05);
}

/* El Número Flotante de Secuencia */
body.PL2026MK-21JUV .process-step-num {
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #076E49;
  background: #F6FAF0; /* Fondo menta pálido para aislarlo elegantemente */
  border: 1px solid rgba(7, 110, 73, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
  position: absolute;
  left: 48px; /* Cabalga sutilmente sobre el círculo del icono */
  z-index: 4;
  letter-spacing: -0.01em;
  transition: transform 0.4s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* El número se enciende en verde brillante al interactuar */
body.PL2026MK-21JUV .process-step-card:hover .process-step-num {
  background: #14D92F;
  color: #030704;
  border-color: #14D92F;
  transform: translateX(4px) scale(1.03);
}

/* 4. Textos Internos Ajustados a Contraste Claro */
body.PL2026MK-21JUV .process-text-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: #030704; /* Negro orgánico */
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

body.PL2026MK-21JUV .process-text-content p {
  font-size: 14px;
  color: #4b5563; /* Gris oscuro neutro de alta lectura */
  line-height: 1.6;
  margin: 0;
}

/* =========================================================================
   📱 ADAPTACIÓN MÓVIL ABSOLUTA (Conversión de Eje Horizontal a Vertical)
   ========================================================================= */
@media (max-width: 991px) {
  body.PL2026MK-21JUV .process-section {
    padding: 80px 0;
  }

  /* Modificamos la separación para lectura fluida en columnas */
  body.PL2026MK-21JUV .process-timeline-grid {
    gap: 48px;
    position: relative;
  }

  /* Línea Conectiva Vertical: En celulares une los iconos de arriba a abajo */
  body.PL2026MK-21JUV .process-timeline-grid::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 32px; /* Alineado al centro exacto del eje vertical de las esferas */
    width: 2px;
    background: linear-gradient(to bottom, rgba(7, 110, 73, 0.05) 0%, rgba(7, 110, 73, 0.2) 50%, rgba(7, 110, 73, 0.05) 100%);
    z-index: 1;
  }

  /* Reconfiguramos la tarjeta para que el icono y el texto se lean lado a lado */
  body.PL2026MK-21JUV .process-step-card {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
  }

  body.PL2026MK-21JUV .process-badge-wrapper {
    margin-bottom: 0; /* Eliminamos el margen inferior para que se alinee horizontalmente */
    flex-shrink: 0;   /* Evita que las esferas se deformen o achiquen */
  }

  /* Ajuste milimétrico del número en formato vertical */
  body.PL2026MK-21JUV .process-step-num {
    left: auto;
    right: -12px;
    top: -6px; /* Flota en la esquina superior derecha de la esfera */
  }
}

/* =========================================================================
   LEAFLET MAP - ANCHO COMPLETO (FULL-WIDTH BRANDED EXPERIENCE)
   ========================================================================= */

body.PL2026MK-21JUV .map-full-width-section {
  position: relative;
  width: 100%;
  padding: 0 !important; /* Eliminamos paddings para pegar el mapa a los bordes */
  overflow: hidden;
  z-index: 5;
}

body.PL2026MK-21JUV .map-real-viewport {
  position: relative;
  width: 100%;
  height: 600px; /* Altura imponente fija para el banner del mapa */
}

#leaflet-map-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 🎴 TARJETA FLOTANTE DE CONTEXTO (ESTILO MODERNO) */
body.PL2026MK-21JUV .map-overlay-card {
  position: absolute;
  top: 40px;
  left: 40px;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px); /* Efecto esmerilado translúcido */
  border: 1px solid rgba(7, 110, 73, 0.15);
  border-radius: 20px;
  padding: 30px;
  z-index: 10; /* Flota muy por encima de las calles */
  box-shadow: 0 20px 40px rgba(3, 7, 4, 0.08);
}

body.PL2026MK-21JUV .map-overlay-card h2 {
  color: #030704;
  font-size: 24px;
  font-weight: 800;
  margin: 8px 0 12px 0;
}

body.PL2026MK-21JUV .map-overlay-card p {
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 24px;
}

body.PL2026MK-21JUV .map-redirect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  background-color: #076E49; /* Tu verde de marca */
  color: #ffffff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

body.PL2026MK-21JUV .map-redirect-btn:hover {
  background-color: #055236;
  transform: translateY(-2px);
}


/* =========================================================================
   📌 LOGO / ICONO DE UBICACIÓN GIGANTE PERSONALIZADO
   ========================================================================= */

.leaflet-professional-marker {
  background: none !important;
  border: none !important;
}

.leaflet-marker-logo-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* El pin gigante (Subimos el tamaño a 46px para que domine la pantalla) */
.leaflet-marker-logo-wrapper svg,
.leaflet-marker-logo-wrapper img {
  width: 46px;
  height: 46px;
  z-index: 2;
  filter: drop-shadow(0 8px 16px rgba(255, 51, 51, 0.5));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.leaflet-marker-logo-wrapper:hover svg,
.leaflet-marker-logo-wrapper:hover img {
  transform: scale(1.15); /* Reacción de agrandado al posarse sobre el logo */
  filter: drop-shadow(0 12px 24px rgba(255, 51, 51, 0.7));
}

/* Onda de pulso neón expansiva gigante en la base */
.leaflet-marker-pulse-giant {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 50px;
  height: 14px;
  background-color: rgba(255, 51, 51, 0.15);
  border: 1px solid #FF3333;
  border-radius: 50%;
  z-index: 1;
  transform: translate(-50%, 50%);
  animation: plGiantMapPing 2.5s cubic-bezier(0.25, 0, 0, 1) infinite;
}

@keyframes plGiantMapPing {
  0% { transform: translate(-50%, 50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, 50%) scale(2.2); opacity: 0; }
}

/* Ergonomía Móvil */
@media (max-width: 768px) {
  body.PL2026MK-21JUV .map-real-viewport { height: 500px; }
  body.PL2026MK-21JUV .map-overlay-card {
    position: relative;
    top: 0; left: 0; max-width: 100%;
    border-radius: 0; border: none; border-bottom: 1px solid rgba(7, 110, 73, 0.1);
  }
}

/* =========================================================================
   CONTACT & FOOTER
   ========================================================================= */
body.PL2026MK-21JUV .contact-box { background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 100%); border: 1px solid var(--pl-border); border-radius: 20px; padding: 60px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
body.PL2026MK-21JUV .contact-actions { display: flex; gap: 16px; justify-self: end; }
body.PL2026MK-21JUV .site-footer { border-top: 1px solid var(--pl-border); padding: 80px 0 40px 0; }
body.PL2026MK-21JUV .footer-container { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; width: min(100% - 48px, var(--pl-container)); margin: 0 auto 50px auto; }
body.PL2026MK-21JUV .footer-logo { height: 32px; margin-bottom: 16px; filter: brightness(0) invert(1); }
body.PL2026MK-21JUV .footer-container p { font-size: 14px; color: var(--pl-muted); max-width: 260px; }
body.PL2026MK-21JUV .footer-container h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; }
body.PL2026MK-21JUV .footer-container a { display: block; font-size: 14px; color: var(--pl-muted); margin-bottom: 10px; }
body.PL2026MK-21JUV .footer-container a:hover { color: var(--pl-primary); }
body.PL2026MK-21JUV .footer-bottom { border-top: 1px solid var(--pl-border); padding-top: 30px; text-align: center; font-size: 13px; color: var(--pl-muted); }

/* =========================================================================
   MEDIA QUERIES (Responsivo Adaptativo Real & Anti-Desborde)
   ========================================================================= */
@media (max-width: 1024px) {
  body.PL2026MK-21JUV .hero-container,
  body.PL2026MK-21JUV .benefits-layout,
  body.PL2026MK-21JUV .zones-layout,
  body.PL2026MK-21JUV .contact-box { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  body.PL2026MK-21JUV .hero-content { display: flex; flex-direction: column; align-items: center; }
  body.PL2026MK-21JUV .hero-actions, body.PL2026MK-21JUV .contact-actions { justify-content: center; }
  body.PL2026MK-21JUV .hero-card { justify-self: center; }
  body.PL2026MK-21JUV .portfolio-grid, body.PL2026MK-21JUV .process-grid { grid-template-columns: repeat(2, 1fr); }
  body.PL2026MK-21JUV .footer-container { grid-template-columns: repeat(2, 1fr); }
  body.PL2026MK-21JUV .trust-loop-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 860px) {
  body.PL2026MK-21JUV .header-container { position: relative; width: min(100% - 32px, var(--pl-container)); }
  
  /* Botón Hamburguesa */
  body.PL2026MK-21JUV .menu-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: rgba(230, 237, 232, 0.02);
    border: 1px solid var(--pl-border); border-radius: 10px; cursor: pointer; z-index: 1100; padding: 0 10px;
  }
  body.PL2026MK-21JUV .menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--pl-text); border-radius: 1px; transition: var(--pl-transition); }
  
  /* Animación a X */
  body.PL2026MK-21JUV .menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background-color: var(--pl-primary); }
  body.PL2026MK-21JUV .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
  body.PL2026MK-21JUV .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background-color: var(--pl-primary); }

  /* PANEL MÓVIL CRISTAL DE ALTA GAMA - Cero desbordes */
 
  body.PL2026MK-21JUV .main-nav {
    position: fixed; top: 80px; left: 16px; right: 16px;
    width: calc(100% - 32px); /* Evita fugas forzando simetría */
    background: rgba(6, 18, 10, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--pl-border); border-radius: 16px; padding: 32px 20px;
    flex-direction: column; gap: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    opacity: 0; visibility: hidden; transform: translateY(-15px); pointer-events: none; z-index: 1050;

    /* 🪄 ACELERACIÓN LÍQUIDA: Agrega esta regla aquí abajo */
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }
  body.PL2026MK-21JUV .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  body.PL2026MK-21JUV .main-nav a { width: 100%; text-align: center; padding: 14px 0; font-size: 15px; color: var(--pl-text); border-bottom: 1px solid rgba(230, 237, 232, 0.03); }
  body.PL2026MK-21JUV .main-nav a:not(.nav-cta)::after { display: none; }
  body.PL2026MK-21JUV .main-nav a.nav-cta { background: var(--pl-primary); color: #030704; border-radius: 100px; margin-top: 12px; font-weight: 600; border-bottom: none; }
}

@media (max-width: 768px) {
  body.PL2026MK-21JUV .cta-abstract-content { padding: 48px 24px; border-radius: 24px; margin: 0 12px; }
  body.PL2026MK-21JUV .cta-abstract-actions { flex-direction: column; width: 100%; }
  body.PL2026MK-21JUV .cta-abstract-actions .btn { width: 100%; }
  body.PL2026MK-21JUV .abstract-sphere { filter: blur(100px); opacity: 0.2; }
}

@media (max-width: 640px) {
  body.PL2026MK-21JUV .portfolio-grid, body.PL2026MK-21JUV .process-grid, body.PL2026MK-21JUV .footer-container { grid-template-columns: 1fr; }
  body.PL2026MK-21JUV .hero-trust { grid-template-columns: 1fr; }
  body.PL2026MK-21JUV .hero-actions, body.PL2026MK-21JUV .contact-actions { flex-direction: column; width: 100%; }
  body.PL2026MK-21JUV .btn { width: 100%; }
  body.PL2026MK-21JUV .trust-loop-grid { grid-template-columns: 1fr; }
  body.PL2026MK-21JUV .trust-loop-item { padding: 36px 24px; text-align: center; }
}

/* =========================================================================
   PRELOADER PROACRÍLICOS - VERSIÓN CENTRADA PREMIUM
   ========================================================================= */

body.proa-loading {
  overflow: hidden;
}

.proa-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(20, 217, 47, 0.18), transparent 34%),
    linear-gradient(135deg, #020403 0%, #06110c 48%, #000000 100%);
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.proa-loader-card {
  width: min(90%, 380px);
  min-height: 260px;
  padding: 42px 34px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.proa-loader-logo {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: proaFloat 2.4s ease-in-out infinite;
}

.proa-loader-logo img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}

.proa-loader-text span {
  display: block;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.proa-loader-text small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.proa-loader-line {
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.proa-loader-line span {
  position: absolute;
  inset: 0;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #14D92F, #ffffff, transparent);
  animation: proaLoading 1.25s ease-in-out infinite;
}

.proa-preloader.proa-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes proaLoading {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(260%);
  }
}

@keyframes proaFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.03);
  }
}
/* =========================================================================
   TEAM PREMIUM SECTION - DARK GLASSMORPHISM ARCHITECTURAL LAYOUT
   ========================================================================= */

body.PL2026MK-21JUV .team-premium-section {
  position: relative;
  background-color: #030704; /* Tu fondo negro corporativo profundo */
  padding: 160px 0 120px 0; /* 💡 Corregido: Padding superior amplio para que no tape el header fixed */
  overflow: hidden;
  z-index: 10;
}

body.PL2026MK-21JUV .team-premium-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Cabecera estilizada */
body.PL2026MK-21JUV .team-premium-header {
  margin-bottom: 64px;
}

body.PL2026MK-21JUV .team-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #076E49; /* Tu verde de marca */
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 12px;
}

body.PL2026MK-21JUV .team-premium-header h2 {
  font-family: 'Lato', sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Grilla robusta simétrica */
body.PL2026MK-21JUV .team-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

/* 🗴 LA TARJETA PREMIUM (Efecto Contenedor Flotante) */
body.PL2026MK-21JUV .team-premium-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 🪐 CONTENEDOR VISUAL INTERACTIVO */
body.PL2026MK-21JUV .team-card-visual {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Contenedor perfectamente cuadrado */
  border-radius: 18px;
  overflow: hidden;
  background: #08110b;
}

/* Fondo de respaldo arquitectónico si la imagen no carga */
body.PL2026MK-21JUV .team-card-placeholder-gradient {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, #050d08 0%, #076E49 100%);
  opacity: 0.4;
  z-index: 1;
}

body.PL2026MK-21JUV .team-card-real-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 2;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🧊 CORTINA INTERACTIVA DARK GLASSMORPHISM */
body.PL2026MK-21JUV .team-card-glass-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(3, 7, 4, 0.4);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}

body.PL2026MK-21JUV .team-social-cluster {
  display: flex;
  gap: 12px;
  transform: translateY(20px) scale(0.9);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

body.PL2026MK-21JUV .team-social-cluster a {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

body.PL2026MK-21JUV .team-social-cluster a:hover {
  background: #076E49;
  border-color: #076E49;
  transform: scale(1.1);
}

/* 📝 TEXTOS METADATA TEXTURIZADOS */
body.PL2026MK-21JUV .team-card-meta {
  padding: 0 8px 12px 8px;
}

body.PL2026MK-21JUV .team-card-meta h3 {
  font-family: 'Lato', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

body.PL2026MK-21JUV .team-card-role {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #076E49;
  letter-spacing: 0.06em;
  display: inline-block;
  margin-bottom: 14px;
}

body.PL2026MK-21JUV .team-card-meta p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #94a3b8; /* Gris suave de alta legibilidad en pantallas oscuras */
  line-height: 1.6;
}

/* 🪄 REACCIONES DE MOVIMIENTO E ILUMINACIÓN HOVER AL SELECCIONAR */
body.PL2026MK-21JUV .team-premium-card:hover {
  transform: translateY(-8px);
  border-color: rgba(7, 110, 73, 0.6); /* Encendido de borde */
  
  /* 🟢 EFECTO DOWN-GLOW DE ALTA INTENSIDAD (PROYECTADO HACIA ABAJO) */
  box-shadow: 0 14px 25px rgba(7, 110, 73, 0.65),   /* Foco de luz verde muy fuerte concentrado abajo (Y: 14px) */
              0 35px 60px rgba(7, 110, 73, 0.4),    /* Aura expansiva que se estira y difumina hacia el suelo (Y: 35px) */
              0 20px 40px rgba(3, 7, 4, 0.9);       /* Sombra negra densa para que la tarjeta no pierda volumen físico */
}

/* Estado fijo seleccionado con proyección de luz inferior */
body.PL2026MK-21JUV .team-premium-card.is-selected {
  transform: translateY(-8px);
  border-color: rgba(7, 110, 73, 0.8);
  box-shadow: 0 16px 30px rgba(7, 110, 73, 0.7), 
              0 40px 70px rgba(7, 110, 73, 0.45);
}
body.PL2026MK-21JUV .team-premium-card:hover .team-card-real-img {
  transform: scale(1.06);
}

body.PL2026MK-21JUV .team-premium-card:hover .team-card-glass-overlay {
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.PL2026MK-21JUV .team-premium-card:hover .team-social-cluster {
  transform: translateY(0) scale(1);
}

/* ADAPTACIÓN MÓVIL DISRUPTIVA */
@media (max-width: 768px) {
  body.PL2026MK-21JUV .team-premium-section { padding: 100px 0 60px 0; }
  body.PL2026MK-21JUV .team-premium-grid { grid-template-columns: 1fr; gap: 24px; }
  
  /* En móviles se mantiene el esmerilado sutil fijo para interactuar con el dedo */
  body.PL2026MK-21JUV .team-card-glass-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(3,7,4,0.8) 0%, rgba(3,7,4,0) 100%);
    align-items: flex-end;
    padding-bottom: 16px;
  }
  body.PL2026MK-21JUV .team-social-cluster { transform: translateY(0) scale(1); }
}

/* =========================================================================
   COMPONENTE ARQUITECTÓNICO: BURBUJA DE WHATSAPP (CASCADA LIMPIA)
   ========================================================================= */

/* Invisible en Desktop y Tablets de forma nativa */
.WatPro2026-contact {
  display: none;
}

/* Activación exclusiva para Smartphones */
@media (max-width: 768px) {
  a.WatPro2026-contact {
  display: flex;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background-color: #14D92F; /* Tu verde de marca */
  border-radius: 50%;
  z-index: 9999; /* Asegura que flote por encima del contenido */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 217, 47, 0.4);
  animation: watProPulseEffect 2s infinite ease-in-out;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

   body.PL2026MK-21JUV a.WatPro2026-contact svg.svg-inline--fa {
    width: 36px;   /* 🚀 Escalamos el ancho real del vector */
    height: 36px;  /* 🚀 Escalamos el alto real del vector */
    fill: #ffffff; /* Forzamos el blanco en el relleno del trazo */
    color: #ffffff;
    transition: transform 0.2s ease;
  }
}

/* =========================================================================
   ANIMACIÓN DE PULSO (Sombra ambiental)
   ========================================================================= */
@keyframes watProPulseEffect {
  0% {
    box-shadow: 0 8px 24px rgba(20, 217, 47, 0.4), 0 0 0 0 rgba(20, 217, 47, 0.6);
  }
  70% {
    box-shadow: 0 8px 24px rgba(20, 217, 47, 0.3), 0 0 0 16px rgba(20, 217, 47, 0);
  }
  100% {
    box-shadow: 0 8px 24px rgba(20, 217, 47, 0.4), 0 0 0 0 rgba(20, 217, 47, 0);
  }
}