.franja-creadora {
    position: relative;
    overflow: hidden;
    background: var(--negro);
    color: var(--blanco);
    font-size: 13px;
    padding: 10px 48px;
    animation: franjaEntra 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes franjaEntra {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: none; }
}

/* Brillo que cruza la franja */
.franja-creadora::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    left: -140px;
    background: linear-gradient(90deg, transparent, rgba(var(--morado-rgb), 0.35), transparent);
    animation: franjaBrillo 5s ease-in-out infinite;
    pointer-events: none;
}



.fc-creadora,
.fc-cliente {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.fc-cliente { display: none; justify-content: center; gap: 14px; }
body.modo-cliente .fc-creadora { display: none; }
body.modo-cliente .fc-cliente { display: flex; }

.fc-titulo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 15px;
}

.fc-titulo em { color: var(--acento); }

.fc-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento);
    animation: avatarHalo 1.8s ease-out infinite;
}

.fc-espacio { flex: 1; }

.franja-creadora a,
.franja-creadora button {
    color: inherit;
    font-size: 13px;
    text-decoration: none;
    opacity: 0.85;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.franja-creadora a:hover,
.franja-creadora button:hover { opacity: 1; border-color: currentColor; }

@media (max-width: 860px) { .franja-creadora { padding: 10px 24px; } }
@media (max-width: 720px) { .fc-creadora { gap: 14px; } .fc-espacio { display: none; } }