/* Corrección de errores */

/* 1. FOOTER - Color de fondo distintivo */
footer, .footer {
  background-color: #01070f !important;
  background-image: linear-gradient(to bottom, #040c18, #010409) !important;
  border-top: 3px solid rgba(20, 230, 130, 0.6) !important;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Efecto de línea brillante superior */
footer::before, .footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(20, 230, 130, 0.8), transparent) !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 10px rgba(20, 230, 130, 0.5) !important;
}

.footer-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px !important;
  margin-bottom: 40px !important;
}

.footer-column {
  padding: 0 15px !important;
}

.footer-column h4 {
  color: #14e682 !important;
  font-size: 18px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  text-shadow: 0 0 5px rgba(20, 230, 130, 0.3) !important;
}

.footer-column h4::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: #14e682 !important;
  border-radius: 1px !important;
}

.footer-column p {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

.footer-logo {
  display: block !important;
  margin-bottom: 20px !important;
}

.footer-logo img {
  height: 50px !important;
  transition: transform 0.3s ease !important;
}

.footer-logo img:hover {
  transform: scale(1.05) !important;
}

.social-links {
  display: flex !important;
  gap: 15px !important;
  margin-top: 20px !important;
}

.social-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(20, 230, 130, 0.3) !important;
}

.social-link:hover {
  background: #14e682 !important;
  color: #010714 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 5px 10px rgba(20, 230, 130, 0.3) !important;
}

.footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-links li {
  margin-bottom: 10px !important;
  transition: transform 0.3s ease !important;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  padding-left: 15px !important;
  display: inline-block !important;
}

.footer-links a::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #14e682 !important;
  opacity: 0.7 !important;
  transition: transform 0.3s ease !important;
}

.footer-links a:hover {
  color: #14e682 !important;
  transform: translateX(5px) !important;
}

.footer-links a:hover::before {
  transform: translate(3px, -50%) !important;
  opacity: 1 !important;
}

.footer-links li:last-child {
  margin-bottom: 0 !important;
}

.footer-links li i {
  color: #14e682 !important;
  margin-right: 8px !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
}

.footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.footer-bottom a:hover {
  color: #14e682 !important;
}

/* Adaptación para móvil */
@media screen and (max-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px 20px !important;
  }
}

@media screen and (max-width: 576px) {
  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  
  .footer-column h4::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  .social-links {
    justify-content: center !important;
  }
  
  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
  
  .footer-links a {
    padding-left: 0 !important;
  }
  
  .footer-links a::before {
    display: none !important;
  }
}

/* HEADER FLOTANTE - Estilo moderno con glassmorphism */
.header {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 1200px !important;
  z-index: 1000 !important;
  background: rgba(5, 8, 15, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 40px !important;
  box-shadow: 0 10px 30px rgb(0 0 0) !important;
  border: 1px solid rgb(255 255 255 / 26%) !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  margin-top: 0 !important;
}

.header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 30px !important;
  height: 60px !important;
}

.logo img {
  height: 40px !important;
  transition: transform 0.3s ease !important;
}

.logo img:hover {
  transform: scale(1.05) !important;
}

.main-nav ul {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-nav ul li {
  list-style: none !important;
}

.main-nav ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  padding: 8px 20px !important;
  border-radius: 20px !important;
  transition: all 0.1s ease !important; /* Transición aún más rápida */
  position: relative !important;
  will-change: color, background-color, transform !important; /* Optimizar para hardware acceleration */
}

.main-nav ul li a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.main-nav ul li a.active {
  color: #14e682 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(20, 230, 130, 0.4) !important;
  background-color: rgba(20, 230, 130, 0.15) !important;
  position: relative !important;
  transform: translateY(-1px) !important; /* Pequeño desplazamiento hacia arriba */
  box-shadow: 0 0 15px rgba(20, 230, 130, 0.2) !important; /* Sombra sutil */
}

.main-nav ul li a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 70% !important; /* Mayor ancho para mejor visibilidad */
  height: 3px !important;
  background-color: #14e682 !important;
  border-radius: 50px !important;
  display: block !important;
  box-shadow: 0 0 8px rgba(20, 230, 130, 0.6) !important; /* Brillo añadido */
  animation: pulse-underline 1.5s ease-in-out infinite alternate !important; /* Animación sutil */
}

@keyframes pulse-underline {
  0% {
    opacity: 0.7 !important;
    width: 60% !important;
  }
  100% {
    opacity: 1 !important;
    width: 70% !important;
  }
}

/* Scrolled header - becomes smaller */
.header.scrolled {
  background: rgba(5, 8, 15, 0.75) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important;
}

.header.scrolled .header-container {
  height: 60px !important;
}

/* Ajustar padding al body para compensar el header fijo */
body {
  font-family: 'Inter', sans-serif !important;
  background-color: #010714 !important;
  background-image: none !important;
  margin: 0 !important;
  padding-top: 60px !important; /* Reducir aún más el padding-top */
  overflow-x: hidden !important; /* Prevenir scroll horizontal */
  scroll-behavior: auto !important; /* Desactivar scroll-behavior suave para eliminar scroll automático */
}

/* Estilos generales del body y html */
html {
  background-color: #010714 !important;
  scroll-behavior: auto !important; /* Desactivar scroll-behavior suave también en html */
  overflow-x: hidden !important; 
  overflow-y: auto !important;
  height: auto !important;
  scroll-padding-top: 0 !important;
}

/* Animación sutil para el header cuando se carga la página */
@keyframes headerFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.header {
  animation: headerFadeIn 0.8s ease-out forwards !important;
}

