/* Estilos globales para prevenir overflow horizontal */
html, body {
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  background-color: #000;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevenir ajuste automático de texto en Safari */
}

* {
  box-sizing: border-box;
}

/* Contenedor del teléfono */
.sticky-phone-container {
  position: absolute;
  height: 0;
  width: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 30;
  overflow: hidden;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
  .sticky-phone {
    z-index: 40 !important;
    transform: scale(0.85) !important;
  }
  
  /* Asegurar que el teléfono pueda moverse en móviles */
  .phone-3d-container {
    will-change: transform !important;
    transition: none !important;
    transform-origin: center center !important; /* Cambiado a center */
    left: 60% !important; /* Posicionamos desde la izquierda */
    right: auto !important;
    width: 170px !important;
    height: 340px !important;
    /* Optimizaciones para Safari */
    -webkit-transform-style: flat !important; /* Mejor rendimiento en Safari */
    -webkit-backface-visibility: hidden;
    -webkit-perspective: none; /* Reducir coste de renderizado */
  }
  
  /* Eliminar cualquier estilo que pueda interferir con Framer Motion */
  .phone-3d-container[style*="transform:"] {
    transition: none !important; 
  }
  
  /* Optimización para Safari: reducir efectos 3D costosos */
  .phone-3d-inner {
    -webkit-transform: translate3d(0,0,0) !important; /* Forzar aceleración hardware */
    transform: translate3d(0,0,0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    width: 100vw;
    max-width: 100%;
  }
  
  .relative.text-white {
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Escalar textos para mejor legibilidad en móvil */
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  /* COMMENTED OUT - Was interfering with Tailwind classes
  p, li, span:not([class*="text-["])  {
    font-size: 0.95rem !important;
  }
  */
  
  /* Reducir padding y márgenes en móvil */
  .container, .px-6, .px-8, .px-10 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  
  /* Ajustes para teléfono mockup */
  .phone-3d-inner * {
    font-size: 90% !important;
  }
  
  /* Fix para overflow en controles */
  button, a {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
} 

/* Mejorar rendimiento en Safari */
.phone-3d-container {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,0);
}

.mobile-device .phone-3d-container {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  /* Optimizaciones adicionales para Safari en iPhone */
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.phone-3d-inner {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

/* Clase específica para Safari en iOS */
@supports (-webkit-touch-callout: none) {
  .phone-3d-container {
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
  }
  
  .phone-3d-inner {
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  /* Reducir animaciones en Safari iOS */
  .phone-3d-container {
    transition: none !important;
    animation: none !important;
  }
}