.vacaciones-scene { width: min(100%, 600px); margin: 0 auto; pointer-events: none; contain: layout; }
.vacaciones-scene svg { display: block; width: 100%; height: auto; max-height: 210px; }
.scene-sun { transform-box: fill-box; transform-origin: center; }
.scene-sun-ready { animation: scene-sunrise 650ms ease-out both; }
.scene-accommodation { animation: scene-unfold 500ms ease-out both; transform-box: fill-box; transform-origin: center bottom; }
.scene-equipment { animation: scene-arrive 650ms cubic-bezier(.2,.65,.3,1) both; }
.scene-sector { animation: scene-sign 300ms ease-out both; }
.scene-journey { animation: scene-travel 850ms ease-out both; }
.scene-welcome { animation: scene-sunrise 650ms ease-out both; transform-box: fill-box; transform-origin: center; }
.scene-status { animation: scene-sign 300ms ease-out both; }
.scene-paused * { animation-play-state: paused !important; }
@keyframes scene-sunrise { from { opacity: .45; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scene-unfold { from { opacity: 0; transform: scaleY(.7); } to { opacity: 1; transform: scaleY(1); } }
@keyframes scene-arrive { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scene-sign { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-travel { from { opacity: .2; stroke-dasharray: 2 16; } to { opacity: 1; stroke-dasharray: 16 0; } }
@media (max-width: 767px) { .vacaciones-scene { max-width: 350px; } .vacaciones-scene svg { max-height: 118px; } }
@media (prefers-reduced-motion: reduce) { .vacaciones-scene * { animation: none !important; transition: none !important; } }