/* 2. MENÚ HAMBURGUESA - Asegurar visibilidad y funcionamiento */
@media (max-width: 768px) {
  .header-container {
    padding: 10px 20px !important;
  }
  
  .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 35px !important;
    height: 25px !important;
    position: relative !important;
    z-index: 1001 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important; 
    outline: none !important; 
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }
  
  .menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #14e682 !important;
    transition: all 0.15s ease !important; /* Botón hamburguesa más rápido */
    border-radius: 5px !important;
    pointer-events: none !important; 
  }
  
  .main-nav {
    position: fixed !important;
    top: 80px !important;
    right: -100% !important;
    width: 90% !important;
    max-width: 300px !important;
    background: rgba(5, 8, 15, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 20px !important;
    transition: right 0.15s ease-out !important; /* Aún más rápido en móvil */
    z-index: 999 !important;
    display: block !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px !important;
    margin-right: 5% !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    height: auto !important; 
    overflow-y: auto !important; 
    max-height: 80vh !important;
  }
  
  .main-nav.active {
    right: 0 !important;
    visibility: visible !important; 
    opacity: 1 !important; 
  }
  
  .main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: calc(80vh - 40px) !important; /* Ajustar altura máxima */
    overflow-y: auto !important; /* Permitir scroll dentro del menú */
  }
  
  .main-nav ul li {
    width: 100% !important;
  }
  
  .main-nav ul li a {
    display: block !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Animación del botón hamburguesa */
  .menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #14e682 !important;
    transition: all 0.15s ease !important; /* Botón hamburguesa más rápido */
    border-radius: 5px !important;
    pointer-events: none !important; 
    transform-origin: center !important;
  }
  
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg) !important;
  }
  
  .menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
  }
  
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg) !important;
  }
}

