/* =========================================
   CSS EXCLUSIVO DE ESTA SECCIÓN - SIN TOCAR PARTÍCULAS
   ========================================= */
                .dp-wrapper {
                  background-color: #071828;
                  padding: 40px;
                  width: 100%;
                  box-sizing: border-box;
                  border-radius: 12px;
                  font-family: 'Inter', system-ui, sans-serif;
                  position: relative;
                  /* Contexto para z-index */
                }

                .dp-row {
                  display: flex !important;
                  flex-direction: column;
                  gap: 24px;
                  margin-bottom: 24px;
                  width: 100%;
                }

                .dp-card {
                  position: relative;
                  background: #0d2238;
                  border: 1px solid rgba(255, 255, 255, 0.1);
                  border-radius: 16px;
                  padding: 30px;
                  overflow: hidden;
                  text-decoration: none !important;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  min-height: 380px;
                  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
                  cursor: pointer;
                  z-index: 3;
                  /* Por encima de partículas (que usan z-index:1) */
                }

                .dp-card:hover {
                  background: #103354;
                  border-color: #00e0ff;
                }

                /* --- CONTENEDOR DE IMÁGENES - CLAVE PARA PARTÍCULAS --- */
                .dp-img-container {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  z-index: 2;
                  /* Entre partículas (1) y contenido de texto (3+) */
                  overflow: hidden;
                  pointer-events: none;
                  /* No bloquea hover en la tarjeta */
                }

                /* --- IMÁGENES --- */
                .dp-expanded-img,
                .dp-collapsed-icon {
                  /* ¡CORRECCIÓN CRÍTICA AQUÍ! */
                  position: absolute;
                  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
                  object-fit: cover;
                }

                .dp-expanded-img {
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  /* Invisible por defecto */
                  filter: brightness(0.6) drop-shadow(0 0 15px rgba(0, 224, 255, 0.4));
                }

                .dp-collapsed-icon {
                  width: 120px;
                  height: 120px;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%) scale(0.8);
                  opacity: 0;
                  /* Invisible por defecto */
                  object-fit: contain;
                  /* Mantiene proporciones del ícono */
                }

                /* --- CONTENIDO DE TEXTO --- */
                .dp-content {
                  position: relative;
                  z-index: 3;
                  /* Siempre visible */
                  display: flex;
                  flex-direction: column;
                  height: 100%;
                  justify-content: space-between;
                }

                .dp-segment {
                  color: white;
                  font-size: 18px;
                  font-weight: 600;
                  margin-bottom: 4px;
                  display: block;
                }

                .dp-title {
                  color: white;
                  font-size: 24px;
                  font-weight: 700;
                  margin: 0 0 10px 0;
                  white-space: nowrap;
                }

                .dp-subtitle {
                  color: #00e0ff;
                  /* Cyan solo al hacer hover */
                  font-size: 18px;
                  margin-bottom: 12px;
                  opacity: 0;
                  /* Oculto inicialmente */
                  transition: opacity 0.3s;
                }

                .dp-desc-wrapper {
                  overflow: hidden;
                  transition: opacity 0.4s ease, max-height 0.5s ease;
                  opacity: 0;
                  max-height: 0;
                }

                .dp-desc {
                  color: #8aaabb;
                  font-size: 16px;
                  line-height: 1.6;
                  margin-top: 10px;
                }

                .dp-cta {
                  color: white;
                  font-weight: 600;
                  margin-top: 15px;
                  text-align: left;
                  display: inline-block;
                  transition: color 0.3s, text-align 0.3s;
                }

                /* =========================================
   LÓGICA DE COMPORTAMIENTO (Desktop)
   ========================================= */
                @media (min-width: 768px) {
                  .dp-row {
                    flex-direction: row !important;
                    height: 400px;
                    position: relative;
                  }

                  /* ----------------------------------------------------
       ESTADOS INICIALES (Sin hover en la fila)
       ---------------------------------------------------- */

                  /* Primera Fila: Primera expandida, segunda contraída */
                  .default-left:not(:hover) .dp-card:first-child {
                    width: 75% !important;
                  }

                  .default-left:not(:hover) .dp-card:first-child .dp-expanded-img {
                    opacity: 1.0 !important;
                    /* Visible */
                  }

                  .default-left:not(:hover) .dp-card:first-child .dp-cta {
                    text-align: left !important;
                  }

                  /* Mostrar Segmento + Título + CTA (sin Subtítulo/Descripción) */
                  .default-left:not(:hover) .dp-card:first-child .dp-subtitle,
                  .default-left:not(:hover) .dp-card:first-child .dp-desc-wrapper {
                    opacity: 0 !important;
                    max-height: 0 !important;
                  }

                  .default-left:not(:hover) .dp-card:last-child {
                    width: 25% !important;
                  }

                  .default-left:not(:hover) .dp-card:last-child .dp-collapsed-icon {
                    opacity: 1 !important;
                    /* Ícono visible */
                    transform: translate(-50%, -50%) scale(1) !important;
                  }

                  /* Mostrar Segmento + Título + CTA (sin Subtítulo/Descripción) */
                  .default-left:not(:hover) .dp-card:last-child .dp-subtitle,
                  .default-left:not(:hover) .dp-card:last-child .dp-desc-wrapper {
                    opacity: 0 !important;
                    max-height: 0 !important;
                  }

                  /* Segunda Fila: Primera contraída, segunda expandida */
                  .default-right:not(:hover) .dp-card:first-child {
                    width: 25% !important;
                  }

                  .default-right:not(:hover) .dp-card:first-child .dp-collapsed-icon {
                    opacity: 1 !important;
                    transform: translate(-50%, -50%) scale(1) !important;
                  }

                  .default-right:not(:hover) .dp-card:first-child .dp-subtitle,
                  .default-right:not(:hover) .dp-card:first-child .dp-desc-wrapper {
                    opacity: 0 !important;
                    max-height: 0 !important;
                  }

                  .default-right:not(:hover) .dp-card:last-child {
                    width: 75% !important;
                  }

                  .default-right:not(:hover) .dp-card:last-child .dp-expanded-img {
                    opacity: 1.0 !important;
                  }

                  .default-right:not(:hover) .dp-card:last-child .dp-cta {
                    text-align: left !important;
                  }

                  .default-right:not(:hover) .dp-card:last-child .dp-subtitle,
                  .default-right:not(:hover) .dp-card:last-child .dp-desc-wrapper {
                    opacity: 0 !important;
                    max-height: 0 !important;
                  }

                  /* ----------------------------------------------------
       INTERACCIÓN (Hover en cualquier tarjeta de la fila)
       ---------------------------------------------------- */

                  /* Tarjeta activa (con hover) */
                  .dp-row:hover .dp-card:hover {
                    width: 75% !important;
                    z-index: 5 !important;
                    /* Prioridad máxima */
                  }

                  .dp-row:hover .dp-card:hover .dp-expanded-img {
                    opacity: 0.3 !important;
                    /* Más atenuada para mejor lectura */
                  }

                  .dp-row:hover .dp-card:hover .dp-subtitle,
                  .dp-row:hover .dp-card:hover .dp-desc-wrapper {
                    opacity: 1 !important;
                    max-height: 200px !important;
                  }

                  .dp-row:hover .dp-card:hover .dp-cta {
                    color: #00e0ff !important;
                    text-align: right !important;
                  }

                  /* Tarjeta pasiva (sin hover) */
                  .dp-row:hover .dp-card:not(:hover) {
                    width: 25% !important;
                    z-index: 3 !important;
                  }

                  .dp-row:hover .dp-card:not(:hover) .dp-expanded-img {
                    opacity: 0 !important;
                  }

                  .dp-row:hover .dp-card:not(:hover) .dp-collapsed-icon {
                    opacity: 1 !important;
                    transform: translate(-50%, -50%) scale(1.1) !important;
                  }

                  .dp-row:hover .dp-card:not(:hover) .dp-subtitle,
                  .dp-row:hover .dp-card:not(:hover) .dp-desc-wrapper {
                    opacity: 0 !important;
                    max-height: 0 !important;
                  }

                  .dp-row:hover .dp-card:not(:hover) .dp-cta {
                    color: white !important;
                    text-align: left !important;
                  }
                }

                /* =========================================
   MÓVIL
   ========================================= */
                @media (max-width: 767px) {
                  .dp-card {
                    width: 100% !important;
                    min-height: 320px;
                  }

                  /* Mostrar todas las tarjetas expandidas en móvil */
                  .dp-expanded-img {
                    opacity: 0.4 !important;
                  }

                  .dp-collapsed-icon {
                    display: none !important;
                  }

                  /* Mostrar todos los textos en móvil */
                  .dp-subtitle,
                  .dp-desc-wrapper {
                    opacity: 1 !important;
                    max-height: none !important;
                  }

                  .dp-cta {
                    text-align: right !important;
                  }

                  .dp-row {
                    flex-direction: column !important;
                    height: auto !important;
                  }
                }

                /* ================================================= */
                /* ================================================= */
                /* ================================================= */

                /* =========================================
   EFECTOS MEJORADOS PARA TARJETAS DE SOLUCIONES (dp-card)
   ========================================= */
                @media (min-width: 768px) {

                  /* 1. GLOW AMPLIADO EN BORDE DE TARJETA */
                  .dp-card:hover {
                    box-shadow:
                      0 0 25px rgba(0, 224, 255, 0.7),
                      /* Glow exterior más intenso */
                      inset 0 0 10px rgba(0, 224, 255, 0.4);
                    /* Glow interior profundo */
                    border-color: #00e0ff;
                  }

                  /* 2. BARRA ENERGÉTICA AMPLIADA (3X MÁS VISIBLE) */
                  .dp-card::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 0;
                    height: 6px;
                    background: linear-gradient(90deg,
                        #00e0ff 0%,
                        #00c0ff 25%,
                        #0080ff 50%,
                        #0050ff 75%,
                        #0020ff 100%);
                    border-radius: 4px 4px 0 0;
                    /* Esquinas superiores redondeadas */
                    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
                    z-index: 4;
                    box-shadow: 0 -4px 40px rgba(0, 224, 255, 0.5);
                    /* Glow adicional */
                  }

                  .dp-card:hover::after {
                    width: 100%;
                  }

                  /* 3. ÍCONO CON GLOW Y ROTACIÓN POR DEFECTO (ESTADO INICIAL) */
                  .default-left:not(:hover) .dp-card:last-child .dp-collapsed-icon,
                  .default-right:not(:hover) .dp-card:first-child .dp-collapsed-icon {
                    opacity: 1 !important;
                    transform: translate(-50%, -50%) scale(1.2) rotate(5deg) !important;
                    box-shadow:
                      0 0 25px rgba(0, 224, 255, 0.8),
                      0 0 50px rgba(0, 200, 255, 0.6) !important;
                    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
                  }

                  /* 4. EFECTOS EXCLUSIVOS PARA ÍCONOS EN ESTADO CONTRAÍDO */
                  /* ÍCONO CONTRAÍDO AL INTERACTUAR: MISMO ESTILO QUE LAS NORMALMENTE CONTRAÍDAS */
                  .dp-row:hover .dp-card:not(:hover) .dp-collapsed-icon {
                    opacity: 1 !important;
                    transform: translate(-50%, -50%) scale(1.2) rotate(5deg) !important;
                    box-shadow:
                      0 0 25px rgba(0, 224, 255, 0.8),
                      0 0 50px rgba(0, 200, 255, 0.6) !important;
                    filter: brightness(1) !important;
                  }

                  /* 5. MANTENER OCULTO EL ÍCONO EN TARJETAS EXPANDIDAS */
                  .dp-card:hover .dp-collapsed-icon,
                  .dp-card.dp-card-expanded-style .dp-collapsed-icon {
                    opacity: 0 !important;
                    box-shadow: none !important;
                    transform: translate(-50%, -50%) scale(0.8) rotate(0deg) !important;
                  }

                  /* 6. REDONDEO DE ESQUINAS EN ÍCONOS */
                  .dp-collapsed-icon {
                    border-radius: 5px;
                    /* Redondeo suave */
                    transition: border-radius 0.3s ease;
                  }

                  /* 7. PREVENCIÓN DE SUPERPOSICIÓN (CRÍTICO) */
                  .dp-card:hover .dp-collapsed-icon,
                  .dp-card.dp-card-expanded-style .dp-collapsed-icon {
                    opacity: 0 !important;
                    box-shadow: none !important;
                    transform: translate(-50%, -50%) scale(0.8) !important;
                  }

                  /* 8. EFECTO DE PARPADEO MEJORADO EN CTA */
                  .dp-card:hover .dp-cta {
                    animation: pulse-solutions 2s infinite;
                  }

                  @keyframes pulse-solutions {
                    0% {
                      box-shadow: 0 0 0 0 rgba(0, 224, 255, 0.4);
                      transform: translateX(0);
                    }

                    70% {
                      box-shadow: 0 0 0 10px rgba(0, 224, 255, 0);
                      transform: translateX(5px);
                    }

                    100% {
                      box-shadow: 0 0 0 0 rgba(0, 224, 255, 0);
                      transform: translateX(0);
                    }
                  }
                }