/* =========================================
   1. Reset Básico
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100vh;
    font-family: 'Manrope', sans-serif; /* Tipografía oficial de Reyco para el cuerpo */
    overflow: hidden; /* Evita el scroll para mantener el formato split screen puro */
}

/* =========================================
   2. Layout Principal (Escritorio por defecto)
   ========================================= */
.split-layout {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh; /* Ocupa el 100% de la altura de la ventana */
}

/* Animación de entrada al cargar la página */
@keyframes fadeUpEntrance {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Transiciones base suaves para los paneles */
.left-panel, 
.right-panel {
    flex: 1; /* Toma el 50% del espacio disponible cada uno */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Transición premium y sedosa */
    animation: fadeUpEntrance 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* Entrada cinemática */
}

.left-panel {
    background-color: #ffffff; 
    position: relative;
    /* Borde central de 1px removido para unión perfecta de gradientes */
}

.right-panel {
    background-color: #ffffff; 
    position: relative;
}

/* Líneas de gradiente decorativas que pasan por detrás de los logos */
.left-panel::before,
.right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px; /* Banda ancha de gradiente como en tu ejemplo */
    z-index: 0; /* Detrás del logo */
    pointer-events: none;
    opacity: 0; /* MINIMALISMO: Ocultos por defecto */
    transition: opacity 0.6s ease; /* Transición muy suave */
}

/* Solo mostramos el gradiente cuando el usuario interactúa con ese lado */
.left-panel:hover::before,
.right-panel:hover::before {
    opacity: 1;
}

.left-panel::before {
    right: 0; /* Pegado al centro (borde derecho del panel izquierdo) */
    /* Amarillo sólido a la derecha difuminado hacia transparente a la izquierda */
    background: linear-gradient(to left, rgba(249, 214, 0, 0.4), transparent);
}

.right-panel::before {
    left: 0; /* Pegado al centro (borde izquierdo del panel derecho) */
    /* Rojo sólido a la izquierda difuminado hacia transparente a la derecha */
    background: linear-gradient(to right, rgba(205, 6, 6, 0.4), transparent);
}

/* =========================================
   5. MAGIA UX / UI (Foco interactivo)
   ========================================= */
/* Cuando el mouse entra al contenedor principal, atenuamos levemente AMBOS paneles... */
.split-layout:hover .left-panel,
.split-layout:hover .right-panel {
    opacity: 0.3;
    filter: grayscale(70%);
}

/* ...pero devolvemos el color y opacidad al panel que REALMENTE tiene el mouse encima */
.split-layout .left-panel:hover,
.split-layout .right-panel:hover {
    opacity: 1;
    filter: grayscale(0%);
    z-index: 20;
}

/* Enlaces que contienen el logo */
.logo-link {
    position: relative;
    z-index: 10; /* Asegura que los logos estén por encima de la línea decorativa */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75%;
    max-width: 550px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

/* Efecto táctil (retroalimentación física al hacer clic) */
.logo-link:active {
    transform: scale(0.96);
}

/* =========================================
   6. Tipografía Deslizante Nivel Dios
   ========================================= */
.hover-text {
    margin-top: 40px;
    font-family: 'Outfit', sans-serif; /* Tipografía oficial de Reyco para encabezados/acento */
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0; /* Totalmente invisible por defecto */
    transform: translateY(15px); /* Desplazado ligeramente hacia abajo */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Colores corporativos para la tipografía */
.hover-text-reyco { color: #013a87; }
.hover-text-reytop { color: #cd0606; }

/* Cuando pasamos el mouse por el panel, el texto se desliza elegantemente hacia arriba */
.left-panel:hover .hover-text,
.right-panel:hover .hover-text {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   3. Estilos de los Logos y Animaciones
   ========================================= */
.logo {
    width: 100%; /* Ahora toma el ancho de su contenedor .logo-link */
    height: auto;
    object-fit: contain;
    
    /* La transición suave para la microanimación */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* Microanimación en estado 'hover' */
.logo:hover {
    transform: scale(1.05); /* Efecto de acercamiento sutil */
    /* Opcional: puedes añadir un brillo o sombra para resaltar más */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

/* =========================================
   4. Diseño Responsivo (Móvil)
   ========================================= */
@media (max-width: 768px) {
    .split-layout {
        flex-direction: column; /* Apila los paneles verticalmente */
    }
}