/* ============================================================ MOTION Nada se oculta salvo que el JS esté vivo (html.js lo pone un script en línea del ) y hay un failsafe a los 6 s en el JS: si algo falla, ningún bloque se queda invisible. ============================================================ */ .js [data-revelar]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .9s var(--ease); transition-delay:var(--retraso,0s); } .js [data-revelar="izq"]{transform:translateX(-32px)} .js [data-revelar="der"]{transform:translateX(32px)} .js [data-revelar="zoom"]{transform:scale(.94)} .js [data-revelar="cortina"]{ transform:none;clip-path:inset(0 0 100% 0);opacity:1; transition:clip-path 1s var(--ease);transition-delay:var(--retraso,0s); } .js [data-revelar].se-revela{ opacity:1;transform:none;clip-path:inset(0 0 0 0); } /* Titular palabra por palabra */ .js .titular-animado .palabra{ display:inline-block;overflow:hidden;vertical-align:top; } .js .titular-animado .palabra > span{ display:inline-block; transform:translateY(105%) rotate(3deg); transition:transform .85s var(--ease); transition-delay:calc(var(--i,0) * .045s); } .js .titular-animado.se-revela .palabra > span{transform:translateY(0) rotate(0)} /* Inclinación 3D en tarjetas */ .js [data-inclinar]{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s var(--ease-suave); transform-style:preserve-3d; } .js [data-inclinar].esta-activo{transition:transform .1s linear} /* Parallax ligado al scroll */ .js [data-parallax]{will-change:transform} /* Botón magnético */ .js [data-iman]{transition:transform .3s var(--ease-suave)} /* Cifras: reserva el ancho para que no salte al contar */ .cifra__num{min-height:1em} /* ============ ACCESIBILIDAD DEL MOVIMIENTO ============ */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .js [data-revelar], .js .titular-animado .palabra > span{opacity:1 !important;transform:none !important;clip-path:none !important} .hero__slide{transform:none !important} .hero__slide.es-activo .hero__foto{transform:scale(1) !important} .hero__pestana[aria-selected="true"]::after{animation:none;transform:scaleX(1)} .marquesina__pista{animation:none} .js [data-inclinar]{transform:none !important} } /* ============ IMPRESIÓN ============ */ @media print{ .cinta,.cabecera,.hero__ui,.flotantes,.pie__redes,.cajon,.progreso,.marquesina{display:none !important} body{background:#fff;color:#000;font-size:11pt} .hero,.portadilla,.banda{background:#fff !important;color:#000 !important;min-height:auto;padding-block:1.5rem} .hero__escena,.hero__velo,.portadilla__fondo,.portadilla__velo,.banda__fondo,.banda__velo{display:none !important} .hero__titulo,.portadilla h1,.banda h2{color:#000 !important} .hero__panel{position:relative !important;opacity:1 !important;visibility:visible !important;transform:none !important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} .seccion{padding-block:1.5rem;break-inside:avoid} }