/* Motion de la página de Páginas web. Se activa con la clase .mw que pone js/motion-web.js (nunca con "reducir movimiento"). */

/* Barra de progreso de lectura */
.mw-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #8F7430, #E8C96A 60%, #C9A84C); box-shadow: 0 0 12px rgba(232,201,106,.6); pointer-events: none; }

/* Títulos que suben palabra por palabra desde una máscara */
.mw .mw-p { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.mw .mw-pi { display: inline-block; transform: translateY(110%) rotate(5deg); transform-origin: 0 100%;
  transition: transform 1.05s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 55ms); }
.mw .mw-in .mw-pi { transform: none; }
/* Brillo que recorre el dorado del titular */
.mw .hero-content h1 em .mw-pi, .mw .hero-content h1 [style*="gold"] .mw-pi {
  background: linear-gradient(100deg, #C9A84C 30%, #FFF0B8 48%, #C9A84C 66%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mw-brillo 4.5s linear infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes mw-brillo { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* Portada: polvo dorado y luz que sigue el mouse */
.mw-polvo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.mw-foco { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--sx, 70%) var(--sy, 40%), rgba(201,168,76,.16), transparent 62%); }
.hero-landing:hover .mw-foco, [data-mw-polvo]:hover .mw-foco { opacity: 1; }
@media (min-width: 1101px) { .mw .lc-pw-hero { transform: translateY(calc(-44% + var(--mw-y, 0px))); } }

/* Cursor: punto y anillo dorado que lo sigue */
.mw-punto, .mw-aro { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.mw-punto { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #E8C96A; }
.mw-aro { width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 1px solid rgba(232,201,106,.75);
  transition: opacity .3s, width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s; }
.mw-activo .mw-punto, .mw-activo .mw-aro { opacity: 1; }
.mw-aro.mw-sobre { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: rgba(201,168,76,.12); border-color: #E8C96A; }

/* Botones: destello que los recorre */
.mw .btn-glow, .mw .btn-gold, .mw .lc-cta { position: relative; overflow: hidden; }
.mw .btn-glow::after, .mw .btn-gold::after, .mw .lc-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: mw-destello 4.2s ease-in-out infinite; }
@keyframes mw-destello { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }

/* Tarjetas que se inclinan con el mouse y reflejan la luz */
.mw-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.mw-tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(232,201,106,.16), transparent 55%); }
.mw-tilt:hover::before { opacity: 1; }

/* Línea dorada que une los pasos y se dibuja al bajar */
.mw-linea { position: absolute; height: 2px; z-index: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none;
  background: linear-gradient(90deg, rgba(201,168,76,.15), #E8C96A); box-shadow: 0 0 14px rgba(232,201,106,.55); }
.mw-linea::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #FFF0B8; box-shadow: 0 0 18px 4px rgba(232,201,106,.8); }
.process-grid .card { position: relative; z-index: 1; }

/* Franjas de texto gigante que se deslizan */
.mw-cinta { overflow: hidden; padding: 26px 0; background: #0C0C0B; border-top: 1px solid rgba(201,168,76,.18); border-bottom: 1px solid rgba(201,168,76,.18); }
.mw-cinta-pista { display: flex; width: max-content; will-change: transform; }
.mw-cinta-pista span { display: flex; align-items: center; gap: 48px; padding-right: 48px; white-space: nowrap; font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  font-size: clamp(42px, 7vw, 104px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.6); }
.mw-cinta-pista b { color: #C9A84C; -webkit-text-stroke: 0; font-style: italic; }
.mw-cinta-pista i { font-style: normal; color: #C9A84C; -webkit-text-stroke: 0; font-size: .45em; }