/* ======================================
COMPONENTE PROPIO VISUAL: home-help-links 
========================================*/
.help-links{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    margin: 10px;
    padding:24px;
    border:1px solid var(--color-border);
    border-radius: 8px;
    background:#fff;

}

.help-card{
    display:flex;
    align-items:flex-start;
    gap:14px;

    text-decoration:none;
    color: (--color-text);

    transition:.25s;
}

.help-card:hover{
    transform:translateY(-3px);
}

.help-card__icon{
    width:56px;
    height:56px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.help-card__icon svg{
    width:26px;
    height:26px;
}

.help-card__content h3{
    margin:0;
    font-size:18px;
    line-height:1.2;
    font-weight:700;
}

.help-card__content p{
    margin:8px 0 0;
    font-size:14px;
    line-height:1.45;
    color:var(--color-text-long);
}

/* Colores */

.help-card__icon--pink{
    background:var(--rosa-fucsia);
    color:var(--rosa-suave);
}

.help-card__icon--yellow{
    background: #FCEFC675;
    color:var(--color-acento);
}

.help-card__icon--green{
    background:var(--verde-claro);
    color:var(--verde-oscuro);
}

.help-card__icon--purple{
    background:var(--lila);
    color:var(--violeta);
}

.help-card__icon--blue{
    background:var(--celeste);
    color:var(--azul);
}

/* Tablet */

@media (max-width:992px){

    .help-links{
        grid-template-columns:repeat(3,1fr);
    }

}
/* Mobile */
@media (max-width:768px){

    .help-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .help-card{
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .help-card__content{
        text-align: center;
    }

    .help-card:last-child{
        grid-column: 1 / -1;
        justify-self: center;
    }

    .help-card__icon{
        width:50px;
        height:50px;
    }

    .help-card__content h3{
        font-size:16px;
    }

    .help-card__content p{
        font-size:13px;
    }

}

/* Móviles muy pequeños */

@media (max-width:480px){

    .help-links{
        padding:16px;
    }

    .help-card{
        gap:10px;
    }

    .help-card__icon{
        width:44px;
        height:44px;
    }

    .help-card__icon svg{
        width:22px;
        height:22px;
    }

}