/* 3. TARJETAS DEMASIADO ANCHAS - Asegurar que respeten el contenedor */
@media screen and (max-width: 768px) {
  /* Container más estrecho */
  .container {
    width: 95% !important;
    max-width: 95% !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* Todos los contenedores de grid a una columna */
  .services-grid,
  .metrics-grid,
  .choose-features,
  .about-container,
  .stats-container,
  .testimonials-grid,
  .pricing-grid,
  .about-stats,
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Todas las tarjetas */
  .service-card,
  .metric-box,
  .choose-feature,
  .about-card,
  .stat-card,
  .testimonial-card,
  .pricing-card,
  .stat-widget,
  [class*="-card"],
  [class*="-box"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Prevenir overflow horizontal */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* 4. NUEVA IMAGEN TECH-INTEGRATION */
.tech-integration {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  opacity: 0.95 !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  transform: scale(1) !important;
}

.hero-main-visual {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.hero-main-visual:hover .tech-integration {
  opacity: 1 !important;
  transform: scale(1.03) !important;
}

/* 5. CORRECCIÓN DEL PROBLEMA DE SCROLL EN MENU DESKTOP */
@media (min-width: 769px) {
  /* Navegación Desktop - Ajustar posición */
  .main-nav {
    height: auto !important;
    overflow: visible !important;
  }
  
  .main-nav ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .main-nav ul li {
    margin: 0 15px !important;
    height: auto !important;
  }
  
  /* Evitar desplazamiento horizontal en la navegación */
  .header-container {
    overflow: visible !important;
  }
  
  /* Ajustar estilos de anclas para prevenir problemas de scroll */
  .main-nav a {
    display: inline-block !important;
    padding: 10px 0 !important;
    white-space: nowrap !important;
  }
  
  /* Asegurar que los enlaces activos tengan estilo correcto */
  .main-nav a.active::after {
    bottom: 5px !important;
  }
}

/* 6. NUEVA SECCIÓN DE DESARROLLO DE SOFTWARE */
.software-dev {
  padding: 40px 0 50px !important;
  background: transparent !important;
  overflow: hidden !important;
  position: relative !important;
  margin-top: 20px !important;
}

.software-dev::before {
  display: none !important;
}

.dev-showcase {
  align-items: center !important;
  gap: 80px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  flex-direction: row-reverse !important;
}

.dev-phone-container {
  flex: 0 0 38% !important; /* Ajustar proporción */
  padding: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  width: 38% !important; /* Ancho específico */
  box-sizing: border-box !important;
}

.dev-phone {
  position: relative !important;
  z-index: 1 !important;
}

.phone-frame {
  position: relative !important;
  width: 280px !important;
  height: 500px !important;
  border-radius: 30px !important;
  border: 6px solid #14e682 !important;
  background: #010a14 !important;
  overflow: hidden !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(20, 230, 130, 0.6) !important;
  animation: pulse-border 2s infinite !important;
  transition: all 0.5s ease-out !important;
}

.phone-content {
  width: 100% !important;
  height: 114% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.dev-stats-overlay {
  position: absolute !important;
  top: 84px !important;
  left: -80px !important;
  z-index: 10 !important;
  background-color: rgba(1, 10, 20, 0.85) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  padding: 15px 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3) !important;
  max-width: 200px !important;
  transform: none !important;
  will-change: transform, opacity !important;
  border: 1px solid rgba(20, 230, 130, 0.2) !important;
  opacity: 1 !important;
}

.dev-stats-overlay .stat-value {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #14e682 !important;
  text-shadow: 0 0 10px rgba(20, 230, 130, 0.5) !important;
}

.dev-stats-overlay .stat-label {
  font-size: 14px !important;
  color: #ffffff !important;
  margin-top: 5px !important;
  font-weight: 500 !important;
}

.dev-content {
  flex: 0 0 48% !important;
  padding: 30px 40px !important;
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
  width: 48% !important;
  max-width: 650px !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.dev-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-bottom: 35px !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  position: relative !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  display: block !important;
}

.dev-title::after {
  content: '' !important;
  display: block !important;
  width: 100px !important;
  height: 4px !important;
  background: linear-gradient(to right, #14e682, rgba(20, 230, 130, 0.5)) !important;
  margin-top: 20px !important;
  box-shadow: 0 0 15px rgba(20, 230, 130, 0.5) !important;
}

.dev-features {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 30px !important;
}

.dev-feature {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #f0f0f0 !important;
  font-size: 16px !important;
}

.dev-feature i {
  color: #a9ff53 !important;
  font-size: 18px !important;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(20, 230, 130, 0.3) !important;
  }
  50% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 25px rgba(20, 230, 130, 0.8) !important;
  }
  100% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(20, 230, 130, 0.3) !important;
  }
}

/* Responsive para la sección de desarrollo */
@media screen and (max-width: 992px) {
  .dev-phone-container {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 70px !important;
  }
  
  .dev-content {
    flex: 0 0 90% !important;
    width: 90% !important;
    max-width: 750px !important;
    padding: 30px !important;
    margin: 0 auto !important;
  }
  
  .dev-showcase {
    flex-direction: column !important;
    gap: 30px !important;
    padding: 0 15px !important;
  }
  
  .dev-title {
    text-align: center !important;
    font-size: 30px !important;
    margin-bottom: 30px !important;
  }
  
  .dev-subtitle p {
    text-align: center !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
  }
  
  .dev-stats-overlay {
    left: 50% !important;
    transform: translateX(-50%) translateY(70px) !important;
    bottom: -80px !important;
    top: auto !important;
  }
}

@media screen and (max-width: 576px) {
  .phone-frame {
    width: 220px !important;
    height: 400px !important;
  }
  
  .dev-title {
    font-size: 26px !important;
  }
  
  .dev-features {
    grid-template-columns: 1fr !important;
  }
  
  .software-dev {
    padding: 25px 0 35px !important;
  }
  
  .dev-stats-overlay {
    width: 85% !important;
    max-width: 280px !important;
    text-align: center !important;
  }
  
  .dev-stats-overlay .stat-value {
    font-size: 26px !important;
  }
  
  .dev-stats-overlay .stat-label {
    font-size: 13px !important;
  }
}

.dev-subtitle {
  margin-bottom: 30px !important;
  max-width: 100% !important;
  width: 100% !important;
}

.dev-subtitle p {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 18px !important;
  line-height: 1.0 !important;
  margin-bottom: 25px !important;
  text-align: left !important;
  letter-spacing: 0.03em !important;
  font-weight: 400 !important;
  width: 100% !important;
  padding: 5px 0 !important;
  display: block !important;
  white-space: normal !important;
}

.dev-subtitle p:last-child {
  margin-bottom: 0 !important;
}

/* Actualizar estilos responsivos */
@media screen and (max-width: 992px) {
  .dev-subtitle {
    text-align: center !important;
    padding: 0 15px !important;
  }
}

@media screen and (max-width: 576px) {
  .dev-subtitle {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* Ajustar la alineación del título cuando está centrado */
@media screen and (max-width: 992px) {
  .dev-title {
    font-size: 28px !important;
    text-align: center !important;
  }
  
  .dev-title::after {
    margin: 15px auto 0 !important;
  }
}

/* 7. MEJORAS PARA ANIMACIONES */

/* Animaciones adicionales para elementos específicos */
.dev-phone-container {
  transform-origin: center center !important;
  will-change: transform, opacity !important;
}

.dev-stats-overlay {
  will-change: transform, opacity !important;
}

.phone-frame {
  transition: all 0.5s ease-out !important;
}

/* Mejora el rendimiento de las animaciones en dispositivos móviles */
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0s !important;
  }
}

/* Estilos generales para mejorar las transiciones */
/* Eliminado el selector [data-aos] que impedía las animaciones */

/* Para elementos con la clase fade-in sin AOS */
.fade-in {
  opacity: 0;
  animation: fadeInAnimation 1s ease forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Ajustes para el efecto hover en elementos animados */
.service-card[data-aos]:hover, 
.about-card[data-aos]:hover, 
.metric-box[data-aos]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Personalización de los efectos AOS */
[data-aos="custom-fade-up"] {
  opacity: 0;
  transform: translateY(50px);
  transition-property: transform, opacity;
}

[data-aos="custom-fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Mejorar animaciones en testimonios */
.testimonial-card[data-aos] {
  transition: all 0.5s ease-out !important;
}

.testimonial-card[data-aos]:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

/* Efectos para estadísticas */
.stat-card[data-aos] {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.stat-card[data-aos]:hover {
  transform: scale(1.05) !important;
}

.stat-card[data-aos] .stat-icon {
  transition: transform 0.5s ease !important;
}

.stat-card[data-aos]:hover .stat-icon {
  transform: rotateY(360deg) !important;
  color: #14e682 !important;
}

/* Planes de precios con animaciones */
.pricing-card[data-aos] {
  transition: all 0.4s ease-out !important;
  transform-origin: center !important;
}

.pricing-card[data-aos]:hover {
  transform: translateY(-15px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

.pricing-card.featured[data-aos] {
  z-index: 10 !important;
}

.featured-badge[data-aos] {
  animation: pulse 2s infinite !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(20, 230, 130, 0) !important;
  }
  70% {
    box-shadow: 0 0 0 10px rgba(20, 230, 130, 0) !important;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(20, 230, 130, 0) !important;
  }
}

/* Formulario de contacto con animaciones */
.form-group input, 
.form-group textarea {
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-group input:focus, 
.form-group textarea:focus {
  border-color: #14e682 !important;
  box-shadow: 0 0 0 2px rgba(20, 230, 130, 0.2) !important;
  transform: translateY(-2px) !important;
}

.submit-btn[data-aos] {
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.submit-btn[data-aos]:before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.5s, height 0.5s !important;
  z-index: -1 !important;
}

.submit-btn[data-aos]:hover:before {
  width: 300px !important;
  height: 300px !important;
}

/* Social buttons con animaciones */
.social-button {
  transition: all 0.3s ease !important;
  transform: scale(1) !important;
}

.social-button:hover {
  transform: scale(1.2) rotate(5deg) !important;
  background: #14e682 !important;
}

/* Animación para counter */
.stat-value {
  position: relative !important;
  overflow: hidden !important;
}

.stat-value:after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(to right, #14e682, transparent) !important;
  transform: translateX(-100%) !important;
  animation: counterLine 2s ease-out forwards !important;
}

@keyframes counterLine {
  0% {
    transform: translateX(-100%) !important;
  }
  100% {
    transform: translateX(0) !important;
  }
}

/* Estilos para el banner de cookies */
.cookie-consent {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(13, 16, 25, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 15px 20px !important;
  display: none !important;
  opacity: 0 !important;
  transform: translateY(100%) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
  z-index: 9999 !important;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cookie-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.cookie-content p {
  margin: 0 !important;
  color: #f0f0f0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}

.cookie-content a {
  color: #14e682 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.cookie-content a:hover {
  text-decoration: underline !important;
  text-shadow: 0 0 8px rgba(20, 230, 130, 0.5) !important;
}

.cookie-buttons {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.cookie-accept, .cookie-decline {
  padding: 8px 18px !important;
  border-radius: 20px !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

.cookie-accept {
  background: #14e682 !important;
  color: #040c18 !important;
  box-shadow: 0 0 10px rgba(20, 230, 130, 0.4) !important;
}

.cookie-accept:hover {
  background: #0dd178 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(20, 230, 130, 0.5) !important;
}

.cookie-decline {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.cookie-decline:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

@media screen and (max-width: 768px) {
  .cookie-consent {
    padding: 15px !important;
  }
  
  .cookie-content {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  .cookie-content p {
    text-align: center !important;
  }
  
  .cookie-buttons {
    width: 100% !important;
    justify-content: center !important;
  }
}

section {
  background-color: #010714 !important;
}

.software-dev, 
.metrics, 
.why-choose, 
.about-section, 
.services-section, 
.statistics, 
.testimonials, 
.pricing, 
.contact-section {
  background-color: #010714 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Reducir espacios entre secciones */
.section {
  margin: 0 !important;
}

/* Ajustar espacios en la sección hero */
.hero {
  min-height: auto !important; /* Altura automática */
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Ajustar hero para que no tenga tanto espacio */
.hero-main {
  min-height: auto !important; /* Eliminar altura mínima */
  padding-top: 0 !important;
}

/* Optimizar espacios de secciones para mejor flujo visual */
.section + .section {
  margin-top: 0 !important;
  padding-top: 25px !important;
}

/* Reducir espacio después de las cards de about */
.about-container {
  margin-bottom: 25px !important;
}

/* Ajustes para móviles */
@media screen and (max-width: 768px) {
  body {
    padding-top: 40px !important;
    font-size: 15px !important;
  }
  
  .header {
    top: 5px !important;
    width: 92% !important;
    border-radius: 20px !important;
  }
  
  .header-container {
    padding: 10px 20px !important;
    height: 45px !important;
  }
  
  .section {
    padding: 40px 0 !important;
    margin: 0 !important;
  }
  
  .software-dev {
    padding: 15px 0 30px !important;
    margin-top: 10px !important;
  }
  .dev-showcase {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 0 10px !important;
    width: 100% !important;
    align-items: center !important;
  }
  
  .dev-phone-container {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 180px !important;
    padding: 0 !important;
    margin: 0 auto 30px !important;
  }
  
  .phone-frame {
    width: 160px !important;
    height: 300px !important;
    border-width: 3px !important;
  }
  
  .dev-stats-overlay {
    position: absolute !important;
    top: auto !important;
    bottom: 168px !important;
    left: -26% !important;
    transform: translateX(-50%) !important;
    max-width: 200px !important;
    width: 53% !important;
    padding: 10px 15px !important;
    border-radius: 10px !important;
}
  
  .dev-stats-overlay .stat-value {
    font-size: 20px !important;
  }
  
  .dev-stats-overlay .stat-label {
    font-size: 11px !important;
  }
  
  .dev-content {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  .dev-title {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
  }
  
  .dev-title::after {
    width: 80px !important;
    height: 3px !important;
    margin: 12px auto 0 !important;
  }
  
  .dev-subtitle {
    margin-bottom: 15px !important;
  }
  
  .dev-subtitle p {
    font-size: 15px !important;
    line-height: 1.0 !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
    padding: 0 5px !important;
  }
  
  .container {
    width: 92% !important;
    padding: 0 !important;
  }
  
  .section-title {
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }
  
  .section-description {
    font-size: 14px !important;
    margin-bottom: 15px !important;
    padding: 0 10px !important;
  }
  
  .services-grid,
  .metrics-grid,
  .choose-features,
  .stats-container,
  .testimonials-grid,
  .pricing-grid,
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .service-card,
  .metric-box,
  .choose-feature,
  .stat-card,
  .testimonial-card,
  .pricing-card,
  [class*="-card"],
  [class*="-box"] {
    padding: 15px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }
  
  .service-icon,
  .stat-icon,
  [class*="-icon"] {
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }
  
  .service-card h3,
  .metric-box h3,
  .choose-feature h4,
  .stat-card h3,
  [class*="-card"] h3,
  [class*="-card"] h4 {
    font-size: 17px !important;
    margin-bottom: 8px !important;
  }
  
  .service-card p,
  .metric-box p,
  .choose-feature p,
  .stat-card p,
  [class*="-card"] p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
  }
  
  .footer-container {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px 0 !important;
  }
  
  .footer-column {
    width: 100% !important;
    padding: 0 15px !important;
    text-align: center !important;
  }
  
  .footer-logo {
    margin: 0 auto 10px !important;
    display: block !important;
  }
  
  .footer-column h4 {
    margin-bottom: 10px !important;
  }
  
  .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
  }
  
  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 15px 0 !important;
  }
  
  .contact-container {
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .contact-info,
  .contact-form-container {
    width: 100% !important;
    padding: 15px !important;
    margin: 0px 0px 42px 0px;
  }
  
  .contact-cards {
    grid-template-columns: 1fr !important;
  }
  
  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .form-group {
    width: 100% !important;
  }
}

/* Arreglar animaciones AOS para evitar problemas */
[data-aos].aos-animate {
  transform: none !important; /* Evitar que las transformaciones de AOS generen scroll */
  opacity: 1 !important; /* Asegurar que los elementos sean visibles */
}

/* Deshabilitar efectos de AOS que causan scroll inicial */
[data-aos-delay] {
  transition-delay: 0s !important; /* Eliminar retrasos */
}

[data-aos] {
  transition-duration: 0s !important; /* Acortar duraciones de transición */
}

/* Prevenir cualquier scroll inicial */
.section:first-of-type {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Ajustar el dev-showcase para mejor alineación vertical */
.dev-showcase {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 2 !important;
  flex-direction: row-reverse !important;
  gap: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Ajustar la superposición de estadísticas */
.dev-stats-overlay {
  transform: none !important;
  opacity: 1 !important;
}

/* Ajustar para móviles */
@media screen and (max-width: 768px) {
  body {
    padding-top: 50px !important; /* Reducir aún más en móviles */
  }
  
  .dev-content {
    padding: 20px 25px !important;
    width: 95% !important;
  }
  
  .dev-title {
    margin-bottom: 25px !important;
    line-height: 1.3 !important;
    width: 100% !important;
  }
  
  .software-dev {
    padding: 25px 0 35px !important;
  }
  
  .dev-subtitle p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    padding: 3px 0 !important;
    margin-bottom: 20px !important;
  }
}

/* Forzar layout en fila para móviles */
@media screen and (max-width: 768px) {
  .dev-showcase,
  section.software-dev .dev-showcase,
  .container .dev-showcase,
  div.dev-showcase {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 0 10px !important;
    width: 100% !important;
    align-items: center !important;
    min-height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Sobrescribir cualquier otro estilo que pueda interferir */
@media screen and (max-width: 768px) {
  /* Estilos para móvil en fila */
  section.software-dev {
    overflow: visible !important;
  }
  
  body .container .dev-showcase {
    flex-direction: row !important;
  }
}

/* Estilos para móvil aplicados solo a pantallas pequeñas */
@media only screen and (max-width: 768px) {
  /* Especificidad extremadamente alta para asegurar aplicación en móvil */
  html body .container .dev-showcase,
  body section.software-dev .container .dev-showcase,
  section.software-dev .container .dev-showcase,
  .software-dev .container .dev-showcase,
  .container .dev-showcase,
  .dev-showcase {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Asegurarnos que la dirección de la fila es indiscutible */
  html body section.software-dev .container .dev-showcase {
    flex-direction: row !important;
  }
}

/* Estilos específicos para las tarjetas de estadísticas */
.stats-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 15px !important;
  margin: 30px auto !important;
  overflow-x: auto !important; /* Permitir scroll horizontal si es necesario */
  padding: 10px 0 !important;
}

.stat-card {
  flex: 1 1 0 !important;
  min-width: 200px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 20px 15px !important;
}

/* Ajustes para móvil */
@media screen and (max-width: 768px) {
  .stats-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 15px !important; /* Espacio para el scrollbar */
    margin: 20px auto !important;
    -webkit-overflow-scrolling: touch !important; /* Scroll suave en iOS */
  }
  
  .stat-card {
    min-width: 150px !important;
    flex: 0 0 auto !important;
    margin: 0 5px !important;
    padding: 15px 10px !important;
  }
  
  .stat-value {
    font-size: 22px !important;
  }
  
  .stat-label {
    font-size: 12px !important;
  }
}

/* Script adicional para forzar la disposición horizontal en las tarjetas de estadísticas */
@media screen and (max-width: 768px) {
  html body section#statistics .container .stats-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
  
  html body section#statistics .container .stats-container .stat-card {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
  }
}

/* Optimización completa para tarjetas en móvil */
@media screen and (max-width: 768px) {
  /* Ajustes generales para tarjetas en móvil */
  .testimonial-card,
  .service-card,
  .pricing-card,
  .contact-card,
  .stat-card,
  .about-card,
  .choose-feature,
  .metric-box,
  [class*="-card"],
  [class*="-box"] {
    width: 85% !important;
    max-width: 300px !important;
    margin: 0 auto 15px !important;
    padding: 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Reducir tamaño de texto en tarjetas para móvil */
  .testimonial-card h3,
  .service-card h3,
  .pricing-card h3,
  .contact-card h4,
  .stat-card h3,
  .about-card h3,
  .choose-feature h4,
  .metric-box h3,
  [class*="-card"] h3,
  [class*="-card"] h4,
  [class*="-box"] h3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }
  
  /* Reducir tamaño de texto en párrafos de tarjetas */
  .testimonial-card p,
  .service-card p,
  .pricing-card p,
  .contact-card p,
  .stat-card p,
  .about-card p,
  .choose-feature p,
  .metric-box p,
  [class*="-card"] p,
  [class*="-box"] p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
  }
  
  /* Reducir tamaño de iconos en tarjetas */
  .testimonial-card i,
  .service-card i,
  .service-icon i,
  .pricing-card i,
  .stat-card i,
  .about-card i,
  .choose-feature i,
  .metric-box i,
  .stat-icon,
  [class*="-icon"] i {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  
  /* Ajustar grid de tarjetas */
  .services-grid,
  .testimonials-grid,
  .pricing-grid,
  .about-container,
  .choose-features,
  .metrics-grid,
  [class*="-grid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: center !important;
    width: 100% !important;
  }
  
  /* Testimonios específicos */
  .testimonial-card {
    max-width: 280px !important;
    padding: 15px !important;
  }
  
  .testimonial-card p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  
  .testimonial-author {
    font-size: 14px !important;
  }
  
  .testimonial-position {
    font-size: 12px !important;
  }
  
  .testimonial-avatar img {
    width: 50px !important;
    height: 50px !important;
  }
  
  /* Ajustar contenedor */
  .container {
    width: 90% !important;
    padding: 0 !important;
  }
}

/* Correcciones para problemas específicos en móvil */
@media screen and (max-width: 768px) {
  /* Corregir sección de contacto */
  .contact-info {
    width: 100% !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    max-width: 350px !important;
  }
  
  .contact-info-header {
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  
  .contact-info-header h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }
  
  .contact-info-header p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  .contact-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
  }
  
  .contact-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }
  
  .contact-icon {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .contact-details {
    flex: 1 !important;
    text-align: left !important;
  }
  
  .contact-details h4 {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  
  .contact-details p {
    font-size: 14px !important;
    margin: 0 !important;
  }
  
  /* Corregir stats sin scroll horizontal */
  .stats-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    overflow-x: visible !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    flex: unset !important;
    margin: 0 !important;
    padding: 10px !important;
  }
  
  .stat-value {
    font-size: 22px !important;
  }
  
  .stat-label {
    font-size: 12px !important;
  }
  
  /* Corrección de botón "Más popular" en planes */
  .featured-badge {
    position: absolute !important;
    top: 19px !important;
    right: unset !important;
    left: 72% !important;
    transform: translateX(-50%) !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    font-size: 8px !important;
    font-weight: bold !important;
    background-color: #14e682 !important;
    color: #010714 !important;
    z-index: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 10px rgba(20, 230, 130, 0.3) !important;
}
  
  .pricing-card.featured {
    position: relative !important;
    margin-top: 15px !important;
    padding-top: 20px !important;
  }
}

/* Corrección definitiva para eliminar scroll en estadísticas */
@media screen and (max-width: 768px) {
  /* Sobreescribir CUALQUIER configuración previa de stats-container */
  #statistics .stats-container,
  .statistics .stats-container,
  section#statistics .container .stats-container,
  html body section#statistics .container .stats-container,
  .stats-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 15px auto !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: auto !important;
  }
  
  /* Forzar cada stat-card a comportarse adecuadamente */
  #statistics .stat-card,
  .statistics .stat-card,
  section#statistics .container .stats-container .stat-card,
  html body .stat-card,
  .stats-container .stat-card,
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
  }
}

/* Estilos específicos para about-stats en móvil */
@media screen and (max-width: 768px) {
  /* Ajustar el contenedor about-stats */
  .about-stats,
  #about .about-stats,
  .about-section .about-stats,
  section#about .container .about-stats,
  html body section#about .container .about-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 20px auto !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  
  /* Ajustar cada about-stat */
  .about-stat,
  #about .about-stat,
  .about-section .about-stat,
  section#about .container .about-stats .about-stat,
  html body section#about .container .about-stats .about-stat {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    margin: 0 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: auto !important;
    background-color: rgba(1, 10, 20, 0.6) !important;
    border-radius: 15px !important;
    border: 1px solid rgba(20, 230, 130, 0.2) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }
  
  /* Estilos para el número y texto */
  .about-stat .stat-number {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #14e682 !important;
    margin-bottom: 5px !important;
  }
  
  .about-stat .stat-text {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
  }
  
  /* Efecto hover */
  .about-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  }
}

/* Accesibilidad - Clase para ocultar elementos visualmente pero mantenerlos accesibles para lectores de pantalla */
.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;
}

[data-aos="fade-down"] {
  transform: translateY(-30px) !important;
}

[data-aos="fade-down"].aos-animate {
  transform: translateY(0) !important;
}

[data-aos="fade-left"] {
  transform: translateX(30px) !important;
}

[data-aos="fade-left"].aos-animate {
  transform: translateX(0) !important;
}

[data-aos="fade-right"] {
  transform: translateX(-30px) !important;
}

[data-aos="fade-right"].aos-animate {
  transform: translateX(0) !important;
}

[data-aos="zoom-in"] {
  transform: scale(0.7) !important;
}

[data-aos="zoom-in"].aos-animate {
  transform: scale(1) !important;
}

[data-aos="zoom-out"] {
  transform: scale(1.3) !important;
}

[data-aos="zoom-out"].aos-animate {
  transform: scale(1) !important;
}

[data-aos="flip-left"] {
  transform: perspective(2500px) rotateY(90deg) !important;
}

[data-aos="flip-left"].aos-animate {
  transform: perspective(2500px) rotateY(0) !important;
}

[data-aos="flip-right"] {
  transform: perspective(2500px) rotateY(-90deg) !important;
}

[data-aos="flip-right"].aos-animate {
  transform: perspective(2500px) rotateY(0) !important;
}

[data-aos^="zoom"] {
  opacity: 0 !important;
  transition-property: opacity, transform !important;
}

[data-aos^="zoom"].aos-animate {
  opacity: 1 !important;
}

[data-aos-delay] {
  transition-delay: 0s !important;
}

[data-aos-delay].aos-animate {
  transition-delay: attr(data-aos-delay) !important;
}

[data-aos][data-aos][data-aos-duration="50"],
body[data-aos-duration="50"] [data-aos] {
  transition-duration: 50ms !important;
}

[data-aos][data-aos][data-aos-duration="100"],
body[data-aos-duration="100"] [data-aos] {
  transition-duration: 100ms !important;
}

[data-aos][data-aos][data-aos-duration="150"],
body[data-aos-duration="150"] [data-aos] {
  transition-duration: 150ms !important;
}

[data-aos][data-aos][data-aos-duration="200"],
body[data-aos-duration="200"] [data-aos] {
  transition-duration: 200ms !important;
}

[data-aos][data-aos][data-aos-duration="250"],
body[data-aos-duration="250"] [data-aos] {
  transition-duration: 250ms !important;
}

[data-aos][data-aos][data-aos-duration="300"],
body[data-aos-duration="300"] [data-aos] {
  transition-duration: 300ms !important;
}

[data-aos][data-aos][data-aos-duration="400"],
body[data-aos-duration="400"] [data-aos] {
  transition-duration: 400ms !important;
}

[data-aos][data-aos][data-aos-duration="500"],
body[data-aos-duration="500"] [data-aos] {
  transition-duration: 500ms !important;
}

[data-aos][data-aos][data-aos-duration="600"],
body[data-aos-duration="600"] [data-aos] {
  transition-duration: 600ms !important;
}

[data-aos][data-aos][data-aos-duration="700"],
body[data-aos-duration="700"] [data-aos] {
  transition-duration: 700ms !important;
}

[data-aos][data-aos][data-aos-duration="800"],
body[data-aos-duration="800"] [data-aos] {
  transition-duration: 800ms !important;
}

[data-aos][data-aos][data-aos-duration="900"],
body[data-aos-duration="900"] [data-aos] {
  transition-duration: 900ms !important;
}

[data-aos][data-aos][data-aos-duration="1000"],
body[data-aos-duration="1000"] [data-aos] {
  transition-duration: 1000ms !important;
}

/* Estilos de animación para elementos específicos */
.testimonial-card[data-aos], 
.service-card[data-aos], 
.about-card[data-aos], 
.stat-card[data-aos] {
  transform: translate(0, 30px) !important;
  opacity: 0 !important;
  transition: all 0.6s ease-out !important;
}

.testimonial-card[data-aos].aos-animate, 
.service-card[data-aos].aos-animate, 
.about-card[data-aos].aos-animate, 
.stat-card[data-aos].aos-animate {
  transform: translate(0, 0) !important;
  opacity: 1 !important;
}

/* Estilos para el body cuando el menú está abierto */
body.menu-open {
  overflow: hidden !important;
  /* Eliminar propiedades problemáticas */
  position: relative !important; /* Cambiado de fixed para evitar problemas de scroll */
  height: 100% !important;
  width: 100% !important;
  touch-action: none !important; /* Mejorar compatibilidad táctil */
}

/* Ajustes para el menú móvil */
@media (max-width: 768px) {
  .main-nav {
    position: fixed !important;
    top: 80px !important;
    right: -100% !important;
    width: 90% !important;
    max-width: 300px !important;
    background: rgba(5, 8, 15, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 20px !important;
    transition: right 0.2s ease-out !important;
    z-index: 999 !important;
    display: block !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    border-radius: 20px !important;
    margin-right: 5% !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    height: auto !important; 
    overflow-y: auto !important; 
    max-height: 80vh !important;
  }
  
  .main-nav.active {
    right: 0 !important;
    visibility: visible !important; 
    opacity: 1 !important; 
  }
  
  .main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: calc(80vh - 40px) !important; /* Ajustar altura máxima */
    overflow-y: auto !important; /* Permitir scroll dentro del menú */
  }
  
  .main-nav ul li {
    width: 100% !important;
  }
  
  .main-nav ul li a {
    display: block !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Animación del botón hamburguesa */
  .menu-toggle span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #14e682 !important;
    transition: all 0.2s ease !important;
    border-radius: 5px !important;
    pointer-events: none !important; 
    transform-origin: center !important;
  }
  
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg) !important;
  }
  
  .menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
  }
  
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg) !important;
  }
}

/* Corrección específica para sección de servicios */
#services, .services-section {
  z-index: 5 !important; /* Reducir z-index para evitar conflictos con el menú */
  overflow: visible !important; /* Evitar problemas de scroll */
  position: relative !important;
}

/* Asegurar visibilidad de todas las secciones */
section, .section {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Solución global para prevenir problemas de scroll */
html {
  height: auto !important;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  width: 100% !important;
  position: relative !important;
}

/* Estilos de secciones para mejorar detección */
section {
  scroll-margin-top: 80px !important; /* Ayuda al scroll posicionamiento */
  transition: none !important; /* Evitar transiciones innecesarias */
}

/* Secciones específicas optimizadas */
#services, .services-section {
  z-index: 5 !important;
  position: relative !important;
  scroll-margin-top: 90px !important; /* Ajuste extra para servicios */
}

#about, #pricing, #contact, #why-choose {
  z-index: 5 !important;
  position: relative !important;
}

.software-dev {
  z-index: 5 !important;
  position: relative !important;
}

/* Evitar delay en el evento hover */
.main-nav ul {
  touch-action: manipulation !important;
}

/* Optimizaciones de rendimiento global */
body {
  backface-visibility: hidden !important;
}

/* Asegurar que no hay problemas de scroll */
html, body {
  scroll-behavior: smooth !important;
  overscroll-behavior: none !important; /* Prevenir problemas de rubber-banding */
}

/* Mejorar visibilidad de secciones para la navegación - ARREGLO FINAL */
section {
  scroll-margin-top: 80px !important; /* Ajuste para scroll preciso */
  position: relative !important; /* Asegurar que las secciones tienen posición relativa */
  z-index: 1 !important; /* Prevenir problemas de apilamiento */
}

/* Prevenir problemas específicos con servicios y otras secciones - ARREGLO FINAL */
#services, .services-section,
#pricing, 
#about,
#contact,
#why-choose {
  scroll-margin-top: 100px !important; /* Margen adicional para estas secciones */
  min-height: 50vh !important; /* Altura mínima para correcta detección */
  position: relative !important;
  z-index: 2 !important; /* Darles prioridad en el apilamiento */
}

/* Asegurar que la primera sección tenga suficiente altura - ARREGLO FINAL */
.software-dev {
  min-height: 80vh !important;
  scroll-margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Optimizar las transiciones del menú - ARREGLO FINAL */
.main-nav ul li a {
  transition: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) !important; /* Transición mejorada */
  will-change: color, background-color, transform !important; /* Optimizar para hardware acceleration */
  display: inline-block !important;
  position: relative !important;
}

/* Estado activo del menú más notorio - ARREGLO FINAL */
.main-nav ul li a.active {
  color: #14e682 !important;
  font-weight: 700 !important; /* Más bold */
  text-shadow: 0 0 10px rgba(20, 230, 130, 0.3) !important; /* Glow más visible */
  position: relative !important;
  transform: translateY(-1px) !important; /* Ligero efecto de elevación */
}

/* Agregar un indicador visual extra para enlaces activos - ARREGLO FINAL */
.main-nav ul li a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 70% !important; /* Ancho aumentado */
  height: 3px !important;
  background-color: #14e682 !important;
  border-radius: 50px !important;
  display: block !important;
  animation: pulse-underline 1.5s infinite alternate !important; /* Animación para todos los enlaces activos */
  box-shadow: 0 0 5px rgba(20, 230, 130, 0.4) !important; /* Glow en línea */
}

/* Estilo hover para todos los enlaces del menú */
.main-nav ul li a:hover {
  color: #14e682 !important;
  transform: translateY(-1px) !important;
}

/* Estilo para enlaces hover (no activos) */
.main-nav ul li a:hover:not(.active) {
  color: rgba(20, 230, 130, 0.8) !important;
}

/* Estilo hover para enlaces no activos - mostrar línea suave */
.main-nav ul li a:hover:not(.active)::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40% !important; /* Ancho menor que activo */
  height: 2px !important; /* Altura menor que activo */
  background-color: rgba(20, 230, 130, 0.5) !important; /* Color menos intenso */
  border-radius: 50px !important;
  display: block !important;
  transition: all 0.2s ease !important;
}

