/* ===== CSS MÍNIMO PARA TAILWIND - SOLO EFECTOS ÚNICOS ===== */

/* Fuente personalizada */
@font-face {
  font-family: 'Bauhaus';
  src: url('/fonts/Bauhaus.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Imagen de fondo del hero - Desktop (horizontal) */
.hero-background {
  background-image: url('/img/cosol-fondo-paginas-web-landing-pages-desarrollo-software-empresa-rio-tercero-cordoba-argentina.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Imagen de fondo del hero - Mobile (vertical) */
@media (max-width: 768px) {
  .hero-background {
    background-image: url('/img/cosol-fondo-paginas-web-landing-pages-desarrollo-software-empresa-rio-tercero-cordoba-argentina-2.webp');
    /* Cubrir todo el espacio sin dejar bordes, enfocándose en la parte central */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Asegurar que cubra todo el viewport */
    min-height: 100vh;
    width: 100%;
    background-attachment: scroll;
  }
}

/* Clase para la fuente Bauhaus */
.font-bauhaus {
  font-family: 'Bauhaus', sans-serif;
}

/* Reset básico */
* {
  box-sizing: border-box;
}

/* Optimizaciones de scroll para móviles */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 100px;
}

/* Optimizaciones del video para móviles */
@media (max-width: 768px) {
  .hero-background {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    transform: translateZ(0) scale(1.1) !important; /* Zoom sutil para evitar espacios en blanco */
    filter: brightness(0.85) contrast(1.1) saturate(1.2) !important;
    will-change: transform, filter;
    -webkit-transform: translateZ(0) scale(1.1) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  
  /* Prevenir problemas de renderizado en iOS */
  @supports (-webkit-touch-callout: none) {
    .hero-background {
      -webkit-transform: translate3d(0, 0, 0) scale(1.1) !important;
      transform: translate3d(0, 0, 0) scale(1.1) !important;
    }
  }
  
  /* Overlay más fuerte en móviles para mejor contraste */
  .hero-overlay {
    background: linear-gradient(to bottom, 
      rgba(4, 56, 90, 0.75) 0%,
      rgba(4, 56, 90, 0.55) 50%,
      rgba(4, 56, 90, 0.75) 100%) !important;
    backdrop-filter: blur(0.5px) !important;
    -webkit-backdrop-filter: blur(0.5px) !important;
  }
}

/* Optimizaciones adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
  .hero-background {
    transform: scale(1.15) !important;
    -webkit-transform: scale(1.15) !important;
    filter: brightness(0.8) contrast(1.15) saturate(1.3) !important;
  }
  
  .hero-overlay {
    background: linear-gradient(to bottom, 
      rgba(4, 56, 90, 0.8) 0%,
      rgba(4, 56, 90, 0.6) 50%,
      rgba(4, 56, 90, 0.8) 100%) !important;
  }
}

/* Overlay del hero - más sutil en desktop, más fuerte en móvil */
.hero-overlay {
  transition: opacity 0.3s ease;
}

@media (min-width: 769px) {
  .hero-overlay {
    background: linear-gradient(to bottom, 
      rgba(4, 56, 90, 0.4) 0%,
      rgba(4, 56, 90, 0.25) 50%,
      rgba(4, 56, 90, 0.4) 100%) !important;
  }
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Efectos únicos que Tailwind no puede hacer */
.gradient-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.gradient-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Efecto de brillo en stat-items */


.stat-item:hover::before {
  left: 100%;
}

/* Efecto de linterna en tarjetas */
.gradient-card {
  position: relative;
  overflow: hidden;
}

.gradient-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(141, 192, 40, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gradient-card:hover::before {
  opacity: 1;
}

/* Optimizaciones específicas para móviles */
@media (max-width: 768px) {
  .hero {
    background-attachment: scroll !important;
  }
  
  .stat-item {
    animation: none !important;
  }
  
  .animate-pulse-slow {
    animation: none !important;
  }
  
  .stat-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Header scrolled state */
header.scrolled {
  background: rgba(4, 56, 90, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Hero overlay effects */
.hero .overlay.show {
    background: rgba(4, 56, 90, var(--opacity-intensity, 0.3));
    backdrop-filter: blur(var(--blur-intensity, 1.5px));
    -webkit-backdrop-filter: blur(var(--blur-intensity, 1.5px));
  }
  
/* Optimizaciones de rendimiento */
.hero, .stat-item, .service-item, .about-card {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Contenido del hero oculto inicialmente */
.hero-content {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: all 0.8s ease-out;
}

.hero-content.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.hero-content h1,
.hero-content p,
.hero-content .hero-stats,
.hero-content .btn-primary {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out 0.2s;
}

.hero-content.show h1,
.hero-content.show p,
.hero-content.show .hero-stats,
.hero-content.show .btn-primary {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth transitions */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navegación limpia y simple */
nav ul {
  list-style: none;
  display: flex;
  gap: 35px;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: 1.1rem;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 25px;
}

nav a:hover { 
  color: #8dc028;
  background: rgba(141, 192, 40, 0.1);
  transform: translateY(-1px);
}

.btn-cta {
  background: #8dc028;
  padding: 12px 20px;
  border-radius: 25px;
  color: white !important;
  transition: all 0.3s ease;
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
}

.btn-cta:hover {
  color: white !important;
}

/* Forzar letra blanca en botón Contáctanos */
#nav a[href="#contacto"]:hover,
a[href="#contacto"]:hover {
  color: white !important;
  background: #a2bc65 !important;
}

/* Menú móvil como dropdown */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex !important;
  }
}

/* Ocultar menú hamburguesa en desktop */
@media (min-width: 768px) {
  .menu-toggle {
    display: none !important;
  }
  
  #nav {
    display: block !important;
    position: static !important;
    width: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-direction: row !important;
    gap: 0 !important;
    z-index: auto !important;
    transform: none !important;
  }
}

/* Menú móvil */
@media (max-width: 767px) {
  #nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    background: rgba(4, 56, 90, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 40;
    transform: translateY(-10px);
  opacity: 0;
    transition: all 0.3s ease;
}

  #nav.show {
    display: flex !important;
  transform: translateY(0);
    opacity: 1;
  }
  
  #nav ul {
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  #nav li {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #nav a {
    color: white !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  
  #nav a:not([href="#contacto"]):hover {
    background: rgba(141, 192, 40, 0.2) !important;
    color: #8dc028 !important;
    width: 80% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  
  #nav a[href="#contacto"] {
    background: #8dc028 !important;
    color: white !important;
    text-align: center !important;
    font-weight: bold !important;
    margin-top: 8px !important;
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  #nav a[href="#contacto"]:hover {
    background: #a2bc65 !important;
    color: white !important;
  }
}

/* Restaurar las tildes en las listas de servicios */
.service-features li span {
  display: none !important; /* Ocultar los círculos */
}

.service-features li::before {
  content: "✓" !important;
  color: #8dc028 !important;
  font-weight: bold !important;
  font-size: 16px !important;
  margin-right: 12px !important;
  display: inline-block !important;
  width: 20px !important;
  text-align: center !important;
}

/* Botón flotante de WhatsApp */
.whatsapp-float {
  animation: pulse 2s infinite;
}

.whatsapp-float:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Responsive para móvil */
@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 20px !important;
    right: 20px !important;
    padding: 12px !important;
  }
  
  .whatsapp-float svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .whatsapp-tooltip {
    display: none !important; /* Ocultar tooltip en móvil */
  }
}

.menu-toggle { 
  display: flex; 
  flex-direction: column;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background: rgba(141, 192, 40, 0.1);
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: #8dc028;
  margin: 3px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Menú desktop - ocultar en móvil por defecto */
@media (min-width: 769px) {
  #nav {
    display: block !important;
  }
}

/* Menú móvil responsive */
@media (max-width: 768px) {
  #nav {
  position: absolute;
    top: 100%;
  right: 0;
    width: 200px;
    background: rgba(4, 56, 90, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    transform: translateY(-20px);
    opacity: 0;
  transition: all 0.3s ease;
    z-index: 40;
    visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 1rem 0;
  }
  
  #nav.show {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
  }
  
  #nav ul {
  flex-direction: column;
    gap: 0.5rem;
  text-align: center; 
    width: 100%;
    padding: 0 1rem;
  }
  
  #nav a {
  font-size: 0.9rem; 
    font-weight: 500;
    color: white !important;
    padding: 16px 32px !important;
    border-radius: 25px;
    background: transparent !important;
    transition: all 0.2s ease;
  }
  
  #nav a:hover {
    background: rgba(141, 192, 40, 0.2);
    color: #a2bc65 !important;
  }
  
  /* Efecto hover simple para enlaces de navegación */
  #nav a:not([href="#contacto"]):hover {
    background: rgba(141, 192, 40, 0.3) !important;
    
  }

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}
}

