/* Liceo Acoxpa — movimiento del sitio.
   Vive fuera de las páginas exportadas por Claude Design; PUBLICAR.md lo conecta en cada copia.
   Reglas: solo opacity y translate/scale; nada queda oculto sin JavaScript
   (lo oculto lleva la clase .m-reveal, que solo pone motion.js); nada para prefers-reduced-motion. */

:root{
  --m-ease:cubic-bezier(.23,1,.32,1);      /* ease-out fuerte: arranca rápido, frena suave */
  --m-ease-pop:cubic-bezier(.34,1.4,.64,1); /* con un rebote mínimo, solo para cifras destacadas */
}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Aparición al hacer scroll (la clase la pone motion.js) ---------- */
  .m-reveal{opacity:0;translate:0 16px}
  .m-reveal.m-in{
    opacity:1;translate:0 0;
    transition:opacity 500ms var(--m-ease),translate 500ms var(--m-ease);
    transition-delay:var(--m-delay,0ms);
  }
  /* Variante más llamativa (sello del 94% en la promo) */
  .m-reveal.m-pop{scale:.94}
  .m-reveal.m-pop.m-in{
    scale:1;
    transition:opacity 500ms var(--m-ease),translate 500ms var(--m-ease),scale 600ms var(--m-ease-pop);
  }
  .m-reveal.m-pop.m-in b{animation:m-pop 520ms var(--m-ease-pop) 160ms both}
  .q-seal b{display:inline-block} /* para que el 94% pueda escalar; se aplica desde el primer pintado */

  /* ---------- Hero: arco de estrellas y foto principal (al cargar, sin depender de JS) ---------- */
  /* Si motion.js llega a tiempo, separa el arco y lo anima estrella por estrella; si no, el arco entero aparece solo. */
  .p-art .la-stars{animation:m-fade 320ms var(--m-ease) 380ms both}
  .p-art .la-stars .m-star{transform-box:fill-box;transform-origin:center}
  /* La foto se acomoda dentro de su marco; el bloque dorado (su sombra) no se mueve. */
  .p-art .la-photo.has-img img{animation:m-settle 600ms var(--m-ease) both}

  /* ---------- Promo: el 70% entra con un poco más de presencia ---------- */
  .q-hero__text .q-offer__item{animation:m-rise 480ms var(--m-ease) both}
  .q-hero__text .q-offer__item + .q-offer__item{animation-delay:90ms}
  .q-hero__text .q-offer__item--oro b{animation:m-pop 560ms var(--m-ease-pop) 180ms both}

  /* ---------- Hover y presión: solo con mouse ---------- */
  @media (hover:hover) and (pointer:fine){
    .la-btn{transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,translate 200ms var(--m-ease),scale 160ms var(--m-ease)}
    .la-btn:hover{translate:0 -1px}
    .la-btn:active{translate:0 0;scale:.97}
    .la-card,.q-video{transition:box-shadow .2s ease,translate 240ms var(--m-ease),scale 160ms var(--m-ease)}
    .la-card:hover,.q-video:hover{translate:0 -3px}
    .la-card:active,.q-video:active{scale:.99}
  }
}

@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes m-pop{from{scale:.82}to{scale:1}}
@keyframes m-settle{from{translate:0 8px;scale:1.08}to{translate:0 0;scale:1}}

/* Al imprimir, todo visible pase lo que pase */
@media print{.m-reveal{opacity:1!important;translate:none!important;scale:none!important}}