:root { --tema: #576574; }
body {
    background: #f4f4f4;
    color: var(--tema);
    margin: 0; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    font-family: 'Segoe UI', sans-serif;
    overflow: hidden;
}
.card {
    text-align: center;
    padding: 50px;
    border-radius: 30px;
    background: white;
    box-shadow: 0 20px 50px #57657422;
    animation: flipInX 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.main-icon { font-size: 100px; margin-bottom: 15px; }
.back-btn {
    margin-top: 25px; display: inline-block;
    padding: 12px 35px; border: 2px solid var(--tema);
    color: var(--tema); text-decoration: none; border-radius: 12px;
    font-weight: 600; transition: 0.3s;
}
.back-btn:hover { background: var(--tema); color: white; transform: scale(1.05); }

/* Keyframes exclusivos por página[cite: 1] */
@keyframes backInDown { 0% { transform: translateY(-1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes jackInTheBox { 0% { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0) rotate(0deg); } }
@keyframes lightSpeedInLeft { 0% { transform: translateX(-100%) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } 100% { transform: translateX(0); } }
@keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-20deg); } 100% { opacity: 1; } }