/* === Chrome Compatibility Fixes === */
/* Este archivo debe ser incluido después del style3.css principal */

/* Mejora el renderizado de fuentes */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  max-width: 100%;
}

/* Bordes redondeados mejorados */
.button,
.overlay-layout,
.feature-image img,
.product-feature img,
.client-header img,
#services-form,
#alert-statut .alert,
.support-modal-wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Flexbox mejorado */
.feature-content,
.services-columns,
.footer .inner,
.stats-container,
.support-row,
.support-column,
.intro-sub-titles,
.client-header,
#clients-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Solución gap para flexbox */
@supports not (gap: 1px) {
  .services-columns > * + * {
    margin-left: var(--page--spacing);
  }
  
  .feature-content > * + * {
    margin-left: 50px;
  }
  
  .footer-menu > * + * {
    margin-top: 16px;
  }
  
  .intro-sub-titles > * + * {
    margin-left: 36px;
  }
  
  .client-header > * + * {
    margin-left: 18px;
  }
  
  #clients-pagination > * + * {
    margin-left: 8px;
  }
  
  @media (max-width: 1023px) {
    .services-columns > * + *,
    .feature-content > * + * {
      margin-left: 0;
      margin-top: var(--page--spacing);
    }
  }
}

/* Corrección para elementos de posición fija */
#header,
#hotextil-preview,
#support-modal,
#mobile-menu {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Animaciones más fluidas */
@-webkit-keyframes spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

#loading-spinner:before {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: spinner 0.4s infinite linear;
  animation: spinner 0.4s infinite linear;
}

/* Transiciones mejoradas */
.intro h1,
.intro .intro-sub-titles,
.hotextils,
.client,
.support-modal-open #support-modal,
.support-modal-fade-out #support-modal,
.hotextil-preview-open #hotextil-preview,
.hotextil-preview-fade-out #hotextil-preview,
.mobile-menu-open #mobile-menu,
.mobile-menu-fade-out #mobile-menu {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Feature section específica para Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .feature-content {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .feature-text, 
  .feature-image {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 25px);
    flex: 0 0 calc(50% - 25px);
    max-width: calc(50% - 25px);
  }
  
  @media (max-width: 1200px) {
    .feature-text, 
    .feature-image {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  
  /* Stats section fix */
  .stats-container {
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
  }
  
  .stat-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
    min-width: 0;
  }
  
  /* Overlay fix */
  .overlay-layout {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  .overlay-text {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
  }
  
  /* Mejora para imágenes */
  img {
    max-width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Mejora para botones */
  .button {
    -webkit-transition: color .2s ease, background-color .2s ease;
    transition: color .2s ease, background-color .2s ease;
  }
}

/* Fallback para clamp() */
@supports not (font-size: clamp(1px, 1vw, 2px)) {
  .intro h1 {
    font-size: 48px;
  }
  
  .section-header h2 {
    font-size: 48px;
  }
  
  .section-header p {
    font-size: 20px;
  }
  
  .services-info h4 {
    font-size: 32px;
  }
  
  @media (max-width: 768px) {
    .intro h1,
    .section-header h2 {
      font-size: 32px;
    }
    
    .section-header p {
      font-size: 18px;
    }
    
    .services-info h4 {
      font-size: 24px;
    }
  }
}

/* Soluciona problemas de scroll */
html.smooth-scroll-on:not(.scroll-behavior-snap) {
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
}

/* Fix para dispositivos iOS */
@supports (-webkit-overflow-scrolling: touch) {
  body {
    cursor: pointer;
  }
  
  .button,
  #clients-pagination li,
  .client-header img {
    cursor: pointer;
  }
}

/* Mejora la estructura de modal */
.support-modal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Fix para formularios en Chrome */
#services-form select,
#services-form textarea,
#services-form input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--border--radius);
}

/* Mejora para backdrop-filter en Chrome */
#header:before {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Fix para video background */
#video-wrapper {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Acelera transiciones en Chrome */
body.transitions-on a:not(.button):after,
.header-menu-icon:before,
.header-menu-icon:after,
#hotextil-preview-iframe-size,
.client,
#support-modal,
#hotextil-preview,
#mobile-menu {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Fix problemas de posicionamiento */
.inner {
  position: relative;
  width: 100%;
}

/* Media query adicional para ajustes de borde en Chrome */
@media screen and (min-width: 0\0) and (-webkit-min-device-pixel-ratio:0) {
  .button, 
  #services-form,
  .client-header img {
    border-radius: var(--border--radius);
  }
}

/* Mejora rendimiento de overlays */
.overlay-text {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}

/* Fix específico para Chrome 49+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
  .feature-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .feature-content > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
}

/* Fix media query para dispositivos de alta resolución en Chrome */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}