/* Econstrucciones - Estilos personalizados */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, .font-heading {
  font-family: 'Montserrat', sans-serif;
}
* {
  -webkit-tap-highlight-color: transparent;
}
img {
  max-width: 100%;
  height: auto;
}

/* Efecto Ken Burns para slider hero */
.kenburns {
  animation: kenburns 8s infinite alternate ease-in-out;
}
@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Permite scroll vertical fluido mientras se detectan gestos táctiles horizontales */
#slider-container {
  touch-action: pan-y;
}

/* Focus visible para accesibilidad con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #059669;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Área segura para el botón flotante en celulares con notch (iPhone) */
#whatsapp-float {
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  right: calc(1.25rem + env(safe-area-inset-right));
}
@media (max-width: 380px) {
  #whatsapp-float {
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    right: 0.85rem;
  }
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .kenburns {
    animation: none;
  }
  .animate-ping {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Mejoras de formulario en móvil */
@media (max-width: 640px) {
  input, textarea, select, button {
    font-size: 16px; /* Previene zoom automático en iOS */
  }
}

/* Colores de marca y efectos para redes sociales */
.social-btn {
  transition: all 0.25s ease-in-out;
}
.social-btn:hover {
  transform: translateY(-2px);
}
.social-btn-facebook:hover {
  background-color: #1877F2 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);
}
.social-btn-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(214, 36, 159, 0.35);
}
.social-btn-linkedin:hover {
  background-color: #0A66C2 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.35);
}
.social-btn-whatsapp:hover {
  background-color: #25D366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}