/* ========================================
   DEVICES V2
======================================== */

.devices-v2{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    background:
        radial-gradient(
            circle at 12% 24%,
            rgba(0,190,255,.1),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 36%,
            rgba(135,45,255,.12),
            transparent 34%
        ),
        #050712;
}

.devices-v2__header{
    max-width:820px;
    margin:0 auto 60px;
    text-align:center;
}

.devices-v2__eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 18px;
    border:1px solid rgba(87,166,255,.2);
    border-radius:999px;
    background:rgba(37,54,87,.4);
    color:#79d9ff;
    font-size:12px;
    font-weight:800;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.devices-v2__title{
    margin:24px 0 0;
    color:#fff;
    font-size:clamp(40px,4.4vw,62px);
    font-weight:850;
    line-height:1.05;
    letter-spacing:-.05em;
}

.devices-v2__description{
    max-width:680px;
    margin:22px auto 0;
    color:#9aa6bb;
    font-size:17px;
    line-height:1.7;
}

.devices-v2__layout{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:64px;
    align-items:center;
}

.devices-v2__image{
    position:relative;
    min-width:0;
}

.devices-v2__image-glow{
    position:absolute;
    inset:10% 4% 8%;
    border-radius:40%;
    background:
        radial-gradient(
            circle,
            rgba(42,113,255,.25),
            rgba(132,40,255,.18) 45%,
            transparent 72%
        );
    filter:blur(55px);
    pointer-events:none;
}

.devices-v2__image img{
    position:relative;
    z-index:2;
    width:100%;
    height:auto;
    display:block;
    border-radius:26px;
    object-fit:cover;
    box-shadow:
        0 34px 85px rgba(0,0,0,.4),
        0 0 42px rgba(78,75,255,.12);
}

.devices-v2__content{
    min-width:0;
}

.devices-v2__list{
    display:grid;
    gap:16px;
}

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

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

.devices-v2__device: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);
}

.devices-v2__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,.14),
            rgba(157,48,255,.18)
        );
    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);
}

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

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

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

.devices-v2__button:hover{
    transform:translateY(-3px);
    box-shadow:
        0 20px 42px rgba(36,102,255,.34),
        0 0 36px rgba(151,43,255,.2);
}

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

@media(max-width:950px){

    .devices-v2__layout{
        grid-template-columns:1fr;
        gap:42px;
    }

    .devices-v2__image{
        max-width:800px;
        margin:0 auto;
    }

    .devices-v2__content{
        width:100%;
        max-width:800px;
        margin:0 auto;
    }

}

/* ========================================
   MÓVIL
======================================== */

@media(max-width:700px){

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

    .devices-v2__header{
        margin-bottom:40px;
        text-align:left;
    }

    .devices-v2__description{
        margin-left:0;
    }

    .devices-v2__layout{
        gap:32px;
    }

    .devices-v2__image img{
        border-radius:20px;
    }

    .devices-v2__device{
        grid-template-columns:50px minmax(0,1fr);
        gap:15px;
        padding:19px;
        border-radius:18px;
    }

    .devices-v2__number{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:12px;
    }

    .devices-v2__device h3{
        font-size:18px;
    }

    .devices-v2__device p{
        font-size:14px;
    }

    .devices-v2__button{
        width:100%;
    }

}