* { margin: 0; padding: 0; box-sizing: border-box; }
        body, html { height: 100%; font-family: 'Segoe UI', sans-serif; background: #000; overflow: hidden; }

        /* Contenedor Principal */
        .split-wrapper {
            display: flex;
            height: 100vh;
            width: 100vw;
            transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        }

        /* Lados de la pantalla */
        .side {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            text-decoration: none;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            overflow: hidden;
            padding: 20px;
        }

        /* Colores y Fondos */
        .valery-side { background: #002d54; } /* Azul profundo corporativo */
        .innova-side { background: #2b0c00; } /* Naranja/marrón quemado */

        /* Efecto Hover: El lado seleccionado se expande */
        .side:hover { flex: 1.8; }
        .valery-side:hover { background: #0078d4; }
        .innova-side:hover { background: #d83b01; }

        /* Contenido de texto */
        .content {
            text-align: center;
            color: white;
            z-index: 5;
            transition: transform 0.4s ease;
        }
        .side:hover .content { transform: scale(1.1); }

        .content h2 { font-size: 3.5rem; font-weight: 700; margin-bottom: 5px; }
        .content p { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 3px; opacity: 0.8; }
        
        /* Línea decorativa */
        .line {
            width: 50px;
            height: 4px;
            background: white;
            margin: 20px auto;
            transition: width 0.4s ease;
        }
        .side:hover .line { width: 100px; }

        /* Tu Insignia Central */
        .badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 25px 50px;
            z-index: 10;
            text-align: center;
            border-radius: 2px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            pointer-events: none; /* Para que no interfiera con los clics laterales */
        }
        .badge h1 { color: #222; font-size: 1.8rem; font-weight: 700; white-space: nowrap; }
        .badge span { color: #0067b8; font-size: 0.9rem; font-weight: 600; display: block; margin-top: 5px; }

        /* Mobile */
        @media (max-width: 768px) {
            .split-wrapper { flex-direction: column; }
            .side:hover { flex: 1.5; }
            .badge { width: 85%; padding: 15px; top: 50%; }
            .content h2 { font-size: 2.2rem; }
        }