/* ==========================================================================
   Muvox landing — rediseño (compartido por versiones B y C)
   General Sans + animaciones de entrada + micro-interacciones
   ========================================================================== */

@font-face { font-family: "GeneralSans"; src: url("../../assets/fonts/GeneralSans-Light.otf") format("opentype");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "GeneralSans"; src: url("../../assets/fonts/GeneralSans-Regular.otf") format("opentype");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GeneralSans"; src: url("../../assets/fonts/GeneralSans-Medium.otf") format("opentype");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GeneralSans"; src: url("../../assets/fonts/GeneralSans-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "GeneralSans"; src: url("../../assets/fonts/GeneralSans-Bold.otf") format("opentype");     font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: "GeneralSans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Scroll reveal (progressive enhancement: solo se oculta si hay JS) --- */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --- Botones: empuje táctil --- */
.btn-push { transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); }
.btn-push:hover { transform: translateY(-2px); }
.btn-push:active { transform: translateY(0) scale(0.985); }

/* --- Tarjetas con lift en hover --- */
.lift { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.lift:hover { transform: translateY(-6px); }

/* --- Badges de tienda --- */
.store-badge { transition: transform 0.2s var(--ease-out); }
.store-badge:hover { transform: translateY(-3px); }

/* --- Nav: fondo al hacer scroll --- */
.nav-scrolled { backdrop-filter: saturate(140%) blur(8px); }

/* --- Phosphor sizing helper --- */
.ico { line-height: 1; display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn-push, .lift, .store-badge { transition: none; }
  .btn-push:hover, .lift:hover, .store-badge:hover { transform: none; }
}