/* Específico para dispositivos táctiles - ARREGLO FINAL */
@media (hover: none) {
  .main-nav ul li a.active {
    background-color: rgba(20, 230, 130, 0.1) !important; /* Fondo adicional en móvil */
  }
  
  /* Mejor feedback táctil */
  .main-nav ul li a:active {
    background-color: rgba(20, 230, 130, 0.2) !important;
    transform: scale(0.98) !important;
  }
}

/* Mejoras para rendimiento global y fluidez - ARREGLO FINAL */
body {
  scroll-behavior: smooth !important;
  overflow-x: hidden !important;
}

/* Estado body con menú abierto - ARREGLO FINAL */
body.menu-open {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  touch-action: none !important;
}

/* Específico para dispositivos táctiles - ARREGLO FINAL */
@media (hover: none) {
  .main-nav ul li a.active {
    background-color: rgba(20, 230, 130, 0.1) !important; /* Fondo adicional en móvil */
  }
  
  /* Mejor feedback táctil */
  .main-nav ul li a:active {
    background-color: rgba(20, 230, 130, 0.2) !important;
    transform: scale(0.98) !important;
  }
}

/* Refuerzo CSS para asegurar que los enlaces activos del menú se vean correctamente */
.main-nav ul li a.active {
    color: #14e682 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(20, 230, 130, 0.3) !important;
    position: relative !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

/* Indicador visual reforzado para enlaces activos */
.main-nav ul li a.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 70% !important;
    height: 3px !important;
    background-color: #14e682 !important;
    border-radius: 50px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 101 !important;
    box-shadow: 0 0 8px rgba(20, 230, 130, 0.5) !important;
}

