/* =============================================================
   PRODEMAC — TOKENS DE MOTION (fuente única)
   Personalidad: enérgica y técnica · Nivel: medio
   Ningún componente usa duraciones o curvas sueltas: todo sale de aquí.
   Ver MOTION.md en la raíz del tema.
   ============================================================= */
:root {
  /* Duraciones */
  --motion-fast: 120ms;      /* hover, color, press */
  --motion-base: 200ms;      /* estados de botón, toggles */
  --motion-slow: 350ms;      /* drawers, modales, tarjetas */
  --motion-slower: 600ms;    /* reveals, celebraciones */
  --motion-intro: 900ms;     /* preloader y entradas de primera visita */

  /* Curvas */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* entradas: arranca rápido, frena suave */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);        /* salidas: acelera al irse */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* movimientos de un punto a otro */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote leve (marca enérgica) */

  /* Bucles (solo en elementos pequeños y pausables) */
  --loop-shimmer: 1200ms;
  --loop-spin: 700ms;
  --loop-ambient: 8s;

  /* Retardos */
  --stagger: 50ms;           /* entrada escalonada de listas */
  --intent-delay: 100ms;     /* mega menú: evita aperturas accidentales */
  --success-hold: 1500ms;    /* cuánto se muestra "Agregado" */

  /* Color */
  --color-primary: #F8B808;
  --color-primary-ink: #111214;   /* texto sobre el primario: contraste 11:1 */
  --color-success: #2D7A1F;
  --color-danger: #C8140C;

  /* Alias heredados (los componentes existentes los usan) */
  --pm-ease: var(--ease-in-out);
  --pm-ease-out: var(--ease-out);

  /* Alto del header sticky (lo actualiza header.js) */
  --header-h: 120px;
}

/* =============================================================
   DETALLES GLOBALES
   ============================================================= */
::selection { background: var(--color-primary); color: var(--color-primary-ink); }

html { scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

input, textarea, [contenteditable] { caret-color: var(--color-primary-ink); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--color-primary-ink); }

/* Scrollbar delgada solo con mouse; en táctil queda la nativa */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--color-primary) #ECEFF2; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: #ECEFF2; }
  ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 10px; border: 2px solid #ECEFF2; }
  ::-webkit-scrollbar-thumb:hover { background: #E0A506; }
  .pm-dark ::-webkit-scrollbar-track, .pm-lightbox ::-webkit-scrollbar-track { background: #1b1e22; }
}

/* Táctil: sin el destello gris del navegador, con un :active propio */
@media (hover: none) and (pointer: coarse) {
  a, button, summary, label, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
  .pm-card:active, .pm-goal:active, .pm-dash__link:active, .pm-trust__item:active, .pm-chip:active, .pm-action:active, .pm-mega__feature:active {
    transform: scale(0.98); transition: transform var(--motion-fast) var(--ease-out);
  }
  /* En táctil no existe hover: se anulan elevaciones que quedarían "pegadas" tras tocar */
  .pm-card:hover, .pm-goal:hover, .pm-dash__link:hover, .pm-trust__item:hover, .pm-btn:hover,
  .pm-mega__feature:hover, .pm-tier:hover, .pm-gallery__thumb:hover, .pm-gallery__nav:hover { transform: none; box-shadow: none; }
  .pm-card:hover .pm-card__media img { transform: none; }
}

/* =============================================================
   UTILIDADES REUTILIZABLES
   ============================================================= */
.pm-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sacudida horizontal (errores, límites) */
@keyframes pm-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.pm-is-shaking { animation: pm-shake var(--motion-slow) var(--ease-out); }

/* Pop (badges, contadores) */
@keyframes pm-pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Número que rueda: el valor nuevo entra desde abajo */
.pm-roll { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.pm-roll__inner { display: inline-block; animation: pm-roll-in var(--motion-slow) var(--ease-out); }
.pm-roll--down .pm-roll__inner { animation-name: pm-roll-in-down; }
@keyframes pm-roll-in { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pm-roll-in-down { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Check dibujado con stroke-dashoffset */
.pm-check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pm-draw var(--motion-slow) var(--ease-out) forwards; }
@keyframes pm-draw { to { stroke-dashoffset: 0; } }

/* Revelado al hacer scroll (una sola vez) */
.pm-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-slower) var(--ease-out), transform var(--motion-slower) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.pm-reveal.is-in { opacity: 1; transform: none; }

/* =============================================================
   MOVIMIENTO REDUCIDO: sin desplazamientos, parallax ni bucles
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; --motion-slower: 1ms; --motion-intro: 1ms; --stagger: 0ms; }
  .pm-reveal { opacity: 1; transform: none; }
  .pm-is-shaking { animation: none; }
  .pm-roll__inner { animation: none; }
  .pm-check-draw path { animation: none; stroke-dashoffset: 0; }
}