/* ================= HABILIDADES TÉCNICAS ================= */

.habilidades-tecnicas,
.habilidades-blandas{
    padding: 70px 80px 0px 80px;
    background: var(--blanco-cloud);
}

.encabezado-habilidad{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom: 55px;
}

.linea-gradiente{
    width: 190px;
    height: 5px;
    border-radius: 999px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--royal-blue), var(--serenity), var(--peach));
}

.grupo-skills{
    margin-bottom: 72px;
}

/* subtitulo */
.label-figma {
    width: fit-content;
    min-width: 300px;
    margin: 0 auto 34px;
    text-align: center;
    padding: 13px 28px;
    color: var(--royal-blue);
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 6px;
    position: relative;
    background: rgba(240,238,233,.35);
}

.sq.tl {
    top: -7px;
    left: -7px;
}

.sq.tr {
    top: -7px;
    right: -7px;
}

.sq.bl {
    bottom: -7px;
    left: -7px;
}

.sq.br {
    bottom: -7px;
    right: -7px;
}

/* ========== SLIDER HORIZONTAL ========== */
.skills-slider-wrap{
    width: 100%;
    overflow: hidden;
}

.skills-scroll{
    display: flex;
    gap: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 6px 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    transition: transform .25s ease, box-shadow .25s ease;
}

.skills-scroll::-webkit-scrollbar{
    display: none;
}

.skills-scroll:active{
    cursor: grabbing;
}

.skill-card{
    flex: 0 0 auto;
    width: 180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.skill-capsule{
    width: 150px;
    height: 240px;
    border: 2px solid rgba(145,167,208,.9);
    border-radius: 100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 12px 10px;
    background: transparent;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}

.skills-scroll,
.skills-scroll *{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.skills-scroll img{
    -webkit-user-drag: none;
   /* user-drag: none;*/
    pointer-events: none;
}

.skill-card,
.skill-capsule,
.skill-card h4,
.skill-capsule small{
    user-select: none;
    -webkit-user-select: none;
}


.skill-card:hover .skill-capsule{
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(57,101,220,.10);
}

.soft-num-tec{
    display:block;
  font-size: 1.15rem;
  color: rgba(48,49,59,.9);
  margin-top: -20px;
  margin-bottom: 20px;
}

.skill-capsule img{
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 12px;
}

.skill-bar{
    width: 80px;
    height: 5px;
    border-radius: 999px;
    background: #878787;
    overflow: hidden;
    margin: 10px 0 4px;
}

.skill-bar span{
    display:block;
    height:100%;
    background: var(--peach);
    border-radius: 999px;
}

.skill-capsule small{
    font-size: .82rem;
    color: rgba(48,49,59,.85);
}

.skill-card h4{
    margin-top: 14px;
    font-size: .95rem;
    font-weight: 500;
    color: rgba(48,49,59,.92);
    line-height: 1.3;
}

/*tarjeta de aprendizaje continuo*/
.skill-capsule-aprendizaje{
    width: 150px;
    height: 240px;
    border: 2px solid rgba(145,167,208,.9);
    border-radius: 100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 12px 10px;
    background: linear-gradient(135deg, rgba(240, 238, 233, 0.6) 0%, rgba(145, 167, 208, 0.7) 48%, rgba(240, 238, 233, 0.6) 100%);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
}

.skill-card-aprendizaje{
    flex: 0 0 auto;
    width: 180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.skill-card-aprendizaje h4{
    margin-top: 14px;
    font-size: .95rem;
    font-weight: 500;
    color: rgba(48,49,59,.92);
    line-height: 1.3;
}

.skill-card-aprendizaje:hover .skill-capsule-aprendizaje{
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(57,101,220,.10);
}



/* ========== BOTONES ABAJO A LA IZQUIERDA ========== */
.skills-controls{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-left: 6px;
}

.scroll-btn{
    width: 54px;
    height: 54px;
    border: 1.8px solid #30313B59;
    border-radius: 16px;
    background: var(--blanco-cloud);
    color: var(--negro-gato);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
   /* box-shadow: 0 6px 16px rgba(0,0,0,.15);*/
}

.scroll-btn:hover{
    transform: translateY(-2px);
    background: var(--negro-gato);
    color: var(--blanco-cloud);
    border-color: rgba(255,255,255,.55);
}

.scroll-btn:active{
    transform: scale(.96);
}

/* ========== APRENDIZAJE CONTINUO ========== */
.aprendizaje-continuo{
    margin-top: 20px;
}

.aprendizaje-card{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(145,167,208,.16), rgba(255,196,167,.18));
    border: 1px solid rgba(145,167,208,.28);
    box-shadow: 0 10px 25px rgba(57,101,220,.06);
}

.aprendizaje-img{
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 24px;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aprendizaje-img img{
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.aprendizaje-texto h3{
    font-size: 1.35rem;
    color: var(--royal-blue);
    margin-bottom: 10px;
}

.aprendizaje-texto p{
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(48,49,59,.88);
    max-width: 760px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px){
    .habilidades-tecnicas,
    .habilidades-blandas{
        padding: 60px 30px 80px;
    }

    .label-figma{
        min-width: unset;
        width: 100%;
        max-width: 320px;
    }

    .aprendizaje-card{
        flex-direction: column;
        text-align: center;
    }

    .aprendizaje-texto p{
        max-width: 100%;
    }
}

@media (max-width: 576px){
    .skills-scroll{
        gap: 22px;
    }

    .skill-card{
        width: 140px;
    }

    .skill-capsule{
        width: 140px;
        height: 220px;
    }

    .scroll-btn{
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 1.3rem;
    }

    .aprendizaje-card{
        padding: 22px 18px;
        border-radius: 22px;
    }
}