/* Asegurar que los enlaces del menú tengan posición relativa para el indicador */
.main-nav ul li a {
    position: relative !important;
    display: inline-block !important;
}

/* Optimización de animaciones AOS */
[data-aos] {
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Reducir la duración de las animaciones */
[data-aos][data-aos][data-aos-duration="300"],
body[data-aos-duration="300"] [data-aos] {
    transition-duration: 300ms !important;
}

/* Optimizar las transformaciones */
[data-aos="fade-up"] {
    transform: translate3d(0, 30px, 0) !important;
    opacity: 0 !important;
    transition-property: transform, opacity !important;
}

[data-aos="fade-up"].aos-animate {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

/* Forzar visibilidad después de un tiempo */
body.force-visible [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
}

/* Optimizar el rendimiento de las tarjetas */
.service-card[data-aos],
.about-card[data-aos],
.stat-card[data-aos] {
    will-change: transform, opacity !important;
    transform: translate3d(0, 30px, 0) !important;
    opacity: 0 !important;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
}

.service-card[data-aos].aos-animate,
.about-card[data-aos].aos-animate,
.stat-card[data-aos].aos-animate {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

.pricing-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    overflow: visible; /* importante para que el chip sobresalga */
}

.pricing-card.featured {
    background: rgba(20, 230, 130, 0.1);
    border: 1px solid rgba(20, 230, 130, 0.3);
}

.featured-badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    background: #14e682;
    color: #010714;
    padding: 7px 22px 6px 22px;
    border-radius: 22px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 10px rgba(20, 230, 130, 0.3);
    z-index: 3;
    display: inline-block;
    border: 2.5px solid #010714;
}

.pricing-card h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 28px; /* Espacio extra para el chip */
    font-weight: 600;
}

.pricing-card .price {
    font-size: 2.5rem;
    color: #14e682;
    margin-bottom: 2rem;
    font-weight: 700;
}

.pricing-card .price span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left;
}

.features-list li {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.features-list li i {
    color: #14e682;
    margin-right: 10px;
    font-size: 0.9rem;
}

.pricing-card .btn {
    width: 100%;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 25px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
    .pricing-card {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .featured-badge {
        font-size: 0.75rem;
        padding: 5px 14px 4px 14px;
        top: 0;
    }

    .pricing-card h3 {
        margin-top: 22px;
        font-size: 1.1rem;
    }

    .pricing-card .price {
        font-size: 2rem;
    }

    .features-list li {
        font-size: 0.9rem;
    }
}