/* Archivo de estilos personalizados para JSTUDIOSPANAMA */

/* Importación de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.font-inter {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    letter-spacing: 0.01em;
    font-size: 1.05em;
    font-weight: 400;
}

/* Animaciones personalizadas para JSTUDIOSPANAMA */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slide-right {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Animaciones independientes para cada carrusel de logos */
@keyframes carousel-logos-zscan {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes carousel-logos-medida {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes carousel-logos-soporte {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-carousel-logos {
  animation: carousel-logos 40s linear infinite;
}
.animate-carousel-logos-zscan {
  animation: carousel-logos-zscan 40s linear infinite;
  will-change: transform;
  display: flex;
}
.animate-carousel-logos-medida {
  animation: carousel-logos-medida 32s linear infinite;
  will-change: transform;
  display: flex;
}
.animate-carousel-logos-soporte {
  animation: carousel-logos-soporte 28s linear infinite;
  will-change: transform;
  display: flex;
}

/* Mejora para efecto continuo: evita salto visible al reiniciar la animación */
#carousel-logos-zscan, #carousel-logos-medida, #carousel-logos-soporte {
  min-width: 200%; /* El doble del ancho visible para que el bucle sea perfecto */
  width: max-content;
}

/* Opcional: oculta el scrollbar horizontal si aparece */
#carousel-logos-zscan::-webkit-scrollbar,
#carousel-logos-medida::-webkit-scrollbar,
#carousel-logos-soporte::-webkit-scrollbar {
  display: none;
}

/* Responsive helpers y mejoras visuales */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #carousel-logos img { height: 48px; }
  #carousel-logos { gap: 2rem; }
}

/* Mejora para el menú móvil: transición suave */
#mobileMenu {
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

/* Mejora para inputs del formulario */
input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #60a5fa33;
}

input.border-green-400, textarea.border-green-400 {
  border-color: #4ade80 !important;
}
input.border-red-400, textarea.border-red-400 {
  border-color: #f87171 !important;
}

/* Mejora para selects del formulario */
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #60a5fa33;
}
select.border-green-400 {
  border-color: #4ade80 !important;
}
select.border-red-400 {
  border-color: #f87171 !important;
}

/* Mejora visual para el formulario moderno */
#contactForm {
  box-shadow: 0 8px 32px 0 rgba(30,64,175,0.10), 0 1.5px 4px 0 rgba(30,64,175,0.08);
  border: 1px solid #e0e7ef;
}

/* Mejora para el botón del formulario */
button[type="submit"]:active {
  transform: scale(0.97);
}

/* Duplicar el contenido para efecto infinito en carrusel Zscan */
#carousel-logos-zscan {
  /* Duplicar el contenido para efecto infinito */
}

/* Duplicar tarjetas en HTML para efecto visual */