/* Padding dinámico del hero para evitar choque con el menú */
.hero {
  padding-top: calc(80px + 5vw) !important;
  padding-bottom: 40px !important;
}

/* Ajustes específicos por tamaño de pantalla */
@media (min-width: 1024px) {
  .hero {
    padding-top: calc(100px + 6vw) !important;
  }
}

@media (min-width: 1280px) {
  .hero {
    padding-top: calc(120px + 8vw) !important;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: calc(90px + 4vw) !important;
  }
}

/* Optimizaciones para móviles */
@media (max-width: 640px) {
  .hero {
    padding-top: calc(100px + 3vw) !important;
    padding-bottom: 30px !important;
  }
  
  .hero-content {
    padding: 1rem !important;
    margin: 0 0.5rem;
  }
  
  .hero-stats {
    gap: 0.75rem !important;
  }
  
  .stat-item {
    min-width: 80px !important;
    padding: 0.75rem !important;
  }
  
  /* Evitar que se corte la página */
  body {
    overflow-x: hidden;
  }
  
  .App {
    overflow-x: hidden;
  }
  
  /* Asegurar que todo el contenido quepa */
  .hero-content {
    max-width: 100%;
  }
  
  .hero-stats {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stat-item {
    flex: 1;
    min-width: 80px;
    max-width: 100px;
  }
}

/* Optimización de imágenes */
img {
  max-width: 100%;
  height: auto;
  loading: lazy;
}

/* Contenido crítico */
.critical-content {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Asegurar que no se corte nada en móvil */
@media (max-width: 768px) {
  * {
    box-sizing: border-box;
  }
  
  body, html {
    overflow-x: hidden;
    width: 100%;
  }
  
  .App {
    width: 100%;
    overflow-x: hidden;
  }
  
  /* Asegurar que todos los contenedores quepan */
  .max-w-4xl, .max-w-6xl {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Formulario responsive */
  .phone-container {
    flex-direction: column;
  }
  
  .phone-container select,
  .phone-container input {
    width: 100% !important;
  }
  
  /* Grid responsive */
  .grid {
    gap: 1rem;
  }
  
  /* Asegurar que los botones no se salgan */
  .btn-primary {
    width: 100%;
    max-width: 100%;
  }
  
  /* Ocultar cualquier línea vertical en móvil */
  .footer-divider,
  .w-px,
  [class*="w-px"] {
    display: none !important;
  }
  
  /* Asegurar que no haya elementos que se salgan */
  * {
    max-width: 100%;
  }
}

/* Animaciones cool para Misión, Visión y Valores */
.about-card {
  position: relative;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: none !important;
}

.about-card:hover {
  box-shadow: none !important;
}

/* Animación del icono */
.card-icon {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-card:hover .card-icon {
  transform: scale(1.1) rotate(5deg);
  color: #04385a !important;
  text-shadow: 0 0 10px rgba(4, 56, 90, 0.5);
}

/* Efecto de brillo en el texto */
.about-card:hover h3 {
  color: #a2bc65 !important;
}

.about-card:hover p {
  color: #04385a !important;
}

/* Efecto dinámico del borde - manejado por JavaScript */

/* Arreglar desplegables en sección de contacto */
.contact select {
  background-color: rgba(4, 56, 90, 0.9) !important;
  color: white !important;
}

.contact select option {
  background-color: #04385a !important;
  color: white !important;
  padding: 8px 12px;
}

.contact select:focus {
  background-color: rgba(4, 56, 90, 0.95) !important;
}

/* Asegurar que los desplegables se vean bien */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Mejorar la apariencia de los desplegables en la sección de contacto */
.contact select {
  background-color: rgba(4, 56, 90, 0.9) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.contact select:focus {
  background-color: rgba(4, 56, 90, 0.95) !important;
  border-color: #a2bc65 !important;
  box-shadow: 0 0 0 2px rgba(162, 188, 101, 0.2) !important;
}

/* Estilos para las opciones del desplegable */
.contact select option {
  background-color: #04385a !important;
  color: white !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
}

.contact select option:hover {
  background-color: #024071 !important;
}

.contact select option:checked {
  background-color: #a2bc65 !important;
  color: #04385a !important;
}

/* Mejorar experiencia del botón de envío */
#submitBtn:disabled {
  opacity: 0.75 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#submitBtn:disabled:hover {
  transform: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Animación de carga para el botón */
#submitBtn.loading {
  position: relative;
  overflow: hidden;
}

#submitBtn.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
    width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ===== EFECTO 3D PARA IMÁGENES DE SERVICIOS ===== */

/* Contenedor para las imágenes 3D */
.service-image-3d {
  position: relative;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen principal grande con efecto 3D */
.service-image-main {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.1),
    0 4px 16px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.service-image-main:hover {
  transform: rotate3d(0.5, 1, 0, 15deg) scale(1.05);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.15),
    0 8px 24px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.3);
  border-color: rgba(141, 192, 40, 0.3);
}

/* Contenedor para las 3 partes de la imagen apiladas - Tailwind compatible */
.image-parts-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Estilos base para cada parte - asegurar visibilidad */
.image-part {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 1;
  transform-style: preserve-3d;
  transform: translateZ(0);
  filter: none; /* Sin filtros de brillo - colores naturales */
}

/* Asegurar que las imágenes sean visibles */
.image-part-1 {
  z-index: 1;
  opacity: 1;
}

.image-part-2 {
  z-index: 2;
  opacity: 1;
}

.image-part-3 {
  z-index: 3;
  opacity: 1;
}

.image-part-4 {
  z-index: 4;
  opacity: 1;
}

.image-part-5 {
  z-index: 5;
  opacity: 1;
}

/* Efecto de brillo sutil */
.service-image-main::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.service-image-main:hover::before {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Imagen pequeña sin fondo ni borde - solo la imagen */
.service-image-small {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  transform: translate3d(0px, 0px, 80px);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;
  transition: all 0.5s ease-in-out;
  z-index: 10;
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
}

/* Efecto hover exacto del date-box original */
.service-image-3d:hover .service-image-small {
  transform: translate3d(0px, 0px, 100px);
}

.service-image-small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  background: none;
  border: none;
}

/* Layout de servicios en móvil - items uno debajo del otro */
@media (max-width: 768px) {
  .service-item {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .service-content {
    text-align: center !important;
    width: 100% !important;
  }
  
  .service-features {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .service-features li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 300px !important;
  }
  
  /* Asegurar que las tildes estén perfectamente alineadas */
  .service-features li span {
    flex-shrink: 0 !important;
    width: 12px !important;
    height: 12px !important;
    margin-right: 12px !important;
  }
  
  .service-image-main {
    width: 220px;
    height: 220px;
    padding: 15px;
    border-radius: 15px;
  }
  
  .service-image-small {
    width: 50px;
    height: 50px;
    top: 15px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  .service-image-main {
    width: 180px;
    height: 180px;
    padding: 12px;
    border-radius: 12px;
  }
  
  .service-image-small {
    width: 45px;
    height: 45px;
    top: 12px;
    right: 12px;
  }
}

/* ===== LOADER ANIMADO PARA FORMULARIO ===== */
.loader {
  width: 48px;
  /* Subpixels get cut off */
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: center;

  --active: #8dc028; /* Verde COSOL */
  --track: #a2bc65; /* Verde claro COSOL */

  --duration: 8s;

  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

.active {
  stroke: var(--active);
  stroke-linecap: round;
  stroke-dashoffset: 360;
  animation: active-animation var(--duration) ease-in-out infinite;
}

@keyframes active-animation {
  0% {
    stroke-dasharray: 0 0 0 360 0 360;
  }
  12.5% {
    stroke-dasharray: 0 0 270 90 270 90;
  }
  25% {
    stroke-dasharray: 0 270 0 360 0 360;
  }
  37.5% {
    stroke-dasharray: 0 270 270 90 270 90;
  }
  50% {
    stroke-dasharray: 0 540 0 360 0 360;
  }
  50.001% {
    stroke-dasharray: 0 180 0 360 0 360;
  }
  62.5% {
    stroke-dasharray: 0 180 270 90 270 90;
  }
  75% {
    stroke-dasharray: 0 450 0 360 0 360;
  }
  87.5% {
    stroke-dasharray: 0 450 270 90 270 90;
  }
  87.501% {
    stroke-dasharray: 0 90 270 90 270 90;
  }
  100% {
    stroke-dasharray: 0 360 1 360 0 360;
  }
}

.track {
  stroke: var(--track);
  stroke-linecap: round;
  stroke-dashoffset: 360;
  animation: track-animation var(--duration) ease-in-out infinite;
}

@keyframes track-animation {
  0% {
    stroke-dasharray: 0 20 320 40 320 40;
  }
  12.5% {
    stroke-dasharray: 0 290 50 310 50 310;
  }
  25% {
    stroke-dasharray: 0 290 320 40 320 40;
  }
  37.5% {
    stroke-dasharray: 0 560 50 310 50 310;
  }
  37.501% {
    stroke-dasharray: 0 200 50 310 50 310;
  }
  50% {
    stroke-dasharray: 0 200 320 40 320 40;
  }
  62.5% {
    stroke-dasharray: 0 470 50 310 50 310;
  }
  62.501% {
    stroke-dasharray: 0 110 50 310 50 310;
  }
  75% {
    stroke-dasharray: 0 110 320 40 320 40;
  }
  87.5% {
    stroke-dasharray: 0 380 50 310 50 310;
  }
  100% {
    stroke-dasharray: 0 380 320 40 320 40;
  }
}

/* Ocultar loader por defecto y centrarlo */
.loader-container {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px !important; /* Separar loader del botón */
}

/* ===== OPTIMIZACIONES MÓVILES PARA FORMULARIO ===== */

/* Prevenir zoom en inputs en iOS */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-appearance: none;
    border-radius: 12px;
    /* Remover backdrop-blur en móviles para mejor performance */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Simplificar transiciones */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  /* Mejorar autocompletado - Optimizado para performance */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.1) inset !important;
    -webkit-text-fill-color: #1f2937 !important; /* Texto gris oscuro para mejor contraste */
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    /* Remover transición pesada */
    transition: none !important;
  }
  
  /* Optimizar select para móviles */
  select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
  }
  
  /* Mejorar textarea en móviles */
  textarea {
    resize: vertical;
    min-height: 120px;
  }
  
  /* Optimizar grid del formulario en móviles */
  .form-grid-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Mejorar espaciado en móviles */
  .form-group {
    margin-bottom: 1.5rem;
  }
  
  /* Optimizar botón en móviles */
  .submit-btn-mobile {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    touch-action: manipulation;
  }
  
  /* ===== OPTIMIZACIONES ANTI-LAG PARA MÓVILES ===== */
  
  /* Deshabilitar efectos pesados en móviles */
  .bg-white\/10 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Simplificar transiciones en inputs */
  input, textarea, select {
    transition: border-color 0.15s ease !important;
  }
  
  /* Optimizar hover states para touch */
  input:focus, textarea:focus, select:focus {
    transform: none !important;
    will-change: auto !important;
  }
  
  /* Reducir repaints */
  .form-group {
    contain: layout style;
  }
}

/* Prevenir zoom en inputs específicos */
@media screen and (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    font-size: 16px !important;
  }
}

/* ===== ANIMACIONES PARA AUTOCOMPLETADO ===== */
@keyframes onAutoFillStart {
  from { /**/ }
  to { /**/ }
}

@keyframes onAutoFillCancel {
  from { /**/ }
  to { /**/ }
}

/* Detectar autocompletado */
input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 0.001s;
}

