:root {
        --step-gold: #c5a059;
        --step-black: #000000;
        --step-white: #ffffff;
        --anim-speed: 4.5s; 
    }

    .step-genial-banner {
        width: 100%;
        max-width: 1920px;
        height: 760px;
        position: relative;
        background: var(--step-white);
        overflow: hidden;
        font-family: sans-serif;
    }
    
    .step-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 450px; 
        background: var(--step-black);        
        clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
        z-index: 1;
    }

    .step-content {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 15px;
        text-align: center;
        height: 100%;
    }
    
    .step-subtitle {
        color: var(--step-gold);
        font-size: clamp(14px, 2vw, 18px);
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 10px;
        font-weight: 600;
        padding: 0 20px;
    }

    .step-title {        
        font-size: clamp(32px, 6vw, 75px);
        color: var(--step-white);
        margin: 0;
        letter-spacing: 1px;
        line-height: 1.1;
        font-weight: 800;
    }

    .step-price {
        color: var(--step-white);
        font-size: clamp(18px, 3vw, 28px);
        margin-top: 15px;
        font-weight: 300;
        opacity: 0.9;
    }
    
    .step-cta-wrap {
        margin-top: 20px;
        z-index: 25;
    }

    .step-cta {
        display: inline-block;
        padding: 18px 50px;
        background: var(--step-white);
        color: var(--step-black) !important;
        text-decoration: none;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        border: 2px solid var(--step-white);
        transition: all 0.3s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        animation: cta-pulse 3s infinite;
    }

    @keyframes cta-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); box-shadow: 0 15px 25px rgba(197, 160, 89, 0.4); }
        100% { transform: scale(1); }
    }

    .step-cta:hover {
        background: var(--step-gold);
        border-color: var(--step-gold);
        color: var(--step-white) !important;
    }
    
    .step-photo-grid {
        display: flex;
        gap: 30px;
        margin-top: 40px;
        z-index: 15;
        justify-content: center;
        width: 100%;
        padding: 0 20px;
    }

    .step-photo {
        width: 320px;
        aspect-ratio: 3/4;
        border: 10px solid var(--step-white);
        box-shadow: 0 9px 19px rgba(0,0,0,0.2);
        overflow: hidden;
        background: #f0f0f0;
        transition: transform 0.4s ease;
    }

    .step-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    @media (min-width: 1025px) {    
        .step-photo:hover {
            transform: translateY(-25px) rotate(3deg); 
            box-shadow: 0 16px 26px rgba(0,0,0,0.3);
            border-color: #fcb096;
            z-index: 50;
        }
        .step-photo:hover img {
            transform: scale(1.15);
        }
        
        .step-photo:nth-child(even):hover {
            transform: translateY(-25px) rotate(-3deg);
        }
    }    
    
    @media (max-width: 1024px) {
        .step-genial-banner { height: auto; min-height: 700px; padding-bottom: 50px; }
        .step-bg { height: 400px; }
        
        .step-photo-grid {
            position: relative;
            height: 400px; 
            margin-top: 30px;
        }

        .step-photo {
            position: absolute;
            width: 260px;
            left: 50%;
            margin-left: -130px; 
            opacity: 0;
            animation: mobileSlider var(--anim-speed) infinite linear;
        }
        
        .step-photo:nth-child(1) { animation-delay: 0s; }
        .step-photo:nth-child(2) { animation-delay: 1.5s; }
        .step-photo:nth-child(3) { animation-delay: 3s; }
    }

    @keyframes mobileSlider {
        0% { opacity: 0; transform: scale(0.95); z-index: 1; }
        5% { opacity: 1; transform: scale(1); z-index: 2; }
        33% { opacity: 1; transform: scale(1); z-index: 2; }
        38% { opacity: 0; transform: scale(1.05); z-index: 1; }
        100% { opacity: 0; }
    }