/* Estados iniciales solo con html.anim-on; se usan translate/rotate/scale individuales para no pisar el transform de cada bloque. */
.anim-trazo { position: absolute; left: 0; bottom: -0.35em; width: 100%; height: 0.4em; overflow: visible; pointer-events: none; }
.anim-trazo path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.anim-subrayado { position: relative; }
.anim-palabra { display: inline-block; white-space: nowrap; }
.anim-letra { display: inline-block; }
.anim-numero { font-variant-numeric: tabular-nums; }

html.anim-on .anim,
html.anim-on .anim .anim-letra,
html.anim-on .anim-palabras .anim-palabra {
    transition: opacity .8s ease, translate .9s cubic-bezier(.2,.8,.2,1), rotate .9s cubic-bezier(.2,.8,.2,1), scale .9s cubic-bezier(.3,1.4,.5,1), clip-path 1.1s cubic-bezier(.7,0,.2,1), filter .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
    transition-delay: calc(var(--ai, 0) * 110ms);
}
html.anim-on .anim .anim-letra,
html.anim-on .anim-palabras .anim-palabra { transition-delay: calc(var(--ai, 0) * 110ms + var(--li, 0) * 35ms); }

html.anim-on .anim-letras:not(.anim-in) .anim-letra { opacity: 0; translate: 0 0.6em; rotate: 12deg; }
html.anim-on .anim-palabras:not(.anim-in) .anim-palabra { opacity: 0; translate: 0 0.8em; }
html.anim-on .anim-wipe:not(.anim-in) { clip-path: inset(0 100% 0 0); }
html.anim-on .anim-wipeup:not(.anim-in) { clip-path: inset(100% 0 0 0); translate: 0 24px; }
html.anim-on .anim-circulo:not(.anim-in) { clip-path: circle(0% at 50% 50%); }
html.anim-on .anim-circulo.anim-in { clip-path: circle(120% at 50% 50%); }
html.anim-on .anim-diagonal:not(.anim-in) { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
html.anim-on .anim-diagonal.anim-in { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); }
html.anim-on .anim-mascara:not(.anim-in) { clip-path: inset(18% 18% 18% 18% round 24px); scale: 1.15; }
html.anim-on .anim-blur:not(.anim-in) { opacity: 0; filter: blur(12px); scale: 1.04; }
html.anim-on .anim-flip:not(.anim-in) { opacity: 0; transform: perspective(900px) rotateX(-70deg); transform-origin: 50% 0; }
html.anim-on .anim-abanico:not(.anim-in) { opacity: 0; rotate: calc((var(--ai, 0) - 1) * -9deg); translate: 0 80px; transform-origin: 50% 120%; }
html.anim-on .anim-cascada:not(.anim-in) { opacity: 0; translate: 0 90px; }
html.anim-on .anim-pop:not(.anim-in) { opacity: 0; scale: .6; }
html.anim-on .anim-skew:not(.anim-in) { opacity: 0; transform: skewY(7deg); translate: 0 40px; }
html.anim-on .anim-desliza:nth-child(odd):not(.anim-in) { opacity: 0; translate: -90px 0; }
html.anim-on .anim-desliza:nth-child(even):not(.anim-in) { opacity: 0; translate: 90px 0; }
html.anim-on .anim-subrayado:not(.anim-in) .anim-trazo path { stroke-dashoffset: 1; }
html.anim-on .anim-subrayado .anim-trazo path { transition: stroke-dashoffset 1.2s .3s ease; }
html.anim-on .anim-subrayado:not(.anim-in) { opacity: 0; translate: 0 20px; }

html.anim-on .anim-s-zoom { scale: calc(1.18 - var(--ap, 1) * 0.18); }
html.anim-on .anim-s-girar { rotate: calc(-14deg + var(--ap, .5) * 28deg); }
html.anim-on .anim-s-horizontal { translate: calc(8% - var(--ap, .5) * 16%) 0; }
.p-marquee, .marca-cinta, .marca-pilares { rotate: var(--av, 0deg); transition: rotate .25s linear; }

@media (max-width: 768px) {
    html.anim-on .anim-desliza:nth-child(odd):not(.anim-in), html.anim-on .anim-desliza:nth-child(even):not(.anim-in) { translate: 0 60px; }
    html.anim-on .anim-s-horizontal { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
    .p-marquee, .marca-cinta, .marca-pilares { rotate: none; }
}