/* =====================================================================
   Ecuador Mountain Guides — Capa de pulido UI/UX (mejoras.css)
   Refina la propuesta visual existente SIN reemplazarla:
   foco accesible, micro-interacciones, consistencia y reduced-motion.
   Se carga DESPUÉS de style.css.
   ===================================================================== */

:root {
  --mge-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mge-dur: 240ms;
  --mge-ring: #14592c;
  --mge-shadow-md: 0 16px 36px rgba(22, 25, 32, 0.16);
}

/* 1) FOCO VISIBLE ACCESIBLE
   El tema hace `a:focus { outline: 0 }`, lo que rompe la navegación por
   teclado (WCAG 2.4.7). Restauramos un anillo visible solo para teclado. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.offcanvas-icon:focus-visible,
.navbar-toggler:focus-visible,
.background-button-prev:focus-visible,
.background-button-next:focus-visible {
  outline: 3px solid var(--mge-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 2) BOTONES — elevación sutil al interactuar (feedback claro) */
.btn {
  transition: transform var(--mge-dur) var(--mge-ease),
              box-shadow var(--mge-dur) var(--mge-ease),
              background-color var(--mge-dur) var(--mge-ease),
              color var(--mge-dur) var(--mge-ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--mge-shadow-md);
}
.btn:active {
  transform: translateY(0);
}

/* 3) CARDS — levitan y la imagen hace zoom contenido (microinteracción) */
.featured-destination-card,
.trip-card,
.blog-card-two {
  transition: transform var(--mge-dur) var(--mge-ease),
              box-shadow var(--mge-dur) var(--mge-ease);
}
.featured-destination-card:hover,
.trip-card:hover,
.blog-card-two:hover {
  transform: translateY(-6px);
  box-shadow: var(--mge-shadow-md);
}
/* contenedores con recorte para el zoom */
.trip-card { overflow: hidden; }
.blog-card-two .post-img { overflow: hidden; }
.featured-destination-card img,
.trip-card img,
.blog-card-two .post-img img {
  transition: transform 600ms var(--mge-ease);
  will-change: transform;
}
.featured-destination-card:hover img,
.trip-card:hover img,
.blog-card-two:hover .post-img img {
  transform: scale(1.06);
}

/* 4) ENLACES DE NAVEGACIÓN — transición de color consistente */
.navbar-nav a,
.footer-nav a,
.touria-dd-menu a,
.mge-text-link {
  transition: color var(--mge-dur) var(--mge-ease),
              opacity var(--mge-dur) var(--mge-ease);
}

/* 5) OBJETIVOS TÁCTILES — controles mínimos de 44×44px en móvil */
.background-button-prev,
.background-button-next,
.social-icons a,
.social-nav a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 6) FORMULARIOS — borde de foco suave en campos (coherente con la marca) */
.form-control:focus,
.touria-select:focus,
select:focus {
  border-color: var(--mge-ring);
  box-shadow: 0 0 0 3px rgba(20, 89, 44, 0.15);
}

/* 7) IMÁGENES — evita saltos de layout (reserva de espacio) */
img { height: auto; }

/* 8) RESPETA prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .featured-destination-card:hover,
  .trip-card:hover,
  .blog-card-two:hover {
    transform: none;
  }
  .featured-destination-card:hover img,
  .trip-card:hover img,
  .blog-card-two:hover .post-img img {
    transform: none;
  }
}