/* ============================================================
   MÉXICO EN TR – ESTILOS PERSONALIZADOS
   Se apoya en Tailwind CSS; solo definiciones que extienden
   o refinan el aspecto visual del sitio.
   ============================================================ */

/* Suavizado de scroll para anclas */
html {
  scroll-behavior: smooth;
}

/* Ajustes tipográficos globales */
body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Sombras dinámicas para la barra de navegación al hacer scroll */
#navbar.scrolled {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}

/* Imágenes con efecto de esquinas redondeadas + sombra suave (ya aplicado con clases de Tailwind,
   pero reforzamos para imágenes dentro de las tarjetas de sección) */
img.rounded-3xl {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s ease;
}

section:hover img.rounded-3xl {
  transform: scale(1.02) rotate(0deg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Línea decorativa en hover para los enlaces de las listas */
li i {
  transition: transform 0.3s ease;
}
li:hover i {
  transform: translateX(4px);
}

/* Personalización del scrollbar (opcional, estética limpia) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* Animación de entrada suave para las secciones (se activa con JS) */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Transición para el menú móvil */
#mobile-menu {
  transition: max-height 0.4s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu:not(.hidden) {
  max-height: 500px;
  opacity: 1;
}