/* ============================================================
   MOTION LAYER v3 · PROPUESTAS2 — RADICAL · motion continuo visible
   Se carga DESPUÉS de styles.css. Colores vía --m-* (fijados por motion.js).
   Respeta prefers-reduced-motion.
   ============================================================ */

/* ============ 0. Preloader de marca ============ */
.m-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; background: var(--m-bg, #0d0d0d);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), visibility .8s;
}
.m-loader.m-done { opacity: 0; visibility: hidden; }
.m-loader-mark { font-size: 64px; line-height: 1; animation: m-pulse 1.1s cubic-bezier(.16,1,.3,1) infinite; filter: drop-shadow(0 0 22px var(--m-accent)); }
@keyframes m-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.m-loader-word { font-weight: 800; font-size: clamp(1.5rem, 6vw, 2.6rem); letter-spacing: -.02em; color: var(--m-ink, #fff); overflow: hidden; }
.m-loader-word > span { display: inline-block; transform: translateY(130%) rotate(6deg); animation: m-rise .85s cubic-bezier(.16,1,.3,1) forwards; }
.m-loader-bar { width: min(300px, 72vw); height: 4px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--m-accent) 18%, transparent); }
.m-loader-bar > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2, var(--m-accent))); border-radius: 99px; animation: m-load 1.15s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes m-load { to { width: 100%; } }

/* ============ 1. Barra de progreso de scroll ============ */
.m-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9998; background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2, var(--m-accent))); box-shadow: 0 0 14px var(--m-accent); transition: width .1s linear; }

/* ============ 2. Cursor personalizado (desactivado) ============ */
.m-cursor-dot, .m-cursor-ring { display: none !important; }

/* ============ 3. MARQUESINA en movimiento continuo ============ */
.m-marquee {
  position: relative; overflow: hidden; width: 100%;
  background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2, var(--m-accent)));
  padding: 15px 0; z-index: 5;
}
.m-marquee-track { display: flex; width: max-content; animation: m-marquee 24s linear infinite; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
.m-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.m-marquee-group span { display: flex; align-items: center; gap: 22px; padding: 0 22px; color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; }
.m-marquee-group span::after { content: '✦'; opacity: .8; }
@keyframes m-marquee { to { transform: translateX(-50%); } }

/* ============ 4. KEN BURNS en imágenes del hero (zoom continuo) ============ */
.m-kenburns { overflow: hidden; }
.m-kenburns img, .m-kenburns video {
  animation: m-kenburns 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes m-kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1.5%, -2%); }
  100% { transform: scale(1.2) translate(1.5%, 2%); }
}

/* ============ 5. Botones CTA pulsando (glow continuo) ============ */
.m-pulse { animation: m-pulse-glow 2.4s ease-in-out infinite; }
@keyframes m-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m-accent) 50%, transparent), 0 10px 28px color-mix(in srgb, var(--m-accent) 35%, transparent); }
  50%      { box-shadow: 0 0 0 16px transparent, 0 16px 44px color-mix(in srgb, var(--m-accent) 60%, transparent); }
}

/* ============ 6. Tarjetas flotando (bob continuo) ============ */
.m-float { animation: m-float-y 4.5s ease-in-out infinite; }
@keyframes m-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============ 7. Flecha de scroll (rebote continuo) ============ */
.m-scroll-hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--m-ink, #333); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  animation: m-bob 1.7s ease-in-out infinite;
}
.m-scroll-hint::after { content: '⌄'; font-size: 1.6rem; line-height: 1; margin-top: 2px; }
@keyframes m-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }

/* ============ 8. Reveals MUY dramáticos ============ */
.reveal {
  opacity: 0 !important;
  transform: translateY(90px) scale(.82) rotate(-2deg) !important;
  filter: blur(14px) !important;
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1) !important;
  transition-delay: var(--m-delay, 0s);
  will-change: opacity, transform, filter;
}
.reveal.visible { opacity: 1 !important; transform: none !important; filter: none !important; }

[data-motion] {
  opacity: 0; transform: translateY(100px) scale(.8); filter: blur(16px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--m-delay, 0s);
  will-change: opacity, transform, filter;
}
[data-motion="left"]  { transform: translateX(-120px) rotate(-4deg) scale(.8); }
[data-motion="right"] { transform: translateX(120px) rotate(4deg) scale(.8); }
[data-motion="zoom"]  { transform: scale(.5); }
[data-motion="flip"]  { transform: perspective(900px) rotateX(30deg) translateY(60px); }
[data-motion].m-in { opacity: 1; transform: none; filter: none; }

