/* Efecto inicial: invisible y un poco abajo */
    .scroll-effect {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-out;
    }

    /* Clase que se activa cuando el elemento está visible */
    .scroll-active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Contenedor principal */
    .vandal-main-container {
        width: 100%;
        min-height: 350px;
        background-image: url('//ueeshop.ly200-cdn.com/u_file/UPAW/UPAW568/2606/01/photo/fondo-f416.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: flex-end; 
        justify-content: center; 
        gap: 5px; 
        padding: 0 10px;
        box-sizing: border-box; /* Importante para el padding */
        overflow: hidden; /* Evita que nada sobresalga */
    }

    .vandal-col {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        min-width: 0; /* Permite que el flex se encoja correctamente */
    }

    /* Imágenes con max-width para que nunca rompan el diseño */
    .vandal-col-left img { width: 100%; max-width: 450px; height: auto; margin-bottom: -15px; }
    .vandal-logo { width: 100%; max-width: 800px; height: auto; margin-bottom: 5px; } 
    .vandal-box { width: 100%; max-width: 350px; height: auto; transition: transform 0.3s ease; margin-bottom: 20px; }
    .vandal-box:hover { transform: scale(1.05); }

    .vandal-btn {
        background-color: #d4ff00; 
        color: #000000; 
        padding: 10px 30px;
        font-size: 1rem;
        text-decoration: none;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 5px;
        transition: 0.3s;
        margin-bottom: 20px;
        white-space: nowrap; /* Evita que el botón se parta */
    }
    .vandal-btn:hover { background-color: #b5d900; }

    /* Adaptación a celular */
    @media (max-width: 768px) {
        .vandal-col-left { display: none !important; }
        .vandal-main-container { flex-direction: column; align-items: center; padding: 15px; }
        
        /* Ajuste de tamaños para celular sin que se desborden */
        .vandal-logo { max-width: 280px !important; } 
        .vandal-box { max-width: 200px !important; }
    }