input:not(:-webkit-autofill) {
  animation-name: onAutoFillCancel;
  animation-duration: 0.001s;
}

/* Estilos para inputs con autocompletado */
input.autofilled {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(141, 192, 40, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(141, 192, 40, 0.2) !important;
}

/* Mejorar experiencia de teclado virtual en móviles */
@media screen and (max-width: 768px) {
  input[inputmode="tel"] {
    font-family: monospace;
  }
  
  input[inputmode="email"] {
    text-transform: lowercase;
  }
  
  /* Optimizar textarea para móviles */
  textarea {
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ===== RESPONSIVE ADAPTATIVO PARA MÓVILES ===== */

/* Cuadros de estadísticas (100%) - Se achican gradualmente */
@media screen and (max-width: 768px) {
  .hero-stats {
    gap: 0.75rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stat-item {
    min-width: 80px !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
  }
  
  .stat-number {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  .stat-label {
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
  }
}

@media screen and (max-width: 480px) {
  .hero-stats {
    gap: 0.5rem !important;
  }
  
  .stat-item {
    min-width: 70px !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.75rem !important;
  }
}

/* Títulos y textos - Se achican progresivamente */
@media screen and (max-width: 768px) {
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-content {
    padding: 1.5rem !important;
    border-radius: 12px !important;
  }
}

@media screen and (max-width: 480px) {
  .hero h1 {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
  }
  
  .hero p {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
  }
  
  .hero-content {
    padding: 1rem !important;
    border-radius: 8px !important;
  }
}

/* Servicios - Se adaptan mejor */
@media screen and (max-width: 768px) {
  .service-item {
    padding: 1rem !important;
    border-radius: 16px !important;
    margin-bottom: 1.5rem !important;
  }
  
  .service-content h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .service-benefit {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .service-content p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }
}

@media screen and (max-width: 480px) {
  .service-item {
    padding: 0.75rem !important;
    border-radius: 12px !important;
  }
  
  .service-content h3 {
    font-size: 1.25rem !important;
  }
  
  .service-benefit {
    font-size: 1rem !important;
  }
  
  .service-content p {
    font-size: 0.85rem !important;
  }
}

/* Formulario - Se adapta mejor */
@media screen and (max-width: 768px) {
  .contact .bg-white\/10 {
    padding: 1rem !important;
    border-radius: 16px !important;
  }
  
  .form-group {
    margin-bottom: 1rem !important;
  }
  
  .form-group label {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }
}

@media screen and (max-width: 480px) {
  .contact .bg-white\/10 {
    padding: 0.75rem !important;
    border-radius: 12px !important;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.6rem !important;
    font-size: 0.85rem !important;
  }
}

/* Botones - Se adaptan mejor */
@media screen and (max-width: 768px) {
  .submit-btn-mobile {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }
  
  .btn-primary {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }
}

@media screen and (max-width: 480px) {
  .submit-btn-mobile {
    padding: 0.6rem 1.25rem !important;
    font-size: 0.85rem !important;
  }
  
  .btn-primary {
    padding: 0.6rem 1.25rem !important;
    font-size: 0.85rem !important;
  }
}

/* Header - Se adapta mejor */
@media screen and (max-width: 768px) {
  .logo {
    font-size: 1.25rem !important;
  }
  
  .header {
    padding: 0.75rem 1rem !important;
    border-radius: 20px !important;
  }
}

@media screen and (max-width: 480px) {
  .logo {
    font-size: 1.1rem !important;
  }
  
  .header {
    padding: 0.5rem 0.75rem !important;
    border-radius: 16px !important;
  }
}