/* Movimiento — común al sitio raíz y a las presentaciones. Sutil a propósito (dirección editorial).
   .animar (en <html>), .revelar y .visible las agrega animaciones.js: sin JS, con
   «reducir movimiento» o al imprimir, todo se ve completo y quieto. */

/* entrada del hero */
.entrada{animation:entrada .9s var(--curva) both; animation-delay:var(--d, 0s);}
.escenario-fondo{animation:entrada-escala 1.1s var(--curva) both;}
.escenario-pack--izq{animation:entrada-pack 1s .25s var(--curva) both;}
.escenario-pack--der{animation:entrada-pack 1s .38s var(--curva) both;}
.escenario-pack--frente{animation:entrada-pack 1.1s .5s var(--curva) both, flotar 7s 1.8s ease-in-out infinite;}

/* aparición al hacer scroll — usa `translate` para no pisar los :hover, que usan transform */
.revelar{
  opacity:0; translate:0 18px;
  transition:opacity .8s var(--curva) var(--retardo, 0s), translate .8s var(--curva) var(--retardo, 0s),
             transform .45s var(--curva), box-shadow .45s var(--curva), background .25s, padding .25s;
}
.revelar.visible{opacity:1; translate:0 0;}

/* la línea de cada familia de productos se dibuja al aparecer */
.animar .linea-titulo.revelar::after{scale:0 1; transform-origin:left; transition:scale 1.2s var(--curva) .2s;}
.animar .linea-titulo.visible::after{scale:1 1;}

/* gráfico de rentabilidad: las barras crecen al verse */
.animar .margin-hero svg rect{transform-box:fill-box; transform-origin:left center; transform:scaleX(0); transition:transform 1s var(--curva);}
.animar .margin-hero svg rect:nth-of-type(2){transition-delay:.35s;}
.animar .margin-hero svg rect:nth-of-type(3){transition-delay:.7s;}
.animar .margin-hero.visible svg rect{transform:scaleX(1);}
.animar .margin-hero svg text{opacity:0; transition:opacity .6s ease 1s;}
.animar .margin-hero.visible svg text{opacity:1;}

@keyframes entrada{from{opacity:0; translate:0 20px;} to{opacity:1; translate:0 0;}}
@keyframes entrada-escala{from{opacity:0; scale:.94;} to{opacity:1; scale:1;}}
@keyframes entrada-pack{from{opacity:0; translate:0 40px;} to{opacity:1; translate:0 0;}}
@keyframes flotar{0%, 100%{translate:0 0;} 50%{translate:0 -10px;}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important; transition-duration:0s !important; transition-delay:0s !important;}
  .revelar{opacity:1; translate:none;}
}
@media print{
  *, *::before, *::after{animation:none !important; transition:none !important;}
  .revelar{opacity:1 !important; translate:none !important;}
  .animar .margin-hero svg rect{transform:none !important;}
  .animar .margin-hero svg text{opacity:1 !important;}
}