/*
 * Capa de movimiento de las landings de diseno web (paginas 14470 y 14471).
 * Vocabulario portado de la propuesta de Puro Surf. Todo cuelga de .lwm, y
 * casi todo se activa con .lwm-motion, que solo pone el JS: si el JS no llega,
 * la pagina se ve entera y quieta en vez de quedarse en blanco.
 */

/* Estado inicial, puesto desde el head con la clase lwm-js para que no se vea
   el salto de colocar la mascara ni un parpadeo de contenido antes del reveal.
   El propio snippet del head retira lwm-js si a los 5 s la capa no arranco. */
html.lwm-js .lwm [data-mo]{opacity:0}
html.lwm-js .lwm h1,
html.lwm-js .lwm h2{opacity:0}

/* Barra de lectura */
.lwm-progreso{
  position:fixed;top:0;left:0;z-index:99990;
  width:100%;height:3px;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#7C4DBE 0%,#B9A0FF 55%,#7C4DBE 100%);
  pointer-events:none;will-change:transform;
}

/* Mascara de titulos: el texto sube desde debajo de su propia linea base */
.lwm .lwm-mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.lwm .lwm-mask>span{display:block;will-change:transform}

/* Levantar al pasar el cursor */
.lwm .razon,
.lwm .celda,
.lwm .pista figure{
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  .lwm.lwm-motion .razon:hover,
  .lwm.lwm-motion .celda:hover{transform:translateY(-5px);box-shadow:0 28px 46px -30px rgba(36,28,54,.42)}
  .lwm.lwm-motion .pista figure:hover{transform:translateY(-6px);box-shadow:0 30px 52px -30px rgba(36,28,54,.45)}
}

/* Foco de luz que sigue al cursor dentro del bento */
.lwm.lwm-motion .razon{position:relative;overflow:hidden}
.lwm.lwm-motion .razon::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(124,77,190,.14),transparent 62%);
}
.lwm.lwm-motion .razon--ancha::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(185,160,255,.17),transparent 62%);
}
@media (hover:hover) and (pointer:fine){
  .lwm.lwm-motion .razon:hover::after{opacity:1}
}

/* El parallax de las fotos lo compone GSAP; aqui solo se recorta */
.lwm .foto{overflow:hidden}
.lwm.lwm-motion .foto img{will-change:transform}

.lwm.lwm-motion .btn,
.lwm.lwm-motion .lp-enviar,
.lwm.lwm-motion .flechas button{will-change:transform}

/* Acordeon de preguntas: el alto lo anima GSAP sobre este envoltorio */
.lwm .lwm-faq-cuerpo{overflow:hidden}
.lwm.lwm-motion details[open] p{animation:none}
.lwm.lwm-motion details summary{transition:color .3s cubic-bezier(.22,1,.36,1)}

@media (prefers-reduced-motion:reduce){
  .lwm-progreso{display:none}
  .lwm .lwm-mask>span{transform:none!important}
  .lwm.lwm-motion .razon:hover,
  .lwm.lwm-motion .celda:hover,
  .lwm.lwm-motion .pista figure:hover{transform:none}
}