/* ============================================
   🔧 FIX PARA SCROLL CON HEADERS STICKY
   ============================================ */

/* Configuración base para scroll suave */
html {
  scroll-behavior: smooth;
}

/* Compensación para header sticky en diferentes tamaños de pantalla */
body {
  scroll-padding-top: 120px; /* Valor base para pantallas grandes */
}

/* Pantallas medianas */
@media (max-width: 1024px) and (min-width: 769px) {
  body {
    scroll-padding-top: 100px;
  }
}

/* Tablets */
@media (max-width: 768px) and (min-width: 481px) {
  body {
    scroll-padding-top: 80px;
  }
}

/* Pantallas pequeñas donde el header no es sticky */
@media (max-width: 480px) {
  body {
    scroll-padding-top: 20px;
  }
}

/* Asegurar que los elementos ancla tengan suficiente espacio */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], a[id] {
  scroll-margin-top: 120px; /* Valor base */
}

/* Ajustes responsivos para scroll-margin */
@media (max-width: 1024px) and (min-width: 769px) {
  h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], a[id] {
    scroll-margin-top: 100px;
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], a[id] {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 480px) {
  h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], a[id] {
    scroll-margin-top: 20px;
  }
}

/* Mejora para navegadores que no soportan scroll-padding-top */
@supports not (scroll-padding-top: 120px) {
  body {
    padding-top: 0;
  }
  
  /* Fallback para navegadores antiguos */
  .sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  
  /* Agregar padding al contenido principal para compensar el header fijo */
  #content {
    padding-top: 120px;
  }
  
  @media (max-width: 1024px) and (min-width: 769px) {
    #content {
      padding-top: 100px;
    }
  }
  
  @media (max-width: 768px) and (min-width: 481px) {
    #content {
      padding-top: 80px;
    }
  }
  
  @media (max-width: 480px) {
    #content {
      padding-top: 20px;
    }
  }
}

/* Asegurar que el scroll sea suave en todos los navegadores */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Para usuarios que prefieren movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}