/* Animaciones al bajar (todas las páginas).
   Solo se ocultan si hay JS (html.js): sin script el contenido se ve igual.
   Transform, opacity y clip-path; curvas de salida fuertes; escalonado de ~70ms. */
:root{
  --m-out:cubic-bezier(.23,1,.32,1);
  --m-inout:cubic-bezier(.77,0,.175,1);
  --m-paso:70ms;
}
.js [data-m]{transition:opacity 700ms var(--m-out),transform 900ms var(--m-out),clip-path 1000ms var(--m-inout);transition-delay:calc(var(--i,0) * var(--m-paso))}
/* sube: títulos, textos, tarjetas */
.js [data-m="sube"]:not(.m-in){opacity:0;transform:translateY(28px)}
/* entra desde la izquierda: filas y líneas del titular */
.js [data-m="izq"]:not(.m-in){opacity:0;transform:translateX(-48px)}
/* se destapa de abajo hacia arriba: capturas y marcos */
.js [data-m="destapa"]:not(.m-in){clip-path:inset(0 0 100% 0)}
.js [data-m="destapa"].m-in{clip-path:inset(0 0 0 0)}
/* aparece con escala: piezas pequeñas */
.js [data-m="pop"]:not(.m-in){opacity:0;transform:scale(.85)}
/* el celular sube y se endereza */
.js [data-m="gira"]:not(.m-in){opacity:0;transform:translateY(60px) rotate(6deg)}
/* la raya de "Eso se acabó" se dibuja */
.js .corte::after{transform-origin:left center;transition:transform 1100ms var(--m-inout) 250ms}
.js .corte:not(.m-in)::after{transform:scaleX(0)}
/* los rombos del proceso giran a su lugar */
.js .paso::before{transition:transform 700ms var(--m-out) calc(var(--i,0) * var(--m-paso) + 150ms)}
.js .paso:not(.m-in)::before{transform:rotate(-135deg) scale(0.4)}

/* entrada del hero al cargar: en CSS para que no parpadee antes de que corra el script */
.js .hero h1,.js .hero p.lead,.js .hero .hero-ctas,.js .hero .hero-note,
.js .caso-hero .etiquetas,.js .caso-hero .marca-caso,.js .caso-hero h1,.js .caso-hero .lead,.js .caso-hero .acciones,
.js .hero-in h1,.js .hero-in p,.js .hero-in .cta-row{animation:m-carga 900ms var(--m-out) both}
.js .hero p.lead,.js .caso-hero .marca-caso,.js .hero-in p{animation-delay:90ms}
.js .hero .hero-ctas,.js .caso-hero h1,.js .hero-in .cta-row{animation-delay:180ms}
.js .hero .hero-note,.js .caso-hero .lead{animation-delay:270ms}
.js .caso-hero .acciones{animation-delay:360ms}
.js .portada{animation:m-destapa 1100ms var(--m-inout) 300ms both}
@keyframes m-carga{from{opacity:0;transform:translateY(24px)}}
@keyframes m-destapa{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  /* se conserva el cambio de opacidad, sin desplazamientos */
  .js [data-m]{transition:opacity 400ms ease!important;transform:none!important;clip-path:none!important}
  .js [data-m]:not(.m-in){opacity:0}
  .js .corte::after,.js .paso::before{transition:none;transform:none}
  .js .paso::before{transform:rotate(45deg)}
  .js .hero h1,.js .hero p.lead,.js .hero .hero-ctas,.js .hero .hero-note,.js .caso-hero .etiquetas,.js .caso-hero .marca-caso,.js .caso-hero h1,.js .caso-hero .lead,.js .caso-hero .acciones,.js .hero-in h1,.js .hero-in p,.js .hero-in .cta-row,.js .portada{animation:m-fade 400ms ease both}
  @keyframes m-fade{from{opacity:0}}
}