/* ==========================================================================
   PB Design System
   CORE · Icons
   ========================================================================== */

/* --------------------------------------------------------------
   Listas con iconos
-------------------------------------------------------------- */

.pb-root .lista-iconos {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------
   Redes sociales
-------------------------------------------------------------- */

.pb-root .redes-sociales {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--space-3) * 1.15);
}

.pb-root .enlace-social {
    display: inline-flex;
    width: 2.53rem;
    height: 2.53rem;
    border-radius: var(--radio-pill);
    color: var(--color-blanco);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.pb-root .enlace-social:hover {
    transform: translateY(-2px);
    opacity: .88;
}

.pb-root .icono-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.53rem;
    height: 2.53rem;
    border-radius: var(--radio-pill);
}

.pb-root .icono-social svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* --------------------------------------------------------------
   Colores sociales
-------------------------------------------------------------- */

.pb-root .social-instagram .icono-social {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.pb-root .social-facebook .icono-social {
    background: #1877f2;
}

.pb-root .social-whatsapp .icono-social {
    background: #25d366;
}