:root {
            --blanco: #ffffff;
            --negro: #1a1a1a;
            --azul-oscuro: #0a1f44;
            --azul-brillante: #007bff;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--blanco);
            color: var(--negro);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .container {
            text-align: center;
            padding: 30px;
            max-width: 1200px;
        }

        /* --- ANIMACIONES --- */

        /* Animación de Rebote para el Logo */
        @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.3) translateY(-200px); }
            50% { opacity: 1; transform: scale(1.05) translateY(30px); }
            70% { transform: scale(0.9) translateY(-10px); }
            100% { transform: scale(1) translateY(0); }
        }

        /* Animación de Aparición Suave para el Texto */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- ELEMENTOS --- */

        .logo {
            width: 300px; 
            height: auto;
            margin-bottom: 10px;
            animation: bounceIn 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
        }

        h1 {
            font-size: 3.2rem;
            margin: 10px 0;
            text-transform: uppercase;
            letter-spacing: 6px;
            color: var(--azul-oscuro);
            animation: fadeInUp 1s ease-out 0.8s both;
        }

        h1 span {
            color: #e17459;
        }

        p {
            font-size: 1.3rem;
            color: #555;
            font-weight: 300;
            line-height: 1.6;
            margin-top: 15px;
            animation: fadeInUp 1s ease-out 1.1s both;
        }

        /* Responsividad */
        @media (max-width: 600px) {
            h1 { font-size: 2rem; letter-spacing: 2px; }
            p { font-size: 1rem; padding: 0 10px; }
            .logo { width: 250px; }
        }