/* ============================================================
   upgrade.css — capa de micro-interacciones premium (progressive enhancement)
   No cambia estructura ni colores de marca; solo profundidad háptica + física de motion.
   Solo transform/opacity/box-shadow. Respeta prefers-reduced-motion.
   ============================================================ */

/* ---------- CTA "isla" con flecha en su propio círculo (button-in-button) ---------- */
.btn--accent, .btn--primary {
  transition: transform .5s cubic-bezier(.32,.72,0,1), box-shadow .5s cubic-bezier(.32,.72,0,1), filter .3s ease;
}
/* :active da feedback de pulsación (funciona bien en táctil, es momentáneo) */
.btn--accent:active, .btn--primary:active { transform: scale(.975); }
.btn__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 11px; margin-right: -6px; border-radius: 999px;
  background: rgba(255,255,255,.22); font-size: .95em; line-height: 1;
  transition: transform .5s cubic-bezier(.32,.72,0,1), background .35s ease;
}
/* botón fantasma: círculo sobre fondo cálido tenue */
.btn--ghost .btn__ico { background: rgba(107,44,30,.12); }

.citynav-card, .exp-card, .testimonial {
  transition: transform .6s cubic-bezier(.32,.72,0,1), box-shadow .6s cubic-bezier(.32,.72,0,1);
}
.testimonial {
  box-shadow: 0 1px 2px rgba(38,22,12,.04), 0 20px 44px -26px rgba(38,22,12,.20),
              inset 0 1px 0 rgba(255,255,255,.6);
}
.citynav-card { overflow: hidden; }
.citynav-card img { transition: transform .8s cubic-bezier(.32,.72,0,1); }

/* ---------- Efectos de HOVER solo en dispositivos con puntero real (no se pegan al tocar) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover, .btn--primary:hover { transform: translateY(-2px); }
  .btn--accent:hover .btn__ico, .btn--primary:hover .btn__ico { transform: translate(3px,-1px) scale(1.09); background: rgba(255,255,255,.34); }
  .btn--ghost:hover .btn__ico { background: rgba(107,44,30,.20); }
  .citynav-card:hover, .exp-card:hover { transform: translateY(-8px) scale(1.008); box-shadow: 0 2px 4px rgba(38,22,12,.05), 0 44px 76px -30px rgba(38,22,12,.40); }
  .citynav-card:hover img { transform: scale(1.06); will-change: transform; }
  .testimonial:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(38,22,12,.06), 0 40px 70px -30px rgba(38,22,12,.30), inset 0 1px 0 rgba(255,255,255,.7); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--accent, .btn--primary, .btn__ico, .citynav-card, .exp-card, .testimonial, .citynav-card img { transition: none !important; }
}