/* =========================================================================
   WIZAY - Pie de página: redes con logo
   Ubicación: /css/pie.css
   Solo se carga cuando alguna red se muestra con icono (ver includes/footer.php).
   El logo es un .svg de /media/icons/ usado como máscara: toma el color del texto
   del enlace (beige) y pasa a naranja al pasar el ratón, igual que .red-link.
   ========================================================================= */

.redes-artisticas.redes-con-iconos {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 14px;
    column-gap: 22px;
}

.red-link-icono {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

.red-icono {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.35em;
    height: 1.35em;
    background-color: currentColor;
    -webkit-mask: var(--red-icono) center / contain no-repeat;
            mask: var(--red-icono) center / contain no-repeat;
}

/* Solo icono: logo más grande, con zona de toque cómoda; el nombre queda solo para lectores de pantalla */
.red-link-solo {
    padding: 8px;
}

.red-link-solo .red-icono {
    width: 1.7em;
    height: 1.7em;
}

.red-link-solo .red-nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.redes-artisticas.redes-con-iconos:has(.red-link-solo) {
    column-gap: 10px;
}