/* ============ 9. Tilt 3D + glow ============ */
.m-tilt { transform-style: preserve-3d; transition: transform .16s ease-out, box-shadow .5s ease; will-change: transform; position: relative; }
.m-tilt:hover { box-shadow: 0 34px 70px -20px color-mix(in srgb, var(--m-accent) 45%, rgba(0,0,0,.5)); }
.m-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 0 var(--m-accent); opacity: 0; transition: opacity .5s, box-shadow .5s; }
.m-tilt:hover::after { opacity: .22; box-shadow: inset 0 0 0 2px var(--m-accent); }

/* ============ 10. Shine en botones ============ */
.m-shine { position: relative; overflow: hidden; }
.m-shine::after { content: ''; position: absolute; top: -20%; left: -160%; width: 55%; height: 140%; background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.75) 50%, transparent 88%); transform: skewX(-22deg); }
.m-shine:hover::after { animation: m-shine .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes m-shine { to { left: 200%; } }

/* ============ 11. Zoom de imagen ============ */
.m-zoom { overflow: hidden; }
.m-zoom img { transition: transform .9s cubic-bezier(.16,1,.3,1), filter .9s; }
.m-zoom:hover img { transform: scale(1.16) rotate(.8deg); filter: brightness(1.05) saturate(1.1); }

/* ============ 12. Texto con gradiente animado (titulares) ============ */
.m-gradient-text {
  background: linear-gradient(100deg, var(--m-accent) 10%, var(--m-accent-2, var(--m-accent)) 40%, var(--m-accent) 70%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: m-grad 4.5s linear infinite;
}
@keyframes m-grad { to { background-position: 220% center; } }

/* ============ 13. Reveal de palabras del hero ============ */
.m-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; }
.m-word > span { display: inline-block; transform: translateY(135%) rotate(7deg); filter: blur(6px); animation: m-rise 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes m-rise { to { transform: translateY(0) rotate(0); filter: blur(0); } }

/* ============ 14. Orbes flotantes (colores de marca) ============ */
.m-hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(12px); opacity: .26; animation: m-float-orb 9s ease-in-out infinite alternate; }
@keyframes m-float-orb { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50% { transform: translate(34px,-44px) scale(1.25) rotate(14deg); } 100% { transform: translate(-28px,34px) scale(.88) rotate(-10deg); } }

/* ============ 15. Fondo hero con gradiente animado ============ */
.hero::before, .page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 18% 22%, color-mix(in srgb, var(--m-accent) 16%, transparent), transparent 70%),
    radial-gradient(40% 52% at 85% 75%, color-mix(in srgb, var(--m-accent-2, var(--m-accent)) 15%, transparent), transparent 70%);
  animation: m-bgshift 12s ease-in-out infinite alternate;
}
@keyframes m-bgshift { 0% { background-position: 0% 0%, 0% 0%; } 100% { background-position: 60% 40%, -40% -20%; } }

/* ============ 16. Elevación de tarjetas ============ */
.m-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.m-lift:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 30px 60px -22px rgba(0,0,0,.35); }

/* ============ 17. Subrayado animado en enlaces ============ */
.m-underline { background-image: linear-gradient(var(--m-accent), var(--m-accent)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size .45s cubic-bezier(.16,1,.3,1); }
.m-underline:hover { background-size: 100% 2px; }

/* ============ 18. Transición de vista (SPA hash) ============ */
.m-view-enter { animation: m-view .65s cubic-bezier(.16,1,.3,1); }
@keyframes m-view { from { opacity: 0; transform: translateY(34px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ============ 19. Aparición al cargar ============ */
body.m-boot main, body.m-boot .hero { animation: m-boot 1.1s cubic-bezier(.16,1,.3,1); }
@keyframes m-boot { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ============ 20. Botón "volver arriba" ============ */
.m-top { position: fixed; right: 22px; bottom: 22px; z-index: 9000; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 22px; background: var(--m-accent); color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--m-accent) 55%, transparent); opacity: 0; transform: translateY(20px) scale(.7); pointer-events: none; transition: opacity .4s, transform .4s cubic-bezier(.16,1,.3,1); }
.m-top.m-show { opacity: 1; transform: none; pointer-events: auto; }
.m-top:hover { transform: translateY(-4px) scale(1.06); }

/* ============ Accesibilidad ============ */
@media (prefers-reduced-motion: reduce) {
  .m-loader { display: none !important; }
  .m-progress, .m-cursor-dot, .m-cursor-ring, .m-hero-orb, .m-top, .m-scroll-hint { display: none !important; }
  .m-marquee-track, .m-kenburns img, .m-kenburns video, .m-pulse, .m-float, .m-gradient-text,
  .m-word > span, .m-shine::after, .m-view-enter, .m-boot, .m-bgshift, .m-loader-mark, .m-loader-bar > i,
  .hero::before, .page-hero::before { animation: none !important; }
  .reveal, [data-motion] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .m-word > span { transform: none !important; filter: none !important; }
}