/* ========================================
   RESELLER V2
======================================== */

.reseller-v2{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(
            circle at 14% 30%,
            rgba(0,190,255,.1),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 35%,
            rgba(135,40,255,.13),
            transparent 35%
        ),
        #050712;
}

.reseller-v2__container{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-areas:
        "content visual"
        "button visual";
    column-gap:100px;
    row-gap:30px;
    align-items:center;
}

.reseller-v2__content{
    grid-area:content;
}

.reseller-v2__visual{
    grid-area:visual;
}

.reseller-v2__button--shared{
    grid-area:button;
    justify-self:start;
    margin-top:0;
}

.reseller-v2__content{
    min-width:0;
    max-width:580px;
}

.reseller-v2__eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 18px;
    border:1px solid rgba(87,166,255,.22);
    border-radius:999px;
    background:rgba(17,28,49,.58);
    color:#74d7ff;
    font-size:12px;
    font-weight:800;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.reseller-v2__title{
    max-width:580px;
    margin:25px 0 0;
    color:#fff;
    font-size:clamp(44px,4.4vw,64px);
    font-weight:850;
    line-height:1.07;
    letter-spacing:-.05em;
}

.reseller-v2__title span{
    display:block;
    margin-top:10px;
    padding-bottom:.14em;
    line-height:1.08;
    background:
        linear-gradient(
            90deg,
            #16d5ff 0%,
            #4f75ff 52%,
            #a934ff 100%
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.reseller-v2__description{
    max-width:550px;
    margin:24px 0 0;
    color:#9ba8bc;
    font-size:17px;
    line-height:1.75;
}

.reseller-v2__features{
    display:grid;
    gap:16px;
    margin-top:38px;
}

.reseller-v2__feature{
    position:relative;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:19px;
    align-items:start;
    min-width:0;
    padding:21px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:
        linear-gradient(
            145deg,
            rgba(16,24,45,.86),
            rgba(7,10,20,.93)
        );
    box-shadow:
        0 18px 45px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.04);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.reseller-v2__feature::after{
    content:"";
    position:absolute;
    right:-65px;
    bottom:-85px;
    width:160px;
    height:160px;
    border-radius:50%;
    background:rgba(87,68,255,.13);
    filter:blur(42px);
    pointer-events:none;
}

.reseller-v2__feature:hover{
    transform:translateY(-5px);
    border-color:rgba(78,184,255,.3);
    box-shadow:
        0 26px 60px rgba(0,0,0,.32),
        0 0 30px rgba(67,84,255,.1);
}

.reseller-v2__feature-number{
    position:relative;
    z-index:2;
    width:54px;
    height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(86,195,255,.28);
    border-radius:16px;
    background:
        linear-gradient(
            135deg,
            rgba(18,207,255,.15),
            rgba(157,48,255,.19)
        );
    color:#7bdcff;
    font-size:13px;
    font-weight:900;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 24px rgba(45,88,255,.12);
}

.reseller-v2__feature h3{
    position:relative;
    z-index:2;
    margin:2px 0 0;
    color:#fff;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.02em;
}

.reseller-v2__feature p{
    position:relative;
    z-index:2;
    margin:9px 0 0;
    color:#9aa6bb;
    font-size:14px;
    line-height:1.65;
}

.reseller-v2__button{
    min-height:62px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    margin-top:30px;
    padding:0 34px;
    border:1px solid rgba(75,201,255,.5);
    border-radius:18px;
    background:
        linear-gradient(
            110deg,
            #16d1ff 0%,
            #397cff 52%,
            #a92dff 100%
        );
    color:#fff;
    font-size:16px;
    font-weight:800;
    text-decoration:none;
    box-shadow:
        0 16px 36px rgba(36,102,255,.28),
        0 0 30px rgba(151,43,255,.16);
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.reseller-v2__button:hover{
    transform:translateY(-3px);
    box-shadow:
        0 21px 45px rgba(36,102,255,.36),
        0 0 38px rgba(151,43,255,.22);
}

/* Ocultar el segundo bot¨®n en computadora y tableta */
.reseller-v2 .reseller-v2__button--mobile{
    display:none !important;
}

/* ========================================
   IMAGEN
======================================== */

.reseller-v2__visual{
    position:relative;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.reseller-v2__image-glow{
    position:absolute;
    inset:8% 4%;
    border-radius:42%;
    background:
        radial-gradient(
            circle,
            rgba(122,45,255,.38),
            rgba(28,105,255,.17) 46%,
            transparent 72%
        );
    filter:blur(58px);
    pointer-events:none;
}

.reseller-v2__image{
    position:relative;
    z-index:2;
    width:100%;
    max-width:720px;
    height:auto;
    display:block;
    border-radius:27px;
    object-fit:cover;
    box-shadow:
        0 36px 88px rgba(0,0,0,.46),
        0 0 45px rgba(94,55,255,.15);
}

.reseller-v2__floating-card{
    position:absolute;
    z-index:3;
    right:-35px;
    bottom:55px;

    width:min(320px, 76%);
    padding:24px;

    border:1px solid rgba(112, 210, 255, .22);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 17, 36, .92),
            rgba(18, 12, 42, .9)
        );

    box-shadow:
        0 26px 65px rgba(0, 0, 0, .48),
        0 0 38px rgba(66, 111, 255, .16),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}
.reseller-v2__floating-card::before{
    content:"";
    position:absolute;
    top:-2px;
    left:24px;

    width:56px;
    height:3px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #18d5ff,
        #5077ff,
        #ad35ff
    );

    box-shadow:0 0 18px rgba(72, 116, 255, .55);
}
.reseller-v2__floating-card:hover{
    transform:translateY(-5px);
    border-color:rgba(112, 210, 255, .34);

    box-shadow:
        0 32px 75px rgba(0, 0, 0, .54),
        0 0 46px rgba(66, 111, 255, .22),
        inset 0 1px 0 rgba(255, 255, 255, .1);
}

.reseller-v2__floating-card span,
.reseller-v2__floating-card strong,
.reseller-v2__floating-card small{
    display:block;
}

.reseller-v2__floating-card span{
    color:#75ddff;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.reseller-v2__floating-card strong{
    margin-top:10px;
    color:#fff;
    font-size:23px;
    line-height:1.2;
}

.reseller-v2__floating-card small{
    margin-top:10px;
    color:#a2aec3;
    font-size:13px;
    line-height:1.55;
}
/* Estado por defecto: escritorio y tableta */
.reseller-v2__button.reseller-v2__button--mobile{
    display:none !important;
}

.reseller-v2__button.reseller-v2__button--desktop{
    display:inline-flex !important;
}

/* ========================================
   TABLET
======================================== */

@media(max-width:991px){

    .reseller-v2__container{
    grid-template-columns:1fr;
    grid-template-areas:
        "content"
        "visual"
        "button";
    gap:50px;
}

    .reseller-v2__content{
        max-width:760px;
    }

    .reseller-v2__visual{
        max-width:800px;
        margin:0 auto;
    }

    .reseller-v2__image{
        max-width:800px;
    }

}

/* ========================================
   Mﾃ天IL
======================================== */

@media (max-width:700px){

    .reseller-v2{
        padding:80px 0;
    }

    .reseller-v2__container{
        grid-template-columns:1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        gap:40px;
    }

    .reseller-v2__content{
        max-width:100%;
    }

    .reseller-v2__title{
        font-size:clamp(38px,11vw,52px);
    }

    .reseller-v2__description{
        font-size:16px;
    }

    .reseller-v2__features{
        margin-top:30px;
    }

    .reseller-v2__feature{
        grid-template-columns:50px 1fr;
        gap:15px;
        padding:18px;
        border-radius:18px;
    }

    .reseller-v2__feature-number{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:12px;
    }

    .reseller-v2__feature h3{
        font-size:18px;
    }

    .reseller-v2__visual{
        width:100%;
        max-width:100%;
        margin:0 auto;
    }

    .reseller-v2__image{
        width:100%;
        max-width:100%;
        height:auto;
        border-radius:20px;
        display:block;
    }

    /* Ocultar la tarjeta flotante en celular */
    .reseller-v2__floating-card{
        display:none;
    }

    .reseller-v2__button--shared{
    width:100%;
    justify-self:stretch;
    margin-top:15px;
}

}